/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* Operator console styling. One stylesheet, no framework — the console is a
   handful of dense screens for one operator, not a design system. */

/* ---------------------------------------------------------------------------
   PALETTE — "darkroom with a BMW dash"

   What was here before was GitHub's dark theme: --bg #0d1117, --accent #4493f8,
   a cool blue-black ground with a bright blue link colour. That was never a
   decision — it was the default from the first scaffold and nobody went back to
   replace it. Two things were wrong with it in daily use:

     1. It is COLD. #0d1117 is a blue-black, and every neutral derived from it
        (#8b949e for muted text, #2a313c for rules) carries that blue cast. The
        console ends up looking like a code host, not like instrumentation.
     2. It was too CONTRASTY. Near-black ground plus near-white text plus
        browser-default form controls — native checkboxes and inputs render as
        bright white rectangles against #0d1117 — meant the loudest things on
        the render form were the ~15 checkboxes, not the render button. The
        owner's words: "too black... I like the idea of a darkroom.... but this
        is hard to look at with the bright white and stuff."

   Hard rule for anyone editing this file: no pure black and no pure white, in
   any notation. Both ends of the range are what made the console hard to look
   at, so the greps that guard this file reject either literal outright.

   So: a darkroom under a safelight. The ground is lifted off black and warmed
   (#16130f, not #0d1117) so it reads as a dim room rather than a void, and
   surfaces step up from it in the same warm family. Text is a soft warm
   off-white (#e8dfd2) — NOT pure white, which is the specific thing that hurt.

   The accent is the BMW E30/E36 instrument cluster at night, from Dan's
   reference photos (10/4): a near-black face, and everything that is lit —
   numerals, ticks, needles, the fuel gauge — is ONE red, the needles a shade
   hotter. Monochrome red on black, with a faint haze of the same red around
   the dials. The first pass used amber #ff9500 and a column of it on every
   link read as Halloween; #ffb300 before that read as yellow/gold. The
   cluster is neither — it is red, hue ~6deg, and the glow is what carries
   it. It comes as a small scale so the one hue can be used at three weights
   without re-picking hex:

     --accent-bright  the lit filament, for focus and active states
     --accent-dim     a dark red for borders and resting outlines —
                      present enough to read as the cluster, quiet enough
                      for 15 of them
     --accent-deep    near-black red for filled backgrounds and the ink on
                      accent buttons
     --accent-glow    a translucent red for the bloom on focus
     --link           a lit numeral at resting brightness: the same red,
                      dimmer, so a table of job ids reads as markings on the
                      dial rather than a row of warning lamps. Hover lights
                      it to --accent-bright, the needle.

   Status colours are deliberately DESATURATED, and --err is pulled PINK-ward
   on purpose: the accent now lives where "red" used to, so an error has to
   separate from it by hue, not by being redder.

   Contrast structure (not hue) is borrowed from the house dark chart theme in
   ch-gfx — background #101416 / surface #1b2124 / ink #f1f4f5. That palette is
   cool blue-green; only its LIGHTNESS steps are reused here. Body text lands at
   roughly 13:1 on the ground and muted text at ~6:1, so nothing legible was
   traded away for the lower glare.

   TYPE. The cluster's numerals are a bold condensed grotesque — tall, tight,
   every digit the same width so a reading does not jump as it changes. The
   console was in the browser's default sans, which is a spreadsheet, not an
   instrument (Dan, 10/4: "take font inspiration from it too, the numbers in
   the dash"). Display type is Barlow Condensed (vendored, public/fonts): the
   big numbers, headings, labels, pills, table heads, nav. Body copy stays in
   a plain sans — a gauge face is for reading at a glance, not for paragraphs
   — and ids and keys stay monospace. Numerals are tabular everywhere the
   display face is used.

   Everything below reads from these variables. Retune the room from this block
   alone — do not reintroduce literal colours further down.
   --------------------------------------------------------------------------- */

@import url('/fonts/dash.css');

:root {
  /* ground + surfaces: warm neutral, lifted off black */
  --bg: #140e0d;
  --panel: #1d1412;
  --panel-2: #291b18;
  --sunk: #0e0908;        /* recessed: input wells, preview mattes, tracks */
  --line: #3a2724;

  /* type */
  --text: #d8bfa4;        /* amber dash: a lit numeral, warm and dim — never white (Dan, 10/10) */
  --muted: #9a7d6e;
  --dim: #74594f;         /* placeholders, disabled — quieter than --muted */

  /* red instrumentation */
  --accent: #ff3d33;
  --accent-bright: #ff7a6a;
  --accent-dim: #8a2318;
  --accent-deep: #260806;
  --accent-ink: #1a0706;  /* text ON an accent fill */
  --accent-glow: rgba(255, 61, 51, 0.22);
  --link: #d9634f;

  /* status — legible, desaturated enough not to fight the accent */
  --ok: #8fb573;
  --warn: #cbab55;
  --err: #f06c9b;         /* pink, ~340deg — must not be a redder red */
  --err-text: #f7b8d0;

  --radius: 8px;

  /* type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Native widgets (scrollbars, date pickers, autofill chrome) follow this.
     Without it the browser hands back light-mode furniture on a dark page —
     which is half of where the "bright white" came from. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bg);
  /* The safelight: one very faint amber bloom from the top, fixed so it does
     not travel with scroll. Subtle on purpose — it should register as a warm
     room, not as a gradient. */
  background-image: radial-gradient(1200px 520px at 50% -220px, rgba(255, 61, 51, 0.085), transparent 72%);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.5 var(--font-body);
}

code, .mono, pre { font-family: var(--font-mono); }

/* The gauge face: condensed, tabular numerals, a touch of tracking on caps. */
.display, h1, h2, h3, .stat .n, .stat .l, .pill, th, legend, .brand, .topbar nav a, .thumb .label, .scope, .status-head {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
pre { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; }

/* Scrollbars: the formats list scrolls inside a fieldset, so a default light
   scrollbar sits right in the middle of the form. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); background-clip: content-box; }

::selection { background: var(--accent-dim); color: var(--text); }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px; height: 46px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 10;
}
/* The logo, in the same lit colour as every highlight (Dan, 10/5: "the
   scarlet/amber we are already using in the highlights — that should be the
   same colour"), in place of a text wordmark. */
.brand { display: flex; align-items: center; color: var(--accent); text-decoration: none; }
.brand:hover { color: var(--accent-bright); }
.brand .logo { height: 24px; width: auto; display: block; }
.topbar nav { display: flex; gap: 16px; margin-left: auto; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.topbar nav a:hover { color: var(--accent-bright); }
.topbar nav a.on { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

main { max-width: 1100px; margin: 0 auto; padding: 18px 20px 44px; min-height: calc(100vh - 160px); }
.foot { max-width: 1100px; margin: 0 auto; padding: 16px 20px 28px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.foot .brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.foot nav { display: flex; gap: 14px; }
.foot nav a { color: var(--muted); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.foot nav a:hover { color: var(--accent-bright); }
.foot .muted { margin-left: auto; }

h1 { font-size: 24px; font-weight: 400; margin: 0 0 3px; letter-spacing: .02em; font-family: var(--font-display); text-transform: uppercase; color: var(--muted); }
h2 { font-size: 13px; margin: 18px 0 8px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; }
h3 { font-size: 20px; font-weight: 500; letter-spacing: .01em; }
h3 { font-size: 14px; margin: 0 0 7px; }
/* Links: colour only, never an underline (Dan, 10/5: "the colour is enough").
   The lit-numeral red says "this goes somewhere"; hover brightens it. Anything
   that looks like text (a job name, a version in mono, a project title)
   inherits the text colour and brightens the same way. */
a { color: var(--link); text-decoration: none; transition: color .12s; }
a:hover { color: var(--accent-bright); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-bright); }
a.mono, .mono a { color: var(--link); }
.sub { color: var(--muted); margin: 0 0 14px; }

/* ---------- layout helpers ---------- */
.grid { display: grid; grid-gap: 10px; gap: 10px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.card.link { text-decoration: none; color: inherit; display: block; transition: border-color .12s, transform .12s, box-shadow .12s; }
.card.link:hover { border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-dim), 0 4px 18px -8px var(--accent-glow); transform: translateY(-1px); }

.stat .n { font-size: 38px; font-weight: 500; line-height: 1.05; letter-spacing: .01em; }
.stat .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }

/* ---------- bits ---------- */
.pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.pill.ok    { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill.run   { color: var(--accent-bright); border-color: var(--accent-dim); background: var(--accent-deep); }
.pill.warn  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.pill.err   { color: var(--err);  border-color: color-mix(in srgb, var(--err) 45%, transparent); }

.muted { color: var(--muted); }
.small { font-size: 12px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 9px 6px; font-weight: 500; }
td { padding: 6px 9px; border-top: 1px solid var(--line); vertical-align: middle; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--panel-2); }

.bar { height: 5px; background: var(--sunk); border-radius: 999px; overflow: hidden; min-width: 80px; box-shadow: inset 0 0 0 1px var(--line); }
.bar > i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); transition: width .4s ease; }

/* ---------- forms ----------
   The form controls are where the old theme hurt most, so they are all
   explicitly drawn here rather than left to the browser. accent-color alone is
   NOT enough: it tints a checkbox's checked fill but leaves the UNCHECKED box
   as a bright white square on Chrome and Safari, which is exactly the thing the
   owner was looking at on the render form (formats + delivery is ~15 of them). */

/* Labels read as instrument captions: the display face, small, spaced,
   quiet. Inputs are the lit panels under them — a touch bigger and softer
   than before (Dan, 10/5: "not very legible and don't look classy"). */
label { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
label.check { font-family: inherit; letter-spacing: 0; text-transform: none; }

input[type=text], input[type=number], input[type=email], input[type=password],
input[type=url], input[type=search], input[type=tel], input[type=date],
input[type=datetime-local], select, textarea {
  width: 100%; padding: 9px 12px; font-size: 15px; line-height: 1.35;
  background-color: var(--sunk); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color .12s, box-shadow .12s;
}
textarea { line-height: 1.45; resize: vertical; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--accent-dim); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px var(--accent-glow);
}

::placeholder { color: var(--dim); opacity: 1; }

input:disabled, select:disabled, textarea:disabled { color: var(--dim); background-color: var(--bg); cursor: not-allowed; }

/* Browser autofill repaints the field with its own near-white background and
   ignores background-color entirely — it has been seen for real on the login
   screen, where the email field came back WHITE on an otherwise dark card.
   There is no property to switch it off; the only reliable override is to cover
   the field with a huge inset box-shadow in our own colour and set the text
   fill directly. The absurd transition delay keeps Chrome from animating its
   yellow in on the way past. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--sunk) inset;
  caret-color: var(--text);
  -webkit-transition: background-color 9999s ease-out 0s;
  transition: background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--sunk) inset, 0 0 0 3px var(--accent-glow); }

/* select: appearance:none because a native select on macOS ignores
   background-color outright and renders light. The chevron is drawn from two
   gradients rather than an SVG so there is no asset and no URL of any kind. */
select {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% - 1px), calc(100% - 10px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:focus { background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); }
option { background: var(--panel); color: var(--text); }

input[type=color] {
  width: 42px; height: 29px; padding: 2px;
  background-color: var(--sunk); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 4px; }
input[type=color]::-moz-color-swatch { border: none; border-radius: 4px; }

/* checkbox / radio: drawn from scratch — a dim amber-outlined well that fills
   amber when checked, so a column of them reads as an instrument panel rather
   than as a column of white squares. */
input[type=checkbox], input[type=radio] {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 14px; height: 14px; margin: 0; padding: 0;
  display: inline-grid; place-content: center;
  background-color: var(--sunk);
  border: 1px solid var(--accent-dim);
  border-radius: 3px; cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::after {
  content: ""; width: 7px; height: 3.5px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0; transition: opacity .1s;
}
input[type=radio]::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-ink); opacity: 0; transition: opacity .1s;
}
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--accent); background-color: var(--accent-deep); }
input[type=checkbox]:checked, input[type=radio]:checked {
  background-color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 7px var(--accent-glow);
}
input[type=checkbox]:checked::after, input[type=radio]:checked::after { opacity: 1; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
input[type=checkbox]:disabled, input[type=radio]:disabled { border-color: var(--line); background-color: var(--bg); cursor: not-allowed; opacity: .6; }

/* range: used heavily by the auto-generated parameter panel, and previously
   left entirely to the browser (a light track with a chrome-blue thumb). Both
   vendor paths are written out because WebKit and Firefox share no pseudo. */
input[type=range] {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  width: 100%; height: 16px; margin: 0;
  background: transparent; cursor: pointer;
  accent-color: var(--accent);
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; margin-top: -6px;
  border: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-deep), 0 0 7px var(--accent-glow);
}
input[type=range]::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: var(--sunk); border: 1px solid var(--line);
}
input[type=range]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent-dim); }
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-deep), 0 0 7px var(--accent-glow);
}
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-glow); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-glow); }
input[type=range]:disabled { cursor: not-allowed; opacity: .5; }

.field { margin-bottom: 14px; }
.field .hint, .hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.scope { font-size: 9px; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 6px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }

button {
  font: inherit; font-weight: 500; font-size: 13px; padding: 7px 15px; border-radius: 6px;
  border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: filter .12s, box-shadow .12s;
}
button:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 0 12px var(--accent-glow); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-bright); text-decoration: underline; cursor: pointer; border-radius: 0; }
button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
button.ghost:hover:not(:disabled) { border-color: var(--accent-dim); color: var(--accent-bright); filter: none; }

fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 14px; margin: 0 0 14px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
legend { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; padding: 0 8px; }
.check { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 14px; line-height: 1.5; color: var(--text); cursor: pointer; }
.check:last-child { margin-bottom: 0; }
.check input { accent-color: var(--accent); }

/* ---------- artifacts ---------- */
.artifact { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.artifact .preview { background: var(--sunk); display: flex; align-items: center; justify-content: center; min-height: 130px; }
.artifact .preview img, .artifact .preview video { max-width: 100%; max-height: 300px; display: block; }
.artifact .meta { padding: 8px 10px; border-top: 1px solid var(--line); }
.artifact .name { font-size: 12px; word-break: break-all; }

.banner { border-radius: var(--radius); padding: 9px 12px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 10px; }
.banner.err { border-color: color-mix(in srgb, var(--err) 45%, transparent); background: color-mix(in srgb, var(--err) 10%, var(--panel)); color: var(--err-text); }
.empty { color: var(--muted); padding: 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- thumbnails + output grid (ch-gfx port, 10/4) ----------
   Added below the theme block; everything reads from the tokens above and
   introduces no literal colour. .thumb is the picture cell ch-gfx puts on
   every record (version card, job row, output tile); .tile and
   .selection-bar are AssetThumbnailGrid; .grid.stats is StatsOverview's row. */
.thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; background: var(--sunk); border: 1px solid var(--line); border-radius: 5px; }
.thumb.row  { width: 72px; height: 42px; }
.thumb.card { width: 128px; height: 72px; border-radius: 6px; }
.thumb.tile { display: flex; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 0 6px; text-align: center; }
.thumb.matte.err .label { color: var(--err); }
.thumb.video .play {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: translate(-40%, -50%);
  border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--text);
  opacity: .85; filter: drop-shadow(0 0 4px var(--accent-glow));
}
.thumb.tile.video .play { border-width: 11px 0 11px 18px; }
.thumb.video .label { padding-right: 24px; }

/* job rows are COMPACT: one line each (Dan, 10/10: "make it more compact").
   The name is clipped with an ellipsis rather than wrapped, the id lives in
   its title, status + place in line share a line, and the row itself opens
   the job (no Open button). */
table.jobs td { padding: 4px 9px; }
table.jobs td.thumbcell { width: 56px; padding-right: 0; }
table.jobs td.thumbcell a { display: inline-flex; vertical-align: middle; }
table.jobs td.thumbcell .thumb.row { width: 56px; height: 32px; }
table.jobs td.namecell { max-width: 0; width: 40%; }
table.jobs td.namecell .jobname { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 14px; }
table.jobs td.col-version a, table.jobs td.when, table.jobs td.statuscell { white-space: nowrap; }
table.jobs td.statuscell .errline { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
table.jobs td.namecell .meta { white-space: nowrap; }
table.jobs .disclose { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 6px 0 0; font-size: 12px; line-height: 1; vertical-align: bottom; }
table.jobs .disclose:hover { color: var(--accent-bright); }
table.jobs .ghostlink.cancel { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); padding: 1px 7px; font-size: 13px; line-height: 1.2; }
table.jobs .ghostlink.cancel:hover { background: color-mix(in srgb, var(--err) 15%, transparent); }
table.jobs tr.files td { padding: 4px 12px 8px 68px; border-top: 0; background: var(--sunk); }
.filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.filelist li { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.filelist li a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.kindtag { font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; min-width: 42px; text-align: center; }
button.chip { background: none; cursor: pointer; }

.vcard { display: flex; gap: 12px; align-items: flex-start; }
.vcard .body { flex: 1 1; min-width: 0; }

.asset-grid { display: grid; grid-gap: 10px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.tile:hover { border-color: var(--accent-dim); }
.tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow); }
.tile .frame { display: block; }
.tile .pick { position: absolute; top: 6px; left: 6px; z-index: 1; margin: 0; padding: 3px; display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.tile .meta { padding: 8px 10px; border-top: 1px solid var(--line); }
.tile .name { font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.selection-bar {
  position: -webkit-sticky;
  position: sticky; bottom: 12px; z-index: 5;
  margin-top: 12px; padding: 8px 12px;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--accent-dim); border-radius: var(--radius);
  box-shadow: 0 8px 24px -10px var(--accent-glow);
}

.grid.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- projects (home page) ----------
   ch-gfx ProjectList → ProjectDetail: versions grouped under a project. The
   header is an h2 in the display face, but a NAME, not a section label — so
   it keeps its case and reads at card-title weight; the counts sit to its
   right in the small muted row the cards already use. */
.project { margin-top: 22px; }
.project + .project { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.project-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.project-head h2.project-name { font-size: 20px; margin: 0; color: var(--text); text-transform: none; letter-spacing: .01em; font-weight: 500; }
.project-head .project-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.project-head .project-meta .n { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.project-head .project-meta .sep { opacity: .5; }

/* Migration verdicts carried in a version's config.json (_status). Not
   errors — a blocked version is a true statement about an engine that is
   not here yet — so they sit in the muted register, not the error one. */
.pill.needs { color: var(--warn); border-color: var(--line); }
.pill.blocked { color: var(--dim); border-color: var(--line); }
.banner { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 10px 0 0; font-size: 13px; color: var(--muted); background: var(--panel); }
.banner.needs { color: var(--warn); }
.banner.blocked { color: var(--dim); }

/* ---------- home rebuild (10/5): one status line, outputs first, clickable
   lists, search in the top bar. Appended; reads only from the tokens above. */

/* nav: five tabs, then the search box takes the remaining width */
.topbar nav { margin-left: 6px; }
.search { position: relative; margin-left: auto; flex: 0 1 340px; min-width: 180px; }
.search input[type=search] { padding: 5px 10px; font-size: 13px; border-radius: 999px; }
.search .results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--accent-dim); border-radius: var(--radius);
  box-shadow: 0 12px 32px -12px var(--accent-glow), 0 8px 24px -8px rgba(0,0,0,.6);
  max-height: 70vh; overflow-y: auto; padding: 4px 0;
}
.search .group { font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 6px 12px 2px; }
.search .hit { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 12px; color: var(--text); text-decoration: none; }
.search .hit.on, .search .hit:hover { background: var(--panel-2); color: var(--accent-bright); }
.search .hit .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .hit .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .none { padding: 8px 12px; }

/* the one status line */
.statusline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; margin: 6px 0 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.statusline.err { border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.statusline.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.statusline.run { border-color: var(--accent-dim); }
.statusline .headline { font-weight: 500; }
.statusline .sep { flex: 1 1; }
.statusline .facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.statusline .facts .n { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text); font-weight: 500; }
.statusline .facts .bad .n { color: var(--err); }

/* section heads with a link on the right */
.spread.sect { margin-top: 22px; }
.spread.sect h2 { margin: 0; }
.spread.sect a.small { color: var(--link); }

/* org label on a cross-org row */
.orgtag { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-bright); border: 1px solid var(--accent-dim); border-radius: 4px; padding: 0 5px; white-space: nowrap; }

/* outputs grid: the tile's title line is the job */
.asset-grid.outputs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.jobname { color: var(--text); text-decoration: none; font-weight: 400; }
.jobname:hover { color: var(--accent-bright); }
.tile .meta .jobname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghostlink { color: var(--text); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.ghostlink:hover { border-color: var(--accent-dim); color: var(--accent-bright); }

/* job rows: whole row navigates (ClickRow); actions stay their own targets */
table.jobs td.actions { text-align: right; width: 1%; white-space: nowrap; }
table.jobs td.when .mono { font-size: 11px; color: var(--dim); }
tr.clickable:focus-visible { outline: none; box-shadow: inset 2px 0 0 var(--accent); }
tr.clickable:focus-visible td { background: var(--panel-2); }

/* project cards on the home page: the picture fills the card's width
   (Dan, 10/9: "imagery should be getting maximized — fill a nice frame so
   it's legible"), the name under it, one line under that. */
.grid.projects { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.frameworks { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.fcard { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.fcard .body { min-width: 0; }
.fcard .fname { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .n { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); }
.fcard .thumb.row { width: 56px; height: 32px; }
.pcard { display: block; padding: 0; overflow: hidden; }
.pcard .thumb.card { display: flex; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.pcard .body { padding: 10px 12px 12px; min-width: 0; }
.pcard h3 { font-size: 18px; margin: 0 0 3px; }
.pcard .n { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.pcard .vlist { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; color: var(--muted); }

/* catalogue rows (/projects) */
table.catalogue td.thumbcell { width: 72px; padding-right: 0; }
table.catalogue td .n, .project-meta .n, .sub .n { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
table.catalogue tr:first-child td { border-top: 0; }
.project-head h2.project-name a { color: var(--text); text-decoration: none; }
.project-head h2.project-name a:hover { color: var(--accent-bright); }

/* schedules strip + status filter chips */
table.schedules tr.off td { color: var(--dim); }
table.schedules tr:first-child td { border-top: 0; }
table.schedules .n { font-family: var(--font-display); color: var(--text); font-weight: 500; }
.filters { margin: 0 0 10px; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.chip .n { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); }
.chip:hover { border-color: var(--accent-dim); color: var(--accent-bright); }
.chip.on { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-deep); }

/* ---------- version page (rebuilt 10/4 on ch-gfx VersionDetail's evidence) ----------
   Four sections once each: latest output (+ in-flight strip), run card,
   jobs with outputs under each row, schedules + notifications. Everything
   reads from the tokens above. */
.crumbs { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.crumbs .sep { color: var(--dim); }
.dim { color: var(--dim); }

/* in-flight strip: every row is the link into the job */
.inflight { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.inflight-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: var(--accent-deep); border: 1px solid var(--accent-dim); border-radius: var(--radius);
  color: var(--text); text-decoration: none; transition: box-shadow .12s, border-color .12s;
}
.inflight-row:hover { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); color: var(--text); }
.inflight-row .pct { min-width: 44px; text-align: right; font-size: 16px; font-weight: 500; color: var(--accent-bright); }
.inflight-row .open { margin-left: auto; color: var(--accent-bright); white-space: nowrap; }

/* hero */
/* The hero: what this version last made, big, first (Dan, 10/5: "the preview
   should always be at top in a hero kind of way"). */
.hero { padding: 0; overflow: hidden; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.hero-frame { background: #000; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.hero-frame img, .hero-frame video { max-width: 100%; max-height: 62vh; display: block; }
.hero-title { font-size: 20px; }
.empty-hero { padding: 42px 28px; text-align: center; background: linear-gradient(180deg, var(--panel), var(--sunk)); }
.empty-hero .empty-title { font-size: 26px; color: var(--text); margin-bottom: 8px; }
.primary-row { margin-bottom: 14px; }
.primary-label { display: block; font-size: 20px; color: var(--text); margin-bottom: 10px; }
.primary-input { gap: 10px; }
.primary-input input { flex: 1 1; font-size: 18px; padding: 12px 14px; }
.primary-input button { font-size: 16px; padding: 12px 26px; }
.hero-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); }
.hero-line .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.open-job, .btn-link {
  display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--accent-dim); color: var(--accent-bright); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.open-job:hover, .btn-link:hover { border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); color: var(--accent-bright); }
.btn-link.ghost { border-color: var(--line); color: var(--text); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 13px; padding: 7px 15px; }

/* run card */
.run .run-facts { margin: -2px 0 10px; }
.run-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.step { margin-bottom: 6px; }
.step input[type=text], .step input[type=url] { margin: 4px 0 2px 21px; width: calc(100% - 21px); }
.step .row { margin: 4px 0 2px 21px; }
.fmt-groups { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; max-height: 420px; overflow-y: auto; }
.fmt-group summary { cursor: pointer; padding: 7px 0; font-size: 14px; color: var(--text); list-style: none; display: flex; gap: 10px; align-items: baseline; }
.fmt-group summary::before { content: "▸"; color: var(--dim); font-size: 11px; }
.fmt-group[open] summary::before { content: "▾"; }
.fmt-group .fmt { padding-left: 18px; }
.fmt-group .fmt .muted { margin-left: auto; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* Deliverable kinds: what this version hands back, as lit tags. */
.kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.kind { font-family: var(--font-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-bright); background: var(--accent-deep); border: 1px solid var(--accent-dim); border-radius: 999px; padding: 4px 11px; }
.fmt-group .fmt .dim { margin-left: auto; }
.sched-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.banner.ok-note { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--text); }

/* jobs: every row a link, outputs under it */
.jobs-list { display: flex; flex-direction: column; gap: 4px; }
/* ch-gfx JobListItem: a card per job — header line, a meta line, the fold */
.jobcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 5px 10px; }
.jobcard.open { border-color: var(--accent-dim); }
.jobcard .head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.jobcard .head .arrow { color: var(--dim); font-size: 10px; width: 12px; }
.jobcard .head .pic .thumb.row { width: 48px; height: 28px; }
.jobcard .head .pic { display: inline-flex; }
.pager { justify-content: center; gap: 14px; margin: 10px 0 0; }
.pager .ghostlink:disabled { opacity: .4; cursor: default; }
.jobassets .asset .pill { font-size: 10px; }
.jobcard .head .jobname { font-size: 14px; }
.jobcard .head .spacer { flex: 1 1; }
.jobcard .head .pct { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.jobcard .head .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1; }
.jobcard .head .jobname { white-space: nowrap; flex: 0 1 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
/* ch-gfx's trash can: no box, grey, red on hover */
.jobcard .ghostlink.cancel { color: var(--dim); border: 0; background: none; padding: 0 4px; font-size: 15px; line-height: 1; cursor: pointer; }
.jobcard .ghostlink.cancel:hover { color: var(--err); }
.jobassets { margin: 8px 0 2px 22px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.jobassets .head { margin-bottom: 2px; }
.jobassets .errtext { color: var(--err-text); white-space: pre-wrap; word-break: break-word; }
.jobassets .asset { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--sunk); font-size: 13px; }
.jobassets .asset .name { flex: 1 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the job page's outputs: one small row per file */
.outputs-list { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.outputs-list .asset { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 13px; }
.outputs-list .asset .name { flex: 1 1; min-width: 0; display: flex; white-space: nowrap; font-size: 12px; }
.outputs-list .asset .name .stem { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.outputs-list .asset .name .ext { flex: 0 0 auto; }
.outputs-list .asset .size { min-width: 64px; text-align: right; }
.outputs-list .asset .mini { width: 44px; height: 26px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); background: var(--sunk); flex: 0 0 auto; }
.outputs-list .asset .mini.blank { display: inline-block; }
.artifact.lead { margin-bottom: 14px; }
.artifact .preview img, .artifact .preview video { max-height: 520px; }
.job { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.job.live { border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-deep), 0 0 14px -6px var(--accent-glow); }
.job-row {
  display: grid; grid-template-columns: 72px 1fr auto auto auto; align-items: center; grid-gap: 12px; gap: 12px;
  padding: 8px 12px; color: var(--text); text-decoration: none; transition: background .12s;
}
.job-row:hover { background: var(--panel-2); color: var(--text); }
.job-row .job-subject { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-row .job-status { display: flex; gap: 8px; align-items: center; }
.job-row .job-when { white-space: nowrap; }
.job-row .job-open { color: var(--accent-bright); font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.job-note { padding: 0 12px 8px 96px; }
.job-outs { padding: 0 12px 10px 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.outs { display: grid; grid-gap: 8px; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.out { position: relative; background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.out:hover { border-color: var(--accent-dim); }
.out.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow); }
.out .frame { display: block; }
.out .pick { position: absolute; top: 6px; left: 6px; z-index: 1; margin: 0; padding: 3px; display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.out .meta { padding: 6px 8px; border-top: 1px solid var(--line); }
.out .name { font-size: 11px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipbtn { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 3px 10px; font-size: 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-display); }
.chipbtn.on { border-color: var(--accent-dim); color: var(--accent-bright); background: var(--accent-deep); }
.chipbtn:hover:not(:disabled) { filter: none; box-shadow: none; border-color: var(--accent-dim); color: var(--accent-bright); }

/* schedules */
.sched { display: grid; grid-template-columns: 1fr auto auto; grid-gap: 14px; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.sched:first-child { border-top: 0; }
.sched.paused .sched-name { color: var(--muted); }
.sched-name { font-size: 16px; font-weight: 500; }
.sched-when { text-align: right; white-space: nowrap; }
.sched-when .display { font-size: 14px; color: var(--text); }

/* notifications */
.recipient { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-family: var(--font-mono); background: var(--sunk); }
.recipient button { background: transparent; border: 0; color: var(--muted); padding: 0 2px; font-size: 14px; line-height: 1; }
.recipient button:hover:not(:disabled) { color: var(--err); filter: none; box-shadow: none; }

@media (max-width: 760px) {
  .job-row { grid-template-columns: 72px 1fr auto; }
  .job-row .job-id, .job-row .job-when { display: none; }
  .sched { grid-template-columns: 1fr; }
  .sched-when { text-align: left; }
}

/* Actions on the picture (ch-gfx AssetThumbnailGrid): a strip across the
   bottom of the frame — version, play, download. Always there, brighter on
   hover; the picture itself opens the job with the video playing. */
.tile .frame { position: relative; }
.tile .frame .shot { display: block; }
/* the Latest-jobs slider */
.tile .slider { position: relative; }
.tile .slider .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 40px; border: 0; border-radius: 4px; background: rgba(20, 14, 13, .55); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tile .slider .arrow.left { left: 6px; } .tile .slider .arrow.right { right: 6px; }
.tile:hover .slider .arrow { opacity: 1; }
.tile .slider .arrow:hover { background: var(--accent-deep); color: var(--accent-bright); }
.tile .slider .dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 4px; }
.tile .slider .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(216, 191, 164, .35); }
.tile .slider .dots i.on { background: var(--accent); }
.tile .slider .count { position: absolute; top: 6px; right: 8px; color: var(--text); background: rgba(20, 14, 13, .55); border-radius: 4px; padding: 0 5px; font-family: var(--font-display); }
.tile .over { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 18px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); opacity: .82; transition: opacity .12s; }
.tile:hover .over { opacity: 1; }
.tile .over a { font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-decoration: none; padding: 3px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  background: rgba(0,0,0,.35); }
.tile .over a:hover { border-color: var(--accent); color: var(--accent-bright); }

/* Folded groups inside the run card: operator knobs, developer channels. */
.more-settings { margin-top: 8px; }
.more-settings > summary { cursor: pointer; list-style: none; padding: 6px 0; font-size: 13px; }
.more-settings > summary::before { content: "▸ "; color: var(--dim); }
.more-settings[open] > summary::before { content: "▾ "; }
.more-settings > .field, .more-settings > .step { margin-top: 8px; }

/* Data section (0019): one summary line + Refresh; the inputs fold away. */
.cut { display: grid; grid-template-columns: 1fr auto; grid-gap: 14px; gap: 14px; align-items: center; padding: 12px 14px; }
.cut-list { border-top: 1px solid var(--line); }
.cut-list summary { padding: 8px 14px; cursor: pointer; list-style: none; }
.cut-list summary::-webkit-details-marker { display: none; }
.cut-list summary::before { content: '▸ '; }
.cut-list[open] summary::before { content: '▾ '; }
.cut-row { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr auto; grid-gap: 12px; gap: 12px; padding: 5px 14px 5px 28px; border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.cut-when { text-align: right; white-space: nowrap; }

/* Runs over time (home): stacked area by client, failed as a dashed line. */
.runs { margin: 6px 0 18px; }
.runs-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; min-height: 20px; }
.runs-head .bad { color: var(--err); }
.runs-day { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text); }
.runs-day .display { color: var(--muted); }
.runs-svg { width: 100%; height: auto; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.runs-svg .grid { stroke: var(--line); stroke-width: 1; }
.runs-svg .tick { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }
.runs-svg .cross { stroke: var(--text); stroke-opacity: .5; stroke-width: 1; }
.runs-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; color: var(--text); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sw.dash { background: none; border-top: 2px dashed var(--err); height: 0; vertical-align: 3px; }

/* Your versions: the ones you run most, first. */
.grid.mine .card { padding: 0; overflow: hidden; }
.grid.mine .body { padding: 8px 12px 10px; }

/* Account menu: the name is the control; the views live under it. */
.who { position: relative; margin-left: 18px; }
.who > summary { list-style: none; cursor: pointer; }
.who > summary::-webkit-details-marker { display: none; }
.who-name { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius); font-size: 13px; color: var(--text); border: 1px solid transparent; }
.who-name:hover, .who[open] > .who-name { background: var(--panel-2); border-color: var(--line); }
.who-as { color: var(--accent-bright); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; padding: 1px 7px; border: 1px solid var(--accent-dim); border-radius: 999px; }
.who-caret { color: var(--muted); font-size: 11px; }
.who-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px -12px rgba(0,0,0,.7); z-index: 50; padding: 6px; }
.who-head { padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.who-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--muted); padding: 6px 10px 2px; }
.who-views form { margin: 0; }
.who-item { display: flex; width: 100%; justify-content: space-between; gap: 14px; align-items: baseline; white-space: nowrap; background: none; border: 0; color: var(--text); text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.who-item:hover:not(:disabled) { background: var(--panel-2); }
.who-item.current { color: var(--accent-bright); cursor: default; }
.who-item.current::after { content: '✓'; font-size: 12px; }
.who-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

/* The star: keep a run's settings as a save. */
.star { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.star:hover { color: var(--accent-bright); border-color: var(--accent-dim); }
.star.done { color: var(--accent-bright); border-color: var(--accent-dim); }
.star.compact { padding: 2px 7px; font-size: 14px; line-height: 1; }
.star-wrap .bad { color: var(--err); }
.job { position: relative; }
.job .job-tools { position: absolute; right: 12px; top: 10px; margin: 0; padding: 0; }
.job .job-row { padding-right: 52px; }

/* The written API guide (/docs/api), rendered from docs/API.md. */
.guide { max-width: 760px; }
.guide h1 { margin-bottom: 6px; }
.guide h2 { margin-top: 28px; }
.guide p, .guide li { font-size: 15px; line-height: 1.55; color: var(--text); }
.guide pre { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.guide code { font-family: var(--font-mono); font-size: .92em; }
.guide p code, .guide li code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- phone (10/9) ----------
   Dan: "on mobile we're nowhere near readability — imagery maximized, type
   legible, fewer little labels." One column, pictures edge to edge, 16px
   body, and the columns and links a thumb cannot use are gone. `.desk`
   marks what only a desktop shows. */
@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: 12px 12px 40px; }
  h1 { font-size: 24px; }
  h2 { font-size: 14px; }
  .small { font-size: 14px; }
  .desk { display: none !important; }

  .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 10px 14px; }
  .topbar nav { gap: 14px; }
  .topbar nav a { font-size: 16px; }
  .search { flex: 1 1 100%; min-width: 0; margin: 0; order: 9; }
  .search input[type=search] { font-size: 16px; padding: 8px 12px; }

  .statusline { padding: 10px 12px; gap: 8px 12px; }
  .statusline .facts { font-size: 14px; }
  .statusline .facts .n { font-size: 16px; }

  .grid.projects, .grid.mine, .asset-grid, .asset-grid.outputs { grid-template-columns: 1fr; gap: 12px; }
  .grid.frameworks { grid-template-columns: 1fr 1fr; }
  .pcard h3 { font-size: 20px; }
  .tile .meta { padding: 10px 12px; }
  .tile .meta .jobname { font-size: 16px; white-space: normal; }
  .tile .over a { font-size: 13px; padding: 5px 10px; }

  table.jobs .col-version, table.jobs .when, table.jobs .actions { display: none; }
  table.jobs td.thumbcell { width: 104px; }
  .thumb.row { width: 96px; height: 54px; }
  table.jobs td { padding: 8px 8px; }
  .jobname { font-size: 15px; }
  /* Nothing under 14px in a job row, and the progress bar on its own full
     line so it is seen, not squeezed beside the pill (Dan, 10/10). */
  table.jobs .pill, table.jobs .orgtag, table.jobs .thumb .label { font-size: 14px; }
  table.jobs .bar { flex: 1 1 100%; width: auto !important; min-width: 0; height: 7px; }
  table.jobs .queuepos { font-size: 14px; }

  .job-row { grid-template-columns: 96px 1fr auto; }
  .job-row .job-subject { font-size: 16px; white-space: normal; }
  .hero-frame { min-height: 0; }
  .hero-frame img, .hero-frame video { max-height: none; width: 100%; }
}

/* A job that ran a BRANCH of the versions repo rather than the deployed code
   (ref on the row) says so, in mono, where the row is named. */
.reftag { font-family: var(--font-mono); font-size: 11px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 4px; padding: 0 5px; white-space: nowrap; vertical-align: middle; font-weight: 500; text-transform: none; letter-spacing: 0; }
.reftag::before { content: "⎇ "; color: var(--muted); }
@media (max-width: 760px) {
  .reftag { font-size: 14px; }
}

/* ---------- the live jobs list (10/10, app/LiveJobs.js) ----------
   A job that just finished is lit for a moment, so the eye lands on its new
   picture; "live" in the section header breathes while something is running. */
@keyframes jobflash {
  0% { background: var(--accent-deep); box-shadow: inset 3px 0 0 var(--accent); }
  100% { background: transparent; box-shadow: none; }
}
table.jobs tr.flash td { animation: jobflash 4s ease-out both; }
table.jobs .queuepos { white-space: nowrap; }
table.jobs .queuepos .n { font-family: var(--font-display); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.live { font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--dim); margin-right: 5px; vertical-align: 1px; }
.live.on { color: var(--accent-bright); }
.live.on::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* the lightbox — ch-node's ImageLightbox: a near-black overlay, the picture
   centred in a big frame, round icon buttons top right, round arrows at
   the sides, Esc / click outside to close. Actions can live in the header
   (ch-node keeps publish and target-point tools there). */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox .box { position: relative; width: 94vw; max-width: 1500px; height: 92vh; display: flex; flex-direction: column; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 30px rgba(0, 0, 0, .8); cursor: default; }
.lightbox .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: rgba(0, 0, 0, .7); color: #fff; }
.lightbox .bar .name { font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lightbox .bar .ghostlink { border: 0; background: transparent; color: #fff; font-size: 14px; padding: 8px 12px; border-radius: 999px; }
.lightbox .bar .ghostlink:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.lightbox .bar .close { border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 8px; }
.lightbox .bar .close:hover { background: rgba(255, 255, 255, .2); color: #f44336; transform: scale(1.1); }
.lightbox .stage { position: relative; flex: 1 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; background: #000; }
.lightbox .stage img, .lightbox .stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.lightbox .stage .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.lightbox .stage .arrow.left { left: 20px; } .lightbox .stage .arrow.right { right: 20px; }
.lightbox .stage .arrow:hover { background: rgba(0, 0, 0, .85); transform: translateY(-50%) scale(1.1); }
.lightbox .foot { padding: 12px 20px; background: rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 10px; }
.lightbox .foot .counter { color: #fff; font-size: 14px; text-align: center; }
.lightbox .foot .strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; justify-content: center; flex-wrap: wrap; }
.lightbox .foot .thumb { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .6; padding: 0; background: #111; color: #ccc; display: flex; align-items: center; justify-content: center; }
.lightbox .foot .thumb:hover { opacity: .9; transform: scale(1.05); }
.lightbox .foot .thumb.on { border-color: var(--accent); opacity: 1; }
.lightbox .foot .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The version's parameter list, editable (ParamEditor) */
.param-editor { margin: -6px 0 18px; }
.param-editor .param-rows { margin-top: 10px; }
.param-editor fieldset.param-row { padding: 8px 10px; margin: 0 0 8px; }
.param-editor input, .param-editor select, .param-editor textarea { font-size: 12px; padding: 5px 7px; }
.param-editor button.small { padding: 4px 9px; font-size: 12px; }

/* A map's layer list (LayerPanel), the control for a `layers` parameter */
fieldset.layers { margin-top: 0; }
.layer-panel .layer-hits { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.layer-panel .layer-hits .hit { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.layer-panel .layer-hits .hit:hover { background: var(--sunk); }
.layer-panel .layer-hits .hit.in { opacity: .5; cursor: default; }
.layer-panel .layer-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.layer-panel .layer { display: flex; align-items: center; gap: 10px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 12px; }
.layer-panel .layer.off { opacity: .5; }
.layer-panel .layer .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); flex: 0 0 auto; }
.layer-panel .layer .name { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-panel .layer .table { min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-panel .layer .type { min-width: 48px; }
.layer-panel button.small { padding: 2px 7px; font-size: 11px; }
.lightbox .box.layer-edit { max-width: 760px; height: auto; max-height: 88vh; }
.lightbox .box.layer-edit textarea { flex: 1 1; min-height: 360px; margin: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.4); color: var(--text); font-size: 12px; padding: 12px 18px; resize: vertical; }