/* ==========================================================================
   Baark design system
   One set of tokens for every page, dark and light. Dark is the default (the
   theme switch, [data-theme], selects light): a deep, low-saturation indigo
   shared with the cockpit (command.css), soft lavender for actions, and
   restrained status and authorship colours. People are cyan, AI is violet,
   as in the cockpit. Status and authorship colours are tokens, so meaning
   never depends on one theme, and text pairings keep at least 4.5:1 contrast.
   ========================================================================== */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/live/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #f6f7fb; --panel: #ffffff; --panel-2: #f0f1f8; --panel-3: #e5e7f2;
  --line: #e1e3ef; --line-strong: #c9ccdf;
  --ink: #141629; --ink-2: #3c4062; --ink-3: #5f6488;
  --accent: #5b46c9; --accent-soft: #5b46c914;
  --link: #3552c8; --focus: #5b46c9;
  --primary: #2c2774; --primary-hover: #3b3594; --primary-ink: #ffffff;
  --ok: #17805a; --ok-bg: #e5f4ee; --warn: #93620a; --warn-bg: #fbf2de;
  --danger: #c0344a; --danger-bg: #fcebee;
  --code-bg: #fbfbfe; --hl: #fff1c2; --hl-strong: #ffe38a;
  --ai: #7a3fd1; --ai-soft: #7a3fd114;
  /* Review status: greens (tested a lime shade of reviewed), amber, rose;
     kept apart from authorship's cyan and violet. */
  --st-reviewed: #17805a; --st-tested: #5a7d16; --st-pending: #a8730a; --st-unreviewed: #c0344a;
  /* Authorship: people cyan, AI violet (as in the cockpit) */
  --au-human: #1b72b0; --au-ai: #7a3fd1;
  /* Diff */
  --diff-add-bg: #e9f6ef; --diff-add-strong: #cdebd9; --diff-add-ink: #14653e;
  --diff-del-bg: #fcedef; --diff-del-strong: #f5cdd3; --diff-del-ink: #a02a3c;
  --fold-bg: #f0f1f8;
  /* Labels */
  --tag-blue: #2d55b8; --tag-blue-bg: #e8eeff; --tag-green: #17805a; --tag-green-bg: #e3f4ec;
  --tag-gold: #8a5a00; --tag-gold-bg: #faf0d8; --tag-purple: #6a3fc0; --tag-purple-bg: #efe9ff;
  --tag-suggested: #3f6f86; --tag-suggested-bg: #e6f1f6;
  /* Syntax */
  --sx-text: #2a2e4a; --sx-kw: #8a3fb0; --sx-str: #1d7a4e; --sx-com: #6d7293; --sx-num: #a85a12;
  --sx-fn: #2459b8; --sx-ty: #8a6200; --sx-con: #a85a12; --sx-dec: #5b5fa8; --sx-bi: #2b6f96; --sx-mac: #2b6f96;
  /* Type, space, shape, motion */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --serif: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: .72rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-lg: 1rem;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  --r-sm: 7px; --r-md: 11px; --r-lg: 16px;
  --shadow-1: 0 1px 2px rgb(20 22 41 / .06), 0 1px 1px rgb(20 22 41 / .04);
  --shadow-2: 0 14px 36px -16px rgb(20 22 41 / .3), 0 2px 6px rgb(20 22 41 / .06);
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: 160ms;
  --bar-h: 3.4rem; --row-h: 20px;
  color-scheme: light;
}
/* Dark: the default (theme.js sets [data-theme="dark"] unless light was
   chosen); the media query covers a page before the script runs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080a15; --panel: #0e1120; --panel-2: #151a2d; --panel-3: #1c2238;
    --line: #1d2238; --line-strong: #2b3252;
    --ink: #e6e9f6; --ink-2: #aab1d0; --ink-3: #7d85a9;
    --accent: #b4a7ff; --accent-soft: #b4a7ff1c;
    --link: #9db4ff; --focus: #a99bff;
    --primary: #b9adff; --primary-hover: #cbc2ff; --primary-ink: #0d0b22;
    --ok: #5cd3a5; --ok-bg: #0f2622; --warn: #edb661; --warn-bg: #2a2214;
    --danger: #ff8697; --danger-bg: #2c1521;
    --code-bg: #0a0d19; --hl: #3a3416; --hl-strong: #57491d;
    --ai: #b58cff; --ai-soft: #b58cff1c;
    --st-reviewed: #5cd3a5; --st-tested: #b6d47a; --st-pending: #e7b766; --st-unreviewed: #f0899a;
    --au-human: #6cc6f2; --au-ai: #b58cff;
    --diff-add-bg: #0e2320; --diff-add-strong: #143a31; --diff-add-ink: #93dcb8;
    --diff-del-bg: #26141f; --diff-del-strong: #3f1d2d; --diff-del-ink: #ffb0bb;
    --fold-bg: #10142a;
    --tag-blue: #a3bcff; --tag-blue-bg: #18213f; --tag-green: #87dcb7; --tag-green-bg: #10261f;
    --tag-gold: #ecc06d; --tag-gold-bg: #2a2214; --tag-purple: #c9b6ff; --tag-purple-bg: #221c41;
    --tag-suggested: #9fd0e4; --tag-suggested-bg: #11283a;
    --sx-text: #cdd2ea; --sx-kw: #d6a2e8; --sx-str: #9bd6b1; --sx-com: #737a9f; --sx-num: #e9b98c;
    --sx-fn: #92c3f2; --sx-ty: #e3cd92; --sx-con: #e9b98c; --sx-dec: #a9b2e6; --sx-bi: #86cbe0; --sx-mac: #86cbe0;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
    --shadow-2: 0 20px 48px -20px rgb(0 0 0 / .75), 0 2px 8px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #080a15; --panel: #0e1120; --panel-2: #151a2d; --panel-3: #1c2238;
  --line: #1d2238; --line-strong: #2b3252;
  --ink: #e6e9f6; --ink-2: #aab1d0; --ink-3: #7d85a9;
  --accent: #b4a7ff; --accent-soft: #b4a7ff1c;
  --link: #9db4ff; --focus: #a99bff;
  --primary: #b9adff; --primary-hover: #cbc2ff; --primary-ink: #0d0b22;
  --ok: #5cd3a5; --ok-bg: #0f2622; --warn: #edb661; --warn-bg: #2a2214;
  --danger: #ff8697; --danger-bg: #2c1521;
  --code-bg: #0a0d19; --hl: #3a3416; --hl-strong: #57491d;
  --ai: #b58cff; --ai-soft: #b58cff1c;
  --st-reviewed: #5cd3a5; --st-tested: #b6d47a; --st-pending: #e7b766; --st-unreviewed: #f0899a;
  --au-human: #6cc6f2; --au-ai: #b58cff;
  --diff-add-bg: #0e2320; --diff-add-strong: #143a31; --diff-add-ink: #93dcb8;
  --diff-del-bg: #26141f; --diff-del-strong: #3f1d2d; --diff-del-ink: #ffb0bb;
  --fold-bg: #10142a;
  --tag-blue: #a3bcff; --tag-blue-bg: #18213f; --tag-green: #87dcb7; --tag-green-bg: #10261f;
  --tag-gold: #ecc06d; --tag-gold-bg: #2a2214; --tag-purple: #c9b6ff; --tag-purple-bg: #221c41;
  --tag-suggested: #9fd0e4; --tag-suggested-bg: #11283a;
  --sx-text: #cdd2ea; --sx-kw: #d6a2e8; --sx-str: #9bd6b1; --sx-com: #737a9f; --sx-num: #e9b98c;
  --sx-fn: #92c3f2; --sx-ty: #e3cd92; --sx-con: #e9b98c; --sx-dec: #a9b2e6; --sx-bi: #86cbe0; --sx-mac: #86cbe0;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: 0 20px 48px -20px rgb(0 0 0 / .75), 0 2px 8px rgb(0 0 0 / .35);
  color-scheme: dark;
}

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font: 650 clamp(1.55rem, 3vw, 2.3rem)/1.15 var(--serif); letter-spacing: -.025em; margin-bottom: var(--sp-3); }
h2 { font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: var(--sp-2); }
h3 { font-size: 1rem; margin-bottom: var(--sp-2); }
code, pre, kbd, samp { font-family: var(--mono); font-size: .92em; }
pre { overflow: auto; }
hr { border: 0; border-top: 1px solid var(--line); }
main { width: min(92rem, calc(100% - 2rem)); margin: 0 auto; padding: var(--sp-6) 0 5rem; display: grid; gap: var(--sp-6); }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-3); }
.eyebrow { margin: 0 0 var(--sp-1); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--link) 28%, transparent); }

/* ---- Forms -------------------------------------------------------------- */
form { display: grid; gap: var(--sp-2); }
label { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
input, textarea, select { font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .5rem .65rem; min-width: 0; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .8; }
textarea { resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 1rem; height: 1rem; padding: 0; }
.checkbox { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); margin: 0; }
legend { padding: 0 .35rem; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.filter-input { width: 100%; padding: .45rem .7rem; border-radius: var(--r-md); }
.help-text { color: var(--ink-3); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }

/* ---- Buttons -------------------------------------------------------------- */
button, .button { font: inherit; font-size: var(--fs-md); font-weight: 600; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .85rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 80ms var(--ease), box-shadow var(--dur) var(--ease); }
button:hover, .button:hover { border-color: var(--ink-3); background: var(--panel-2); text-decoration: none; }
button:active, .button:active { transform: translateY(1px); }
button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
form button[type="submit"]:not([class]), form > button:not([class]), .button-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow-1); }
form button[type="submit"]:not([class]):hover, form > button:not([class]):hover, .button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-ink); }
.button-muted, .button-quiet { background: transparent; border-color: var(--line); color: var(--ink-2); }
.button-muted:hover, .button-quiet:hover { background: var(--panel-2); color: var(--ink); }
.button-ghost, button.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.button-ghost:hover, button.ghost:hover { background: var(--panel-2); }
.button-danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.button-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.button-small { padding: .3rem .6rem; font-size: var(--fs-sm); }
.button-block { width: 100%; padding: .7rem 1rem; font-size: var(--fs-lg); }
.icon-button { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: var(--r-sm); background: transparent; border-color: transparent; color: var(--ink-2); font-size: 1rem; }
.icon-button:hover { background: var(--panel-2); color: var(--ink); }
.icon-button-small { width: 1.5rem; height: 1.5rem; font-size: .9rem; }
.is-pending { position: relative; color: transparent !important; }
.is-pending::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid var(--primary-ink); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.button-quiet.is-pending::after, .button-danger.is-pending::after { border-color: var(--ink-2); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Chips, badges, labels -------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); background: var(--panel); }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--link) 16%, var(--panel)); border-color: var(--link); color: var(--ink); }
.chip-small { padding: .1rem .5rem; font-size: var(--fs-xs); }
.chip-warn { color: var(--warn) !important; border-color: var(--warn); }
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-draft { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.badge-ai { background: color-mix(in srgb, var(--au-ai) 16%, transparent); color: var(--au-ai); }
.badge-human { background: color-mix(in srgb, var(--au-human) 16%, transparent); color: var(--au-human); }
.badge-dep { background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); }
.badge-dependent { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.count-pill { margin-left: .35rem; padding: .02rem .45rem; border-radius: 999px; background: var(--accent); color: var(--panel); font-size: var(--fs-xs); font-weight: 700; }
.label { display: inline-flex; align-items: center; padding: 0 .4rem; border-radius: 4px; border: 0; border-left: 3px solid var(--tag-blue); background: var(--tag-blue-bg); color: var(--tag-blue); font: 600 var(--fs-xs)/1.6 var(--sans); cursor: pointer; }
.label--green { border-color: var(--tag-green); background: var(--tag-green-bg); color: var(--tag-green); }
.label--gold { border-color: var(--tag-gold); background: var(--tag-gold-bg); color: var(--tag-gold); }
.label--purple { border-color: var(--tag-purple); background: var(--tag-purple-bg); color: var(--tag-purple); }
.label--suggested { border-color: var(--tag-suggested); background: var(--tag-suggested-bg); color: var(--tag-suggested); }
.sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -1px; }
.sw-reviewed { background: var(--st-reviewed); } .sw-tested { background: var(--st-tested); }
.sw-pending { background: var(--st-pending); } .sw-unreviewed { background: var(--st-unreviewed); }
.sw-human { background: var(--au-human); }
.sw-ai { background: repeating-linear-gradient(135deg, var(--au-ai) 0 3px, color-mix(in srgb, var(--au-ai) 45%, transparent) 3px 5px); }
.sw-dep { background: var(--link); } .sw-dependent { background: var(--warn); }
.swatch { width: .6rem; height: .6rem; border-radius: 2px; }
.swatch-ai { background: var(--ai); }

/* ---- Surfaces ------------------------------------------------------------- */
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.card-header h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: .01em; }
.card-note { color: var(--ink-3); font-size: var(--fs-sm); margin: var(--sp-2) 0; }
.notice { margin: 0; padding: .65rem .85rem; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-bg); color: var(--ink); font-size: var(--fs-md); }
.notice-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-bg); color: var(--danger); }
.notice-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-bg); }
details { margin-top: var(--sp-3); }
summary { cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: var(--fs-md); }
summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: var(--sp-2); }
dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
dt { color: var(--ink-3); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts { grid-template-columns: auto 1fr; }
progress, .meter { appearance: none; -webkit-appearance: none; width: 100%; height: .45rem; border: 0; border-radius: 999px; background: var(--panel-3); overflow: hidden; accent-color: var(--st-reviewed); }
progress::-webkit-progress-bar { background: var(--panel-3); border-radius: 999px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--st-tested), var(--st-reviewed)); border-radius: 999px; transition: width .4s var(--ease); }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--st-tested), var(--st-reviewed)); border-radius: 999px; }
.segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); }
.segmented button { border: 0; background: transparent; padding: .3rem .65rem; font-size: var(--fs-sm); color: var(--ink-2); border-radius: 4px; box-shadow: none; }
.segmented button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1); }
.segmented button:hover:not(:disabled) { color: var(--ink); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.segmented-small button { padding: .15rem .5rem; min-width: 1.6rem; }
.empty-state { max-width: 40rem; margin: 10vh auto; text-align: center; color: var(--ink-2); }
.empty-state h1 { color: var(--ink); }

/* ---- Application bar ---------------------------------------------------- */
.app-bar, .repo-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-4); height: var(--bar-h); padding: 0 clamp(1rem, 2.5vw, 1.75rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
.app-brand, .repo-brand { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink) !important; font: 700 1.1rem/1 var(--sans); text-decoration: none !important; letter-spacing: -.01em; }
.app-mark { color: var(--accent); }
.app-repository { color: var(--ink-2); font: 600 var(--fs-md)/1 var(--mono); text-decoration: none; padding: .3rem .55rem; border-radius: var(--r-sm); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-repository:hover { background: var(--panel-2); color: var(--ink); }
.app-nav, .repo-bar nav { display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a, .app-within, .repo-bar nav a { position: relative; color: var(--ink-2); padding: .4rem .7rem; border-radius: 999px; font-size: var(--fs-md); font-weight: 500; text-decoration: none; white-space: nowrap; }
.app-nav a:hover, .repo-bar nav a:hover { background: var(--panel-2); color: var(--ink); }
.app-nav a[aria-current="page"], .app-within, .repo-bar nav a[aria-current="page"] { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.app-bar .app-nav a, .app-bar .app-repository { color: var(--ink-2); text-decoration: none; }
.app-bar .app-nav a[aria-current="page"] { color: var(--ink); }
.app-bar .app-repository:hover, .app-bar .app-nav a:hover { color: var(--ink); text-decoration: none; }
.app-bar .icon-button { background: transparent; border-color: transparent; border-radius: var(--r-sm); padding: 0; }
.app-bar .icon-button:hover { background: var(--panel-2); }
.app-bar .button-ghost { background: transparent; border-color: transparent; border-radius: var(--r-sm); padding: .3rem .6rem; }
.app-bar .button-ghost:hover { background: var(--panel-2); }
.app-within::before { content: "› "; color: var(--ink-3); }
.app-actions { display: flex; align-items: center; gap: var(--sp-1); }
.app-signout { display: block; }
.app-signout button, .app-signout .button { white-space: nowrap; }
/* An anonymous visitor's bar (chrome::for_visitor): Sign in, and nothing
   that needs a session. */
.app-bar-visitor .session-only, .app-bar:not(.app-bar-visitor) .visitor-only { display: none; }
.theme-toggle[data-theme-current="dark"] svg { transform: rotate(180deg); }
.theme-toggle svg { transition: transform .3s var(--ease); }

/* ---- Toasts and dialogs ------------------------------------------------- */
.toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60; display: grid; gap: var(--sp-2); width: min(24rem, calc(100vw - 2rem)); }
.toast { display: flex; align-items: center; gap: var(--sp-2); padding: .6rem .7rem .6rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-2); font-size: var(--fs-md); animation: toast-in .22s var(--ease) both; }
.toast > span { flex: 1; }
.toast--success { border-left: 4px solid var(--ok); }
.toast--error { border-left: 4px solid var(--danger); }
.toast--warn { border-left: 4px solid var(--warn); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialog { width: min(38rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 3rem)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-2); }
.dialog-wide { width: min(64rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgb(5 7 18 / .55); backdrop-filter: blur(3px); }
.dialog[open] { animation: toast-in .2s var(--ease) both; }
.dialog-form { padding: var(--sp-5); gap: var(--sp-3); }
.dialog-form h2 { font: 400 1.5rem/1.2 var(--serif); margin: 0; }
.dialog-actions, .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.file-picker { display: grid; gap: var(--sp-2); }
.file-picker-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.file-picker-tools .filter-input { flex: 1 1 12rem; }
.file-picker-list { list-style: none; margin: 0; padding: var(--sp-1); max-height: 16rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--code-bg); }
.file-picker-list label { display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem; border-radius: 4px; font-weight: 400; color: var(--ink); cursor: pointer; }
.file-picker-list label:hover { background: var(--panel-2); }
.file-picker-list code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.editor-text { width: 100%; min-height: 55vh; font: .84rem/1.6 var(--mono); white-space: pre; tab-size: 4; }
.inline-form { display: grid; gap: var(--sp-2); }


/* ---- Agents page and shared legacy views ---- */
.repository-heading code { display: block; overflow-wrap: anywhere; color: var(--link); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.25rem; }
.section-heading > span { color: var(--ink-3); }
.artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: .85rem; }
.artifact-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); min-width: 0; }
.artifact-card--default { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok-bg) inset; }
.artifact-card h3 { margin: .85rem 0 .35rem; }
.artifact-card > p { color: var(--ink-3); font-size: .85rem; }
.artifact-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.artifact-badges span { padding: .22rem .45rem; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.login-card, .path-browser, .file-view { max-width: 62rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.login-card { width: min(34rem, 100%); margin: 8vh auto 0; }
.state-line { color: var(--ink-3); overflow-wrap: anywhere; }
.state-line code { color: var(--link); }
.source-text { max-height: 44rem; overflow: auto; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--code-bg); color: var(--ink-2); white-space: pre; tab-size: 4; }
.source-text code { font: .84rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.editor { margin-top: 1rem; }
.editor textarea { min-height: 22rem; resize: vertical; font: .84rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.native-history { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.native-history-entry { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--panel); }
.native-history-entry small { display: block; color: var(--ink-3); margin-top: .25rem; overflow-wrap: anywhere; }
.native-history-entry > code { color: var(--link); }
.history-sequence { color: var(--accent); font-weight: 800; }
.agent-workspace { width: min(76rem, calc(100% - 2rem)); gap: 1.4rem; padding-top: 1.25rem; }
.agent-heading { max-width: 65rem; }
.agent-heading h1 { margin: 0 0 .45rem; font-size: clamp(1.5rem, 3vw, 1.85rem); letter-spacing: -.03em; }
.agent-heading .eyebrow { margin-bottom: .3rem; }
.pipeline-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .45rem; color: var(--ink-2); font-size: .84rem; font-weight: 650; }
.pipeline-line b { color: var(--accent); }
.agent-overview, .agent-sponsor, .agent-ledger { max-width: 62rem; padding: .8rem 0 0; border-top: 1px solid var(--line); }
.agent-prompt { max-width: 65ch; font-size: .94rem; line-height: 1.5; color: var(--ink-2); }
.agent-facts { max-width: 62rem; }
.agent-policy { max-width: 48rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.agent-policy form { margin-top: 1rem; }
.agent-policy fieldset { display: grid; gap: .65rem; margin: .3rem 0; padding: .85rem; border: 1px solid var(--line-strong); border-radius: .45rem; }
.agent-policy fieldset label { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.agent-policy input[type="checkbox"] { width: 1rem; height: 1rem; padding: 0; accent-color: var(--ok); }
.agent-artifacts { display: grid; gap: 1rem; }
.agent-artifact { max-width: 70rem; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.agent-artifact:first-child { border-top: 0; padding-top: 0; }
.agent-artifact h3 { margin: .85rem 0 .4rem; font-size: 1.45rem; letter-spacing: -.02em; }
.agent-artifact h4 { margin: .85rem 0 .4rem; font-size: .78rem; color: var(--ink-2); letter-spacing: .04em; }
.agent-summary { max-width: 68ch; color: var(--ink-2); line-height: 1.55; }
.agent-assessment { max-width: 68ch; padding-left: .8rem; border-left: 2px solid var(--accent); color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.semantic-tags, .agent-checks ul, .patch-dag ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.semantic-color { --semantic-color: var(--line-strong); --semantic-tint: var(--panel-2); --semantic-text: var(--ink-2); }
.semantic-tag { padding: .6rem .75rem; border-left: 3px solid var(--semantic-color); background: var(--semantic-tint); }
.semantic-tag a { display: block; color: var(--ink-2); text-decoration: none; }
.semantic-tag a:hover { color: var(--ok); }
.semantic-tag small, .agent-checks small { display: block; margin-top: .35rem; color: var(--ink-3); line-height: 1.4; }
.semantic-tag--feature { --semantic-color: var(--accent); --semantic-tint: var(--ok-bg); --semantic-text: var(--ok); }
.semantic-tag--fix { --semantic-color: var(--tag-gold); --semantic-tint: var(--tag-gold-bg); --semantic-text: var(--tag-gold); }
.semantic-tag--test { --semantic-color: var(--tag-blue); --semantic-tint: var(--tag-blue-bg); --semantic-text: var(--tag-blue); }
.semantic-tag--review { --semantic-color: var(--tag-purple); --semantic-tint: var(--tag-purple-bg); --semantic-text: var(--tag-purple); }
.artifact-badges .semantic-color { background: var(--semantic-tint); color: var(--semantic-text); box-shadow: inset 0 0 0 1px var(--semantic-color); }
.artifact-sources { display: grid; gap: .85rem; }
.artifact-source { min-width: 0; }
.artifact-source h5 { margin: 0 0 .35rem; color: var(--ink-2); font-size: .78rem; }
.artifact-source { margin-top: .45rem; }
.artifact-source .source-text { max-height: 18rem; padding: .6rem 0; border-radius: .35rem; }
.source-line { display: grid; grid-template-columns: 3rem minmax(0, max-content) minmax(0, 1fr); min-width: max-content; }
.source-line-number { padding: 0 .55rem; color: var(--ink-3); text-align: right; user-select: none; }
.source-line-tags { display: flex; align-items: start; gap: .25rem; padding-right: .45rem; }
.source-tag-label { display: inline-block; padding: 0 .28rem; border-left: 2px solid var(--semantic-color); background: var(--semantic-tint); color: var(--semantic-text); font: 700 .65rem/1.6 ui-sans-serif, system-ui, sans-serif; letter-spacing: .03em; }
.source-line-text { min-width: 0; }
.source-line.semantic-color { box-shadow: inset 3px 0 var(--semantic-color); background: var(--semantic-tint); }
[data-agent-semantic="off"] .agent-source, [data-agent-semantic="off"] .source-line-tags { display: none; }
[data-agent-semantic="off"] .source-line.semantic-color { box-shadow: none; background: transparent; }
.source-line--add { background: var(--diff-add-bg); }
.source-line--delete { background: var(--diff-del-bg); }
.patch-dag-visual { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); max-width: 52rem; }
.patch-dag-visual svg { width: 1.5rem; height: 100%; overflow: visible; stroke: var(--line-strong); stroke-width: 1.5; }
.patch-dag-visual ol { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.patch-dag-visual li { min-width: 0; padding: .4rem .6rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); overflow-wrap: anywhere; }
.patch-node-index { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-right: .45rem; border: 1px solid var(--accent); color: var(--ok); font: 700 .7rem ui-monospace, monospace; }
.patch-dag-visual a { color: var(--link); }
.patch-dag a { color: var(--link); }
.agent-checks li { padding: .5rem .65rem; background: var(--panel); color: var(--ink-2); }
.agent-runs { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.agent-run { display: grid; gap: .85rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.agent-run h3 { max-width: 65ch; margin: .5rem 0 .3rem; font-size: 1rem; font-weight: 650; }
.agent-run p { margin-bottom: .35rem; color: var(--ink-3); font-size: .88rem; }
.run-status { color: var(--ok); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agent-review { max-width: 38rem; }
.agent-review textarea { min-height: 5rem; }
.agent-review { margin-top: .8rem; padding: .8rem; border-left: 3px solid var(--accent); background: var(--panel); }
.agent-review-audit { display: flex; flex-wrap: wrap; gap: .35rem .7rem; max-width: 68ch; margin: .65rem 0; padding: .55rem .7rem; border-left: 2px solid var(--line-strong); background: var(--panel); color: var(--ink-2); font-size: .82rem; }
.agent-review-audit strong { color: var(--ok); }
.agent-review-audit span { overflow-wrap: anywhere; }
.agent-diffs { margin-top: .8rem; }
.agent-ledger .agent-runs { margin-top: .8rem; }
.agent-empty { max-width: 48rem; padding: 1.15rem 0; border-top: 1px solid var(--line); color: var(--ink-3); }
.agent-empty h3 { color: var(--ink-2); margin-bottom: .4rem; }
@media (max-width: 40rem) { main { padding-top: 2rem; } .native-history-entry { grid-template-columns: 3rem 1fr; } .native-history-entry > code { grid-column: 2; } }


/* ---- Pipeline overview, presentation fallback, Changes page, launch ---- */
/* Pipeline overview rendered from the review overview lens. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.review-overview { display: grid; gap: .45rem; margin: 0 0 .8rem; padding: .6rem .75rem; border-left: 3px solid var(--line-strong); background: var(--panel); font-size: .78rem; }
.review-overview-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.review-overview-heading h2 { margin: 0; font-size: .85rem; }
.review-overview-heading p { margin: 0; color: var(--ink-3); }
.review-overview-heading p span { color: var(--ink-3); }
.review-overview-key, .review-overview-labels { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin: 0 0 0 auto; padding: 0; list-style: none; color: var(--ink-3); font-size: .7rem; }
.review-overview-key li::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .3rem; vertical-align: -.05rem; background: var(--line); }
.review-overview-key--reviewed::before { background: var(--st-reviewed) !important; }
.review-overview-key--tested::before { background: var(--st-tested) !important; }
.review-overview-progress { display: flex; align-items: center; gap: .5rem; width: 100%; }
.review-overview-progress progress { width: min(12rem, 40%); accent-color: var(--ok); }
.review-overview-key--pending::before { background: var(--st-pending) !important; }
.review-overview-key--unreviewed::before { background: var(--st-unreviewed) !important; }
.review-overview-key--ai::before { background-image: repeating-linear-gradient(135deg, transparent 0 2px, var(--ink-2) 2px 3px) !important; }
.review-overview-labels { margin: 0; }
.review-overview-label { padding: 0 .3rem; border-left: 2px solid var(--tag-blue); background: var(--tag-blue-bg); color: var(--tag-blue); }
.review-overview-files { display: grid; gap: .3rem; max-height: 14rem; margin: 0; padding: 0 .2rem 0 0; overflow: auto; list-style: none; }
.review-overview-file { display: grid; grid-template-columns: minmax(8rem, 14rem) 6.5rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.review-overview-path { min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.review-overview-path:hover { color: var(--ok); }
.review-overview-status { color: var(--ink-3); font-size: .7rem; white-space: nowrap; }
.review-overview-file--complete .review-overview-status { color: var(--ok); }
.review-overview-file--unavailable .review-overview-path, .review-overview-file--excluded .review-overview-path { color: var(--ink-3); }
.review-overview-bands { display: flex; gap: 1px; height: .85rem; margin: 0; padding: 0; list-style: none; }
.review-overview-band { flex: 1 1 0; min-width: 4px; background: var(--line); }
.review-overview-band > a, .review-overview-band > span { display: block; height: 100%; }
.review-overview-band > a:hover { outline: 1px solid var(--ink-2); outline-offset: -1px; }
.review-overview-band > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.review-overview-band--reviewed { background: var(--st-reviewed); }
.review-overview-band--tested { background: var(--st-tested); }
.review-overview-band--pending { background: var(--st-pending); }
.review-overview-band--unreviewed { background: var(--st-unreviewed); }
.review-overview-band--ai > a, .review-overview-band--ai > span { background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--panel-2) 3px 5px); }
.review-overview-band--tag-blue { box-shadow: inset 0 -2px var(--tag-blue); }
.review-overview-band--tag-green { box-shadow: inset 0 -2px var(--ok); }
.review-overview-band--tag-gold { box-shadow: inset 0 -2px var(--tag-gold); }
.review-overview-band--tag-purple { box-shadow: inset 0 -2px var(--tag-purple); }
.review-overview-band--tag-suggested { box-shadow: inset 0 -2px var(--tag-suggested); }
.review-overview-band--more { flex: 0 0 auto; background: transparent; font-size: .66rem; line-height: .85rem; }
.review-overview-band--more a { color: var(--link); }
.review-overview-more { color: var(--link); font-size: .75rem; }
/* Band widths in hundredths of a file row; a band of no step keeps only a sliver. */
.review-overview-band--w0 { flex-grow: 0; min-width: 2px; }
.review-overview-band--w1 { flex-grow: 1; } .review-overview-band--w2 { flex-grow: 2; } .review-overview-band--w3 { flex-grow: 3; } .review-overview-band--w4 { flex-grow: 4; } .review-overview-band--w5 { flex-grow: 5; } .review-overview-band--w6 { flex-grow: 6; } .review-overview-band--w7 { flex-grow: 7; } .review-overview-band--w8 { flex-grow: 8; } .review-overview-band--w9 { flex-grow: 9; } .review-overview-band--w10 { flex-grow: 10; }
.review-overview-band--w11 { flex-grow: 11; } .review-overview-band--w12 { flex-grow: 12; } .review-overview-band--w13 { flex-grow: 13; } .review-overview-band--w14 { flex-grow: 14; } .review-overview-band--w15 { flex-grow: 15; } .review-overview-band--w16 { flex-grow: 16; } .review-overview-band--w17 { flex-grow: 17; } .review-overview-band--w18 { flex-grow: 18; } .review-overview-band--w19 { flex-grow: 19; } .review-overview-band--w20 { flex-grow: 20; }
.review-overview-band--w21 { flex-grow: 21; } .review-overview-band--w22 { flex-grow: 22; } .review-overview-band--w23 { flex-grow: 23; } .review-overview-band--w24 { flex-grow: 24; } .review-overview-band--w25 { flex-grow: 25; } .review-overview-band--w26 { flex-grow: 26; } .review-overview-band--w27 { flex-grow: 27; } .review-overview-band--w28 { flex-grow: 28; } .review-overview-band--w29 { flex-grow: 29; } .review-overview-band--w30 { flex-grow: 30; }
.review-overview-band--w31 { flex-grow: 31; } .review-overview-band--w32 { flex-grow: 32; } .review-overview-band--w33 { flex-grow: 33; } .review-overview-band--w34 { flex-grow: 34; } .review-overview-band--w35 { flex-grow: 35; } .review-overview-band--w36 { flex-grow: 36; } .review-overview-band--w37 { flex-grow: 37; } .review-overview-band--w38 { flex-grow: 38; } .review-overview-band--w39 { flex-grow: 39; } .review-overview-band--w40 { flex-grow: 40; }
.review-overview-band--w41 { flex-grow: 41; } .review-overview-band--w42 { flex-grow: 42; } .review-overview-band--w43 { flex-grow: 43; } .review-overview-band--w44 { flex-grow: 44; } .review-overview-band--w45 { flex-grow: 45; } .review-overview-band--w46 { flex-grow: 46; } .review-overview-band--w47 { flex-grow: 47; } .review-overview-band--w48 { flex-grow: 48; } .review-overview-band--w49 { flex-grow: 49; } .review-overview-band--w50 { flex-grow: 50; }
.review-overview-band--w51 { flex-grow: 51; } .review-overview-band--w52 { flex-grow: 52; } .review-overview-band--w53 { flex-grow: 53; } .review-overview-band--w54 { flex-grow: 54; } .review-overview-band--w55 { flex-grow: 55; } .review-overview-band--w56 { flex-grow: 56; } .review-overview-band--w57 { flex-grow: 57; } .review-overview-band--w58 { flex-grow: 58; } .review-overview-band--w59 { flex-grow: 59; } .review-overview-band--w60 { flex-grow: 60; }
.review-overview-band--w61 { flex-grow: 61; } .review-overview-band--w62 { flex-grow: 62; } .review-overview-band--w63 { flex-grow: 63; } .review-overview-band--w64 { flex-grow: 64; } .review-overview-band--w65 { flex-grow: 65; } .review-overview-band--w66 { flex-grow: 66; } .review-overview-band--w67 { flex-grow: 67; } .review-overview-band--w68 { flex-grow: 68; } .review-overview-band--w69 { flex-grow: 69; } .review-overview-band--w70 { flex-grow: 70; }
.review-overview-band--w71 { flex-grow: 71; } .review-overview-band--w72 { flex-grow: 72; } .review-overview-band--w73 { flex-grow: 73; } .review-overview-band--w74 { flex-grow: 74; } .review-overview-band--w75 { flex-grow: 75; } .review-overview-band--w76 { flex-grow: 76; } .review-overview-band--w77 { flex-grow: 77; } .review-overview-band--w78 { flex-grow: 78; } .review-overview-band--w79 { flex-grow: 79; } .review-overview-band--w80 { flex-grow: 80; }
.review-overview-band--w81 { flex-grow: 81; } .review-overview-band--w82 { flex-grow: 82; } .review-overview-band--w83 { flex-grow: 83; } .review-overview-band--w84 { flex-grow: 84; } .review-overview-band--w85 { flex-grow: 85; } .review-overview-band--w86 { flex-grow: 86; } .review-overview-band--w87 { flex-grow: 87; } .review-overview-band--w88 { flex-grow: 88; } .review-overview-band--w89 { flex-grow: 89; } .review-overview-band--w90 { flex-grow: 90; }
.review-overview-band--w91 { flex-grow: 91; } .review-overview-band--w92 { flex-grow: 92; } .review-overview-band--w93 { flex-grow: 93; } .review-overview-band--w94 { flex-grow: 94; } .review-overview-band--w95 { flex-grow: 95; } .review-overview-band--w96 { flex-grow: 96; } .review-overview-band--w97 { flex-grow: 97; } .review-overview-band--w98 { flex-grow: 98; } .review-overview-band--w99 { flex-grow: 99; } .review-overview-band--w100 { flex-grow: 100; }
/* Structured fallback for presentation nodes no renderer is registered for. */
.presentation-fallback { display: grid; gap: .3rem; margin: .35rem 0; padding: .45rem .6rem; border-left: 2px dashed var(--line-strong); background: var(--panel); color: var(--ink-2); font-size: .78rem; }
.presentation-fallback-heading { margin: 0; color: var(--ink-3); }
.presentation-fallback-heading code { color: var(--link); }
.presentation-fallback-fields { margin: 0; }
.presentation-fallback ul { display: grid; gap: .15rem; margin: 0; padding-left: 1rem; }
.presentation-fallback-roles, .presentation-truncated, .presentation-invalid { margin: 0; color: var(--ink-3); }
.presentation-fallback-children { padding-left: .6rem; }
@media (max-width: 52rem) { .review-overview-file { grid-template-columns: minmax(0, 1fr) auto; } .review-overview-bands { grid-column: 1 / -1; } .review-overview-key { margin-left: 0; } }

/* Native repository lens shares the review application's text and controls. */
.forge { gap: 1.5rem; padding-top: 2rem; }
.forge h1 { font-size: 2rem; margin-bottom: .65rem; }
.forge h2 { font-size: 1.25rem; }
.forge-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.forge-toolbar details { position:relative; }
.forge-toolbar details[open] { padding:.75rem; border:1px solid var(--line); background:var(--panel); }
.forge form { display:grid; gap:.6rem; margin:.8rem 0; }
.forge form label { display:grid; gap:.3rem; color:var(--ink-3); font-size:.84rem; }
.forge form textarea { width:100%; min-height:5rem; }
.forge form.editor textarea { min-height:22rem; }
.forge .section-heading form { display:flex; margin:0; }
.forge-files { display:grid; grid-template-columns:minmax(12rem,21rem) minmax(0,1fr); gap:1.4rem; }
.forge-files aside { display:flex; flex-direction:column; align-items:stretch; gap:.2rem; max-height:65vh; overflow:auto; }
.forge-files aside button { text-align:left; overflow-wrap:anywhere; }
.forge-files article { min-width:0; }
.forge details { margin:.65rem 0; }
.forge summary { cursor:pointer; color:var(--ink-3); font-size:.84rem; }
.forge-change-row { display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.forge-change-row small { display:block; color:var(--ink-3); margin-top:.3rem; }
.forge-change-row button { text-align:left; }
.forge-comment { margin:.9rem 0; border-left:2px solid var(--line); padding-left:.75rem; }
.forge-comment p { white-space:pre-wrap; overflow-wrap:anywhere; }
.forge-comment small, #forge-status { color:var(--ink-3); font-size:.8rem; }
.forge-pin { display:inline-block; padding:.2rem .5rem; margin:.4rem .4rem 0 0; border:1px solid var(--line); border-radius:4px; font-size:.75rem; }
.forge-diff-add { background:var(--diff-add-bg); }
.forge-diff-delete { background:var(--diff-del-bg); }
.forge [data-panel][hidden], .forge [data-manage][hidden] { display:none; }
@media(max-width:750px) { .forge-files { grid-template-columns:1fr; } .forge-files aside { max-height:12rem; } }

/* Connected agent pipeline, impact and application launch. */
.pipeline-steps { display:flex; flex-wrap:wrap; gap:.75rem; padding:0; list-style:none; }
.pipeline-steps > li { flex:1 1 13rem; border:1px solid var(--line); border-radius:.5rem; padding:.85rem; }
.pipeline-steps > li > span { display:block; margin-top:.35rem; }
.pipeline-steps [data-step-status="failed"] { border-color:var(--danger); }
.pipeline-steps [data-step-status="reused"], .pipeline-steps [data-step-status="succeeded"] { border-color:var(--ok); }
.pipeline-steps form { margin-top:.75rem; }
.impact-link { display:inline-block; margin:.3rem 0 1rem; }
.agent-impact-cards { display:grid; gap:1rem; }
.agent-impact-card { padding:1rem; border:1px solid var(--line); border-radius:.5rem; }
.agent-impact-card h3 { margin-top:0; }
.agent-impact-locations,.agent-impact-dependencies { display:flex; flex-wrap:wrap; gap:1.25rem; }
.agent-impact a { overflow-wrap:anywhere; }
.agent-impact .source-line { display:block; }
.plain-source-line { scroll-margin-top:2rem; }
.plain-source-line:target,.agent-impact .source-line:target { background:var(--hl); outline:1px solid var(--ink-3); }


/* ---- Code (repository) page ---- */
.repo-page a { color: var(--link); text-decoration: none; }
.repo-page a:hover { text-decoration: underline; }
.repo-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.repo-page code, .repo-page pre, .repo-page kbd { font-family: var(--mono); }

.repo-page button, .repo-page .button { font: inherit; cursor: pointer; border-radius: .55rem; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); padding: .5rem .85rem; transition: background .15s, border-color .15s, transform .1s; }
.repo-page button:hover, .repo-page .button:hover { border-color: var(--ink-3); text-decoration: none; }
.repo-page button:active { transform: translateY(1px); }
.repo-page button.ghost { background: transparent; }

.repo-hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) 1.25rem; view-transition-name: repo-hero; }
.repo-kicker { margin: 0 0 .35rem; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.visibility-pill { margin-left: .5rem; padding: .05rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: none; vertical-align: 1px; }
.admin-visibility { display: grid; gap: .5rem; margin: var(--sp-3) 0; }
.admin-visibility label { display: flex; align-items: baseline; gap: .5rem; }
.admin-visibility .muted { font-size: var(--fs-sm); }
.repo-title { margin: 0; font: 400 clamp(1.8rem, 4vw, 2.8rem)/1.1 var(--serif); letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.repo-title > a { color: var(--ink) !important; }
.crumbs { font: 400 clamp(1rem, 2vw, 1.25rem)/1.3 var(--mono); color: var(--ink-3); }
.crumb { color: var(--ink-2) !important; }
.crumb:not(.crumb-current)::after { content: "/"; margin: 0 .2rem; color: var(--ink-3); }
.crumb-current { color: var(--ink); }
.repo-revision { margin: .5rem 0 0; color: var(--ink-3); font-size: .85rem; }
.repo-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.repo-stats > div { min-width: 6.5rem; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
.repo-stats dt { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.repo-stats dd { margin: .1rem 0 0; font: 600 1.25rem/1.2 system-ui; font-variant-numeric: tabular-nums; }
.share-bar { display: block; height: .3rem; margin-top: .4rem; }
.share-bar::-webkit-progress-value { background: var(--ai); }
.share-bar::-moz-progress-bar { background: var(--ai); }
@keyframes grow { from { width: 0; } }

.repo-notice { margin: 0 clamp(1rem, 3vw, 2rem) 1rem; }
.repo-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(18rem, 25rem); gap: 1.25rem; padding: 0 clamp(1rem, 3vw, 2rem) 3rem; align-items: start; }
.repo-tree, .repo-activity { position: sticky; top: 4.2rem; max-height: calc(100vh - 5rem); display: flex; flex-direction: column; gap: .6rem; padding: .9rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); min-width: 0; }
.repo-page main.repo-main { width: auto; margin: 0; padding: 0; display: grid; gap: 1rem; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { margin: 0; font: 600 .8rem/1 system-ui; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.repo-page kbd { font-size: .72rem; padding: .1rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: .35rem; color: var(--ink-3); }
.filter-input { width: 100%; padding: .55rem .75rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s; }
.filter-input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 25%, transparent); }

.tree { list-style: none; margin: 0; padding: 0; overflow: auto; font-size: .88rem; }
.tree ul { list-style: none; margin: 0; padding-left: .85rem; border-left: 1px solid var(--line); margin-left: .45rem; }
.tree summary { list-style: none; display: flex; align-items: center; gap: .35rem; padding: .22rem .35rem; border-radius: .4rem; cursor: pointer; color: var(--ink); }
.tree summary::-webkit-details-marker { display: none; }
.tree summary:hover, .tree-file:hover { background: var(--panel-2); text-decoration: none !important; }
.tree-caret { width: .5rem; height: .5rem; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .2s; flex: none; }
.tree-dir[open] > summary .tree-caret { transform: rotate(45deg); }
.tree-file { display: flex; justify-content: space-between; gap: .5rem; padding: .22rem .35rem .22rem 1.2rem; border-radius: .4rem; color: var(--ink-2) !important; }
.tree-file[aria-current="page"] { background: color-mix(in srgb, var(--link) 18%, transparent); color: var(--ink) !important; }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-size { color: var(--ink-3); font-size: .75rem; font-variant-numeric: tabular-nums; flex: none; }
.tree-empty { margin: 0; color: var(--ink-3); font-size: .85rem; }

.repo-page .card { border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); padding: 1.1rem 1.25rem; min-width: 0; animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
.repo-page .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.repo-page .card-head h2 { margin: 0; font: 600 .8rem/1 var(--mono); color: var(--ink-3); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.welcome h2 { font: 400 1.6rem/1.2 var(--serif); margin: 0 0 .5rem; }
.clone-hint { margin: .75rem 0 0; padding: .7rem .9rem; border-radius: .6rem; background: var(--bg); overflow-x: auto; color: var(--ink-2); }

.markdown { font-size: 1rem; line-height: 1.7; max-width: 72ch; overflow-wrap: anywhere; }
.markdown h1, .markdown h2, .markdown h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; margin: 1.4em 0 .5em; }
.markdown h1 { font-size: 2rem; } .markdown h2 { font-size: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; } .markdown h3 { font-size: 1.2rem; }
.markdown > :first-child { margin-top: 0; }
.markdown code { padding: .1rem .35rem; border-radius: .35rem; background: var(--panel-2); font-size: .88em; }
.markdown pre { padding: .9rem 1rem; border-radius: .7rem; background: var(--bg); overflow-x: auto; }
.markdown pre code { padding: 0; background: none; }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: .4rem .7rem; }
.markdown blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--ink-2); }

.file { padding: 0; overflow: clip; }
.file-bar { position: sticky; top: 3.6rem; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.file-meta { color: var(--ink-3); font-size: .85rem; display: flex; gap: .5rem; align-items: center; }
.file-actions { display: flex; flex-wrap: wrap; gap: .35rem; }

.code { margin: 0; padding: .5rem 0; overflow: auto; max-height: 78vh; font-size: .84rem; line-height: 1.6; tab-size: 4; background: var(--panel); }
.code code { display: block; min-width: max-content; }
.line { display: block; position: relative; padding-right: 1rem; white-space: pre; transition: background .2s; }
.line:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ln { display: inline-block; width: 4.2em; padding-right: 1em; text-align: right; color: var(--ink-3) !important; user-select: none; -webkit-user-select: none; font-variant-numeric: tabular-nums; }
.ln:hover { color: var(--ink) !important; text-decoration: none !important; }
.line.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.line.selected .ln { color: var(--accent) !important; }
.show-ai .line[data-kind="ai"] { background: var(--ai-soft); }
.show-ai .line[data-kind="ai"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ai); }
.show-ai .line[data-kind="ai"].selected { background: color-mix(in srgb, var(--accent) 16%, var(--ai-soft)); }

.edit-panel summary, .add-files summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.edit-panel textarea { width: 100%; min-height: 24rem; font: .85rem/1.6 var(--mono); }
.repo-page .editor { display: grid; gap: .55rem; margin-top: .8rem; }
.repo-page .editor input, .repo-page .editor textarea { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: .5rem; padding: .55rem .7rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.repo-page .segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: .6rem; background: var(--bg); border: 1px solid var(--line); }
.repo-page .segmented button { border: 0 !important; background: transparent !important; padding: .4rem .3rem !important; font-size: .82rem; color: var(--ink-2) !important; border-radius: .45rem !important; }
.repo-page .segmented button[aria-pressed="true"] { background: var(--panel-2) !important; color: var(--ink) !important; box-shadow: 0 1px 0 var(--line); }
.repo-page .segmented [data-count] { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.facets { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.facet-label { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-right: .2rem; }
.facet-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.facet.is-empty { opacity: .45; }
.feed-summary { margin: 0; color: var(--ink-3); font-size: .8rem; }
.feed-scroll { overflow: auto; margin: 0 -.5rem; padding: 0 .5rem; overscroll-behavior: contain; }
.feed-section-title, .feed-day h3 { position: sticky; top: 0; z-index: 1; margin: .5rem 0 .25rem; padding: .25rem 0; background: var(--panel); color: var(--ink-3); font: 600 .72rem/1.2 system-ui; text-transform: uppercase; letter-spacing: .08em; }
.feed-days, .feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item { content-visibility: auto; contain-intrinsic-size: auto 3.6rem; animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
.feed-item.enter { animation: rise .25s ease both; animation-delay: 0ms; }
.feed-link { display: flex; gap: .65rem; padding: .5rem; border-radius: .6rem; color: var(--ink) !important; transition: background .15s; }
.feed-link:hover, .feed-link:focus-visible { background: var(--panel-2); text-decoration: none !important; }
.avatar { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--panel-2); color: var(--ink-2); font-size: .7rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.avatar-unknown { color: var(--ink-3); box-shadow: inset 0 0 0 1px dashed var(--line); }
.avatar-agent { border-radius: .45rem; color: var(--ai); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 55%, transparent); }
.feed-body { display: grid; gap: .15rem; min-width: 0; }
.feed-title { font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-meta { display: flex; flex-wrap: wrap; gap: .15rem .55rem; color: var(--ink-3); font-size: .76rem; }
.feed-meta code { color: var(--ink-3); }
.tag { padding: 0 .4rem; border-radius: .3rem; border: 1px solid color-mix(in srgb, var(--ai) 55%, transparent); color: var(--ai); }
.tag-verified { border-color: var(--ok); color: var(--ok); }
.status { padding: 0 .4rem; border-radius: .3rem; border: 1px solid var(--line); }
.status-review { border-color: var(--accent); color: var(--accent); }
.status-accepted { border-color: var(--ok); color: var(--ok); }
.status-failed, .status-rejected { border-color: var(--ai); color: var(--ai); }
.status-running, .status-queued, .status-publishing { border-color: var(--link); color: var(--link); }
.feed-none { color: var(--ink-3); text-align: center; padding: 1rem 0; }

@media (max-width: 1180px) {
  .repo-layout { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); }
  .repo-activity { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 760px) {
  .repo-layout { grid-template-columns: minmax(0, 1fr); }
  .repo-tree { position: static; max-height: 45vh; }
  .repo-bar { gap: .75rem; }
  .file-bar { top: 3.2rem; }
  .ln { width: 3.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .repo-page *, .repo-page *::before { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}
.file-credit { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; padding: .45rem .8rem; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: .8rem; }
.file-credit a { color: var(--ink-2) !important; }
.login-card .button-primary { display: block; margin: 1rem 0; padding: .8rem 1rem; border-radius: .55rem; background: var(--primary); color: var(--primary-ink); text-align: center; font-weight: 700; text-decoration: none; transition: transform .1s, opacity .2s; }
.login-card .button-primary:hover { opacity: .9; }
.login-card .button-primary:active { transform: translateY(1px); }
.token-fallback { margin-top: .5rem; color: var(--ink-3); }
.token-fallback summary { cursor: pointer; }


/* ---- Live editing page ---- */
/* The live editing page: the file in an editor window (live-lens.css draws
   its surface: line numbers, syntax, authors, carets), a status bar with the
   gauges under it, and the round's authors beside it. */
.live-page [hidden] { display: none; }
.live-workspace { width: min(104rem, calc(100% - 2rem)); gap: .75rem; padding: 1rem 0 1.5rem; }
.live-heading { display: flex; align-items: center; gap: .75rem 1rem; min-width: 0; }
.live-title { flex: 1; min-width: 0; }
.live-title .eyebrow { margin: 0 0 .1rem; color: var(--ink-3); letter-spacing: .1em; }
.live-heading h1 { margin: 0; font: 600 1.15rem/1.3 var(--mono); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-heading h1 code { font-size: 1em; color: var(--ink); }
.live-title-dir { color: var(--ink-3); font-weight: 400; }
.live-heading .button-quiet { flex: none; padding: .42rem .75rem; font-size: var(--fs-sm); }
.live-presence { display: flex; align-items: center; margin: 0; padding: 0 .25rem 0 0; list-style: none; }
.live-presence-item { position: relative; display: flex; margin-left: -.3rem; }
.live-presence-item:first-child { margin-left: 0; }
.live-presence-more { align-items: center; height: 1.9rem; padding: 0 .5rem 0 .65rem; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.live-status { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--ink-3); font-size: .74rem; white-space: nowrap; }
.live-status::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-3); }
.live-status[data-state="connected"]::before { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.live-status[data-state="connecting"]::before, .live-status[data-state="offline"]::before { background: var(--warn); }
.live-status[data-state="error"]::before { background: var(--danger); }
.live-error p { margin: 0 0 .5rem; }
.live-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0; }
.live-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 1rem; align-items: start; }
.live-editor { display: grid; gap: .6rem; min-width: 0; }
.live-window { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--code-bg); box-shadow: var(--shadow-2); }
.live-window-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; min-height: 2.6rem; padding: .35rem .8rem; border-bottom: 1px solid var(--line); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: var(--panel); }
.live-file { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; }
.live-file code { overflow: hidden; color: var(--ink-2); font: 500 .78rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.live-lang { flex: none; padding: .08rem .42rem; border-radius: 5px; background: var(--panel-3); color: var(--ink-2); font: 700 .62rem/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.live-window-bar .live-lens-bar { margin-left: auto; }
.live-history { padding: .3rem .8rem; border-top: 1px solid var(--line); background: var(--panel); }
.live-history:empty { display: none; }
.live-statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; min-height: 2.25rem; padding: .25rem .8rem; border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); background: var(--panel); }
.live-text { width: 100%; min-height: 60vh; resize: vertical; background: var(--code-bg); color: var(--ink-2); font: .84rem/1.6 var(--mono); white-space: pre; tab-size: 4; }
.live-panel { position: sticky; top: calc(var(--bar-h) + .75rem); display: grid; gap: .75rem; max-height: calc(100vh - var(--bar-h) - 1.5rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.live-panel-card { padding: .8rem .85rem .85rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
/* The panel's main action stays at its foot while the authors above it
   scroll under it. */
.live-record-card { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -.9rem 1rem -.2rem var(--bg); }
.live-panel h2 { margin: 0 0 .2rem; color: var(--ink-3); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.live-panel-note { margin: 0 0 .65rem; color: var(--ink-3); font-size: .76rem; line-height: 1.45; }
.live-panel code { overflow-wrap: anywhere; }
.live-panel ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.live-panel .reviews-muted { margin: 0; color: var(--ink-3); font-size: .76rem; }
/* One author: avatar, subject, kind and switch, then counts and changes. */
.live-author { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; min-height: 2.9rem; padding: .5rem 2.9rem .5rem 2.85rem; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); transition: opacity var(--dur) var(--ease); }
.live-author.is-off { opacity: .6; }
.live-author > .live-avatar { position: absolute; top: .5rem; left: .55rem; }
.live-author > code { order: 1; min-width: 0; color: var(--ink); font: 600 .78rem/1.4 var(--mono); }
.live-author > .review-badge { order: 2; padding: 0 .38rem; border-radius: 4px; background: var(--panel-3); color: var(--ink-3); font-size: .64rem; font-weight: 700; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; }
.live-author-agent > .review-badge { background: color-mix(in srgb, var(--au-ai) 16%, transparent); color: var(--au-ai); }
.live-author > .live-you { order: 3; color: var(--ink-3); font-size: .72rem; }
.live-panel .live-author > input[type="checkbox"] { position: absolute; top: .62rem; right: .6rem; }
.live-author > .live-author-name { order: 5; flex-basis: 100%; }
.live-author > .live-counts { order: 6; flex-basis: 100%; }
.live-author > .live-groups { order: 7; flex-basis: 100%; margin-right: -2.35rem; }
.live-author-name, .live-counts { display: block; color: var(--ink-3); font-size: .72rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.live-groups { margin-top: .2rem; }
.live-groups summary { color: var(--ink-3); font-size: .72rem; font-weight: 600; }
.live-groups summary:hover { color: var(--ink-2); }
.live-groups[open] > summary { margin-bottom: .3rem; }
.live-groups ul { gap: .3rem; }
.live-groups li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; padding: .35rem 2.7rem .4rem .55rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.live-groups li > code { order: 1; min-width: 0; color: var(--ink-2); font: 500 .74rem var(--mono); }
.live-panel .live-groups li > input[type="checkbox"] { position: absolute; top: .45rem; right: .5rem; }
.live-groups li > .live-counts { order: 3; flex-basis: 100%; }
.live-groups li > .live-runs { order: 4; flex-basis: 100%; margin-right: -2.2rem; }
.live-groups p { margin: .25rem 0 0; font-size: .72rem; }
/* The panel's switches: a checkbox drawn as a small switch. */
.live-panel input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 1.75rem; height: 1rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background var(--dur) var(--ease); }
.live-panel input[type="checkbox"]::after { content: ""; position: absolute; top: .16rem; left: .16rem; width: .68rem; height: .68rem; border-radius: 50%; background: var(--ink-3); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.live-panel input[type="checkbox"]:checked { background: color-mix(in srgb, var(--accent) 60%, var(--panel-3)); }
.live-panel input[type="checkbox"]:checked::after { transform: translateX(.75rem); background: #fff; }
.live-panel input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.live-panel input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.live-runs { display: grid; gap: .4rem; margin: .3rem 0 .1rem; }
.live-run { display: grid; gap: .2rem; font-size: .72rem; }
.live-run-head { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.live-chip { padding: .02rem .4rem; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: .66rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.live-chip-run { background: color-mix(in srgb, var(--au-ai) 14%, transparent); color: var(--au-ai); font-variant-numeric: tabular-nums; }
.live-chip-model, .live-chip-unread { color: var(--ink-3); font-weight: 500; }
.live-chip-verified { background: var(--ok-bg); color: var(--ok); }
.live-run-prompt { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-3); font-style: italic; overflow-wrap: anywhere; }
.live-record p:last-child { margin: .5rem 0 0; color: var(--ink-2); font-size: .76rem; }
.live-record p:last-child:empty { display: none; }
[data-live-record] { width: 100%; border-color: var(--primary); background: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow-1); }
[data-live-record]:hover:not(:disabled) { border-color: var(--primary-hover); background: var(--primary-hover); color: var(--primary-ink); }
.live-preview { border-color: color-mix(in srgb, var(--au-ai) 40%, transparent); background: color-mix(in srgb, var(--au-ai) 9%, var(--panel)); }
.live-preview p { margin: 0 0 .5rem; }
.live-preview p:last-child { margin: 0; }
.live-unsent .live-text { min-height: 12rem; }
.live-unsent label { display: block; margin: .5rem 0 .3rem; font-size: .8rem; }
.live-confirm p { margin: 0 0 .5rem; }
/* The gauge strip in the status bar (live-gauges.js). */
.live-gauges { display: flex; flex-wrap: wrap; align-items: center; margin-left: auto; min-width: 0; }
.live-gauges[hidden] { display: none; }
.live-gauge { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .8rem; border-left: 1px solid var(--line); white-space: nowrap; }
.live-gauge:first-child { border-left: 0; }
.live-gauge-label { color: var(--ink-3); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.live-gauge-value { display: inline-flex; align-items: baseline; gap: .2rem; color: var(--ink); font: 600 .78rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.live-gauge-unit { color: var(--ink-3); font: 500 .68rem var(--sans); }
.live-gauge-detail { display: none; color: var(--ink-3); font-size: .68rem; font-variant-numeric: tabular-nums; }
.live-gauge-reference { color: var(--ink-3); font-size: .68rem; }
.live-gauges-stale .live-gauge-value { opacity: .45; }
.live-spark { display: block; width: 3.4rem; height: .95rem; overflow: visible; }
.live-spark-line { stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.live-spark-area { fill: var(--accent); opacity: .14; }
.live-dots { display: inline-flex; gap: 3px; }
.live-dot { width: .4rem; height: .4rem; border-radius: 50%; }
.live-dot-person { background: var(--au-human); }
.live-dot-agent { background: var(--au-ai); }
@media (min-width: 112rem) { .live-gauge-detail { display: inline; } }
@media (max-width: 64rem) {
  .live-layout { grid-template-columns: 1fr; }
  .live-panel { position: static; max-height: none; overflow: visible; }
  .live-record-card { position: static; box-shadow: none; }
}
@media (max-width: 40rem) {
  .live-workspace { width: calc(100% - 1.25rem); padding-top: .75rem; }
  .live-heading { flex-wrap: wrap; }
  .live-title { flex-basis: 100%; }
  .live-heading h1 { font-size: 1rem; }
  .live-heading .button-quiet { margin-left: auto; }
  .live-window-bar .live-lens-bar { margin-left: 0; }
  .live-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; width: 100%; margin-left: 0; padding-bottom: .2rem; }
  .live-gauge { padding: 0; border-left: 0; }
  .palette-open, .app-repository { display: none !important; }
}
/* ==========================================================================
   Review hub: pipelines | diff and source | publish, staged changes, review
   ========================================================================== */
body.review-hub { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.hub { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(13rem, 15.5rem) minmax(0, 1fr) minmax(21rem, 30rem); }
.hub-nav { min-height: 0; overflow: auto; padding: var(--sp-3) var(--sp-3) var(--sp-5); border-right: 1px solid var(--line); background: var(--panel); }
.hub-main { position: relative; width: auto; margin: 0; padding: 0; gap: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--code-bg); }
.hub-side { min-height: 0; overflow: auto; padding: .65rem; display: flex; flex-direction: column; gap: .65rem; border-left: 1px solid var(--line); background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.hub-notice { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub-notice.is-error { position: static !important; width: auto; height: auto; clip: auto; white-space: normal; margin: 0; padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--danger); background: var(--danger-bg); }
body.is-busy .hub-main::before { content: ""; position: absolute; z-index: 5; top: 0; left: 0; height: 2px; width: 40%; background: var(--accent); animation: busy 1s var(--ease) infinite; }
@keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* Pipelines and files */
.hub-nav-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--sp-2); }
.hub-nav-head h2 { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hub-nav-empty { font-size: var(--fs-sm); }
.pipeline-list, .file-list, .tag-results, .label-list, .decision-list, .staged-list, .hunk-list, .split-groups, .split-hunks, .changed-files ul { list-style: none; margin: 0; padding: 0; }
.pipeline { margin-bottom: var(--sp-1); }
.pipeline-link { display: grid; gap: .1rem; padding: .45rem .55rem; border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.pipeline-link:hover { background: var(--panel-2); }
.pipeline.is-active > .pipeline-link { background: var(--panel-2); box-shadow: inset 3px 0 var(--accent); }
.pipeline-name { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--ink-3); font-size: var(--fs-xs); }
.file-list { margin: .2rem 0 .3rem .4rem; padding-left: .45rem; border-left: 1px solid var(--line); }
.file-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .1rem; }
.file-link { display: grid; grid-template-columns: .55rem minmax(0, 1fr); align-items: center; column-gap: .45rem; padding: .25rem .4rem; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.file-link:hover { background: var(--panel-2); color: var(--ink); }
.file-link[aria-current="page"] { background: color-mix(in srgb, var(--link) 13%, transparent); color: var(--ink); font-weight: 600; }
.file-mark { width: .45rem; height: .45rem; border-radius: 50%; border: 1px solid var(--line-strong); grid-row: span 2; }
.file-mark--changed { background: var(--accent); border-color: var(--accent); }
.file-name { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-dir { grid-column: 2; color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-progress { grid-column: 1 / -1; height: 3px; margin: 0 .4rem .15rem 1.4rem; width: auto; }
.file-remove { opacity: 0; }
.file-item:hover .file-remove, .file-remove:focus-visible { opacity: 1; }
.add-files { margin: .1rem 0 0 .9rem; }
.hub-nav-search { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.tag-results { display: grid; gap: .15rem; font-size: var(--fs-sm); }
.tag-results a { display: block; padding: .15rem .3rem; border-radius: 4px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-results a:hover { background: var(--panel-2); }

/* File bar */
.hub-filebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--line); background: var(--panel); }
.filebar-title { flex: 1 1 16rem; min-width: 0; }
.filebar-title .eyebrow { margin-bottom: .1rem; }
.filebar-title h1 { margin: 0; font: 600 1.15rem/1.3 var(--mono); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebar-title h1 code { font-size: 1em; }
.filebar-dir { color: var(--ink-3); font-weight: 400; }
.filebar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: .2rem 0 0; color: var(--ink-3); font-size: var(--fs-sm); }
.diff-stat { font: 600 var(--fs-sm) var(--mono); }
.diff-stat-add { color: var(--diff-add-ink); }
.diff-stat-del { color: var(--diff-del-ink); }
.filebar-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.change-nav { display: inline-flex; gap: 2px; }
.find { position: relative; display: inline-flex; align-items: center; }
.find input { width: 9rem; padding: .32rem .6rem; font-size: var(--fs-sm); border-radius: 999px; }
.find-count { position: absolute; right: .65rem; color: var(--ink-3); font-size: var(--fs-xs); pointer-events: none; }
.legend { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); color: var(--ink-3); font-size: var(--fs-xs); }
.legend-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.legend-title { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.legend-item { display: inline-flex; align-items: center; gap: .3rem; }

/* Syntax colours (the live editor and the review viewer share the tokenizer
   in live-lens.js): few, soft colours. */
.sx-kw { color: var(--sx-kw); }
.sx-str { color: var(--sx-str); }
.sx-com { color: var(--sx-com); font-style: italic; }
.sx-num, .sx-con { color: var(--sx-num); }
.sx-fn { color: var(--sx-fn); }
.sx-ty { color: var(--sx-ty); }
.sx-dec { color: var(--sx-dec); }
.sx-bi, .sx-mac { color: var(--sx-bi); }
.sx-lt { color: var(--sx-kw); font-style: italic; }
.vrow--del .vtext [class^="sx-"] { opacity: .8; }

/* The virtualized viewer */
.viewer { position: relative; flex: 1; min-height: 0; overflow: auto; font: 13px/var(--row-h) var(--mono); tab-size: 4; color: var(--ink); background: var(--code-bg); outline: none; overscroll-behavior: contain; }
.viewer:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.viewer-loading, .viewer-noscript, .viewer-empty { padding: var(--sp-6); color: var(--ink-3); font: var(--fs-md) var(--sans); }
.viewer-map { position: absolute; z-index: 3; width: 12px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 70%, transparent); cursor: pointer; }
.viewer-map-viewport { position: absolute; z-index: 4; width: 12px; border: 1px solid var(--ink-3); border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); pointer-events: none; }
.viewer .vtext { padding-right: calc(2rem + 12px); }
.viewer-spacer { position: relative; min-width: 100%; width: max-content; }
.viewer-window { position: absolute; top: 0; left: 0; min-width: 100%; width: max-content; will-change: transform; }
.viewer[data-viewer-mode="split"] .viewer-spacer, .viewer[data-viewer-mode="split"] .viewer-window { width: 100%; }
.vrow { display: flex; height: var(--row-h); white-space: pre; }
.vrow--probe { visibility: hidden; position: absolute; }
.vgut { position: sticky; left: 0; z-index: 1; flex: none; display: flex; align-items: stretch; background: var(--code-bg); border-right: 1px solid var(--line); user-select: none; }
.vbar { flex: none; width: 3px; }
.vbar-author { margin-right: 3px; }
.vnum { all: unset; box-sizing: border-box; display: block; width: 3.4em; padding-right: .55em; text-align: right; color: var(--ink-3); font: inherit; cursor: pointer; }
span.vnum { cursor: default; }
.vnum:hover { color: var(--ink); text-decoration: underline; }
.vnum-old { color: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.vsign { flex: none; width: 1.3em; text-align: center; color: var(--ink-3); }
.vtext { flex: 1 0 auto; padding: 0 2rem 0 .65rem; }
.vrow--context .vtext { color: var(--ink-2); }
.vrow--add, .vside--add { background: var(--diff-add-bg); }
.vrow--add .vgut { background: var(--diff-add-strong); }
.vrow--add .vsign { color: var(--diff-add-ink); font-weight: 700; }
.vrow--del, .vside--del { background: var(--diff-del-bg); }
.vrow--del .vgut { background: var(--diff-del-strong); }
.vrow--del .vsign, .vrow--del .vtext, .vside--del .vtext { color: var(--diff-del-ink); }
.vrow--fold { background: var(--fold-bg); border-block: 1px solid var(--line); }
.fold-button { all: unset; box-sizing: border-box; width: 100%; padding-left: 9.5em; color: var(--link); font: 500 var(--fs-xs)/var(--row-h) var(--sans); cursor: pointer; }
.fold-button:hover, .fold-button:focus-visible { background: color-mix(in srgb, var(--link) 10%, transparent); text-decoration: underline; }
/* Review status in the gutter; authorship beside it (hatched for AI). */
.st-reviewed .vbar-status { background: var(--st-reviewed); }
.st-tested .vbar-status { background: var(--st-tested); }
.st-pending .vbar-status { background: var(--st-pending); }
.st-unreviewed .vbar-status { background: var(--st-unreviewed); }
.st-reviewed > .vgut, .st-reviewed .vgut { background-image: linear-gradient(color-mix(in srgb, var(--st-reviewed) 13%, transparent), color-mix(in srgb, var(--st-reviewed) 13%, transparent)); }
.st-tested > .vgut, .st-tested .vgut { background-image: linear-gradient(color-mix(in srgb, var(--st-tested) 13%, transparent), color-mix(in srgb, var(--st-tested) 13%, transparent)); }
.st-pending > .vgut, .st-pending .vgut { background-image: linear-gradient(color-mix(in srgb, var(--st-pending) 15%, transparent), color-mix(in srgb, var(--st-pending) 15%, transparent)); }
.st-unreviewed > .vgut, .st-unreviewed .vgut { background-image: linear-gradient(color-mix(in srgb, var(--st-unreviewed) 13%, transparent), color-mix(in srgb, var(--st-unreviewed) 13%, transparent)); }
.au-human .vbar-author { background: var(--au-human); }
.au-ai .vbar-author { background: repeating-linear-gradient(180deg, var(--au-ai) 0 3px, color-mix(in srgb, var(--au-ai) 35%, transparent) 3px 5px); }
.au-mixed .vbar-author { background: linear-gradient(var(--au-human) 50%, var(--au-ai) 50%); }
.au-unknown .vbar-author { background: var(--line-strong); }
[data-authorship="on"] .au--ai { background: color-mix(in srgb, var(--au-ai) 14%, transparent); border-radius: 2px; }
[data-authorship="on"] .au--human { background: color-mix(in srgb, var(--au-human) 11%, transparent); border-radius: 2px; }
.vtags { display: none; gap: .25rem; margin-right: .6rem; vertical-align: 1px; }
[data-semantic="on"] .vtags { display: inline-flex; }
[data-semantic="on"] .tg-1 .vtext { box-shadow: inset 2px 0 var(--tag-blue); }
[data-semantic="on"] .tg-2 .vtext { box-shadow: inset 2px 0 var(--tag-green); }
[data-semantic="on"] .tg-3 .vtext { box-shadow: inset 2px 0 var(--tag-gold); }
[data-semantic="on"] .tg-4 .vtext { box-shadow: inset 2px 0 var(--tag-purple); }
[data-semantic="on"] .tg-5 .vtext { box-shadow: inset 2px 0 var(--tag-suggested); }
.vrow.is-selected, .vside.is-selected { background-image: linear-gradient(color-mix(in srgb, var(--link) 16%, transparent), color-mix(in srgb, var(--link) 16%, transparent)); }
.vrow.is-selected .vnum, .vside.is-selected .vnum { color: var(--link); font-weight: 700; }
.vrow.is-highlighted .vtext, .vside.is-highlighted .vtext { box-shadow: inset 3px 0 var(--accent); background-image: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)); }
.vrow.is-highlighted > .vgut .vnum { color: var(--accent); font-weight: 700; }
.vrow.is-flash > .vgut { animation: flash .9s var(--ease); }
@keyframes flash { 0%, 40% { background-color: var(--hl-strong); } }
.vrow.is-find-current, .vside.is-find-current { outline: 1px solid var(--accent); outline-offset: -1px; }
mark.find-hit { background: var(--hl-strong); color: inherit; border-radius: 2px; }
.vrow--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.vside { display: flex; min-width: 0; overflow: hidden; }
.vside + .vside { border-left: 1px solid var(--line-strong); }
.vside .vgut { position: static; }
.vside .vtext { transform: translateX(calc(-1 * var(--hx, 0px))); }
.vside--empty { background: repeating-linear-gradient(135deg, var(--panel-2) 0 4px, transparent 4px 9px); }

/* Acting on selected lines */
.selection-bar { position: absolute; z-index: 10; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); width: min(52rem, calc(100% - 2rem)); display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-2); animation: toast-in .18s var(--ease) both; }
.selection-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.selection-range { font: 600 var(--fs-sm) var(--mono); color: var(--ink); white-space: nowrap; }
.selection-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.selection-note { flex: 1 1 10rem; padding: .35rem .6rem; font-size: var(--fs-sm); }
.selection-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.selection-panel textarea, .selection-panel > div { grid-column: 1 / -1; }
.status-button { padding: .32rem .7rem; font-size: var(--fs-sm); border-radius: 999px; background: var(--panel); }
.status-button::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.status-button--reviewed { color: var(--st-reviewed); border-color: color-mix(in srgb, var(--st-reviewed) 45%, transparent); }
.status-button--tested { color: var(--st-tested); border-color: color-mix(in srgb, var(--st-tested) 45%, transparent); }
.status-button--pending { color: var(--st-pending); border-color: color-mix(in srgb, var(--st-pending) 50%, transparent); }
.status-button--unreviewed { color: var(--st-unreviewed); border-color: color-mix(in srgb, var(--st-unreviewed) 45%, transparent); }
.status-button:hover { background: var(--panel-2); }

/* Side cards: compact, so the staged-change graph shows without scrolling. */
.hub-card { padding: .8rem .9rem; border-radius: var(--r-lg); }
.hub-card > :last-child { margin-bottom: 0; }
.hub-card .card-header { margin-bottom: .45rem; }
.hub-card .card-header h2 { font-size: .8rem; letter-spacing: .02em; }
.hub-card .card-note { margin: .2rem 0 .5rem; font-size: var(--fs-xs); line-height: 1.45; }
.publish-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 5rem); }
.publish-card .card-header h2 { font: 650 1rem/1.2 var(--sans); letter-spacing: -.01em; }
.publish-summary { margin: 0 0 .4rem; font-size: var(--fs-sm); }
.state-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 0 .5rem; }
.state-flow > div { position: relative; padding: .22rem .45rem; border-radius: var(--r-sm); background: var(--panel-2); }
.state-flow > div + div::before { content: "→"; position: absolute; left: -.55rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: .6rem; }
.state-flow dt { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.state-flow dd { font-size: .66rem; }
.state { font-size: .66rem; }
.publish-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2); margin: 0 0 .3rem; font-size: var(--fs-xs); color: var(--ink-2); }
.publish-actions { display: grid; gap: .4rem; margin-top: .5rem; }
.publish-actions .button-block { padding: .5rem .9rem; font-size: var(--fs-md); }
.publish-secondary { display: flex; justify-content: space-between; gap: var(--sp-2); }
.publish-card .changed-files { margin-top: .5rem; }
.publish-card .changed-files summary { font-size: var(--fs-sm); }
.changed-files ul { display: grid; gap: .1rem; font-size: var(--fs-sm); }
.changed-files a { display: block; padding: .1rem .3rem; border-radius: 4px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.changed-files a[aria-current="page"] { background: color-mix(in srgb, var(--link) 12%, transparent); }

/* Staged changes graph */
.dag-scroll { overflow: auto; max-height: 36rem; margin: .4rem 0 0; padding: .35rem; border-radius: var(--r-md); background: var(--code-bg); border: 1px solid var(--line); }
.dag { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.dag-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.6; marker-end: url(#dag-arrow); transition: stroke var(--dur), opacity var(--dur); }
.dag-arrow { fill: var(--line-strong); }
.dag-node { cursor: pointer; outline: none; transition: opacity var(--dur) var(--ease); }
.dag-node-box { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; transition: stroke var(--dur), fill var(--dur); }
.dag-node:hover .dag-node-box { stroke: var(--ink-3); }
.dag-node:focus-visible .dag-node-box { stroke: var(--focus); stroke-width: 2.4; }
.dag-node-kind { fill: var(--line-strong); }
.dag-node--human .dag-node-kind { fill: var(--au-human); }
.dag-node--ai .dag-node-kind { fill: var(--au-ai); }
.dag-node-title { font: 600 12px var(--sans); fill: var(--ink); }
.dag-node-author { font: 600 12px var(--sans); fill: var(--ink); }
.dag-node-chip { fill: var(--panel-2); }
.dag-node--human .dag-node-chip { fill: color-mix(in srgb, var(--au-human) 18%, var(--panel)); }
.dag-node--ai .dag-node-chip { fill: color-mix(in srgb, var(--au-ai) 18%, var(--panel)); }
.dag-node-chip-text { font: 600 11px var(--sans); fill: var(--ink-2); }
.dag-node--human .dag-node-chip-text { fill: var(--au-human); }
.dag-node--ai .dag-node-chip-text { fill: var(--au-ai); }
.dag-node-model { font: 11px var(--mono); fill: var(--ink-3); }
.dag-node-message { font: 11px var(--sans); fill: var(--ink-3); }
.dag-node-detail { font: 11px var(--mono); fill: var(--ink-3); }
.dag-node.is-selected .dag-node-box { stroke: var(--focus); stroke-width: 2.4; fill: color-mix(in srgb, var(--focus) 10%, var(--panel)); }
.dag-node.is-dependency .dag-node-box { stroke: var(--link); stroke-width: 2; fill: color-mix(in srgb, var(--link) 8%, var(--panel)); }
.dag-node.is-dependent .dag-node-box { stroke: var(--warn); stroke-width: 2; fill: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.dag-node.is-dimmed { opacity: .35; }
.dag-edge.is-dependency { stroke: var(--link); stroke-width: 2.2; }
.dag-edge.is-dependent { stroke: var(--warn); stroke-width: 2.2; }
.dag-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); color: var(--ink-3); font-size: var(--fs-xs); }
.dag-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.staged-list { display: grid; gap: .2rem; counter-reset: staged; font-size: var(--fs-sm); }
.staged-list li { counter-increment: staged; }
.staged-list li::before { content: counter(staged) ". "; color: var(--ink-3); }
.change-detail { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-strong); animation: toast-in .18s var(--ease) both; }
.change-summary h3 { margin: 0 0 .2rem; font-size: var(--fs-md); }
.change-meta, .change-relations { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 var(--sp-2); color: var(--ink-3); font-size: var(--fs-sm); }
.rel { padding: .05rem .45rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.rel--dep { background: color-mix(in srgb, var(--link) 14%, transparent); color: var(--link); }
.rel--dependent { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.hunks { display: grid; gap: var(--sp-2); }
.hunk-list { display: grid; gap: var(--sp-1); }
.hunk { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.hunk-head { all: unset; box-sizing: border-box; display: flex; gap: .4rem; width: 100%; padding: .3rem .5rem; font-size: var(--fs-xs); background: var(--panel-2); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hunk-head:hover, .hunk-head:focus-visible { background: var(--panel-3); }
.hunk-preview { margin: 0; padding: .3rem .5rem; max-height: 6.5rem; overflow: auto; font-size: 11.5px; line-height: 1.45; background: var(--code-bg); color: var(--ink-2); }
.split-form { gap: var(--sp-3); }
.split-form h3 { margin: 0; }
.split-groups { display: grid; gap: var(--sp-2); }
.split-group { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: center; gap: .25rem .5rem; }
.split-group-number { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: var(--fs-xs); font-weight: 700; }
.split-message { font-size: var(--fs-sm); padding: .35rem .5rem; }
.split-badges { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem; }
.split-hunks { display: grid; gap: var(--sp-1); }
.split-hunk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .5rem; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.split-hunk .hunk-preview { grid-column: 1 / -1; border-radius: 4px; }
.split-hunk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }

/* Progress (the pipeline overview) */
.progress-card .review-overview { margin: 0; padding: 0; border: 0; background: none; }

/* Decisions, artifacts, labels */
.decision-list { display: grid; gap: .4rem; font-size: var(--fs-sm); }
.decision { display: flex; align-items: flex-start; gap: .45rem; }
.decision--inactive { opacity: .65; }
.decision-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.decision-dot { flex: none; width: .55rem; height: .55rem; margin-top: .42rem; border-radius: 50%; background: var(--ink-3); }
.decision-dot--reviewed { background: var(--st-reviewed); } .decision-dot--tested { background: var(--st-tested); }
.decision-dot--pending { background: var(--st-pending); } .decision-dot--unreviewed { background: var(--st-unreviewed); }
.decision-dot--excluded { background: transparent; border: 1.5px solid var(--ink-3); }
.decision-bulk { display: grid; gap: .2rem; margin-bottom: var(--sp-3); }
.decision-bulk p { margin: 0; font-size: var(--fs-xs); }
.decision-exclusion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); padding: .5rem .6rem; border-radius: var(--r-sm); background: var(--warn-bg); font-size: var(--fs-sm); }
.decision-exclusion p { margin: 0; flex: 1; }
.artifact-list { display: grid; gap: var(--sp-2); }
.artifact { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); border-left-width: 3px; }
.artifact h3 { margin: 0; font-size: var(--fs-md); }
.artifact p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.artifact-head { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); }
.artifact-kind { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.artifact--diff { border-left-color: var(--link); } .artifact-kind--diff { color: var(--link); }
.artifact--assessment { border-left-color: var(--accent); } .artifact-kind--assessment { color: var(--accent); }
.artifact--evidence { border-left-color: var(--st-tested); } .artifact-kind--evidence { color: var(--st-tested); }
.artifact--note { border-left-color: var(--line-strong); } .artifact-kind--note { color: var(--ink-3); }
.artifact-producer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.assessment-text { margin: 0; padding: .1rem 0 .1rem .7rem; border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink-2); font: italic var(--fs-sm)/1.5 var(--serif); }
.confidence { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.confidence--low progress::-webkit-progress-value { background: var(--st-unreviewed); }
.confidence--medium progress::-webkit-progress-value { background: var(--st-pending); }
.confidence--low progress::-moz-progress-bar { background: var(--st-unreviewed); }
.confidence--medium progress::-moz-progress-bar { background: var(--st-pending); }
.evidence-text { display: flex; gap: .5rem; align-items: baseline; }
.evidence-icon { display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: color-mix(in srgb, var(--st-tested) 18%, transparent); color: var(--st-tested); font-size: .7rem; font-weight: 800; }
.patch { margin-top: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: auto; max-height: 18rem; font: 12px/18px var(--mono); }
.patch h4 { margin: 0; padding: .3rem .5rem; background: var(--panel-2); font: 600 var(--fs-xs) var(--sans); position: sticky; left: 0; }
.patch .vrow { height: 18px; width: max-content; min-width: 100%; }
.patch .vnum { width: 3em; }
.label-list { display: grid; gap: .35rem; font-size: var(--fs-sm); }
.label-item { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.label-item .label { font-size: var(--fs-sm); }
.label-item .icon-button { margin-left: auto; }
.review-stale ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.hub-details details:first-child { margin-top: 0; }

@media (max-width: 1240px) {
  body.review-hub { height: auto; overflow: visible; }
  .hub { grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr); }
  .hub-main { height: calc(100vh - var(--bar-h)); position: sticky; top: var(--bar-h); }
  .hub-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .hub { grid-template-columns: minmax(0, 1fr); }
  .hub-nav { border-right: 0; border-bottom: 1px solid var(--line); max-height: 38vh; }
  .hub-main { position: static; height: 78vh; }
  .filebar-tools { justify-content: flex-start; }
  .find input { width: 8.5rem; }
  .app-repository { display: none; }
  .selection-bar { bottom: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.error-page { max-width: 40rem; padding-top: 12vh; }
.error-page h1 { font-size: 1.6rem; }
.form-actions-start { justify-content: flex-start; }

/* ---- Views (views.js) and the jump palette (palette.js) ---------------------- */
@view-transition { navigation: auto; }
.app-bar { view-transition-name: app-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease); }

:root {
  --vz-c0: #2c63d6; --vz-c1: #d9771f; --vz-c2: #1a9b74; --vz-c3: #8e4fd6; --vz-c4: #c43a68; --vz-c5: #0b8ea8; --vz-c6: #8a8f1c; --vz-c7: #6b6f86;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --vz-c0: #7aa7ff; --vz-c1: #f5a35a; --vz-c2: #5fd3a0; --vz-c3: #c3a0ff; --vz-c4: #ff86b0; --vz-c5: #4ccbe3; --vz-c6: #d6dc63; --vz-c7: #a8aec9;
} }
:root[data-theme="dark"] {
  --vz-c0: #7aa7ff; --vz-c1: #f5a35a; --vz-c2: #5fd3a0; --vz-c3: #c3a0ff; --vz-c4: #ff86b0; --vz-c5: #4ccbe3; --vz-c6: #d6dc63; --vz-c7: #a8aec9;
}
.vz-c0 { --vz: var(--vz-c0); } .vz-c1 { --vz: var(--vz-c1); } .vz-c2 { --vz: var(--vz-c2); } .vz-c3 { --vz: var(--vz-c3); }
.vz-c4 { --vz: var(--vz-c4); } .vz-c5 { --vz: var(--vz-c5); } .vz-c6 { --vz: var(--vz-c6); } .vz-c7 { --vz: var(--vz-c7); }
.vz-human { --vz: var(--au-human); } .vz-ai { --vz: var(--au-ai); }
.vz-reviewed { --vz: var(--st-reviewed); } .vz-tested { --vz: var(--st-tested); } .vz-pending { --vz: var(--st-pending); } .vz-unreviewed { --vz: var(--st-unreviewed); }
.vz-ok { --vz: var(--ok); } .vz-bad { --vz: var(--danger); } .vz-warn { --vz: var(--warn); } .vz-muted { --vz: var(--line-strong); }

.views-workspace { max-width: 96rem; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-5); }
.views-heading { display: flex; gap: var(--sp-4); align-items: end; justify-content: space-between; flex-wrap: wrap; }
.views-heading h1 { margin: 0 0 .2rem; font-family: var(--serif); font-size: 1.9rem; }
.views-filter { min-width: 16rem; }
.vz-file { display: grid; gap: var(--sp-3); }
.vz-file-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.vz-file-path { color: var(--ink-3); font-size: var(--fs-sm); }
.vz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-4); align-items: start; }
.vz-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0; display: grid; gap: var(--sp-2); animation: vz-in .28s var(--ease); }
.vz-card.vz-wide { grid-column: 1 / -1; }
.vz-card[hidden] { display: none; }
@keyframes vz-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.vz-card-head { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.vz-title { margin: 0; font-size: var(--fs-lg); font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-meta { color: var(--ink-3); font: var(--fs-xs) var(--mono); white-space: nowrap; }
.vz-actions { display: flex; gap: .25rem; }
.vz-expand { padding: .1rem .4rem; line-height: 1; font-size: .9rem; background: transparent; border-color: transparent; color: var(--ink-3); }
.vz-expand:hover, .vz-expand[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); }
.vz-body { min-width: 0; min-height: 3rem; }
.vz-note { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.vz-problems { margin: 0; padding: .4rem .7rem .4rem 1.6rem; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn); font: var(--fs-xs)/1.5 var(--mono); }
.vz-problems[hidden] { display: none; }
.vz-empty, .vz-loading { margin: 0; padding: var(--sp-4) 0; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }
.vz-error { margin: 0; padding: .5rem .7rem; border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: var(--fs-sm); }
.vz-svg { display: block; max-width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.vz-svg .vz-gridline { stroke: var(--line); stroke-width: 1; }
.vz-tick { fill: var(--ink-3); font-size: 10.5px; }
.vz-label { fill: var(--ink-2); font-size: 12px; }
.vz-value { fill: var(--ink-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vz-bar { fill: var(--vz, var(--vz-c0)); transition: x .45s var(--ease), y .45s var(--ease), width .45s var(--ease); }
.vz-bar:hover, .vz-share-part:hover, .vz-cell:hover { filter: brightness(1.12) saturate(1.1); }
.vz-line { fill: none; stroke: var(--vz, var(--vz-c0)); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.vz-area { fill: var(--vz, var(--vz-c0)); fill-opacity: .16; stroke: none; }
.vz-dot { fill: var(--panel); stroke: var(--vz, var(--vz-c0)); stroke-width: 2; }
.vz-cell { fill: var(--vz-c3); }
.vz-cell-value { fill: var(--ink); font-size: 11px; font-weight: 600; pointer-events: none; }
.vz-stats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-3); }
.vz-stats[data-columns="1"] { --cols: 1; } .vz-stats[data-columns="2"] { --cols: 2; } .vz-stats[data-columns="3"] { --cols: 3; }
.vz-stats[data-columns="4"] { --cols: 4; } .vz-stats[data-columns="5"] { --cols: 5; } .vz-stats[data-columns="6"] { --cols: 6; }
.vz-stat { display: grid; gap: .1rem; padding: .5rem .65rem; border-radius: var(--r-md); background: var(--panel-2); min-width: 0; }
.vz-stat-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-stat-label { color: var(--ink-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.vz-share { display: grid; gap: .5rem; }
.vz-share-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.vz-share-row:not(:has(.vz-share-label)) { grid-template-columns: minmax(0, 1fr) auto; }
.vz-share-label { font: var(--fs-sm) var(--mono); color: var(--ink-2); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-share-bar { display: flex; height: 1.5rem; border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.vz-share-part { flex: 1 1 0; min-width: 3px; background: var(--vz, var(--vz-c0)); color: #fff; font-size: 11px; font-weight: 650; display: grid; place-items: center; transition: flex-grow .45s var(--ease); }
.vz-share-none { padding: 0 .6rem; color: var(--ink-3); font-size: var(--fs-xs); align-self: center; }
.vz-share-total { color: var(--ink-3); font: var(--fs-xs) var(--mono); }
.vz-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--ink-2); font-size: var(--fs-xs); }
.vz-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.vz-swatch { width: .7rem; height: .7rem; border-radius: 3px; background: var(--vz, var(--vz-c0)); }
.vz-graph .vz-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.vz-graph .vz-arrow { fill: var(--line-strong); }
.vz-node rect:first-child { fill: var(--panel); stroke: var(--line-strong); }
.vz-node:hover rect:first-child { stroke: var(--vz, var(--vz-c0)); stroke-width: 2; }
.vz-node-bar { fill: var(--vz, var(--vz-c0)); }
.vz-node-title { fill: var(--ink); font-size: 12.5px; font-weight: 650; }
.vz-node-sub { fill: var(--ink-3); font-size: 11px; }
.vz-table-wrap { overflow-x: auto; }
.vz-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.vz-table th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.vz-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.vz-num { text-align: right; font-variant-numeric: tabular-nums; }
.vz-pill { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--vz); background: color-mix(in srgb, var(--vz) 14%, transparent); }
.vz-tooltip { position: fixed; z-index: 1000; max-width: 22rem; padding: .4rem .6rem; border-radius: var(--r-sm); background: var(--ink); color: var(--panel); font-size: var(--fs-xs); line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: var(--shadow-2); }
.vz-tooltip[hidden] { display: none; }
.vz-spec summary, .vz-reference summary { cursor: pointer; color: var(--ink-3); font-size: var(--fs-sm); }
.vz-spec pre { margin: .4rem 0 0; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--code-bg); border: 1px solid var(--line); font: var(--fs-sm)/1.5 var(--mono); overflow-x: auto; }
.vz-reference-list { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .6rem 0 0; font-size: var(--fs-sm); }
.vz-reference-list dt { font-family: var(--mono); color: var(--ink); }
.vz-reference-list dd { margin: 0; color: var(--ink-2); }
.vz-start pre { font: var(--fs-sm)/1.5 var(--mono); }
.vz-preview { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.vz-preview-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.vz-preview-head h2 { margin: 0; font-size: var(--fs-lg); }

.palette-open { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); }
.palette-open[hidden] { display: none; }
.palette-open kbd { font: 600 var(--fs-xs) var(--mono); padding: .05rem .35rem; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--ink-3); }
dialog.palette { width: min(40rem, calc(100vw - 2rem)); max-height: min(34rem, 80vh); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-2); overflow: hidden; }
dialog.palette[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: vz-in .16s var(--ease); }
dialog.palette::backdrop { background: rgb(6 20 48 / .38); backdrop-filter: blur(2px); }
.palette-input { margin: 0; padding: .9rem 1.1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.05rem; background: transparent; color: var(--ink); outline: none; }
.palette-results { list-style: none; margin: 0; padding: .3rem; overflow-y: auto; }
.palette-group { padding: .55rem .7rem .2rem; color: var(--ink-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.palette-item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: var(--r-sm); cursor: pointer; }
.palette-item[aria-selected="true"] { background: var(--panel-3); }
.palette-label { font-size: var(--fs-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.palette-none { padding: 1rem; color: var(--ink-3); text-align: center; }
.palette-foot { margin: 0; padding: .45rem 1rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-xs); }
.vz-stats:is([data-columns="3"], [data-columns="4"], [data-columns="5"], [data-columns="6"]) .vz-stat-value { font-size: 1.3rem; }
/* A view file edited live: the text on the left, its views drawn beside it. */
.live-page:has(.vz-preview) .live-gauges { display: none; }
@media (min-width: 64rem) {
  .live-editor:has(> .vz-preview) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 1rem; align-items: start; }
  .live-editor:has(> .vz-preview) > * { grid-column: 1; }
  .live-editor:has(> .vz-preview) > .vz-preview { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; position: sticky; top: calc(var(--bar-h) + .5rem); max-height: calc(100vh - var(--bar-h) - 1rem); overflow: auto; }
  .live-editor:has(> .vz-preview) .vz-grid { grid-template-columns: 1fr; }
}
.vz-card.vz-changed { animation: vz-flash .9s var(--ease); }
@keyframes vz-flash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: var(--shadow-1); } }