/* Meltbox shell chrome: brand, workspace switcher, sidebar nav, topbar,
   statusbar, palette, and the Briefs/Projects/Documents page layouts. */

/* Lock the SHELL document so it can never scroll or overscroll — the inner panes
   scroll instead. This kills iOS Safari pull-to-refresh and stops the document
   from swallowing the touch that should scroll the briefs list. Only the shell
   loads shell.css, so brief/app iframes keep their normal document scrolling. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { display: flex; flex-direction: column; height: 100%; overflow: hidden; overscroll-behavior: none; }
#app-row { flex: 1; min-height: 0; display: flex; overflow: hidden; overscroll-behavior: none; }

/* thin legal bar: full-width, dark in EVERY theme (constant ink over the cream
   palette), small type — the only place Terms/Privacy/© live. */
#legalbar {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 20px;
  padding: 5px 12px calc(5px + env(safe-area-inset-bottom, 0px));
  background: #1F1C16; color: rgba(247, 243, 234, .5); font: 400 10px/1 var(--sans);
}
#legalbar a { color: rgba(247, 243, 234, .72); text-decoration: none; }
#legalbar a:hover { color: #F7F3EA; text-decoration: underline; }
#legalbar .copy { margin-left: auto; }
/* phones: the links center as one wrapping row and the © gets its own
   centered line, instead of the desktop layout squeezing into an ugly wrap.
   Half the safe-area inset: the full inset existed to keep edge-aligned text
   out of the iPhone's rounded corners, but centered content clears them, so
   the bar sits lower and only keeps enough to stay off the home indicator.
   env() is 0 outside standalone/notch devices, so nothing else moves. */
@media (max-width: 760px) {
  #legalbar {
    flex-wrap: wrap; justify-content: center; row-gap: 6px;
    padding: 5px 12px calc(5px + env(safe-area-inset-bottom, 0px) / 2);
  }
  #legalbar .copy { flex-basis: 100%; margin-left: 0; text-align: center; }
}

/* mobile drawer scrim — dismisses the nav on phones (JS un-hides it only when the
   drawer is open AND below the breakpoint; the toggle sits under the drawer). */
#nav-scrim { position: fixed; inset: 0; z-index: 590; background: var(--overlay); }
#nav-scrim[hidden] { display: none; }

/* ── sidebar ───────────────────────────────────────────────────────────── */
#sidebar {
  width: 232px; flex: none; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--band); border-right: 1px solid var(--border);
}

/* ── top box: brand lockup + workspace switcher (no taller than the topbar) ── */
#ws-switch {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 38px; flex: none; padding: 0 10px;
  border-bottom: 1px solid var(--border);
}
.nav-mark { flex: none; display: inline-flex; width: 18px; height: 18px; }
.nav-mark svg { width: 18px; height: 18px; display: block; } /* solid purple AL mark — never themed */
.nav-word { flex: none; font: 800 13px/1 var(--sans); letter-spacing: -0.01em; color: var(--text-bright); }

/* ── PWA Window Controls Overlay: reclaim the OS title bar ────────────────────
   When installed on desktop with manifest display_override
   ["window-controls-overlay"], Chromium removes its own title bar (no more
   duplicate "Meltbox" centered above our logo) and instead floats ONLY the OS
   window buttons over the top of our chrome — macOS traffic lights top-LEFT,
   Windows min/max/close top-RIGHT. So the top strip (brand lockup + topbar) is
   now the native title bar: we make it draggable, keep every control clickable,
   and — the important part — inset the brand lockup past the traffic lights so
   they always have room and never sit on top of the Meltbox mark.
   env(titlebar-area-*) describe the free draggable band: x = its left edge
   (= right of the macOS traffic lights; 0 on Windows), width = its span; the
   right-hand buttons (Windows) occupy 100vw − x − width. All 0 when WCO is
   unsupported, so these rules no-op in plain standalone / the browser tab. */
@media (display-mode: window-controls-overlay) {
  /* the whole top edge behaves like a native title bar → draggable */
  #ws-switch, #topbar { -webkit-app-region: drag; app-region: drag; }
  /* …but every actual control stays clickable (a drag region eats the click) */
  #ws-switch a, #ws-switch button,
  #topbar a, #topbar button, #topbar input, #topbar select, #topbar label, #topbar .cc-btn {
    -webkit-app-region: no-drag; app-region: no-drag;
  }
  /* brand lockup shares the strip with the traffic lights → push it clear */
  #ws-switch { padding-left: calc(10px + env(titlebar-area-x, 0px)); }
  /* sidebar collapsed → the topbar is now the leftmost strip; give the lights
     room there too (nav toggle re-appears at ⌘B / on phones, hence no-drag). */
  body.nav-collapsed #topbar { padding-left: calc(10px + env(titlebar-area-x, 0px)); }
  /* narrow rail (56px) is too thin to seat the mark beside the ~70px light
     cluster — don't inset (it would overflow the rail); the lights own that
     corner and the mark sits just below/behind them. */
  body.nav-narrow #ws-switch { padding-left: 10px; }
  /* Windows floats the buttons on the RIGHT → keep the topbar's right controls
     clear of them (this term is 0 on macOS, so it's a no-op there). */
  #topbar { padding-right: calc(10px + max(0px, 100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw))); }
}

/* ── workspace switcher: a row pinned at the BOTTOM of the system nav ── */
#ws-bottom { position: relative; flex: none; border-top: 1px solid var(--border); padding: 5px 6px; }
#ws-current {
  width: 100%; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px;
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--text-dim); font: 600 var(--fs-ui)/1.4 var(--sans); text-align: left;
}
#ws-current:hover { background: var(--raise); color: var(--text); }
#ws-current.static { cursor: default; }
#ws-current.static:hover { background: transparent; color: var(--text-dim); }
#ws-current .ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* room for descenders: overflow:hidden would otherwise clip a 'y'/'p'/'g' at line-height 1 */
  line-height: 1.4; padding-block: 1px; }
#ws-current .ws-caret { flex: none; color: var(--text-faint); font-size: 10px; line-height: 1; }
#ws-current.static .ws-caret { display: none; }
.ws-badge {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font: 700 11px/1 var(--sans);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
/* swatch used inside the switcher popover rows */
.ws-mark { width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--accent); }
.ws-mark.plus { display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-dim); font-size: 12px; }

/* the menu opens UPWARD from the bottom row */
#ws-menu {
  position: absolute; left: 6px; right: 6px; bottom: calc(100% + 2px); z-index: 700;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 4px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}
#ws-menu[hidden] { display: none; }
.ws-item {
  width: 100%; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px;
  background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--text-dim); font: 500 var(--fs-ui)/1.4 var(--sans); text-align: left;
}
.ws-item:hover { background: var(--raise); color: var(--text); }
.ws-item.active { color: var(--text-bright); }
.ws-item.active .ws-item-name { font-weight: 700; }
/* line-height 1.4 + a hair of vertical padding so overflow:hidden can't clip a descender */
.ws-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.4; padding-block: 1px; }
.ws-item-role { flex: none; font: 400 var(--fs-micro)/1.4 var(--mono); color: var(--text-faint);
  text-transform: uppercase; }
/* straight, full-width divider between the workspace list and the account actions
   (a real element — NOT a border-top on a rounded row, which curved at its ends) */
.ws-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.ws-new { color: var(--text-dim); }
/* The account row stacks the action over its sublabel (the guest "keep this
   workspace" hint, or the signed-in email) as its OWN line, so neither the label
   nor the sublabel is ever clipped or squeezed to an ellipsis by the other —
   the whole 232px rail is narrow, and side-by-side they fought for the same px. */
.ws-signout {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px;
  height: auto; padding: 6px 8px; color: var(--text-dim);
}
.ws-signout .ws-mark { grid-row: 1 / span 2; align-self: center; }
.ws-signout .ws-item-name { grid-column: 2; grid-row: 1; }
.ws-signout .ws-item-role { grid-column: 2; grid-row: 2; text-transform: none; text-align: left;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-mark.out { display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-faint); font-size: 12px; }

/* ── nav sections ──────────────────────────────────────────────────────── */
/* rail ⇄ full toggle row: on the sidebar itself, above the Briefs link */
#nav-tools { flex: none; display: flex; justify-content: flex-end; padding: 6px 8px 0; }
#nav-main { flex: 1; overflow-y: auto; padding: 8px 0 6px; }

/* footer of the sidebar: the Invite CTA (+ a "More" trigger on phones only) */
#nav-foot { flex: none; border-top: 1px solid var(--border); padding: 5px 0 0; }
/* PH launch badge (shell.js paintPhBadge, launch window only). The hosted SVG
   is 250×54; scale to the 232px sidebar. The 56px rail can't seat it — swap in
   the PH-mark chip there instead. NB: selectors carry #sidebar so they outrank
   the `#sidebar a` base row rule (which would force 26px flex rows). */
#sidebar #nav-ph { display: block; height: auto; padding: 6px 10px 2px; }
#sidebar #nav-ph:hover { background: none; }
#sidebar #nav-ph img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* rail mode swaps the full badge for a centered PH-mark chip */
#sidebar #nav-ph-rail { display: none; }
@media (min-width: 761px) {
  body.nav-narrow #sidebar #nav-ph { display: none; }
  body.nav-narrow #sidebar #nav-ph-rail { display: flex; justify-content: center; height: auto; padding: 7px 0 3px; }
}
#sidebar #nav-ph-rail svg { display: block; }
#sidebar #nav-ph-rail:hover svg { transform: scale(1.08); }
/* DESKTOP: the system nav is inline at the bottom; "More" is a MOBILE affordance
   (see the media query), so hide it here. */
.nav-more-btn {
  display: none; width: 100%; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--text-dim); font: 500 var(--fs-ui) var(--sans);
}
.nav-more-btn:hover { color: var(--text); background: var(--raise); }
.nav-more-btn .more-caret { margin-left: auto; color: var(--text-faint); font-size: 15px; }

/* Desktop: the system panel sits inline (no slide-out, no "More", no back head). */
#nav-system-panel { display: flex; flex-direction: column; flex: none; min-height: 0; background: var(--band); }
.nav-sys-head { display: none; }
.nav-sys-back {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px;
  background: transparent; border: 0; cursor: pointer; color: var(--text-dim);
  font: 600 var(--fs-ui) var(--sans);
}
.nav-sys-back:hover { color: var(--text); }
.nav-sys-head .nav-sys-title { font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); }
#nav-system { flex: none; padding: 2px 0 6px; }

/* rail ⇄ full toggle — lives on the sidebar itself (desktop only; phones keep
   the topbar hamburger for the drawer). */
.nav-rail-btn {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--text-faint); font: 400 14px/1 var(--sans);
}
.nav-rail-btn:hover { background: var(--raise); color: var(--text); }

/* drawer close (✕) — phones only, shown by the mobile media query */
.nav-close {
  display: none; flex: none; width: 30px; height: 30px; padding: 0; margin-left: auto;
  align-items: center; justify-content: center; background: transparent; border: 0;
  border-radius: 50%; color: var(--text-dim); font-size: 16px; cursor: pointer;
}
.nav-close:hover { background: var(--raise); color: var(--text); }

.nav-section { margin-bottom: 2px; }
/* Briefs sits alone at the top; give it clear air before the first titled
   section so it reads as the inbox, not a nav item. */
.nav-briefs { margin-bottom: 14px; }

/* Accent "Invite an agent" CTA (in the sidebar footer). */
#sidebar .nav-invite { color: var(--accent); font-weight: 600; }
#sidebar .nav-invite .nav-ico { color: var(--accent); }
#sidebar .nav-invite:hover { color: var(--accent); background: var(--accent-bg); }

/* Section titles get top + bottom hairline rules. */
.nav-head {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px; margin-top: 6px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.nav-head h3 { flex: 1; min-width: 0; }

/* shared header action buttons (＋ Add · filter) */
.nav-head-btn {
  width: 18px; height: 18px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  color: var(--text-faint); font-size: 12px; line-height: 1; cursor: pointer;
}
.nav-head-btn:hover { color: var(--text); border-color: var(--border-strong); }
.nav-head-btn.on { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-bg); }

/* active-filter chip (own row, under the head) */
.nav-filter-active {
  display: inline-flex; gap: 4px; align-items: center; margin: 3px 12px 2px;
  font: 500 var(--fs-micro)/1.4 var(--mono); color: var(--accent); cursor: pointer;
}
.nav-filter-active b { color: var(--text-faint); }
.nav-filter-active:hover b { color: var(--err); }

/* filter options (rendered inside a hovering .mb-popover) */
.nav-filter-opt { width: 100%; display: flex; align-items: center; gap: 6px; height: 24px;
  padding: 0 8px; background: transparent; border: 0; border-radius: 4px; cursor: pointer;
  color: var(--text-dim); font: 400 var(--fs-data)/1 var(--mono); text-align: left; }
.nav-filter-opt:hover { background: var(--raise); color: var(--text); }
.nav-filter-opt.active { color: var(--accent); }
.nav-filter-opt .app-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.nav-empty { padding: 2px 14px 4px 14px; color: var(--text-faint); font: 400 var(--fs-small)/1.4 var(--sans); }

/* nav links */
#sidebar a, #sidebar .nav-link {
  display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 14px;
  color: var(--text-dim); font-size: var(--fs-ui); text-decoration: none; white-space: nowrap;
}
.nav-items .nav-app { padding-left: 22px; }
#sidebar a:hover, #sidebar .nav-link:hover { color: var(--text); background: var(--raise); text-decoration: none; }
#sidebar a.active, #sidebar .nav-link.active {
  color: var(--text); background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent);
}
.nav-ico { width: 14px; text-align: center; color: var(--text-faint); font-size: 11px; }
#sidebar a.active .nav-ico { color: var(--accent); }
.nav-count { margin-left: auto; min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--accent-bg); color: var(--accent); font: 700 var(--fs-micro)/15px var(--mono);
  text-align: center; }
.app-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.nav-app .nav-ico { width: 12px; font-size: 10px; }
.app-num { margin-left: auto; font: 400 9px/1 var(--mono); color: var(--text-faint); }

/* rounded-square initial tile — the app-icon treatment for nav items (reads at
   rail size, unlike a 6px dot). --tile carries the item's own accent. */
.nav-tile {
  --tile: var(--accent);
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tile) 15%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--tile) 42%, transparent);
  color: var(--tile); font: 700 9px/1 var(--sans);
}

body.nav-collapsed #sidebar { display: none; }

/* ── narrow rail: icon-only sidebar (desktop) ──────────────────────────────
   The first-time default. Collapses the labelled nav to a ~56px strip of
   centered glyphs so the Briefs homepage — not the nav — is the focus. Each
   row's label text node is zeroed via font-size:0 (every glyph container
   carries its own explicit size, so icons/tiles survive); hovering a row shows
   its name on the #nav-flyout pill. Phones use the drawer, so ALL of this is
   hard-scoped ≥761px: shell.js shouldn't ever set nav-narrow on a phone, but
   if the class leaks there anyway (it did — Android can hand JS a 980px
   innerWidth while CSS lays out at 320px, 2026-07-14), an unscoped rail would
   out-rank the drawer rules and wedge a 56px rail over the content. */
@media (min-width: 761px) {
  body.nav-narrow #sidebar { width: 56px; overflow: visible; z-index: 40; }

  /* top box keeps the FULL brand lockup (logo · wordmark) by extending over the
     header row — same band + hairline, so it reads as one bar. */
  body.nav-narrow #ws-switch {
    position: absolute; top: 0; left: 0; width: 232px; z-index: 30;
    background: var(--band); border-bottom: 1px solid var(--border);
  }
  /* first in-flow row (the rail toggle) clears the overlaid lockup */
  body.nav-narrow #nav-tools { justify-content: center; margin-top: 38px; padding: 8px 0 0; }

  /* empty states and filter chips drop away; section heads shrink to micro-labels
     (attr(data-short)) between the hairlines so Apps/Projects/Docs stay sectioned */
  body.nav-narrow .nav-empty,
  body.nav-narrow .nav-filter-active,
  body.nav-narrow .nav-head-btn { display: none; }
  body.nav-narrow .nav-head { justify-content: center; padding: 3px 4px; margin: 12px 0 4px; }
  body.nav-narrow .nav-head h3 { flex: none; font-size: 0; letter-spacing: 0; }
  body.nav-narrow .nav-head h3::after {
    content: attr(data-short); font: 700 8px/1.6 var(--mono);
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
  }

  /* rows: center the glyph, zero the label text, keep room for corner badges */
  body.nav-narrow #nav-main { padding: 14px 0 6px; }
  body.nav-narrow #sidebar a,
  body.nav-narrow #sidebar .nav-link {
    position: relative; justify-content: center; gap: 0; padding: 0 8px; font-size: 0;
  }
  /* App/project/doc tiles: the row must be CLEARLY taller than its 26px tile and
     rows need air between them — as a 44×44 rounded pill the hover/active
     highlight reads as a container around the icon, not a band glued to it.
     NB: #sidebar must be in these selectors — the base `#sidebar a { height }`
     rule carries an ID, so an un-ID'd override here silently loses specificity
     (that's how the rail regressed to icon-height rows with tiles touching). */
  body.nav-narrow #sidebar .nav-items .nav-app { padding: 0; height: 40px; margin: 2px 6px; border-radius: 10px; }
  /* rounded pills swap the straight-edge active tick (it clips on the radius)
     for a soft accent ring */
  body.nav-narrow #sidebar .nav-items .nav-app.active,
  body.nav-narrow #sidebar .nav-briefs .nav-link.active { box-shadow: inset 0 0 0 1px var(--accent-dim); }
  body.nav-narrow .app-num { display: none; }
  /* bigger rail glyphs (body-scoped, so flyout clones inherit the same size) */
  body.nav-narrow .nav-tile { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
  body.nav-narrow #sidebar .nav-briefs .nav-link { height: 40px; margin: 2px 6px; border-radius: 10px; }
  body.nav-narrow .nav-ico.nav-ico-briefs { width: 22px; }
  body.nav-narrow .nav-ico.nav-ico-briefs svg { width: 20px; height: 20px; }
  /* workspace row (bottom of the system nav) → just the badge, centered; the
     switcher menu escapes the 56px rail to the right (#sidebar overflow:visible) */
  body.nav-narrow #ws-current { justify-content: center; padding: 0; gap: 0; }
  body.nav-narrow #ws-current .ws-name, body.nav-narrow #ws-current .ws-caret { display: none; }
  body.nav-narrow #ws-menu { right: auto; width: 208px; }

  /* unread-briefs count → a small presence dot pinned to the icon's corner */
  body.nav-narrow .nav-count {
    position: absolute; top: 4px; right: 10px; min-width: 6px; width: 6px; height: 6px;
    padding: 0; border-radius: 50%; font-size: 0; background: var(--accent);
  }
}

/* hover flyout: the item's name on a dark, theme-mixed pill that covers the
   rail row and extends right — icon + label on one unified background. Fixed,
   so it escapes the sidebar; JS positions it (shell.js showFlyout). */
#nav-flyout {
  position: fixed; z-index: 950; display: flex; align-items: center; gap: 9px;
  box-sizing: border-box; padding: 0 14px 0 9px; pointer-events: none; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 72%, #16130D);
  color: #fff; font: 600 12.5px/1 var(--sans); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
#nav-flyout[hidden] { display: none; }
/* colour-only restyles — sizes stay inherited so the cloned glyph OVERLAPS the
   original exactly (the pill is positioned so its glyph lands on the row's) */
#nav-flyout .nav-ico { color: rgba(255, 255, 255, .92); }
#nav-flyout .nav-tile { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
/* quiet variant (workspace switcher): panel tooltip, not the purple pill.
   1px border + 8px padding keeps the glyph on the same 9px inset. */
#nav-flyout.plain { background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  padding-left: 8px; font-weight: 500; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); }
#nav-flyout.plain .nav-ico { color: var(--text-faint); }

/* narrow viewports: shrink the left nav (~40%) before it auto-hides < 760px */
@media (max-width: 1024px) and (min-width: 761px) {
  #sidebar { width: 148px; }
  .nav-items .nav-app { padding-left: 18px; }
  #nav-system .nav-sub { padding-left: 28px; }
}

/* ── phones: the sidebar becomes a slide-in drawer over a scrim ──────────── */
@media (max-width: 760px) {
  #sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 600; width: min(84vw, 300px);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.4);
    transform: translateX(0); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  }
  /* Slide out (not display:none) so the drawer animates both ways. It stays
     rendered off-screen with its right edge at x=0, so DROP the shadow when
     closed — otherwise the 28px/0.4 drop-shadow bleeds a strong grey "fade"
     down the left edge of every mobile screen. The shadow is only wanted while
     the drawer is open, floating over the content. */
  body.nav-collapsed #sidebar { display: flex; transform: translateX(-100%); box-shadow: none; }
  /* MOBILE: the system nav collapses into a "More" slide-out over the sidebar. */
  .nav-more-btn { display: flex; height: 42px; font-size: 14px; }
  #nav-system-panel {
    position: absolute; inset: 0; z-index: 5; transform: translateX(100%); visibility: hidden;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  }
  #sidebar.show-system #nav-system-panel { transform: translateX(0); visibility: visible; }
  .nav-sys-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px;
    border-bottom: 1px solid var(--border); }
  .nav-sys-back { font-size: 15px; }
  #nav-system { flex: 1; overflow-y: auto; padding: 8px 0; }
  /* roomier, thumb-friendly rows + controls */
  #ws-switch { height: 48px; }
  .nav-close { display: inline-flex; }
  #nav-tools { display: none; } /* phones toggle the drawer from the topbar */
  #ws-bottom { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #sidebar a, #sidebar .nav-link { height: 42px; font-size: 14px; }
  .nav-items .nav-app { height: 38px; }
  #nav-main { padding-top: 12px; }
  /* the drawer owns the left edge — keep its rows clear of a landscape notch
     (env() is 0 in portrait / non-notch, so nothing moves there) */
  #sidebar { padding-left: env(safe-area-inset-left, 0px); }
  #statusbar {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  /* NB: #topbar's phone sizing/insets live in their own media block AFTER the
     base #topbar rule (same specificity → source order decides). */
  .palette-sheet { width: min(480px, 94vw); }
  /* a page must never scroll the whole surface sideways — wide tables / pre /
     cc-json already scroll inside their own containers */
  #page-host { overflow-x: hidden; }
  .secret-row { flex-wrap: wrap; }

  /* ── one bar in the brief reader ─────────────────────────────────────────
     While the Briefs page slides its detail over the list (its .split root
     carries .show-detail), the global topbar folds away and the brief bar
     ("‹ Back · title · Move") is the single chrome — ~38px back to content.
     Pure CSS (:has) keeps it stateless: sliding back to the list or leaving
     the page restores the topbar (drawer + theme stay reachable from the
     list), with no body-class bookkeeping to leak on page teardown. The fold
     animates on the slide-over's own curve so the two move as one. */
  #topbar { transition: height .28s cubic-bezier(.4, 0, .2, 1),
    border-bottom-width .28s cubic-bezier(.4, 0, .2, 1), visibility .28s; }
  body:has(#page-host > .split.show-detail) #topbar {
    height: 0; border-bottom-width: 0; overflow: hidden; visibility: hidden; }
  /* .no-anim = briefs.js is restoring an already-open brief on first paint
     (iOS PWAs reload on resume) — the fold must snap with the slide it rides,
     or the topbar visibly collapses on every return to the app */
  body:has(#page-host > .split.no-anim) #topbar { transition: none; }
  /* the guest nudge floats where the topbar was — it yields with it */
  body:has(#page-host > .split.show-detail) #anon-strip { display: none; }

}

/* iOS Safari can't scroll an iframe sized by inset:0, so on APP routes we let
   #content scroll a static-height iframe. On PAGE routes we must NOT do this —
   it hijacks the inner scroll of the briefs/docs split (the "can't scroll on
   briefs" bug). Pages scroll their own panes (see .split-rows min-height:0). */
@supports (-webkit-touch-callout: none) {
  body.route-app #content { overflow: auto; -webkit-overflow-scrolling: touch; }
  body.route-app #app-frame { position: static; height: auto; min-height: 100%; }
}

/* ── main ──────────────────────────────────────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

#topbar {
  height: 38px; flex: none; display: flex; align-items: center; gap: 10px;
  background: var(--band); border-bottom: 1px solid var(--border); padding: 0 10px;
}
/* phones: a taller bar with thumb-size buttons — the topbar is the only chrome
   affordance there — and landscape notch insets. Must sit AFTER the base rule
   above: same specificity, so source order decides (the drawer media block
   earlier in this file would silently lose to it). */
@media (max-width: 760px) {
  #topbar {
    height: 46px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  #topbar .cc-btn { min-height: 40px; min-width: 40px; justify-content: center; }
}

/* PROD/STG data-env toggle — lives in the statusbar, shown only on app routes */
#statusbar #env-switch { display: inline-flex; align-items: stretch; height: 16px;
  border: 1px solid var(--border-strong); border-radius: 3px; overflow: hidden; }
#statusbar #env-switch[hidden] { display: none; }
#statusbar #env-switch button {
  font: 700 9px/1 var(--mono); letter-spacing: 0.08em; padding: 0 7px;
  background: transparent; border: none; color: var(--text-faint); cursor: pointer;
}
#statusbar #env-switch button:hover { color: var(--text-dim); }
#statusbar #env-switch button.active[data-env="prod"] { background: var(--accent-bg); color: var(--env-prod); }
#statusbar #env-switch button.active[data-env="staging"] { background: var(--accent-bg); color: var(--env-staging); }

/* sidebar toggle: a drawer/panel glyph (not a back-arrow — it opens the drawer).
   Phones only — on desktop the rail ⇄ full toggle lives on the sidebar itself. */
#nav-btn { padding: 0 8px; }
#nav-btn .nav-drawer { display: block; color: var(--text-dim); }
#nav-btn:hover .nav-drawer { color: var(--text); }
body.nav-collapsed #nav-btn .nav-drawer { color: var(--text-faint); }
@media (min-width: 761px) { #nav-btn { display: none; } }

/* theme button (topbar right): a four-swatch grid glyph */
#theme-btn { padding: 0 8px; }
#theme-btn .theme-swatch { display: block; opacity: .88; }
#theme-btn:hover .theme-swatch { opacity: 1; }

/* theme popover rows (rendered inside the shared .mb-popover) */
.pop-theme .theme-opt { height: 28px; font-family: var(--sans); }
.pop-theme .theme-opt .theme-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.pop-theme .theme-dot { width: 12px; height: 12px; border-radius: 4px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.pop-theme .pop-tint { display: flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 8px 8px 4px; border-top: 1px solid var(--border);
  font: 500 var(--fs-small)/1 var(--sans); color: var(--text-dim); }
.pop-theme .pop-tint .seg { margin-left: auto; }

/* New-workspace dialog (cc-modal body): name + a single-select accent grid.
 * Each swatch scopes its own --accent via [data-accent], so the chip AND the
 * selected ring paint in that theme's colour. */
.ws-new { display: flex; flex-direction: column; gap: 7px; min-width: 300px; }
.ws-new-label { font: 600 var(--fs-small)/1 var(--sans); color: var(--text-dim); margin-top: 5px; }
.ws-new .cc-input-el { width: 100%; box-sizing: border-box; }
.ws-new-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ws-swatch { width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .1s ease, box-shadow .1s ease; }
.ws-swatch:hover { border-color: var(--border-strong); }
.ws-swatch .ws-swatch-chip { width: 18px; height: 18px; border-radius: 5px; background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.ws-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.ws-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-new-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* guest-bootstrap failure: an in-place recovery card (never a /login redirect) */
.boot-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.boot-fail-card { max-width: 460px; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 26px 28px; box-shadow: var(--panel-shadow); }
.boot-fail-card h1 { font-size: 17px; margin: 0 0 8px; color: var(--text-bright); }
.boot-fail-card p { margin: 0 0 16px; color: var(--text-dim); font-size: var(--fs-ui); line-height: 1.6; }
.boot-fail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

#content { flex: 1; position: relative; min-height: 0; background: var(--bg); }
#app-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
#page-host { position: absolute; inset: 0; overflow: auto; }
#page-host > .page { padding: 12px; }

/* ── command palette ───────────────────────────────────────────────────── */
#palette {
  position: fixed; inset: 0; background: var(--overlay); z-index: 800;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
}
#palette[hidden] { display: none; }
.palette-sheet {
  width: 480px; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 6px; overflow: hidden; box-shadow: 0 16px 64px rgba(0, 0, 0, 0.45);
}
#palette-input {
  width: 100%; height: 38px; background: var(--band); color: var(--text);
  border: none; border-bottom: 1px solid var(--border); padding: 0 14px;
  font: 400 13px var(--sans); outline: none;
}
#palette-list { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow: auto; }
#palette-list li {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 28px;
  font-size: var(--fs-ui); color: var(--text-dim); cursor: pointer;
}
#palette-list li .hint { margin-left: auto; font: 400 9px/1 var(--mono); color: var(--text-faint); }
#palette-list li.sel { background: var(--accent-bg); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }

/* ── palette v2: sectioned content search ──────────────────────────────── */
.palette-sheet { width: min(560px, 94vw); display: flex; flex-direction: column; }
#palette-list { max-height: min(56vh, 440px); }
/* section header rows */
#palette-list li.pal-sec {
  height: auto; padding: 9px 14px 3px; font: 600 9px/1 var(--mono); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-faint); cursor: default;
}
#palette-list li.pal-sec:first-child { padding-top: 6px; }
/* result rows — two-line (title + snippet) */
#palette-list li.pal-item {
  height: auto; min-height: 32px; padding: 5px 14px; align-items: center; gap: 9px;
}
.pal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.pal-ic { width: 12px; text-align: center; color: var(--text-faint); font-size: 11px; flex: 0 0 auto; }
.pal-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.pal-title { font-size: var(--fs-ui); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-sub { font-size: 11px; line-height: 1.35; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#palette-list mark { background: var(--accent-bg); color: var(--accent); border-radius: 2px; padding: 0 1px; font-weight: 600; }
#palette-list li.sel mark { color: var(--text); }
#palette-list li.pal-item.arch .pal-title { color: var(--text-faint); }
#palette-list li.pal-item.arch .hint { color: var(--warn); }
/* zero-state + loading skeletons (opacity pulse — matches cc-skeleton, no gradient) */
.pal-empty { padding: 16px 14px; color: var(--text-faint); font-size: var(--fs-ui); cursor: default; }
.pal-empty strong { color: var(--text-dim); font-weight: 600; }
#palette-list li.pal-skel { height: auto; padding: 7px 14px; gap: 9px; cursor: default; }
.pal-skel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--raise); animation: cc-skel 1.1s ease-in-out infinite; flex: 0 0 auto; }
.pal-skel-line { height: 9px; flex: 1; border-radius: var(--radius); background: var(--raise); animation: cc-skel 1.1s ease-in-out infinite; }
#palette-list li.pal-skel:nth-child(2) .pal-skel-line { max-width: 66%; }
/* keyboard-hint footer */
.palette-foot {
  display: flex; gap: 14px; padding: 7px 14px; border-top: 1px solid var(--border);
  background: var(--band); font-size: 10px; color: var(--text-faint);
}
.palette-foot kbd {
  font: 500 10px/1 var(--mono); background: var(--raise); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 4px; margin-right: 2px; color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
  .pal-skel-dot, .pal-skel-line { animation: none; }
}

/* ── shared page bits ──────────────────────────────────────────────────── */
.page { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; }
.page-head { display: flex; align-items: baseline; gap: 10px; }
.page-head .desc { color: var(--text-faint); font-size: var(--fs-ui); }
.stat-row { display: flex; gap: 8px; flex-wrap: wrap; }
.drawer { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.drawer > header { background: var(--band); border-bottom: 1px solid var(--border);
  padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.drawer > .drawer-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; font-size: var(--fs-data); }
.kv dt { color: var(--text-faint); font-family: var(--mono); }
.kv dd { margin: 0; font-family: var(--mono); min-width: 0; overflow-wrap: anywhere; }
.secret-row { display: flex; gap: 6px; align-items: center; }
.secret-row code { flex: none; min-width: 160px; }

/* ── two-pane (briefs + documents): fixed-height list ▸ viewer ─────────── */
.split { position: absolute; inset: 0; display: flex; min-height: 0; }
.split-list {
  width: 320px; flex: none; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border); background: var(--band); outline: none;
}
.split-list-head {
  flex: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
  border-bottom: 1px solid var(--border);
}
.split-list-head h1 { font-size: 14px; }
.split-list-head .cc-spacer { flex: 1; }
.split-rows { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.split-view { flex: 1; min-width: 0; position: relative; background: var(--bg); display: flex; flex-direction: column; }
.split-view iframe { flex: 1; width: 100%; border: 0; background: #fff; }

.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.seg button { font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: 0.05em; padding: 0 8px; height: 22px;
  background: transparent; border: 0; color: var(--text-faint); cursor: pointer; }
.seg button.active { background: var(--accent-bg); color: var(--accent); }

.list-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.list-row:hover { background: var(--raise); }
.list-row.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.list-row .row-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; }
.list-row .row-main { min-width: 0; flex: 1; }
.list-row .row-title { font: 600 var(--fs-ui)/1.3 var(--sans); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .row-sub { font: 400 var(--fs-small)/1.4 var(--sans); color: var(--text-faint);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.list-row .row-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font: 400 var(--fs-micro)/1 var(--mono); color: var(--text-faint); }

.viewer { flex: 1; overflow: auto; padding: 18px 22px; max-width: 820px; }
.viewer h1 { font-size: 19px; margin: 0 0 4px; }
.viewer h2 { font-size: 16px; margin: 18px 0 6px; }
.viewer h3 { font-size: 13px; text-transform: none; letter-spacing: 0; margin: 14px 0 4px; color: var(--text-bright); }
.viewer p { margin: 0 0 10px; line-height: 1.6; }
.viewer ul, .viewer ol { margin: 0 0 10px; padding-left: 22px; line-height: 1.6; }
.viewer code { background: var(--band); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.viewer pre { margin: 0 0 12px; }
.viewer a { color: var(--accent); }

/* library page sub-nav */
.lib-shell { position: absolute; inset: 0; display: flex; }
.lib-nav { width: 196px; flex: none; border-right: 1px solid var(--border); background: var(--band);
  overflow-y: auto; padding: 8px 0; }
.lib-nav h3 { padding: 6px 14px; }
.lib-nav a { display: block; padding: 5px 14px; color: var(--text-dim); font-size: var(--fs-ui);
  text-decoration: none; cursor: pointer; }
.lib-nav a:hover { background: var(--raise); color: var(--text); }
.lib-nav a.active { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-bg); }
.lib-nav .lib-nav-overview { cursor: pointer; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.lib-main { flex: 1; min-width: 0; overflow: auto; padding: 12px; }

/* ── Agents / invite page (page CSS shared with the Agents page) ────────── */
.invite-page { padding: 24px 28px; max-width: 760px; }
.invite-page .page-head h1 { font-size: 22px; margin: 0 0 4px; }
.invite-page .page-sub { color: var(--dim, #5E5847); font-size: 14px; margin: 0 0 22px; max-width: 60ch; }
.invite-gen { background: var(--surface, #FDFBF4); border: 1px solid var(--line, #E8DFCC); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.invite-row { display: flex; align-items: center; gap: 12px; }
.invite-row label { width: 70px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim, #5E5847); }
.invite-row select { flex: 1; height: 34px; border: 1px solid var(--line2, #D4C8AE); border-radius: 6px; background: var(--bg, #fff); color: inherit; padding: 0 10px; font: inherit; }
.invite-gen .cc-btn.primary { align-self: flex-start; }
.invite-err { color: #D2492F; font-size: 13px; min-height: 16px; }
#inv-result { margin-top: 20px; }
.invite-link-box { display: flex; gap: 8px; align-items: center; }
.invite-link-box code { flex: 1; padding: 10px 12px; background: #211C15; color: #EDE6D6; border-radius: 8px; font: 12.5px ui-monospace, Menlo, monospace; overflow-x: auto; white-space: nowrap; }
.invite-hand { margin: 16px 0 6px; font-size: 13px; color: var(--dim, #5E5847); }
#inv-handoff { background: var(--surface, #FDFBF4); border: 1px solid var(--line, #E8DFCC); border-radius: 8px; padding: 12px 14px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.invite-existing { margin-top: 32px; }
.invite-existing h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim, #5E5847); margin: 0 0 10px; }
.inv-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line, #E8DFCC); border-radius: 8px; margin-bottom: 8px; }
.inv-item .inv-meta { font-size: 13px; color: var(--dim, #5E5847); }
.cc-btn.danger { color: #D2492F; }

/* ── nav icon glyphs (inline SVG, e.g. the Briefs inbox tray) ───────────── */
.nav-ico svg { width: 13px; height: 13px; display: block; }
/* Briefs carries a LARGER inbox glyph (its own class so a flyout clone matches) */
.nav-ico.nav-ico-briefs { width: 17px; }
.nav-ico.nav-ico-briefs svg { width: 16px; height: 16px; }
/* system + footer glyphs read bigger too (class-based so flyout clones match) */
.nav-ico.nav-ico-sys { width: 17px; font-size: 13.5px; }
.nav-ico.nav-ico-sys svg { width: 15px; height: 15px; }
@media (min-width: 761px) {
  body.nav-narrow .nav-ico.nav-ico-sys { width: 20px; font-size: 16px; }
  body.nav-narrow .nav-ico.nav-ico-sys svg { width: 17px; height: 17px; }
}

/* ── hovering nudge over the topbar (guest / invite-an-agent) ────────────────
   Absolute + centered + narrow: floats over the topbar without pushing content
   down or covering the workspace switcher (top-left) or palette (top-right). */
#anon-strip {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 450;
  display: inline-flex; align-items: center; gap: 8px; max-width: min(560px, 66%);
  padding: 4px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border-strong); box-shadow: var(--panel-shadow);
  font: 500 var(--fs-small)/1.3 var(--sans); color: var(--text-dim); white-space: nowrap;
}
#anon-strip[hidden] { display: none; }
/* Narrow rail extends the brand lockup ~232px over the header — on tighter
   desktop widths, center the strip in the space RIGHT of it (lockup's right
   edge is at 176px in #main coordinates) so the two never overlap. */
@media (min-width: 761px) and (max-width: 1120px) {
  body.nav-narrow #anon-strip { left: calc(176px + (100% - 176px) / 2); max-width: min(480px, calc(100% - 196px)); }
}
#anon-strip span { overflow: hidden; text-overflow: ellipsis; }
#anon-strip a { flex: none; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
#anon-strip a:hover { text-decoration: underline; }
/* Phones: the nudge leaves the topbar overlay and becomes a normal banner that
   takes its own row (order:-1 puts it above the topbar in #main's column) —
   the full sentence wraps instead of amputating mid-word ("You're in a guest
   wor…"), and nothing underneath is covered. Must sit AFTER the base rule:
   same specificity, source order decides. */
@media (max-width: 760px) {
  #anon-strip { position: static; transform: none; order: -1; margin: 6px auto 0;
    max-width: calc(100% - 20px); white-space: normal; text-align: center;
    flex-wrap: wrap; justify-content: center; row-gap: 0; padding: 5px 14px;
    border-radius: 14px; }
  #anon-strip span { overflow: visible; text-overflow: clip; white-space: normal; }
}
/* Guest-banner CTAs are buttons (they open the in-shell auth modal), styled to
   read like the old inline link + a quieter secondary. */
#anon-strip .anon-cta, #anon-strip .anon-link {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer;
  white-space: nowrap; font-family: var(--sans);
}
#anon-strip .anon-cta { font-weight: 700; font-size: var(--fs-small); color: var(--accent); }
#anon-strip .anon-cta:hover { text-decoration: underline; }
#anon-strip .anon-link { font-weight: 600; font-size: var(--fs-small); color: var(--text-dim); }
#anon-strip .anon-link:hover { color: var(--text); text-decoration: underline; }

/* Topbar guest CTA: the ⎋ sign-out slot becomes a filled indigo "Sign up" pill
   for anonymous visitors (paintAuthCta). Filled — not the subtle .cc-btn.primary
   tint — so it reads as the primary action. */
#logout-btn.as-signup {
  height: 26px; padding: 0 12px; border-radius: 6px;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  font: 600 12px var(--sans);
}
#logout-btn.as-signup:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000); color: #fff;
}

/* ── in-shell auth modal (sign up / sign in) ─────────────────────────────────
   A centered card over a dimmed backdrop; reads cc.css theme tokens so it
   matches the standalone /login + /signup pages. */
#auth-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--overlay); padding: 20px;
}
#auth-modal .auth-card {
  position: relative; width: min(400px, 100%); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px 22px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17,14,10,.05), 0 24px 60px -20px rgba(17,14,10,.35);
}
.auth-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-faint);
  font-size: 14px; cursor: pointer;
}
.auth-x:hover { background: var(--band); color: var(--text); }
.auth-head { display: flex; flex-direction: column; gap: 3px; }
.auth-mark { width: 26px; height: 26px; display: inline-flex; }
.auth-mark img { width: 26px; height: 26px; display: block; border-radius: 7px; }
.auth-title { margin: 5px 0 0; font: 800 18px var(--sans); letter-spacing: -.01em; color: var(--text-bright); }
.auth-sub { margin: 0; font: 500 12.5px/1.45 var(--sans); color: var(--text-dim); }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 6px; font: 600 14px var(--sans); text-decoration: none; cursor: pointer;
}
.auth-google:hover { border-color: var(--accent); background: var(--accent-bg); }
.auth-google[hidden] { display: none; }
.auth-google svg { width: 18px; height: 18px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 11px; }
.auth-or[hidden] { display: none; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-form { display: flex; flex-direction: column; gap: 11px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field[hidden] { display: none; }
.auth-field label { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.auth-field input {
  height: 40px; box-sizing: border-box; padding: 0 12px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text); font: 14px var(--sans);
}
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.auth-err { min-height: 15px; font: 500 12px/1.3 var(--sans); color: var(--err); }
.auth-submit {
  height: 42px; width: 100%; justify-content: center; margin-top: 2px;
  background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600;
}
.auth-submit:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000); color: #fff;
}
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-alt { margin: 2px 0 0; text-align: center; font: 500 12.5px var(--sans); color: var(--text-dim); }
.auth-alt button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: 600 12.5px var(--sans);
}
.auth-alt button:hover { text-decoration: underline; }

/* ── shared hovering popover (filters, section Add, logout confirm) ──────── */
.mb-popover {
  position: fixed; z-index: 900; min-width: 180px; max-width: 320px;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 5px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
.mb-popover .pop-title { padding: 4px 8px 6px; font: 700 var(--fs-ui)/1.3 var(--sans); color: var(--text-bright); }
.mb-popover .pop-lead { margin: 0; padding: 2px 8px 8px; font: 400 var(--fs-small)/1.5 var(--sans); color: var(--text-dim); }
.mb-popover .pop-snippet {
  display: flex; align-items: stretch; gap: 6px; margin: 0 6px 6px;
}
.mb-popover .pop-snippet code {
  flex: 1; min-width: 0; padding: 7px 9px; background: var(--band);
  border: 1px solid var(--border); border-radius: 5px;
  font: 12px/1.45 var(--mono); color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.mb-popover .pop-copy { flex: none; align-self: flex-start; padding: 0 8px; height: 28px; }
.mb-popover .pop-slot cc-empty { min-height: 40px; }
.mb-popover .pop-note { padding: 0 8px 8px; font: 400 var(--fs-small)/1.5 var(--sans); color: var(--text-dim); max-width: 260px; }
.mb-popover .pop-actions { display: flex; gap: 6px; padding: 4px 6px 6px; justify-content: flex-end; flex-wrap: wrap; }
.mb-popover .pop-actions .cc-btn { height: 28px; }

/* ── app full-screen ("TV mode": #/app/<id>?fs=1 · topbar ⛶ · ⇧↵ · Esc exits) ──
   Chrome hides and the app iframe (already absolute inset:0 in #content)
   fills the viewport. */
body.app-fs #sidebar, body.app-fs #nav-scrim, body.app-fs #topbar,
body.app-fs #statusbar, body.app-fs #legalbar, body.app-fs #anon-strip { display: none !important; }
/* Exit affordance while an app is full-screen: a dim pill above the iframe
   (pointer events over the iframe never reach us — keep it always visible,
   quiet until hovered/tapped). */
#fs-exit { position: fixed; top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px)); z-index: 600;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text-dim); font-size: 14px; line-height: 1;
  box-shadow: var(--panel-shadow); opacity: .3; transition: opacity .15s ease; }
#fs-exit:hover, #fs-exit:focus-visible { opacity: 1; }

/* ── workspace presence (Durable Room) — statusbar trigger + bottom pane ──
   Will's spec (br_34jg2he4): presence lives at the bottom by the user name;
   clicking pops a pane from the bottom — humans/agents split with a filter,
   agents show which briefs they watch, disconnected ≤5min stay visible, then
   collapse into a scrollable most-recent-first history. */
/* IDE-style statusbar segment: quiet, borderless, leftmost. */
#sb-agents { display: inline-flex; align-items: center; gap: 5px; margin-left: 0;
  padding: 1px 6px 1px 2px; border: none; border-radius: 5px;
  background: transparent; color: var(--text-dim); cursor: pointer;
  font: 600 10.5px/1.6 var(--mono);
  /* Keep the two-word states ("agent disconnected", "connection lost") on one
     line — on a narrow phone statusbar the label used to wrap and blow out the
     single-row bar height. */
  white-space: nowrap; flex: none; }
#sb-agents:hover { background: var(--raise); color: var(--text); }
#sb-agents svg { width: 11px; height: 11px; display: block; }
#sb-agents .dot { width: 6px; height: 6px; border-radius: 50%; background: #2E9E5B;
  animation: pp-pulse 2.4s ease-in-out infinite; }
#sb-agents.stale { color: var(--text-faint); }
#sb-agents.stale .dot { background: var(--text-faint); animation: none; }
@keyframes pp-pulse { 50% { opacity: .4; } }

/* IDE-style bottom panel (Will): FLAT, abutting the left navbar, the width of
   the briefs list, rising from the chrome it belongs to — not a floating card.
   left/width are set by shell.js (placePresencePane) from live layout. */
#presence-pane { position: fixed; left: 232px; width: 376px;
  bottom: calc(54px + env(safe-area-inset-bottom, 0px)); /* statusbar+legalbar */
  max-height: 42vh; display: flex; flex-direction: column; z-index: 640;
  background: var(--band); border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  animation: pp-up .14s cubic-bezier(.2, .7, .3, 1); }
#presence-pane[hidden] { display: none; }
@keyframes pp-up { from { transform: translateY(14px); } }
#presence-pane .pp-head { display: flex; align-items: center; gap: 6px; flex: none;
  height: 21px; padding: 0 6px 0 8px; border-bottom: 1px solid var(--border);
  background: var(--band); }
#presence-pane .pp-head strong { font: 700 8.5px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
/* icon filter: tiny IDE-style square toggles (head / robot / "all") */
#pp-filter { display: inline-flex; gap: 2px; }
#pp-filter button { display: inline-flex; align-items: center; justify-content: center;
  height: 15px; min-width: 17px; padding: 0 3px; border: 1px solid var(--border);
  border-radius: 4px; background: transparent; color: var(--text-faint); cursor: pointer;
  font: 700 7.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
#pp-filter button svg { width: 10px; height: 10px; display: block; }
#pp-filter button:hover { color: var(--text-dim); border-color: var(--border-strong); }
#pp-filter button.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg, transparent); }
#pp-close { border: none; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 9px; line-height: 1; padding: 3px 4px; border-radius: 4px; }
#pp-close:hover { color: var(--text); background: var(--raise); }
#presence-pane .pp-body { overflow-y: auto; padding: 1px 2px 5px; }
.pp-row { display: flex; align-items: flex-start; gap: 7px; padding: 2px 8px 3px;
  font: var(--fs-small)/1.3 var(--mono); color: var(--text); }
.pp-row:hover { background: var(--raise); }
.pp-row .pp-dot { flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: #2E9E5B; margin-top: 5px; }
.pp-row.off .pp-dot { background: var(--text-faint); animation: none; }
.pp-row .pp-id { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.pp-row .pp-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row .pp-tabs { font-weight: 400; color: var(--text-faint); }
.pp-row .pp-sub { color: var(--text-dim); font-size: 10.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row .pp-sub a { color: var(--accent); text-decoration: none; }
.pp-row .pp-sub a:hover { text-decoration: underline; }
.pp-sect { font: 700 8.5px/1 var(--mono); letter-spacing: .08em; color: var(--text-faint);
  text-transform: uppercase; padding: 6px 8px 2px; }
.pp-empty { color: var(--text-faint); font: var(--fs-small)/1.4 var(--sans); padding: 6px 8px; }
#presence-pane details { margin: 2px 4px 0; }
#presence-pane summary { cursor: pointer; font: 700 8.5px/1.4 var(--mono); letter-spacing: .08em;
  color: var(--text-faint); text-transform: uppercase; padding: 3px 4px; list-style-position: inside; }
#presence-pane summary:hover { color: var(--text-dim); }
#presence-pane details .pp-hist { max-height: 150px; overflow-y: auto; }

/* ── agent status dock: chip pinned to the RIGHT edge ───────────────────── */
#agent-dock { position: fixed; right: 0; top: 86px; z-index: 630;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#agent-dock[hidden] { display: none; }
#agent-dock .ad-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px 7px 9px; border: 1px solid var(--border-strong); border-right: none;
  border-radius: 999px 0 0 999px; background: var(--panel); color: var(--text);
  font: 600 10.5px/1 var(--mono); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .16); }
#agent-dock .ad-chip .dot { width: 7px; height: 7px; border-radius: 50%;
  background: #2E9E5B; animation: pp-pulse 2.4s ease-in-out infinite; }
#agent-dock .ad-chip svg { width: 12px; height: 12px; flex: none; }
/* width-capped agent name: ellipsized at rest; hovering swaps the … for a
   smooth scroll that brings the clipped remainder into view (inline → the
   ellipsis can render; inline-block on hover → the transform can run). */
#agent-dock .ad-name { display: inline-block; max-width: 104px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }
#agent-dock .ad-name-i { display: inline; white-space: nowrap; }
#agent-dock .ad-chip:hover .ad-name { text-overflow: clip; }
#agent-dock .ad-chip:hover .ad-name-i { display: inline-block;
  transition: transform 1.1s ease-in-out .15s;
  transform: translateX(min(0px, calc(104px - 100%))); }
#agent-dock.stale .ad-chip { color: var(--text-faint); }
#agent-dock.stale .ad-chip .dot { background: var(--text-faint); animation: none; }
#agent-dock .ad-panel { width: 264px; background: var(--panel);
  border: 1px solid var(--border-strong); border-right: none;
  border-radius: 10px 0 0 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
  padding: 6px 4px; max-height: 40vh; overflow-y: auto; }

/* watched-brief overflow: ", +x more" toggle + expanded stacked list */
.pp-more { border: none; background: none; padding: 0; margin-left: 2px; cursor: pointer;
  color: var(--accent); font: 600 10.5px/1 var(--mono); }
.pp-more:hover { text-decoration: underline; }
.pp-row .pp-sub--multi { white-space: normal; line-height: 1.5; }

/* Notification permission nudge — a prominent TOP-center banner (a corner toast
   was too easy to miss for a permission ask). Drops in, waits for a decision. */
#notif-nudge { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 720; display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 24px)); padding: 9px 10px 9px 14px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22); animation: nn-drop .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes nn-drop { from { transform: translate(-50%, -16px); opacity: 0; } }
#notif-nudge .nn-ico { flex: none; font-size: 16px; line-height: 1; }
#notif-nudge .nn-msg { flex: 1; min-width: 0; font: 500 var(--fs-ui)/1.4 var(--sans); color: var(--text); }
#notif-nudge .nn-enable { flex: none; border: none; cursor: pointer; border-radius: 8px;
  padding: 7px 12px; background: var(--accent); color: #fff; font: 600 var(--fs-ui)/1 var(--sans); }
#notif-nudge .nn-enable:hover { filter: brightness(1.06); }
#notif-nudge .nn-x { flex: none; border: none; background: none; cursor: pointer;
  color: var(--text-faint); font-size: 12px; padding: 4px 6px; border-radius: 6px; }
#notif-nudge .nn-x:hover { color: var(--text); background: var(--raise); }

/* ── touch tap targets ────────────────────────────────────────────────────
   Coarse pointers get bigger EFFECTIVE hit areas; desktop keeps its density.
   Small icon buttons keep their visual size — a centered, invisible ::after
   pad extends what a thumb can hit (44px where the control sits alone in its
   own chrome, 36px where neighbours are close enough that a full 44px pad
   would steal their taps). Menu/list rows just get a taller min-height:
   showing bigger rows on touch is the point, and min-height (not height)
   leaves every fine-pointer size rule alone. */
@media (pointer: coarse) {
  .nav-close, .nav-head-btn, .nav-rail-btn, #pp-close, #notif-nudge .nn-x { position: relative; }
  /* .auth-x and #fs-exit are already positioned — no reflow from the pad */
  .nav-close::after, .auth-x::after, #fs-exit::after,
  .nav-head-btn::after, .nav-rail-btn::after, #pp-close::after, #notif-nudge .nn-x::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(44px, 100%); height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }
  .nav-head-btn::after, .nav-rail-btn::after, #pp-close::after, #notif-nudge .nn-x::after {
    width: max(36px, 100%); height: max(36px, 100%);
  }
  .ws-item { min-height: 40px; }
  #ws-current { min-height: 44px; }
  .nav-filter-opt { min-height: 40px; }
  .pop-theme .theme-opt { min-height: 40px; }
  .seg button { min-height: 30px; }
  /* legal links are 10px type — pad the inline hit box, pull the margins back
     so the bar's visual rhythm barely moves */
  #legalbar a { display: inline-block; padding: 8px 6px; margin: -6px -3px; }
}