/* Product demo extracted from the shipping homepage. App Graphite values are preserved. */
/* ------------------- The dawn wave (from the app) ------------------
   Discrete blocks; a crest of light travels left to right through the
   mark's gradient. Hue moves, opacity never blinks. The app's "agent
   is working" signature, beating on the page. */
.wb { display: inline-flex; align-items: center; gap: 2px; flex: none; }
/* Tokens, not literals, because this is the app's own .wb: the crest hues at
   10/20/30% and --wave-idle at rest. The idle colour used to be
   rgba(30, 94, 255, 0.16) — the retired action blue — which put a fourth hue
   in a strip whose whole job is to carry three. */
.wb i { width: 5px; height: 5px; border-radius: 1.5px; background: var(--wave-idle); }
@media (prefers-reduced-motion: no-preference) {
  .wb i {
    animation: wb-wave 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
  }
  @keyframes wb-wave {
    0%, 52%, 100% { background: var(--wave-idle); transform: none; }
    10%           { background: var(--sky); transform: translateY(-0.5px); }
    20%           { background: var(--rose); transform: none; }
    30%           { background: var(--peach); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wb i:nth-child(2) { background: var(--sky); }
  .wb i:nth-child(3) { background: var(--rose); }
  .wb i:nth-child(4) { background: var(--peach); }
}


/* ── Ported from the production app demo (index.html + style.css) ── */
/* The mockup's palette, aliased exactly the way the app's global.css aliases
   it: every name below resolves through the brand tokens rather than a pinned
   literal, so the mock follows the page into Nightfall the way the product
   follows the OS. --bg-card and --bg-chrome are the one pair the app flips
   between themes (recessed vs lifted), so they are set per theme below.

   Two deliberate departures from the app, both so the mock sits inside a
   marketing page rather than shouting inside it: --mint resolves to ink, not
   the app's green, because every heading on this page is ink; and --text-ghost
   is one step lighter than the app's so the mock's chrome recedes. */
.hq{
  --bg: var(--paper);
  --blue: var(--slate-soft);
  --border: var(--hair);
  --border-hover: var(--hair);
  --font-mono: var(--mono);
  --font-sans: var(--sans);
  --font-serif: var(--serif);
  --mint: var(--ink);
  --orange: var(--bad);
  --text-ghost: color-mix(in srgb, var(--slate-soft) 72%, transparent);
  --text-hi: var(--ink);
  --text-mid: var(--slate);
  --text-low: var(--slate-soft);
  --yellow: var(--warn);
}
/* Daybreak: cards lift to --elev, chrome recedes to --paper-2. */
:root:not([data-theme="dark"]) .hq { --bg-card: var(--elev); --bg-chrome: var(--paper-2); }
/* Nightfall: the app swaps this pair — cards sit recessed, chrome lifts. */
:root[data-theme="dark"] .hq {
  /* The app is Graphite and the mock mirrors the app 1:1, so the app's
     literal surface trio is pinned here (flock-code global.css graphite)
     while the page around it sits on black. */
  --paper: #121212;
  --paper-2: #191919;
  --elev: #212121;
  --bg-elev: #212121;
  --bg-card: var(--paper-2);
  --bg-chrome: var(--elev);
}

/* The app "screenshots" (hero, collaboration, knowledge-graph mockups) carry
   the PRODUCT's palette, and every name below is aliased exactly the way the
   app's own global.css aliases it. Nothing is pinned to a literal, so the
   mockups follow the page into Nightfall and back the way the product follows
   the OS, and they cannot drift from the app the way three hand-tuned blocks
   of hex did — those still held the pre-rebrand Clarence colours: near-black
   #06080c grounds, acid-yellow #e8ff3a, a blue-white #eaf1ff for text.

   The mapping, from global.css:
     --mint   is the app's --action, and --action is NOT one colour across the
              two themes. Nightfall keeps the brand blue (#5B8CFF). Daybreak
              drops the hue entirely and goes to ink — global.css: "Ink, not
              the brand's blue. Daybreak's own rule is that ink is the loud
              colour, and the blue was carrying every interactive surface in
              the app ... that read as a second accent competing with the
              text." Every chrome accent here follows that, which is why the
              light block below re-pins this to the app's #0f162e.
     --term-blue is the exception: xterm's `blue` slot is #1e5eff on Daybreak
              (XTERM_THEMES.light, lib/theme.ts), so text *inside a terminal*
              keeps the hue the chrome gives up. Only .pane-term reads it.
     --acc-*  are the app's workspace accents (--ws-accent-1/2/3), which are
              per theme too: pastels on Nightfall, deep cuts on Daybreak,
              because the pastels land at 1.2:1–2.2:1 on paper.
     --yellow is --warn-text, never --warn: warn is a fill, 3.6:1 as text.
     --blue   is --slate, the metadata tier.
     --border is --hair-soft resting and --hair on hover, matching the app's
              --border-subtle / --border-hover pair. */
.mockup-window,
.mini-window,
.kg-graph-mock {
  --bg:          var(--paper);
  --surface:     var(--paper-2);
  /* The chrome accent — active tabs, focus rings, branch names, chip fills,
     graph edges. In the app that is --action: `var(--mint)` is used exactly
     zero times there, and active/selected states reach for --action 24 times.
     Nightfall's value sits here; the Daybreak block below re-pins it to ink.

     It was briefly var(--ok), which painted the whole mockup deep green,
     because global.css still *declares* `--mint: var(--ok)` as a legacy
     alias even though nothing consumes it. Declared is not used.

     The primary buttons deliberately do NOT read this — they take --text-hi
     (see .nw-btn-primary). */
  --mint:        var(--action);
  --term-blue:   var(--action);
  --yellow:      var(--warn-text);
  --blue:        var(--slate);
  --orange:      var(--bad);
  /* The app's own green, restored. The page deliberately softens --ok to
     #5AD196 on dark (see the dark-mode block at the top of this sheet), which
     is right for a marketing-page tick and wrong inside a screenshot: the product
     draws #4FFFB0 there — the online-friends badge, OK states, and the
     terminal's `green` slot. Stated in both themes so a later page-level
     tweak cannot walk into the mock again. */
  --ok:          #4fffb0;
  /* Workspace colour-coding, and it is the crest and nothing else: sky, rose,
     peach — the three hues the working wave travels through, in that order.
     They are the app's --ws-accent-1 / -7 / -3, so this is a subset of the
     eight slots rather than a departure from them; violet (slot 2) was the
     odd one out and made the rail look like a colour picker. Deepened in the
     Daybreak block below, so a workspace keeps its identity across a theme
     switch the way it does in the app. */
  --acc-sky:     #7fb4f0;  /* ws-accent-1 */
  --acc-rose:    #f6c6d8;  /* ws-accent-7 */
  --acc-peach:   #ffb59e;  /* ws-accent-3 */
  --text-hi:     var(--ink);
  --text-mid:    var(--ink-2);
  --text-low:    var(--slate);
  --text-ghost:  var(--slate-soft);
  --border:      var(--hair-soft);
  --border-hover:var(--hair);
  color: var(--text-hi);
}

/* --bg-card and --bg-chrome are the one pair the app flips between themes:
   in Daybreak a card lifts to white and the chrome recedes; in Nightfall the
   card sits recessed and the chrome is what lifts. */
:root:not([data-theme="dark"]) .mockup-window:not([data-mocktheme]),
:root:not([data-theme="dark"]) .mini-window,
:root:not([data-theme="dark"]) .kg-graph-mock,
.mockup-window[data-mocktheme="light"] {
  --bg-card:   var(--elev);
  --bg-chrome: var(--paper-2);
  /* Daybreak's action, verbatim from global.css: ink, not the brand's blue.
     Pinned rather than aliased to var(--ink) because the app's own value is a
     shade off the ink it writes text in (#0f162e against #0B1B33), and a twin
     copies the value rather than approximating it. */
  --mint:        #0f162e;
  /* Workspace accents, Daybreak's deep cuts (global.css --ws-accent-1/2/3).
     The Nightfall pastels above measure 1.2:1–2.2:1 on paper, which is a
     workspace with no visible accent at all — the app moved them for exactly
     this reason, and a mock that keeps the pastels is showing a screen the
     app never draws. */
  --acc-sky:     #1b5fc4;  /* ws-accent-1, sky */
  --acc-rose:    #b03060;  /* ws-accent-7, rose deep */
  --acc-peach:   #ab4715;  /* ws-accent-3, peach burnt */
  --ok:          #1d7a4e;
}
:root[data-theme="dark"] .mockup-window:not([data-mocktheme]),
:root[data-theme="dark"] .mini-window,
:root[data-theme="dark"] .kg-graph-mock {
  --bg-card:   var(--paper-2);
  --bg-chrome: var(--elev);
}



/* ─── Mockup ─────────────────────────────────────────────────────────────── */

.mockup-section {
  padding: 0 40px 80px;
}

.mockup-window {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-hover);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 80px rgba(0,0,0,0.6),
    0 0 60px color-mix(in srgb, var(--mint) 4%, transparent);
}

/* ─── New Workspace dialog (the app's create flow, mimicked + animated) ──── */
.nw-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  /* A scrim dims; it does not glow. Mixed from black rather than from
     --text-hi, which is near-white ink on graphite. */
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity 0.45s ease-in;
}
.nw-overlay.done { opacity: 0; pointer-events: none; }
.nw-dialog {
  width: 440px; max-width: calc(100% - 32px);
  background: var(--bg); border: 1px solid var(--border-hover);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(11,27,51,0.28);
  transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}
.nw-overlay.done .nw-dialog { transform: translateY(-6px) scale(0.99); opacity: 0; }

/* The existing workspaces (api-refactor, storefront) are there from the
   start; only the NEW workspace (atlas), its agents, the panes, and the
   status bar are marked .mock-spawn. They stay hidden behind the New Workspace
   card and spawn in when "Create workspace" fires (JS swaps .precreate for
   .created in revealCockpit), so the workspace is genuinely created and its
   agents spawn once the animation completes. */
.mockup-window.precreate .mock-spawn { display: none !important; }
@keyframes mock-spawn-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.mockup-window.created .mock-spawn { animation: mock-spawn-in 0.5s var(--ease-out) both; }
/* The panes and status bar land just after the sidebar workspace appears. */
.mockup-window.created .mock-views.mock-spawn { animation-delay: 0.14s; }
.mockup-window.created .mock-statusbar.mock-spawn { animation-delay: 0.22s; }
/* Agent rows spawn one after another, like the app bringing them up. */
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row {
  animation: mock-spawn-in 0.42s var(--ease-out) both;
}
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row:nth-child(2) { animation-delay: 0.10s; }
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row:nth-child(3) { animation-delay: 0.17s; }
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row:nth-child(4) { animation-delay: 0.24s; }
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row:nth-child(5) { animation-delay: 0.31s; }
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row:nth-child(6) { animation-delay: 0.38s; }
.mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row:nth-child(7) { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .mockup-window.created .mock-spawn,
  .mockup-window.created .mock-agent-group.mock-spawn .mock-agent-row { animation: none; }
}

.nw-head { padding: 18px 20px 14px; }
.nw-eyebrow { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: var(--text-low); margin-bottom: 7px; }
/* app: .sd-title in spawnDialog.css — "the machine's voice, monospaced,
   uppercase, static accent cursor. Not the display serif — this is chrome,
   and it sits under Fraunces' 20px floor anyway." Same string, same voice. */
.nw-title {
  font-family: var(--font-mono); font-weight: 600; font-size: 16px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-hi); line-height: 1;
}
.nw-title::after { content: "_"; color: var(--action); font-weight: 600; }
.nw-fields { padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }
.nw-field { display: flex; flex-direction: column; gap: 6px; }
.nw-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-low); display: flex; gap: 7px; align-items: center; }
.nw-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-ghost); }
.nw-input {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-hi); font-family: var(--font-mono);
  font-size: 11.5px; padding: 9px 11px;
}
.nw-dir { display: flex; gap: 6px; }
.nw-dir-in { flex: 1; }
.nw-browse {
  display: flex; align-items: center; white-space: nowrap; padding: 0 12px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-mid);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
}
.nw-agents { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.nw-agent {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; color: var(--text-mid);
  transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.12s;
}
.nw-agent:hover { border-color: var(--text-low); color: var(--text-hi); }
.nw-agent.selected { color: var(--text-hi); }
.nw-agent[data-kind="claude"].selected   { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 9%, transparent); }
.nw-agent[data-kind="codex"].selected     { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 9%, transparent); }
.nw-agent[data-kind="opencode"].selected  { border-color: var(--blue);   background: color-mix(in srgb, var(--blue) 9%, transparent); }
.nw-agent[data-kind="grok"].selected      { border-color: var(--text-hi); background: color-mix(in srgb, var(--text-hi) 9%, transparent); }
.nw-agent[data-kind="pi"].selected        { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 9%, transparent); }
.nw-agent-logo { width: 15px; height: 15px; flex-shrink: 0; }
.nw-agent-logo.kind-claude { color: var(--orange); }
.nw-agent-logo.kind-codex { color: var(--yellow); }
.nw-agent-logo.kind-opencode { color: var(--blue); }
.nw-agent-logo.kind-grok { color: var(--text-hi); }
.nw-agent-logo.kind-pi { color: var(--violet); }
.nw-layouts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.nw-layout {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px 6px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.nw-layout:hover { border-color: var(--text-low); }
.nw-layout.selected { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 6%, transparent); }
.nw-thumb { display: grid; gap: 1.5px; width: 28px; height: 21px; }
.nw-thumb i { background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 1px; }
.nw-layout.selected .nw-thumb i { background: color-mix(in srgb, var(--mint) 16%, transparent); border-color: color-mix(in srgb, var(--mint) 34%, transparent); }
.nw-layout-n { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); }
.nw-layout.selected .nw-layout-n { color: var(--mint); }
.nw-toggle {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px;
}
.nw-check {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 4px;
  border: 1.5px solid var(--text-low); position: relative; transition: background 0.12s, border-color 0.12s;
}
.nw-toggle.checked .nw-check { background: var(--mint); border-color: var(--mint); }
.nw-toggle.checked .nw-check::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.nw-toggle-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-hi); }
.nw-toggle-hint { font-family: var(--font-sans); font-size: 11px; color: var(--text-mid); line-height: 1.35; margin-top: 2px; }
.nw-foot {
  display: flex; align-items: center; gap: 10px; padding: 13px 20px; margin-top: 16px;
  border-top: 1px solid var(--border);
}
.nw-foot-keys { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--text-ghost); }
.nw-foot-spacer { flex: 1; }
.nw-btn-ghost {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px; color: var(--text-mid);
  background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; cursor: pointer;
}
/* Primary buttons take the app's .signin-provider-btn treatment:
   background var(--text-hi), color var(--bg-window). That is ink-on-paper in
   Daybreak and ivory-on-navy in Nightfall — one solid, high-contrast button in
   both themes. (The app's .sd-btn-primary and .session-toast-btn.accept use
   var(--action) instead; we deliberately follow the ink/ivory pair here.) */
.nw-btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  color: var(--bg); background: var(--text-hi); border: none; border-radius: 6px; padding: 8px 15px; cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
}
.nw-btn-primary.creating { opacity: 0.75; }
.nw-kbd { background: color-mix(in srgb, var(--bg) 24%, transparent); border-radius: 3px; padding: 1px 5px; font-size: 10px; }
/* Click feedback for the animated cursor */
.nw-clicked { transform: scale(0.96); }
.nw-agent.nw-clicked, .nw-layout.nw-clicked { transform: scale(0.95); }
/* The animated pointer that drives the flow */
.nw-cursor {
  position: absolute; left: 0; top: 0; z-index: 31;
  transform: translate(50%, 120%); pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(11,27,51,0.3));
  opacity: 0; transition: opacity 0.25s;
}
.nw-cursor.on { opacity: 1; }
.nw-cursor.tap { transform-box: fill-box; }
.nw-cursor svg { display: block; }
.nw-cursor.press svg { transform: scale(0.82); transition: transform 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .nw-cursor { display: none; }
}

.mockup-titlebar {
  background: var(--surface);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

.mockup-ws-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-low);
  margin-left: 8px;
}

.mockup-body {
  display: flex;
  height: 320px;
  background: var(--bg);
}

.mockup-sidebar {
  /* The app's rail is 240px (--sidebar-w), so this mock runs at 216/240 = 0.9,
     and everything in the rail is drawn at that scale. Declared once: this was
     188px here and 216px again further down, the later rule winning, and the
     brand lockup below had been sized for the 188. */
  width: 216px;
  min-width: 216px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The brand row, which is the app's .brand / .brand-lockup at this mock's
   scale. The rail here is 188px against the app's 240px, so everything in the
   sidebar is drawn at 216/240 = 0.9 — that is where 45 / 21.6 / 8 come from
   (the app's GooseMark width={50}, Wordmark size={24}, gap: 9px) and why the
   collapse control is 23px rather than 26px. The bird lands on 45 x 20, which
   is its 36:16 grid exactly, and 45/21.6 is the app's 2.0833 to four places.

   Three things this row used to get wrong. It was a 42px bird beside a 15px
   word, a 2.8 ratio where the lockup is 2.083, so the logotype read as a
   caption to the goose. It took `color: var(--mint)`, which painted the
   logotype in the accent — bright blue on Daybreak, where the app's sidebar
   draws it in plain ink like every other piece of text. And a strapline sat
   under it, which the app removed on purpose: "Nothing sits under the
   logotype: the goose and the word are the lockup, and a strapline beneath a
   mark is a web habit that only made the mark look smaller than it is." */
.mock-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Positioning context for the collapse control, which is out of flow so it
     cannot shift the lockup off centre — same reason as the app. */
  position: relative;
  /* Reserve the control's width so centring happens in the space the lockup
     actually has, matching .brand-lockup's padding-right. */
  padding: 11px 14px 9px;
  padding-right: 23px;
  color: var(--text-hi);
  line-height: 1;
}
.mock-brand svg { display: block; }
/* The rail's own collapse control, in the dead space the lockup leaves. */
.mock-brand-collapse {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--text-low);
}

.mock-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mock-tab {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-low);
  padding: 6px 0 5px;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.mock-tab.active {
  color: var(--text-hi);
  border-bottom-color: var(--mint);
}

/* Online-friends count. The app's .tab-online-badge fills with var(--ok) —
   it is a presence signal, not an accent, and it stays green in both themes. */
.mock-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--bg);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
}

.mock-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-low);
}

.mock-count {
  color: var(--text-ghost);
  letter-spacing: 1px;
}

.mock-add {
  color: var(--text-low);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Workspace cards — exact match to .workspace-card */
.mock-ws-card {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid transparent;
  position: relative;
}

.mock-ws-card.focused {
  background: var(--bg-chrome);
  border-left-color: var(--accent, var(--mint));
}

.mock-ws-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock-ws-name-text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, var(--mint));
  letter-spacing: -0.1px;
}

.mock-ws-meta {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-low);
}

.mock-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 4px 0 0;
  flex-shrink: 0;
}

/* Agent group — exact match */
.mock-agent-group { padding-bottom: 4px; }

.mock-group-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 3px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent, var(--text-mid));
}

.mock-group-bar {
  display: inline-block;
  width: 3px;
  height: 10px;
  background: var(--accent, var(--mint));
  border-radius: 2px;
  flex-shrink: 0;
}

.mock-agent-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 14px 4px 24px;
  font-family: var(--font-mono);
  color: var(--text-mid);
}

/* Line 1: name · kind logo · status, mirroring the app's sidebar rows */
/* Logo leads, then the name, matching the app's sidebar rows (AgentKindBadge
   sits in front of .agent-name); the 6px gap mirrors the app's badge spacing. */
.mock-agent-head { display: flex; align-items: center; gap: 6px; }
.mock-agent-name {
  font-size: 9.5px; font-weight: 700; color: var(--text-hi);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Official agent-kind marks, each in its own brand color (agentColor) */
.mock-kind-ico { width: 10px; height: 10px; flex-shrink: 0; }
.mock-kind-ico.kind-claude   { color: var(--orange); }
.mock-kind-ico.kind-codex    { color: var(--yellow); }
.mock-kind-ico.kind-opencode { color: var(--blue); }
.mock-kind-ico.kind-grok     { color: var(--text-hi); }
.mock-kind-ico.kind-pi       { color: var(--violet); }

/* Line 2: the agent's current intent, dimmed and truncated */
.mock-agent-intent {
  font-size: 8.5px; font-style: italic; color: var(--text-ghost);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mock-agent-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.2px; white-space: nowrap; flex-shrink: 0;
}
.mock-agent-status .mas-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.mock-agent-status .mas-t { color: var(--text-ghost); font-weight: 400; }
.mock-agent-status.idle       { color: var(--text-ghost); }
.mock-agent-status.idle .mas-dot { background: none; border: 1px solid currentColor; }
.mock-agent-status.needsinput { color: var(--yellow); }
.mock-agent-status.working    { color: var(--text-hi); }
.mock-agent-status .wb        { margin-right: 1px; }

/* PR rows — exact match */
.mock-pr-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 14px;
}

.mock-pr-num {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-ghost);
  flex-shrink: 0;
  padding-top: 1px;
}

.mock-pr-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mock-pr-title {
  font-size: 9.5px;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-pr-repo {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--text-low);
}

.mockup-panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.mockup-pane {
  background: var(--bg);
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}

.mockup-pane.focused {
  border-color: var(--accent, var(--mint));
  box-shadow: inset 0 0 0 1px var(--accent, var(--mint));
}

.pane-term {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* Terminal text, so it reads xterm's blue (#1e5eff on Daybreak) and not the
   chrome accent, which is ink there. */
.pane-term .prompt { color: var(--term-blue); }
.pane-term .mint   { color: var(--term-blue); }
.pane-term .yellow { color: var(--yellow); }
.pane-term .dim    { color: var(--text-ghost); }
/* xterm's green/red slots, which differ per theme: #1d7a4e / #b4483f on
   Daybreak, #4fffb0 / #ff8f84 on Nightfall (XTERM_THEMES, lib/theme.ts).
   They were pinned to the Daybreak cuts, so Nightfall drew a terminal with
   Daybreak's diff colours in it. */
.pane-term .add    { color: var(--ok); }
.pane-term .ok     { color: var(--ok); font-weight: 600; }
.pane-term .del    { color: var(--bad); }
.pane-term .cursor {
  color: var(--text-hi);
  animation: blink 1s step-end infinite;
}

/* ─── Interactive app preview ─────────────────────────────────────────────── */

.mockup-body { height: 440px; }

/* Titlebar "session started" pill (mirrors the app's toast). */
.mockup-pill {
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-low);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
}
.mockup-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
}


/* Main column: top bar + panes. */
.mockup-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mock-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
}
.mock-branch { color: var(--mint); }
.mock-path { color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-topbar-spacer { flex: 1; }
.mock-toptab {
  color: var(--text-low);
  padding: 2px 8px;
  border-radius: 5px;
}
.mock-toptab.active { color: var(--text-hi); background: rgba(255, 255, 255, 0.06); }
.mock-toptab-add { color: var(--text-ghost); padding: 0 4px; }

/* Two panes side by side. */
.mockup-panes.mock-panes-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.mock-panes-2 .pane-term {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Claude Code welcome banner inside a pane. */
.cc-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cc-logo {
  font-size: 20px;
  color: #d98c7a; /* Claude Code's warm mascot tint */
  line-height: 1;
  flex-shrink: 0;
}
/* Claude Code's pixel mascot, as it greets you in a fresh pane */
.cc-mascot { width: 42px; height: auto; flex-shrink: 0; image-rendering: pixelated; }
.cc-welcome-text { line-height: 1.5; }
.cc-welcome-text strong { color: var(--text-hi); font-weight: 700; }

.cc-line { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
.cc-line.dim { color: var(--text-ghost); }
.cc-hi { color: var(--text-hi); }
.cc-hint { color: color-mix(in srgb, var(--orange) 80%, transparent); margin-top: 8px; opacity: 0.85; }

.cc-user { color: var(--text-hi); margin-top: 8px; }
.cc-think { color: var(--text-mid); margin-top: 4px; }
.cc-resp { color: var(--text-mid); margin-top: 4px; }
.cc-link {
  color: var(--mint);
  border-bottom: 1px solid color-mix(in srgb, var(--mint) 40%, transparent);
  font-weight: 600;
}
.cc-link:hover { border-bottom-color: var(--mint); }

/* Interactive prompt line. */
.cc-input-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-hover);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease-out;
}
.cc-input-line:focus-within { border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.cc-caret { flex-shrink: 0; }
.cc-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 0;
}
.cc-input::placeholder { color: var(--text-ghost); }
.cc-send {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--mint);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease-out;
}
.cc-send:hover { opacity: 0.85; }

/* Sidebar extras to match the app. */
.mock-agent-row.active { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
.mock-graph-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 16px 6px; }
.mock-graph-chip {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-low);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}
.mock-graph-latest {
  margin: 2px 12px 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.015);
}
.mock-graph-kind { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: var(--mint); }
.mock-graph-label { font-size: 11px; color: var(--text-hi); margin: 2px 0; }
.mock-graph-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); }

/* Taller window + scrollable tab body with pinned profile footer. */
.mockup-window [hidden] { display: none !important; }
.mockup-body { height: 560px; }
.mock-tab-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mock-panel { padding-bottom: 8px; }

/* PR rows in the sidebar. */
.mock-pr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.1s ease-out;
}
.mock-pr-row:hover { background: rgba(255, 255, 255, 0.03); }
.mock-pr-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); flex-shrink: 0; }
.mock-pr-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mock-pr-title { font-size: 11px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-pr-author { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); }
.mock-pr-review { font-family: var(--font-mono); font-size: 9px; color: var(--mint); flex-shrink: 0; opacity: 0.85; }

.mock-live-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 15%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}
.mock-observe-card .mock-ws-card-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }

/* Friends panel. */
.mock-friend-add { display: flex; gap: 6px; padding: 8px 14px 4px; }
.mock-friend-input {
  flex: 1; min-width: 0;
  background: var(--bg-chrome);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mid);
}
.mock-friend-input::placeholder { color: var(--text-ghost); }
.mock-friend-addbtn {
  width: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-mid); font-size: 14px;
}
.mock-friend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.1s ease-out;
}
.mock-friend-row:hover { background: rgba(255, 255, 255, 0.03); }
.mock-friend-av { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.mock-friend-av.offline { background: var(--text-ghost); opacity: 0.5; }
.mock-friend-handle { font-size: 12px; color: var(--text-hi); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-friend-handle.offline { color: var(--text-low); font-weight: 400; }
.mock-friend-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); flex-shrink: 0; }
/* Online rows carry three action buttons; drop the meta text to make room. */
.mock-friend-row:has(.mock-friend-actions) .mock-friend-meta { display: none; }
.mock-friend-actions { display: flex; gap: 3px; margin-left: 4px; flex-shrink: 0; }
.mock-friend-row:not(:hover) .mock-friend-actions { opacity: 0.6; }
.mock-friend-btn {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-mid); cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.mock-friend-btn svg { width: 11px; height: 11px; }
.mock-friend-btn:hover { color: var(--mint); border-color: var(--mint); }
.mock-friend-hint { font-size: 10px; color: var(--text-ghost); padding: 10px 14px 4px; line-height: 1.4; }
.mock-friend-hint strong { color: var(--mint); }

/* Profile footer. */
.mock-footer {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.mock-footer-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 20%, var(--bg));
  color: var(--mint);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.mock-footer-info { flex: 1; min-width: 0; }
.mock-footer-handle { font-weight: 500; font-size: 13px; color: var(--text-hi); line-height: 1.15; }
.mock-footer-handle .mock-at { color: var(--text-low); }
.mock-footer-tier { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; color: var(--mint); text-transform: uppercase; margin-top: 1px; }
.mock-footer-gear { color: var(--text-ghost); display: flex; }

/* Main-area views. */
.mock-views { flex: 1; min-height: 0; display: flex; }
.mock-view { flex: 1; min-width: 0; display: none; }
.mock-view.active { display: flex; }

/* PR review view. */
.mock-pr-view { flex: 1; padding: 18px 22px; overflow-y: auto; font-family: var(--font-sans); }
.mock-pr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mock-back {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-low);
  background: none; border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 9px; cursor: pointer;
}
.mock-back:hover { color: var(--text-hi); border-color: var(--text-mid); }
.mock-pr-state {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent);
  padding: 2px 8px; border-radius: 999px;
}
.mock-pr-view-title { font-weight: 600; font-size: 17px; letter-spacing: -0.2px; color: var(--text-hi); flex-basis: 100%; }
.mock-pr-view-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-low); }
.mock-pr-checks {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-chrome); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 14px;
}
.mock-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-mid); }
.mock-check-dot { width: 14px; text-align: center; }
.mock-check-dot.ok { color: var(--mint); }
.mock-check-dot.run { color: var(--yellow); }
.mock-check-time { margin-left: auto; color: var(--text-ghost); }
.mock-diff { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.mock-diff-file {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-mid);
  padding: 8px 12px; background: var(--bg-chrome); border-bottom: 1px solid var(--border);
}
.mock-diff-stat { color: var(--mint); margin-left: 6px; }
.mock-diff-body { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; padding: 10px 12px; color: var(--text-mid); overflow-x: auto; }
.mock-pr-review-cta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--bg); background: var(--text-hi); border: none; border-radius: 6px;
  padding: 9px 16px; cursor: pointer;
}
.mock-pr-review-cta:hover { opacity: 0.9; }

/* Observe / shared session view. */
.mock-observe-view { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mock-observe-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.mock-observe-title { font-family: var(--font-mono); font-size: 12px; color: var(--text-hi); }
.mock-observe-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); margin-left: auto; }
.mock-observe-term { flex: 1; padding: 14px 18px; overflow-y: auto; }
.mock-observe-foot {
  font-size: 11px; color: var(--text-low);
  padding: 10px 18px; border-top: 1px solid var(--border);
}

/* ─── Boutique mockup polish: wider window, theme switch, goose brand ─────── */

/* Wider + taller so the whole product reads at a glance. */
.mockup-window { max-width: 1180px; }
.mockup-body { height: 620px; }


.mockup-titlebar,
.mockup-sidebar,
.mock-topbar,
.mock-footer,
.mockup-pane,
.pane-term,
.mock-ws-name-text,
.mock-group-name,
.mock-agent-status,
.mock-branch,
.mock-brand { transition: background 0.2s ease-out, color 0.2s ease-out; }

/* The lockup itself is defined with the sidebar rules above — this block used
   to restate display/align-items/gap here and win on the gap, which is how the
   row ended up 8px instead of the app's 9px scaled. */
.mock-goose { flex-shrink: 0; }
.mock-brand-text { line-height: 1; }

/* Colored workspace dot per --accent. */
.mock-ws-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--mint));
  flex-shrink: 0;
}
.mock-ws-card-name { display: flex; align-items: center; gap: 6px; }

/* Footer goose avatar: the goose is the mark, kept through the rebrand. */
.mock-footer-av--goose {
  background: transparent;
  box-shadow: none;
}

/* Main area must position the toast relative to itself. */
.mockup-main { position: relative; }

/* New-PR toast — slides down from under the topbar. */
.mock-toast {
  position: absolute;
  top: 10px; right: 14px; z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  padding: 9px 10px 9px 12px;
  background: var(--bg-chrome);
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.02);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mock-toast.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mock-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  /* The mock's own accent, not the page's: the page keeps a blue --action in
     Daybreak, the app's chrome does not. */
  background: var(--mint);
  flex-shrink: 0;
  animation: toastPulse 1.6s ease-in-out infinite;
}
.mock-toast-body { min-width: 0; }
.mock-toast-title { font-family: var(--font-mono); font-size: 11px; color: var(--text-hi); }
.mock-toast-num { color: var(--mint); }
.mock-toast-sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-low); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-toast-btn {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--bg); background: var(--text-hi);
  border: none; border-radius: 4px; padding: 6px 10px; cursor: pointer;
  transition: opacity 0.12s;
}
.mock-toast-btn:hover { opacity: 0.9; }
.mock-toast-x {
  flex-shrink: 0;
  display: grid; place-items: center;
  background: none; border: none; color: var(--text-low);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.mock-toast-x:hover { color: var(--text-hi); }

/* Newly-arrived PR row flashes in. */
.mock-pr-new { animation: prFlash 1.4s ease-out; }

/* CTA turns into a live "agent reviewing" indicator. */
.mock-pr-review-cta.reviewing {
  background: var(--bg-chrome);
  color: var(--yellow);
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--border));
  display: inline-flex; align-items: center; gap: 8px;
}
.mock-pr-review-cta.done {
  background: color-mix(in srgb, var(--mint) 14%, transparent);
  color: var(--mint);
  border: 1px solid color-mix(in srgb, var(--mint) 40%, var(--border));
}
.mock-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  border-top-color: var(--yellow);
  display: inline-block;
  animation: mockSpin 0.7s linear infinite;
}

/* ─── Interactive Graph Explorer ─────────────────────────────────────────── */

.ge-section { padding: 10px 40px 100px; }

/* The Graph intro: headline left, copy + specs right, so it fills the width
   instead of stranding half the section as empty space, and it flows straight
   into the Graph Explorer below rather than sitting a screen apart. */
.graph-split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  column-gap: clamp(32px, 6vw, 76px);
  align-items: start;
}
.graph-split .sec-head { margin-bottom: 0; }
.graph-split .f-copy p { margin-top: 0; }
.graph-split .spec { margin-top: 22px; }
#graph { padding-bottom: clamp(40px, 5vw, 60px); }
@media (max-width: 820px) {
  .graph-split { grid-template-columns: 1fr; row-gap: 24px; }
  .graph-split .spec { margin-top: 10px; }
}

.ge-window {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-hover);
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(242, 241, 238, 0.05), 0 40px 80px rgba(0, 0, 0, 0.55);
}

.ge-head { padding: 22px 26px 14px; }
.ge-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--text-low); margin-bottom: 8px;
}
/* Grounded in the app: this panel is a modal title, and app global.css sets
   those in uppercase mono with a static cursor for punctuation — "the
   machine's voice, not the brand's". Fraunces was wrong here twice over, as
   chrome and at a size the face is not licensed to carry. Scaled up from the
   app's 16px because this is a marketing rendition, not the modal itself. */
.ge-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-hi);
  line-height: 1;
}
.ge-title::after { content: "_"; color: var(--mint); }
.ge-sub { font-size: 14px; color: var(--text-mid); margin-top: 8px; }

.ge-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 26px 16px;
}
.ge-scope { display: inline-flex; gap: 2px; background: var(--bg-chrome); border: 1px solid var(--border); border-radius: 6px; padding: 2px; }
.ge-scope-right { margin-left: auto; }
.ge-scope-btn {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
  background: none; border: none; border-radius: 4px; padding: 5px 11px; cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.ge-scope-btn.active { color: var(--bg); background: var(--mint); }
.ge-scope-btn:not(.active):hover { color: var(--text-hi); }

.ge-legend { display: flex; flex-wrap: wrap; gap: 5px; }
/* On phones the ten legend chips become one swipeable row instead of a
   three-deep wall between the visitor and the graph. */
@media (max-width: 560px) {
  .ge-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
  .ge-legend::-webkit-scrollbar { display: none; }
  .ge-legend-chip { flex-shrink: 0; }
}
.ge-legend-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--text-mid);
  background: var(--bg-chrome); border: 1px solid var(--border);
  border-radius: 99px; padding: 5px 13px 5px 10px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, opacity 0.12s;
}
.ge-legend-chip .ge-swatch {
  width: 9px; height: 9px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 55%, transparent);
}
.ge-legend-chip.active { border-color: var(--c); color: var(--text-hi); }
.ge-legend-chip.dim { opacity: 0.4; }

.ge-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  border-top: 1px solid var(--border);
  height: 520px;
}
.ge-canvas-wrap {
  position: relative;
  /* Black, one step under the window's graphite chrome, so the graph pane
     reads as depth: the same move the page makes around the app window. */
  background:
    radial-gradient(circle at 42% 40%, color-mix(in srgb, var(--sky) 5%, transparent), transparent 62%),
    #000000;
  overflow: hidden;
  cursor: grab;
  /* One-finger vertical swipes keep scrolling the page on touch; the graph
     pans on horizontal drags (and mouse), so it can never trap the thumb. */
  touch-action: pan-y;
}
.ge-canvas-wrap:active { cursor: grabbing; }
.ge-canvas { width: 100%; height: 100%; display: block; }
/* Two offset copies of the hero's staggered dot lattice, breathing in
   antiphase over 18s: the same field the hero swims in, at whisper volume. */
.ge-lattice { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ge-lattice.a { animation: ge-breathe 18s ease-in-out infinite; }
  .ge-lattice.b { animation: ge-breathe 18s ease-in-out infinite reverse; }
  @keyframes ge-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
}
.ge-hint {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-ghost);
  pointer-events: none;
}

/* SVG node/edge primitives. */
.ge-edge { stroke: var(--text-low); stroke-opacity: 0.32; stroke-width: 1; transition: stroke 0.15s, stroke-opacity 0.15s, stroke-width 0.15s; }
.ge-edge.hot { stroke: var(--sky); stroke-opacity: 0.85; stroke-width: 1.6; }
.ge-edge.faded { stroke-opacity: 0.08; }
.ge-node { cursor: pointer; }
.ge-node circle { stroke: var(--bg); stroke-width: 2; transition: r 0.15s ease-out; }
.ge-node text {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em; fill: var(--text-mid);
  /* the halo: a thick paper-coloured stroke painted under the glyphs, so a
     label stays readable across edges and other labels */
  stroke: #000000; stroke-width: 3.5px; paint-order: stroke;
  pointer-events: none; transition: fill 0.15s;
}
.ge-node.hot text { fill: var(--text-hi); }
.ge-node.sel circle {
  stroke: var(--text-hi); stroke-width: 2.5;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sky) 70%, transparent));
}
.ge-node.faded { opacity: 0.28; }

/* Detail panel. */
.ge-detail {
  border-left: 1px solid var(--border);
  padding: 22px;
  overflow-y: auto;
  background: var(--surface);
}
.ge-detail-empty { font-family: var(--font-sans); font-size: 13px; color: var(--text-ghost); line-height: 1.7; }
.ge-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--c, var(--mint));
  border: 1px solid color-mix(in srgb, var(--c, var(--mint)) 45%, transparent);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 10px;
}
/* The app's .gx-record-label, to the value: sans 600 at 19px, -0.2px. */
.ge-detail-name { font-weight: 600; font-size: 19px; letter-spacing: -0.2px; color: var(--text-hi); line-height: 1.15; margin-bottom: 4px; }
.ge-detail-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-mid); line-height: 1.6; margin: 10px 0 16px; }
.ge-meta-grid { display: flex; gap: 22px; margin-bottom: 18px; flex-wrap: wrap; }
.ge-meta-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1px; color: var(--text-low); text-transform: uppercase; }
.ge-meta-v { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-mid); margin-top: 3px; }
.ge-conn-head { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.5px; color: var(--text-low); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ge-conn-count { color: var(--text-ghost); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.ge-conn-group { margin-bottom: 12px; }
.ge-conn-rel { font-family: var(--font-mono); font-size: 9.5px; color: var(--mint); margin-bottom: 6px; }
.ge-conn-rel.in { color: var(--blue); }
.ge-conn-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.ge-conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-mid);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 9px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.ge-conn-pill:hover { border-color: var(--text-mid); color: var(--text-hi); }
.ge-conn-pill .ge-swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }@media (max-width: 820px){
  .ge-main { grid-template-columns: 1fr; height: auto; }
  .ge-canvas-wrap { height: 380px; }
  .ge-detail { border-left: none; border-top: 1px solid var(--border); max-height: 260px; }}@media (max-width: 700px){

  .mockup-section { padding: 0 20px 60px; }
  .mockup-sidebar { display: none; }
  .mockup-panes { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .mockup-panes.mock-panes-2 { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .mock-panes-2 .pane-term { height: auto; min-height: 150px; }
  .mockup-body { height: auto; }
  .mock-path { display: none; }}

/* ─── Mockup: agent names (matches the product's random agent names) ─────── */

.mock-agent-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
}

/* ─── Mockup: pane labels (mirror the product's pane topbar) ─────────────── */

.mock-pane-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
  letter-spacing: 0.2px;
}
.mock-pane-accent {
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--mint);
  flex-shrink: 0;
}
.mock-pane-kind {
  font-weight: 400;
  color: var(--text-low);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Kind logo in the pane topbar, sized to sit with the label like the app */
.mock-pane-ico { width: 13px; height: 13px; margin: 0 -1px; }

/* Live task label — the pane topbar's distilled "what is this agent on right
   now", mirroring the product (v0.4.16). */
.mock-pane-task {
  font-weight: 400;
  font-style: italic;
  color: var(--text-low);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}@media (prefers-reduced-motion: reduce){
  .goose-anim .frame-b, .hero-flock, .goose-lore-mark, .goose-bob,
  .pane-term .cursor, .voice-wave i, .mockup-pill-dot, .voice-rec-dot,
  .mock-toast-dot, .mock-spin { animation: none; }
  .mock-toast { transition: none; }}

/* ─── Graph Explorer: list view ──────────────────────────────────────────────
   The keyboard-friendly twin of the canvas. Same data, newest first. */

.ge-scope-static {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-low);
  padding: 5px 11px;
}

.ge-list {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
}
.ge-list[hidden] { display: none; }

.ge-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ge-list-row:hover { color: var(--text-hi); background: var(--bg-chrome); }
.ge-list-row.sel { border-color: var(--mint); color: var(--text-hi); }
.ge-list-row .ge-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ge-list-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ge-list-kind {
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-low);
  flex-shrink: 0;
}
.ge-list-time { font-size: 10px; color: var(--text-ghost); flex-shrink: 0; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes toastPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.72); }
}
@keyframes prFlash {
  0%   { background: color-mix(in srgb, var(--mint) 22%, transparent); }
  100% { background: transparent; }
}
@keyframes mockSpin { to { transform: rotate(360deg); } }
.hq .mockup-section, .hq .ge-section { padding-left: 0; padding-right: 0; }
.hq { max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); }

/* A second copy of the Daybreak pin lived here too. Same story: the mockup
   palette is token-based now and correct in both themes, so re-pinning it
   light under .hq only broke Nightfall. */
/* Mock brand matches the real app now: roman Fraunces, no dot */
/* .mock-brand-text holds the .wordmark component and nothing else, and the
   component carries its own face, size and tracking — a mono/uppercase rule
   here is left over from a text-only brand row and can only drift. Colour is
   all that is left to say, and it is the app's: plain ink, like every other
   label in the rail. */
.hq .mock-brand-text { color: var(--text-hi); }

/* Grounding: names read in ink like the real app; accents stay on chips */
.hq .mock-agent-name, .hq .mock-ws-name-text, .hq .mock-pane-label,
.hq #mock-focus-name, .hq #mock-mate-name { color: var(--text-hi); }
/* One exception, because the app makes it: the workspace you are in wears its
   accent on the name — `.workspace-card.focused .name { color: var(--accent,
   var(--action)) }`. Every other card's name is --text-hi there too, so ink is
   right for the rest; this rule is what tells you which workspace is live.
   (An agent group's label is the accent in the app as well, and .mock-group-name
   already carries it — it is deliberately not in the list above.) */
.hq .mock-ws-card.focused .mock-ws-name-text { color: var(--accent, var(--mint)); }
/* Calmer cards: one hairline, one soft shadow, nothing theatrical */
.hq .mockup-window, .hq .ge-window {
  box-shadow: 0 1px 2px rgba(11, 27, 51, 0.05), 0 10px 28px -18px rgba(11, 27, 51, 0.14);
  border: 1px solid var(--hairline, rgba(11,27,51,0.12));
}

/* The digital twin used to re-pin Daybreak literals here, unconditionally, so
   the hero mock stayed light even in Nightfall. The mockup palette above is
   token-based and already correct in both themes; this block only has to not
   fight it. */
/* Titles in ink, like every other heading on the page */
.hq .ge-title { color: var(--text-hi); }

/* macOS traffic lights on the mock */
.hq .mockup-titlebar { position: relative; }
.mock-tls { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 7px; }
.mock-tls i { width: 12px; height: 12px; border-radius: 50%; border: 0.5px solid rgba(0, 0, 0, 0.14); }
/* The real macOS colors. The pastels these used to carry (#F2A69B / #F4D49B /
   #A9D9AE) made every screenshot look like an unfocused window. */
.mock-tls .tl-r { background: #FF5F57; } .mock-tls .tl-y { background: #FEBC2E; } .mock-tls .tl-g { background: #28C840; }
/* the app deserves a wider stage */
.hq { max-width: min(1400px, 96vw); text-align: left; }
.hq .mockup-window { max-width: none; }
/* footer identity block hugs the avatar, like the real sidebar */
.hq .mock-footer-info { text-align: left; }

/* Git panel in the sidebar, mirroring the app's GitPanel */
.hq .mock-git { padding: 0 14px 6px; font-family: var(--font-mono); font-size: 10px; }
.hq .mock-git-row { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 0; }
.hq .mock-git-branch { color: var(--text-hi); font-weight: 700; font-size: 10.5px; }
.hq .mock-git-delta .add { color: var(--ok); font-weight: 600; }
.hq .mock-git-delta .del { color: var(--bad); font-weight: 600; }
.hq .mock-git-meta { color: var(--text-ghost); white-space: nowrap; }
.hq .mock-git-commit { color: var(--text-mid); padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq .mock-git-commit .sha { color: var(--text-ghost); margin-right: 6px; }
.hq .mock-wt-chip {
  margin-left: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--text-mid);
  border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; white-space: nowrap;
}

/* room for the full sidebar: git panel + both PR rows */
.hq .mock-view[data-view="terminals"] .pane-term { min-height: 380px; }
.hq .mock-ws-card { padding-top: 6px; padding-bottom: 6px; }
.hq .mock-section-header { padding-top: 8px; padding-bottom: 4px; }

/* full sidebar: git commits + usage gauges + footer */
.hq .mockup-body { height: 620px; }
/* usage gauges, like ClaudeUsagePanel / AgentUsageBar */
.hq .mock-usage { padding: 0 14px 8px; font-family: var(--font-mono); font-size: 9.5px; }
.hq .mock-usage-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.hq .mock-usage-row .ulabel { width: 52px; color: var(--text-mid); }
.hq .mock-usage-row .ubar { flex: 1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.hq .mock-usage-row .ubar i { display: block; height: 100%; border-radius: 2px; }
.hq .mock-usage-row .uval { width: 34px; text-align: right; color: var(--text-low); }
/* pane-level working wave, right where the app puts it */
.hq .mock-pane-label .wb { margin-left: auto; }
.hq .mock-pane-label .wb + .mock-wt-chip { margin-left: 8px; }

/* One wave, writ large: the working signature, once. It sits between the
   claim and the line that explains it, so it needs air on both sides. */
.wave-interlude { display: flex; justify-content: center; margin: 32px auto 12px; }
.wb-grand { gap: 7px; }
.wb-grand i { width: 11px; height: 11px; border-radius: 3.5px; }

/* Status bar: usage gauges live bottom-right, like the real app */
.hq .mock-statusbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 7px 14px; border-top: 1px solid var(--border);
  background: var(--bg-chrome);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mid);
}
.hq .ms-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 9px;
}
.hq .ms-chip b { font-weight: 700; color: var(--text-low); }
.hq .ms-seg { display: inline-flex; gap: 2px; }
.hq .ms-seg i { width: 5px; height: 8px; border-radius: 2px; background: var(--border); }
/* Usage segments take the app's severity colour, not a per-kind tint: the app
   paints .usage-bar-fill var(--blue) while a limit is healthy and only moves to
   --yellow / --red as it fills. The two literals here were a peach and a green
   from no palette in the app, pinned across both themes. */
.hq .ms-seg .on { background: var(--blue); }

/* Tabs read as chips in Daybreak; the active one is a raised card */
.hq .mock-toptab { color: var(--text-low); border: 1px solid transparent; border-radius: 6px; padding: 2px 9px; }
.hq .mock-toptab.active {
  color: var(--text-hi); background: var(--bg-card);
  border-color: var(--border); box-shadow: 0 1px 2px rgba(11, 27, 51, 0.06);
  font-weight: 600;
}
.hq .mock-toptab-add { color: var(--text-ghost); padding: 0 6px; }

/* ── The app mockup on phones: drop the desktop chrome that squeezes badly
   at 390px (left sidebar, tab row, worktree chips, status gauges) and let the
   two live agent panes stack as clean, readable cards — the product's point
   still reads, without the cramped desktop scaffolding. ── */
@media (max-width: 700px) {
  .hq { max-width: 100%; }
  .hq .mockup-body { height: auto !important; }
  .hq .mockup-sidebar { display: none; }
  .hq .mock-statusbar { display: none; }
  .hq .mock-topbar { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px; }
  .hq .mock-toptab, .hq .mock-toptab-add { display: none; }
  .hq .mock-wt-chip { display: none; }
  .hq .mock-pane-label { flex-wrap: wrap; row-gap: 3px; }
  .hq .mockup-panes, .hq .mockup-panes.mock-panes-2 { grid-template-columns: 1fr; }
  .hq .mock-views { flex-direction: column; }
  .hq .mock-view[data-view="terminals"] .pane-term { min-height: 0 !important; }
  .hq .mock-right { display: none; }
  /* One clean agent pane on phones — two stacked terminal dumps plus an
     overlapping toast reads as a mess at 390px. */
  .hq #mock-mate-pane { display: none; }
  .hq .mock-toast { display: none !important; }
  .hq #mock-focus-pane .pane-term { max-height: 380px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .hq .mockup-pill { display: none; }
  .hq .nw-overlay { display: none !important; }
}

/* ── Right rail: the app's Git + Pull Requests dock (img-15). ── */
.mock-right {
  width: 232px; min-width: 232px;
  border-left: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: thin;
  font-size: 10px; color: var(--text-mid);
}
.mr-head {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px 7px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-low);
}
.mr-head::before { content: "⌄"; color: var(--text-ghost); font-weight: 400; }
.mr-head .mr-head-x { margin-left: auto; color: var(--text-ghost); font-weight: 400; letter-spacing: 0; }
.mr-head-pr { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; }
.mr-sub {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px 4px; font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-ghost);
}
.mr-sub .mr-count { color: var(--text-low); }
.mr-row { display: flex; align-items: center; gap: 7px; padding: 3px 14px; min-width: 0; }
.mr-row.on { background: var(--bg-chrome); }
.mr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-sky, #7fb4f0); flex-shrink: 0; }
.mr-dot.ring { background: none; border: 1.5px solid var(--text-low); }
.mr-name { color: var(--text-hi); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-branch { margin-left: auto; color: var(--text-low); white-space: nowrap; flex-shrink: 0; }
.mr-branch .up { color: var(--ok, #2fa36b); }
.mr-changes {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; margin-top: 2px;
  border-top: 1px solid var(--border); color: var(--text-mid);
}
.mr-changes .b { color: var(--text-hi); font-weight: 700; }
.mr-changes .up { color: var(--ok, #2fa36b); }
.mr-changes .n { color: var(--text-low); }
.mr-changes .diff { margin-left: auto; color: var(--text-low); font-size: 9px; letter-spacing: 1px; }
.mr-file { display: flex; align-items: center; gap: 8px; padding: 2px 14px; min-width: 0; }
.mr-file .m { color: var(--yellow, #8a6300); font-weight: 700; width: 7px; flex-shrink: 0; }
.mr-file .fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-mid); }
.mr-file .fdiff { margin-left: auto; color: var(--text-low); font-size: 9px; flex-shrink: 0; }
.mr-commit { display: flex; align-items: center; gap: 9px; padding: 3px 14px; min-width: 0; position: relative; }
.mr-commit .g { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--acc-peach, #ffb59e); background: var(--surface); flex-shrink: 0; z-index: 1; }
.mr-commit .g.filled { background: var(--acc-peach, #ffb59e); }
/* the thin vertical line joining commit dots */
.mr-commits { position: relative; }
.mr-commits::before { content: ""; position: absolute; left: 17.5px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.mr-commit .cmsg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-mid); }
.mr-commit .badge { margin-left: auto; font-size: 8px; font-weight: 700; color: var(--bg-card); background: var(--text-hi); padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
.mr-empty { padding: 6px 14px 16px; color: var(--text-ghost); }
.mr-pad { padding-bottom: 10px; }

/* Elaborate git graph in Recent commits: a main lane with a branch that
   forks out and merges back, colored lane dots, version + tag badges. */
.mr-git { position: relative; padding: 4px 14px 14px; }
.mr-git-svg { position: absolute; left: 14px; top: 6px; width: 30px; height: 144px; overflow: visible; }
.mr-grow { height: 24px; display: flex; align-items: center; gap: 8px; padding-left: 30px; min-width: 0; position: relative; }
.mr-grow .cmsg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-mid); }
.mr-grow .vbadge {
  margin-left: auto; flex-shrink: 0; font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--text-low); border: 1px solid var(--border-hover); border-radius: 999px; padding: 1px 6px;
}
.mr-grow .vbadge.head { color: var(--bg-card); background: var(--text-hi); border-color: var(--text-hi); }
.mr-grow .tag {
  margin-left: auto; flex-shrink: 0; font-size: 8px; color: var(--text-low);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; max-width: 46px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The goose does NOT change colour between themes. It used to be remapped to
   the old mint colorway in Nightfall, on the claim that this matched the app;
   it does not. The app's own palette block says the crest hues are
   "theme-independent — deliberately not repeated in the Daybreak or High
   Contrast blocks", and brand.css says the same: sky, rose and peach were
   chosen against navy to begin with. One bird, one colourway, both themes. */

/* ══ APP TWIN ══════════════════════════════════════════════════════════════
   The hero mockup is a digital twin of the cockpit, not an impression of it.
   Every value below is the app's own, taken from
   flock-code/apps/flock-desktop/src/styles/global.css and from the app's
   rendered DOM (0.7.42, Graphite — which is the app's DEFAULT theme, not
   Nightfall: lib/theme.ts, DEFAULT_THEME). Where the two disagreed, the app
   won and this file changed.

   Two rules keep it honest:

   1. Sizes are the app's REAL pixel values, and the whole mock is shrunk once
      with `zoom` — the same mechanism the app uses for --ui-scale. Nothing
      here is a value re-derived at mock scale, so a diff against global.css is
      a straight read rather than an arithmetic exercise.
   2. The app's token names are declared on .app-shell and mapped to the page's
      own palette, so the mock follows the page into Daybreak the way the
      product follows the OS.
   ────────────────────────────────────────────────────────────────────────── */

.hq .mockup-body {
  /* The app ships at --ui-scale: md, which is 1.08, and applies it with
     `zoom` on .app-shell. The mock uses the same mechanism at the same value,
     so the rail, the type and the chrome all sit at the size a new user
     actually sees — at 1.0 the whole cockpit read about 8% too small. */
  --mz: 1.08;
  display: block;
  zoom: var(--mz);
  /* Chrome resolves percentages inside a zoomed box against the parent
     converted into the child's scale, so 100% is already the frame. */
  width: 100%;
  /* Window height in the app's own pixels — enough rail for Workspaces,
     Agents and Graph to stand clear of the profile footer, which is what the
     app shows at its own default window size. */
  height: 762px;
  padding: 0;
  background: none;
}

/* The app's variable names, mapped onto the page's palette. Anything the app
   states as a literal in global.css is a literal here too. */
.hq .app-shell {
  --font-sans: var(--ui);
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Monaco, monospace;
  --fs-eyebrow: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
  --fs-md: 14px; --fs-lg: 16px;
  --weight-normal: 400; --weight-medium: 500; --weight-strong: 600;
  --tracking-normal: 0; --tracking-tight: -0.01em; --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;
  --radius-chip: 4px; --radius-control: 6px; --radius-row: 7px;
  --radius-surface: 10px;
  --sidebar-w: 240px; --right-rail-w: 260px; --titlebar-h: 32px;
  --gap-shell: 8px; --traffic-lights-w: 78px;

  --bg-window: var(--bg);
  --bg-sidebar: var(--surface);
  --hair: var(--border-hover);
  --hair-soft: var(--border);
  --rule-faint: color-mix(in srgb, var(--hair) 26%, transparent);
  --sel-quiet: color-mix(in srgb, var(--text-hi) 6%, transparent);
  --sel-neutral: color-mix(in srgb, var(--text-hi) 11%, transparent);
  --bg-hover: color-mix(in srgb, var(--text-hi) 6%, transparent);
  --surface-edge: inset 0 0 0 1px color-mix(in srgb, var(--hair) 26%, transparent);
  --surface-lift: 0 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);
  --app-surface: color-mix(in srgb, var(--bg-chrome) 74%, var(--bg-window));
  /* The app's chrome accent. Graphite's --action is #ffffff — not the brand
     blue, which is Nightfall's. Daybreak's is ink. The page-level block above
     already pins the Daybreak value; this is the dark half. */
  --action: var(--mint);
  --yellow: var(--warn-text);
  --wave-idle: color-mix(in srgb, var(--text-hi) 14%, transparent);
  --accent: var(--acc-sky);

  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: var(--bg-window);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text-hi);
  text-align: left;
}
:root[data-theme="dark"] .hq .app-shell { --action: #ffffff; }

/* ── Titlebar ─────────────────────────────────────────────────────────────
   Not a strip of chrome above the app: in the real window the title bar is
   Overlay + hiddenTitle (tauri.conf.json), so it is 32px of transparent
   drag region starting where the rail ends, carrying one centred pill. */
.hq .app-shell .titlebar {
  height: var(--titlebar-h);
  position: absolute;
  top: 0;
  left: max(var(--traffic-lights-w), var(--sidebar-w));
  right: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
}
.hq .pr-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-chrome);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  color: var(--text-mid);
}
.hq .pr-badge-bell { display: flex; padding-left: 3px; color: var(--text-ghost); }
.hq .pr-badge-bell svg { display: block; }

/* Traffic lights, where macOS actually puts them for this window:
   trafficLightPosition { x: 14, y: 18 } over the rail's own artwork, not on a
   title strip of the site's invention. */
.hq .mock-lights {
  position: absolute;
  left: 14px;
  top: 18px;
  z-index: 12;
  display: flex;
  gap: 8px;
}
.hq .mock-lights i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
}
.hq .mock-lights .tl-r { background: #FF5F57; }
.hq .mock-lights .tl-y { background: #FEBC2E; }
.hq .mock-lights .tl-g { background: #28C840; }

.hq .app-main {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative;
  gap: var(--gap-shell);
  padding: 0 var(--gap-shell) 0 0;
}

/* ── Rail ────────────────────────────────────────────────────────────────── */
.hq .app-shell .sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: color-mix(in srgb, var(--bg-sidebar) 62%, var(--bg-window));
  display: flex;
  flex-direction: column;
  border-right: none;
  box-shadow: var(--surface-edge);
  overflow: hidden;
}

/* The night sky. It is the app's own sidebar-night.jpg under a gradient that
   dissolves it into the rail — "only the traffic-light row, the way T3 holds
   the sky: a strip, not a banner". */
.hq .brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* stretch, not the centre the old mock rule asked for: the lockup is
     positioned by its own 78px traffic-light gutter, and centring it inside
     the band pushes the goose off that gutter. */
  align-items: stretch;
  gap: 0;
  padding: 0 8px 4px 0;
  /* The page's own .brand (the nav lockup) carries margin-right: auto. In the
     rail's column flex that auto margin eats the free space and the sky band
     stops ~30px short of the rail's edge. */
  margin: 0;
  color: var(--text-hi);
}
/* The sky is Nightfall's and Graphite's only — Daybreak's rail carries no
   photograph, and painting one there would be a screen the app never draws. */
:root[data-theme="dark"] .hq .brand {
  color: #f2eee6;
  background-color: #0b1220;
  background-image:
    linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--bg-sidebar) 62%, var(--bg-window)) 100%),
    url("/sidebar-night.jpg");
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}
.hq .brand-lockup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  height: 36px;
  margin-top: 6px;
  /* Clears the traffic lights, exactly as the app does. */
  padding-left: 78px;
  padding-right: 26px;
  position: relative;
  z-index: 1;
}
.hq .brand-goose { display: flex; align-items: center; flex-shrink: 0; margin-top: 1px; }
.hq .brand-goose img { display: block; width: 36px; height: 16px; image-rendering: pixelated; }
.hq .brand .wordmark { font-size: 26px; color: currentColor; }
/* Out of flow and invisible at rest, exactly as the app draws it: the rail's
   collapse glyph appears on hover of the brand row and never competes with the
   logotype for the space beside it. (The app can afford to hide it because
   "Hide sidebar" is also a ⌘K command and the expand twin in the pane header
   is always visible.) */
.hq .brand-collapse {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-chip);
  color: var(--text-low);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.hq .brand:hover .brand-collapse { opacity: 1; }
:root[data-theme="dark"] .hq .brand-collapse { color: rgba(242, 238, 230, 0.7); }

/* Home / Friends. A segmented control drawn as a recess — the track is a
   hairline, the selected half lifts to --bg-chrome. */
.hq .sidebar-tabs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  margin: 2px 6px 8px;
  padding: 2px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule-faint);
  border-radius: var(--radius-control);
  border-bottom: none;
}
.hq .sidebar-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text-low);
  background: none;
  border: none;
  border-radius: calc(var(--radius-control) - 2px);
  position: relative;
  cursor: pointer;
}
.hq .sidebar-tab svg { flex-shrink: 0; }
.hq .sidebar-tab.active {
  color: var(--text-hi);
  font-weight: var(--weight-medium);
  background: var(--bg-chrome);
}
.hq .tab-online-badge {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; padding: 0 4px;
  border-radius: var(--radius-row);
  background: color-mix(in srgb, var(--text-hi) 12%, transparent);
  color: var(--text-hi);
  font-size: var(--fs-eyebrow); font-weight: var(--weight-strong); line-height: 1;
}

/* min-height: 0 or the list refuses to shrink below its content and pushes
   the profile footer out through the bottom of the rail. */
.hq .sidebar-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.hq .sb-sec { display: flex; flex-direction: column; }
.hq .sb-sec-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--bg-sidebar) 62%, var(--bg-window));
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text-ghost);
  justify-content: flex-start;
}
.hq .sb-sec-title { flex: 1; min-width: 0; display: flex; align-items: center; }
.hq .sb-sec-title .count { color: var(--text-ghost); margin-left: 4px; letter-spacing: var(--tracking-caps); }
.hq .sb-sec-chevron {
  position: absolute; left: 3px; top: 0; bottom: 0;
  display: flex; align-items: center;
  color: var(--text-ghost);
  opacity: 0;
}
.hq .sb-sec-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-right: -10px; color: var(--text-ghost); }
.hq .sb-sec-body { padding: 0 0 10px; }
.hq .icon-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; display: flex; align-items: center; justify-content: center; }
.hq .add-btn {
  width: 21px; height: 21px; border-radius: var(--radius-chip);
  color: var(--text-ghost); font-size: var(--fs-lg); line-height: 1;
}

/* Workspace cards */
.hq .workspace-card {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  border-left: none;
  background: none;
}
.hq .workspace-card.focused { background: var(--sel-neutral); }
.hq .ws-card-header { position: relative; display: flex; flex-direction: column; gap: 3px; padding-right: 22px; }
.hq .workspace-card .card-top { display: flex; align-items: center; gap: 6px; }
.hq .workspace-card .name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--weight-strong);
  color: var(--text-hi);
  letter-spacing: var(--tracking-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq .workspace-card .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-low);
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.hq .workspace-card .meta-panes { flex-shrink: 0; white-space: nowrap; }
.hq .workspace-card .meta-branch { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq .workspace-card .meta .sep { color: var(--text-ghost); }
.hq .workspace-card .status-dot { position: absolute; top: 12px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; color: var(--text-ghost); }
.hq .status-mark { display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.hq .ws-new-row {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-ghost);
  text-align: left;
}

/* Agent rows. Mono, because in the app an agent row is machine state:
   name, wave, what it is on, which model. */
.hq .agent-row {
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-mid);
  position: relative;
  background: none;
  flex-direction: row;
}
.hq .agent-row.s-working { background: color-mix(in srgb, var(--accent, var(--action)) 6%, transparent); }
.hq .agent-row.active { background: var(--sel-neutral); }
.hq .agent-row.s-awaiting { background: color-mix(in srgb, var(--yellow) 14%, transparent); }
.hq .agent-row.s-awaiting::before {
  content: ""; position: absolute; left: 3px; top: 5px; bottom: 5px;
  width: 2px; border-radius: 1px; background: var(--yellow);
}
.hq .agent-kind-badge { display: inline-flex; align-items: center; color: var(--text-ghost); flex-shrink: 0; }
.hq .agent-kind-badge-logo { color: var(--kind-color, var(--text-mid)); display: block; }
.hq .agent-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hq .agent-row-line { display: flex; align-items: center; gap: 8px; }
.hq .agent-name {
  color: var(--text-hi);
  font-weight: var(--weight-strong);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq .agent-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  color: var(--text-low);
  letter-spacing: var(--tracking-wide);
}
.hq .agent-status.s-working { color: var(--action); font-weight: var(--weight-strong); }
.hq .agent-status.s-awaiting { color: var(--yellow); font-weight: var(--weight-strong); }
.hq .agent-status.s-idle { color: var(--text-low); }
.hq .agent-status .status-mark { width: 6px; height: 6px; }
.hq .agent-intent {
  min-width: 0; display: flex; align-items: center; gap: 4px;
  color: var(--text-low); font-style: italic;
}
.hq .agent-row.active .agent-intent { color: var(--text-mid); }
.hq .agent-intent-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq .agent-model-chip {
  flex-shrink: 0; font-style: normal;
  font-size: var(--fs-eyebrow); line-height: 14px;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-ghost); white-space: nowrap;
}

/* The working wave, as the app draws it: five idle cells with a comet
   travelling through them, out and back. */
.hq .app-shell .wb { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; --wb-cell: 5px; --wb-step: 0.075; }
.hq .app-shell .wb i {
  position: relative; display: block;
  width: var(--wb-cell); height: var(--wb-cell);
  border-radius: calc(var(--wb-cell) * 0.3);
  background: var(--wave-idle);
  animation: none;
}
.hq .app-shell .wb u { position: absolute; inset: 0; border-radius: inherit; opacity: 0; animation: wb-comet 1.9s linear infinite; }
.hq .app-shell .wb .wb-out { animation-delay: calc(var(--i, 0) * var(--wb-step) * 1.9s); }
.hq .app-shell .wb .wb-back { animation-delay: calc(0.5 * 1.9s + var(--j, 0) * var(--wb-step) * 1.9s); }
@keyframes wb-comet {
  0%   { opacity: 0;    background: var(--acc-sky); box-shadow: none; }
  6%   { opacity: 1;    background: var(--acc-sky);
         box-shadow: 0 0 calc(var(--wb-cell) * 0.9) color-mix(in srgb, var(--acc-sky) 55%, transparent); }
  14%  { opacity: 0.85; background: var(--acc-rose); box-shadow: none; }
  22%  { opacity: 0.5;  background: var(--acc-peach); box-shadow: none; }
  34%, 100% { opacity: 0; background: var(--acc-peach); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hq .app-shell .wb u { animation: none; opacity: 0; }
  .hq .app-shell .wb i:nth-child(2) { background: var(--acc-sky); }
  .hq .app-shell .wb i:nth-child(3) { background: var(--acc-rose); }
  .hq .app-shell .wb i:nth-child(4) { background: var(--acc-peach); }
}

/* Graph card — the app's GraphSidebarCard, which is a subtitle, a stat line
   and the last thing any agent wrote down. */
.hq .graph-subtitle {
  padding: 0 16px 7px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); color: var(--text-ghost);
}
.hq .graph-stats-line {
  display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 0 16px 8px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); color: var(--text-low);
}
.hq .graph-stats-line b { color: var(--text-hi); font-weight: var(--weight-strong); margin-right: 3px; }
.hq .graph-latest {
  margin: 0 16px 8px; padding: 6px 9px;
  background: var(--bg-window);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  display: flex; flex-direction: column; gap: 2px;
}
.hq .graph-latest-kind {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--action);
}
.hq .graph-latest-label {
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq .graph-latest-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-low); }
.hq .graph-conn-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-left: 7px; vertical-align: middle; background: var(--ok);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent);
}
.hq .empty-state {
  padding: 10px 16px 14px;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7;
  color: var(--text-low); letter-spacing: var(--tracking-wide);
}

/* Profile footer */
.hq .profile-footer {
  border-top: 1px solid var(--rule-faint);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  margin-top: auto;
}
.hq .avatar-wrap { position: relative; display: flex; flex-shrink: 0; }
.hq .profile-footer .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--action) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--action) 20%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  font-weight: var(--weight-medium); color: var(--action);
}
.hq .presence-light {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--bg-window); box-sizing: content-box;
  background: var(--ok);
  box-shadow: 0 0 5px color-mix(in srgb, var(--ok) 70%, transparent);
}
.hq .profile-footer .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq .profile-footer .display-name {
  font-family: var(--font-sans); font-size: var(--fs-base);
  font-weight: var(--weight-strong); color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq .footer-at { color: var(--action); margin-right: 1px; }
.hq .profile-footer .tier {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-normal); text-transform: none;
  color: var(--text-low);
}
.hq .gh-status { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); }
.hq .profile-footer-actions { display: flex; align-items: center; gap: 2px; }
.hq .footer-action {
  padding: 5px; border-radius: var(--radius-row);
  color: var(--text-ghost);
}


/* ── Workspace stack + pane header ────────────────────────────────────── */
.hq .workspace-stack {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--app-surface);
  box-shadow: var(--surface-edge), var(--surface-lift);
  display: flex;
  flex-direction: column;
}
.hq .main-content { flex: 1; display: flex; flex-direction: column; background: transparent; overflow: hidden; min-width: 0; }
.hq .app-shell .pane-header {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px 0 8px;
  background: transparent;
  border-bottom: 1px solid var(--rule-faint);
  gap: 10px;
  flex-shrink: 0;
  font-size: var(--fs-md);
}
.hq .tab-strip { display: flex; align-items: stretch; align-self: stretch; flex: 0 1 auto; min-width: 0; }
.hq .tab-item {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; margin: 6px 1px;
  border-radius: var(--radius-chip);
  flex-shrink: 0;
}
.hq .tab-item.active { background: var(--sel-neutral); }
.hq .tab-item .tab-name {
  font-family: var(--font-sans); font-size: var(--fs-base);
  font-weight: var(--weight-medium); color: var(--text-mid); white-space: nowrap;
}
.hq .tab-item.active .tab-name { color: var(--text-hi); }
.hq .tab-item .tab-shortcut { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-ghost); white-space: nowrap; }
.hq .tab-add-btn { width: 24px; height: 22px; border-radius: var(--radius-chip); color: var(--text-ghost); font-size: var(--fs-lg); line-height: 1; }
.hq .app-shell .spacer { flex: 1; min-width: 10px; }
.hq .branch-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--blue); background: none; border-radius: 3px;
  padding: 1px 6px; white-space: nowrap; max-width: 220px;
}
.hq .branch-chip.header-branch-chip { background: transparent; color: var(--accent, var(--action)); letter-spacing: var(--tracking-wide); }
.hq .branch-chip-dirty { color: var(--yellow); font-weight: var(--weight-strong); }
.hq .branch-chip-ahead { color: var(--ok); }
.hq .branch-chip-glyph { display: inline-flex; align-items: center; }
.hq .branch-divergence {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-ghost); border-radius: var(--radius-control);
  padding: 1px 4px; white-space: nowrap;
}
.hq .app-shell .directory {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-ghost); letter-spacing: var(--tracking-wide);
  white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.hq .header-btn {
  width: 26px; height: 26px; color: var(--text-mid);
  border-radius: var(--radius-chip); font-size: var(--fs-base); line-height: 1; flex-shrink: 0;
}
.hq .header-panel-toggle { color: var(--text-low); margin-left: 6px; }
.hq .header-sep { width: 1px; height: 11px; flex-shrink: 0; margin: 0 -4px; background: var(--rule-faint); }

/* ── Panes ───────────────────────────────────────────────────────────── */
.hq .pane-grid { flex: 1; display: flex; overflow: hidden; position: relative; min-height: 0; min-width: 0; }
/* min-width: 0 everywhere down the pane chain: without it a flex item
   refuses to shrink below its content, and one long terminal line pushes the
   whole grid out from under the rail. */
.hq .tab-layer { flex: 1; display: flex; min-height: 0; min-width: 0; }
.hq .mockup-panes { flex: 1; display: flex; min-height: 0; min-width: 0; gap: 0; background: none; }
.hq .terminal-pane {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  background: var(--bg-window);
  overflow: hidden;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
/* An unfocused pane in a tab that has a focused one dims — the app's own cue
   for "this is not where your keystrokes are going". */
.hq .tab-layer:has(.terminal-pane.focused) .terminal-pane:not(.focused) { opacity: 0.7; }
.hq .terminal-pane.focused {
  border-color: color-mix(in srgb, var(--accent, var(--action)) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--action)) 40%, transparent);
}
.hq .pane-topbar {
  flex-shrink: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding: 0 6px 0 8px;
  background: transparent;
  font-family: var(--font-mono);
  border-bottom: none;
}
.hq .pane-topbar-lead { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.hq .pane-topbar-name {
  font-size: var(--fs-sm); font-weight: var(--weight-medium);
  color: var(--accent, var(--action)); letter-spacing: var(--tracking-wide);
  white-space: nowrap; flex-shrink: 0;
}
.hq .pane-chip {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
  padding: 1px 6px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
  color: var(--chip-tint, var(--text-low)); background: none;
}
/* "host" — this agent is running on your machine with bypass-permissions.
   The app tints it warn and fills at 13%. */
.hq .pane-chip-warn { --chip-tint: var(--yellow); background: color-mix(in srgb, var(--yellow) 13%, transparent); }
.hq .branch-chip.pane-topbar-worktree { color: var(--text-low); max-width: 160px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.hq .pane-topbar-intent {
  min-width: 0; font-family: inherit; font-size: var(--fs-xs);
  font-style: italic; color: var(--text-low);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.hq .pane-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hq .pane-topbar-btn { width: 22px; height: 22px; border-radius: var(--radius-chip); color: var(--text-mid); }
.hq .pane-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }


/* ── Status strip ────────────────────────────────────────────────────── */
.hq .status-bar {
  flex-shrink: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: transparent;
  border-top: none;
  opacity: 0.68;
}
.hq .status-bar-section { display: flex; align-items: center; gap: 10px; }
.hq .cmdk-cue kbd {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-ghost); border: 1px solid var(--rule-faint);
  border-radius: var(--radius-chip); padding: 1px 5px;
}
.hq .changes-bar {
  display: flex; align-items: center; gap: 6px; height: 18px; padding: 0 8px;
  border-radius: var(--radius-control); border: 1px solid var(--border);
  background: var(--bg-chrome);
}
.hq .changes-icon { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: var(--weight-strong); line-height: 1; color: var(--yellow); }
.hq .changes-count { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--weight-medium); color: var(--text-hi); font-variant-numeric: tabular-nums; }
.hq .xp-mount { display: flex; align-items: center; }
.hq .xp-bar {
  display: flex; align-items: center; gap: 7px; height: 18px; padding: 0 8px;
  border-radius: var(--radius-control); border: 1px solid var(--border);
  background: var(--bg-chrome);
  --xp-color: var(--action);
}
.hq .xp-bar.agent-codex { --xp-color: var(--blue); }
.hq .xp-bar-label { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-ghost); white-space: nowrap; }
.hq .xp-bar-track {
  position: relative; width: 200px; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--text-low) 24%, transparent); overflow: hidden;
  display: block;
}
.hq .xp-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--xp-color); box-shadow: 0 0 6px color-mix(in srgb, var(--xp-color) 55%, transparent); }
.hq .xp-bar-ticks {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 11px,
    color-mix(in srgb, var(--bg-window) 70%, transparent) 11px,
    color-mix(in srgb, var(--bg-window) 70%, transparent) 12px);
}
.hq .xp-bar-pct { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--weight-medium); color: var(--text-mid); min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

/* The work surface and the right rail sit under the overlay titlebar; the
   left rail does not — its brand IS the traffic-light row. */
.hq .workspace-stack, .hq .app-shell .mock-right { margin-top: var(--titlebar-h); }

/* Terminal type is the app's xterm: 12px Plex Mono on a 16px line. */
.hq .pane-term {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  padding: 4px 6px;
  height: 100%;
  overflow: hidden;
}
.hq .pane-term .cc-line { font-size: 12px; line-height: 16px; }


/* ── Right rail ──────────────────────────────────────────────────────── */
.hq .app-shell .mock-right {
  width: var(--right-rail-w);
  min-width: var(--right-rail-w);
  background: color-mix(in srgb, var(--bg-sidebar) 62%, var(--bg-window));
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: var(--radius-surface);
  box-shadow: var(--surface-edge);
  overflow: hidden;
  padding: 0;
}
/* Git panel. Section labels are sans, sentence case, ghost — the app stopped
   shouting these in caps a long time ago. */
.hq .git-section-label {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 4px;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal);
  text-transform: none; color: var(--text-ghost);
}
.hq .git-count { color: var(--text-ghost); font-weight: var(--weight-strong); }
.hq .git-agents { display: flex; flex-direction: column; gap: 1px; }
.hq .git-checkout-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-mid);
}
.hq .git-checkout-row.muted { color: var(--text-low); }
.hq .git-checkout-row.active { background: color-mix(in srgb, var(--accent, var(--action)) 13%, transparent); }
.hq .git-checkout-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent, var(--text-low));
}
.hq .git-checkout-dot.ring { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-ghost); }
.hq .git-checkout-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq .git-checkout-row.active .git-checkout-name { color: var(--text-hi); }
.hq .git-checkout-branch { color: var(--text-ghost); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.hq .git-dirty { color: var(--yellow); }
.hq .git-ahead { color: var(--ok); }
.hq .git-branch-badge { color: var(--accent, var(--action)); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--weight-medium); }
.hq .git-diff-link { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-ghost); }
.hq .git-group-label {
  padding: 4px 12px 2px;
  font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-ghost);
}
.hq .git-change-row {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 12px;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-mid);
}
.hq .git-status { color: var(--yellow); flex-shrink: 0; }
.hq .git-status.a { color: var(--ok); }
.hq .git-file-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.hq .git-row-diff { color: var(--text-ghost); font-size: var(--fs-eyebrow); flex-shrink: 0; }

/* Pull requests, the rail's own row shape. */
.hq .pr-list { display: flex; flex-direction: column; }
.hq .pr-row {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 1px 6px; padding: 7px 10px;
  border-radius: var(--radius-row);
}
.hq .pr-number { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-ghost); flex-shrink: 0; padding-top: 1px; }
.hq .pr-row-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq .pr-title { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq .pr-repo { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-low); letter-spacing: var(--tracking-wide); }
.hq .pr-review-btn {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); color: var(--action);
  padding: 3px 7px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--action) 30%, transparent);
}


.hq .git-file-row {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 2px 12px; color: var(--text-mid);
}
.hq .git-file-status { width: 12px; text-align: center; font-weight: var(--weight-strong); flex-shrink: 0; color: var(--yellow); }
.hq .git-status-a { color: var(--ok); }
.hq .git-file-name { color: var(--text-hi); flex-shrink: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq .git-file-dir { color: var(--text-ghost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hq .git-file-diff-hint { margin-left: auto; flex-shrink: 0; padding-left: 8px; letter-spacing: var(--tracking-wide); color: var(--text-ghost); opacity: 0; }
/* Terminal lines wrap at the pane edge, the way a terminal reflows. */
.hq .pane-term .cc-line { white-space: pre-wrap; overflow-wrap: anywhere; }


/* ── The twin on a phone ───────────────────────────────────────────────
   The cockpit is a desktop window and a 390px column cannot hold it. Drop
   the chrome that only makes sense at width — both rails, the titlebar, the
   status strip, the window's own lights — and let the two agent panes stack
   as cards. The product's point survives; the scaffolding does not. */
@media (max-width: 700px) {
  .hq .mockup-body { --mz: 1; height: auto !important; }
  .hq .app-shell { height: auto; }
  .hq .app-shell .sidebar,
  .hq .app-shell .mock-right,
  .hq .app-shell .titlebar,
  .hq .app-shell .status-bar,
  .hq .mock-lights { display: none; }
  .hq .app-main { padding: 0; gap: 0; }
  .hq .workspace-stack { margin-top: 0; border-radius: 0; box-shadow: none; }
  .hq .pane-grid, .hq .tab-layer { display: block; overflow: visible; }
  .hq .mockup-panes { flex-direction: column; display: flex; overflow: visible; }
  .hq .terminal-pane { flex: none; overflow: visible; }
  .hq .pane-body, .hq .pane-term { height: auto; overflow: visible; }
  .hq .pane-topbar { height: auto; padding: 6px 8px; flex-wrap: wrap; row-gap: 3px; }
  .hq .pane-topbar-worktree, .hq .pane-topbar-actions { display: none; }
  .hq .app-shell .pane-header { padding-right: 8px; }
  .hq .app-shell .branch-divergence,
  .hq .app-shell .header-btn,
  .hq .app-shell .header-sep,
  .hq .app-shell .tab-add-btn { display: none; }
}


/* ── Friends tab ─────────────────────────────────────────────────────── */
.hq .friend-search-row {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 6px 6px; padding: 5px 9px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-chip); color: var(--text-ghost);
}
.hq .friend-search-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-hi);
}
.hq .friend-add-btn {
  width: 20px; height: 18px; font-size: var(--fs-md); color: var(--action);
  background: color-mix(in srgb, var(--action) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--action) 30%, transparent);
  border-radius: var(--radius-chip);
}
.hq .friend-row { display: flex; align-items: center; gap: 9px; padding: 6px 12px; min-height: 42px; }
.hq .friend-avatar-wrap { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.hq .friend-avatar-placeholder {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-chrome); border: 1px solid var(--border);
}
.hq .friend-row.offline .friend-avatar-placeholder { opacity: 0.4; }
.hq .friend-presence-dot {
  position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px;
  border-radius: 50%; border: 2px solid var(--bg-sidebar); background: var(--ok);
  box-shadow: 0 0 5px color-mix(in srgb, var(--ok) 55%, transparent);
}
.hq .friend-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.hq .friend-handle {
  font-family: var(--font-sans); font-size: var(--fs-base);
  font-weight: var(--weight-medium); color: var(--text-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq .friend-handle.online { color: var(--text-hi); }
.hq .friend-row.offline .friend-handle { color: var(--text-low); }
.hq .friend-subtitle {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); color: var(--text-ghost);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq .friend-action-btns { display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: 4px; }
.hq .friend-action-btn {
  width: 20px; height: 20px; border-radius: var(--radius-chip);
  color: var(--text-ghost);
}
.hq .friend-subhead {
  padding: 10px 16px 4px;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  font-weight: var(--weight-medium); text-transform: none; color: var(--text-low);
}
.hq .friend-subhead .count { color: var(--text-ghost); }
.hq .friend-offline-group { margin-top: 7px; }
.hq .mock-friend-hint {
  padding: 10px 16px; font-family: var(--font-sans); font-size: var(--fs-xs);
  line-height: 1.5; color: var(--text-ghost); background: none; border: none;
}
.hq .mock-friend-hint strong { color: var(--text-mid); font-weight: var(--weight-medium); }


/* The working wave paints rather than composites (the comet animates
   background and box-shadow), and there are 67 of them down this page. Off
   screen they are pure CPU for pixels nobody is looking at, so they idle
   until they scroll into view — see the observer at the end of the page. */
.wb-idle .wb i,
.wb-idle .wb u { animation-play-state: paused; }