/* NixLab · Mission Control. The kit (design-kit.css) brings Montserrat;
   this sheet brings NixLab's tokens, its themes, and every motion. Miso
   only ever changes a class, an attribute or a custom property; the CSS
   below turns each into motion. Only transform and opacity animate.
   DESIGN.md records where NixLab departs from the kit, and why. */

@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/OpenSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/OpenSans-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/OpenSans-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/OpenSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'DejaVu Sans Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/DejaVuSansMono.woff2') format('woff2'); }
@font-face { font-family: 'DejaVu Sans Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/DejaVuSansMono-Bold.woff2') format('woff2'); }


/* ---------------------------------------------------------------- tokens */

/* The accent, set in :root as the kit asks: NixLab teal. A theme
   overrides it on .app, with the surface and state blocks below. */
:root {
  --dk-200: #99f6e4; --dk-300: #5eead4; --dk-400: #2dd4bf; --dk-500: #14b8a6; --dk-600: #0d9488;
  --dk-500-rgb: 20, 184, 166; --dk-pop: #22d3ee;
}

.app {
  /* Surface: the kit's panel (white at 5%) and hairline (10%), and a
     second step of each for hover and fields, which the kit lacks. */
  --bg: #020617; --pane-a: #10162b; --pane-b: #0a0f20; --well: rgba(2, 6, 23, .6);
  --panel: rgba(255, 255, 255, .05); --panel-2: rgba(255, 255, 255, .08);
  --hair: rgba(255, 255, 255, .10); --hair-2: rgba(255, 255, 255, .16);
  --veil: rgba(2, 6, 23, .52); --floor-veil-a: rgba(2, 6, 23, .30); --floor-veil-b: rgba(2, 6, 23, .78);
  --rail-bg: rgba(2, 6, 23, .92); --pop-bg: #111831; --node: #0d1428; --log-bg: #050a19;
  --sky: radial-gradient(60% 50% at 85% 0%, rgba(var(--dk-500-rgb), .10), transparent 70%),
         radial-gradient(50% 40% at 0% 100%, rgba(153, 246, 228, .05), transparent 70%);

  /* Text */
  --title: #fff; --fg: #e2e8f0; --muted2: #cbd5e1; --muted: #94a3b8; --faint: #7686a0; --on-accent: #020617;
  --link: var(--dk-400); --logo-a: var(--dk-200); --logo-b: var(--dk-500);

  /* State: a colour never carries a state alone; chips always say the word */
  --ok: #86efac; --ok-rgb: 134, 239, 172; --warn: #fb7185; --warn-rgb: 251, 113, 133;
  --stale: #fcd34d; --run: var(--dk-300); --pending: var(--muted); --skip: rgba(148, 163, 184, .5);

  /* Light: glows are static layers whose opacity toggles */
  --glow-strength: 1;
  --glow-edge: 0 0 16px 2px rgba(var(--dk-500-rgb), .7);
  --glow-ring: inset 0 0 0 1px rgba(var(--dk-500-rgb), .30), inset 0 1px 0 rgba(153, 246, 228, .35);
  --glow-btn: 0 10px 32px -6px rgba(var(--dk-500-rgb), .7);
  --shadow-pane: -28px 0 56px -14px rgba(0, 0, 0, .75);

  /* Type (design-kit) */
  --display: 'Montserrat', system-ui, sans-serif;
  --label: 'Montserrat', system-ui, sans-serif;
  --body: 'Open Sans', system-ui, sans-serif;
  --mono: 'DejaVu Sans Mono', ui-monospace, Menlo, monospace;
  --track-display: .02em; --track-label: .05em; --track-eyebrow: .2em;
  --fs-floor: clamp(2.75rem, 5.2vw, 4.75rem); --fs-pane: clamp(1.75rem, 2.4vw, 2.25rem);
  --fs-numeral: clamp(3.5rem, 6vw, 5.5rem); --fs-kpi: 2.5rem;
  --fs-body: .875rem; --fs-small: .8125rem; --fs-mono: .78rem; --fs-label: .75rem; --fs-eyebrow: .6875rem;

  /* Shape and space */
  --r-pane: 18px; --r-card: 14px; --r-sm: 8px; --r-chip: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Layout */
  --top-h: 52px; --rail-w: 64px; --rail-step: 48px;
  --w-project: min(900px, 60vw); --w-mr: min(840px, 56vw); --w-issue: min(800px, 54vw);
  --w-commit: min(900px, 60vw); --w-pipeline: min(960px, 64vw);
  --w-side: min(720px, 50vw); --pv: min(400px, 26vw); --spine: 56px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Navigation moves on one curve and one span: every pane that arrives,
     leaves or glides, the floor behind it, the dims and the fades of a
     step. It starts gently and settles without a long crawl, so a slide
     neither lunges in its first frames nor creeps in its last. */
  --ease-move: cubic-bezier(.4, 0, .2, 1);
  /* What fades in decelerates from its first frame, so a new view never
     sits blank while a gentle start gathers pace. */
  --ease-fade: cubic-bezier(0, 0, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --spring-pop: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077 21.8%, 1.121 24.3%, 1.149 27%, 1.159 29.9%, 1.154 31.6%, 1.129 34.4%, 1.051 39.6%, 1.017 43.1%, .991 47.2%, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --t-move: 300ms; --t-fade: 180ms; --t-fast: 180ms; --stagger: 45ms;
  /* A still frame's clock: every animation's delay subtracts it. */
  --ft: 0ms;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
/* The default theme's base, slate's, before the app draws its own. */
html, body { margin: 0; height: 100%; background: #0f172a; }
body { overflow: hidden; }
.app {
  height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; color: var(--fg); background: var(--sky), var(--bg);
  font: 400 var(--fs-body)/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--dk-300); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 8px 12px; border-radius: var(--r-sm); background: var(--dk-500); color: var(--on-accent); font: 700 var(--fs-label)/1 var(--label); text-transform: uppercase; letter-spacing: var(--track-label); }
.skip:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); font-size: var(--fs-mono); }
code { font: 400 .92em/1 var(--mono); padding: 2px 5px; border-radius: 4px; background: var(--well); color: var(--dk-200); }
.muted { color: var(--muted); margin: 0 0 var(--s3); }
.small { font-size: var(--fs-small); }
.spacer { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.actions { margin-top: var(--s3); }

/* ------------------------------------------------------------------ shell */

.shell { position: relative; height: 100%; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr); }

/* The status rail */
.top { grid-column: 1 / -1; position: relative; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 0 14px 0 0; border-bottom: 1px solid var(--hair); background: var(--rail-bg); }
.wordmark { flex: none; padding: 0 18px 0 20px; font: 900 19px/1 var(--display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--title); }
.wordmark:hover { text-decoration: none; }
.wm-nix { background: linear-gradient(180deg, var(--logo-a) 5%, var(--logo-b) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wm-lab { color: var(--title); }
.trail { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.crumb { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; white-space: nowrap; border: 1px solid transparent;
  font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
  animation: fade var(--t-move) var(--ease-move) both; animation-delay: calc(0ms - var(--ft)); }
.crumb:hover { color: var(--fg); background: var(--panel); text-decoration: none; }
.crumb .mono { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted2); }
.crumb--pane { margin-left: 14px; }
.crumb--pane::before { content: ''; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; border-top: 1.5px solid var(--faint); border-right: 1.5px solid var(--faint); transform: translateY(-50%) rotate(45deg); }
.crumb[aria-current="page"] { color: var(--dk-200); background: rgba(var(--dk-500-rgb), .12); border-color: rgba(var(--dk-500-rgb), .35); }
.crumb[aria-current="page"] .mono { color: var(--dk-200); }
.cmd { display: flex; align-items: center; gap: 10px; height: 34px; width: 360px; flex: 0 1 360px; padding: 0 8px 0 12px; border-radius: 9px; cursor: pointer; text-align: left;
  border: 1px solid var(--hair-2); background: var(--panel); color: var(--muted); }
.cmd__t { flex: 1; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd:hover { border-color: rgba(var(--dk-500-rgb), .5); color: var(--muted2); }
kbd { font: 700 10px/1 var(--label); letter-spacing: var(--track-label); color: var(--muted2); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--hair-2); background: var(--panel); }
.link { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 1px solid var(--hair); white-space: nowrap; }
.link__k { font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.link__v { display: flex; align-items: center; gap: 7px; font: 400 12px/1 var(--mono); color: var(--muted2); }
.inbox { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--muted2); border: 1px solid var(--hair); }
.inbox:hover { text-decoration: none; color: var(--fg); border-color: var(--hair-2); }
.inbox b { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: var(--panel-2); color: var(--muted2); font: 900 10px/18px var(--display); }
.inbox--on b { background: var(--dk-500); color: var(--on-accent); }
.inbox--on b::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 12px rgba(var(--dk-500-rgb), .8); opacity: var(--glow-strength); }
.inbox-gap { width: 0; }
.acct { position: relative; }
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; border: 0; padding: 0;
  font: 900 10px/1 var(--display); text-transform: uppercase; color: var(--title); letter-spacing: var(--track-display);
  background: linear-gradient(160deg, #1e293b, #0f172a); box-shadow: 0 0 0 1px var(--hair-2); }
.av--me { width: 34px; height: 34px; font-size: 12px; cursor: pointer; box-shadow: 0 0 0 2px rgba(var(--dk-500-rgb), .7); }
.av--sm { width: 22px; height: 22px; font-size: 8.5px; }
.av--xs { width: 18px; height: 18px; font-size: 7px; }
.av--lg { width: 64px; height: 64px; font-size: 22px; }
/* A picture fills the circle, which shows through where it is transparent. */
.av { position: relative; overflow: hidden; }
.av__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 90; width: 270px; padding: 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--pop-bg); border: 1px solid var(--hair-2); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .8);
  animation: pop-in 220ms var(--ease) both; animation-delay: calc(0ms - var(--ft)); transform-origin: 90% 0; }
.menu__who { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-small); }
.menu__who b { color: var(--dk-200); }
.menu__i { padding: 8px 10px; border-radius: 8px; color: var(--muted2); }
.menu__i:hover { background: var(--panel-2); color: var(--fg); text-decoration: none; }
.menu__mob { display: none; }
.menu__theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; }
.menu__theme .l { margin: 0; }
.menu .btn { align-self: flex-start; }
.menu--login input { width: 100%; }
@keyframes pop-in { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.97); } }

/* The left rail: seven floors and an indicator that glides between them */
.rail { grid-row: 2; grid-column: 1; position: relative; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0;
  border-right: 1px solid var(--hair); background: var(--rail-bg); }
.rail__b { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); }
.rail__b:hover { color: var(--fg); background: var(--panel); text-decoration: none; }
.rail__b[aria-current="page"] { color: var(--dk-300); background: rgba(var(--dk-500-rgb), .10); }
.rail__dot { position: absolute; top: 6px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--dk-400); }
.rail__dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 8px var(--dk-400); opacity: var(--glow-strength); }
.tip { position: absolute; left: 52px; top: 50%; transform: translate3d(-6px, -50%, 0); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 90;
  font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg); padding: 7px 9px; border-radius: 7px;
  background: var(--pop-bg); border: 1px solid var(--hair-2); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease); }
.rail__b:hover .tip, .rail__b:focus-visible .tip { opacity: 1; transform: translate3d(0, -50%, 0); }
.rail__ind { position: absolute; left: 0; top: 14px; width: 3px; height: 42px; border-radius: 0 3px 3px 0; background: var(--dk-400);
  transform: translate3d(0, calc(var(--ri, 0) * var(--rail-step)), 0); transition: transform 400ms var(--ease); }
.rail__ind::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 14px var(--dk-400); opacity: var(--glow-strength); }

/* ------------------------------------------------------------------ atoms */

.dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dot--ok { color: var(--ok); } .dot--warn { color: var(--warn); }
.link--on .dot--ok::after, .is-run::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: pulse 1.9s var(--ease-io) infinite; animation-delay: calc(0ms - var(--ft)); }
@keyframes pulse { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-chip); white-space: nowrap; flex: none;
  font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted2);
  border: 1px solid var(--hair-2); background: var(--panel); }
.chip b { font-weight: 700; color: var(--muted); margin-left: 2px; }
.chip--btn { cursor: pointer; height: 28px; padding: 0 11px; }
.chip--btn:hover { color: var(--fg); border-color: rgba(var(--dk-500-rgb), .45); }
.chip svg.i { width: 13px; height: 13px; }
.chip--ok { color: var(--ok); border-color: rgba(var(--ok-rgb), .38); background: rgba(var(--ok-rgb), .07); }
.chip--fail { color: var(--warn); border-color: rgba(var(--warn-rgb), .45); background: rgba(var(--warn-rgb), .08); }
.chip--run { color: var(--dk-200); border-color: rgba(var(--dk-500-rgb), .6); background: rgba(var(--dk-500-rgb), .15); }
.chip--run .dot { color: var(--dk-300); }
.chip--accent { color: var(--dk-300); border-color: rgba(var(--dk-500-rgb), .4); }
.chip--accent b { color: var(--dk-200); }
.chip--pend { color: var(--muted2); border-style: dashed; }
.chip--skip, .chip--muted { color: var(--muted); }
.chip--stale { color: var(--stale); border-color: rgba(252, 211, 77, .4); }
.chip--vis-Public { color: var(--ok); border-color: rgba(var(--ok-rgb), .3); }
.chip--vis-Internal { color: var(--dk-300); border-color: rgba(var(--dk-500-rgb), .35); }
.chip--vis-Private { color: var(--warn); border-color: rgba(var(--warn-rgb), .35); }
.chip--xs { height: 18px; font-size: 10px; padding: 0 7px; }
.chip--pop { animation: chip-pop 420ms var(--spring-pop) both; animation-delay: calc(0ms - var(--ft)); }
@keyframes chip-pop { from { opacity: 0; transform: scale(.9); } }
.chip-lg .chip { height: 28px; padding: 0 12px; font-size: var(--fs-label); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 9px; border: 0; cursor: pointer; white-space: nowrap;
  font: 700 var(--fs-label)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; transition: transform 200ms var(--ease); }
.btn:hover { transform: translate3d(0, -1px, 0); text-decoration: none; }
.btn svg.i { width: 15px; height: 15px; }
.btn--solid { background: linear-gradient(180deg, var(--dk-400), var(--dk-500)); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--solid::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--glow-btn); opacity: calc(.45 * var(--glow-strength)); transition: opacity 250ms; pointer-events: none; }
.btn--solid:hover::after { opacity: var(--glow-strength); }
.btn--ghost { background: transparent; color: var(--muted2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn--ghost:hover { color: var(--dk-200); box-shadow: inset 0 0 0 1px rgba(var(--dk-500-rgb), .6); }
.btn--warn:hover { color: var(--warn); box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb), .6); }
.btn--sm { height: 30px; padding: 0 12px; font-size: var(--fs-eyebrow); }
.btn:disabled { cursor: default; opacity: .45; transform: none; }
.btn:disabled::after { opacity: 0; }
.ibtn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ibtn:hover { color: var(--fg); background: var(--panel-2); }
.kbd-btn { border: 0; background: none; padding: 0; cursor: pointer; }

.eyebrow { display: block; font: 700 var(--fs-eyebrow)/1.3 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--dk-300); }
.display { font-family: var(--display); font-weight: 900; letter-spacing: var(--track-display); text-transform: uppercase; color: var(--title); line-height: 1.04; margin: 0; }
.rule { width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--dk-300), var(--dk-600)); position: relative; }
.rule::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 14px rgba(var(--dk-500-rgb), .7); opacity: var(--glow-strength); }
.label { display: block; font: 700 var(--fs-eyebrow)/1.3 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------- the stage */

.stage { grid-row: 2; grid-column: 2; position: relative; overflow: hidden; overflow: clip; --w-top: 0px; }
/* Clipped rather than hidden, so nothing can scroll the stage: a pane that
   slides in from beyond its right edge would otherwise be scrolled to. */
.stage[data-top="project"]  { --w-top: var(--w-project); }
.stage[data-top="mr"]       { --w-top: var(--w-mr); }
.stage[data-top="issue"]    { --w-top: var(--w-issue); }
.stage[data-top="commit"]   { --w-top: var(--w-commit); }
.stage[data-top="pipeline"] { --w-top: var(--w-pipeline); }
.stage[data-top="files"]    { --w-top: var(--w-project); }
.stage[data-top="side"]     { --w-top: var(--w-side); }

/* The floor recedes while any pane is open */
.floor { position: absolute; inset: 0; overflow: auto; contain: layout paint; transform-origin: 0 40%;
  transition: transform var(--t-move) var(--ease-move); scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }
.stage:not([data-top="none"]) .floor { transform: scale(.972); }
.floor-veil { position: absolute; inset: 0; z-index: 10; opacity: 0; pointer-events: none; transition: opacity var(--t-move) var(--ease-move);
  background: linear-gradient(90deg, var(--floor-veil-a), var(--floor-veil-b) 70%); }
.stage:not([data-top="none"]) .floor-veil { opacity: 1; pointer-events: auto; cursor: pointer; }
.floor__in { padding: 30px 34px 64px; max-width: 1560px; }

/* Panes: anchored right; depth decides how far each sits from the top one */
.panes { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.pane { position: absolute; top: 0; right: 0; bottom: 0; width: var(--w-self); z-index: calc(40 - var(--d)); pointer-events: auto;
  --d: 0; --x: 0px; transform: translate3d(var(--x), 0, 0); }
.pane--project  { --w-self: var(--w-project); }
.pane--mr       { --w-self: var(--w-mr); }
.pane--issue    { --w-self: var(--w-issue); }
.pane--commit   { --w-self: var(--w-commit); }
.pane--pipeline { --w-self: var(--w-pipeline); }
.pane--files    { --w-self: var(--w-project); }
.pane--side     { --w-self: var(--w-side); }
.pane[data-depth="0"] { --d: 0; --x: 0px; }
.pane[data-depth="1"] { --d: 1; --x: calc(var(--w-self) - var(--w-top) - var(--pv)); }
.pane[data-depth="2"] { --d: 2; --x: calc(var(--w-self) - var(--w-top) - var(--pv) - var(--spine)); }
.pane[data-depth="3"] { --d: 3; --x: calc(var(--w-self) - var(--w-top) - var(--pv) - 2 * var(--spine)); }
.pane[data-leaving] { z-index: 45; pointer-events: none; }

.pane__in { position: absolute; inset: 12px 12px 12px 0; border-radius: var(--r-pane); overflow: hidden; isolation: isolate; contain: layout paint style;
  background: linear-gradient(180deg, var(--pane-a), var(--pane-b));
  box-shadow: var(--shadow-pane), inset 0 0 0 1px var(--hair); }
/* A pane moves as its step's edit script says and in no other way
   (nav/src/Algebra.hs): a frame that arrives slides in from the right;
   one that departs slides back out to the right; one that only changes
   place glides there, transform the one property that changes; a view
   that changes fades in where its frame stays put. Every one of them
   runs on --t-move and --ease-move, so the frames of a step move
   together, start together and stop together. A step that brings a pane
   in first draws it out of sight, where its slide starts ("hold"), and
   moves only once what it shows has landed. A step that changes nothing
   moves nothing, and pane nodes never move in the page, so nothing an
   earlier step started plays again. */
.pane[data-anim="glide"] { transition: transform var(--t-move) var(--ease-move); }
.pane[data-anim="hold"] > .pane__in { transform: translate3d(calc(100% + 40px), 0, 0); }
.pane[data-anim="enter"] > .pane__in { animation: pane-in var(--t-move) var(--ease-move) both; animation-delay: calc(0ms - var(--ft)); }
.pane[data-anim="cold"] > .pane__in { animation: fade 200ms linear both; animation-delay: calc(0ms - var(--ft)); }
.pane[data-leaving] > .pane__in { animation: pane-leave var(--t-move) var(--ease-move) both; }
/* A view that changes fades in below its pane's head, which stays: the
   title, and a project's description, clone line and tabs ("steady"). */
.pane__scroll[data-anim="fade"] > :not(:first-child):not(.steady) { animation: fade var(--t-fade) var(--ease-fade) both; animation-delay: calc(0ms - var(--ft)); }
.app[data-moving] .pane[data-anim="glide"], .app[data-moving] .pane[data-anim="enter"] > .pane__in, .pane[data-leaving] > .pane__in { will-change: transform; }
@keyframes pane-in { from { transform: translate3d(calc(100% + 40px), 0, 0); } }
@keyframes pane-leave { to { transform: translate3d(calc(100% + 40px), 0, 0); } }
@keyframes fade { from { opacity: 0; } }
/* One animation for each element: what a view holds does not make an
   entrance of its own when the view arrives, so a pane's content never
   rises, pops or assembles on top of its frame's motion. What shows a
   live state (a running job's pulse, a lock that flips) still moves. */
.pane .rise, .pane .w > span, .pane .pip, .pane .seg, .pane .gn--in, .pane .edges g, .pane .chip--pop, .pane .odo i::before { animation: none; }

/* The top pane's edge and ring mark it */
.pane__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 7; pointer-events: none; opacity: 0; transition: opacity var(--t-move) var(--ease-move);
  background: linear-gradient(180deg, transparent, var(--dk-300) 20%, var(--dk-400) 80%, transparent); box-shadow: var(--glow-edge); }
.pane[data-depth="0"] .pane__edge { opacity: .45; }
.pane__glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity var(--t-move) var(--ease-move);
  box-shadow: var(--glow-ring); }
.pane[data-depth="0"] .pane__glow { opacity: var(--glow-strength); }

/* The parent dims to a peek; deeper panes fold to a spine */
.pane__veil { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; background: var(--veil); opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity var(--t-move) var(--ease-move); }
.pane[data-depth="1"]:not([data-leaving]) .pane__veil { opacity: 1; pointer-events: auto; }
.pane[data-depth="1"]:not([data-leaving]) .pane__veil:hover { opacity: .45; }
.pane__spine { position: absolute; left: 0; top: 0; bottom: 0; width: var(--spine); z-index: 8; cursor: pointer; border: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; color: var(--muted2);
  background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border-right: 1px solid var(--hair);
  opacity: 0; pointer-events: none; transition: opacity var(--t-move) var(--ease-move); }
.pane:not([data-depth="0"]):not([data-depth="1"]):not([data-leaving]) .pane__spine { opacity: 1; pointer-events: auto; }
.pane__spine svg.i { color: var(--dk-300); }
.pane__spine .v { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; max-height: 70%; text-overflow: ellipsis;
  font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; }
.pane__spine .v.k { color: var(--dk-300); }
.pane__spine:hover .v { color: var(--fg); }

.pane__body { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pane__bar { display: flex; align-items: center; gap: 12px; height: 50px; flex: none; padding: 0 12px 0 22px; border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--panel), transparent); }
.pane__kind { display: flex; align-items: center; gap: 8px; flex: none; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--dk-300); }
.pane__kind svg.i { width: 15px; height: 15px; }
.pane__crumbs { display: flex; align-items: center; min-width: 0; overflow: hidden; font: 400 12px/1.6 var(--mono); white-space: nowrap; }
.pc { position: relative; flex: none; padding: 2px 6px; border-radius: 6px; color: var(--muted); }
.pc + .pc { margin-left: 12px; }
.pc:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 50%; width: 5px; height: 5px; border-top: 1.5px solid var(--faint); border-right: 1.5px solid var(--faint); transform: translateY(-50%) rotate(45deg); }
a.pc:hover { color: var(--fg); background: var(--panel); text-decoration: none; }
.pc--here { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.pane__acts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pane__back { margin-left: -8px; }
/* Back keeps its place when it has nowhere to go, so the bar never shifts
   under the pointer as a pane gains or loses its history. */
.pane__back[data-shown="no"] { visibility: hidden; }
/* The narrow view's one way down; the wide view has Back, the veil and the spines. */
.pane__down { display: none; }
.pane__scroll { flex: 1; overflow: auto; padding: 24px 28px 40px; scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }

/* --------------------------------------------------- motion primitives */

/* Content rises once, staggered by --i (clamped to 12 in the view) */
.rise { animation: rise 600ms var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * var(--stagger) - var(--ft)); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* Titles rise word by word, each word in its own mask */
.tw { display: inline; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; animation: word 700ms var(--ease) both; animation-delay: calc(80ms + var(--w) * 40ms - var(--ft)); }
@keyframes word { from { transform: translate3d(0, 105%, 0); } }

/* Odometer: each digit is a column that rolls to its value */
.odo-w { display: inline-flex; }
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo i { display: inline-block; width: 1ch; height: 1em; line-height: 1; overflow: hidden; font-style: normal; }
.odo i::before { content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9'; white-space: pre; display: block; text-align: center;
  transform: translate3d(0, calc(var(--d) * -1em), 0); transition: transform 1100ms var(--ease) calc(var(--k) * 70ms);
  animation: odo-in 1100ms var(--ease) both; animation-delay: calc(var(--k) * 70ms - var(--ft)); }
@keyframes odo-in { from { transform: translate3d(0, 0, 0); } }


/* ------------------------------------------------------------------ floor */

.errbar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; color: var(--warn);
  border: 1px solid rgba(var(--warn-rgb), .45); background: rgba(var(--warn-rgb), .08); font: 400 12px/1.5 var(--mono); }
.errbar span { flex: 1; word-break: break-word; }
.floor__head { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.floor__titles { flex: 1; min-width: 0; }
.floor__title { font-size: var(--fs-floor); margin: 12px 0 14px; outline: none; }
.tagline { margin: 16px 0 0; color: var(--muted2); font-size: 15px; max-width: 62ch; }
.floor__acts { display: flex; gap: 10px; align-items: center; }

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.count { position: relative; overflow: hidden; padding: 16px 18px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--hair); min-height: 118px; display: flex; flex-direction: column; gap: 8px; }
.count:first-child { border-color: rgba(var(--dk-500-rgb), .45); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--dk-500-rgb), .16), transparent 55%), var(--panel); }
.count:first-child .count__k { color: var(--dk-300); }
.count:first-child .count__v { color: var(--dk-200); }
.count__k { font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.count__v { font: 900 var(--fs-kpi)/1 var(--display); color: var(--title); letter-spacing: var(--track-display); }
.count__s { margin-top: auto; color: var(--muted); font-size: var(--fs-small); }
.toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }

.floor__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
.grp { margin-bottom: 26px; content-visibility: auto; contain-intrinsic-size: auto 280px; }
.grp__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.grp__name { margin: 0; font: 900 13px/1 var(--display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--title); }
.grp__n { font: 700 var(--fs-eyebrow)/1 var(--label); color: var(--muted); letter-spacing: var(--track-eyebrow); padding: 4px 7px; border-radius: 6px; border: 1px solid var(--hair); }
.grp__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair-2), transparent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.tiles--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* A tile lifts, and a glow layer fades in under it */
.tile { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 14px 15px 12px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--hair);
  color: var(--fg); transition: transform 250ms var(--ease); }
.tile:hover { transform: translate3d(0, -2px, 0); text-decoration: none; }
.tile::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 250ms;
  box-shadow: 0 0 0 1px rgba(var(--dk-500-rgb), .55), 0 18px 40px -18px rgba(var(--dk-500-rgb), .7); }
.tile:hover::before, .tile:focus-visible::before { opacity: var(--glow-strength); }
.tile__row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tile__row svg.i { width: 15px; height: 15px; color: var(--dk-400); }
.tile__ns { font: 400 12px/1.3 var(--mono); color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__row .chip { margin-left: auto; height: 19px; font-size: 10px; padding: 0 7px; background: none; }
.tile__name { font: 900 17px/1.15 var(--display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--title); word-break: break-word; }
.tile__desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.tile__foot { display: flex; align-items: center; gap: 8px; padding-top: 9px; margin-top: auto; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.tile__meta { margin-left: auto; font: 400 11px/1 var(--mono); }

.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.todo { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.panel .todo:first-of-type { border-top: 0; padding-top: 2px; }
.todo__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo__top .mono { font-size: 12px; color: var(--dk-200); }
.todo__main p { margin: 4px 0 0; color: var(--muted2); font-size: var(--fs-small); line-height: 1.45; }
.when { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--muted); }
.more, .panel__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; }
.more svg.i { width: 13px; height: 13px; }
.todos { list-style: none; margin: 0; padding: 0; max-width: 980px; }
.todo--row { grid-template-columns: 22px 1fr auto; align-items: start; padding: 14px 4px; }
.ms { display: block; padding: 10px 0; border-top: 1px solid var(--hair); color: var(--fg); }
.ms:first-of-type { border-top: 0; padding-top: 2px; }
.ms:hover { text-decoration: none; }
.ms:hover .ms__t { color: var(--dk-200); }
.ms__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.ms__t { font-weight: 600; font-size: var(--fs-small); }
.ms__n { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--muted); }
.ms__m { display: block; color: var(--muted); font-size: 12px; }
.ms__due { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--mono); color: var(--muted2); }
.ms__due svg.i { width: 13px; height: 13px; }
.ms__meta { margin-bottom: 18px; }
.msrow { display: flex; align-items: center; gap: 12px; }
.msrow .ms { flex: 1; }
.console-wrap { max-width: 1080px; }

/* ----------------------------------------------------------- pane parts */

.head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.head__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.head__title { font-size: var(--fs-pane); outline: none; }
.head__ns { font: 700 13px/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.head__ns a { color: var(--muted); }
.head__ns a:hover { color: var(--dk-300); }
.head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: var(--fs-small); }
.head__meta .mono { color: var(--muted2); }
.head__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.head__acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.head--status { align-items: flex-end; }
.vis { display: flex; align-items: center; gap: 8px; }
.vis .l { margin: 0; }
.flow { display: inline-flex; align-items: center; gap: 6px; }
.flow svg.i { width: 14px; height: 14px; color: var(--faint); }
.flow .br { color: var(--dk-200); }
.mrnum { margin-right: 12px; color: transparent; -webkit-text-stroke: 1.2px var(--dk-300); }
.desc { color: var(--muted2); font-size: 14.5px; margin: 0 0 14px; max-width: 64ch; }
.clone { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 9px; background: var(--well); border: 1px solid var(--hair);
  font: 400 12px/1 var(--mono); color: var(--muted2); max-width: 100%; overflow: hidden; }
.clone__p { color: var(--dk-300); }
.clone__u { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tabs: only the underline moves */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hair); margin: 20px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 9px 12px; white-space: nowrap;
  font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.tab:hover { color: var(--fg); text-decoration: none; }
.tab b { font: 700 10px/1 var(--label); padding: 2px 5px; border-radius: 5px; background: var(--panel-2); color: var(--muted2); }
.tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--dk-400);
  transform: scaleX(0); transition: transform 300ms var(--ease); }
.tab.on { color: var(--dk-200); }
.tab.on::after { transform: scaleX(1); }
.tabbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.tabbar .muted { margin: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.branchbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.crumbs { color: var(--muted); }
.branches { color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree { border-radius: 12px; border: 1px solid var(--hair); overflow: hidden; }
.tree__r { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--hair); font: 400 12.5px/1 var(--mono); color: var(--muted2); }
.tree__r:first-child { border-top: 0; }
.tree__r:hover { background: var(--panel-2); color: var(--dk-200); text-decoration: none; }
.tree__r svg.i { width: 15px; height: 15px; color: var(--muted); }
.tree__r.dir svg.i { color: var(--dk-400); }
.readme { margin-top: 14px; }
.statuscol { display: flex; flex-direction: column; gap: 8px; }
.statuscol .label { margin-top: 10px; display: flex; align-items: center; gap: 4px; }
.statuscol .label:first-child { margin-top: 0; }
.stat { padding: 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--well); }
.mrrow { position: relative; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--well); transition: transform 250ms var(--ease); }
.mrrow:hover { transform: translate3d(3px, 0, 0); }
.mrrow__t { display: flex; gap: 8px; align-items: baseline; color: var(--fg); font-weight: 600; font-size: var(--fs-small); line-height: 1.35; }
.mrrow__t .mono { color: var(--dk-300); font-weight: 400; }
.mrrow__m { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; font: 400 11px/1 var(--mono); color: var(--muted); }

.rows { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.rowl { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--hair); color: var(--fg); font-size: var(--fs-small); flex-wrap: wrap; }
.rowl:first-child { border-top: 0; }
a.rowl:hover, .rowl:hover { background: var(--panel); text-decoration: none; }
.rowl__n { color: var(--dk-300); min-width: 3ch; }
.rowl__t { flex: 1; min-width: 12ch; color: var(--fg); }
.rowl__by, .rowl__br { color: var(--muted); font-size: 12px; }
.commits { display: flex; flex-direction: column; }
.cm { display: grid; grid-template-columns: 11ch minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: var(--fs-small); }
.cm:first-child { border-top: 0; }
.cm__sha { color: var(--dk-300); }
.cm__t { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm__by { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Panels, tables, forms */
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 14px; }
.panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel__t { margin: 0; font: 900 13px/1 var(--display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--title); }
.panel__n { margin-left: auto; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.note { color: var(--muted); font-size: var(--fs-small); margin: 0 0 12px; line-height: 1.55; }
.note .mono { color: var(--dk-200); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tbl-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }
.tbl th { text-align: left; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding: 0 8px 9px 0; border-bottom: 1px solid var(--hair); }
.tbl td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.mono { color: var(--muted2); }
.who { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
/* The API floor: a theory's purpose under its heading. */
.api__for { margin: -4px 0 12px; color: var(--muted2); font-size: var(--fs-small); line-height: 1.5; max-width: 72ch; }
/* One column width for every theory, so the tables line up down the floor;
   a phone scrolls each table instead, as it does every wide one. */
@media (min-width: 761px) {
  .api .tbl { table-layout: fixed; width: 100%; }
  .api .tbl th:nth-child(1) { width: 19%; }
  .api .tbl th:nth-child(2) { width: 33%; }
  .api .tbl td { overflow-wrap: anywhere; }
}
/* The Keys page's picture: the one the forge keeps, beside its controls. */
.pic { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; }
.pic__main { flex: 1; min-width: 0; }
.pic__field input[type=file] { width: 100%; max-width: 420px; padding: 7px; font-size: var(--fs-small); color: var(--muted2); cursor: pointer; }
.pic__field input[type=file]::file-selector-button { margin-right: 12px; height: 28px; padding: 0 12px; border: 0; border-radius: 7px; cursor: pointer;
  font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; background: transparent; color: var(--muted2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.pic__field input[type=file]:enabled:hover::file-selector-button { color: var(--dk-200); box-shadow: inset 0 0 0 1px rgba(var(--dk-500-rgb), .6); }
/* While an upload is sent the field is held, and says so. */
.pic__field input[type=file]:disabled { cursor: default; opacity: .5; }
.pic__field input[type=file]:disabled::file-selector-button { cursor: default; }
.pic__note { margin: 12px 0 4px; font-size: var(--fs-small); line-height: 1.5; }
.pic__note--ok { color: var(--ok); }
.pic__note--warn { color: var(--warn); }
.head--who { align-items: center; }
.appr .is-tip { color: var(--dk-200); }
.appr--new { animation: rise 500ms var(--ease) both; animation-delay: calc(0ms - var(--ft)); }
label.l, .l { display: block; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dk-300); margin: 12px 0 6px; }
input, textarea, select { width: 100%; padding: 9px 11px; background: var(--well); color: var(--fg); border: 1px solid var(--hair-2); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body); }
select { width: auto; padding: 7px 9px; }
textarea { min-height: 110px; resize: vertical; font-family: var(--mono); font-size: var(--fs-mono); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--dk-400); box-shadow: 0 0 0 3px rgba(var(--dk-500-rgb), .18); }
input.short { width: 13rem; }
.acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.refusal { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; color: var(--warn); border: 1px solid rgba(var(--warn-rgb), .45); background: rgba(var(--warn-rgb), .08); font: 400 12px/1.5 var(--mono); }
.code, pre.code { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--well); font: 400 12px/1.6 var(--mono); color: var(--muted2); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.code--blob { white-space: pre; }
.comment { border-left: 2px solid var(--dk-500); padding: 6px 0 6px 14px; margin: 10px 0; }
.comment__by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* Markdown */
.md { line-height: 1.6; color: var(--muted2); font-size: 14px; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--track-display); color: var(--title); margin: 1.1rem 0 .5rem; }
.md h1 { font-size: 1.3rem; } .md h2 { font-size: 1.1rem; } .md h3 { font-size: .95rem; } .md h4 { font-size: .85rem; }
.md p, .md ul, .md ol, .md blockquote, .md table, .md pre { margin: .6rem 0; }
.md ul, .md ol { padding-left: 1.5rem; } .md li { margin: .2rem 0; }
.md blockquote { border-left: 3px solid var(--hair-2); padding: .2rem .9rem; color: var(--muted); }
.md pre { padding: 10px 12px; border-radius: 10px; background: var(--well); border: 1px solid var(--hair); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md a { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.md hr { border: 0; border-top: 1px solid var(--hair); margin: 1rem 0; }
.md strong { color: var(--fg); }
a.mention { font-weight: 700; }

/* Diffs and review */
pre.diff, .review { margin: 0; border-radius: 12px; border: 1px solid var(--hair); background: var(--log-bg); font: 400 12px/1.6 var(--mono); color: var(--muted2); overflow-x: auto; }
pre.diff { padding: 10px 14px; white-space: pre; }
.review { padding: 6px 0; }
.review pre.dl { margin: 0; padding: 0 12px; white-space: pre-wrap; word-break: break-word; font: inherit; }
.review pre.line { cursor: pointer; }
.review pre.line:hover { background: var(--panel-2); }
.review .ln { display: inline-block; width: 3.2rem; color: var(--faint); text-align: right; margin-right: .8rem; user-select: none; }
.d-add { color: var(--ok); } .d-del { color: var(--warn); } .d-hunk { color: var(--dk-300); } .d-file, .d-meta { color: var(--dk-200); }
.review .d-add { background: rgba(var(--ok-rgb), .06); } .review .d-del { background: rgba(var(--warn-rgb), .06); }
.thread { margin: 6px 12px 10px 4.6rem; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(var(--dk-500-rgb), .45); background: var(--panel); font-family: var(--body); }
.thread.resolved { opacity: .7; border-color: var(--hair); }

/* ------------------------------------------------------------- status */

/* The pip strip: one pip per job, the universal "bring up status" */
.pips { display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px 5px 9px; border-radius: 9px; border: 1px solid var(--hair); background: var(--well);
  color: var(--muted2); transition: transform 350ms var(--ease), opacity 300ms; max-width: 100%; }
.pips:hover { text-decoration: none; border-color: rgba(var(--dk-500-rgb), .45); }
.pips__row { display: inline-flex; align-items: center; gap: 3px; }
.pip { position: relative; display: inline-block; width: 7px; height: 12px; border-radius: 2px; background: var(--skip); flex: none;
  transition: transform 450ms var(--spring); animation: chip-pop 420ms var(--spring-pop) both; animation-delay: calc(var(--k) * 12ms - var(--ft)); }
/* The strip fans out on hover */
.pips:hover .pip { transform: translate3d(calc(var(--k) * 1.6px), 0, 0); }
.pip--ok { background: var(--ok); }
.pip--fail { background: var(--warn); width: 9px; height: 9px; transform: rotate(45deg); border-radius: 1px; }
.pips:hover .pip--fail { transform: translate3d(calc(var(--k) * 1.6px), 0, 0) rotate(45deg); }
.pip--pend { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pending); }
.pip--skip { height: 3px; }
/* Running pips breathe, each a little out of phase. The breath is a layer
   of its own: a second opacity animation on the pip, beside its pop, keeps
   Chrome from compositing either, and the page then restyles every frame. */
.pip--run { background: transparent; }
.pip--run::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--dk-300);
  animation: breathe 1.5s ease-in-out infinite; animation-delay: calc(var(--k) * -110ms - var(--ft)); }
@keyframes breathe { 50% { opacity: .55; } }
.pips__more { font: 400 11px/1 var(--mono); color: var(--muted); }
.pips__t { font: 700 10.5px/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
.pips__t--ok { color: var(--ok); } .pips__t--fail { color: var(--warn); } .pips__t--run { color: var(--dk-300); } .pips__t--pend { color: var(--muted2); }
.go { display: inline-grid; color: var(--dk-300); opacity: 0; transition: opacity 200ms; }
.go svg.i { width: 13px; height: 13px; }
.pips:hover .go, .pips:focus-visible .go { opacity: 1; }
/* The strip launches into its pane, and lands back when it closes */
.pips.launched { transform: scale(1.25); opacity: 0; transition: transform 350ms var(--ease), opacity 350ms var(--ease); }

/* Segments: one per job, filled from the left as the pane mounts */
.segs { display: flex; gap: 3px; height: 6px; width: 100%; }
.seg { flex: 1; position: relative; overflow: hidden; border-radius: 3px; background: var(--panel-2); transform-origin: 0 50%;
  animation: seg-fill 600ms var(--ease) both; animation-delay: calc(220ms + var(--k) * 40ms - var(--ft)); }
@keyframes seg-fill { from { transform: scaleX(0); } }
.seg--ok { background: rgba(var(--ok-rgb), .75); }
.seg--fail { background: var(--warn); }
.seg--run { background: rgba(var(--dk-500-rgb), .35); }
.seg--pend { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
/* A sweep runs along running work */
.seg--run::after, .gn--run::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(90deg, transparent, var(--dk-200), transparent); transform: translate3d(-100%, 0, 0);
  animation: sweep 1.8s linear infinite; animation-delay: calc(0ms - var(--ft)); }
@keyframes sweep { to { transform: translate3d(100%, 0, 0); } }
.segs-lg { flex: 1; }
.segs-lg .segs { height: 10px; gap: 4px; }

/* The gate: one lock per condition; the CI lock brings up status */
.gate { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 20px; margin: 4px 0 16px;
  background: radial-gradient(90% 160% at 100% 0%, rgba(var(--dk-500-rgb), .10), transparent 60%), var(--well); border: 1px solid rgba(var(--dk-500-rgb), .28); }
.gate__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.gate__head > svg.i { color: var(--dk-300); }
.card__t { margin: 0; font: 900 14px/1 var(--display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--title); }
.locks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.lock { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--hair); background: var(--panel); color: var(--fg); }
a.lock:hover { text-decoration: none; }
.lock__top { display: flex; align-items: center; gap: 10px; }
.lock__ic { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid currentColor; color: var(--muted); }
.lock__ic svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.lock__k { display: block; font: 700 var(--fs-eyebrow)/1.3 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.lock__who { display: inline-flex; align-items: center; gap: 6px; }
.lock__v { display: block; font: 900 12.5px/1.25 var(--display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--muted2); }
.lock__s { font-size: 12px; color: var(--muted); line-height: 1.45; }
.lock__s .mono { font-size: 12px; color: var(--muted2); }
.lock--ok { border-color: rgba(var(--ok-rgb), .3); }
.lock--ok .lock__ic, .lock--ok .lock__v { color: var(--ok); }
.lock--stale { border-color: rgba(252, 211, 77, .3); }
.lock--stale .lock__ic, .lock--stale .lock__v { color: var(--stale); }
.lock--wait .lock__ic { border-style: dashed; }
.lock--ci { cursor: pointer; transition: transform 250ms var(--ease); }
.lock--ci:hover { transform: translate3d(0, -2px, 0); }
.lock--run { border-color: rgba(var(--dk-500-rgb), .55); background: linear-gradient(160deg, rgba(var(--dk-500-rgb), .16), rgba(var(--dk-500-rgb), .03)); }
.lock--run .lock__ic, .lock--run .lock__v { color: var(--dk-200); }
.lock--run .lock__ic::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--dk-300);
  animation: ring 1.9s var(--ease-io) infinite; animation-delay: calc(0ms - var(--ft)); }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.lock--fail { border-color: rgba(var(--warn-rgb), .45); }
.lock--fail .lock__ic, .lock--fail .lock__v { color: var(--warn); }
.lock--pend .lock__ic { border-style: dashed; }
.lock__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dk-300); }
.lock__cta svg.i { width: 13px; height: 13px; transition: transform 250ms var(--ease); }
.lock--ci:hover .lock__cta svg.i { transform: translate3d(3px, 0, 0); }
.lock--flip .lock__ic { animation: flip 750ms var(--ease) both; animation-delay: calc(0ms - var(--ft)); }
.lock--flip .lock__ic::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--ok);
  animation: burst 1s var(--ease) both; animation-delay: calc(80ms - var(--ft)); }
.lock--flip::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(var(--ok-rgb), .7), 0 0 40px -6px rgba(var(--ok-rgb), .7); animation: unlit 1.4s var(--ease) both; animation-delay: calc(0ms - var(--ft)); }
@keyframes flip { from { transform: rotate(-200deg) scale(.3); opacity: 0; } }
@keyframes burst { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes unlit { to { opacity: 0; } }
.btn--merge { margin-left: auto; }
.btn--ghost.btn--merge { color: var(--muted); }
/* The gate arms: a glow comes up and a sheen crosses the merge button */
.gate::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms;
  box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), .5), 0 0 48px -12px rgba(var(--ok-rgb), .5); }
.gate--ready { border-color: rgba(var(--ok-rgb), .4); }
.gate--ready::before { opacity: var(--glow-strength); }
.gate--ready .btn--merge { overflow: hidden; }
.gate--ready .btn--merge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translate3d(-120%, 0, 0); animation: sheen 900ms var(--ease-io) both; animation-delay: calc(300ms - var(--ft)); }
@keyframes sheen { to { transform: translate3d(120%, 0, 0); } }

/* The pipeline pane */
.bignum { margin: 0; font: 900 var(--fs-numeral)/.9 var(--display); letter-spacing: var(--track-display); color: var(--title); outline: none; }
.bignum .h { color: transparent; -webkit-text-stroke: 1.5px var(--dk-300); margin-right: 2px; }
.kv { display: grid; grid-template-columns: auto auto; gap: 6px 16px; margin: 0; font-size: 12.5px; }
.kv dt { font: 700 var(--fs-eyebrow)/1.6 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); text-align: right; }
.kv dd { margin: 0; font: 400 12px/1.6 var(--mono); color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .clock { color: var(--dk-200); }
.runstrip { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px; flex-wrap: wrap; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.legend > span { display: inline-flex; align-items: center; gap: 4px; }
.lg { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 3px; }
.lg--ok { background: var(--ok); } .lg--run { background: var(--dk-400); } .lg--pend { box-shadow: inset 0 0 0 1.5px var(--hair-2); } .lg--fail { background: var(--warn); }

.graph-wrap { overflow-x: auto; overflow-y: hidden; margin: 0 -4px 6px; padding: 0 4px 8px; scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }
.graph { position: relative; width: 880px; height: var(--gh); }
.edges { position: absolute; left: 0; top: 0; width: 880px; height: var(--gh); overflow: visible; }
.edges path { fill: none; stroke-width: 1.6; }
.edges .e-ok { stroke: rgba(var(--ok-rgb), .55); }
.edges .e-run { stroke: var(--dk-400); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(45, 212, 191, .8)); }
.edges .e-pend, .edges .e-wait, .edges .e-skip { stroke: var(--hair-2); stroke-dasharray: 3 5; }
.edges .e-fail { stroke: rgba(var(--warn-rgb), .6); }
.edges .e-gate { stroke: rgba(var(--dk-500-rgb), .35); stroke-dasharray: 3 5; }
.edges .e-bus { stroke: rgba(var(--dk-500-rgb), .35); stroke-width: 2; }
.edges g { animation: fade 600ms var(--ease) both; animation-delay: calc(420ms - var(--ft)); }
.col-l { position: absolute; top: 0; font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.col-l b { color: var(--dk-300); margin-right: 6px; }
.gn { position: absolute; left: var(--gx); top: var(--gy); width: var(--gw); display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 42px;
  border-radius: 11px; background: var(--node); border: 1px solid var(--hair-2); color: var(--muted2); transition: transform 250ms var(--ease); }
a.gn:hover { transform: translate3d(0, -2px, 0); text-decoration: none; }
/* The graph assembles, column by column */
.gn--in { animation: assemble 500ms var(--ease) both; animation-delay: calc(200ms + var(--c) * 120ms + var(--i) * 30ms - var(--ft)); }
@keyframes assemble { from { opacity: 0; transform: scale(.9); } }
/* A node whose status changed pops */
.gn--pop { animation: chip-pop 420ms var(--spring-pop) both; animation-delay: calc(0ms - var(--ft)); }
.gn__ic { position: relative; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid currentColor; }
.gn__ic svg.i { width: 11px; height: 11px; stroke-width: 2.8; }
.gn__kind { font: 700 10px/1 var(--label); letter-spacing: var(--track-eyebrow); color: var(--muted); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--hair-2); }
.gn__name { font: 700 12.5px/1.2 var(--mono); color: var(--fg); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn__t { font: 700 10px/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.gn--ok { color: var(--ok); }
.gn--ok .gn__ic { background: rgba(var(--ok-rgb), .1); }
.gn--fail { color: var(--warn); border-color: rgba(var(--warn-rgb), .5); }
.gn--pend { color: var(--muted); border-style: dashed; }
.gn--pend .gn__ic { border-style: dashed; }
.gn--run { color: var(--dk-300); overflow: hidden; border-color: rgba(var(--dk-500-rgb), .7); background: linear-gradient(90deg, rgba(var(--dk-500-rgb), .2), var(--node) 70%); }
.gn--run .gn__t { color: var(--dk-200); }
.gn--run::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: var(--glow-strength);
  box-shadow: 0 0 0 1px rgba(var(--dk-500-rgb), .25), 0 0 28px -6px rgba(var(--dk-500-rgb), .8); }
.gn--run::after { top: auto; height: 2px; }
.gn--run .gn__ic i { width: 6px; height: 6px; border-radius: 50%; background: var(--dk-300); }
.gn--run .gn__ic::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--dk-300);
  animation: ring 1.9s var(--ease-io) infinite; animation-delay: calc(0ms - var(--ft)); }
.gn--chip { height: 30px; padding: 0 8px; gap: 7px; border-radius: 8px; }
.gn--chip .gn__ic { width: 16px; height: 16px; }
.gn--chip .gn__kind { display: none; }
.gn--chip .gn__name { font-size: 11.5px; }
.gn--big { height: auto; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
.gn--big .gn__name { flex: none; font-size: 13px; }
.gn--big .k { display: flex; align-items: center; gap: 6px; font: 700 10px/1 var(--label); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); }
.gn--big .k svg.i { width: 13px; height: 13px; }
.gn--big .s { font: 400 11px/1.5 var(--mono); color: var(--muted); }
.gn--big.gn--ok .k { color: var(--ok); }
.gn__sha { color: var(--dk-200); }
.gn--gate { color: var(--dk-200); align-items: center; text-align: center; border-color: rgba(var(--dk-500-rgb), .4); background: radial-gradient(120% 80% at 50% 0%, rgba(var(--dk-500-rgb), .16), var(--node) 70%); }
.gn--gate .bigic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1.5px solid rgba(var(--dk-500-rgb), .6); margin: 2px auto 4px; }
.gn--gate .bigic svg.i { width: 20px; height: 20px; }
.gn--gate .k--c { justify-content: center; width: 100%; color: var(--dk-300); }
.gn--gate .row { display: flex; justify-content: space-between; width: 100%; font: 400 11px/1 var(--mono); color: var(--muted); padding: 6px 0; border-top: 1px solid var(--hair); flex-wrap: nowrap; }
.gn--gate .row b { font-weight: 400; color: var(--dk-200); }
.gn--ready { color: var(--ok); border-color: rgba(var(--ok-rgb), .5); }
/* Comets run along the edges into running nodes */
.comet { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: 2px; overflow: hidden; pointer-events: none; }
.comet::after { content: ''; position: absolute; top: -1px; height: 4px; width: 26px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--dk-200));
  transform: translate3d(-30px, 0, 0); animation: comet 1.25s linear infinite; animation-delay: calc(0ms - var(--ft)); }
@keyframes comet { to { transform: translate3d(calc(var(--cw) + 4px), 0, 0); } }
.planlog { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--well); font: 400 12px/1.7 var(--mono); color: var(--muted2); white-space: pre-wrap; }

/* The job pane */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 18px; }
.fact { position: relative; overflow: hidden; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--panel); min-width: 0; }
.fact .label { margin-bottom: 7px; }
.fact__v { font: 400 12px/1.4 var(--mono); color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact--run { border-color: rgba(var(--dk-500-rgb), .6); background: rgba(var(--dk-500-rgb), .1); }
.log { border-radius: 14px; border: 1px solid var(--hair); background: var(--log-bg); overflow: hidden; }
.log__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.log__bar > .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__empty { margin: 0; padding: 18px 16px; color: var(--muted); }
.log__tail, .log__full { margin: 0; padding: 10px 0 14px; font: 400 12px/1.72 var(--mono); color: var(--muted2); overflow-x: auto; }
.log__full { padding: 10px 14px 14px; white-space: pre; }
.log__tail { counter-reset: ln var(--ln0); white-space: pre; }
.log__tail > span { display: block; padding: 0 14px 0 0; }
.log__tail > span::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 56px; padding-right: 14px; text-align: right; color: var(--faint); user-select: none; }
/* A live log's last line carries a caret */
.log--live { background: linear-gradient(90deg, rgba(var(--dk-500-rgb), .14), transparent 70%); }
.log--live::after { content: ''; display: inline-block; width: 8px; height: 14px; margin-left: 4px; vertical-align: -2px; background: var(--dk-300);
  animation: caret 1s steps(2, jump-none) infinite; animation-delay: calc(0ms - var(--ft)); }
@keyframes caret { 50% { opacity: 0; } }

/* ------------------------------------------------------ palette, toasts */

.pal-none { display: none; }
.pal { position: fixed; inset: 0; z-index: 100; }
.pal__back { position: absolute; inset: 0; background: rgba(2, 6, 23, .66); animation: fade 220ms ease both; animation-delay: calc(0ms - var(--ft)); }
.pal__box { position: absolute; left: 50%; top: 13vh; width: min(700px, calc(100vw - 32px)); transform: translate3d(-50%, 0, 0);
  border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--pane-a), var(--pane-b)); border: 1px solid rgba(var(--dk-500-rgb), .35);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair);
  animation: pal-in 220ms var(--ease) both; animation-delay: calc(0ms - var(--ft)); transform-origin: 50% 0; }
@keyframes pal-in { from { opacity: 0; transform: translate3d(-50%, -10px, 0) scale(.965); } }
.pal__box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--dk-300), transparent); }
.pal__in { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--hair); }
.pal__in svg.i { color: var(--dk-300); width: 20px; height: 20px; }
.pal__q { flex: 1; border: 0; background: none; padding: 0; font: 400 17px/1 var(--body); color: var(--title); }
.pal__q:focus { box-shadow: none; }
.pal__res { list-style: none; margin: 0; padding: 6px 8px 8px; max-height: 52vh; overflow: auto; }
.pal__g { padding: 12px 10px 6px; }
.pal__r { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--muted2); font-size: 13.5px; cursor: pointer;
  animation: rise 400ms var(--ease) both; animation-delay: calc(60ms + var(--i, 0) * 25ms - var(--ft)); }
.pal__r svg.i { color: var(--muted); }
.pal__l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__h { font: 400 12px/1 var(--mono); color: var(--muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__r:hover { background: var(--panel); }
.pal__r[aria-selected="true"] { background: rgba(var(--dk-500-rgb), .12); color: var(--title); box-shadow: inset 0 0 0 1px rgba(var(--dk-500-rgb), .35); }
.pal__r[aria-selected="true"]::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--dk-300); }
.pal__r[aria-selected="true"] svg.i { color: var(--dk-300); }
.pal__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.pal__foot span { display: inline-flex; align-items: center; gap: 6px; }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 110; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; max-width: 460px; padding: 10px 8px 10px 16px; border-radius: 14px; pointer-events: auto;
  background: var(--pop-bg); border: 1px solid var(--hair-2); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .8); font-size: var(--fs-small); color: var(--fg);
  animation: toast-in 320ms var(--ease) both; animation-delay: calc(0ms - var(--ft)); }
.toast--ok { border-color: rgba(var(--ok-rgb), .45); }
.toast--warn { border-color: rgba(var(--warn-rgb), .5); }
.toast--info { border-color: rgba(var(--dk-500-rgb), .5); }
.toast__t { flex: 1; white-space: pre-wrap; word-break: break-word; max-height: 30vh; overflow: auto; }
.toast__a { font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.98); } }

/* ------------------------------------------------- names, gaps, fields */

/* A handle, path, ref or attribute is shown as it is spelt, wherever
   display or label type would upper-case it: the forge tells lc from LC.
   In a badge it takes label tracking, since .2em is for capitals. */
.app .verbatim { text-transform: none; }
.app .chip.verbatim, .app :is(.eyebrow, .label, .lock__k) .verbatim { letter-spacing: var(--track-label); }

/* A graph node's list item holds its link and lays out nothing itself */
.gn-li { display: contents; }

/* A pane whose subject is not there says so where its body would be */
.gone { margin: 6px 0 18px; padding: 16px 18px; max-width: 64ch; border-radius: var(--r-card); border: 1px dashed var(--hair-2); background: var(--panel); }
.gone .eyebrow { margin-bottom: 8px; }
.gone__t { margin: 0; color: var(--fg); font-size: 14.5px; }
.gone__s { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-small); }
.gone__s .mono { color: var(--muted2); }

input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1439px) {
  .app { --pv: min(320px, 24vw); }
  .pane { width: min(var(--w-self), calc(100vw - var(--rail-w) - var(--pv) - 2 * var(--spine))); }
  .stage { --cap: calc(100vw - var(--rail-w) - var(--pv) - 2 * var(--spine)); }
  .stage[data-top="project"]  { --w-top: min(var(--w-project), var(--cap)); }
  .stage[data-top="mr"]       { --w-top: min(var(--w-mr), var(--cap)); }
  .stage[data-top="issue"]    { --w-top: min(var(--w-issue), var(--cap)); }
  .stage[data-top="commit"]   { --w-top: min(var(--w-commit), var(--cap)); }
  .stage[data-top="pipeline"] { --w-top: min(var(--w-pipeline), var(--cap)); }
  .stage[data-top="files"]    { --w-top: min(var(--w-project), var(--cap)); }
  .stage[data-top="side"]     { --w-top: min(var(--w-side), var(--cap)); }
  .pane[data-depth="1"] { --x: calc(min(var(--w-self), var(--cap)) - var(--w-top) - var(--pv)); }
  .pane[data-depth="2"] { --x: calc(min(var(--w-self), var(--cap)) - var(--w-top) - var(--pv) - var(--spine)); }
  .pane[data-depth="3"] { --x: calc(min(var(--w-self), var(--cap)) - var(--w-top) - var(--pv) - 2 * var(--spine)); }
  .floor__grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link { display: none; }
  .cmd { width: 260px; flex-basis: 260px; }
}
@media (max-width: 1023px) {
  .app { --pv: var(--spine); --w-project: 100vw; --w-mr: 100vw; --w-issue: 100vw; --w-commit: 100vw; --w-pipeline: 100vw; --w-side: 100vw; }
  .stage { --cap: calc(100vw - var(--rail-w) - 3 * var(--spine)); }
  .floor__grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .cmd__t, .cmd kbd { display: none; }
  .cmd { width: 38px; flex: 0 0 38px; padding: 0; justify-content: center; }
}
/* The narrow view: a phone, or any touch screen too small for a stack of
   panes beside each other. It shows one thing, the top of the stack (or
   the floor under none), full width; the pane bar's way down, a link
   named for where it goes, is how the stack is walked back; and the same
   steps move it, on the same clock, as the wide view. It is a view of the
   same screen: the URL, the generators and their laws are the same. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1023px), (pointer: coarse) and (max-height: 520px) {
  .app { --top-h: 54px; --fs-floor: 2.5rem; }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr) 62px; }
  .top { gap: 10px; padding: 0 12px 0 0; }
  .wordmark { padding: 0 6px 0 14px; font-size: 18px; }
  .trail, .inbox, .inbox-gap { display: none; }
  .cmd { margin-left: auto; }
  .link { display: flex; padding: 0; border: 0; }
  .link__k { display: none; }
  .rail { grid-row: 3; grid-column: 1; flex-direction: row; justify-content: space-around; padding: 0 6px; border-right: 0; border-top: 1px solid var(--hair); }
  .rail__b { flex: 1; height: 100%; border-radius: 0; }
  .rail__b--desk, .tip { display: none; }
  .rail__ind { top: 0; left: calc(10vw - 16px); width: 32px; height: 3px; border-radius: 0 0 3px 3px; transform: translate3d(calc(var(--ri, 0) * 20vw), 0, 0); }
  .menu__mob { display: block; }
  .stage { grid-row: 2; grid-column: 1; --cap: 100vw; }
  .floor__in { padding: 20px 16px 40px; }
  .floor { transform-origin: 50% 50%; }
  .stage:not([data-top="none"]) .floor { transform: translate3d(-28%, 0, 0); }
  .floor__head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 18px; }
  .counts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .count { min-height: 100px; }
  .count__v { font-size: 2rem; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 0 16px; scrollbar-width: none; }
  .tiles, .tiles--wide { grid-template-columns: 1fr; }
  /* A pane is the stage's width, whatever 100vw says on a phone. */
  .pane, .pane[data-depth] { left: 0; width: auto; }
  .stage[data-top] { --w-top: 100vw; }
  .pane[data-depth="1"], .pane[data-depth="2"], .pane[data-depth="3"] { --x: -28%; visibility: hidden; }
  .pane[data-anim="glide"][data-depth="1"], .pane[data-anim="glide"][data-depth="2"], .pane[data-anim="glide"][data-depth="3"] { transition: transform var(--t-move) var(--ease-move), visibility 0s var(--t-move); }
  .pane__spine { display: none; }
  .pane__in { inset: 0; border-radius: 0; }
  .pane__edge { display: none; }
  .pane__bar { padding: 0 4px; gap: 2px; height: 52px; }
  .pane__back { display: none; }
  .kbd-btn { display: none; }
  .pane__scroll { padding: 18px 16px 30px; }
  .head { flex-direction: column; align-items: stretch; gap: 12px; }
  .head__acts, .head__side { justify-content: flex-start; align-items: flex-start; }
  .kv dt { text-align: left; }
  .locks { grid-template-columns: 1fr; }
  .gate { padding: 14px; }
  .btn--merge { margin-left: 0; width: 100%; order: 9; }
  .facts { grid-template-columns: 1fr 1fr; }
  .cm { grid-template-columns: 11ch minmax(0, 1fr); }
  .cm__by { display: none; }
  /* The graph becomes a list on a rail line */
  .graph-wrap { overflow: visible; margin: 0; padding: 0; }
  .graph { width: auto; height: auto !important; display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }
  .graph::before { content: ''; position: absolute; left: 6px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, rgba(var(--ok-rgb), .5), var(--dk-400) 70%, rgba(var(--dk-500-rgb), .3)); }
  .edges, .comet, .col-l { display: none; }
  .gn { position: relative; left: auto; top: auto; width: auto; }
  .toasts { left: 12px; right: 12px; bottom: 74px; }
  .pal__box { top: 8px; width: calc(100vw - 16px); }
  /* The way down: a chevron and where it goes, the pane bar's first word.
     Back while the pane has a history, then the pane beneath, then the
     floor; when it closes the pane the close button would only repeat it. */
  .pane__down { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; max-width: 46%; min-width: 44px; width: auto; height: 44px; padding: 0 10px 0 6px;
    font: 700 var(--fs-eyebrow)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--dk-300); }
  .pane__down-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pane__bar[data-down="close"] .pane__x { display: none; }
  .pane__kind { font-size: 0; gap: 0; padding: 0 4px 0 2px; }
  .pane__crumbs { flex: 1; overflow-x: auto; scrollbar-width: none; }
  .pc { display: inline-flex; align-items: center; min-height: 44px; }
  .pc--here { min-height: 0; }
  .ibtn { width: 44px; height: 44px; }
  .pane__bar .pane__down { width: auto; }
  a.pc { min-width: 44px; justify-content: center; }
  .cm > a, .rowl a, .stat a.mono, .rowl__t { display: inline-flex; align-items: center; min-height: 44px; }
  .pane__scroll { overscroll-behavior: contain; }
  /* The status rail keeps what fits: the wordmark, search, the link's dot
     and the account, each a whole finger wide. */
  .top { gap: 4px; padding-right: 6px; }
  .wordmark { padding: 0 4px 0 14px; display: flex; align-items: center; height: 100%; }
  .cmd { width: 44px; height: 44px; flex: 0 0 44px; }
  .link__v { font-size: 0; gap: 0; padding: 0 6px; }
  .acct > .chip--btn, .acct > .av--me { min-width: 44px; height: 44px; justify-content: center; }
  .acct > .av--me { width: 44px; }
  .chip__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chip--btn svg.i { width: 16px; height: 16px; }
  /* Menus drop from under the rail across the screen, inside it. */
  .menu { position: fixed; left: 8px; right: 8px; top: calc(var(--top-h) + 6px); width: auto; max-height: calc(100dvh - var(--top-h) - 80px); overflow-y: auto; transform-origin: 50% 0; }
  .menu__i { display: flex; align-items: center; min-height: 44px; }
  .menu .btn { align-self: stretch; }
  /* Fields at 16px, so a phone never zooms into one. */
  input, textarea, select, .pal__q { font-size: 16px; }
  select { min-height: 44px; }
  /* Every control a finger can hit. */
  .btn, .btn--sm { min-height: 44px; }
  .chip--btn { height: 44px; }
  .toolbar { gap: 6px; }
  .tab { min-height: 44px; padding: 0 12px; }
  .tabs { margin: 16px -16px 16px; padding: 0 16px; }
  .tree__r, .rowl, .pal__r, .menu__i { min-height: 44px; }
  .tree__r { line-height: 1.3; overflow-wrap: anywhere; }
  .cm { min-height: 44px; }
  .pips { min-height: 44px; }
  .more, .panel__more { min-height: 44px; }
  .gn { min-height: 44px; }
  .pal__foot { display: none; }
  /* A branch list and a long path wrap or clip in their own row, never the pane. */
  .branchbar > * { min-width: 0; }
  .branches { flex: 1 1 100%; }
  .clone { min-width: 0; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .review .ln { width: 2.4rem; margin-right: .5rem; }
  .thread { margin-left: 12px; }
}

/* A touch screen has no hover: what a pointer would reveal shows, and a
   tap leaves nothing lifted, fanned or dimmed behind it. */
@media (hover: none) {
  .go { opacity: 1; }
  .tile:hover, .btn:hover, .mrrow:hover, a.gn:hover, .lock--ci:hover, .pips:hover .pip { transform: none; }
  .pips:hover .pip--fail { transform: rotate(45deg); }
  .lock--ci:hover .lock__cta svg.i { transform: none; }
  .tile:hover::before { opacity: 0; }
  .pane[data-depth="1"]:not([data-leaving]) .pane__veil:hover { opacity: 1; }
  .tip { display: none; }
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .app { --t-move: 0s; }
  .app *, .app *::before, .app *::after { transition-duration: 0s !important; }
  /* A pane that arrives fades in where it rests; one that glides is there at once; a view that changes fades. */
  .pane[data-anim="enter"] > .pane__in, .pane__scroll[data-anim="fade"] > :not(:first-child):not(.steady),
  .rise, .gn--in, .gn--pop, .pal__box, .pal__r, .toast, .chip--pop, .lock__ic, .crumb, .menu, .pip, .appr--new, .seg { animation: fade 200ms linear both !important; }
  .pane[data-leaving] > .pane__in { animation: none !important; opacity: 0; }
  .is-run::after, .link--on .dot--ok::after, .pip--run::after, .seg--run::after, .gn--run::after, .gn--run .gn__ic::after, .lock--run .lock__ic::after, .comet::after,
  .w > span, .odo i::before, .log--live::after, .gate--ready .btn--merge::before, .lock--flip .lock__ic::after, .lock--flip::before, .pane__edge, .edges g { animation: none !important; }
  .pane .rise, .pane .w > span, .pane .pip, .pane .seg, .pane .gn--in, .pane .edges g, .pane .chip--pop { animation: none !important; }
  .comet { display: none; }
}

/* ------------------------------------------------------- still frames */

/* ?still=N freezes the top pane at N ms into its arrival and everything
   else settled, so a browser can photograph a frame of the motion;
   transitions are off, so nothing else is mid-flight. */
.app[data-still] { --ft: 10000ms; }
.app[data-still] .pane[data-depth="0"] { --ft: var(--ft-still); }
.app[data-still] *, .app[data-still] *::before, .app[data-still] *::after { animation-play-state: paused !important; transition: none !important; }

/* --------------------------------------------------------------- themes */

.theme-horizon {
  --dk-200: #fed7aa; --dk-300: #fdba74; --dk-400: #fb923c; --dk-500: #f97316; --dk-600: #ea580c; --dk-500-rgb: 249, 115, 22; --dk-pop: #fbbf24;
  --logo-a: #fcd34d; --logo-b: #f97316;
}
.theme-slate {
  --dk-200: #fde68a; --dk-300: #fcd34d; --dk-400: #fbbf24; --dk-500: #f59e0b; --dk-600: #d97706; --dk-500-rgb: 245, 158, 11;
  --bg: #0f172a; --pane-a: #172036; --pane-b: #111a2e; --node: #131c33; --log-bg: #0b1222; --muted: #9eabbf;
  --veil: rgba(15, 23, 42, .52); --floor-veil-a: rgba(15, 23, 42, .30); --floor-veil-b: rgba(15, 23, 42, .78);
  --rail-bg: rgba(15, 23, 42, .92); --pop-bg: #1b2540;
}
.theme-slate .pal__back { background: rgba(15, 23, 42, .66); }
.theme-violet {
  --dk-200: #e9d5ff; --dk-300: #d8b4fe; --dk-400: #c084fc; --dk-500: #a855f7; --dk-600: #9333ea; --dk-500-rgb: 168, 85, 247; --dk-pop: #f0abfc;
  --bg: #120c2a; --pane-a: #1d1440; --pane-b: #150e31; --node: #1a1238; --log-bg: #0d081f; --logo-a: #f0abfc; --logo-b: #a855f7;
}
.theme-forest {
  --dk-200: #d9f99d; --dk-300: #bef264; --dk-400: #a3e635; --dk-500: #84cc16; --dk-600: #65a30d; --dk-500-rgb: 132, 204, 22;
  --bg: #0b1a12; --pane-a: #12261b; --pane-b: #0d1d14; --node: #10231a; --log-bg: #07120c; --muted: #a8b5c4;
}
.theme-crimson {
  --dk-200: #fecdd3; --dk-300: #fda4af; --dk-400: #fb7185; --dk-500: #f43f5e; --dk-600: #be123c; --dk-500-rgb: 244, 63, 94;
  --bg: #140a0c; --pane-a: #241317; --pane-b: #1a0d10; --node: #211215; --log-bg: #0d0608; --warn: #fbbf24; --warn-rgb: 251, 191, 36;
}
.theme-graphite {
  --dk-200: #ffffff; --dk-300: #f2f2f2; --dk-400: #e5e5e5; --dk-500: #d4d4d4; --dk-600: #a3a3a3; --dk-500-rgb: 212, 212, 212;
  --bg: #111111; --pane-a: #1c1c1c; --pane-b: #151515; --node: #1a1a1a; --log-bg: #0a0a0a; --logo-a: #ffffff; --logo-b: #8a8a8a; --glow-strength: .4;
  --muted: #a9b2bf;
}
.theme-nord {
  --dk-200: #b6dbe6; --dk-300: #b0d8d7; --dk-400: #94c9d8; --dk-500: #81a1c1; --dk-600: #5e81ac; --dk-500-rgb: 129, 161, 193;
  --bg: #2e3440; --pane-a: #3b4252; --pane-b: #343b49; --node: #353c4a; --log-bg: #272c36; --well: rgba(39, 44, 54, .7);
  --muted2: #d8dee9; --muted: #c4ccd8; --faint: #98a2b4; --glow-strength: .5; --on-accent: #2e3440; --warn: #ffc2c9; --warn-rgb: 255, 194, 201;
}
.theme-terminal {
  --dk-200: #b8ffcb; --dk-300: #9dffb8; --dk-400: #33ff66; --dk-500: #22cc55; --dk-600: #169e40; --dk-500-rgb: 51, 255, 102;
  --bg: #000; --pane-a: #050c05; --pane-b: #030803; --node: #071107; --log-bg: #020502; --fg: #b8f5c8; --muted2: #8fd6a4; --muted: #6fbf86; --faint: #4f9a64;
  --body: var(--mono); --hair: rgba(51, 255, 102, .14); --hair-2: rgba(51, 255, 102, .24);
}
.theme-gitlab-dark {
  --dk-200: #c3c3f9; --dk-300: #a7a7f9; --dk-400: #a3a3f8; --dk-500: #7c7cd8; --dk-600: #5252b5; --dk-500-rgb: 124, 124, 216;
  --bg: #1f1e24; --pane-a: #2b2a33; --pane-b: #24232b; --node: #28272f; --log-bg: #18171c; --logo-a: #fca326; --logo-b: #fc6d26; --glow-strength: .3;
  --muted: #a4b1c4; --faint: #7d8da7; --warn: #ff8f9c; --warn-rgb: 255, 143, 156;
  --r-pane: 6px; --r-card: 6px;
}

/* Light trial themes: light panes, a lighter veil, no glows */
.theme-arctic, .theme-sand, .theme-rose, .theme-paper, .theme-gitlab-light {
  --pane-a: #ffffff; --pane-b: #f8fafc; --well: rgba(15, 23, 42, .04); --panel: rgba(15, 23, 42, .03); --panel-2: rgba(15, 23, 42, .06);
  --hair: rgba(15, 23, 42, .10); --hair-2: rgba(15, 23, 42, .18); --veil: rgba(255, 255, 255, .55);
  --floor-veil-a: rgba(255, 255, 255, .2); --floor-veil-b: rgba(255, 255, 255, .6); --rail-bg: rgba(255, 255, 255, .92); --pop-bg: #ffffff; --node: #ffffff; --log-bg: #f8fafc;
  --sky: none; --title: #0f172a; --fg: #1e293b; --muted2: #334155; --muted: #4b5a6e; --faint: #5a6880; --on-accent: #ffffff;
  --ok: #166534; --ok-rgb: 22, 101, 52; --warn: #9f1239; --warn-rgb: 159, 18, 57; --stale: #854d0e; --skip: rgba(71, 85, 105, .4);
  --glow-strength: 0; --shadow-pane: -18px 0 40px -18px rgba(15, 23, 42, .28);
}
.theme-arctic { --bg: #eef2f7; --dk-200: #075985; --dk-300: #075985; --dk-400: #0369a1; --dk-500: #0369a1; --dk-600: #0c4a6e; --dk-500-rgb: 3, 105, 161; --logo-a: #38bdf8; --logo-b: #0369a1; }
.theme-sand { --bg: #f2ede2; --pane-a: #fffdf8; --pane-b: #faf6ec; --muted: #44526a; --dk-200: #1e3a8a; --dk-300: #1e40af; --dk-400: #1e40af; --dk-500: #1e3a8a; --dk-600: #172554; --dk-500-rgb: 30, 58, 138; --logo-a: #1e40af; --logo-b: #1e293b; }
.theme-rose { --bg: #f7efeb; --dk-200: #8e2f45; --dk-300: #93304a; --dk-400: #b4425a; --dk-500: #b4425a; --dk-600: #8e2f45; --dk-500-rgb: 180, 66, 90; --logo-a: #d16a80; --logo-b: #8e2f45; --r-pane: 22px; }
.theme-paper { --bg: #efe7d6; --pane-a: #fbf7ee; --pane-b: #f5efe3; --dk-200: #8a3e12; --dk-300: #8a3e12; --dk-400: #a14a17; --dk-500: #b3541e; --dk-600: #8a3e12; --dk-500-rgb: 179, 84, 30;
  --fg: #2b2620; --title: #2b2620; --muted2: #4f463b; --muted: #594f41; --body: Georgia, 'Times New Roman', serif; --r-pane: 4px; --r-card: 4px; --logo-a: #b3541e; --logo-b: #2b2620; }
.theme-gitlab-light { --bg: #f4f3f7; --dk-200: #3d3dab; --dk-300: #3d3dab; --dk-400: #0b5cad; --dk-500: #1068bf; --dk-600: #0b5cad; --dk-500-rgb: 16, 104, 191; --logo-a: #fc6d26; --logo-b: #e24329; --r-pane: 6px; --r-card: 6px; }
.theme-arctic .av, .theme-sand .av, .theme-rose .av, .theme-paper .av, .theme-gitlab-light .av { background: linear-gradient(160deg, #e2e8f0, #cbd5e1); color: #0f172a; }
.theme-arctic code, .theme-sand code, .theme-rose code, .theme-paper code, .theme-gitlab-light code { color: var(--dk-600); }
.theme-arctic .pal__back, .theme-sand .pal__back, .theme-rose .pal__back, .theme-paper .pal__back, .theme-gitlab-light .pal__back { background: rgba(15, 23, 42, .3); }

/* The vortex console (vortex-console-miso) keeps its own markup; this
   dresses it in the kit's buttons and a transcript well. */
.vortex-console .box { padding: 0; margin: 0 0 12px; border: 0; background: none; }
.vortex-console textarea { min-height: 170px; font-size: 13px; line-height: 1.6; }
.vortex-console button { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 9px; border: 0; cursor: pointer;
  font: 700 var(--fs-label)/1 var(--label); letter-spacing: var(--track-label); text-transform: uppercase; background: linear-gradient(180deg, var(--dk-400), var(--dk-500)); color: var(--on-accent); }
.vortex-console button.ghost { background: transparent; color: var(--muted2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.vortex-console .muted { margin: 0; font: 400 12px/1 var(--mono); }
.vortex-console pre { margin: 0; padding: 4px 14px; border: 0; border-radius: 0; background: var(--log-bg); font: 400 12.5px/1.6 var(--mono); color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.vortex-console pre:first-child { padding-top: 12px; border-radius: 12px 12px 0 0; }
.vortex-console pre:last-child { padding-bottom: 12px; border-radius: 0 0 12px 12px; }
.vortex-console pre.said { color: var(--muted2); } .vortex-console pre.result { color: var(--dk-200); }
.vortex-console pre.failed { color: var(--warn); } .vortex-console pre.block { color: var(--muted); }
.tabbody h3.label { margin: 20px 0 8px; }
.tabbody h3.label:first-of-type { margin-top: 6px; }