/* ── AI Operating Map — shared sidebar shell + design tokens ──────────────
   One real stylesheet, linked (not copy-pasted) by every converted page, so
   redesign changes happen in one place. Matches the palette established on
   the AI Operating Map marketing site (aioperatingmap-com/site), not
   techshin-map's original navy/gold tokens. See PRD-ai-operating-map-
   redesign.md at the repo root for the full brief.

   Pattern: light sidebar when expanded (reads as calm, modern SaaS chrome,
   not an admin panel); collapses to a dark navy icon-only rail with light
   icons, matching techshin-hq's expanded/collapsed treatment — a deliberate
   visual signal that something changed, not just narrower. ───────────────── */

/* Internal-page watermark -- home.html's existing treatment (mark-navy.svg,
   .032 opacity) confirmed as the canonical standard: it reads as a true
   neutral grey-on-grey wash with no color cast, unlike the light-blue
   mark-watermark-blue.svg asset tried earlier, which visibly tinted the
   page a distinct blue-grey at this size. Every page with its own
   .page-watermark/.dash-watermark/etc or a smaller variant should use this
   same rule + img tag (src="/brand/mark-navy.svg") instead of a local one. */
.watermark{position:fixed;bottom:-320px;right:-290px;width:900px;height:900px;opacity:.032;transform:rotate(-15deg);pointer-events:none;user-select:none;z-index:0}

:root{
  --bg:#EBEBEB;--card:#FFFFFF;--card-2:#FAFAFA;
  --border:rgba(5,35,68,.12);--border-l:rgba(5,35,68,.07);
  --text:#052344;--mid:#3D3935;--muted:#6B6560;--faint:#8a919c;
  --navy:#052344;
  --amber:#2f5f9e;--amber-bg:#e5edf7;--amber-t:#2f5f9e;
  --red:#EF4444;--red-bg:#FEE2E2;--red-t:#991B1B;
  --r:5px;--r-sm:4px;--r-pill:100px;
  --shadow:0 1px 3px rgba(5,35,68,.08);
  --shadow-lg:0 16px 40px -8px rgba(5,35,68,.16);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;--mono:'DM Mono',monospace;
  --sidebar-w:236px;--sidebar-w-collapsed:68px;--topbar-h:52px;
}
/* height:100vh + overflow:hidden (not min-height) is deliberate: the sidebar
   is position:sticky, which only holds within its containing block's actual
   box — if body is allowed to grow taller than the viewport to fit .app-main's
   content (min-height's old behavior), the flex-stretch height computation
   doesn't reliably hand that extra height back to body's own box, so the
   sidebar runs out of room to stick and scrolls away with the page. Capping
   body at exactly 100vh and letting .app-main scroll internally (below) is
   the same fixed-frame pattern chart.html/doc-vault.html already use. */
body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;display:flex;margin:0;overflow:hidden}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
input{font-family:var(--font);outline:none}
a{color:inherit;text-decoration:none}

.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:#fff;color:var(--text);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0;
  transition:width .32s cubic-bezier(.4,0,.2,1);overflow:hidden;z-index:100;
}
/* Collapsed rail uses navy -- reverted from the lighter --amber blue, which
   by Aug 2026 doesn't appear anywhere else in the app except inside the AI
   logo mark itself; navy is now the dominant action colour (.btn-primary,
   the sidebar "Start here" nudge), so it reads as intentional brand chrome
   rather than an unexplained accent. */
.sidebar.collapsed{width:var(--sidebar-w-collapsed);background:var(--navy);border-right-color:var(--navy)}
.sidebar.collapsed .sb-logo-link{cursor:pointer}
.sidebar.collapsed .sb-link{color:rgba(255,255,255,.68)}
.sidebar.collapsed .sb-link:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar.collapsed .sb-link.active{background:rgba(255,255,255,.22);color:#fff}
.sb-top{display:flex;align-items:center;gap:8px;padding:18px 16px 14px;flex-shrink:0}
.sidebar.collapsed .sb-top{flex-direction:column;padding:18px 0 10px;gap:10px}
.sb-logo-link{display:flex;align-items:center;gap:10px;overflow:hidden;flex:1;min-width:0}
.sidebar.collapsed .sb-logo-link{flex:none;justify-content:center;width:100%}
.sb-logo-mark{width:26px;height:26px;flex-shrink:0}
.sb-logo-text{font-weight:800;font-size:.92rem;color:var(--navy);white-space:nowrap;letter-spacing:-.01em}
.sidebar.collapsed .sb-logo-text,.sidebar.collapsed .sb-link-label{display:none}
.sb-collapse-btn{
  width:22px;height:22px;border-radius:6px;background:var(--card-2);
  color:var(--faint);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.8rem;transition:background .12s,color .12s;cursor:pointer;border:none;
}
.sb-collapse-btn:hover{background:var(--border-l);color:var(--navy)}
.sidebar.collapsed .sb-collapse-btn{display:none}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:4px 10px;flex:1;overflow-y:auto;overflow-x:hidden}
.sb-link{
  display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;
  font-size:.83rem;font-weight:600;color:var(--muted);cursor:pointer;
  white-space:nowrap;text-decoration:none;background:none;border:none;width:100%;text-align:left;
  flex-shrink:0;
}
.sb-link svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor}
.sb-link-imgicon{width:20px;height:20px;flex-shrink:0;object-fit:contain}
/* PowerTools — floated toward the bottom of the scrolling nav's free space
   (margin-top:auto, in a flex column, consumes all the slack above it) so it
   sits down near Members/Settings rather than hugging Work with Us above,
   with a small buffer below so it still reads as its own row, not merged
   into the Members/Settings block. */
#chrome-nav [data-navkey="powertools"]{margin-top:auto;margin-bottom:14px}
.sb-link:hover{background:var(--card-2);color:var(--navy)}
.sb-link.active{background:var(--amber-bg);color:var(--amber)}
.sidebar.collapsed .sb-link{justify-content:center;padding:9px}
/* Icon-only nav rows (e.g. State of AI) — always collapsed to just the icon,
   regardless of sidebar collapse state; the hover title carries the label. */
.sb-link-icononly{justify-content:center}
.sb-link-badge{margin-left:auto;flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:5px;background:#EF4444;color:#fff;font-size:.64rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font)}
.sidebar.collapsed .sb-link-badge{display:none}
/* Progress, not alarm — deliberately not red like the overdue-count badges above */
.sb-link-badge.progress{background:var(--card-2);color:var(--amber);border:1px solid rgba(47,95,158,.25);font-family:var(--mono)}
/* Getting-started nudge -- shown on the Maps nav link only while the org has
   zero maps (any map, demo or real, clears it; see _checkStartHereNudge in
   org-chrome.js). Styled like a real button (same radius/weight as .btn),
   not a pill, with a leading arrow that nudges gently toward the link it's
   labelling instead of a generic pulse. Deliberately NOT a background wash
   on the row itself -- that's var(--amber-bg), the same treatment .sb-link.
   active already uses for "this is the page you're on", so reusing it here
   would read as Maps being the current page even when it isn't. */
.sb-link-nudge{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:var(--navy);color:#fff;font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;animation:sbNudgeNod 1.6s ease-in-out infinite}
.sb-link-nudge svg{width:11px;height:11px;flex-shrink:0;stroke:currentColor}
.sidebar.collapsed .sb-link-nudge{display:none}
@keyframes sbNudgeNod{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.sb-nav-sep{height:1px;background:var(--border-l);margin:22px 6px 8px}
.sidebar.collapsed .sb-nav-sep{margin:22px 4px 8px}

/* Sidebar-bottom NAV section — Admin/Members/Settings on org-level pages.
   Distinct from .sb-bottom (below), which is the identity/status cluster
   that now lives in the top bar, not the sidebar. */
.sb-bottom-nav{padding:10px;border-top:1px solid var(--border-l);display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.sidebar.collapsed .sb-bottom-nav{border-top-color:rgba(255,255,255,.1)}

/* Hover-to-peek was tried and dropped: it used position:fixed (an overlay)
   specifically so it wouldn't reflow the page, but that's exactly what made
   it cover pages with their own secondary panel (Doc Vault's document list)
   instead of pushing them aside. Icons keep their title="" tooltip; a
   deliberate click on the logo (see org-chrome.js) is the only way to
   expand — that toggles the real state and reflows the layout properly,
   so nothing gets covered. */

/* .app-main is the one deliberate scroll container (height:100vh + overflow-y:
   auto) — see the note on body above for why. Pages whose own JS listens for
   scroll on `window` (e.g. glossary.html's letter-nav highlight) need to
   listen on .app-main instead now that it's the element that actually scrolls. */
/* scrollbar-gutter:stable keeps this element's content width constant whether
   or not a scrollbar is actually drawn -- without it, any dialog that locks
   this element to overflow:hidden while open (dialog-tabs.js's
   _dtLockBackgroundScroll) removes the scrollbar's reserved width, and
   restoring it on close changes the available width for anything using
   CSS grid auto-fill (e.g. maps.html's card grid), which visibly reflows
   cards into new positions right as the dialog closes. */
.app-main{flex:1;min-width:0;height:100vh;overflow-y:auto;overflow-x:clip;scrollbar-gutter:stable}

/* ── Top bar — org/map breadcrumb (left) + identity/status cluster (right).
   Sits inside .app-main, above the page content, so it only spans the
   content area (not the sidebar). Sticky within normal window scroll,
   same mechanism the old fixed top chrome bar used. ── */
.topbar{
  height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:#fff;border-bottom:1px solid var(--border-l);
  position:sticky;top:0;z-index:90;gap:16px;
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden}
.topbar-left .sb-org-chip{margin:0}

.sb-org-chip{padding:6px 10px;display:flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--border);border-radius:8px;font-size:.72rem;font-weight:700;color:var(--mid);white-space:nowrap;overflow:hidden;transition:background .12s,border-color .12s}
.sb-org-chip:empty{display:none}
.sb-org-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0}
.sb-org-chip--danger{color:var(--red-t)}
.sb-org-chip--danger::before{background:var(--red)}
.sb-org-chip:hover{background:var(--border-l);border-color:rgba(5,35,68,.2)}
.sb-org-chip a{color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}

/* .sb-bottom = the topbar-right identity/status cluster: org-back, help,
   Learning Path, AI Champion, user pill — all compact/inline here. */
.sb-bottom{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Org-wide search — injected by org-chrome.js / shared.js, styled once here
   since both files share the topbar it lives in. */
.sb-search-wrap{position:relative;display:flex;align-items:center;margin-right:6px}
.sb-search-icon{position:absolute;left:9px;color:var(--faint);pointer-events:none}
.sb-search-input{width:150px;padding:6px 10px 6px 28px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:.74rem;font-family:var(--font);background:#fff;color:var(--text);transition:width .15s,border-color .15s}
.sb-search-input:focus{outline:none;width:250px;border-color:var(--amber)}
.sb-search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;width:360px;max-height:380px;overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:500}
.sb-search-results.open{display:block}
.sb-search-empty,.sb-search-hint{padding:14px;font-size:.72rem;color:var(--faint);text-align:center}
.sb-search-row{display:block;padding:8px 12px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border-l)}
.sb-search-row:last-child{border-bottom:none}
.sb-search-row:hover{background:var(--card-2,#FAFAFA)}
.sb-search-row-main{font-size:.78rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-search-row-main b{font-weight:700}
.sb-search-row-main mark{background:rgba(47,95,158,.18);color:var(--amber-t,#2f5f9e);padding:0 1px;border-radius:2px}
.sb-search-row-map{font-size:.62rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Same small-rectangle language as .status-badge (tool-register.html) and
   the ARCHIVED text on a map card (maps.html) -- a search hit from an
   archived map should read as clearly not-live without hiding it. */
.sb-search-archived-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.58rem;font-weight:700;letter-spacing:.04em;color:#EF4444;background:rgba(239,68,68,.1);vertical-align:middle}
.sb-champion-badge{
  display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  font-size:.68rem;font-weight:700;text-align:left;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer;font-family:inherit;box-sizing:border-box;max-width:220px;
}
.sb-util-btn{
  width:28px;height:28px;flex:0 0 auto;border-radius:8px;background:var(--card-2);
  border:1px solid var(--border);color:var(--muted);display:inline-flex;align-items:center;
  justify-content:center;font-size:.74rem;font-weight:700;text-decoration:none;
  transition:background .12s,color .12s,border-color .12s;
}
.sb-util-btn:hover{background:var(--border-l);color:var(--navy);border-color:rgba(5,35,68,.2)}

.user-pill{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:background .15s;flex-shrink:0}
.user-pill:hover,.user-pill.open{background:var(--card-2)}
.user-av{width:24px;height:24px;border-radius:50%;background:var(--amber-bg);border:1px solid rgba(47,95,158,.3);display:flex;align-items:center;justify-content:center;font-size:.52rem;font-weight:500;color:var(--amber);font-family:var(--mono);flex-shrink:0}
.user-name{font-size:.67rem;font-weight:600;color:var(--mid);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chevron{font-size:.52rem;color:var(--faint);flex-shrink:0;transition:transform .15s;margin-left:1px}
.user-pill.open .user-chevron{transform:rotate(180deg)}
.user-menu{position:fixed;top:calc(var(--topbar-h) + 8px);right:20px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 0 4px;min-width:224px;z-index:200;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .14s,transform .14s}
.user-menu.open{opacity:1;transform:translateY(0);pointer-events:all}
.um-ctx{padding:7px 14px 5px}
.um-ctx-lbl{font-size:.52rem;font-weight:500;font-family:var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.09em;margin-bottom:2px}
.um-ctx-val{font-size:.75rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-email-row{padding:2px 14px 8px;font-size:.62rem;color:var(--faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-sep{height:1px;background:var(--border-l);margin:3px 0}
.um-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 14px;font-size:.73rem;font-weight:600;color:var(--mid);background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font);transition:background .1s,color .1s}
.um-item:hover{background:var(--card-2);color:var(--navy)}
.um-item.danger{color:rgba(239,68,68,.8)}
.um-item.danger:hover{background:rgba(239,68,68,.08);color:#EF4444}

.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r-sm);font-size:.74rem;font-weight:700;cursor:pointer;transition:background .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--navy);color:#fff;font-weight:700}.btn-primary:hover{background:#08315e}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--mid)}.btn-ghost:hover{background:var(--card-2);color:var(--text)}
.btn-sm{padding:4px 10px;font-size:.68rem}

@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:500}
}