@vfrey/vfrey 0.0.1 → 1.0.0-beta.1

package/src/desk/ui/app.css

@@ -0,0 +1,505 @@
+@font-face {
+  font-family: "Google Sans Flex";
+  src: url("/fonts/google-sans-flex-latin.woff2") format("woff2");
+  font-weight: 100 1000;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("/fonts/jetbrains-mono-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* The landing's six colors. Components use roles, never raw colors (status tones aside). */
+:root {
+  --c-black: #000000; --c-white: #ffffff; --c-blue-50: #e3f2fd; --c-blue-200: #90caf9; --c-blue-500: #2196f3; --c-blue-900: #0d47a1;
+  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --sidebar-w: 232px;
+}
+:root, :root[data-theme="light"] {
+  color-scheme: light;
+  --canvas: var(--c-white); --elevated: var(--c-white);
+  --ink: var(--c-black); --body: #6b6b6b; --mute: #6b6b6b; --faint: #b5b5b5;
+  --hairline: #e5e5e5; --hairline-soft: #f5f5f5; --tint: var(--c-blue-50);
+  --link: var(--c-blue-900); --accent: var(--c-blue-500); --accent-pair: var(--c-blue-500);
+  --error: #c4161c;
+  --button: var(--c-black); --on-button: var(--c-white); --button-hover: #333333;
+  --sel-bg: var(--c-blue-900); --sel-ink: var(--c-white);
+  --scrim: rgba(0, 0, 0, 0.4);
+  --run-fg: #0d47a1;   --run-bg: #e3f2fd;
+  --ok-fg: #067647;    --ok-bg: #e6f5ec;
+  --wait-fg: #6b6b6b;  --wait-bg: #ffffff;
+  --retry-fg: #ab570a; --retry-bg: #fff6e8;
+  --block-fg: #c4161c; --block-bg: #fdecec;
+  --dead-fg: #7a0c10;  --dead-bg: #f7dede;
+  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --canvas: var(--c-black); --elevated: var(--c-black);
+    --ink: var(--c-white); --body: #9a9a9a; --mute: #9a9a9a; --faint: #4a4a4a;
+    --hairline: #262626; --hairline-soft: #111111; --tint: #06101f;
+    --link: var(--c-blue-200); --accent: var(--c-blue-500); --accent-pair: var(--c-blue-500);
+    --error: #ff6b6b;
+    --button: var(--c-white); --on-button: var(--c-black); --button-hover: #d4d4d4;
+    --sel-bg: var(--c-blue-200); --sel-ink: var(--c-black);
+    --scrim: rgba(0, 0, 0, 0.7);
+    --run-fg: #90caf9;   --run-bg: #0d47a1;
+    --ok-fg: #4cc38a;    --ok-bg: #0b2216;
+    --wait-fg: #9a9a9a;  --wait-bg: #000000;
+    --retry-fg: #f5a623; --retry-bg: #2b1d08;
+    --block-fg: #ff6b6b; --block-bg: #2e1012;
+    --dead-fg: #f08a8e;  --dead-bg: #36100f;
+    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --canvas: var(--c-black); --elevated: var(--c-black);
+  --ink: var(--c-white); --body: #9a9a9a; --mute: #9a9a9a; --faint: #4a4a4a;
+  --hairline: #262626; --hairline-soft: #111111; --tint: #06101f;
+  --link: var(--c-blue-200); --accent: var(--c-blue-500); --accent-pair: var(--c-blue-500);
+  --error: #ff6b6b;
+  --button: var(--c-white); --on-button: var(--c-black); --button-hover: #d4d4d4;
+  --sel-bg: var(--c-blue-200); --sel-ink: var(--c-black);
+  --scrim: rgba(0, 0, 0, 0.7);
+  --run-fg: #90caf9;   --run-bg: #0d47a1;
+  --ok-fg: #4cc38a;    --ok-bg: #0b2216;
+  --wait-fg: #9a9a9a;  --wait-bg: #000000;
+  --retry-fg: #f5a623; --retry-bg: #2b1d08;
+  --block-fg: #ff6b6b; --block-bg: #2e1012;
+  --dead-fg: #f08a8e;  --dead-bg: #36100f;
+  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--canvas);
+  color: var(--ink);
+  font: 400 14px/1.5 "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-optical-sizing: auto;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+::selection { background: var(--sel-bg); color: var(--sel-ink); }
+a { color: var(--link); text-decoration: none; }
+a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
+h1, h2, h3, p { margin: 0; }
+button, input, select, textarea { font: inherit; color: inherit; }
+code, kbd, pre, samp, .mono, .eyebrow, th, .side-section, .group-label, .pill, .chip, .filter .n, .count, .env, .live, .meta dt, .kv .k, .card .top, .card .foot, .tl-dur, .tl-name, .axis .scale, .rail .step span, .stat .k, .hint, .crumb, .col-head .n, .tick-chip, .sub-mono, .theme-btn, .toast small, .field > label, .label, .tl-events td.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; font-feature-settings: "tnum"; }
+svg { flex: none; }
+.sq { width: 16px; height: 16px; }
+/* icons: 16px beside 14-15px text, 14px inside small mono pills/chips/buttons; whole pixels only */
+svg:not(.sq) { width: 16px; height: 16px; }
+
+:focus { outline: none; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
+
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* ---------- shell ---------- */
+.shell { display: flex; min-height: 100vh; }
+.sidebar {
+  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 30;
+  display: flex; flex-direction: column; padding: 16px 12px 12px;
+  background: var(--canvas); border-right: 1px solid var(--hairline);
+}
+.wordmark { font-weight: 560; letter-spacing: -0.04em; color: var(--ink); font-size: 22px; line-height: 1; }
+.side-word::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 8px; background: var(--accent); vertical-align: 0; }
+.wordmark:hover { text-decoration: none; }
+.side-word { padding: 6px 12px 0; }
+.project-name { margin: 2px 12px 0; font-size: 12px; font-weight: 560; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.topbar .project-name { margin: 0 auto 0 0; flex: 1 1 auto; min-width: 0; }
+.side-section { margin: 28px 12px 8px; font-size: 12px; text-transform: uppercase; color: var(--mute); }
+#nav { display: flex; flex-direction: column; gap: 2px; }
+#nav a {
+  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px;
+  border-left: 3px solid transparent; color: var(--body); font-size: 14px;
+}
+#nav a:hover { background: var(--hairline-soft); text-decoration: none; }
+#nav a[aria-current="page"] { background: var(--tint); color: var(--ink); font-weight: 560; border-left-color: var(--accent); }
+#nav a svg { color: var(--ink); width: 16px; height: 16px; display: block; }
+#nav .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; background: var(--ink); color: var(--canvas); font-size: 11px; line-height: 20px; text-align: center; }
+#nav .count[hidden] { display: none; }
+.side-foot { margin-top: auto; padding: 12px 12px 4px; display: grid; gap: 10px; }
+.live { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--body); text-transform: uppercase; }
+.env { font-size: 11px; color: var(--mute); line-height: 1.5; overflow-wrap: anywhere; }
+.theme-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 12px; text-transform: uppercase; cursor: pointer; }
+.theme-btn:hover { background: var(--hairline-soft); }
+.theme-btn svg { width: 16px; height: 16px; }
+.live-dot { width: 8px; height: 8px; background: var(--faint); flex: none; }
+[data-live="live"] .live-dot, .live-dot[data-live="live"] { background: var(--accent); animation: blink 1.2s steps(2, jump-none) infinite; }
+[data-live="refreshing"] .live-dot, .live-dot[data-live="refreshing"] { background: var(--accent-pair); }
+[data-live="offline"] .live-dot, .live-dot[data-live="offline"] { background: var(--error); }
+
+main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); padding: 32px 40px 64px; }
+.view { max-width: 1280px; margin: 0 auto; animation: fade 120ms linear; }
+.view.narrow { max-width: 920px; margin-left: 0; }
+@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+
+.topbar, .scrim { display: none; }
+
+/* ---------- page header ---------- */
+.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; flex-wrap: wrap; }
+.page-head h1 { font-size: 32px; line-height: 38px; font-weight: 560; letter-spacing: -0.04em; }
+.eyebrow { display: block; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; color: var(--body); }
+.page-head .sub { color: var(--body); margin-top: 2px; }
+.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--body); font-size: 12px; text-transform: uppercase; margin-bottom: 8px; }
+.crumb:hover { color: var(--ink); text-decoration: none; }
+.crumb svg { width: 14px; height: 14px; transform: rotate(180deg); }
+
+/* ---------- buttons and controls ---------- */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  height: 38px; padding: 0 16px;
+  border: 2px solid var(--button); background: var(--button); color: var(--on-button);
+  font-weight: 560; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none;
+  transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
+}
+.btn:hover { background: var(--button-hover); border-color: var(--button-hover); text-decoration: none; }
+.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
+.btn.secondary:hover { background: var(--hairline-soft); border-color: var(--ink); }
+.btn.ghost { background: transparent; color: var(--body); border-color: transparent; }
+.btn.ghost:hover { background: var(--hairline-soft); color: var(--ink); }
+.btn.danger { background: transparent; color: var(--error); border-color: var(--error); }
+.btn.danger:hover { background: var(--block-bg); border-color: var(--error); }
+.btn.danger.solid { background: var(--error); border-color: var(--error); color: #fff; }
+.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; border-width: 1px; }
+.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+.icon-btn {
+  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
+  background: transparent; color: var(--body); cursor: pointer;
+}
+.icon-btn:hover { background: var(--hairline-soft); color: var(--ink); }
+.spin { animation: spin 900ms linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* A grid item stretches to its row. Without align-content the label/control rows of a field that has
+   no hint would stretch to fill the row, pulling its control out of line with a field that has one. */
+.field { display: grid; align-content: start; gap: 6px; min-width: 0; }
+.field > label, .label { font-size: 12px; text-transform: uppercase; color: var(--ink); }
+.hint { font-size: 11px; color: var(--mute); }
+input[type="text"], input[type="number"], input[type="search"], input[type="password"], select, textarea {
+  width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--hairline);
+  background: var(--canvas); color: var(--ink); transition: border-color 120ms linear;
+}
+input::placeholder { color: var(--mute); opacity: 1; }
+input:hover, select:hover { border-color: var(--ink); }
+select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
+.search { position: relative; }
+.search svg { position: absolute; left: 11px; top: 10px; color: var(--mute); pointer-events: none; }
+.search input { padding-left: 34px; }
+
+.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
+.switch input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 22px; margin: 0; border: 2px solid var(--ink); background: transparent; cursor: pointer; flex: none; }
+.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--ink); transition: transform 120ms linear; }
+.switch input:checked { background: var(--ink); }
+.switch input:checked::after { transform: translateX(18px); background: var(--canvas); }
+.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+.segmented { display: inline-flex; border: 2px solid var(--ink); }
+.segmented button { height: 32px; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font-weight: 560; cursor: pointer; }
+.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
+.segmented button:hover:not([aria-pressed="true"]) { background: var(--hairline-soft); }
+
+/* ---------- cards, panels ---------- */
+.panel { border: 1px solid var(--hairline); background: var(--elevated); }
+.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
+.panel-head h2 { font-size: 16px; font-weight: 560; letter-spacing: -0.02em; }
+.panel-head .sub { font-size: 12px; color: var(--mute); }
+.panel-body { padding: 20px; }
+.stack { display: grid; gap: 20px; }
+.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
+.form-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
+.switch-row { display: flex; flex-wrap: wrap; gap: 12px 28px; }
+
+/* ---------- pills, chips ---------- */
+.pill {
+  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px;
+  font-size: 11px; text-transform: uppercase; white-space: nowrap; background: var(--wait-bg); color: var(--wait-fg); border: 1px solid currentColor;
+}
+.pill::before { content: ""; width: 6px; height: 6px; background: currentColor; }
+.pill.plain::before { display: none; }
+.pill.plain { padding: 0 9px; }
+.pill svg { width: 14px; height: 14px; }
+.pill:has(svg)::before { display: none; }
+.tone-wait { background: var(--wait-bg); color: var(--wait-fg); }
+.tone-run { background: var(--run-bg); color: var(--run-fg); }
+.tone-ok { background: var(--ok-bg); color: var(--ok-fg); }
+.tone-skip { background: var(--wait-bg); color: var(--wait-fg); }
+.tone-retry, .tone-rej { background: var(--retry-bg); color: var(--retry-fg); }
+.tone-block { background: var(--block-bg); color: var(--block-fg); }
+.tone-dead { background: var(--dead-bg); color: var(--dead-fg); }
+.tone-run.live::before { animation: blink 1.4s ease-in-out infinite; }
+@keyframes blink { 50% { opacity: 0.25; } }
+.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; font-size: 11px; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--hairline); white-space: nowrap; }
+.chip.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
+.chip.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: currentColor; }
+.chip.bad { background: var(--block-bg); color: var(--block-fg); border-color: currentColor; }
+.chip.warn { background: var(--retry-bg); color: var(--retry-fg); border-color: currentColor; }
+.chip svg { width: 14px; height: 14px; }
+.btn.sm svg { width: 14px; height: 14px; }
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.tick-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 2px solid var(--accent); background: var(--run-bg); color: var(--run-fg); font-size: 13px; }
+
+/* ---------- board ---------- */
+.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
+.col { background: transparent; border: 1px solid var(--hairline); padding: 12px; min-height: 220px; min-width: 0; }
+.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; font-weight: 560; text-transform: uppercase; font-size: 12px; font-family: var(--mono); }
+.col-head .dot { width: 8px; height: 8px; background: var(--ink); }
+.col-head .n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border: 1px solid var(--hairline); color: var(--ink); font-size: 12px; line-height: 20px; text-align: center; }
+.col-cards { display: grid; gap: 10px; }
+.card {
+  /* Fixed rows: header 22px, title 2 lines, stage strip, footer. Every card is the same height in every column and state. */
+  display: grid; gap: 10px; padding: 14px; background: var(--canvas); border: 1px solid var(--hairline);
+  grid-template-rows: 22px calc(2 * 1.35em) 28px 16px; box-sizing: border-box;
+  color: var(--ink); transition: border-color 120ms linear, background-color 120ms linear;
+}
+.card:hover { border-color: var(--ink); background: var(--hairline-soft); text-decoration: none; }
+.card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; min-width: 0; font-size: 11px; color: var(--mute); }
+.card .top .pill { flex: none; }
+.card .series-id { flex: 1 1 auto; min-width: 0; color: var(--ink); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card .title { height: calc(2 * 1.35em); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.card .title.none { color: var(--mute); font-weight: 400; }
+.card .rail { height: 28px; overflow: hidden; }
+.card .rail .step span { line-height: 10px; }
+.card .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
+.card.running { border-color: var(--accent); border-left-width: 4px; }
+.empty-col { padding: 20px 12px; text-align: center; color: var(--mute); font-size: 12px; font-family: var(--mono); text-transform: uppercase; border: 1px dashed var(--hairline); }
+.empty-col::before { content: "□ □ □"; display: block; margin-bottom: 6px; letter-spacing: 0.25em; color: var(--hairline); }
+.rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
+.rail .step { display: grid; gap: 4px; min-width: 0; }
+.rail .step i { position: relative; display: block; height: 14px; border: 1px solid var(--hairline); background: transparent; }
+.rail .step span { font-size: 8px; color: var(--mute); white-space: nowrap; text-transform: uppercase; overflow: hidden; text-overflow: clip; }
+.rail .done i { background: var(--ink); border-color: var(--ink); }
+.rail .done span { color: var(--ink); }
+.rail .active i { border-color: var(--accent); background: var(--accent); animation: blink 1.2s steps(2, jump-none) infinite; }
+.rail .active i::after { content: ""; position: absolute; inset: 3px; background: var(--canvas); }
+.rail .active span { color: var(--accent); }
+.rail .retry i { background: var(--retry-fg); border-color: var(--retry-fg); }
+.rail .retry span { color: var(--retry-fg); }
+.rail .failed i { background: var(--block-fg); border-color: var(--block-fg); }
+.rail .failed span { color: var(--block-fg); }
+.rail .skipped i { border-style: dashed; border-color: var(--mute); }
+.rail .skipped span { color: var(--mute); }
+
+/* ---------- tables ---------- */
+.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.filters { display: flex; flex-wrap: wrap; gap: 6px; }
+.filter { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--hairline); background: transparent; color: var(--ink); cursor: pointer; font-weight: 500; }
+.filter:hover { border-color: var(--ink); }
+.filter[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
+.filter .n { font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; }
+.toolbar .search { width: 280px; max-width: 100%; }
+.table-wrap { border: 1px solid var(--hairline); overflow-x: auto; background: var(--canvas); }
+table { width: 100%; border-collapse: collapse; }
+th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--mute); padding: 10px 16px; background: var(--hairline-soft); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
+td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
+tr:last-child td { border-bottom: 0; }
+tbody tr.row-link { cursor: pointer; }
+td a.cell-link { display: block; margin: -12px -16px; padding: 12px 16px; color: inherit; }
+td a.cell-link:hover { text-decoration: none; }
+td:has(> a.cell-fill) { position: relative; }
+td a.cell-fill { position: absolute; inset: 0; }
+td a.series-link { position: relative; z-index: 1; }
+.card { position: relative; text-decoration: none; }
+tbody tr.row-link:hover td { background: var(--hairline-soft); }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
+td .sub, .sub { color: var(--mute); font-size: 12px; }
+td .t { font-weight: 500; color: var(--ink); }
+td a.cover { color: inherit; }
+td a.cover:hover { text-decoration: none; }
+.nowrap { white-space: nowrap; }
+.muted { color: var(--mute); }
+
+.empty { display: grid; justify-items: center; gap: 10px; padding: 56px 24px; text-align: center; color: var(--body); }
+.empty svg { width: 40px; height: 40px; color: var(--mute); }
+.cells { margin: 0; font: 500 22px/1.15 var(--mono); letter-spacing: 0.35em; color: var(--ink); text-align: center; user-select: none; }
+.cells b { font-weight: 500; color: var(--accent); }
+.cells .d { color: var(--hairline); }
+.empty p { max-width: 380px; }
+.empty .t { color: var(--ink); font-weight: 560; font-size: 16px; letter-spacing: -0.02em; }
+
+/* ---------- run detail ---------- */
+.run-head { display: grid; gap: 14px; margin-bottom: 20px; }
+.run-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+.run-title h1 { font-size: 32px; line-height: 38px; font-weight: 560; letter-spacing: -0.04em; overflow-wrap: anywhere; }
+.meta { display: flex; flex-wrap: wrap; gap: 8px 28px; }
+.meta div { display: grid; gap: 1px; }
+.meta dt { font-size: 11px; text-transform: uppercase; color: var(--mute); }
+.meta dd { margin: 0; font-weight: 560; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
+dl { margin: 0; }
+.run-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
+.callout { display: flex; gap: 12px; padding: 14px 16px; background: var(--block-bg); color: var(--block-fg); border-left: 4px solid currentColor; margin-bottom: 20px; }
+.callout svg { width: 16px; height: 16px; margin-top: 2px; }
+.callout .t { font-weight: 560; }
+.callout p { color: inherit; overflow-wrap: anywhere; }
+.confirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--hairline); background: var(--hairline-soft); }
+.notice { margin-top: 12px; padding: 10px 14px; background: var(--retry-bg); color: var(--retry-fg); border-left: 4px solid currentColor; font-size: 13px; }
+.notice b { font-weight: 560; }
+
+.axis { display: grid; grid-template-columns: 112px minmax(0, 1fr) 80px 28px; gap: 12px; padding: 0 20px; margin-top: 12px; }
+.axis .scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--mute); font-variant-numeric: tabular-nums; }
+.tl-row { border-top: 1px solid var(--hairline); }
+.tl-row:first-of-type { border-top: 0; }
+.tl-main { display: grid; grid-template-columns: 112px minmax(0, 1fr) 80px 28px; gap: 12px; align-items: center; width: 100%; padding: 12px 20px; border: 0; background: transparent; text-align: left; cursor: pointer; }
+.tl-main:hover { background: var(--hairline-soft); }
+.tl-name { font-size: 12px; text-transform: uppercase; }
+.track { position: relative; height: 16px; border: 1px solid var(--hairline); background-image: repeating-linear-gradient(90deg, transparent 0 7px, var(--hairline) 7px 8px); }
+.bar { position: absolute; top: -1px; bottom: -1px; min-width: 2px; background-color: var(--ok-fg); background-image: repeating-linear-gradient(90deg, transparent 0 7px, var(--canvas) 7px 8px); }
+.bar.running { background-color: var(--accent); animation: blink 1.2s steps(2, jump-none) infinite; }
+.bar.skipped { background: var(--faint); }
+.bar.retrying, .bar.rejected { background: var(--retry-fg); }
+.bar.blocked { background: var(--block-fg); }
+.bar.dead { background: var(--dead-fg); }
+.bar.pending { background: var(--faint); }
+.tl-dur { text-align: right; font-size: 12px; color: var(--ink); }
+.tl-chev { color: var(--mute); transition: transform 120ms; display: grid; place-items: center; }
+.tl-main[aria-expanded="true"] .tl-chev { transform: rotate(90deg); }
+.tl-events { padding: 0 20px 14px 20px; }
+.tl-events table { font-size: 13px; }
+.tl-events th { background: transparent; padding: 6px 10px 6px 0; }
+.tl-events td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline-soft); }
+.tl-events td.msg { color: var(--body); overflow-wrap: anywhere; }
+
+.video-box { display: grid; place-items: center; background: #000; overflow: hidden; border: 1px solid var(--hairline); }
+.video-box video { display: block; height: 420px; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
+.video-ph { display: grid; place-items: center; align-content: center; gap: 8px; height: 280px; width: 100%; padding: 24px; text-align: center; border: 1px dashed var(--hairline); color: var(--mute); background: var(--hairline-soft); }
+.video-ph svg { width: 32px; height: 32px; color: var(--mute); }
+.preview-box { display: grid; place-items: center; background: #0b0f14; border-radius: 8px; overflow: hidden; }
+.preview-box iframe { display: block; border: 0; width: 100%; max-width: 270px; aspect-ratio: 9 / 16; }
+details.fold { border: 1px solid var(--hairline); }
+details.fold summary { padding: 9px 12px; cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 6px; }
+details.fold summary::-webkit-details-marker { display: none; }
+details.fold summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--body); border-bottom: 1.5px solid var(--body); transform: rotate(-45deg); transition: transform 120ms; }
+details.fold[open] summary::before { transform: rotate(45deg); }
+details.fold pre { margin: 0; padding: 4px 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--body); font-size: 13px; max-height: 260px; overflow: auto; font-family: inherit; }
+.kv { display: grid; gap: 14px; }
+.kv .k { font-size: 11px; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
+.kv .v { overflow-wrap: anywhere; }
+.pub { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--hairline); }
+.pub:first-child { border-top: 0; padding-top: 0; }
+.pub:last-child { padding-bottom: 0; }
+.pub .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 560; text-transform: capitalize; }
+.pub .detail { color: var(--body); font-size: 13px; overflow-wrap: anywhere; }
+
+/* ---------- series ---------- */
+.series-list { display: grid; gap: 12px; }
+.series-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; color: var(--ink); }
+.series-row:hover { text-decoration: none; border-color: var(--ink); background: var(--hairline-soft); }
+.series-row .name { font-weight: 560; font-size: 16px; letter-spacing: -0.02em; }
+.series-row .niche { color: var(--body); overflow-wrap: anywhere; }
+.series-row .sub { margin-top: 2px; }
+.sec-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); }
+.sec-row:first-of-type { border-top: 0; padding-top: 0; }
+.sec-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.sec-form input { width: 240px; max-width: 100%; }
+.sec-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
+.group-label { font-size: 11px; text-transform: uppercase; color: var(--mute); margin: 18px 0 8px; }
+.group-label:first-child { margin-top: 0; }
+.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); }
+.list-row:first-child { border-top: 0; padding-top: 0; }
+.list-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.add-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
+.plat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
+.plat:first-of-type { border-top: 0; padding-top: 0; }
+.plat .name { font-weight: 500; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.plat select { width: 160px; }
+.quota-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
+.usage { font-size: 13px; color: var(--body); display: flex; align-items: center; gap: 8px; min-height: 36px; flex-wrap: wrap; }
+.inline-form { margin-bottom: 20px; }
+
+/* ---------- settings / misc ---------- */
+.copy-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.copy-row code { overflow-wrap: anywhere; background: var(--hairline-soft); border: 1px solid var(--hairline); padding: 4px 8px; font-size: 12px; }
+.setting { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--hairline); }
+.setting:first-of-type { border-top: 0; }
+.setting .k { font-weight: 500; }
+.setting .k small { display: block; font-weight: 400; color: var(--mute); font-size: 12px; }
+.stat { display: grid; gap: 2px; padding: 16px 20px; }
+.stat .n { font-family: var(--mono); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
+.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
+.warn-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--hairline); }
+.warn-row:first-child { border-top: 0; }
+.warn-row .grow { flex: 1; min-width: 0; }
+.warn-row.acked { opacity: 0.6; }
+.warn-row.acked svg.ic { color: var(--ok-fg); }
+.warn-row svg.ic { width: 16px; height: 16px; margin-top: 2px; color: var(--retry-fg); }
+.warn-row .code { font-weight: 560; }
+.warn-row .msg { color: var(--body); overflow-wrap: anywhere; }
+
+/* ---------- toasts ---------- */
+#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
+.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--ink); color: var(--canvas); border-left: 4px solid var(--accent); animation: fade 120ms linear; }
+.toast .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.toast b { font-weight: 560; }
+.toast small { display: block; opacity: 0.75; font-size: 13px; }
+.toast.error { background: var(--error); color: #fff; border-left-color: #fff; }
+.toast button { background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer; padding: 2px; display: grid; }
+.toast button:hover { opacity: 1; }
+
+/* ---------- responsive ---------- */
+@media (max-width: 1180px) {
+  .run-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 900px) {
+  .topbar {
+    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px;
+    background: var(--canvas); border-bottom: 1px solid var(--hairline);
+  }
+  .topbar .live-dot { width: 8px; height: 8px; background: var(--faint); flex: none; }
+  .sidebar { transform: translateX(-100%); transition: transform 120ms linear; }
+  body.menu-open .sidebar { transform: none; }
+  .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 180ms; }
+  body.menu-open .scrim { opacity: 1; pointer-events: auto; }
+  main { margin-left: 0; padding: 20px 16px 48px; }
+  .board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 12px; scroll-padding: 0 16px; }
+  .col { flex: 0 0 85%; scroll-snap-align: start; }
+  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
+  .series-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .setting { grid-template-columns: minmax(0, 1fr); }
+  .quota-row { grid-template-columns: minmax(0, 1fr); }
+  .add-row { grid-template-columns: minmax(0, 1fr); }
+  .axis { display: none; }
+  .tl-main { grid-template-columns: 76px minmax(0, 1fr) 56px 20px; gap: 8px; padding: 12px 14px; }
+  .tl-events { padding: 0 14px 14px; overflow-x: auto; }
+  .panel-body, .panel-head { padding-left: 16px; padding-right: 16px; }
+  .page-head h1, .run-title h1 { font-size: 21px; line-height: 28px; }
+  .toolbar .search { width: 100%; }
+  .sec-row { grid-template-columns: minmax(0, 1fr); }
+  .sec-form input { width: 100%; flex: 1 1 100%; }
+  .warn-row { padding: 14px 16px; flex-wrap: wrap; }
+  .list-row { flex-wrap: wrap; }
+  .list-row .grow { flex-basis: 100%; order: 3; }
+  .stat { padding: 14px 16px; }
+  #toasts { right: 16px; bottom: 16px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}
+
+/* Metrics: a dash for an unknown value, with a small muted reason under it. */
+/* autopilot screens */
+.stack > * { min-width: 0; }
+.add-row.screen-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 0; margin: 0 0 16px; padding: 0; }
+.add-row.src-form { grid-template-columns: 150px 190px minmax(0, 1fr) auto; margin-top: 0; border-top: 0; padding-top: 0; }
+@media (max-width: 900px) { .add-row.src-form, .add-row.screen-filters { grid-template-columns: minmax(0, 1fr); } }
+.gap { display: block; color: var(--mute); font-size: 11px; font-weight: 400; line-height: 1.3; }
+.dash { color: var(--mute); }
+td .chip + .gap, td .dash + .chip { margin-left: 6px; }
+
+/* Publishing: dry-run and go live */
+.live-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.live-form { display: grid; gap: 12px; max-width: 520px; }
+.live-form .ids { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
+.live-form .ids span { color: var(--mute); margin-right: 8px; }