/* ── Skírnir design tokens — Runestave brand system ─────────────────────────────
   Dark-first, terminal-native: warm neutral ramp on near-black, amber as the single
   accent (mark, primary actions, live states). Space Grotesk for display/UI, IBM Plex
   Sans for prose, JetBrains Mono for code/meta. See the brand handoff / style guide.

   Dark is the base; a light reversal applies via prefers-color-scheme unless the user
   set an explicit data-theme, which wins in both directions.

   Fonts are self-hosted (no Google Fonts dependency). */

/* ── Space Grotesk ─────────────────────────────────────────────────────────── */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 500 600 700; font-display:swap; src:url('/fonts/SpaceGrotesk-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 500 600 700; font-display:swap; src:url('/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 500 600 700; font-display:swap; src:url('/fonts/SpaceGrotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── IBM Plex Sans ─────────────────────────────────────────────────────────── */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-greek.woff2') format('woff2'); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 500 600; font-display:swap; src:url('/fonts/IBMPlexSans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── JetBrains Mono ────────────────────────────────────────────────────────── */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-greek.woff2') format('woff2'); unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-vietnamese.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500 700; font-display:swap; src:url('/fonts/JetBrainsMono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
    /* accent ramp — amber is the ONLY brand accent, used sparingly */
    --accent: #F2A33C;         /* brand, mark, primary actions, live states */
    --accent-hover: #FFB454;   /* hover / glow */
    --accent-deep: #C97A1E;    /* pressed */
    --accent-contrast: #1A1208;
    --accent-tint: rgba(242, 163, 60, 0.12);
     /* surfaces — warm neutral ramp, dark-first */
     --bg: #0E0C0A;             /* page background (BG Base) */
     --bg-panel: #1A1510;       /* cards / panels (Surface) */
     --bg-subtle: #261F17;      /* raised surfaces (Elevated) */
     --bg-hover: #241D14;
     --bg-terminal: #0A0907;    /* terminal blocks — deepest surface */
    --border: #38301F;         /* 1px borders */
    --border-subtle: #2A2117;
    /* text ramp */
    --text: #F7F0E4;           /* headings / primary (Text High) */
    --text-strong: #D8CDB9;    /* checkbox/label rows — brighter than mid, below high */
    --text-muted: #B3A793;     /* body / secondary (Text Mid) */
    --text-low: #7C7160;       /* meta / disabled labels (Text Low) */
    --text-faint: #8E8371;     /* group labels / faintest meta */
    /* semantic states */
    --status-run: #F2A33C;     /* running / live — amber */
    --status-wait: #FFB454;
    --status-ok: #8FBF7F;      /* merged / success */
    --status-err: #E8734A;     /* alert / destructive (Ember) */
    --status-neutral: #7C7160;
    --merge-merged: #8FBF7F;
    --diff-add-bg: rgba(143, 191, 127, 0.12);
    --diff-add-text: #8FBF7F;
    --diff-del-bg: rgba(232, 115, 74, 0.12);
    --diff-del-text: #E8734A;
    /* private chat mode — a cool indigo wash, deliberately off-brand so an unsaved
       ("incognito") thread is unmistakable against the warm amber-on-umber base */
    --private: #8E9BD8;
    --private-tint: rgba(126, 140, 216, 0.10);
    --private-border: rgba(126, 140, 216, 0.40);
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --radius: 9px;             /* buttons / inputs */
    --radius-card: 14px;       /* cards / panels */
    --shadow-tile: 0 8px 22px rgba(0, 0, 0, 0.4);
}

/* Light reversal — mirrors the on-light logo treatment (parchment surface, dark ink,
   amber preserved as accent). The brand is dark-first, so light is opt-in via the manual
   theme toggle (data-theme="light") rather than applied from system preference. */
:root[data-theme="light"] {
    --accent: #C97A1E;
    --accent-hover: #F2A33C;
    --accent-deep: #A5620F;
    --accent-contrast: #F7F0E4;
    --accent-tint: rgba(201, 122, 30, 0.12);
    --text-strong: #3A3427;
    --text-faint: #8E8371;
    --bg: #F7F0E4;
    --bg-panel: #FFFDF8;
    --bg-subtle: #EFE7D6;
    --bg-hover: #E8DFCC;
    --bg-terminal: #1A1510;
    --border: #D8CDB6;
    --border-subtle: #E4DAC6;
    --text: #13100B;
    --text-muted: #5C5442;
    --text-low: #8E8371;
    --status-run: #C97A1E;
    --status-wait: #B5730C;
    --status-ok: #4F7A3F;
    --status-err: #C4502A;
    --status-neutral: #8E8371;
    --merge-merged: #4F7A3F;
    --diff-add-bg: rgba(79, 122, 63, 0.14);
    --diff-add-text: #3C6030;
    --diff-del-bg: rgba(196, 80, 42, 0.14);
    --diff-del-text: #A5401F;
    --private: #4C5AA8;
    --private-tint: rgba(76, 90, 168, 0.08);
    --private-border: rgba(76, 90, 168, 0.35);
}

::selection { background: rgba(242, 163, 60, 0.28); }

/* ── scrollbars — themed thin rails so nested scroll regions (transcript, tool groups,
   payloads, diffs) don't render the OS default over the dark brand surfaces ── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 8px;
    border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-low); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── base ── */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; margin: 0; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 8px; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--text-muted); }

/* ── shell ── */
/* Pin the app to the viewport so nothing pushes the page taller than the screen: the
   sidenav (its recents region) and .content each scroll internally instead. Without a
   fixed height here the whole shell grows and the *body* scrolls — an outer scrollbar. */
.shell { display: flex; height: 100vh; overflow: hidden; }
.sidenav {
    /* Width is user-draggable: the resizer writes --sidenav-width onto :root and it's
       persisted to localStorage (bootstrapped pre-paint in App.razor). 200px is the
       default when nothing is stored. */
    width: var(--sidenav-width, 200px); flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding: 20px 12px;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh;
    min-width: 0;
}
/* Drag handle straddling the sidebar's right border. A hairline highlight appears on
   hover/drag; double-click resets to the default width. Hidden on the mobile rail. */
.sidenav-resizer {
    position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
    cursor: col-resize; z-index: 5; touch-action: none;
    background: transparent; border: none; padding: 0;
}
.sidenav-resizer::after {
    content: ""; position: absolute; top: 0; right: 3px; width: 2px; height: 100%;
    background: var(--accent); opacity: 0; transition: opacity 0.12s ease;
}
.sidenav-resizer:hover::after, .sidenav-resizer.dragging::after { opacity: 0.6; }
/* While dragging, kill text selection and force the resize cursor everywhere. */
body.sidenav-resizing { cursor: col-resize; user-select: none; }

/* ── collapsed rail — user-toggled icon-only sidebar on desktop ──
   Mirrors the mobile rail (see the max-width:760px block), but opt-in: the
   `sidenav-collapsed` class is set on :root by skirnirSidebar (persisted to
   localStorage, re-applied pre-paint in App.razor) and flipped by the topbar
   toggle button. Overrides the draggable width and hides text/recents so only
   the brand line-icons remain. */
:root.sidenav-collapsed .sidenav { width: 64px; padding: 20px 8px; }
:root.sidenav-collapsed .sidenav-resizer { display: none; }
:root.sidenav-collapsed .brand { justify-content: center; padding: 2px 4px; gap: 0; }
:root.sidenav-collapsed .brand-word { display: none; }
:root.sidenav-collapsed .nav-item { justify-content: center; padding: 8px 6px; }
:root.sidenav-collapsed .nav-item span { display: none; }
:root.sidenav-collapsed .recents,
:root.sidenav-collapsed .sidenav-user { display: none; }
:root.sidenav-collapsed .sidenav-account {
    flex-direction: column; gap: 6px; align-items: center; padding: 6px 0 0;
}
/* Icon-only toggle button in the topbar: strip the button chrome so it reads as a
   plain affordance next to the running-jobs indicator. */
.sidenav-toggle { display: inline-flex; align-items: center; padding: 6px; }
.sidenav-toggle .nav-icon { width: 20px; height: 20px; }
/* Brand lockup — Runestave mark + wordmark. The accent lands on the mark and the í. */
.brand {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 22px; padding: 2px 10px;
    color: var(--text) !important;
    text-decoration: none !important;
}
.brand-mark { flex-shrink: 0; display: block; stroke: var(--accent); }
.brand-word {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
}
.nav-primary { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius);
    font-family: var(--font-display); font-size: 14px;
    color: var(--text-muted) !important; text-decoration: none !important;
    background: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text) !important; }
.nav-item.active { background: var(--bg-subtle); color: var(--text) !important; font-weight: 600; }
/* Brand line-icons: 24px grid, 2px stroke, round caps/joins, inheriting the row's text colour. */
.nav-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.sidenav-section-label {
    margin: 18px 10px 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low);
}

/* ── sidebar recents — pinned + recent chats/workspaces/jobs, one scroll region ── */
/* Long row labels are already clamped with ellipsis, so the region must never scroll
   sideways (overflow-x: hidden — with overflow-y: auto the x-axis would otherwise
   compute to auto and show a stray horizontal rail). The vertical scrollbar auto-hides:
   the thumb is transparent at rest and only fades in while the region is hovered. */
.recents {
    flex: 1; min-height: 0; margin: 12px -2px 0; min-width: 0;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-color: transparent transparent;
}
.recents:hover { scrollbar-color: var(--border) transparent; }
.recents::-webkit-scrollbar-thumb { background: transparent; }
.recents:hover::-webkit-scrollbar-thumb { background: var(--border); background-clip: padding-box; }
.recents:hover::-webkit-scrollbar-thumb:hover { background: var(--text-low); background-clip: padding-box; }
.recents-group { padding-top: 16px; }
.recents-group:first-child { padding-top: 0; }
.recents-label {
    margin: 0 10px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.recents-empty { padding: 2px 10px; font-size: 12px; }
.recents-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    color: var(--text-muted) !important; text-decoration: none !important;
    font-size: 13px;
}
.recents-row:hover { background: var(--bg-hover); color: var(--text) !important; }
.recents-row.active { background: var(--bg-hover); color: var(--text) !important; box-shadow: inset 2px 0 0 var(--accent); }
.recents-row-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recents-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }
.recents-chevron { flex-shrink: 0; color: var(--text-low); font-size: 13px; }
/* Nested recent-jobs list no longer owns its own scroll — the whole recents region scrolls. */
.sidenav-jobs { margin: 0 -2px; }

/* Hover-reveal pin toggle on job / workspace rows (★ when pinned, ☆ on hover otherwise). */
.sidenav-pin {
    flex-shrink: 0; margin-left: 2px; padding: 0 2px;
    background: none; border: none; cursor: pointer; line-height: 1;
    font-size: 12px; color: var(--text-low); opacity: 0;
}
.sidenav-pin.pinned { color: var(--accent); opacity: 1; }
.sidenav-job:hover .sidenav-pin, .recents-row:hover .sidenav-pin { opacity: 1; }
.sidenav-pin:hover { color: var(--accent-hover); }
.sidenav-jobs-empty { padding: 2px 10px; font-size: 12.5px; }
.sidenav-group { margin-bottom: 2px; }
.sidenav-group-head {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; list-style: none; user-select: none;
}
.sidenav-group-head::-webkit-details-marker { display: none; }
.sidenav-group-head::before {
    content: "▸"; font-size: 9px; transition: transform 0.12s ease; color: var(--text-muted);
}
.sidenav-group[open] > .sidenav-group-head::before { transform: rotate(90deg); }
.sidenav-group-head:hover { background: var(--bg-hover); }
.sidenav-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-group-count {
    flex-shrink: 0; font-size: 10.5px; font-weight: 600;
    background: var(--bg-subtle); color: var(--text-muted);
    border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center;
}
.sidenav-job {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 20px; border-radius: var(--radius);
    color: var(--text-muted) !important; text-decoration: none !important;
    font-family: var(--font-mono); font-size: 12px;
}
.sidenav-job:hover { color: var(--text) !important; }
.sidenav-job.active { color: var(--text) !important; }
.sidenav-job:hover { background: var(--bg-hover); }
.sidenav-job.active { background: var(--bg-subtle); font-weight: 600; }
.sidenav-job-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }
.sidenav-job-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-job-more {
    display: block; padding: 3px 10px 3px 20px;
    font-size: 11.5px; color: var(--text-muted) !important; text-decoration: none !important;
}
.sidenav-job-more:hover { color: var(--text) !important; }
.dot-queued, .dot-provisioning { background: var(--status-neutral); }
/* Queued-but-blocked: neutral dot that pulses so a waiting job stands out in the recents list. */
.dot-waiting { background: var(--status-neutral); animation: pulse 1.4s infinite; }
.dot-running, .dot-pushing { background: var(--status-run); }
.dot-awaitinginput { background: var(--status-wait); }
.dot-done { background: var(--status-ok); }
.dot-failed, .dot-timedout { background: var(--status-err); }
.dot-cancelled { background: var(--status-neutral); }
/* Compact PR merge-state glyph, pushed to the right edge of the sidebar job row. */
.sidenav-job-merge {
    flex-shrink: 0; margin-left: auto; padding-left: 6px;
    font-size: 11px; line-height: 1; font-weight: 700;
}
.merge-open { color: var(--status-ok); }
.merge-conflict { color: var(--status-wait); }
.merge-merged { color: var(--merge-merged); }
.merge-closed { color: var(--status-neutral); }
/* Pinned footer — Settings nav then the account row, fenced off from recents by a hairline. */
.sidenav-footer {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bg-hover);
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.sidenav-account {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 0; margin-top: 2px;
    min-width: 0;
    flex-wrap: wrap;
}
.sidenav-avatar {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); color: var(--text);
    font-family: var(--font-display); font-size: 12px; font-weight: 600;
}
.sidenav-user {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; color: var(--text-muted);
    min-width: 0;
}
.sidenav-signout { flex-shrink: 0; }
.link-button {
    background: none; border: none; padding: 0;
    color: var(--text-low); cursor: pointer; font: inherit; font-size: 12.5px;
}
.link-button:hover { color: var(--text); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.topbar-spacer { flex: 1; }
/* The single scroll region for page content: fills the space under the sticky topbar
   (flex: 1) and scrolls internally (min-height: 0 lets it shrink so overflow: auto engages). */
.content { flex: 1; min-height: 0; padding: 20px 24px 60px; max-width: 1100px; width: 100%; margin: 0 auto; overflow: auto; }

.running-indicator {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px 12px;
    color: var(--text); cursor: pointer;
    font-family: var(--font-mono); font-size: 12px;
}
.running-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--status-run);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
/* The "N waiting" twin of the running indicator: muted text + a neutral (non-accent) pulsing
   dot, so it reads as "queued behind work" rather than "actively running". */
.running-indicator.waiting { color: var(--text-muted); }
.waiting-dot { background: var(--status-neutral); }

/* ── buttons & inputs ──
   Secondary is the default .btn: 1px amber border, amber text, tinted hover.
   Primary (.btn-accent): solid amber. Ghost: borderless muted text. Danger: ember. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent); border-radius: var(--radius);
    padding: 8px 16px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Inline line-icons inside buttons/rows — inherit the current text colour by default. */
.ic { width: 16px; height: 16px; flex-shrink: 0; display: block;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ic-mini { width: 15px; height: 15px; stroke: var(--text-faint); }
.btn:hover { background: var(--accent-tint); }
.btn:disabled {
    background: var(--bg-hover); color: var(--text-low);
    border-color: var(--bg-hover); cursor: not-allowed;
}
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-accent:active { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-danger { color: var(--status-err); border-color: var(--status-err); background: transparent; }
.btn-danger:hover { background: rgba(232, 115, 74, 0.12); }
.btn-ghost {
    color: var(--text-muted); border-color: transparent; background: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-small { padding: 5px 12px; font-size: 12.5px; }

.input {
    width: 100%; background: var(--bg-terminal); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 11px 13px; font-family: var(--font-ui); font-size: 14px; margin-bottom: 4px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.input::placeholder { color: var(--text-low); }
.input-compact { width: auto; margin: 0; padding: 6px 8px; font-size: 13px; }
/* Field labels: mono caps at readable mid contrast (was near-invisible low-contrast brown).
   Inline units / "write-only" hints step down to low contrast via .field-hint. */
.field-label {
    display: block; margin: 12px 0 9px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--text-muted);
}
.field-hint { color: var(--text-low); }
.check-label {
    display: flex; align-items: center; gap: 8px; margin: 10px 0; cursor: pointer;
    font-size: 14px; color: var(--text-strong);
}
.form { max-width: 620px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.form-error { color: var(--status-err); }
.advanced { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 16px; }
.advanced summary { cursor: pointer; color: var(--text-muted); }

/* ── multi-repo ── */
.repo-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; margin: 10px 0; }
.repo-item:hover { text-decoration: none !important; }
.repo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.repo-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.repo-outcomes li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── status pills ──
   Tinted-background pill with a matching leading dot, per the brand's status-tag spec. */
.pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--status-neutral); background: transparent;
    border: 1px solid transparent;
}
.pill::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.pill-queued, .pill-provisioning { color: var(--status-neutral); border-color: var(--border); }
/* Waiting = Queued but blocked behind running work. Same neutral as Queued, but the dot pulses
   so "stuck in line" reads distinctly from "about to start" (and from amber "Needs input"). */
.pill-waiting { color: var(--status-neutral); border-color: var(--border); }
.pill-waiting::before { animation: pulse 1.4s infinite; }
.pill-running, .pill-pushing { color: var(--status-run); background: var(--accent-tint); }
.pill-awaitinginput { color: var(--status-wait); background: rgba(255, 180, 84, 0.12); }
.pill-awaitinginput::before { animation: pulse 1.4s infinite; }
.pill-done { color: var(--status-ok); background: rgba(143, 191, 127, 0.12); }
.pill-failed, .pill-timedout { color: var(--status-err); background: rgba(232, 115, 74, 0.12); }
.pill-cancelled { color: var(--status-neutral); border-color: var(--border); }
/* PR merge-state pill — colour keyed off the .merge-* class (same tokens as the sidebar glyph). */
.merge-pill { border-color: currentColor; }

/* ── jobs dashboard ── */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.job-list { display: flex; flex-direction: column; gap: 10px; }
.job-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 14px 18px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.job-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.job-row-main { flex: 1; min-width: 0; }
.job-row-top { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.job-ws { color: var(--text-low); font-family: var(--font-mono); font-size: 12px; }
.job-ws-link { color: inherit; text-decoration: none; }
.job-ws-link:hover { color: var(--text); text-decoration: underline; }
.job-elapsed { color: var(--text-low); font-family: var(--font-mono); font-size: 12px; margin-left: auto; }
.job-prompt {
    margin: 5px 0 2px; font-family: var(--font-display); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job-ticker {
    font-family: var(--font-mono); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Compact rows for the workspace's own job list (tighter padding, prompt on one line). */
.job-row-compact { padding: 10px 16px; }
.job-row-compact .job-prompt { margin: 3px 0 0; font-size: 14px; }
.job-row-compact .job-row-top { gap: 6px; }
.job-row-compact .job-ws { font-size: 11px; }
.job-row-compact .job-elapsed { font-size: 11px; }

/* ── jobs overview (redesign) ──
   The full /jobs list: a title + stat strip, a segmented status control with live counts,
   workspace/search filters, and rich run cards. Everything is keyed off the brand tokens so it
   themes in both light and dark. (The compact .job-row list above is still used by the workspace
   and routine detail pages — this block is scoped to the standalone /jobs page.) */
@keyframes jobs-spin { to { transform: rotate(360deg); } }

.jobs-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.jobs-head h1 { margin: 0; }
.jobs-subtitle { font-size: 14px; color: var(--text-faint); margin: 9px 0 0; max-width: 60ch; }
.jobs-stats { display: flex; gap: 9px; flex-shrink: 0; }
.jobs-stat {
    min-width: 78px; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 11px; padding: 10px 14px;
}
.jobs-stat-val { display: block; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; }
.jobs-stat-val.stat-active { color: var(--accent); }
.jobs-stat-val.stat-merged { color: var(--status-ok); }
.jobs-stat-val.stat-total { color: var(--text); }
.jobs-stat-label {
    display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--text-faint); margin-top: 6px; text-transform: uppercase;
}

.jobs-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
/* Segmented status control — a pill group; the active tab lifts onto an elevated surface. */
.seg {
    display: inline-flex; background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 4px; gap: 3px;
}
.seg-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: none;
    border-radius: 7px; background: transparent; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted);
    transition: color 0.12s ease, background 0.12s ease;
}
.seg-tab:hover { color: var(--text); }
.seg-tab.is-active { color: var(--text); background: var(--bg-subtle); }
.seg-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.seg-tab.is-active .seg-count { color: var(--accent); }

.jobs-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jobs-select { min-width: 170px; }
.jobs-search {
    display: flex; align-items: center; gap: 9px; background: var(--bg-terminal);
    border: 1px solid var(--border-subtle); border-radius: 9px; padding: 8px 12px; min-width: 230px;
    transition: border-color 0.12s ease;
}
.jobs-search:focus-within { border-color: var(--accent); }
.jobs-search svg { flex-shrink: 0; color: var(--text-low); }
.jobs-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text);
    font-family: var(--font-ui); font-size: 13px;
}
.jobs-search input::placeholder { color: var(--text-low); }
.jobs-search .kbd {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-low);
    border: 1px solid var(--border-subtle); border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
}

/* Compact job list — a single rounded panel of dense rows (replaces the old tall run cards so
   many more jobs fit on screen). Rows are direct children; separation is a top divider on each
   row but the first, and running jobs carry an inset amber left bar. */
.job-list-panel {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.job-row {
    display: flex; align-items: center; gap: 13px; padding: 10px 16px; cursor: pointer;
    border-top: 1px solid var(--bg-hover); transition: background 0.12s ease;
}
.job-row:first-child { border-top-color: transparent; }
/* The older card-style `.job-row` rule (used by the workspace/routine lists) is an unscoped
   selector, so its `border-radius` + full box border leak in here and round every row. Reset
   them: inside the panel the only rounded corners come from the panel's own clipped edge, and
   rows separate by a top divider — not per-row boxes. */
.job-list-panel .job-row {
    border-radius: 0; background: transparent;
    border-left: 0; border-right: 0; border-bottom: 0;
}
.job-row:hover { background: var(--bg-subtle); }
.job-row:hover .job-row-title { color: var(--accent-hover); }
.job-row.is-running { box-shadow: inset 2px 0 0 var(--accent); }

.job-row-icon { display: flex; flex-shrink: 0; }
.job-row-icon svg { display: block; width: 16px; height: 16px; }
.job-row-icon.ic-run { color: var(--accent); }
.job-row-icon.ic-run svg { animation: jobs-spin 0.9s linear infinite; }
.job-row-icon.ic-done { color: var(--status-ok); }
.job-row-icon.ic-wait { color: var(--status-wait); }
.job-row-icon.ic-fail { color: var(--status-err); }
.job-row-icon.ic-closed { color: var(--text-faint); }

/* Reuse the shared status pill (.pill) as a compact, dotless, fixed-width chip in the row. The
   PR badge (.merge-pill) keeps its dot but shrinks to match. */
.job-row .pill { font-size: 10px; }
.job-row .pill:not(.merge-pill) {
    flex-shrink: 0; min-width: 62px; justify-content: center; padding: 2px 6px;
}
.job-row .pill:not(.merge-pill)::before { display: none; }
.job-row .merge-pill { flex-shrink: 0; gap: 5px; padding: 2px 8px; }
.job-row .merge-pill::before { width: 6px; height: 6px; }

.job-row-title {
    flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
    color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.12s ease;
}
.job-row-ws {
    flex-shrink: 0; width: 120px; text-align: right; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
}
.job-row-dur {
    flex-shrink: 0; width: 72px; display: inline-flex; align-items: center; justify-content: flex-end;
    gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}
.job-row-dur svg { flex-shrink: 0; color: var(--text-faint); }

/* Actions are revealed on hover (or keyboard focus) to keep rows clean and dense. The column
   holds its width even while hidden so the meta columns stay aligned across rows. */
.job-row-actions {
    flex-shrink: 0; width: 118px; display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; opacity: 0; transition: opacity 0.12s ease;
}
.job-row:hover .job-row-actions, .job-row:focus-within .job-row-actions { opacity: 1; }

/* Ghost action buttons — PR (accent) and neutral/danger delete. */
.job-btn {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display);
    font-weight: 600; font-size: 11.5px; background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); padding: 5px 10px; border-radius: 7px; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.job-btn:hover { color: var(--text); border-color: var(--border); }
.job-btn-pr { color: var(--accent); }
.job-btn-pr:hover { color: var(--accent-hover); background: var(--accent-tint); border-color: var(--accent); }
.job-btn-del:hover {
    color: var(--status-err); background: rgba(232, 115, 74, 0.12);
    border-color: rgba(232, 115, 74, 0.5);
}

/* Empty state — a filled card (not the dashed generic .empty-state) matching the run cards. */
.jobs-empty {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 14px; padding: 56px 24px; text-align: center;
}
.jobs-empty-icon {
    width: 52px; height: 52px; border-radius: 14px; background: var(--bg-terminal);
    border: 1px solid var(--border-subtle); display: grid; place-items: center;
    margin: 0 auto 16px; color: var(--text-low);
}
.jobs-empty-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.jobs-empty-copy { font-size: 13.5px; color: var(--text-faint); margin: 8px auto 20px; max-width: 360px; line-height: 1.6; }
.jobs-empty .btn { display: inline-block; }

/* Section heading above an inline list/form on a detail page. */
.section-head { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
.empty-state {
    text-align: center; padding: 70px 20px;
    border: 1px dashed var(--border); border-radius: var(--radius-card);
}
.empty-state .btn { margin-top: 12px; display: inline-block; }

/* ── home / index ──
   The landing view: a greeting, the open sessions and open PRs, and an inline composer that
   picks a workspace and starts a job without leaving the page. */
.home { max-width: 820px; margin: 0 auto; }
.home-greeting { margin-bottom: 24px; }
.home-greeting-emoji { font-style: normal; margin-left: 4px; }
.home-section { margin-bottom: 28px; }
.home-section-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px;
}
.home-section-head h2 { font-size: 16px; margin: 0; }
.home-more { font-family: var(--font-mono); font-size: 12px; }
.home-empty { padding: 14px 2px; }
.home-list { display: flex; flex-direction: column; gap: 8px; }
.home-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 11px 16px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.home-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.home-row-main { flex: 1; min-width: 0; }
.home-row-title {
    font-family: var(--font-display); font-weight: 500; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-row-sub {
    font-family: var(--font-mono); font-size: 12px; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-row-num, .home-row-meta, .home-row-time { font-size: 12px; color: var(--text-low); flex-shrink: 0; }
.home-row-time { min-width: 52px; text-align: right; }

.home-composer {
    margin-top: 8px; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 14px 16px;
}
.home-composer-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.home-ws-select { max-width: 260px; }
.home-composer-prompt { resize: vertical; min-height: 60px; font-family: var(--font-ui); }
.home-composer-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px;
}
.home-hint { font-size: 12px; }

/* ── Home dashboard ──
   The landing view: a time-of-day greeting, a KPI strip, and a two-column body (active jobs +
   issues on the left, wiki + activity on the right). Max 1220px, centered in the app shell. */
.dash { max-width: 1220px; margin: 0 auto; }

.dash-greeting {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.dash-greeting h1 {
    font-family: var(--font-display); font-weight: 600; font-size: 30px;
    letter-spacing: -0.02em; margin: 0;
}
.dash-greeting-actions { display: flex; gap: 9px; }
.dash-greeting-actions .btn { color: var(--text-muted); border-color: var(--border); background: var(--bg-panel); }
.dash-greeting-actions .btn:hover { color: var(--text); border-color: var(--text-low); background: var(--bg-subtle); }

/* Prompt bar — start a Chat or kick off a Job straight from Home. A mode-toggle pill row over a
   borderless textarea, with a workspace chip (job mode) and the primary CTA in the footer. */
.dash-prompt {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px 18px 14px; margin-bottom: 26px;
    box-shadow: 0 0 0 1px rgba(242, 163, 60, 0.05), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.dash-prompt-modes { display: flex; gap: 6px; margin-bottom: 10px; }
.dash-prompt-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
    padding: 6px 13px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-subtle); background: transparent; color: var(--text-faint);
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.dash-prompt-pill:hover { color: var(--text-muted); border-color: var(--border); }
.dash-prompt-pill.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.dash-prompt-pill .ic-mini { width: 15px; height: 15px; stroke: currentColor; }
.dash-prompt-input {
    width: 100%; resize: none; background: transparent; border: none; outline: none;
    color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; padding: 2px 0;
}
.dash-prompt-input::placeholder { color: var(--text-low); }
.dash-prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.dash-prompt-ws {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-subtle); border-radius: 8px; padding: 5px 10px;
    color: var(--text-faint); cursor: pointer;
}
.dash-prompt-ws:hover { border-color: var(--border); }
.dash-prompt-ws svg { width: 15px; height: 15px; stroke: var(--text-faint); stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; }
.dash-prompt-ws select {
    border: none; background: transparent; outline: none; cursor: pointer;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
}
.dash-prompt-cta {
    display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--accent-contrast); background: var(--accent); border: none;
    padding: 9px 16px; border-radius: 9px; cursor: pointer;
    transition: background 0.12s ease;
}
.dash-prompt-cta:hover { background: var(--accent-hover); }
.dash-prompt-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* dash prompt split button — immediate "Run job" with a caret for the config dialog */
.dash-prompt-split { position: relative; display: inline-flex; margin-left: auto; }
.dash-prompt-primary {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--accent-contrast); background: var(--accent); border: none;
    padding: 9px 16px; cursor: pointer; transition: background 0.12s ease;
}
.dash-prompt-primary:hover { background: var(--accent-hover); }
.dash-prompt-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.dash-prompt-caret {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.22); padding-left: 10px; padding-right: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--accent-contrast); background: var(--accent); border: none;
    cursor: pointer; transition: background 0.12s ease;
}
.dash-prompt-caret:hover { background: var(--accent-hover); }
.dash-prompt-caret:disabled { opacity: 0.5; cursor: not-allowed; }
.dash-prompt-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 280px;
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.dash-prompt-option {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 8px; padding: 9px 11px; color: var(--text);
}
.dash-prompt-option:hover { background: var(--bg-hover); }
.dash-prompt-option-label { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.dash-prompt-option-desc { font-size: 12px; color: var(--text-muted); }

/* KPI strip — four stat cards: big number, mini icon, delta/breakdown sub-line. */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.dash-kpi {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 18px 20px;
}
.dash-kpi-head { display: flex; align-items: center; justify-content: space-between; }
.dash-kpi-head span {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-faint);
}
.dash-kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; margin-top: 10px; }
.dash-kpi-sub { font-size: 12px; margin-top: 4px; }
.dash-kpi-ok { color: var(--status-ok); }
.dash-kpi-attention { color: var(--status-wait); }

/* Two-column body — 1.55fr / 1fr, collapsing to one column on narrow viewports. */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.dash-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.dash-sec-title { display: flex; align-items: baseline; gap: 10px; }
.dash-sec-head h2, .dash-sec-solo { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0; }
.dash-sec-solo { margin-bottom: 13px; }
.dash-sec-count { font-size: 11px; color: var(--text-faint); }
.dash-sec-more { font-size: 13px; color: var(--text-faint); }
.dash-sec-more:hover { color: var(--accent); text-decoration: none; }
.dash-empty { padding: 14px 2px; }

/* Active jobs list — status pill, title, repo/session id, duration. */
.dash-list { display: flex; flex-direction: column; gap: 10px; }
.dash-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 13px 16px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.dash-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.dash-row-main { min-width: 0; flex: 1; }
.dash-row-title {
    font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-row-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }

/* A bordered panel that groups stacked rows (issues, wiki, activity). */
.dash-panel { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; }
.dash-panel--pad { padding: 6px; }

/* Issues table rows. */
.dash-irow {
    display: flex; align-items: center; gap: 13px; padding: 13px 16px;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    transition: background 0.12s ease; text-decoration: none; color: inherit;
}
.dash-irow:last-child { border-bottom: none; }
.dash-irow:hover { background: var(--bg-subtle); text-decoration: none; }
.dash-irow-title { font-size: 14px; color: var(--text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-itype { display: flex; flex-shrink: 0; }
.dash-itype svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-itype--open svg { stroke: var(--status-ok); }
.dash-itype--prog svg { stroke: var(--status-wait); }

/* Label pill — colour keyed to a curated label set, neutral fallback for anything else. */
.lbl { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
/* Labels are workspace-defined and carry their own color (rendered as an inline style, see
   IssueLabelStyle). This neutral class is the fallback for a label name with no matching label. */
.lbl-default { color: var(--text-faint); background: rgba(142, 131, 113, 0.12); }

/* Assignee avatar chip. */
.dash-avatar {
    width: 22px; height: 22px; border-radius: 6px; background: var(--bg-subtle);
    display: grid; place-items: center; flex-shrink: 0;
    font-family: var(--font-display); font-weight: 600; font-size: 10px; color: var(--accent);
}

/* Wiki recent-pages rows. */
.dash-wrow {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px;
    cursor: pointer; transition: background 0.12s ease; text-decoration: none; color: inherit;
}
.dash-wrow:hover { background: var(--bg-subtle); text-decoration: none; }
.dash-wrow-ic { stroke: var(--accent); margin-top: 1px; }
.dash-wrow-title { font-size: 14px; color: var(--text-strong); }

/* Activity timeline — a coloured dot per event kind, connected by a rail. */
.dash-act { display: flex; gap: 13px; padding: 4px 12px 4px; text-decoration: none; color: inherit; }
.dash-act:hover { text-decoration: none; }
.dash-act:hover .dash-act-text { color: var(--text); }
.dash-act-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: var(--text-low); }
.dash-dot--ok { background: var(--status-ok); }
.dash-dot--attention { background: var(--accent); }
.dash-dot--err { background: var(--status-err); }
.dash-dot--neutral { background: var(--text-muted); }
.dash-act-line { flex: 1; width: 1px; background: var(--border-subtle); margin-top: 5px; }
.dash-act-body { min-width: 0; flex: 1; padding-bottom: 16px; }
.dash-act:last-child .dash-act-body { padding-bottom: 6px; }
.dash-act-text { font-size: 13.5px; color: var(--text-strong); line-height: 1.5; }

/* Sidebar nav count badge (open issues). */
.nav-badge {
    margin-left: auto; font-family: var(--font-mono); font-size: 10px;
    color: var(--status-wait); background: rgba(255, 180, 84, 0.12);
    padding: 1px 7px; border-radius: 999px;
}

/* Collapse the dashboard to a single column on narrow viewports. */
@media (max-width: 900px) {
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ── job view ── */
/* The job detail column fills the content height so the transcript (flex: 1) can absorb
   the scroll and the composer stays pinned at the bottom — only the chat scrolls, never
   the whole page. Taller non-transcript tabs simply overflow into .content's scroll. */
.job-detail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.job-head { margin-bottom: 16px; }
.job-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* Duration in the header meta row — a leading clock glyph aligned to the mono text. */
.job-meta-time { display: inline-flex; align-items: center; gap: 5px; }
.job-title {
    font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em;
    line-height: 1.25; text-wrap: pretty;
}
.job-title.clamped {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Retry — an accent ghost button (mirrors the design's header action). */
.btn-retry { color: var(--accent); }
.btn-retry:hover { color: var(--accent-hover); border-color: var(--accent); background: var(--accent-tint); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 8px 14px; cursor: pointer;
    font-family: var(--font-display); font-size: 14px; color: var(--text-muted);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
/* Job-detail tab bar — the redesign's underline tabs: slightly roomier, 600-weight labels. */
.job-detail .tabs { gap: 4px; }
.job-detail .tab { padding: 10px 15px; font-weight: 600; color: var(--text-faint); }
.job-detail .tab:hover { color: var(--text); }
.job-detail .tab.active { color: var(--text); }

/* ── transcript ── */
/* Right-aligned icon-only split-button group (expand / collapse tools · raw-events toggle). */
.transcript-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px; }
.tt-group {
    display: inline-flex; align-items: center; background: var(--bg-terminal);
    border: 1px solid var(--border-subtle); border-radius: 9px; padding: 3px;
}
.tt-btn {
    display: grid; place-items: center; width: 32px; height: 28px; border: none;
    border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}
.tt-btn:hover { color: var(--text); background: var(--bg-subtle); }
.tt-btn svg { display: block; }
.tt-btn.is-on { color: var(--accent-contrast); background: var(--accent); }
.tt-btn.is-on:hover { background: var(--accent-hover); }
.tt-divider { width: 1px; height: 18px; background: var(--border-subtle); margin: 0 3px; flex-shrink: 0; }
.transcript {
    display: flex; flex-direction: column; gap: 10px;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; padding: 4px;
    min-width: 0;
}
.event { border-radius: var(--radius); }
/* Assistant prose sits directly on the page — no card chrome. The compact transcript
   reads like a conversation: text paragraphs with quiet tool-summary lines between. */
.event-assistant { padding: 2px 2px; }
.event-md { overflow-wrap: break-word; }
.event-md p:first-child { margin-top: 0; }
.event-md p:last-child { margin-bottom: 0; }
.event-md pre {
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px;
    overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
.event-md code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-subtle); border-radius: 4px; padding: 1px 5px; }
.event-md pre code { background: none; padding: 0; }

.event-tool { background: var(--bg-subtle); border: 1px solid var(--border); }
.event-tool-error { border-color: var(--status-err); }
.tool-header {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; padding: 7px 12px;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
    cursor: pointer; text-align: left;
}
.tool-chevron { color: var(--text-muted); width: 12px; }
.tool-name { font-weight: 600; }
.tool-detail {
    color: var(--text-muted); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-state { color: var(--text-muted); margin-left: auto; flex: none; }
.tool-payload {
    margin: 0; padding: 10px 12px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 12px;
    overflow-x: auto; max-height: 320px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word;
}

/* ── reasoning — the model's chain-of-thought (thinking-mode models), a muted collapsible
   card so thinking stays visible but subordinate to the final answer. ── */
.event-reasoning { border-left: 2px solid var(--border); }
.event-reasoning .tool-name { font-weight: 500; color: var(--text-muted); font-style: italic; }
.reasoning-body {
    padding: 2px 12px 8px 32px; color: var(--text-muted);
    font-style: italic; overflow-wrap: break-word;
}
.reasoning-body p:first-child { margin-top: 0; }
.reasoning-body p:last-child { margin-bottom: 0; }

/* ── tool group — a run of consecutive tool calls folded into one quiet summary line
   ("Ran a command, read 3 files, searched code ›") with no box chrome; the details
   box only appears when the line is clicked open. ── */
.tool-group { min-width: 0; }
.tool-group-error .tool-group-summary { color: var(--status-err); }
.tool-group-header {
    display: flex; align-items: center; gap: 8px; max-width: 100%;
    background: none; border: none; padding: 1px 2px;
    font: inherit; font-size: 13.5px; color: var(--text-muted);
    cursor: pointer; text-align: left;
}
.tool-group-header:hover { color: var(--text); }
.tool-group-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-group-running { color: var(--status-run); font-size: 11.5px; flex: none; }
.tool-group-failed { color: var(--status-err); font-size: 11.5px; flex: none; }
.tool-group-chevron { color: var(--text-low); flex: none; }
/* Cap the revealed run so a 30-call group can't balloon the page — it scrolls instead. */
.tool-group-body {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 420px; overflow-y: auto;
    margin-top: 6px; padding: 8px;
    background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ── agent question (interactive answer form) ── */
.event-question {
    background: var(--bg-panel); border: 1px solid var(--accent);
    border-radius: var(--radius); padding: 12px 14px;
}
.question-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.question-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: var(--accent-contrast);
    font-weight: 700; font-size: 13px; flex: none;
}
.question-label { font-weight: 600; }
.question-answered {
    margin-left: auto; font-size: 12px; color: var(--status-ok);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.question-item { padding: 8px 0; border-top: 1px solid var(--border); }
.question-item:first-of-type { border-top: none; }
.question-item-head { font-weight: 600; margin-bottom: 4px; }
.question-item-body { font-size: 13.5px; margin-bottom: 8px; }
.question-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.question-option {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    background: var(--bg-subtle); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 7px 10px; cursor: pointer; font-size: 13px;
}
.question-option:hover:not(:disabled) { border-color: var(--accent); }
.question-option.selected { border-color: var(--accent); background: var(--bg-panel); }
.question-option:disabled { opacity: 0.6; cursor: default; }
.question-option-desc { color: var(--text-muted); font-size: 12px; }
.question-answer { margin: 0; resize: vertical; min-height: 40px; }
.question-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.question-raw-toggle {
    margin-top: 8px; background: none; border: none; padding: 0;
    color: var(--text-muted); font-size: 12px; cursor: pointer;
}

/* Lifecycle status lines are context, not content — keep them quiet: small, dimmed, and
   left-aligned like the rest of the transcript, with no flanking rules so they read as a
   compact aside between turns rather than a divider that dominates the transcript. */
.event-status {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--text-low); font-size: 11px;
    padding: 1px 6px;
}
.status-line { font-family: var(--font-mono); }
.status-time { font-family: var(--font-mono); }

/* Bottom-of-transcript "agent is working" pulse: a blinking block cursor + live elapsed time. */
.transcript-running {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 4px; color: var(--text-muted);
}
.running-cursor {
    display: inline-block; width: 8px; height: 15px;
    background: var(--accent); border-radius: 1px;
    animation: cursor-blink 1.1s step-end infinite;
}
.running-elapsed { font-size: 12px; color: var(--text-muted); }
@keyframes cursor-blink { 50% { opacity: 0; } }
.event-error {
    background: var(--diff-del-bg); color: var(--diff-del-text);
    border: 1px solid var(--status-err);
    padding: 10px 14px; font-family: var(--font-mono); font-size: 13px;
}
.event-raw { background: transparent; border: 1px dashed var(--border); opacity: 0.8; }

/* Boot diagnostics: a start failure surfaced inline in the transcript. Framed like an error
   (it is one) but the body is the runner's boot log, so it gets a scrollable monospace pre. */
.event-diagnostics {
    border: 1px solid var(--status-err); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow: hidden;
}
.diagnostics-head {
    color: var(--diff-del-text); background: var(--diff-del-bg);
    border-bottom: 1px solid var(--status-err);
    padding: 8px 14px; font-size: 13px; font-weight: 600;
}
.diagnostics-body {
    margin: 0; padding: 12px 14px; overflow: auto; max-height: 360px;
    font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word; min-width: 0;
}

.jump-latest {
    position: sticky; bottom: 14px; margin: 8px auto 0; display: block;
    background: var(--accent); color: var(--accent-contrast);
    border: none; border-radius: 999px; padding: 6px 16px;
    cursor: pointer; font: inherit; font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── toaster ── */
.toaster {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px;
    width: min(340px, calc(100vw - 36px));
}
.toast {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-left-width: 4px; border-radius: var(--radius);
    padding: 10px 32px 10px 14px; position: relative; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.toast:hover { background: var(--bg-hover); }
.toast-info { border-left-color: var(--status-run); }
.toast-warning { border-left-color: var(--status-wait); }
.toast-error { border-left-color: var(--status-err); }
.toast-title { font-weight: 600; font-size: 13.5px; }
.toast-body {
    font-size: 12.5px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toast-close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.toast-close:hover { color: var(--text); }

/* ── follow-up composer ──
   Always-present bar: a compact PR/status strip over a single-row input. Sticks to the
   bottom of the transcript so the reply box and PR state travel with the scroll. */
.composer {
    margin-top: 12px; padding: 8px 10px;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card);
    position: sticky; bottom: 0; min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.composer-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.composer-pr { color: var(--accent); text-decoration: none; font-size: 12px; }
.composer-pr:hover { text-decoration: underline; }
.composer-branch { color: var(--text-low); font-size: 12px; }
.composer-diff { font-size: 12px; }
.composer-diff .add { color: var(--status-ok); }
.composer-diff .del { color: var(--status-err); }
.composer-ttl { font-size: 11px; }
/* Live context-window gauge: a thin fill meter + token/limit label. Fills accent normally,
   flips to the alert color once the window is nearly full (ctx-high). */
.composer-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-low); }
.composer-ctx .ctx-meter { width: 46px; height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; flex-shrink: 0; }
.composer-ctx .ctx-fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.composer-ctx.ctx-high { color: var(--status-err); }
.composer-ctx.ctx-high .ctx-fill { background: var(--status-err); }
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer-box { flex: 1; margin: 0; resize: vertical; min-height: 38px; }
.composer-send { flex-shrink: 0; }
.composer-box:disabled { opacity: 0.7; cursor: not-allowed; }
/* JS owns the height of an auto-growing textarea (skirnirAutogrow), so the manual
   resize grip would just fight it — drop it wherever data-autogrow is set. */
textarea[data-autogrow] { resize: none; }
/* Composer gap already spaces the hint; drop its own bottom margin inside .composer. */
.composer .followup-hint { margin: 0; }
.followup-hint {
    margin: 0 0 8px; padding: 8px 10px; border-radius: 6px;
    background: var(--bg-subtle); color: var(--status-wait);
    font-size: 13px;
}

/* Inline button styled as a link — used inside prose like the follow-up hint so a
   one-click action reads as part of the sentence rather than a separate control. */
.linkish {
    padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
    color: var(--accent); text-decoration: underline;
}
.linkish:hover { color: var(--accent-hover); }

/* ── diff ── */
.diff-file { border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: 14px; }
.diff-file-header {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border);
    padding: 7px 12px; font-family: var(--font-mono); font-size: 12.5px;
}
.diff-counts .add { color: var(--status-ok); }
.diff-counts .del { color: var(--status-err); }
.diff-body {
    margin: 0; padding: 0; overflow-x: auto;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
    background: var(--bg-panel);
}
.diff-body span { display: block; padding: 0 12px; white-space: pre; }
.diff-add { background: var(--diff-add-bg); color: var(--diff-add-text); }
.diff-del { background: var(--diff-del-bg); color: var(--diff-del-text); }
.diff-hunk { color: var(--status-run); background: var(--bg-subtle); }
.diff-meta { color: var(--text-muted); }
.diff-ctx { color: var(--text); }

/* ── review diff (per-line commenting) ── */
.review-diff-body {
    margin: 0; overflow-x: auto;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
    background: var(--bg-panel);
}
.review-diff-row { display: flex; align-items: stretch; white-space: pre; }
.review-diff-lno {
    flex: 0 0 auto; min-width: 40px; padding: 0 6px; text-align: right;
    color: var(--text-low); background: var(--bg-subtle); user-select: none;
}
.review-diff-add {
    flex: 0 0 auto; width: 20px; padding: 0; border: none; background: transparent;
    color: var(--accent); cursor: pointer; text-align: center; user-select: none;
}
button.review-diff-add:hover { background: var(--accent); color: #fff; }
.review-diff-code { flex: 1 1 auto; padding: 0 10px; }
.review-diff-row.diff-add .review-diff-code { background: var(--diff-add-bg); color: var(--diff-add-text); }
.review-diff-row.diff-del .review-diff-code { background: var(--diff-del-bg); color: var(--diff-del-text); }
.review-diff-row.diff-hunk .review-diff-code { color: var(--status-run); background: var(--bg-subtle); }
.review-diff-row.diff-meta .review-diff-code { color: var(--text-muted); }

.review-comment {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 10px 14px; margin: 8px 0;
}
.review-comment-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.review-comment-author { font-weight: 600; }
.review-comment-anchor { font-size: 12px; margin-bottom: 4px; }
.review-comment-del { font-size: 12px; margin-left: auto; }
.review-comment-body { font-size: 14px; overflow-wrap: anywhere; }
.review-comment-body :first-child { margin-top: 0; }
.review-comment-body :last-child { margin-bottom: 0; }
.review-composer { margin: 8px 0 12px; }
.review-outdated { padding: 12px; }

/* ── review ergonomics: toolbar, file nav, split view, word diff, threads ── */
.review-toolbar {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
}
.review-toolbar-modes { display: flex; gap: 6px; align-items: center; }
.review-file-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.review-file-chip {
    display: inline-flex; gap: 8px; align-items: baseline;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text);
}
.review-file-chip:hover { border-color: var(--accent); }
.review-file-chip.is-viewed { opacity: 0.55; text-decoration: line-through; }
.review-file-toggle {
    display: inline-flex; gap: 8px; align-items: baseline; border: none; background: transparent;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text); cursor: pointer; padding: 0;
}
.review-file-chevron { color: var(--text-low); width: 12px; }
.review-file-viewed {
    display: inline-flex; gap: 5px; align-items: center; margin-left: 12px;
    font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
}
.diff-word-add, .diff-word-del { border-radius: 2px; }
.diff-word-add { background: rgba(143, 191, 127, 0.35); }
.diff-word-del { background: rgba(232, 115, 74, 0.35); }
.review-split-row { display: flex; align-items: stretch; white-space: pre; }
.review-split-cell {
    display: flex; align-items: stretch; flex: 1 1 50%; min-width: 0; overflow: hidden;
}
.review-split-cell + .review-split-cell { border-left: 1px solid var(--border); }
.review-split-cell.diff-add .review-diff-code { background: var(--diff-add-bg); color: var(--diff-add-text); }
.review-split-cell.diff-del .review-diff-code { background: var(--diff-del-bg); color: var(--diff-del-text); }
.review-split-cell.diff-empty { background: var(--bg-subtle); }
.review-split-full { display: block; padding: 0 12px; }
.review-thread { margin: 8px 12px; }
.review-thread .review-comment { margin: 6px 0; }
.review-thread-bar {
    display: flex; gap: 10px; align-items: baseline; font-size: 13px;
    background: var(--bg-panel); border: 1px dashed var(--border);
    border-radius: var(--radius-card); padding: 6px 14px;
}
.review-thread-actions { display: flex; gap: 12px; font-size: 12px; margin: 2px 2px 8px; }
.review-comment.is-pending { border-style: dashed; }
.review-pending-badge {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--status-run); border: 1px solid var(--status-run);
    border-radius: 999px; padding: 0 8px;
}
.review-verdict-badge {
    font-size: 12px; border: 1px solid var(--border); border-radius: 999px;
    padding: 1px 10px; color: var(--text-muted); white-space: nowrap;
}
.review-verdict-badge.verdict-approve { color: var(--status-ok); border-color: var(--status-ok); }
.review-verdict-badge.verdict-changes { color: var(--status-err); border-color: var(--status-err); }
.review-verdict-badge.verdict-open { color: var(--status-run); border-color: var(--status-run); }
.pr-review-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pr-review-form { margin-bottom: 16px; }
.pr-review-verdicts { display: flex; gap: 16px; margin-bottom: 8px; }
.pr-merge-blockers { margin: 0 0 8px; padding-left: 18px; }
.pr-review-item { border-left: 3px solid var(--border); }

/* ── PR review page (tabbed rebuild) ──
   Header + Conversation/Files-changed tabs over a two-column body (main + a persistent metadata
   sidebar that shows only on Conversation). Both tab panes stay mounted — the inactive one is
   display:none, not unmounted — so switching tabs never reloads or loses scroll position. */
.pr-page { min-width: 0; }
.pr-header { margin-bottom: 12px; }
.pr-back { display: inline-block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.pr-back:hover { color: var(--accent); text-decoration: none; }
.pr-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pr-number { color: var(--text-low); font-size: 20px; }
.pr-title { font-size: 27px; }
.pr-submeta { margin-top: 8px; font-size: 12px; color: var(--text-faint); overflow-wrap: anywhere; }

.pr-tabs { margin-bottom: 18px; }
.tab-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
    padding: 0 6px; margin-left: 6px; height: 18px; border-radius: 999px;
    background: var(--bg-subtle); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.tab.active .tab-badge { background: var(--accent-tint); color: var(--accent); }

.pr-body { display: grid; grid-template-columns: 1fr minmax(220px, 260px); gap: 24px; align-items: start; min-width: 0; }
/* Files tab renders no sidebar → the main column takes the full width. */
.pr-body:not(:has(.pr-sidebar)) { grid-template-columns: 1fr; }
.pr-main { min-width: 0; }
.pr-tabpane { min-width: 0; }
.pr-tabpane.is-hidden { display: none; }

/* ── Files-changed full-width breakout ──
   Diffs need the full viewport width to be readable, so on the Files tab the page
   breaks out of .content's centered 1100px column. The header and tabs stay in the
   normal centered column (re-constrained below); only the diff pane below them widens. */
.content:has(.pr-page-files) { max-width: none; }
.pr-page-files .pr-header,
.pr-page-files .pr-tabs { max-width: 1100px; margin-left: auto; margin-right: auto; }

.pr-card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 14px; min-width: 0;
}
.pr-description .review-comment-body { margin-top: 4px; }

/* comment head + author avatar (initials square) */
.pr-comment-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 13px; }
.pr-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.pr-avatar-sm { width: 20px; height: 20px; border-radius: 5px; font-size: 9.5px; }
.pr-badge {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}

/* checks list — one hairline-separated row per CI check */
.pr-checks-card { padding: 0; overflow: hidden; }
.pr-check-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.pr-check-row:last-child { border-bottom: none; }
.pr-check-row:hover { background: var(--bg-hover); }
.pr-check-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700;
    border: 1.5px solid currentColor;
}
.pr-check-icon.check-ok { color: var(--status-ok); }
.pr-check-icon.check-fail { color: var(--status-err); }
.pr-check-icon.check-run { color: var(--status-run); }
.pr-check-icon.check-neutral { color: var(--status-neutral); }
.pr-check-name { font-weight: 600; font-size: 13.5px; }
.pr-check-meta { color: var(--text-low); font-size: 12px; }
.pr-check-log { margin-left: auto; font-size: 12.5px; white-space: nowrap; }

/* merge card */
.pr-merge-warning { color: var(--status-err); margin: 0 0 8px; font-size: 13.5px; }
.pr-merge-clean { color: var(--status-ok); margin: 0 0 8px; }
.pr-merge-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* merge split button: primary label (reflects the picked strategy) + caret that opens the menu */
.merge-split { position: relative; display: inline-flex; }
.merge-split-primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.merge-split-caret {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.22); padding-left: 10px; padding-right: 10px;
}
.merge-split-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 320px;
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.merge-split-option {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: 8px; padding: 9px 11px; color: var(--text);
}
.merge-split-option:hover { background: var(--bg-hover); }
.merge-split-option.is-selected { background: var(--accent-tint); }
.merge-split-option-label { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.merge-split-option.is-selected .merge-split-option-label { color: var(--accent); }
.merge-split-option-desc { font-size: 12px; color: var(--text-muted); }
/* Invisible full-viewport catcher so a click anywhere closes the strategy menu. */
.menu-backdrop { position: fixed; inset: 0; z-index: 20; }

/* composer */
.pr-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.pr-hint { font-size: 12px; }

/* right metadata sidebar */
.pr-sidebar {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 4px 16px; min-width: 0;
    position: sticky; top: 16px;
}
.pr-sidebar-section { padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.pr-sidebar-section:last-child { border-bottom: none; }
.pr-sidebar-label {
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-faint); margin-bottom: 5px;
}
.pr-sidebar-value { font-size: 13px; color: var(--text-strong); overflow-wrap: anywhere; }
.pr-sidebar-author { display: flex; align-items: center; gap: 7px; }

/* ── review diff — Files-changed sidebar layout ──
   A sticky 220px file list beside the selected file's diff panel (the PR "Files changed" tab). */
.review-sidebar-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; min-width: 0; }
.review-file-sidebar {
    position: sticky; top: 16px; align-self: start;
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow: hidden; max-height: calc(100vh - 200px); overflow-y: auto;
}
.review-file-sidebar-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-faint);
}
.review-file-item {
    display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; border-bottom: 1px solid var(--border-subtle);
    padding: 8px 12px; color: var(--text);
}
.review-file-item:last-child { border-bottom: none; }
.review-file-item:hover { background: var(--bg-hover); }
.review-file-item.is-selected { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.review-file-item-counts { font-family: var(--font-mono); font-size: 11px; }
.review-file-item-name {
    font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-file-panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); overflow: hidden; }
.review-file-panel-head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-subtle);
}
.review-file-panel-head .diff-file-name { font-size: 13px; }
.review-file-panel-head .review-toolbar-modes { margin-left: auto; }
.review-file-panel .review-diff-body { border: none; border-radius: 0; margin: 0; }

/* ── details ── */
.details {
    display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 18px 22px; margin-bottom: 16px;
    min-width: 0;
}
.details dt { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.details dd { margin: 0; overflow-wrap: anywhere; }
/* Job-detail key/value table — the redesign's spec: 150px uppercase mono keys, mono values. */
.job-detail .details { grid-template-columns: 150px 1fr; gap: 10px 18px; }
.job-detail .details dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
}
.job-detail .details dd { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); }
.prompt-full {
    margin: 0; white-space: pre-wrap; font-family: var(--font-ui);
    background: var(--bg-subtle); border-radius: 6px; padding: 10px;
}

/* ── files tab ── */
.files-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px; font-size: 13px;
}
.files-newfile { display: flex; align-items: center; gap: 8px; }
.files-newfile .input-compact { min-width: 180px; }
.files-newfile-status { margin: -4px 0 10px; }
.files-layout {
    display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 12px; align-items: start;
    min-width: 0;
}
.files-list {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow-y: auto;
    max-height: calc(100vh - 320px);
    min-width: 0;
}
.files-list-solo { max-width: 620px; }
.file-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: none; border-bottom: 1px solid var(--border);
    padding: 6px 10px; cursor: pointer; text-align: left;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: var(--bg-hover); }
.file-item.active { background: var(--bg-subtle); font-weight: 600; }
.file-path { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-counts { white-space: nowrap; font-size: 11.5px; }
.file-counts .add { color: var(--status-ok); }
.file-counts .del { color: var(--status-err); }
.files-viewer {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-panel); overflow: auto; min-width: 0;
}
.files-viewer-header {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border);
    padding: 7px 12px; font-size: 12.5px;
}
.file-content {
    margin: 0; padding: 12px; overflow: auto;
    max-height: calc(100vh - 360px);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
    white-space: pre;
}
.files-empty { padding: 14px; margin: 0; }
.file-editor {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    min-height: calc(100vh - 400px); padding: 12px; border: none;
    background: var(--bg-panel); color: var(--text);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45;
    white-space: pre; overflow: auto;
}
.file-editor:focus { outline: none; }
.files-editor-actions {
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid var(--border); padding: 8px 12px;
}
.files-file-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border); padding: 8px 12px;
}
.files-file-actions .input-compact { min-width: 180px; flex: 1 1 220px; }
/* Scrollable monospace log block — the self-update status log (UpdatePage). */
.logs-body {
    margin: 0; padding: 14px; overflow: auto;
    max-height: calc(100vh - 300px);
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word;
    min-width: 0;
}

/* ── settings — two-pane master/detail ──
   Left sub-nav swaps a single right-hand panel; each column scrolls on its own so the page
   itself never grows past one panel's worth. */
.settings-shell { display: flex; gap: 0; height: calc(100vh - 120px); }
.settings-nav {
    flex: 0 0 216px; overflow-y: auto;
    border-right: 1px solid var(--bg-hover); padding-right: 16px;
}
.settings-navgroup { margin-bottom: 18px; }
.settings-navgroup-label {
    margin: 0 0 6px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.settings-navitem {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: none; padding: 7px 10px; border-radius: 8px;
    font-family: var(--font-ui); font-size: 13.5px; color: var(--text-muted);
}
.settings-navitem:hover { background: var(--bg-hover); color: var(--text); }
.settings-navitem.active {
    background: var(--bg-subtle); color: var(--text); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
}
.settings-panel { flex: 1; min-width: 0; max-width: 640px; padding: 0 4px 40px 28px; overflow-y: auto; }
.settings-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.settings-panel-title {
    font-family: var(--font-display); font-weight: 600; font-size: 24px;
    letter-spacing: -0.01em; margin: 0;
}
.settings-panel-desc { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }
.settings-panel-actions { flex-shrink: 0; display: flex; gap: 8px; }
.settings-form h2 { margin-top: 26px; }
.settings-form h2:first-child { margin-top: 0; }
.settings-host-title { margin-top: 34px; margin-bottom: 12px; }
.override-badge {
    display: inline-block; margin-left: 8px; padding: 0 7px;
    border: 1px solid var(--accent); border-radius: 999px;
    color: var(--accent); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle;
}
.form-saved { color: var(--status-ok); }

/* ── workspaces ── */
.ws-list { display: flex; flex-direction: column; gap: 10px; }
.ws-row {
    display: block; background: var(--bg-panel);
    border: 1px solid var(--border-subtle); border-radius: 12px;
    padding: 14px 18px; color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ws-row:hover { background: var(--bg-subtle); border-color: var(--border); }
.ws-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ws-repo { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; margin: 2px 0; }

/* ── routines ── */
.routine-state {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    border: 1px solid var(--border); color: var(--text-muted);
}
.routine-state-active { color: var(--status-ok); border-color: var(--status-ok); }
.routine-state-paused { color: var(--text-muted); }
.routine-state-ended { color: var(--status-err); border-color: var(--status-err); }
.routine-preview { font-size: 12.5px; margin-top: 4px; font-family: var(--font-mono); }

/* ── modal ── */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh; z-index: 100;
}
.modal {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 22px 24px;
    width: min(560px, 92vw); max-height: 80vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.modal-title { font-family: var(--font-display); margin-bottom: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.composer-prompt { resize: vertical; min-height: 110px; font-family: var(--font-ui); }

/* Page-header helper — a title + subtitle row with a trailing spacer. Shared: the Design
   index page reuses it (.chat-head / .chat-sub) for its own header. */
.chat-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.chat-head h1 { margin: 0; }
.chat-sub { color: var(--text-muted); font-size: 13px; }

/* ── chat — full-height two-pane layout ──────────────────────────────────────
   Like the design studio, the chat shell breaks out of .content's centered 1100px
   column and fills the viewport: a fixed history rail on the left + a conversation
   column (header · scrolling thread · docked composer) on the right. Colours are
   driven by the brand tokens so the page reverses correctly under the light theme. */
.content:has(.chat-shell) { max-width: none; padding: 0; overflow: hidden; }
.chat-shell { display: flex; height: 100%; min-height: 0; background: var(--bg); }

/* history rail — the page base surface, hairline-separated from the conversation column
   (a token, not a literal, so the rail reverses to parchment under the light theme) */
.chat-rail {
    flex: 0 0 200px; min-height: 0; display: flex; flex-direction: column;
    background: var(--bg); border-right: 1px solid var(--border);
}
/* Collapsed rail: hide the recent-chats sidebar so the conversation takes the full width.
   The header toggle (.chat-rail-toggle) brings it back; the choice persists per user. */
.chat-shell.chat-rail-collapsed .chat-rail { display: none; }

/* History-rail collapse toggle, docked at the left of the conversation header. */
.chat-rail-toggle {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text-muted);
}
.chat-rail-toggle:hover { background: var(--bg-hover); color: var(--text); }
.chat-rail-toggle svg {
    width: 18px; height: 18px; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.chat-shell.chat-rail-collapsed .chat-rail-toggle { color: var(--accent); }

.chat-rail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 10px;
}
.chat-rail-label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.chat-rail-new {
    background: none; border: none; cursor: pointer; padding: 2px 6px;
    font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--accent);
    border-radius: 6px;
}
.chat-rail-new:hover:not(:disabled) { background: var(--accent-tint); color: var(--accent-hover); }
.chat-rail-new:disabled { color: var(--text-low); cursor: not-allowed; }

.chat-search { position: relative; padding: 0 12px 8px; }
.chat-search-icon {
    position: absolute; left: 24px; top: 50%; transform: translateY(-60%);
    width: 15px; height: 15px; pointer-events: none;
    stroke: var(--text-low); stroke-width: 2; stroke-linecap: round; fill: none;
}
.chat-search-input {
    width: 100%; background: var(--bg-terminal); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px 8px 32px; font-family: var(--font-ui); font-size: 13px;
}
.chat-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.chat-search-input::placeholder { color: var(--text-low); }

.chat-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px 12px; }
.chat-rail-empty { font-size: 13px; color: var(--text-muted); padding: 8px 8px; }
.chat-rail-group-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low);
    padding: 12px 8px 5px;
}
.chat-rail-item {
    position: relative; cursor: pointer;
    padding: 8px 8px; border-radius: 9px;
    box-shadow: inset 2px 0 0 transparent;
}
.chat-rail-item:hover { background: var(--bg-hover); }
.chat-rail-item.active { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.chat-rail-item-top { display: flex; align-items: baseline; gap: 8px; }
.chat-rail-item-title {
    flex: 1; min-width: 0; font-weight: 500; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px;
}
.chat-rail-item-time {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}

/* Rename / delete surface on hover, tucked over the timestamp so the row stays two lines. */
.chat-rail-item-actions {
    position: absolute; top: 6px; right: 8px; display: none; gap: 2px;
    background: var(--bg-hover); border-radius: 6px; padding: 1px;
}
.chat-rail-item:hover .chat-rail-item-actions,
.chat-rail-item.active .chat-rail-item-actions { display: flex; }
.chat-rail-item.active .chat-rail-item-actions { background: var(--bg-subtle); }
.chat-rail-act {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 12px; padding: 2px 5px; border-radius: 5px; line-height: 1;
}
.chat-rail-act:hover { background: var(--bg-panel); color: var(--text); }
.chat-rail-act-del:hover { color: var(--diff-del-text); }

/* conversation column */
.chat-conv { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-conv-head {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px; border-bottom: 1px solid var(--border);
}
.chat-conv-head-text { flex: 1; min-width: 0; }
.chat-conv-title {
    margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px;
    letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-conv-sub { font-size: 12.5px; color: var(--text-muted); }
.chat-conv-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.chat-chip, .chat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
    background: var(--bg-panel);
}
.chat-chip-icon { width: 13px; height: 13px; stroke: var(--text-low); stroke-width: 2; fill: none; }
.chat-chip-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Model picker — the chip wraps a bare <select> so it reads as one control. */
.chat-model { cursor: pointer; padding-right: 7px; }
.chat-model:hover:not(:has(select:disabled)) { border-color: var(--text-low); }
.chat-model-select {
    border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
    font-family: var(--font-mono); font-size: 12px; max-width: 200px;
    padding: 0 2px; margin: 0; outline: none;
}
.chat-model-select:disabled { cursor: not-allowed; opacity: 0.6; }
.chat-model-select option { color: var(--text); background: var(--bg-panel); }
.chat-pill { cursor: pointer; }
.chat-pill:hover:not(:disabled) { border-color: var(--text-low); color: var(--text); }
.chat-pill:disabled { cursor: not-allowed; opacity: 0.6; }
.chat-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-low); }
.chat-pill.on { color: var(--private); border-color: var(--private-border); background: var(--private-tint); }
.chat-pill.on .chat-pill-dot { background: var(--private); }

.chat-notice {
    margin: 14px 24px 0; padding: 12px 16px; font-size: 13px; color: var(--text-muted);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.chat-notice code {
    font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-subtle);
    border-radius: 4px; padding: 1px 5px;
}

/* scrolling thread — centered 760px column of turns */
.chat-thread { flex: 1; min-height: 0; overflow-y: auto; }
.chat-thread-inner {
    max-width: 760px; min-height: 100%; margin: 0 auto; padding: 28px 24px 12px;
    display: flex; flex-direction: column; gap: 26px;
}
.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.chat-msg.chat-user { justify-content: flex-end; }
.chat-avatar {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.chat-avatar-user {
    background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    border: 1px solid rgba(242, 163, 60, 0.22);
}
.chat-avatar-mark { background: var(--bg-subtle); border: 1px solid var(--border); }
.chat-avatar-mark svg { width: 17px; height: 17px; stroke: var(--accent); }
.chat-bubble-user {
    max-width: 74%; padding: 10px 14px;
    background: var(--accent-tint); border: 1px solid rgba(242, 163, 60, 0.22);
    border-radius: 14px 14px 4px 14px; color: var(--text);
    white-space: pre-wrap; overflow-wrap: break-word;
}
.chat-bubble-assistant { min-width: 0; flex: 1; }
.chat-bubble-assistant .event-md { color: #E6DCC9; overflow-wrap: break-word; }
:root[data-theme="light"] .chat-bubble-assistant .event-md { color: var(--text); }
/* Streaming cursor — a blinking amber block trailing the live reply. */
.chat-cursor {
    display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
    margin-left: 2px; background: var(--accent); animation: skblink 1s step-end infinite;
}
@keyframes skblink { 50% { opacity: 0; } }
.chat-error {
    align-self: flex-start; max-width: 90%;
    background: var(--diff-del-bg); color: var(--diff-del-text);
    border-radius: var(--radius); padding: 9px 13px; font-size: 13px;
}

/* inline code — amber mono chips (code inside a panel is reset below) */
.chat-bubble-assistant .event-md code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: var(--accent-tint); color: var(--accent);
    border-radius: 5px; padding: 1px 5px;
}
/* code block — deep panel with a header strip (language + copy), built by skirnir.enhanceCode */
.event-md .sk-code {
    margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.sk-code-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.sk-code-lang {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.sk-code-copy {
    background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 5px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.sk-code-copy:hover { background: var(--bg-hover); color: var(--text); }
.event-md .sk-code pre {
    margin: 0; border: 0; border-radius: 0; background: var(--bg-terminal);
}
.chat-bubble-assistant .event-md .sk-code pre code {
    background: none; color: var(--text-muted); padding: 0;
}

/* empty state — centered mark, heading, description, starter prompts */
.chat-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; margin: auto; padding: 48px 20px; max-width: 460px;
}
.chat-empty-mark {
    width: 54px; height: 54px; border-radius: 14px; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border);
}
.chat-empty-mark svg { width: 30px; height: 30px; stroke: var(--accent); }
.chat-empty-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.chat-empty-desc { margin: 0; color: var(--text-muted); font-size: 14px; }
.chat-starters { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; width: 100%; }
.chat-starter {
    text-align: left; padding: 11px 14px; cursor: pointer;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-strong); font-family: var(--font-ui); font-size: 13.5px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.chat-starter:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-subtle); }
.chat-starter:disabled { opacity: 0.5; cursor: not-allowed; }

/* composer — a centered card docked at the bottom of the conversation column */
.chat-composer-dock { flex-shrink: 0; padding: 12px 24px 20px; }
.chat-composer {
    max-width: 760px; margin: 0 auto;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 12px 14px 10px;
}
.chat-input {
    width: 100%; margin: 0; border: none; background: none; resize: none;
    color: var(--text); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5;
    min-height: 24px; max-height: 220px;
}
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--text-low); }
.chat-input:disabled { color: var(--text-low); }
.chat-composer-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 8px;
}
.chat-composer-tools { display: flex; gap: 4px; }
.chat-tool {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: none; border: none; color: var(--text-low);
}
.chat-tool svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.chat-tool:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.chat-tool:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-tool.on { color: var(--accent); }
.chat-tool.on:hover:not(:disabled) { color: var(--accent-hover); }

/* MCP tool-server picker (composer) */
.chat-mcp { position: relative; display: flex; }
.chat-mcp-count {
    position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--accent); color: var(--accent-contrast);
    font-family: var(--font-mono); font-size: 9px; line-height: 14px; text-align: center;
}
.chat-mcp-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 260px;
    padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.chat-mcp-menu-head {
    font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-low);
    padding: 2px 6px 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.chat-mcp-empty, .chat-mcp-note { font-size: 12px; color: var(--text-low); padding: 4px 6px; margin: 0; }
.chat-mcp-note { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.chat-mcp-item {
    display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px; cursor: pointer;
    font-size: 13px; color: var(--text);
}
.chat-mcp-item:hover:not(.disabled) { background: var(--bg-hover); }
.chat-mcp-item.disabled { cursor: not-allowed; color: var(--text-low); }
.chat-mcp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mcp-tag {
    margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-low);
    border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}

/* Slash-command menu — mirrors the MCP popover */
.chat-slash { position: relative; display: flex; }
.chat-slash-menu {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 280px;
    padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.chat-slash-item {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
    padding: 6px; border: none; border-radius: 7px; background: none; cursor: pointer; color: var(--text);
}
.chat-slash-item:hover { background: var(--bg-hover); }
.chat-slash-usage { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); }
.chat-slash-desc { font-size: 12px; color: var(--text-low); }

/* Result line for a slash command, above the composer */
.chat-cmd-notice {
    display: flex; align-items: center; gap: 8px; margin: 0 auto 8px; max-width: 760px;
    padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
    font-size: 13px; color: var(--text);
}
.chat-cmd-notice span { flex: 1; }
.chat-cmd-notice-x {
    border: none; background: none; cursor: pointer; color: var(--text-low); font-size: 12px; padding: 2px 4px;
}
.chat-cmd-notice-x:hover { color: var(--text); }

/* Tool-call trace inside an assistant bubble */
.chat-tools-trace { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-tool-call {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 12px;
    font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border);
    background: var(--bg-subtle); color: var(--text-low);
}
.chat-tool-call-icon { font-size: 11px; }
.chat-tool-start { border-color: var(--accent); color: var(--accent); }
.chat-tool-start .chat-tool-call-icon { animation: chat-tool-spin 1.4s linear infinite; }
.chat-tool-done { color: var(--text-low); }
.chat-tool-error { border-color: var(--danger, #d9534f); color: var(--danger, #d9534f); }
@keyframes chat-tool-spin { to { transform: rotate(360deg); } }
.chat-composer-send { display: flex; align-items: center; gap: 12px; }
.chat-send-hint { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.chat-send {
    padding: 7px 18px; border-radius: 9px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    background: var(--bg-subtle); color: var(--text-low); border: 1px solid var(--border);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.chat-send.ready { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.chat-send.ready:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chat-send:disabled { cursor: not-allowed; }

/* private mode — a cool indigo wash over the conversation marks a thread that never
   touches history (deliberately off-brand against the warm amber base) */
.chat-shell.chat-private .chat-thread { background: var(--private-tint); }
.chat-shell.chat-private .chat-composer { border-color: var(--private-border); }
.chat-shell.chat-private .chat-avatar-mark svg,
.chat-shell.chat-private .chat-empty-mark svg { stroke: var(--private); }

/* ── login ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 36px 40px; width: min(360px, 90vw);
    text-align: center;
}
.login-card .brand { justify-content: center; margin-bottom: 10px; padding: 0; }
.login-card .brand-word { font-size: 26px; }
.login-sub {
    color: var(--text-low); margin: 0 0 22px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.login-error { color: var(--status-err); }
.login-card input {
    width: 100%; background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 12px; font: inherit; margin-bottom: 12px;
}
.login-card button {
    width: 100%; background: var(--accent); color: var(--accent-contrast);
    border: none; border-radius: var(--radius); padding: 10px;
    font: inherit; font-weight: 600; cursor: pointer;
}

/* ── Blazor circuit error banner ──
   Hidden until the framework unhides it when a circuit error / disconnect occurs.
   Without this element a failed circuit leaves a silent blank page. */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: 12px 20px;
    background: var(--status-err); color: #fff;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.3);
    font-size: 14px;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    color: #fff; text-decoration: underline; cursor: pointer; margin-left: 12px;
}
#blazor-error-ui .dismiss { text-decoration: none; float: right; }

/* ── badges ── */
.badge {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; vertical-align: middle;
    background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border);
}
.badge-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.badge-danger { color: var(--status-err); border-color: var(--status-err); background: transparent; }

/* ── two-column field grid (model editor) ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-2 .field-label { margin-top: 10px; }

/* ── stats dashboard ── */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 24px;
}
.stat-tile {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 18px 20px;
}
.stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.1em; }
.stat-value { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; margin: 8px 0 4px; letter-spacing: -0.02em; }
.stat-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.stat-section { margin: 26px 0; }
.stat-h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 12px; }
.stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.bar-chart {
    display: flex; align-items: flex-end; gap: 3px; height: 140px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.bar-col { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 3px; }
.bar-stack { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.bar { width: 100%; border-radius: 2px 2px 0 0; min-height: 1px; }
.bar-cost { background: var(--accent); opacity: 0.85; }
.bar-col:hover .bar-cost { opacity: 1; }
.bar-axis { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 4px; }

.stat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stat-table th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    border-bottom: 1px solid var(--border); padding: 6px 10px 6px 0;
}
.stat-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--bg-subtle); }
.stat-table th:not(:first-child), .stat-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.stat-table tbody tr:hover td { background: var(--bg-hover); }

/* ── responsive ── */
@media (max-width: 760px) {
    /* Fixed icon rail: the draggable width and its handle don't apply here. The
       collapse toggle is redundant too — the rail is always collapsed at this width. */
    .sidenav, :root.sidenav-collapsed .sidenav { width: 60px; padding: 16px 6px; }
    .sidenav-resizer { display: none; }
    .sidenav-toggle { display: none; }
    .sidenav .brand { justify-content: center; padding: 2px 4px; gap: 0; }
    /* Collapsed rail — wordmark hides, the mark alone stands in (min-size 16px). */
    .sidenav .brand-word { display: none; }
    .nav-item { font-size: 12px; padding: 8px 6px; justify-content: center; }
    /* Icon-only rail: labels drop, only the brand line-icons remain. */
    .nav-item span { display: none; }
    /* Too narrow for prompt text — hide the recents region and account name on small screens;
       the account collapses to the avatar with Sign out stacked beneath it. */
    .recents, .sidenav-user { display: none; }
    .sidenav-account { flex-direction: column; gap: 6px; align-items: center; padding: 6px 0 0; }
    .sidenav-footer { margin-top: auto; }
    /* Two-pane settings stacks: the sub-nav collapses into one horizontally scrollable
       chip row so the panel starts right beneath it — a full vertical list would push
       the panel a whole screen below the fold. */
    .settings-shell { flex-direction: column; height: auto; }
    .settings-nav {
        display: flex; align-items: center; gap: 4px;
        flex-basis: auto; overflow-x: auto; overflow-y: hidden;
        border-right: none; border-bottom: 1px solid var(--bg-hover);
        padding: 0 0 10px; margin-bottom: 16px;
    }
    .settings-navgroup { display: contents; }
    .settings-navgroup-label { display: none; }
    .settings-navitem {
        width: auto; flex: 0 0 auto; white-space: nowrap;
        border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
    }
    .settings-navitem.active { box-shadow: none; border-color: var(--accent); }
    .settings-panel { max-width: none; padding: 0 0 40px; overflow-y: visible; }
    .settings-panel-head { flex-wrap: wrap; }
    /* Chat: stack the two panes — the history rail becomes a short scrollable strip
       above the conversation so the thread keeps the full width. */
    .chat-shell { flex-direction: column; }
    .chat-rail {
        flex: 0 0 auto; max-height: 34vh;
        border-right: none; border-bottom: 1px solid var(--border);
    }
    .chat-conv-head { padding: 12px 16px; }
    .chat-thread-inner { padding: 20px 14px 10px; }
    .chat-composer-dock { padding: 10px 14px 16px; }
    .content { padding: 14px 12px 60px; }
    .details { grid-template-columns: 1fr; gap: 2px 0; }
    .details dt { margin-top: 8px; }
    .files-layout { grid-template-columns: 1fr; }
    .files-list { max-height: 40vh; }
    .stat-cols { grid-template-columns: 1fr; gap: 0; }
    .grid-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ── Actions (local CI) ──
   Pipeline view: needs-levels as columns, one card per workflow job; below it the selected
   job's steps expand into streamed logs. Status colours reuse the pill tokens. */
.ci-pipeline { display: flex; gap: 26px; align-items: flex-start; overflow-x: auto; margin: 18px 0; }
.ci-stage { display: flex; flex-direction: column; gap: 10px; position: relative; }
.ci-stage + .ci-stage::before {
    content: "→"; position: absolute; left: -20px; top: 18px;
    color: var(--text-low); font-size: 14px;
}
.ci-job {
    text-align: left; cursor: pointer; min-width: 180px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 10px 14px;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ci-job:hover { background: var(--bg-subtle); border-color: var(--border); }
.ci-job.selected { border-color: var(--accent); }
.ci-job-name { font-family: var(--font-display); font-weight: 500; margin-bottom: 6px; }
.ci-job-sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; color: var(--text-low); font-family: var(--font-mono); font-size: 11.5px; }
.ci-job-detail { margin-top: 8px; }
.ci-step { border: 1px solid var(--border-subtle); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ci-step-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; cursor: pointer; padding: 9px 14px;
    font-family: var(--font-display); font-size: 13.5px; color: var(--text);
}
.ci-step-head:hover { background: var(--bg-subtle); }
.ci-step-chevron { color: var(--text-low); width: 12px; }
.ci-step-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ci-step-dot.ok { background: var(--status-ok); }
.ci-step-dot.err { background: var(--status-err); }
.ci-step-dot.run { background: var(--status-run); animation: pulse 1.4s infinite; }
.ci-step-dot.neutral { background: var(--status-neutral); }
.ci-step-name { flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-step-time { color: var(--text-low); font-family: var(--font-mono); font-size: 11.5px; }
.ci-log {
    margin: 0; padding: 10px 14px; max-height: 420px; overflow: auto;
    background: var(--bg-subtle); border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word; color: var(--text-muted);
}
.ci-log-line { display: block; }
/* Checks strip on the PR page: one row per latest run per workflow. */
.pr-checks { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.pr-check {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 12px;
    color: var(--text); text-decoration: none;
}
.pr-check:hover { background: var(--bg-subtle); }
.pr-check .mono { color: var(--text-low); font-size: 12px; }

/* ── workspace wiki ── */
/* Tabs are anchors here (real URLs); keep them looking like the button tabs. */
.tab { text-decoration: none; }
.tab:hover { text-decoration: none; }

.wiki-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.wiki-index {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 8px; position: sticky; top: 12px;
}
.wiki-index-head {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
    padding: 6px 8px 8px;
}
.wiki-index-row {
    display: flex; align-items: center; gap: 4px;
    border-radius: var(--radius); padding: 2px 4px 2px 8px;
}
.wiki-index-row:hover { background: var(--bg-subtle); }
.wiki-index-row.active { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.wiki-index-link {
    flex: 1; min-width: 0; padding: 5px 0; font-size: 14px;
    color: var(--text) !important; text-decoration: none !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiki-index-row.active .wiki-index-link { font-weight: 600; }
.wiki-index-move { display: flex; gap: 2px; opacity: 0; transition: opacity 0.1s; }
.wiki-index-row:hover .wiki-index-move { opacity: 1; }
.wiki-index-move .link-button { font-size: 13px; padding: 0 3px; color: var(--text-muted); }
.wiki-index-move .link-button:disabled { opacity: 0.3; cursor: default; }

/* Section tree (sidebar + /wiki forest). Nested <ul>s, indented per level by the left padding. */
.wiki-index-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wiki-tree-list { list-style: none; margin: 0; padding: 0; }
.wiki-tree-list .wiki-tree-list { padding-left: 12px; border-left: 1px solid var(--border-subtle); margin-left: 6px; }
.wiki-tree-node { margin: 1px 0; }
.wiki-tree-sec {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 4px 3px 6px; border-radius: var(--radius);
}
.wiki-tree-sec:hover { background: var(--bg-subtle); }
.wiki-tree-sec-title {
    flex: 1; min-width: 0; font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiki-tree-page {
    display: flex; align-items: center; gap: 4px;
    border-radius: var(--radius); padding: 1px 4px 1px 6px;
}
.wiki-tree-page:hover { background: var(--bg-subtle); }
.wiki-tree-page.active { background: var(--bg-subtle); box-shadow: inset 2px 0 0 var(--accent); }
.wiki-tree-link {
    flex: 1; min-width: 0; padding: 4px 0; font-size: 14px;
    color: var(--text) !important; text-decoration: none !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiki-tree-page.active .wiki-tree-link { font-weight: 600; }
.wiki-tree-actions { display: flex; gap: 1px; opacity: 0; transition: opacity 0.1s; flex-shrink: 0; }
.wiki-tree-sec:hover .wiki-tree-actions,
.wiki-tree-page:hover .wiki-tree-actions { opacity: 1; }
.wiki-tree-actions .link-button { font-size: 12px; padding: 0 3px; color: var(--text-muted); }
.wiki-tree-actions .link-button:disabled { opacity: 0.3; cursor: default; }
.wiki-tree-root-actions .link-button { font-size: 12px; color: var(--accent); }
.wiki-tree-reparent { padding: 2px 4px 4px 6px; }
.wiki-tree-reparent select { font-size: 12px; max-width: 100%; }

/* /wiki forest: one group per workspace + the Personal group. */
.wiki-forest-intro { margin: -4px 0 20px; max-width: 62ch; }
.wiki-forest-group { margin-bottom: 22px; }
.wiki-forest-head {
    display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle);
}
.wiki-forest-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text) !important; text-decoration: none !important; }
a.wiki-forest-title:hover { color: var(--accent) !important; }
.wiki-forest-empty { margin: 4px 0 0 6px; font-size: 13px; }

.wiki-content { min-width: 0; }
.wiki-page-head { display: flex; align-items: baseline; gap: 12px; }
.wiki-title { font-family: var(--font-display); font-weight: 600; margin: 0; flex: 1; min-width: 0; }
.wiki-page-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wiki-meta { font-size: 12px; margin: 2px 0 16px; }

/* Editor header: the "Content (Markdown)" label with the show/hide-preview toggle beside it. */
.wiki-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 9px; }
.wiki-editor-head .field-label { margin: 0; }

/* Split editor: markdown source on the left, live preview on the right. The preview is optional —
   hiding it collapses the grid to a single full-width column (.wiki-editor-solo). */
.wiki-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.wiki-editor.wiki-editor-solo { grid-template-columns: 1fr; }
.wiki-editor-input { resize: vertical; line-height: 1.6; min-height: 360px; }
.wiki-editor-preview {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 14px 16px; min-height: 360px; overflow-x: auto;
}
.wiki-editor-preview-head {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}

/* Rendered markdown prose — used by wiki pages and the editor preview. */
.markdown-body { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.markdown-body :first-child { margin-top: 0; }
.markdown-body :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
    font-family: var(--font-display); font-weight: 600; line-height: 1.3;
    margin: 1.4em 0 0.5em; letter-spacing: -0.01em;
}
.markdown-body h1 { font-size: 1.7em; }
.markdown-body h2 { font-size: 1.35em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border-subtle); }
.markdown-body h3 { font-size: 1.12em; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote { margin: 0 0 1em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body a { color: var(--accent); text-decoration: underline; }
.markdown-body blockquote {
    border-left: 3px solid var(--border); padding-left: 14px; color: var(--text-muted); margin-left: 0;
}
.markdown-body code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--bg-subtle); border-radius: 4px; padding: 1px 5px;
}
.markdown-body pre {
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 12px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
.markdown-body pre code { background: none; padding: 0; font-size: inherit; }
.markdown-body table { border-collapse: collapse; margin: 0 0 1em; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.markdown-body th { background: var(--bg-subtle); font-weight: 600; }
.markdown-body img { max-width: 100%; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }

@media (max-width: 780px) {
    .wiki-layout { grid-template-columns: 1fr; }
    .wiki-index { position: static; }
    .wiki-editor { grid-template-columns: 1fr; }
}

/* ── Design module ─────────────────────────────────────────────────────────
   The Design index (a decluttered project grid; creation lives behind a modal)
   and the studio (a narrow chat sidebar + a full-bleed sandboxed preview
   canvas). The index breaks out of .content's centered column for its own
   top-bar row; the studio breaks out so the canvas can use the full size. */

/* A generic bordered icon-button — shared by the index modal close, the studio
   back/settings/reload/external controls. Ghost until hover. */
.dsx-icon-btn {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid transparent; border-radius: var(--radius); padding: 0;
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.dsx-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.dsx-icon-btn.dsx-icon-btn-bordered { border-color: var(--border-subtle); }
.dsx-icon-btn svg {
    width: 17px; height: 17px; display: block; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ── index ── */
.content:has(.dsx) { max-width: none; padding: 0; overflow: hidden; display: flex; }
.dsx { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.dsx-topbar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 34px; border-bottom: 1px solid var(--border-subtle);
    background: var(--bg); position: sticky; top: 0; z-index: 5;
}
.dsx-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-faint);
}
.dsx-eyebrow-mark {
    width: 16px; height: 16px; display: block; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.dsx-new { padding: 10px 17px; }

/* The rest of the index scrolls within a centered column. */
.dsx-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.dsx-inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 34px 34px 0; }
.dsx-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dsx-header-copy { min-width: 0; }
.dsx-header-copy h1 { font-size: 30px; }
.dsx-sub { font-size: 14px; color: var(--text-faint); margin: 9px 0 0; max-width: 520px; line-height: 1.55; }
.dsx-search {
    display: flex; align-items: center; gap: 9px; min-width: 240px;
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px;
}
.dsx-search:focus-within { border-color: var(--accent); }
.dsx-search-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--text-low); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsx-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 13px; }
.dsx-search input::placeholder { color: var(--text-low); }

.dsx-section { display: flex; align-items: center; gap: 10px; margin-top: 28px; margin-bottom: 16px; }
.dsx-section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--text-faint); }
.dsx-section-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.dsx-section-rule { flex: 1; height: 1px; background: var(--border-subtle); }

.dsx-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px;
    padding-bottom: 56px; align-content: start;
}

/* ghost / new tile */
.dsx-ghost {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    min-height: 212px; padding: 24px; text-align: center; cursor: pointer;
    background: var(--bg-panel); border: 1px dashed var(--border); border-radius: var(--radius-card);
    color: var(--text-faint); font-family: var(--font-ui);
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.dsx-ghost:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--text); }
.dsx-ghost-mark {
    width: 46px; height: 46px; border-radius: 12px; border: 1px dashed var(--border);
    display: grid; place-items: center; color: var(--text-low);
    transition: border-color .14s ease, color .14s ease;
}
.dsx-ghost:hover .dsx-ghost-mark { border-color: var(--accent); color: var(--accent); }
.dsx-ghost-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsx-ghost-copy { display: flex; flex-direction: column; gap: 5px; }
.dsx-ghost-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.dsx-ghost-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }

/* project card */
.dsx-card {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    transition: border-color .14s ease, transform .14s ease;
}
.dsx-card:hover { border-color: var(--border); transform: translateY(-2px); }
.dsx-card:hover .dsx-card-name { color: var(--accent-hover); }
.dsx-card-thumb {
    position: relative; height: 120px; display: grid; place-items: center;
    background-color: var(--bg); border-bottom: 1px solid var(--border-subtle);
    background-image: repeating-linear-gradient(135deg, var(--accent-tint) 0 1px, transparent 1px 9px);
}
.dsx-card-mark { opacity: 0.9; }
.dsx-mark-svg { width: 46px; height: 46px; display: block; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dsx-card-kind {
    position: absolute; top: 10px; left: 12px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--text-low);
}
.dsx-card-body { display: flex; flex-direction: column; padding: 15px 16px 16px; flex: 1; }
.dsx-card-name {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s ease;
}
.dsx-card-pin { color: var(--accent); margin-left: auto; }
.dsx-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dsx-scope {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
}
.dsx-scope-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dsx-scope.is-workspace { color: var(--accent); background: rgba(242, 163, 60, 0.10); border-color: rgba(242, 163, 60, 0.24); }
.dsx-scope.is-standalone { color: #A79A86; background: rgba(167, 154, 134, 0.08); border-color: rgba(167, 154, 134, 0.20); }
.dsx-card-updated { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); margin-left: auto; }
.dsx-noresults { padding-bottom: 40px; }

/* index modal — a touch wider than the generic .modal, brand header + footer. */
.dsx-modal { width: min(520px, 92vw); padding: 0; overflow: hidden; }
.dsx-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--border-subtle);
}
.dsx-modal-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.dsx-modal-icon { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsx-modal-body { padding: 6px 22px 4px; }
.dsx-modal-body .field-label:first-child { margin-top: 16px; }
.dsx-modal .modal-actions { padding: 4px 22px 22px; margin-top: 8px; }

/* ── studio ── */
.content:has(.design-studio) { max-width: none; padding: 0; overflow: hidden; }
.design-studio { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.design-studio-missing { display: flex; flex-direction: column; gap: 12px; padding: 40px; align-items: flex-start; }

.design-topbar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 24px; border-bottom: 1px solid var(--border-subtle); background: var(--bg);
}
.design-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.design-back { flex-shrink: 0; text-decoration: none; }
.design-topbar-heading { min-width: 0; }
.design-topbar-titlerow { display: flex; align-items: center; gap: 9px; }
.design-title {
    font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-topbar-subline { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); margin-top: 2px; }
.design-status {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.design-status.busy { color: var(--accent); background: rgba(242, 163, 60, 0.10); border-color: rgba(242, 163, 60, 0.24); }
.design-status.ok { color: var(--status-ok); background: rgba(143, 191, 127, 0.12); border-color: rgba(143, 191, 127, 0.24); }
.design-status.bad { color: var(--status-err); background: rgba(232, 115, 74, 0.12); border-color: rgba(232, 115, 74, 0.24); }
.design-topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.design-export { padding: 9px 17px; }

.design-viewports {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: var(--radius);
}
.design-vp {
    display: grid; place-items: center; width: 32px; height: 28px; padding: 0;
    background: transparent; border: none; border-radius: 6px; color: var(--text-faint); cursor: pointer;
    transition: color .12s ease, background .12s ease;
}
.design-vp:hover { color: var(--text); }
.design-vp.active { color: var(--accent); background: var(--bg-hover); }
.design-vp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.design-body { flex: 1; min-height: 0; display: flex; }

/* chat — a fixed, capped narrow column so the preview canvas keeps the bulk of the width.
   flex-grow/shrink are 0, so 360px is a hard max: the rail never widens on big screens. */
.design-chat {
    flex: 0 0 360px; max-width: 360px; display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--border-subtle); background: var(--bg-panel);
    position: relative;   /* anchors the file drop overlay */
}
.design-chat-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.design-chat-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.design-chat-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.design-chat-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); }
.design-settings-btn { width: 28px; height: 28px; }
.design-settings-btn svg { width: 16px; height: 16px; }

.design-transcript { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.design-empty { padding: 8px 2px; }
.design-empty-lead { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.design-empty p.muted { font-size: 13px; line-height: 1.55; margin: 0; }

.design-composer {
    flex-shrink: 0; border-top: 1px solid var(--border-subtle); padding: 14px 16px 16px;
    display: flex; flex-direction: column;
}
.design-composer-field { position: relative; }
.design-input { display: block; resize: none; min-height: 76px; padding-bottom: 44px; margin: 0; }
.design-send { position: absolute; right: 8px; bottom: 8px; padding: 7px 13px; font-size: 12.5px; }
.design-send svg { width: 13px; height: 13px; }
.design-composer-error { margin-top: 8px; }

/* composer tools — the attach-files affordance + upload status. */
.design-composer-tools { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.design-attach {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12px; color: var(--text-low); padding: 4px 8px; border-radius: 6px;
    border: 1px dashed var(--border-subtle); transition: color .12s, border-color .12s, background .12s;
}
.design-attach:hover { color: var(--text); border-color: var(--accent); background: var(--bg-panel-2, transparent); }
.design-attach svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.design-attach.disabled { opacity: .5; pointer-events: none; }
/* The <InputFile>'s <input> is the drop conduit + click target — kept in the DOM but visually hidden. */
.design-attach-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.design-upload-note { font-size: 11.5px; color: var(--text-faint); }
.design-upload-note.ok { color: var(--status-ok); }

/* File drop overlay — hidden until skirnirDrop adds `.drag-over` to the chat rail on a file drag. */
.design-drop-overlay {
    position: absolute; inset: 0; z-index: 20; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: color-mix(in srgb, var(--bg-panel) 82%, transparent);
    backdrop-filter: blur(1px); pointer-events: none;
}
.design-chat.drag-over .design-drop-overlay { display: flex; }
.design-drop-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 24px 20px; border-radius: 12px; border: 2px dashed var(--accent);
    background: var(--bg-panel); color: var(--text); font-size: 13px; font-weight: 500;
}
.design-drop-card svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* preview */
.design-canvas { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg-terminal); }
.design-toolbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.design-toolbar-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-faint); }
.design-toolbar-dims { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.design-reload { width: 30px; height: 30px; }
.design-reload svg { width: 15px; height: 15px; }
.design-rendered { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--status-ok); }
.design-rendered-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-ok); }

.design-preview-frame {
    flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 40px;
    background-image: radial-gradient(var(--accent-tint) 1px, transparent 1px); background-size: 22px 22px;
}
.design-preview-viewport {
    width: 100%; height: 100%; background: #fff;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
    overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); transition: max-width .22s ease;
}
.design-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.dsx-icon-btn.active { color: var(--accent); background: var(--bg-hover); }

/* ── chat history rail ── */
.design-history {
    flex-shrink: 0; max-height: 45%; display: flex; flex-direction: column; min-height: 0;
    border-bottom: 1px solid var(--border-subtle); background: var(--bg-terminal);
}
.design-history-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px 8px;
}
.design-history-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); }
.design-history-new { padding: 4px 10px; font-size: 11.5px; }
.design-history-empty { padding: 4px 16px 14px; font-size: 12.5px; margin: 0; }
.design-history-list { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.design-history-item {
    display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
    padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--text); cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.design-history-item:hover { background: var(--bg-hover); }
.design-history-item.active { background: var(--bg-hover); border-color: var(--border); }
.design-history-item-title {
    font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-history-item-meta {
    display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low);
}
.design-history-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.design-history-dot.busy { background: var(--accent); }
.design-history-dot.ok { background: var(--status-ok); }
.design-history-dot.bad { background: var(--status-err); }

/* ── canvas mode toggle (preview / files) ── */
.design-modes {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.design-mode {
    padding: 4px 12px; border: none; border-radius: 6px; background: transparent;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint);
    cursor: pointer; transition: color .12s ease, background .12s ease;
}
.design-mode:hover { color: var(--text); }
.design-mode.active { color: var(--accent); background: var(--bg-hover); }

/* ── file browser ── */
.design-files { flex: 1; min-height: 0; display: flex; }
.design-files-list {
    flex: 0 0 300px; max-width: 300px; overflow-y: auto; padding: 8px;
    border-right: 1px solid var(--border-subtle); background: var(--bg-panel);
    display: flex; flex-direction: column; gap: 1px;
}
.design-files-empty { padding: 14px; font-size: 12.5px; margin: 0; }
.design-file-row {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--text); cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.design-file-row:hover { background: var(--bg-hover); }
.design-file-row.active { background: var(--bg-hover); border-color: var(--border); }
.design-file-ic { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--text-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.design-file-path {
    flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left;
}
.design-file-size { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.design-file-view { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.design-file-viewbar {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.design-file-viewname {
    font-family: var(--font-mono); font-size: 12px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.design-file-iframe { background: #fff; }
.design-file-placeholder { flex: 1; display: grid; place-items: center; }

@media (max-width: 900px) {
    .dsx-topbar { padding: 12px 16px; }
    .dsx-inner { padding-left: 16px; padding-right: 16px; }
    .design-body { flex-direction: column; }
    .design-chat { flex: 0 0 45%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .design-files { flex-direction: column; }
    .design-files-list { flex: 0 0 40%; max-width: none; border-right: none; border-bottom: 1px solid var(--border-subtle); }
}

/* Issue tracker — the redesigned workspace views: a segmented List / Board toggle over the same
   issue set. Board columns are Backlog → Todo → In progress → In review → Done; the Done column is
   the closed state. Cards drag between columns. Detail-page form styles (.issue-new,
   .issue-detail-body) live at the bottom of this block. */

.issue-new { margin: 16px 0 8px; }
.issue-detail-body { margin: 4px 0 8px; }


.iss-lede { margin: -4px 0 18px; font-size: 14px; }

/* toolbar row: view toggle + filter tabs on the left, search on the right */
.iss-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 20px; flex-shrink: 0;
}
.iss-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* segmented control (shared shape for the view toggle and the open/closed filter) */
.iss-toggle, .iss-ftabs {
    display: inline-flex; gap: 3px; padding: 4px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle); border-radius: 10px;
}
.iss-toggle-btn, .iss-ftab {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    border: none; background: transparent; border-radius: 7px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-muted);
    transition: color 0.12s, background 0.12s;
}
.iss-toggle-btn svg { stroke: currentColor; }
.iss-toggle-btn:hover, .iss-ftab:hover { color: var(--text); }
.iss-toggle-btn.active, .iss-ftab.active { color: var(--text); background: var(--bg-subtle); }
.iss-ftab-count { margin-left: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low); }
.iss-ftab.active .iss-ftab-count { color: var(--accent); }

.iss-search {
    display: flex; align-items: center; gap: 9px; min-width: 210px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: 9px; padding: 8px 12px;
}
.iss-search:focus-within { border-color: var(--accent); }
.iss-search svg { stroke: var(--text-low); flex-shrink: 0; }
.iss-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    color: var(--text); font-family: var(--font-ui); font-size: 13px;
}

/* ── list view ── */
.iss-list {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); overflow: hidden;
}
.iss-row {
    display: flex; align-items: center; gap: 14px; padding: 15px 18px;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    text-decoration: none; color: inherit; transition: background 0.12s;
}
.iss-row:last-child { border-bottom: none; }
.iss-row:hover { background: var(--bg-subtle); text-decoration: none; }
.iss-row:hover .iss-row-title { color: var(--accent-hover); }
.iss-status { display: flex; flex-shrink: 0; }
.iss-status svg { display: block; }
.iss-status--open { stroke: var(--status-ok); }
.iss-status--closed { stroke: #B08A6A; }
.iss-row-main { min-width: 0; flex: 1; }
.iss-row-titleline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.iss-row-title { font-size: 14.5px; font-weight: 500; color: var(--text-strong); transition: color 0.12s; }
.iss-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }
.iss-prio-wrap { display: flex; flex-shrink: 0; }
.iss-prio { display: block; }
.iss-comments {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint);
}
.iss-comment-ic { stroke: var(--text-faint); }

/* empty state */
.iss-empty {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 56px 24px; text-align: center;
}
.iss-empty-ic {
    width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    display: grid; place-items: center;
}
.iss-empty-ic svg { stroke: var(--text-low); }
.iss-empty-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.iss-empty-sub { font-size: 13.5px; color: var(--text-faint); margin: 8px auto 20px; max-width: 360px; line-height: 1.6; }

/* ── board view ── the .content container flips to a flex column so the board fills the
   remaining height, scrolls horizontally, and each column scrolls internally. */
.content:has(.iss-board) { display: flex; flex-direction: column; overflow: hidden; max-width: none; }
.iss-board {
    flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 8px;
}
.iss-col {
    width: 288px; flex-shrink: 0; display: flex; flex-direction: column;
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); transition: background 0.12s, border-color 0.12s;
}
.iss-col.drag-over { background: var(--accent-tint); border-color: var(--accent); }
.iss-col-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 12px; flex-shrink: 0; }
.iss-col-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.iss-col-name { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.iss-col-count {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
    background: var(--bg); border: 1px solid var(--border-subtle);
    padding: 1px 8px; border-radius: 999px;
}
.iss-col-add {
    margin-left: auto; display: flex; padding: 0; border: none; background: none;
    color: var(--text-low); cursor: pointer;
}
.iss-col-add:hover { color: var(--text); }
.iss-col-add svg { stroke: currentColor; }
.iss-col-cards {
    flex: 1; min-height: 0; overflow-y: auto; padding: 2px 12px 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.iss-card {
    background: var(--bg-subtle); border: 1px solid var(--border);
    border-radius: 11px; padding: 13px 13px 12px; cursor: grab;
    transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}
.iss-card:hover { border-color: var(--text-low); background: var(--bg-hover); }
.iss-card:active { cursor: grabbing; }
.iss-card.dragging { opacity: 0.4; }
.iss-card-top { display: flex; align-items: flex-start; gap: 8px; }
.iss-card-title {
    flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text-strong); line-height: 1.4;
    overflow-wrap: anywhere;
}
.iss-card-top .iss-prio-wrap { margin-top: 2px; }
.iss-card-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.iss-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.iss-card-num { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.iss-card-meta .iss-comments { font-size: 10.5px; }
.iss-card-av { margin-left: auto; }
.iss-drop {
    border: 1px dashed var(--border); border-radius: 11px; padding: 18px;
    text-align: center; font-size: 12px; color: var(--text-low);
}

/* ── new-issue modal ── */
.iss-modal-overlay {
    position: fixed; inset: 0; z-index: 40; display: flex;
    align-items: flex-start; justify-content: center; padding: 80px 24px;
    background: rgba(8, 6, 3, 0.66); backdrop-filter: blur(4px);
}
.iss-modal {
    width: 100%; max-width: 560px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.iss-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--border-subtle);
}
.iss-modal-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; }
.iss-modal-close {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
    border: none; background: none; color: var(--text-faint); cursor: pointer;
}
.iss-modal-close:hover { color: var(--text); background: var(--bg-subtle); }
.iss-modal-body { padding: 22px; }
.iss-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iss-field { margin-bottom: 16px; }
.iss-field-grid .iss-field { margin-bottom: 0; }
.iss-field-grid { margin-bottom: 16px; }
.iss-label-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.iss-label-toggle {
    border-style: solid; border-width: 1px; border-color: transparent;
    cursor: pointer; opacity: 0.55; transition: opacity 0.12s, border-color 0.12s;
    font-family: var(--font-mono); font-size: 11px;
}
.iss-label-toggle:hover { opacity: 0.85; }
.iss-label-toggle.on { opacity: 1; border-color: currentColor; }

/* ── label manager (modal) ── define/rename/recolor/delete a workspace's issue labels. */
.lblmgr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.lblmgr-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--border); }
.lblmgr-row:last-child { border-bottom: none; }
.lblmgr-spacer { flex: 1; }
.lblmgr-del { color: var(--status-err); }
.lblmgr-form { border-top: 1px solid var(--border); padding-top: 14px; }
.lblmgr-form-head { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.lblmgr-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lblmgr-swatch { width: 22px; height: 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.lblmgr-swatch:hover { opacity: 0.85; }
.lblmgr-swatch.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--bg) inset; }
.lblmgr-color { width: 30px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.lblmgr-preview { margin-top: 10px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.isd-sec-manage { float: right; font-size: 11px; font-weight: 400; color: var(--accent); }
.iss-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 6px; }

/* Read-only label chips on the issue detail page. */
.iss-detail-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 720px) {
    .iss-field-grid { grid-template-columns: 1fr; }
}

/* ── issue detail (redesign) ──────────────────────────────────────────────────
   The single-issue view: a back link, an issue header (status pill + meta + title,
   with a primary/secondary action bar), then a two-column body — description card +
   threaded comment composer on the left, a compact metadata sidebar on the right.
   Collapses to one column when narrow. Everything is tokenized so light theme works. */
.isd { max-width: 1000px; margin: 0 auto; }

.isd-back {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.12s;
}
.isd-back:hover { color: var(--text); text-decoration: none; }
.isd-back svg { flex-shrink: 0; }

/* header: title block on the left, action bar (wraps) on the right */
.isd-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.isd-header-main { min-width: 0; flex: 1; }
.isd-metarow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.isd-meta-ws { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.isd-meta-sep { color: var(--text-low); }
.isd-meta-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.isd-title {
    font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -0.02em;
    line-height: 1.25; margin: 0; text-wrap: pretty; color: var(--text);
}
.isd-actions { display: flex; gap: 9px; flex-shrink: 0; flex-wrap: wrap; }
.isd-actions .btn svg { flex-shrink: 0; }
/* icon-only ghost buttons (edit / delete) */
.isd-iconbtn { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }
/* positive ghost (Close / Close & comment) */
.isd-btn-positive { color: var(--status-ok); border-color: rgba(143, 191, 127, 0.42); }
.isd-btn-positive:hover { color: var(--status-ok); background: rgba(143, 191, 127, 0.12); border-color: var(--status-ok); }

/* status pill (concentric-ring icon + label); color modifiers match the board dots */
.isd-spill {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.isd-spill svg { flex-shrink: 0; }
.st-backlog    { color: var(--text-faint); background: rgba(142, 131, 113, 0.12); border-color: rgba(142, 131, 113, 0.28); }
.st-todo       { color: #8F9FBF; background: rgba(143, 159, 191, 0.10); border-color: rgba(143, 159, 191, 0.24); }
.st-inprogress { color: var(--accent); background: var(--accent-tint); border-color: rgba(242, 163, 60, 0.28); }
.st-review     { color: #B58FBF; background: rgba(181, 143, 191, 0.10); border-color: rgba(181, 143, 191, 0.24); }
.st-done       { color: var(--status-ok); background: rgba(143, 191, 127, 0.10); border-color: rgba(143, 191, 127, 0.24); }

/* two-column body */
.isd-grid {
    display: grid; grid-template-columns: 1fr 268px; gap: 28px;
    margin-top: 28px; align-items: start;
}
.isd-left { min-width: 0; }

/* description card */
.isd-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); overflow: hidden;
}
.isd-card-head {
    display: flex; align-items: center; gap: 9px; padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.isd-card-head svg { stroke: var(--text-faint); flex-shrink: 0; }
.isd-card-head-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-strong); }
.isd-card-edit { margin-left: auto; font-size: 12.5px; color: var(--text-faint); padding: 0; }
.isd-card-edit:hover { color: var(--text); }
.isd-desc-body { padding: 18px 18px 20px; font-size: 14.5px; line-height: 1.68; color: var(--text-muted); }
.isd-desc-empty { padding: 18px; font-size: 14px; color: var(--text-faint); }
.isd-edit { max-width: none; margin: 0; }

/* comments heading + count badge */
.isd-comments-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 16px; }
.isd-comments-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; }
.isd-jobs-head { margin-top: 24px; }
.isd-count {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
    background: var(--bg-terminal); border: 1px solid var(--border-subtle);
    padding: 2px 9px; border-radius: 999px;
}

/* comment thread */
.isd-comment-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.isd-comment { display: flex; gap: 12px; }
.isd-avatar {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 600; font-size: 12px;
    background: var(--bg-subtle); color: var(--text-strong); flex-shrink: 0;
}
.isd-avatar-accent { background: var(--accent-tint); color: var(--accent); }
.isd-avatar-sm { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.isd-bubble {
    flex: 1; min-width: 0; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; border-top-left-radius: 4px; overflow: hidden;
}
.isd-bubble-head {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 15px 9px; border-bottom: 1px solid var(--border-subtle);
}
.isd-bubble-author { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.isd-bubble-time, .isd-bubble-edited { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.isd-bubble-actions { margin-left: auto; display: flex; gap: 8px; }
.isd-bubble-actions .link-button { font-size: 12px; }
.isd-bubble-body { padding: 12px 15px 14px; font-size: 14px; line-height: 1.62; color: var(--text-muted); }
.isd-bubble-edit { padding: 12px 15px 14px; }
.isd-bubble-edit .form-actions { margin-top: 10px; }

/* new-comment composer */
.isd-composer { display: flex; gap: 12px; }
.isd-composer-main { flex: 1; min-width: 0; }
.isd-textarea { min-height: 96px; resize: vertical; line-height: 1.6; margin-bottom: 0; }
.isd-composer-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.isd-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low); }
.isd-composer-actions { display: flex; gap: 10px; }

/* metadata sidebar */
.isd-side {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 6px 4px;
}
.isd-sec { padding: 12px 14px 10px; }
.isd-sec-label {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px;
}
.isd-hair { height: 1px; background: var(--border-subtle); margin: 2px 12px; }
.isd-select { width: 100%; margin-bottom: 0; cursor: pointer; }
.isd-chip {
    display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-strong);
    background: var(--bg-terminal); border: 1px solid var(--border); border-radius: 9px; padding: 8px 13px;
}
.isd-chip-muted { color: var(--text-faint); }
.isd-chip .iss-prio { display: block; }
.isd-assignee { display: flex; align-items: center; gap: 10px; }
.isd-assignee-name { font-size: 13.5px; color: var(--text-strong); }
.isd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.isd-side .iss-label-toggles { gap: 6px; }

/* timestamps */
.isd-times { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.isd-time-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.isd-time-k { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.isd-time-v { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

/* stack to one column on narrow viewports — sidebar drops below the thread */
@media (max-width: 880px) {
    .isd-grid { grid-template-columns: 1fr; gap: 20px; }
    .isd-side { order: 2; }
}

/* ── workspace overview ───────────────────────────────────────────────────────
   The landing shown when a workspace is opened: breadcrumb + header + meta chips,
   then a two-column body (main column + right rail) that collapses to one column
   when narrow. All colours/fonts/radii come from the shared tokens. */
.ov-page { max-width: 1080px; margin: 0 auto; }

.ov-crumb {
    font-family: var(--font-mono); font-size: 12px; color: var(--text-low); margin-bottom: 16px;
}
.ov-crumb a { color: var(--accent); }

.ov-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ov-mark {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    background: var(--bg-subtle);
    display: inline-flex; align-items: center; justify-content: center;
}
.ov-mark-icon {
    width: 22px; height: 22px; fill: none;
    stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ov-headings { flex: 1; min-width: 0; }
.ov-name {
    font-family: var(--font-display); font-weight: 600; font-size: 34px;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-repopath {
    font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Shared line-icon sizing: stroke inherits the element's colour; fill stays on the SVG's own
   attributes so dot-filled glyphs (overflow, issue action) still render. */
.ov-icon {
    width: 16px; height: 16px; flex-shrink: 0;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Overflow menu — a native <details> popover so it needs no JS. */
.ov-overflow { position: relative; }
.ov-overflow-btn {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius);
    background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-muted);
}
.ov-overflow-btn::-webkit-details-marker { display: none; }
.ov-overflow-btn::marker { content: ""; }
.ov-overflow-btn:hover { color: var(--text); background: var(--bg-hover); }
.ov-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 184px;
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 6px; box-shadow: var(--shadow-tile);
    display: flex; flex-direction: column;
}
.ov-menu a {
    padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
    color: var(--text) !important; text-decoration: none !important;
}
.ov-menu a:hover { background: var(--bg-hover); }
.ov-menu-btn {
    padding: 8px 10px; border-radius: 8px; font-size: 13.5px; text-align: left;
    color: var(--text); background: none; border: none; cursor: pointer; width: 100%;
}
.ov-menu-btn:hover { background: var(--bg-hover); }

hr.sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 4px; }

/* Migrate-to-local-forge confirm panel + result banner */
.ov-migrate-panel {
    border: 1px solid var(--border); background: var(--bg-panel);
    border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 18px;
}
.ov-migrate-panel p { margin: 0 0 8px; }
.ov-migrate-list { margin: 4px 0 14px; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.ov-migrate-list li { margin: 2px 0; }
.ov-migrate-actions { display: flex; gap: 8px; }
.ov-migrate-result {
    border-radius: var(--radius-card); padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px;
    border: 1px solid var(--border);
}
.ov-migrate-result.is-ok { border-color: var(--ok, #2ea043); color: var(--text); }
.ov-migrate-result.is-error { border-color: var(--danger, #d1242f); color: var(--text); }

.ov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ov-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-panel);
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.ov-chip .ov-icon { width: 13px; height: 13px; color: var(--text-low); }
.ov-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex-shrink: 0; }
.ov-chip-sync {
    color: var(--status-ok); border-color: rgba(143, 191, 127, 0.35);
    background: rgba(143, 191, 127, 0.10);
}
.ov-chip-sync .ov-icon { color: var(--status-ok); }

.ov-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start;
}
.ov-main, .ov-rail { min-width: 0; display: flex; flex-direction: column; gap: 26px; }

/* Quick actions — 3-up card grid. */
.ov-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ov-action {
    display: flex; flex-direction: column; gap: 8px; min-height: 96px; padding: 14px;
    border-radius: 13px; border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ov-action:hover { border-color: var(--accent); background: var(--bg-subtle); }
.ov-action-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.ov-action-icon { width: 20px; height: 20px; color: var(--accent); }
.ov-action-label { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.ov-action-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.ov-count-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--accent-tint); color: var(--accent);
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Section eyebrow + trailing link (recent jobs, open issues). */
.ov-section { display: flex; flex-direction: column; gap: 10px; }
.ov-eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ov-eyebrow {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low);
}
.ov-eyebrow-link { font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
.ov-empty { color: var(--text-low); font-size: 14px; margin: 0; padding: 4px 2px; }

/* Right-rail stat strip — three rows split by hairlines. */
.ov-stats {
    background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: var(--radius-card); overflow: hidden;
}
.ov-stat { padding: 14px 16px; }
.ov-stat + .ov-stat { border-top: 1px solid var(--border); }
.ov-stat-value {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    line-height: 1.1; letter-spacing: -0.01em; color: var(--text);
}
.ov-stat-label {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-low); margin-top: 3px;
}
.ov-stat-ok .ov-stat-value { color: var(--status-ok); }

/* Open-issues preview card — the whole card links to the board. */
.ov-issues {
    display: block; padding: 2px 14px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
    color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ov-issues:hover { border-color: var(--border); background: var(--bg-subtle); }
.ov-issue { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.ov-issue + .ov-issue { border-top: 1px solid var(--border-subtle); }
.ov-issue-dot {
    flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--status-ok); box-sizing: border-box;
}
.ov-issue-title {
    flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 14.5px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-issue-meta { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.ov-issue-pill {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 10px;
    padding: 2px 8px; border-radius: 999px;
}
.ov-pill-active { color: var(--accent); background: var(--accent-tint); }

/* Todo list on the workspace overview — inline composer + checkbox rows. */
.todo-composer {
    display: flex; gap: 8px; align-items: center;
}
.todo-input {
    flex: 1; min-width: 0;
    padding: 8px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text); font-family: var(--font-ui); font-size: 14px;
}
.todo-input:focus { outline: none; border-color: var(--accent); }
.todo-list { display: flex; flex-direction: column; gap: 2px; }
.todo-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius);
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.todo-row:hover { border-color: var(--border); background: var(--bg-subtle); }
.todo-row.is-editing { flex-wrap: wrap; gap: 8px; }
.todo-check {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    cursor: pointer; margin: 0;
}
.todo-check input[type="checkbox"] {
    flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent);
    cursor: pointer;
}
.todo-title {
    font-family: var(--font-ui); font-size: 14px; color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-title.is-done {
    text-decoration: line-through; color: var(--text-low);
}
.todo-edit-input {
    flex: 1; min-width: 0;
    padding: 6px 10px; border-radius: var(--radius);
    border: 1px solid var(--accent); background: var(--bg-panel);
    color: var(--text); font-family: var(--font-ui); font-size: 14px;
}
.todo-edit-input:focus { outline: none; }
.todo-actions {
    flex-shrink: 0; display: flex; align-items: center; gap: 4px;
}
.todo-btn {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 6px;
    color: var(--text-low); cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}
.todo-btn:hover { color: var(--text); background: var(--bg-hover); }
.todo-btn .ov-icon { width: 14px; height: 14px; }

/* Repos list (multi-repo workspaces) — one row per repo, each linking to its own destination
   (local forge browser or the external remote), so rows are individual anchors inside a plain card. */
.ov-repos {
    padding: 2px 14px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.ov-repo-row {
    display: flex; align-items: center; gap: 10px; padding: 11px 0;
    color: var(--text) !important; text-decoration: none !important;
}
.ov-repo-row + .ov-repo-row { border-top: 1px solid var(--border-subtle); }
.ov-repo-name {
    flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-repo-row:hover .ov-repo-name { color: var(--accent); }
.ov-repo-type {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-low);
}
.ov-repo-type.is-local { color: var(--accent); background: var(--accent-tint); border-color: transparent; }
.ov-repo-branch, .ov-repo-sync {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
}
.ov-repo-warn {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--danger, #d1242f);
}

@media (max-width: 900px) {
    .ov-body { grid-template-columns: 1fr; }
    .ov-name { font-size: 28px; }
}

/* ── Workspaces overview (redesign) ────────────────────────────────────────────
   The /workspaces landing: a display header + primary action, then org groups —
   each a mono eyebrow with a count pill over a stack of workspace cards. Colours,
   fonts and radii all resolve from the shared tokens, so the page reverses under
   the light theme like the rest of the shell. */
.wsx-page { max-width: 1060px; margin: 0 auto; }
.wsx-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 30px; flex-wrap: wrap;
}
.wsx-title {
    font-family: var(--font-display); font-weight: 600; font-size: 32px;
    letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.wsx-sub { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; max-width: 60ch; }
.wsx-head .btn { flex-shrink: 0; }

.wsx-group { margin-bottom: 26px; }
.wsx-group-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.wsx-group-name {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
}
.wsx-group-count {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--text-muted); background: var(--bg-subtle);
    border-radius: 999px; padding: 1px 9px; min-width: 20px; text-align: center;
}

.wsx-cards { display: flex; flex-direction: column; gap: 10px; }
.wsx-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 14px 16px;
    color: var(--text) !important; text-decoration: none !important;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.wsx-card:hover { background: var(--bg-subtle); border-color: var(--border); }
.wsx-card-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.12s ease;
}
.wsx-card:hover .wsx-card-icon { border-color: var(--border); }
.wsx-card-icon svg {
    width: 20px; height: 20px; fill: none; stroke: var(--accent);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wsx-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wsx-card-top { display: flex; align-items: center; gap: 10px; }
.wsx-card-name {
    font-family: var(--font-display); font-weight: 600; font-size: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.wsx-run {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    color: var(--accent); background: var(--accent-tint);
}
.wsx-run-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    animation: pulse 1.6s ease-in-out infinite;
}
.wsx-card-src {
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wsx-card-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2px; }
.wsx-stat {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low);
}
.wsx-stat svg {
    width: 13px; height: 13px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wsx-card-chevron {
    flex-shrink: 0; width: 18px; height: 18px; color: var(--text-low);
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.wsx-card:hover .wsx-card-chevron { opacity: 1; transform: translateX(0); }
.wsx-card-chevron svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Repository detail (redesign) ──────────────────────────────────────────────
   The /repos/{id} page: an .ov-style breadcrumb + header + meta chips, the shared
   underlined tab bar (now with mono count badges), and — on the PR tab — a
   segmented Open/Merged/Closed/All filter with a search box, a card list of PRs,
   centered empty states, and the "New pull request" composer card. */
.rpx-page { max-width: 1060px; margin: 0 auto; }

/* Mono count badge riding the shared .tab bar. */
.tab-count {
    margin-left: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    color: var(--text-low); background: var(--bg-subtle);
    border-radius: 999px; padding: 0 7px;
}
.tab.active .tab-count { color: var(--accent); background: var(--accent-tint); }
/* Spec calls for an inset underline on the active tab (matches the border-bottom the
   shared .tab already draws, but explicit so the two never drift apart). */
.tab.active { box-shadow: inset 0 -2px 0 var(--accent); }

/* Segmented filter + right-aligned search. */
.rpx-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 10px;
}
.seg-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 7px;
    font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--text-muted);
    transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--bg-subtle); color: var(--text); }
.seg-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-low); }
.seg-btn.active .seg-count { color: var(--accent); }

.rpx-search { position: relative; margin-left: auto; }
.rpx-search svg {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round; pointer-events: none;
}
.rpx-search input {
    width: 220px; max-width: 100%; background: var(--bg-terminal); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px 8px 32px;
    font-family: var(--font-ui); font-size: 13px;
}
.rpx-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rpx-search input::placeholder { color: var(--text-low); }

/* PR list — a single rounded panel of dense divider rows (matches the compact Jobs list). Rows
   separate by a top divider on each but the first; no per-row card border/gap. */
.prx-list {
    display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.prx-row {
    display: flex; align-items: center; gap: 13px;
    border-top: 1px solid var(--bg-hover); padding: 9px 16px;
    color: var(--text) !important; text-decoration: none !important;
    transition: background 0.12s ease;
}
.prx-row:first-child { border-top-color: transparent; }
.prx-row:hover { background: var(--bg-subtle); }
.prx-status { flex-shrink: 0; display: inline-flex; }
.prx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prx-title {
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prx-meta {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-low);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prx-side { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.prx-author { display: inline-flex; align-items: center; gap: 7px; }
.prx-avatar {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border);
    font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.prx-author-name { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* Mono branch pill (inset surface + git-branch glyph). Used in PR rows and the meta row. */
.branch-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-panel);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap;
}
.branch-pill svg { width: 12px; height: 12px; stroke: var(--text-low); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Centered empty state — icon tile + heading + helper copy. */
.prx-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 56px 20px;
}
.prx-empty-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle); border: 1px solid var(--border);
}
.prx-empty-icon svg { width: 26px; height: 26px; stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.prx-empty h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }
.prx-empty p { color: var(--text-muted); font-size: 14px; margin: 0; max-width: 44ch; }

/* "New pull request" composer card. */
.prx-newpr {
    margin-top: 24px; background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card); padding: 20px 22px;
}
.prx-newpr h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.prx-newpr-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.prx-branchgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.prx-branchgrid .field-label { margin-top: 0; }
.prx-branchgrid .input { margin-bottom: 0; }
.prx-arrow { display: flex; align-items: center; justify-content: center; height: 44px; color: var(--text-low); }
.prx-arrow svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.prx-newpr-actions { display: flex; gap: 10px; margin-top: 18px; }
.rpx-newbtn { margin-left: auto; flex-shrink: 0; }
.rpx-toolbar .rpx-search { margin-left: 0; }
/* Cross-repo /pulls inbox reuses the toolbar but has no "New PR" button, so let the search
   reclaim the trailing space and sit flush right. */
.rpx-toolbar-inbox .rpx-search { margin-left: auto; }
/* Tab links (the tab bar is <a> links now — keyboard-focusable, real navigation). */
.tabs { align-items: center; flex-wrap: wrap; }
.tabs .tab { display: inline-flex; align-items: center; text-decoration: none; }
.tabs .tab:hover { text-decoration: none; }

/* ── Code view (GitHub-style) ── */
.rc-controls {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.rc-branchsel { min-width: 160px; margin: 0; }
.rc-refstat { font-family: var(--font-mono); font-size: 12px; color: var(--text-low); }
.rc-refstat a { color: var(--text-muted); }
.rc-refstat a:hover { color: var(--accent); text-decoration: none; }
.rc-dot { color: var(--text-low); margin: 0 4px; }
.rc-search { position: relative; }
.rc-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round; pointer-events: none;
}
.rc-search input {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 7px 12px 7px 30px; font-family: var(--font-ui); font-size: 13px;
    width: 220px;
}
.rc-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rc-clone { position: relative; margin-left: auto; }
.rc-clone > summary { list-style: none; cursor: pointer; }
.rc-clone > summary::-webkit-details-marker { display: none; }
.rc-clone-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.rc-clone-row { display: flex; gap: 8px; align-items: center; }
.rc-clone-row .input { margin: 0; }
.rc-clone-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-low); }
.rc-clone-warn { margin: 6px 0 0; font-size: 12px; color: var(--status-wait); }
.rc-clone-pop .field-label { margin-top: 12px; }
.rc-clone-pop .field-label:first-child { margin-top: 0; }
.rc-clone-dl { display: inline-flex; align-items: center; gap: 6px; }
.rc-clone-dl svg { width: 14px; height: 14px; fill: none; }

.rc-crumbs { font-family: var(--font-mono); font-size: 13px; margin-bottom: 12px; }
.rc-crumbs a { color: var(--accent); }
.rc-crumb-cur { color: var(--text); }

.rc-commitbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 10px 10px 0 0; border-bottom: none;
    font-size: 13px;
}
.rc-commit-author { font-weight: 600; color: var(--text); }
.rc-commit-msg { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rc-commit-sha { color: var(--text-low); }
.rc-commit-time { color: var(--text-low); font-size: 12px; }
.rc-commit-count {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.rc-commit-count svg { width: 14px; height: 14px; stroke: var(--text-low); stroke-width: 2; fill: none; }
.rc-commit-count:hover { color: var(--accent); text-decoration: none; }

.rc-files {
    border: 1px solid var(--border); border-radius: 0 0 10px 10px; overflow: hidden;
}
.rc-file {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-top: 1px solid var(--border-subtle); font-size: 13.5px; color: var(--text);
}
.rc-files > .rc-file:first-child { border-top: none; }
a.rc-file:hover { background: var(--bg-subtle); text-decoration: none; }
.rc-file-icon { display: inline-flex; width: 18px; flex-shrink: 0; color: var(--text-low); }
.rc-file-icon svg { width: 18px; height: 18px; stroke-width: 1.6; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rc-icon-dir { color: var(--accent); }
.rc-file-name { flex-shrink: 0; min-width: 160px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rc-file .rc-file-name { color: var(--text); }
a.rc-file:hover .rc-file-name { color: var(--accent); }
.rc-file-msg { flex: 1; min-width: 0; color: var(--text-low); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-file-time { flex-shrink: 0; color: var(--text-low); font-family: var(--font-mono); font-size: 11.5px; }
.rc-file-up .rc-file-icon { font-size: 16px; align-items: center; justify-content: center; }
.rc-empty { padding: 30px 0; }

/* ── Commits sub-view — a dense, GitHub-style history list grouped by calendar day ─────────
   A sub-view of Code (Code tab stays highlighted); surfaces/borders track the theme tokens. */
.rcm-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.rcm-toolbar-left, .rcm-toolbar-right { display: flex; align-items: center; gap: 12px; }
.rcm-branch { position: relative; display: inline-flex; align-items: center; }
.rcm-branch-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; stroke: var(--text-muted); stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.rcm-branch-sel {
    appearance: none; -webkit-appearance: none;
    background: var(--bg-panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 30px 7px 32px; font-family: var(--font-display); font-weight: 600; font-size: 13px;
    cursor: pointer;
    /* chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3A793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px;
}
.rcm-branch-sel:hover { border-color: var(--text-low); }
.rcm-branch-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rcm-count { font-size: 12.5px; color: var(--text-low); white-space: nowrap; }

.rcm-search { position: relative; }
.rcm-search svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round; pointer-events: none;
}
.rcm-search input {
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: 7px 12px 7px 30px; font-family: var(--font-ui); font-size: 13px;
    width: 220px;
}
.rcm-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.btn-outline {
    color: var(--text-muted); border-color: var(--border); background: transparent;
}
.btn-outline:hover { background: var(--bg-subtle); border-color: var(--text-low); color: var(--text); }

/* Day group — a small date header outside the card, then one bordered card of rows. */
.rcm-group { margin-bottom: 20px; }
.rcm-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 4px; }
.rcm-node {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
}
.rcm-node svg {
    width: 18px; height: 18px; stroke: var(--text-low); stroke-width: 2; fill: none;
    stroke-linecap: round;
}
.rcm-group-date { font-size: 12px; color: var(--text-faint); }

.rcm-card {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    background: var(--bg-panel);
}
.rcm-row {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 7px 14px;
    border-top: 1px solid var(--border-subtle);
    transition: background 0.1s ease;
}
.rcm-card > .rcm-row:first-child { border-top: none; }
.rcm-row:hover { background: var(--bg-subtle); }
/* Stretched row link — covers the whole row so it's all clickable, without nesting <a>s
   (the action buttons sit above it via a higher z-index). */
.rcm-rowlink { position: absolute; inset: 0; z-index: 0; }
.rcm-avatar {
    position: relative; z-index: 1; pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.rcm-row:hover .rcm-avatar { background: var(--bg-hover); }
.rcm-main { position: relative; z-index: 1; pointer-events: none; min-width: 0; flex: 1; }
.rcm-msg-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rcm-msg {
    font-size: 13.5px; font-weight: 500; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.rcm-row:hover .rcm-msg { color: var(--accent); }
.rcm-merge {
    flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    color: #B58FBF; background: rgba(181, 143, 191, 0.12);
    border-radius: 5px; padding: 1px 6px; line-height: 1.5;
}
.rcm-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-low); }
.rcm-side {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.rcm-sha {
    font-size: 11.5px; color: var(--text-muted);
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    border-radius: 6px; padding: 2px 7px;
}
.rcm-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: var(--text-low); cursor: pointer;
    opacity: 0; transition: opacity 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.rcm-iconbtn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rcm-iconbtn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); text-decoration: none; }
.rcm-row:hover .rcm-iconbtn, .rcm-iconbtn:focus-visible { opacity: 1; }
.rcm-more { display: flex; justify-content: center; margin: 8px 0 4px; }

@media (max-width: 640px) {
    .rcm-search input { width: 150px; }
    .rcm-iconbtn { opacity: 1; } /* no hover on touch — keep actions visible */
}

.rc-readme {
    margin-top: 22px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.rc-readme-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 16px;
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
    font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
}
.rc-readme-head svg { width: 16px; height: 16px; stroke: var(--text-low); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rc-readme-body { padding: 20px 24px; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }
.rc-readme-body h1, .rc-readme-body h2, .rc-readme-body h3 { font-family: var(--font-display); color: var(--text); margin: 1.2em 0 0.5em; }
.rc-readme-body h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.rc-readme-body h2 { font-size: 18px; }
.rc-readme-body h3 { font-size: 15.5px; }
.rc-readme-body :first-child { margin-top: 0; }
.rc-readme-body code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; }
.rc-readme-body pre { background: var(--bg-terminal); padding: 14px 16px; border-radius: 8px; overflow-x: auto; }
.rc-readme-body pre code { background: none; padding: 0; }
.rc-readme-body a { color: var(--accent); }
.rc-readme-body ul, .rc-readme-body ol { padding-left: 1.4em; }
.rc-readme-body table { border-collapse: collapse; }
.rc-readme-body th, .rc-readme-body td { border: 1px solid var(--border); padding: 6px 10px; }

/* ── File view ── */
.rc-fheader {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: var(--bg-panel); border: 1px solid var(--border); border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.rc-fheader-name { flex: 1; color: var(--text); font-size: 13.5px; font-weight: 500; }
.rc-fheader-size { color: var(--text-low); font-size: 12px; }
.rc-fileview {
    margin: 0; border: 1px solid var(--border); border-radius: 0 0 10px 10px;
    background: var(--bg-terminal); overflow-x: auto; padding: 16px 20px;
    font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
    tab-size: 4; -moz-tab-size: 4;
}
.rc-fileview-code { white-space: pre; }
.rc-fileview-binary {
    border: 1px solid var(--border); border-radius: 0 0 10px 10px;
    padding: 40px 20px; text-align: center;
}

/* ── File editor (in-browser edit + commit) ── */
.rfe-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 20px; max-width: 70ch; }
.rfe-editor { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rfe-pathbar {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.rfe-pathprefix { color: var(--text-low); font-size: 13px; }
.rfe-pathfixed { color: var(--text); font-size: 13px; }
.rfe-pathinput { margin: 0; flex: 1; max-width: 420px; font-size: 13px; }
.rfe-textarea {
    display: block; width: 100%; box-sizing: border-box; border: none; resize: vertical;
    background: var(--bg-terminal); color: var(--text); padding: 16px 20px;
    font-size: 13px; line-height: 1.6; tab-size: 4; -moz-tab-size: 4;
}
.rfe-textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.rfe-commit {
    margin-top: 20px; padding: 18px 20px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 12px;
}
.rfe-commit-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.rfe-target { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rfe-radio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); cursor: pointer; }
.rfe-radio input { margin: 0; }
.rfe-branchinput { margin: 2px 0 0 24px; max-width: 320px; font-size: 13px; }
.rfe-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.rfe-delete { margin-left: auto; }
.rfe-confirm { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* ── Actions view ── */
.ract-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ract-card {
    position: relative; padding: 16px; background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: 12px;
}
.ract-card-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.ract-card-rate { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin-top: 10px; color: var(--text); line-height: 1; }
.ract-card-rate.is-ok { color: var(--status-ok); }
.ract-card-rate.is-bad { color: var(--status-err); }
.ract-card-sub { font-size: 11.5px; color: var(--text-low); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.ract-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.ract-run { position: absolute; top: 14px; right: 14px; }
.ract-h { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 12px; }
/* Recent-runs list — same compact panel-of-divider-rows as the Jobs list. */
.ract-list {
    display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.ract-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-top: 1px solid var(--bg-hover); transition: background 0.12s ease;
}
.ract-row:first-child { border-top-color: transparent; }
.ract-row:hover { background: var(--bg-subtle); text-decoration: none; }
.ract-row-status { flex-shrink: 0; display: inline-flex; }
.ract-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ract-row-title { font-weight: 600; color: var(--text); font-size: 13px; }
.ract-row-meta { font-size: 11.5px; color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ract-row-dur { flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); }
.ract-row-time { flex-shrink: 0; font-size: 11.5px; color: var(--text-low); min-width: 64px; text-align: right; }

/* ── Branches view ── */
/* Single compact divider row per branch (matches the Jobs list): name · divergence · updated ·
   hover-revealed actions — replaces the old three-tier card so the list packs tightly. */
.rbr-list {
    display: flex; flex-direction: column;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 12px; overflow: hidden;
}
.rbr-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 16px;
    border-top: 1px solid var(--bg-hover); transition: background 0.12s ease;
}
.rbr-row:first-child { border-top-color: transparent; }
.rbr-row:hover { background: var(--bg-subtle); }
.rbr-name { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.rbr-updated { margin-left: auto; font-size: 11.5px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbr-diverge { display: flex; align-items: center; gap: 10px; width: 220px; flex-shrink: 0; }
.rbr-counts { display: flex; align-items: center; gap: 8px; font-size: 11.5px; flex-shrink: 0; }
.rbr-behind { color: var(--text-muted); }
.rbr-ahead { color: var(--status-ok); }
.rbr-base { color: var(--text-low); }
.rbr-bar { flex: 1; display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--bg-subtle); min-width: 60px; }
.rbr-bar-behind { background: var(--text-low); }
.rbr-bar-ahead { background: var(--status-ok); }
/* Actions sit on the right and reveal on hover/focus; they keep their layout width even while
   hidden so row height stays constant across the list. */
.rbr-actions {
    flex-shrink: 0; display: flex; gap: 6px;
    opacity: 0; transition: opacity 0.12s ease;
}
.rbr-row:hover .rbr-actions, .rbr-row:focus-within .rbr-actions { opacity: 1; }

/* ── New PR page ── */
.npr-form { max-width: 720px; }

@media (max-width: 760px) {
    .wsx-title { font-size: 26px; }
    .rpx-search { margin-left: 0; width: 100%; }
    .rpx-search input { width: 100%; }
    .prx-side { display: none; }
    .prx-branchgrid { grid-template-columns: 1fr; }
    .prx-arrow { height: auto; transform: rotate(90deg); margin: -2px 0; }
    .rc-search, .rc-search input { width: 100%; }
    .rc-clone { margin-left: 0; }
    .rpx-newbtn { margin-left: 0; }
    .rc-file-name { min-width: 0; max-width: 50%; }
    .rc-file-msg { display: none; }
    .ract-row-meta { white-space: normal; }
}

/* ── Repos overview + New repo ─────────────────────────────────────────────
   The local-forge landing (/repos) and its dedicated create page (/repos/new).
   Cards, the section divider and the accordion form all key off the shared
   token vars, so both light and dark themes track without hardcoded hexes. */
.repos-page { max-width: 960px; margin: 0 auto; }
.repos-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 14px;
}
.repos-head-text { min-width: 0; }
.repos-title {
    font-family: var(--font-display); font-weight: 600; font-size: 32px;
    letter-spacing: -0.02em; margin: 0;
}
.repos-intro {
    font-size: 14.5px; color: var(--text-muted); line-height: 1.65;
    margin: 12px 0 0; max-width: 600px;
}
.repos-intro strong { color: var(--text-strong); font-weight: 500; }

/* Section divider: mono eyebrow + count pill + a hairline that fills the row. */
.repos-divider { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; }
.repos-divider-label {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-faint);
}
.repos-divider-count {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-low);
    background: var(--bg-subtle); padding: 1px 8px; border-radius: 999px;
}
.repos-divider-rule { flex: 1; height: 1px; background: var(--border-subtle); }

/* Hosted-repo cards — clickable rows into the repo detail page. */
.repos-list { display: flex; flex-direction: column; gap: 12px; }
.repo-item {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 14px; padding: 18px 20px; cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.repo-item:hover { background: var(--bg-subtle); border-color: var(--border); }
.repo-item-tile {
    width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 11px;
}
.repo-item-tile svg {
    width: 22px; height: 22px; stroke: var(--accent); stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.repo-item-body { min-width: 0; flex: 1; }
.repo-item-name {
    font-family: var(--font-display); font-weight: 600; font-size: 16px;
    color: var(--text); transition: color 0.12s ease;
}
.repo-item:hover .repo-item-name { color: var(--accent); }
.repo-item-meta { display: flex; align-items: center; gap: 14px; margin-top: 7px; flex-wrap: wrap; }
.repo-item-branch {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.repo-item-branch svg {
    width: 13px; height: 13px; stroke: var(--text-muted); stroke-width: 1.8;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.repo-item-prs { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.repo-item-chevron {
    flex-shrink: 0; width: 16px; height: 16px; color: var(--text-low);
    stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Mirror / sync status pill on a repo card — neutral by default, tinted per state. */
.repo-mirror {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 11.5px; padding: 5px 11px;
    border-radius: 999px; border: 1px solid var(--border-subtle);
    background: var(--bg-terminal); color: var(--text-faint);
}
.repo-mirror svg {
    width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.7;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.repo-mirror-ok { color: var(--status-ok); background: rgba(143, 191, 127, 0.10); border-color: rgba(143, 191, 127, 0.22); }
.repo-mirror-err { color: var(--status-err); background: rgba(232, 115, 74, 0.10); border-color: rgba(232, 115, 74, 0.22); }

/* ── New repo (dedicated page) ── */
.repos-new-page { max-width: 720px; margin: 0 auto; }
.repos-new-title {
    font-family: var(--font-display); font-weight: 600; font-size: 28px;
    letter-spacing: -0.02em; margin: 0;
}
.repos-new-sub {
    font-size: 14px; color: var(--text-faint); line-height: 1.6;
    margin: 10px 0 0; max-width: 560px;
}
.repos-form-card {
    background: var(--bg-panel); border: 1px solid var(--border-subtle);
    border-radius: 16px; padding: 26px 28px; margin-top: 26px;
}
.repos-field { margin-bottom: 22px; }
.repos-field + .repos-field { margin-bottom: 24px; }
/* Reset the shared field-label top margin — the first field hugs the card top. */
.repos-form-card .field-label { margin-top: 0; }
.repos-form-card .input { margin-bottom: 0; }

/* Collapsible remote sections — native <details>, custom chevron rotation. */
.repos-acc {
    border: 1px solid var(--border-subtle); border-radius: 11px; overflow: hidden;
    margin-bottom: 12px; transition: border-color 0.12s ease;
}
.repos-acc:hover { border-color: var(--border); }
/* The last accordion (Mirror) carries extra space before the action row. */
.repos-acc:last-of-type { margin-bottom: 26px; }
.repos-acc > summary {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px;
    cursor: pointer; list-style: none;
}
.repos-acc > summary::-webkit-details-marker { display: none; }
.repos-acc > summary::marker { content: ""; }
.repos-acc-chevron {
    width: 16px; height: 16px; flex-shrink: 0; color: var(--text-faint);
    stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.15s ease;
}
.repos-acc[open] .repos-acc-chevron { transform: rotate(90deg); }
.repos-acc-icon {
    width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.repos-acc-icon-pull { stroke: var(--private); }
.repos-acc-icon-mirror { stroke: var(--status-ok); }
.repos-acc-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.repos-acc-tag {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-low);
    background: var(--bg-subtle); border: 1px solid var(--border-subtle);
    padding: 2px 9px; border-radius: 999px; margin-left: 6px;
}
.repos-acc-body { padding: 4px 16px 18px; border-top: 1px solid var(--border-subtle); }
.repos-acc-body .field-label { margin-top: 0; }
.repos-acc-field { margin: 16px 0; }
.repos-acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.repos-acc-note { font-size: 12.5px; color: var(--text-low); line-height: 1.55; margin: 14px 0 0; }
.repos-acc .check-label { margin: 0; }
.repos-acc .check-label input { accent-color: var(--accent); width: 16px; height: 16px; }

@media (max-width: 640px) {
    .repos-acc-grid { grid-template-columns: 1fr; }
}