/* Alpha's dashboard, in Alpha's design system. Dark only. Square corners cut at a
   diagonal instead of rounded (.cut, .cut-sm); a faint 24px grid at the top of the page; one coral for the action that
   matters and for what comes next, tint for links and settled facts, green for done, amber for waiting. Mono, small and
   uppercase is the machine's voice (eyebrows, chips, times, prompts); headings are sans and sentence case. No web font
   is loaded: Inter when the founder has it, otherwise their system's own face. Values follow the stylesheet Alpha
   serves. Nothing is styled inline, because the dashboard's CSP forbids style attributes: every look has a class here,
   and the few positions a script needs (a mark on a timeline, how far a bar is filled) are set through CSSOM. */
:root {
  color-scheme: dark;

  /* Alpha's token family, the same in its MCP cards and published artifacts. */
  --alpha-black: #090909;
  --alpha-panel: #1e1e1e;
  --alpha-white: #f9f9f9;
  --alpha-muted: #b0b0b2;
  --alpha-dim: #7f7f80;
  --alpha-coral: #ff462e;
  --alpha-tint: #f9d3cd;
  --alpha-line: rgba(249, 249, 249, 0.14);

  /* The dashboard's surfaces and inks. */
  --alpha-surface: #151514;
  --alpha-inset: #0e0e0d;
  --alpha-field: #101010;
  --alpha-sidebar: #0b0b0b;
  --alpha-faint: #5c5c5e;
  --alpha-body: #cfcdc9;
  --alpha-danger: #e07866;

  /* Status: green for done, amber for waiting or worth a look. */
  --alpha-exc: #3ecf8e;
  --alpha-park: #d9a13b;

  --alpha-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --alpha-sans: Inter, "Inter Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--alpha-black); color: var(--alpha-white); font-family: var(--alpha-sans); font-size: 14px; line-height: 1.55; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
::selection { background: rgba(255, 70, 46, 0.3); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--alpha-coral); outline-offset: 2px; }

/* ---------- corner cuts and the grid backdrop ---------- */

.cut { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.cut-sm { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.grid-bg { position: relative; }
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: linear-gradient(rgba(249, 249, 249, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 249, 249, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.grid-bg > * { position: relative; }

/* ---------- type ---------- */

.mono { font-family: var(--alpha-mono); }
.dim { color: var(--alpha-dim); }
.muted { color: var(--alpha-muted); }
.eyebrow { font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alpha-dim); }
.h1 { font-size: 23px; font-weight: 600; letter-spacing: -0.015em; margin: 4px 0 0; }
.lede, .start-lede { max-width: 68ch; margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--alpha-body); }
.pagehead .lede { margin: 8px 0 0; }
.hint { font-size: 12px; color: var(--alpha-dim); }
.when { font-family: var(--alpha-mono); font-size: 11.5px; color: var(--alpha-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
code { font-family: var(--alpha-mono); }
p > code, li > code { font-size: 12px; color: var(--alpha-tint); }

/* ---------- wordmark ---------- */

.wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.wordmark .glyph { width: 16px; height: 16px; flex-shrink: 0; background: var(--alpha-coral); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.wordmark .name { font-family: var(--alpha-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.28em; color: var(--alpha-white); }

/* ---------- panels ---------- */

.panel { background: var(--alpha-surface); border: 1px solid var(--alpha-line); }
.stat { padding: 16px; }
.stat .t { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 400; color: var(--alpha-muted); }
.stat .v { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.stat .s { margin-top: 4px; font-size: 12px; color: var(--alpha-dim); }
.stat > p:not([class]) { margin: 8px 0; font-size: 13px; color: var(--alpha-body); }
.is-narrow { max-width: 860px; }
.stat .go { display: inline-block; margin-top: 12px; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* A section of a page in a panel, under a 16px sentence-case heading. */
.start-sec { margin-top: 16px; }
.start-sec h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.start-sec h2 span { font-size: 13px; font-weight: 400; color: var(--alpha-dim); }
.start-sec h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--alpha-tint); }
/* Plain paragraphs only, so a hint or a notice keeps its own look. */
.start-sec p:not([class]) { margin: 8px 0; font-size: 13px; color: var(--alpha-body); }
.start-sec .hint { margin: 8px 0; }
.start-sec .copyrow { margin: 10px 0; }
.start-status { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--alpha-body); font-size: 13px; }
.start-clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.start-client { min-width: 0; padding: 14px; border: 1px solid var(--alpha-line); }
.start-client .copyrow .url { min-width: 0; }

/* A smaller box with a mono heading: what is in a lesson, a palette, a note being written. */
.tr-box { padding: 16px 18px; }
.tr-box h2 { margin: 0 0 12px; font-family: var(--alpha-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alpha-dim); }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; align-items: start; }
.tr-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.tr-cols.is-flush { margin-top: 0; }

/* Blocks stacked in a column sit 16px apart, the gap Alpha keeps between panels. Where Alpha sets that gap inline on
   one block, .mt does it here. */
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > * + * { margin-top: 16px; }
.mt { margin-top: 16px; }

/* ---------- buttons and links ---------- */

.btn { display: inline-block; padding: 9px 18px; border: 0; background: var(--alpha-coral); color: var(--alpha-black); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-ghost { display: inline-block; padding: 8px 15px; border: 1px solid rgba(249, 249, 249, 0.22); background: transparent; color: var(--alpha-white); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn-danger { display: inline-block; padding: 8px 15px; border: 1px solid rgba(224, 120, 102, 0.45); background: transparent; color: var(--alpha-danger); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn:hover { background: #ff5a45; }
.btn-ghost:hover { border-color: rgba(249, 249, 249, 0.4); }
.btn-danger:hover { border-color: rgba(224, 120, 102, 0.8); }
.btn:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn[aria-disabled="true"], .btn-ghost[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--alpha-dim); font-size: 12px; text-decoration: none; cursor: pointer; }
.linkbtn:hover { color: var(--alpha-tint); }
.linkbtn.is-tint { color: var(--alpha-tint); }
.linkbtn.is-tint:hover { color: var(--alpha-coral); }
.linkbtn.is-danger { color: var(--alpha-danger); }
/* A forward link in copy: tint, no underline, ending in " →". */
.go { color: var(--alpha-tint); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.go:hover { color: var(--alpha-coral); }

/* ---------- forms ---------- */

.field { margin-bottom: 14px; }
.field.is-tight { margin-bottom: 10px; }
.field label, .field .label, .label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--alpha-muted); }
.field .hint { margin: 6px 0 0; }
.input { width: 100%; padding: 10px 12px; border: 1px solid rgba(249, 249, 249, 0.16); border-radius: 0; background: var(--alpha-field); color: var(--alpha-white); font-size: 14px; }
.input::placeholder { color: var(--alpha-faint); }
.input:focus { outline: 0; border-color: var(--alpha-coral); box-shadow: 0 0 0 1px var(--alpha-coral); }
textarea.input { resize: vertical; }
.fieldhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.fieldhead label { margin-bottom: 0; }
.fieldhead a { font-size: 12px; color: var(--alpha-tint); text-decoration: none; }
.fieldhead a:hover { color: var(--alpha-coral); }
.formerror, .formnotice { margin: 0 0 14px; padding: 6px 0 6px 10px; font-size: 12.5px; }
.formerror { border-left: 2px solid var(--alpha-danger); color: var(--alpha-danger); }
.formnotice { border-left: 2px solid var(--alpha-tint); color: var(--alpha-tint); }
/* A save that did not go through: amber, under what failed. */
.tr-saveerr { margin: 10px 0 0; font-size: 12.5px; color: var(--alpha-park); }
/* Advice beside what it is about (a platform a short is too long for, a version nobody checked): amber, never a refusal. */
.advice { margin: 8px 0 0; font-size: 12.5px; color: var(--alpha-park); }

/* ---------- chips and status dots ---------- */

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid rgba(249, 249, 249, 0.2); color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.chip-locked { border-color: rgba(249, 211, 205, 0.5); color: var(--alpha-tint); }
.chip-draft { border-color: rgba(176, 176, 178, 0.35); color: var(--alpha-dim); }
.chip-coral { border-color: var(--alpha-coral); color: var(--alpha-coral); }
.chip-done, .tr-chip-done { border-color: rgba(62, 207, 142, 0.5); color: var(--alpha-exc); }
.chip-danger { border-color: rgba(224, 120, 102, 0.45); color: var(--alpha-danger); }
.chip-park { border-color: rgba(217, 161, 59, 0.5); color: var(--alpha-park); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tr-tag { display: inline-block; padding: 1px 6px; border: 1px dashed rgba(249, 249, 249, 0.3); color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.dot.ok { background: var(--alpha-exc); box-shadow: 0 0 8px rgba(62, 207, 142, 0.6); }
.dot.wait { background: var(--alpha-park); box-shadow: 0 0 8px rgba(217, 161, 59, 0.55); }

/* ---------- the app shell: a sidebar and the main column ---------- */

.shell { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.side { display: flex; flex-direction: column; padding: 20px 0; border-right: 1px solid rgba(249, 249, 249, 0.1); background: var(--alpha-sidebar); }
.side .wordmark { padding: 0 20px 20px; border-bottom: 1px solid rgba(249, 249, 249, 0.08); }
.nav { flex: 1; padding: 14px 0; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 20px; border-left: 2px solid transparent; color: var(--alpha-muted); font-size: 13.5px; text-decoration: none; }
.nav a:hover { color: var(--alpha-white); }
.nav a.active { border-left-color: var(--alpha-coral); background: linear-gradient(90deg, rgba(255, 70, 46, 0.09), transparent 70%); color: var(--alpha-white); }
.nav a .ico { width: 14px; color: var(--alpha-faint); font-family: var(--alpha-mono); font-size: 11px; }
.nav a.active .ico { color: var(--alpha-coral); }
.nav a .navcount { margin-left: auto; padding: 1px 7px; border: 1px solid var(--alpha-coral); color: var(--alpha-coral); font-family: var(--alpha-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.nav .sep { margin: 12px 20px; border-top: 1px solid rgba(249, 249, 249, 0.08); }
.nav-heading { margin: 0; padding: 4px 22px 6px; color: var(--alpha-muted); font: 11px var(--alpha-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.account { margin: 0; padding: 14px 20px 0; border-top: 1px solid rgba(249, 249, 249, 0.08); color: var(--alpha-dim); font-size: 12px; }
.account b { display: block; color: var(--alpha-muted); font-weight: 500; overflow-wrap: anywhere; }
.account .linkbtn { margin-top: 2px; }

/* The Project menu at the top of the sidebar: the project its sections lead into, and the others to switch to. A
   <details>, so the menu drops over the main column without script. */
.switcher { position: relative; margin: 14px 12px 4px; }
.switcher > summary { display: grid; gap: 3px; padding: 8px 10px 9px; border: 1px solid var(--alpha-line); background: var(--alpha-surface); list-style: none; cursor: pointer; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover { border-color: rgba(249, 249, 249, 0.3); }
.switcher[open] > summary { border-color: rgba(255, 70, 46, 0.6); }
.switcher .pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.switcher .pick .pname { overflow: hidden; color: var(--alpha-white); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.switcher .caret { flex-shrink: 0; color: var(--alpha-dim); font-size: 11px; }
.switcher[open] .caret { transform: rotate(180deg); }
.switcher .menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: max(100%, 264px); max-width: calc(100vw - 24px); border: 1px solid rgba(249, 249, 249, 0.2); background: var(--alpha-panel); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
.switcher .menu > .hint { margin: 0; padding: 12px; }
.plist { max-height: min(360px, 60vh); margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; }
.plist a { display: grid; gap: 1px; padding: 8px 12px; border-left: 2px solid transparent; text-decoration: none; }
.plist a:hover { background: rgba(249, 249, 249, 0.05); }
.plist a[aria-current] { border-left-color: var(--alpha-coral); background: rgba(255, 70, 46, 0.08); }
.plist .pname { color: var(--alpha-white); font-size: 13.5px; font-weight: 500; }
.plist .pline { overflow: hidden; color: var(--alpha-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.menu-foot { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--alpha-line); font-family: var(--alpha-mono); font-size: 11.5px; }
.menu-foot a { color: var(--alpha-muted); text-decoration: none; }
.menu-foot a:hover { color: var(--alpha-white); }
.nav .off { display: flex; align-items: center; gap: 10px; padding: 9px 20px; border-left: 2px solid transparent; color: var(--alpha-faint); font-size: 13.5px; cursor: default; }
.nav .off .ico { width: 14px; font-family: var(--alpha-mono); font-size: 11px; }

/* A section's steps as tabs under its page head: Brief and Brand, or the three funnels. */
.sectabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: -6px 0 18px; border-bottom: 1px solid var(--alpha-line); }
.sectabs a { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 8px 0 9px; border-bottom: 2px solid transparent; color: var(--alpha-muted); font-size: 13.5px; text-decoration: none; }
.sectabs a:hover { color: var(--alpha-white); }
.sectabs a[aria-current] { border-bottom-color: var(--alpha-coral); color: var(--alpha-white); }
.sectabs .mark { color: var(--alpha-exc); font-family: var(--alpha-mono); font-size: 11px; }
.main { min-width: 0; padding: 26px 30px 34px; container-type: inline-size; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pagehead .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb { margin-bottom: 4px; color: var(--alpha-dim); font-size: 12.5px; }
.breadcrumb a { color: var(--alpha-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--alpha-white); }

/* ---------- signed out: one cut card on the grid ---------- */

.auth { display: grid; place-items: center; padding: 40px 20px; }
.authcard { width: min(400px, 100%); padding: 34px 32px 30px; }
.authcard .wordmark { justify-content: center; margin-bottom: 8px; }
.authcard h1 { margin: 22px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.authcard .lede { margin: 0 0 22px; color: var(--alpha-muted); font-size: 13px; text-align: center; }
.authcard .btn-block { margin-top: 4px; }
.authfoot { margin: 18px 0 0; color: var(--alpha-dim); font-size: 12.5px; text-align: center; }
.authfoot a { color: var(--alpha-tint); text-decoration: none; }
.authfoot a:hover { color: var(--alpha-coral); }

/* ---------- copy boxes, numbered steps, lists of events, callouts ---------- */

.copyrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.copyrow .url { flex: 1; min-width: 220px; padding: 10px 12px; border: 1px solid rgba(249, 249, 249, 0.16); background: var(--alpha-inset); color: var(--alpha-tint); font-family: var(--alpha-mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copyrow .url.is-pre { white-space: pre; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.step { display: flex; align-items: baseline; gap: 12px; color: var(--alpha-body); font-size: 13px; }
.step .n { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid rgba(255, 70, 46, 0.5); color: var(--alpha-coral); font-family: var(--alpha-mono); font-size: 11px; }
.step-body { flex: 1; min-width: 0; }
.step-body > :first-child { margin-top: 0; }
.step-body > :last-child { margin-bottom: 0; }
.activity { font-size: 13px; }
.activity .row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid rgba(249, 249, 249, 0.07); }
.activity .row:last-child { border-bottom: 0; }
.activity .what b { font-weight: 500; }
.activity .what .sub { display: block; margin-top: 2px; color: var(--alpha-dim); font-size: 12px; }
.callout { margin: 0; padding: 12px 16px; border: 1px solid rgba(249, 211, 205, 0.28); background: rgba(249, 211, 205, 0.05); color: #e6ded9; font-size: 13px; }
.callout b { color: var(--alpha-tint); font-weight: 600; }
.callout a { color: var(--alpha-tint); }
.panel + .callout { margin-top: 12px; }

/* ---------- "Next step in Alpha": one action, as a prompt the founder copies to their agent ---------- */

.tr-alpha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; margin: 16px 0 0; padding: 18px 22px; }
.tr-alpha .eyebrow { color: var(--alpha-coral); }
.tr-alpha .t { margin: 6px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tr-alpha p { max-width: 64ch; margin: 0; color: var(--alpha-body); font-size: 13px; }
.tr-alpha .prompt { margin-top: 10px; }
.tr-alpha.is-compact { padding: 14px 20px; }
.tr-alpha.is-compact .t { font-size: 15px; }
/* Inside another panel: the same card without a panel of its own, under a hairline. */
.tr-alpha.is-bare { padding: 14px 0 0; border-top: 1px solid rgba(249, 249, 249, 0.08); }
.tr-alpha .done { margin: 8px 0 0; color: var(--alpha-body); font-size: 13px; }
.tr-alpha .done .tick { margin-right: 4px; color: var(--alpha-exc); }
.tr-alpha .done a { color: var(--alpha-white); }
/* An approved short: the same card, in the green of done. */
.tr-alpha.is-approved { border-color: rgba(62, 207, 142, 0.35); }
.tr-alpha.is-approved .eyebrow { color: var(--alpha-exc); }
.tr-alpha .acts .chip { align-self: center; }
.tr-label + .tr-alpha { margin-top: 0; }
.prompt { display: inline-block; max-width: 100%; padding: 6px 10px; border: 1px solid rgba(249, 249, 249, 0.1); background: var(--alpha-field); color: var(--alpha-tint); font-family: var(--alpha-mono); font-size: 12px; overflow-wrap: anywhere; }
.acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---------- tables ---------- */

/* Positioned, so even a visually hidden label inside the table scrolls with it instead of widening the page. */
.tablewrap { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { padding: 8px 12px; border-bottom: 1px solid var(--alpha-line); color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; }
.table td, .table tbody th { padding: 12px; border-bottom: 1px solid rgba(249, 249, 249, 0.07); vertical-align: middle; }
.table tbody th { color: inherit; font-family: inherit; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; }
.table tr:last-child td, .table tr:last-child th { border-bottom: 0; }
.table tbody tr:hover td, .table tbody tr:hover th { background: rgba(255, 70, 46, 0.05); }
.table .name b { display: block; font-weight: 600; }
.table .name span { font-size: 12px; color: var(--alpha-dim); }
.table td.num { font-variant-numeric: tabular-nums; }
.table a { text-decoration: none; }
/* A second line in a cell: a link under a chip, a second action under the first. */
.table .sub { display: block; margin-top: 6px; }

/* ---------- empty states ---------- */

.empty { padding: 26px; text-align: center; }
.empty .v { margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.empty p { max-width: 46ch; margin: 0 auto; color: var(--alpha-muted); font-size: 13px; }
.empty p + p { margin-top: 10px; }

/* ---------- progress: steps as pills, a count over a 4px bar ---------- */

.journey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.journey li { display: flex; align-items: center; gap: 8px; color: var(--alpha-dim); font-size: 12.5px; }
.journey li + li::before { content: "→"; color: var(--alpha-faint); }
.journey .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--alpha-line); color: inherit; text-decoration: none; }
.journey .mark { font-family: var(--alpha-mono); font-size: 11px; }
.journey .is-done { color: var(--alpha-body); }
.journey .is-done .pill { border-color: rgba(62, 207, 142, 0.45); }
.journey .is-done .mark { color: var(--alpha-exc); }
.journey .is-done a.pill:hover { background: rgba(62, 207, 142, 0.08); }
.journey .is-next { color: var(--alpha-tint); }
.journey .is-next .pill { border-color: rgba(255, 70, 46, 0.6); background: rgba(255, 70, 46, 0.08); }
.journey .is-next .mark { color: var(--alpha-coral); }
.journey a.pill:hover { color: var(--alpha-white); }
.journey-meter { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 8px; color: var(--alpha-muted); font-size: 12.5px; }
.main > .journey-meter { margin-top: 16px; }
.journey-launched { color: var(--alpha-exc); font-weight: 600; }
/* The bar is a <progress> (filled by its value, no script needed) or a div whose <i> a script sizes through CSSOM. */
.tr-bar { position: relative; display: block; width: 100%; height: 4px; border: 0; background: rgba(249, 249, 249, 0.1); }
.tr-bar i { position: absolute; inset: 0 auto 0 0; display: block; background: var(--alpha-coral); transition: width 0.3s ease; }
.tr-bar.is-done i { background: var(--alpha-exc); }
progress.tr-bar { -webkit-appearance: none; appearance: none; color: var(--alpha-coral); }
progress.tr-bar::-webkit-progress-bar { background: rgba(249, 249, 249, 0.1); }
progress.tr-bar::-webkit-progress-value { background: var(--alpha-coral); transition: width 0.3s ease; }
progress.tr-bar::-moz-progress-bar { background: var(--alpha-coral); }
progress.tr-bar.is-done::-webkit-progress-value { background: var(--alpha-exc); }
progress.tr-bar.is-done::-moz-progress-bar { background: var(--alpha-exc); }
.tr-label { margin: 26px 0 10px; }
.tr-cols > * > .tr-label:first-child { margin-top: 14px; }

/* ---------- the player: Alpha's Training player, and for a short, a 9:16 frame with its controls underneath ---------- */

.tr-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 16px; }
.tr-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; outline: 0; border: 1px solid var(--alpha-line); background: #000; }
.tr-player video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tr-player:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border: 0; }
.tr-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; border: 0; background: rgba(9, 9, 9, 0.28); color: var(--alpha-white); cursor: pointer; }
.tr-start .glyph { display: grid; place-items: center; width: 76px; height: 76px; background: var(--alpha-coral); color: var(--alpha-black); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: transform 0.15s ease; }
.tr-start:hover .glyph { transform: scale(1.06); }
.tr-start .glyph svg { width: 30px; height: 30px; }
.tr-start .hint { padding: 4px 10px; background: rgba(9, 9, 9, 0.7); color: var(--alpha-white); font-family: var(--alpha-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.tr-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 8px; background: linear-gradient(transparent, rgba(9, 9, 9, 0.94)); transition: opacity 0.2s ease; }
.tr-controls .row, .ctlbar .row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.tr-controls .time { margin: 0 8px; color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-controls .time b { color: var(--alpha-white); font-weight: 500; }
.spacer { flex: 1 1 auto; }
.tr-ctl { display: grid; place-items: center; min-width: 34px; height: 32px; padding: 0 7px; border: 0; background: none; color: var(--alpha-white); font-family: var(--alpha-mono); font-size: 11.5px; cursor: pointer; }
.tr-ctl:hover { background: rgba(249, 249, 249, 0.12); }
.tr-ctl:focus-visible, .tr-start:focus-visible, .tr-scrub:focus-visible { outline: 2px solid var(--alpha-coral); outline-offset: 1px; }
.tr-ctl svg { display: block; width: 19px; height: 19px; }
.tr-ctl[aria-pressed="true"] { color: var(--alpha-coral); box-shadow: inset 0 -2px 0 var(--alpha-coral); }
/* The scrub bar: coral up to the playhead, white where loaded. A script sets --played and --loaded through CSSOM. */
.tr-scrub { display: block; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tr-scrub::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--alpha-coral) var(--played, 0%), rgba(249, 249, 249, 0.42) var(--played, 0%), rgba(249, 249, 249, 0.42) var(--loaded, 0%), rgba(249, 249, 249, 0.18) var(--loaded, 0%)); }
.tr-scrub::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 0; background: var(--alpha-white); -webkit-appearance: none; }
.tr-scrub::-moz-range-track { height: 4px; background: rgba(249, 249, 249, 0.18); }
.tr-scrub::-moz-range-progress { height: 4px; background: var(--alpha-coral); }
.tr-scrub::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--alpha-white); }

/* A short is tall: the player holds a centred 9:16 stage, and the control bar sits under the frame, never over a caption. */
.tr-player.is-tall { aspect-ratio: auto; }
.stage { position: relative; width: min(360px, 100%); aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; background: #000; }
.stage video, .stage canvas, .stage > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stage video, .stage > img { object-fit: contain; background: #000; }
.stage canvas { pointer-events: none; touch-action: none; }
.stage.is-drawing canvas { pointer-events: auto; cursor: crosshair; }
.tr-player:fullscreen .stage { width: auto; height: 100%; }
/* The safe area every platform leaves clear: text within x 90–990 and y 220–1500 of a 1080×1920 frame. */
.safe { position: absolute; inset: 11.4583% 8.3333% 21.875% 8.3333%; border: 1px dashed rgba(249, 249, 249, 0.45); pointer-events: none; }
.safe span { position: absolute; top: 6px; left: 8px; color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
/* A note's label on the frame, placed by the script through CSSOM. */
.note-tag { position: absolute; padding: 2px 6px; background: var(--alpha-coral); color: var(--alpha-black); font-family: var(--alpha-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.ctlbar { padding: 8px 14px 6px; border: 1px solid var(--alpha-line); border-top: 0; background: var(--alpha-inset); }
.ctlbar .readout { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 6px 6px; font-family: var(--alpha-mono); font-variant-numeric: tabular-nums; }
.ctlbar .time { color: var(--alpha-muted); font-size: 12px; }
.ctlbar .time b { color: var(--alpha-white); font-weight: 500; }
.ctlbar .frame { color: var(--alpha-dim); font-size: 11px; }
/* Notes on the timeline: numbered coral marks (the current one filled) and coral bands for stretches. The track is
   inset 6px each side so a mark lines up with the centre of the scrub thumb; the script sets left and width. */
.marks { position: relative; height: 18px; margin: 0 6px 2px; }
.marks .band { position: absolute; bottom: 0; height: 3px; background: rgba(255, 70, 46, 0.45); }
.marks .mark { position: absolute; top: 0; display: grid; place-items: center; min-width: 16px; height: 15px; padding: 0 3px; border: 1px solid rgba(255, 70, 46, 0.6); background: var(--alpha-black); color: var(--alpha-coral); font-family: var(--alpha-mono); font-size: 10px; line-height: 1; transform: translateX(-50%); cursor: pointer; }
.marks .mark.is-current { background: var(--alpha-coral); color: var(--alpha-black); }
.marks .band.is-current { background: var(--alpha-coral); }
/* The stretch being marked, from where it starts to the playhead. */
.marks .band.is-draft { background: rgba(255, 70, 46, 0.25); }
/* The kit's findings: small amber diamonds among the notes' marks (filled where a check fails), the kit's hint as their
   title. */
.marks .mark.is-check { top: 4px; min-width: 0; width: 8px; height: 8px; padding: 0; border-color: var(--alpha-park); background: var(--alpha-black); transform: translateX(-50%) rotate(45deg); }
.marks .mark.is-check.is-fail { background: var(--alpha-park); }
/* Clicking the frame plays and pauses it (review.js); drawing on it takes the pointer instead. */
.tr-player.is-tall, .tr-player .stage { cursor: pointer; }   /* the whole player plays and pauses */
/* Full screen is the player (or the two compared) with its control bar under it: review.js wraps them in a viewer. */
.viewer:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #000; }
.viewer:fullscreen > .tr-player { flex: 1 1 0; min-height: 0; border: 0; }
.viewer:fullscreen > .tr-player .stage { width: auto; height: 100%; }
.viewer:fullscreen > .compare { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); padding: 12px 12px 0; }
.viewer:fullscreen > .compare > div { display: flex; flex-direction: column; min-height: 0; }
.viewer:fullscreen > .compare .tr-player { flex: 1 1 0; min-height: 0; }
.viewer:fullscreen > .compare .stage { width: auto; max-width: 100%; height: 100%; }
.viewer:fullscreen > .ctlbar { flex: none; border: 0; }
/* The kit's findings under the player, every one listed (the marks on the bar are for the mouse), a moment's time a button
   that goes there. */
.findings .label { display: block; margin-bottom: 2px; font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.findings ul { margin: 0; padding: 0; list-style: none; }
.findings li { margin: 2px 0; }
.findings li.is-current { color: var(--alpha-white); }
.findings .linkbtn { color: inherit; font-family: var(--alpha-mono); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compare > div > .eyebrow { margin: 0 0 6px; }
.versions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -8px 0 16px; }
.versions .journey { margin: 0; }
.versions .next { margin-left: auto; }
.toolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-under { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; }
.tr-under .status { color: var(--alpha-dim); font-size: 12.5px; }

/* ---------- a list beside the player: a section's lessons, or a short's notes ---------- */

.tr-rows { padding: 4px 0; }
.tr-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(249, 249, 249, 0.07); border-left: 2px solid transparent; text-decoration: none; }
.tr-row:last-child { border-bottom: 0; }
a.tr-row:hover, button.tr-row:hover { background: rgba(255, 70, 46, 0.05); }
button.tr-row { width: 100%; border-top: 0; border-right: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.tr-row.is-off { opacity: 0.45; }
.tr-row.is-off .linkbtn, .tr-row.is-off .linkbtn:hover { color: var(--alpha-dim); cursor: not-allowed; }
.tr-row.is-next { border-left-color: var(--alpha-coral); background: linear-gradient(90deg, rgba(255, 70, 46, 0.08), transparent 60%); }
.tr-row .state { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(249, 249, 249, 0.2); color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 11px; }
.tr-row.is-next .state, .tr-row.is-started .state, .tr-row.is-current .state { border-color: rgba(255, 70, 46, 0.55); color: var(--alpha-coral); }
.tr-row.is-done .state { border-color: var(--alpha-exc); background: var(--alpha-exc); color: var(--alpha-black); font-weight: 700; }
.tr-row .what b { display: block; font-size: 14px; font-weight: 600; }
.tr-row .what span { display: block; overflow: hidden; color: var(--alpha-dim); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.tr-row .len { color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tr-playlist { padding: 0; }
.tr-playlist .head { padding: 14px 16px 12px; border-bottom: 1px solid rgba(249, 249, 249, 0.08); }
.tr-playlist .head .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.tr-playlist .head .t:last-child { margin-bottom: 0; }
.tr-playlist .head .t a, .tr-playlist .head .t b { font-size: 14px; font-weight: 600; text-decoration: none; }
.tr-playlist .head .t a:hover { color: var(--alpha-tint); }
.tr-playlist .head .t span { color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 11px; }
.tr-playlist .subhead { padding: 14px 16px 6px; border-top: 1px solid rgba(249, 249, 249, 0.08); }
.tr-playlist .tr-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
.tr-playlist .tr-row .what b { font-size: 13px; font-weight: 500; }
.tr-playlist .tr-row.is-current { border-left-color: var(--alpha-coral); background: linear-gradient(90deg, rgba(255, 70, 46, 0.1), transparent 75%); }
.tr-playlist .tr-row.is-current .what b { font-weight: 600; }
/* A note on its way to the server, shown at once and confirmed (or taken back) when the server answers; one the server
   refused while another was being written, kept in amber to try again. */
.tr-row.is-saving { opacity: 0.55; }
.tr-playlist .tr-row.is-failed .what span { color: var(--alpha-park); }
/* Under a selected draft: change it or delete it. */
.note-acts { display: flex; gap: 16px; padding: 2px 14px 10px 44px; border-bottom: 1px solid rgba(249, 249, 249, 0.07); border-left: 2px solid var(--alpha-coral); background: linear-gradient(90deg, rgba(255, 70, 46, 0.1), transparent 75%); }
.tr-playlist .foot { padding: 11px 16px; border-top: 1px solid rgba(249, 249, 249, 0.08); font-size: 12.5px; }
.tr-playlist .foot a { color: var(--alpha-tint); text-decoration: none; }
.tr-playlist .foot.is-note { color: var(--alpha-dim); }
.tr-playlist .none { margin: 0; padding: 14px 16px; color: var(--alpha-dim); font-size: 12.5px; }
/* What the agent cut, folded away under its heading until the founder opens it. */
.cuts > summary { list-style: none; cursor: pointer; }
.cuts > summary::-webkit-details-marker { display: none; }
.cuts:not([open]) > summary { border-bottom: 0; }
.cuts > summary .t b::before { content: "+ "; color: var(--alpha-dim); font-family: var(--alpha-mono); }
.cuts[open] > summary .t b::before { content: "− "; }
.cuts > summary:hover .t b { color: var(--alpha-tint); }
.tr-playlist.cuts .tr-row { grid-template-columns: minmax(0, 1fr) auto; }
#remix .tr-rows { margin: 4px -18px -16px; border-top: 1px solid rgba(249, 249, 249, 0.07); }
#remix .tr-row { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------- shorts: cards by clip, the post details, a list of what the founder has taught their agent ---------- */

.short { display: flex; flex-direction: column; text-decoration: none; }
a.short:hover { border-color: rgba(249, 249, 249, 0.26); }
a.short:hover .go { color: var(--alpha-coral); }
/* The cover, or Alpha's drawn cover (a coral glow on near-black) while there is no frame to show. */
.short .cover { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-bottom: 1px solid var(--alpha-line); background: radial-gradient(ellipse 46% 42% at 62% 46%, rgba(255, 70, 46, 0.3), transparent 70%), #0c0c0c; }
.short .cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.short .cover .len { position: absolute; left: 8px; bottom: 8px; padding: 2px 6px; background: rgba(9, 9, 9, 0.7); color: var(--alpha-white); font-family: var(--alpha-mono); font-size: 11px; }
.short .body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.short .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.short .num { color: var(--alpha-coral); font-family: var(--alpha-mono); font-size: 11px; letter-spacing: 0.1em; }
.short .name { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.short .meta { color: var(--alpha-dim); font-size: 12.5px; }
/* The shorts by the clip they were made from: the filters, then each clip a panel (its head: cover, file, name, counts)
   with its shorts as cards, every remix right after the short it came from and marked on its cover. */
.src-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 24px 0 4px; }
.src-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.src-filter a { padding: 6px 12px; border: 1px solid var(--alpha-line); color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.src-filter a b { margin-left: 6px; color: var(--alpha-dim); font-weight: 500; }
.src-filter a:hover { color: var(--alpha-white); }
.src-filter a[aria-current] { border-color: var(--alpha-coral); color: var(--alpha-white); }
.src-filter a[aria-current] b { color: var(--alpha-coral); }
.src { margin-top: 12px; scroll-margin-top: 16px; }
.src-head { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--alpha-line); }
.src-cover { width: 54px; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--alpha-line); background: radial-gradient(ellipse 46% 42% at 62% 46%, rgba(255, 70, 46, 0.3), transparent 70%), #0c0c0c; }
.src-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.src-t { min-width: 0; }
.src-t .eyebrow { overflow-wrap: anywhere; }
.src-t h2 { margin: 3px 0 2px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.src-t p { margin: 0; color: var(--alpha-dim); font-size: 12.5px; }
.src-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.src-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 16px 18px 18px; }
.src-card .body { gap: 5px; padding: 12px 14px 14px; }
.src-card .num { font-size: 10.5px; text-transform: uppercase; }
.src-card .name { color: var(--alpha-body); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.src-card .chips { margin-top: 2px; }
.src-card .chip { white-space: normal; }
.src-card.is-remix { border-color: rgba(249, 211, 205, 0.35); }
.src-card .cover.is-empty { display: grid; place-items: center; padding: 0 14px; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.src-badge { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border: 1px solid rgba(249, 211, 205, 0.45); background: rgba(9, 9, 9, 0.8); color: var(--alpha-tint); font-family: var(--alpha-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
/* On a short's page: the shorts made from the same clip, the one shown in coral. */
.family { margin: 0 0 16px; padding: 12px 14px; }
.family-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.family ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.family li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.family li.is-remix::before { content: "↳"; color: var(--alpha-tint); font-family: var(--alpha-mono); }
.family a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px 7px 8px; border: 1px solid var(--alpha-line); color: inherit; text-decoration: none; }
.family a:hover { border-color: rgba(249, 249, 249, 0.3); }
.family a[aria-current] { border-color: var(--alpha-coral); background: linear-gradient(90deg, rgba(255, 70, 46, 0.1), transparent); }
.family .what { display: grid; min-width: 0; line-height: 1.3; }
.family .what b { font-size: 13px; font-weight: 600; }
.family .what span { color: var(--alpha-dim); font-size: 11.5px; }
.src-thumb { display: block; flex-shrink: 0; width: 22px; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--alpha-line); background: #0c0c0c; }
.src-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.src-thumb.is-empty { display: grid; place-items: center; border-style: dashed; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 9px; }
.post { margin-top: 16px; padding: 18px 22px 8px; }
/* A panel's own heading row: a 16px title (with a quieter aside) and, on the right, its state. */
.sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 14px; }
.sechead h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.sechead h2 span { color: var(--alpha-dim); font-size: 13px; font-weight: 400; }
/* Characters used against the tightest limit; amber once over it, since a limit is advice, not a refusal. */
.counter { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--alpha-dim); font-size: 12px; }
.counter .count { margin-left: auto; font-family: var(--alpha-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter.is-over, .counter.is-over .count { color: var(--alpha-park); }
/* A platform to post to: a checkbox drawn as Alpha's ghost button, green with a tick while it is ticked. */
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { position: relative; display: inline-flex; cursor: pointer; }
.toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.toggle span { padding: 8px 15px; border: 1px solid rgba(249, 249, 249, 0.22); color: var(--alpha-muted); font-size: 13px; font-weight: 500; }
.toggle:hover span { border-color: rgba(249, 249, 249, 0.4); }
.toggle input:checked + span { border-color: rgba(62, 207, 142, 0.5); color: var(--alpha-exc); }
.toggle input:checked + span::before { content: "✓ "; }
.toggle input:focus-visible + span { outline: 2px solid var(--alpha-coral); outline-offset: 2px; }
.cover-row { display: flex; align-items: center; gap: 12px; }
.cover-thumb { flex: none; width: 40px; aspect-ratio: 9 / 16; border: 1px solid var(--alpha-line); background: #0c0c0c; object-fit: cover; }
.cover-row .value { font-size: 13.5px; }
.cover-row .hint { display: block; }
/* What the agent suggests with a newer version while the founder's approval of an earlier one holds the post. */
.suggest { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--alpha-tint); background: rgba(249, 211, 205, 0.05); }
.suggest .label { margin-bottom: 4px; }
.suggest p { margin: 0; color: var(--alpha-body); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggest .hint { display: block; margin-top: 6px; }
/* A question before something that cannot be undone: the button opens it, and only the question's own button acts. */
.confirm > summary { list-style: none; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > summary { border-color: rgba(249, 249, 249, 0.4); }
.confirm form { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(224, 120, 102, 0.35); }
.confirm form p { max-width: 52ch; margin: 0 0 10px; color: var(--alpha-body); font-size: 13px; }
#room .toolrow { align-items: flex-start; }
.feed { padding: 8px 20px 16px; }
.feed > p { margin: 8px 0 6px; color: var(--alpha-body); font-size: 13px; }
.feed > .go { display: inline-block; margin-top: 10px; }
/* The approved shorts: a table, as a card each wherever the table is narrow (see the container rule below). */
.posts { container-type: inline-size; }
/* A panel that is one link: what it holds on the left, where it goes on the right. */
.linkcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; }
.linkcard .eyebrow, .linkcard .value, .linkcard .sub { display: block; }
.linkcard .value { margin-top: 4px; font-size: 13.5px; }
.linkcard .sub { color: var(--alpha-dim); font-size: 12.5px; }
a.linkcard:hover { border-color: rgba(249, 249, 249, 0.26); }
/* Fixed, as a modal dialog is by default: the main column's `.grid-bg > *` would make it relative, which the top layer
   turns into absolute at the top of the document, out of sight on a page scrolled down. */
.dialog { position: fixed; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 0; border: 1px solid var(--alpha-line); background: var(--alpha-surface); color: var(--alpha-white); }
.dialog::backdrop { background: rgba(9, 9, 9, 0.78); }
.dialog > form, .dialog > div { padding: 26px 28px 24px; }
.dialog h2 { margin: 6px 0 10px; }
.dialog h3 { margin: 18px 0 6px; color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.dialog p { margin: 0; color: var(--alpha-body); font-size: 13px; }
.dialog p + p { margin-top: 8px; }
/* What approving leaves out (review.js): in amber, as every line about something not saved. */
.dialog p.tr-saveerr { color: var(--alpha-park); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- ideas: a panel per idea, a tile per step ---------- */

.idea { padding: 18px 20px 20px; }
.idea-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.idea-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.idea-head h2 a { text-decoration: none; }
.idea-head h2 a:hover { color: var(--alpha-tint); }
.idea-head p { max-width: 68ch; margin: 2px 0 0; color: var(--alpha-body); font-size: 13px; }
.idea .tr-alpha.is-bare { margin-top: 18px; }

/* The overview: a row of totals across every project, then a card per project with its own counts. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: grid; align-content: start; gap: 6px; padding: 14px 16px 15px; }
.kpi .kv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--alpha-white); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.kpi .ks { color: var(--alpha-dim); font-size: 12px; }
.kpi .ks a { color: var(--alpha-tint); text-decoration: none; }
.kpi .ks a:hover { text-decoration: underline; }
.pband { display: block; width: calc(100% + 40px); height: 5px; margin: -18px -20px 16px; }
.istats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 14px 0 0; border: 1px solid var(--alpha-line); background: var(--alpha-line); }
.istats > div { min-width: 0; background: var(--alpha-surface); }
.istats dt { padding: 9px 12px 0; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.istats dd { margin: 0; }
.istats dd a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 2px 12px 10px; text-decoration: none; }
.istats dd a:hover { background: rgba(249, 249, 249, 0.03); }
.istats b { color: var(--alpha-white); font-size: 17px; font-weight: 600; }
.istats dd span { color: var(--alpha-dim); font-size: 12px; }
.istats .chip { padding: 1px 7px; font-size: 10px; }
/* A step is a tile: what was made, above the step's number and name. Done is green with a tick, next is coral, a step
   not started is dashed. On the idea page the step being read carries Alpha's coral underline. */
.tiles { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.tile { min-width: 0; }
.tile a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--alpha-line); color: var(--alpha-dim); text-decoration: none; }
.tile .shot { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 1px solid var(--alpha-line); background: var(--alpha-inset); }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; }
.tile .shot img.tall { object-position: top; }
.tile .shot img.badge { position: absolute; inset: auto 10% 8% 10%; width: 80%; height: 26%; padding: 6px; background: #fff; object-fit: contain; }
.tile .shot img.badge:only-child { inset: 0; width: 100%; height: 100%; padding: 18%; }
.tile .shot .bands { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .shot .words { align-self: start; display: -webkit-box; margin: 10px; overflow: hidden; color: var(--alpha-body); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 8; }
/* On the Shorts tile: how many shorts wait for review, in a band under the newest cover, never on the cover's own words. */
.tile .shot.has-count { grid-template-rows: minmax(0, 1fr) auto; place-items: stretch; }
.tile .shot.has-count img { min-height: 0; }
.tile .shot .waits { justify-content: center; border-width: 1px 0 0; background: var(--alpha-black); }
.tile .cap { display: flex; align-items: baseline; gap: 7px; padding: 7px 9px 8px; font-size: 12.5px; line-height: 1.3; }
.tile .mark { flex-shrink: 0; font-family: var(--alpha-mono); font-size: 11px; }
.tile.is-done a { border-color: rgba(62, 207, 142, 0.45); color: var(--alpha-body); }
.tile.is-done .shot { border-bottom-color: rgba(62, 207, 142, 0.3); }
.tile.is-done .mark { color: var(--alpha-exc); }
.tile.is-next a { border-color: rgba(255, 70, 46, 0.6); background: rgba(255, 70, 46, 0.08); color: var(--alpha-tint); }
.tile.is-next .shot { border-bottom-color: rgba(255, 70, 46, 0.3); background: transparent; }
.tile.is-next .mark { color: var(--alpha-coral); }
.tile.is-todo a { border-style: dashed; border-color: rgba(249, 249, 249, 0.18); }
.tile.is-todo .shot { border-bottom: 1px dashed rgba(249, 249, 249, 0.12); background: transparent; }
.tile a:hover { color: var(--alpha-white); }
.tile.is-todo a:hover { border-color: rgba(249, 249, 249, 0.4); }
.tile a[aria-current] { color: var(--alpha-white); box-shadow: inset 0 -2px 0 var(--alpha-coral); }

/* ---------- one idea: its path, then the work of one step in panels ---------- */

.path { padding: 16px 18px 18px; }
.path h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.path .tiles { max-width: 780px; }
.tr-box > p:not([class]) { max-width: 64ch; margin: 0 0 12px; color: var(--alpha-body); font-size: 13px; }
.tr-box > .hint { margin: -4px 0 12px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.swatches li { display: grid; align-content: start; gap: 2px; font-size: 13px; }
.swatches svg { display: block; width: 100%; height: 64px; margin-bottom: 8px; border: 1px solid var(--alpha-line); }
.swatches b { font-weight: 600; }
.swatches span { color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 11.5px; }
/* A logo is the founder's brand, drawn for a light ground, so it is shown on one. */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.logos a { display: grid; gap: 8px; color: var(--alpha-dim); font-size: 12.5px; text-decoration: none; overflow-wrap: anywhere; }
.logos a:hover { color: var(--alpha-tint); }
.logos img { display: block; width: 100%; height: 96px; padding: 14px; border: 1px solid var(--alpha-line); background: #f4f4f2; object-fit: contain; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery.screens { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.gallery li { display: grid; align-content: start; gap: 4px; color: var(--alpha-dim); font-size: 12.5px; overflow-wrap: anywhere; }
.gallery img { display: block; width: 100%; border: 1px solid var(--alpha-line); background: var(--alpha-inset); }
.gallery a:hover img { border-color: rgba(249, 249, 249, 0.4); }
.gallery .note { color: var(--alpha-faint); font-size: 12px; }
.picker:focus-within { outline: 2px solid var(--alpha-coral); outline-offset: 2px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.links a { color: var(--alpha-tint); font-size: 13.5px; text-decoration: none; }
.links a:hover { color: var(--alpha-coral); }
/* The quiz, live in a phone-sized frame beside what it is and how to take it live. */
.play { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.phone { width: 300px; height: 626px; overflow: hidden; border: 10px solid #000; outline: 1px solid var(--alpha-line); background: #fff; }
.phone iframe { display: block; width: 390px; height: 844px; max-width: none; border: 0; transform: scale(0.718); transform-origin: 0 0; }
.play p:not([class]) { max-width: 62ch; margin: 0 0 14px; color: var(--alpha-body); font-size: 13.5px; }
.play .toolrow { margin: 0 0 10px; }
/* The facts a step hands to the next, as Alpha's ledger: a mono label, then the value, rows ruled with dashes. */
.ledger { max-width: 78ch; margin: 0; }
.ledger > div { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px dashed var(--alpha-line); }
.ledger > div:first-child { border-top: 0; }
.ledger dt { padding-top: 2px; color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.ledger dd { min-width: 0; margin: 0; color: var(--alpha-body); overflow-wrap: anywhere; }
.ledger dd p { margin: 0; }
.ledger dd ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.ledger dd b { color: var(--alpha-white); font-weight: 600; }
.files summary { padding: 13px 18px; color: var(--alpha-muted); font-size: 13.5px; cursor: pointer; }
.files summary:hover { color: var(--alpha-white); }
.files ul { margin: 0; padding: 0 18px 6px; border-top: 1px solid rgba(249, 249, 249, 0.08); list-style: none; }
.files li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(249, 249, 249, 0.07); font-size: 13px; }
.files li:last-child { border-bottom: 0; }
.files li a { color: var(--alpha-body); text-decoration: none; overflow-wrap: anywhere; }
.files li a:hover { color: var(--alpha-tint); }
.files li span { color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 11.5px; white-space: nowrap; }

/* ---------- a saved document (a brief, a brand), read in the dashboard ---------- */

.docpanel { padding: 24px 28px 28px; }
.doctabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.doctabs a { padding: 6px 10px; border: 1px solid var(--alpha-line); color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 12px; text-decoration: none; }
.doctabs a:hover { border-color: rgba(249, 249, 249, 0.4); color: var(--alpha-white); }
.doctabs a[aria-current] { border-color: rgba(255, 70, 46, 0.6); background: rgba(255, 70, 46, 0.08); color: var(--alpha-tint); }
.doc { max-width: 72ch; color: var(--alpha-body); font-size: 14.5px; line-height: 1.65; overflow-wrap: break-word; }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc h1, .doc h2, .doc h3, .doc h4 { color: var(--alpha-white); font-weight: 600; line-height: 1.2; }
.doc h1 { margin: 0 0 16px; font-size: 30px; letter-spacing: -0.035em; }
.doc h2 { margin: 32px 0 10px; padding-top: 20px; border-top: 1px solid var(--alpha-line); font-size: 20px; letter-spacing: -0.02em; }
.doc h3 { margin: 24px 0 8px; font-size: 15px; letter-spacing: -0.01em; }
.doc h4 { margin: 20px 0 6px; font-size: 14px; }
.doc p, .doc ul, .doc ol, .doc blockquote, .doc pre, .doc table { margin: 0 0 12px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: 0.35em; }
.doc li::marker { color: var(--alpha-dim); }
.doc strong { color: var(--alpha-white); font-weight: 600; }
.doc a { color: var(--alpha-coral); }
.doc blockquote { padding-left: 14px; border-left: 2px solid var(--alpha-tint); }
.doc code { color: var(--alpha-tint); font-size: 12.5px; }
.doc pre { padding: 12px 14px; overflow-x: auto; border: 1px solid var(--alpha-line); background: var(--alpha-inset); }
.doc pre code { color: var(--alpha-body); }
.doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.doc th, .doc td { padding: 8px 12px; border-bottom: 1px solid rgba(249, 249, 249, 0.07); text-align: left; vertical-align: top; }
.doc th { border-bottom-color: var(--alpha-line); color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.doc hr { margin: 24px 0; border: 0; border-top: 1px solid var(--alpha-line); }

/* ---------- settings and accounts ---------- */

.subform { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(249, 249, 249, 0.08); }
.rowacts { display: flex; justify-content: flex-end; gap: 14px; white-space: nowrap; }
.rowacts form { margin: 0; }

/* ---------- funnel tracking (funnelViews.mjs): Results, a funnel's page, the picker, Add a funnel, the sites ---------- */
/* A data display: only tracking health (green arriving, amber waiting or not arriving) and the significance result (green
   up, red down) are coloured. Bars and lines are SVG, sized here and filled by their presentation attributes. */

/* The date ranges, as a segmented row of links. */
.ranges { display: flex; border: 1px solid var(--alpha-line); }
.ranges a { padding: 8px 13px; color: var(--alpha-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.ranges a:hover { color: var(--alpha-white); }
.ranges a[aria-current] { background: rgba(255, 70, 46, 0.12); box-shadow: inset 0 -2px 0 var(--alpha-coral); color: var(--alpha-white); font-weight: 500; }

/* A funnel's tracking health: a dot and its words. */
.fhealth { display: inline-flex; align-items: center; gap: 7px; color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 11.5px; }
.fhealth.is-wait { color: #e9c27c; }
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fpage { color: var(--alpha-tint); font-size: 12.5px; text-decoration: none; overflow-wrap: anywhere; }
.fpage:hover { color: var(--alpha-coral); }

/* Results: a card per funnel, then the dashed card that adds one. */
.fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 16px; }
.fcard { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px 22px; }
.fcard.is-warn { border-color: rgba(217, 161, 59, 0.45); }
.fcard-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.fcard h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fcard h2 a { text-decoration: none; }
.fcard h2 a:hover { color: var(--alpha-tint); }
.fcard-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(249, 249, 249, 0.08); }
.fcard-add { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; min-width: 0; padding: 24px 26px; border: 1px dashed rgba(249, 249, 249, 0.24); }
.fcard-add h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fcard-add p { max-width: 52ch; margin: 0; color: var(--alpha-body); font-size: 13px; }
.fcard-add .go { color: var(--alpha-dim); }

/* The big number, named by what it counts, and the comparison under it. */
.fbig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fnum { font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fmeasure { font-size: 15px; font-weight: 500; }
.fcmp { margin-top: 8px; color: var(--alpha-muted); font-size: 12.5px; }
.fcmp.is-up, .kpi .ks.is-up { color: var(--alpha-exc); }
.fcmp.is-down, .kpi .ks.is-down { color: var(--alpha-danger); }
.fspark { display: block; width: 100%; height: 44px; }
.fspark polyline { fill: none; stroke: var(--alpha-tint); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ffacts { margin: 0; color: var(--alpha-body); font-size: 13px; }
.ffacts b { color: var(--alpha-white); font-weight: 600; font-variant-numeric: tabular-nums; }
.fmeta, .ftoday { margin: 0; color: var(--alpha-dim); font-size: 12px; }
.fnote { margin: 0; color: var(--alpha-muted); font-size: 13px; }
.ffoot { margin: 14px 0 0; color: var(--alpha-dim); font-size: 12px; }
.fremove { margin: 4px 0 0; color: var(--alpha-dim); font-size: 12.5px; }
.stack > .ffoot { margin-top: 14px; }
/* What is missing, in amber: a step arriving, and the one that is not. */
.fwarn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; border: 1px solid rgba(217, 161, 59, 0.3); background: rgba(217, 161, 59, 0.06); font-size: 13.5px; }
.fwarn > div { display: flex; align-items: baseline; gap: 10px; }
.fwarn .tick { color: var(--alpha-exc); font-family: var(--alpha-mono); }
.fwarn .bang { color: var(--alpha-park); font-family: var(--alpha-mono); }
/* "Or tell your agent", with the prompt to copy. */
.ftell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--alpha-dim); font-size: 12.5px; }

/* A funnel's page: its totals, then panels with a heading row. */
.fkpis { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-bottom: 0; }
.kpi .fnum { font-size: 26px; letter-spacing: -0.02em; }
.kpi .fmeasure { font-size: 13px; font-weight: 400; }
.kpi.is-conversion { border-color: rgba(255, 70, 46, 0.55); }
.kpi.is-conversion .eyebrow { display: flex; justify-content: space-between; gap: 8px; color: #ff8a78; }
.kpi .eyebrow a { color: var(--alpha-tint); font-family: var(--alpha-sans); font-size: 12px; letter-spacing: 0; text-decoration: none; text-transform: none; }
.fsec { padding: 20px 22px; }
.fsec h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fsec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.fsec-head p { max-width: 72ch; margin: 4px 0 0; color: var(--alpha-dim); font-size: 12.5px; }
.fsec > p:not([class]) { max-width: 72ch; margin: 0 0 14px; color: var(--alpha-body); font-size: 13px; }
.fsec > .hint { margin: 12px 0 0; }
.fchange { color: var(--alpha-tint); font-size: 12px; text-decoration: none; }
.fchange:hover { color: var(--alpha-coral); }

/* Where people drop off: a row per step, its bar the share who got there. A side screen is indented under its screen,
   the conversion is marked, and the steps after it are grey. On a phone each row takes two lines (see below). */
.drop { margin: 0; padding: 0; list-style: none; }
.drop-head, .drop-row { display: grid; grid-template-columns: 28px minmax(0, 1.3fr) minmax(0, 1.8fr) 64px 132px; grid-template-areas: "n name bar people lost"; gap: 14px; align-items: center; }
.drop-head { padding: 0 0 8px; border-bottom: 1px solid var(--alpha-line); color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.drop-head span:nth-child(n + 4) { text-align: right; }
.drop-phone-head { display: none; }
.drop-row { padding: 9px 0; border-bottom: 1px solid rgba(249, 249, 249, 0.07); }
.drop-n { grid-area: n; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 11.5px; }
.drop-name { grid-area: name; display: grid; gap: 2px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.drop-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.drop-label .chip { padding: 1px 6px; font-size: 10px; }
.drop-sub { color: var(--alpha-dim); font-size: 11.5px; }
.drop-sub .advice { margin: 0; font-size: 11.5px; }
.drop-bar, .fstep-bar, .sbar { display: block; width: 100%; height: 10px; }
.drop-bar { grid-area: bar; }
.drop-bar .track, .fstep-bar .track, .sbar .track { fill: rgba(249, 249, 249, 0.06); }
.drop-bar .fill, .fstep-bar .fill, .sbar .fill { fill: rgba(249, 211, 205, 0.55); }
.drop-people { grid-area: people; text-align: right; font-variant-numeric: tabular-nums; }
.drop-lost { grid-area: lost; color: var(--alpha-muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.drop-row.is-side { padding: 7px 0; }
.drop-row.is-side .drop-name { padding-left: 14px; color: var(--alpha-body); }
.drop-row.is-conversion { margin: 0 -8px; padding: 10px 8px; background: rgba(255, 70, 46, 0.07); }
.drop-row.is-conversion .drop-label { font-weight: 600; }
.drop-row.is-conversion .drop-n, .drop-row.is-conversion .drop-lost { color: #ff8a78; }
.drop-row.is-conversion .fill, .fstep.is-conversion .fill { fill: var(--alpha-coral); }
.drop-after { margin: 16px 0 6px; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.drop.is-after .drop-row { border-bottom: 0; color: var(--alpha-dim); }
.drop.is-after .track { fill: rgba(249, 249, 249, 0.04); }
.drop.is-after .fill { fill: rgba(249, 249, 249, 0.22); }

/* A lead magnet or a homepage: its rate beside its two steps. */
.ftwo { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; padding: 22px; }
.ftwo-rate { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; }
.ftwo-rate .eyebrow { color: #ff8a78; }
.ftwo-rate .fcmp { margin-top: 0; }
.ftwo-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.fstep-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.fstep-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.fstep-name .chip { padding: 1px 6px; font-size: 10px; }
.fstep-head b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fstep-bar { height: 12px; }
.fstep .hint { margin: 6px 0 0; }
.fafter { margin: 0; padding: 0; list-style: none; }
.fafter li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--alpha-dim); font-size: 13px; }

/* The trend, by day (by hour on 24 hours): grid lines and labels in the SVG's own coordinates, the line in a stretched box. */
.ftrend { display: block; width: 100%; }
.ftrend .grid { stroke: rgba(249, 249, 249, 0.07); }
.ftrend .tick, .ftrend .xl { fill: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; }
.ftrend polyline { fill: none; stroke: var(--alpha-tint); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ftrend circle { fill: var(--alpha-tint); stroke: var(--alpha-surface); stroke-width: 2; }
.ftrend .mark { stroke: rgba(249, 211, 205, 0.45); stroke-dasharray: 4 3; }
.ftrend .mark-label { fill: var(--alpha-tint); font-family: var(--alpha-mono); font-size: 10.5px; }
.ftrend-last { color: var(--alpha-tint); font-size: 13px; }
.ftrend-last b { color: var(--alpha-white); }

/* Where visitors came from. */
.fsources th.num, .fsources td.num { text-align: right; }
.srate { display: flex; align-items: center; gap: 10px; }
.srate b { width: 52px; flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sbar { flex: 1; min-width: 60px; height: 8px; }

/* New screens waiting to be placed, and what a waiting funnel counts. */
.ftray-list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.ftray-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 10px 0; border-bottom: 1px solid rgba(249, 249, 249, 0.07); }
.ftray-list li:last-child { border-bottom: 0; }
.ftray-list li > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ftray-list form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.ftray-list label { display: flex; align-items: center; gap: 6px; color: var(--alpha-muted); font-size: 12.5px; }
.ftray-list select.input { width: auto; max-width: 200px; padding: 6px 8px; font-size: 13px; }
.fcheck input, .pick-opt input { margin: 0; accent-color: var(--alpha-coral); }
.fcounts { margin: 10px 0 0; padding-left: 20px; color: var(--alpha-body); font-size: 13.5px; }
.fcounts li { margin: 4px 0; overflow-wrap: anywhere; }

/* Picking a step: the conversion picker and Add a funnel. Each choice is a row; the picked one is coral. */
.pick { max-width: 780px; }
.pick .callout { margin: 0 0 14px; }
.pick-list, .fpick { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.pick-list legend, .fpick legend { margin-bottom: 8px; padding: 0; }
.fpick legend { color: var(--alpha-muted); font-size: 13px; }
.fpick h2 + .hint { margin: 4px 0 12px; }
.fpick > .field { margin: 12px 0 0; }
.pick-opt { display: flex; align-items: center; gap: 12px; margin-top: -1px; padding: 11px 12px; border: 1px solid var(--alpha-line); cursor: pointer; }
.pick-opt:hover { background: rgba(249, 249, 249, 0.03); }
.pick-opt:has(input[type="radio"]:checked) { position: relative; border-color: rgba(255, 70, 46, 0.6); background: rgba(255, 70, 46, 0.06); }
.pick-opt.is-side .pick-label { color: var(--alpha-body); }
.pick-label { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.pick-label .hint { flex-basis: 100%; }
.pick-rate { display: flex; align-items: baseline; gap: 8px; color: var(--alpha-dim); font-size: 12px; text-align: right; }
.pick-rate b { color: var(--alpha-white); font-size: 14px; font-variant-numeric: tabular-nums; }
.pick-more > summary { padding: 10px 0; color: var(--alpha-tint); font-size: 13px; cursor: pointer; }
/* The screens a site sent, as Add a funnel lists them: a position to move each, whether it counts, Side, and the
   conversion. The rows below the conversion picked are grey: they are shown after it and not counted. */
.fseen-row { flex-wrap: wrap; gap: 8px 12px; cursor: default; }
.fseen-row .fpos { flex: 0 0 auto; width: 56px; padding: 5px 6px; font-size: 13px; text-align: center; }
.fseen-name { display: flex; flex: 1 1 200px; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.fseen-pick { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; min-width: 92px; color: var(--alpha-muted); font-size: 12.5px; cursor: pointer; }
.fseen-pick:empty { visibility: hidden; }
.fseen-row.is-event .pick-label { color: var(--alpha-body); }
.fseen .pick-opt:has(input[type="radio"]:checked) ~ .pick-opt .pick-label { color: var(--alpha-dim); }
.pick-now { margin: 0 0 14px; padding: 14px 16px; border: 1px solid rgba(255, 70, 46, 0.45); }
.pick-now .fnum { font-size: 30px; }
.pick-now .fmeasure { color: var(--alpha-body); font-size: 13px; font-weight: 400; }
.pick-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pick .ftell, .fsec .ftell { margin-top: 14px; }

/* The sites: a card per key, with its snippet, hosts and "this is me" link. */
.fsites { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.fsite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--alpha-line); }
.fsite .copyrow .url { min-width: 0; }
.fsite.is-new { border-color: rgba(249, 211, 205, 0.5); }
.fsite-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.fsite-head > span:first-child { display: grid; gap: 2px; min-width: 0; }
.fsite-head b { font-size: 14px; overflow-wrap: anywhere; }
.fsite p { margin: 0; color: var(--alpha-body); font-size: 13px; }
.fsite p a { color: var(--alpha-tint); }
.fhosts { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fhosts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; }
.fhosts li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.fhosts form { margin: 0 0 0 auto; }
.fnew { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0 0; }
.fnew .field { flex: 1 1 240px; margin: 0; }

/* ---------- what the page says while a script works: a toast, and words only a screen reader hears ---------- */

p.status { position: fixed; left: 20px; bottom: 20px; z-index: 5; max-width: min(520px, calc(100vw - 40px)); margin: 0; padding: 10px 14px; border: 1px solid rgba(249, 211, 205, 0.28); border-left: 2px solid var(--alpha-tint); background: var(--alpha-surface); color: var(--alpha-tint); font-size: 12.5px; }
p.status:empty { display: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- narrower screens ---------- */

@media (max-width: 900px) {
  .cards2, .start-clients { grid-template-columns: minmax(0, 1fr); }
}

/* A phone: the sidebar becomes a block at the top with a wrapping nav. */
@media (max-width: 720px) {
  /* On a short page the spare height goes to the main column, never to the nav's rows. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { border-right: 0; border-bottom: 1px solid rgba(249, 249, 249, 0.1); }
  .nav { display: flex; flex-wrap: wrap; align-content: flex-start; padding: 10px 0; }
  .nav .sep { display: none; }
  .switcher { margin: 12px 16px 0; }
  .switcher .menu { width: 100%; max-width: none; }
  .nav a, .nav .off { padding: 8px 14px; }
  .admin-nav { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-top: 8px; }
  .admin-nav .nav-heading { flex-basis: 100%; }
  .main { padding: 20px 16px 28px; }
  /* A page's two main actions stay in reach: pinned to the bottom of the screen. */
  .actions.is-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: stretch; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid rgba(249, 249, 249, 0.1); background: var(--alpha-sidebar); }
  .actions.is-dock > * { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 44px; text-align: center; }
  /* Pinned, a label says only what fits half a phone: "Send feedback (5)". */
  .actions.is-dock .wide { display: none; }
  .main:has(.actions.is-dock) { padding-bottom: 100px; }
  /* The toast sits above them, never over them: Send and Approve stay in reach whatever it says. */
  body:has(.actions.is-dock) p.status { bottom: 92px; }
}
@media (max-width: 640px) {
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions > * { width: 100%; text-align: center; }
}

/* The main column is the container, so a component reflows to the room it has, not to the window. */
@container (max-width: 880px) {
  .tr-lesson { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 760px) {
  .ledger > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .play { grid-template-columns: minmax(0, 1fr); }
  .phone { margin: 0 auto; }
  .ftwo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@container (max-width: 620px) {
  .src-head { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; }
  .src-head .src-chips { grid-column: 1 / -1; justify-content: flex-start; }
  .src-cover { width: 44px; }
  .src-strip { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); padding: 14px; }
  .tr-alpha { grid-template-columns: minmax(0, 1fr); }
  .tr-alpha .acts { justify-content: flex-start; }
  .tr-cols, .compare { grid-template-columns: minmax(0, 1fr); }
  .tr-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .tr-controls { padding: 30px 6px 6px; }
  .tr-controls .row, .ctlbar .row { gap: 2px; }
  .tr-controls .time { margin: 0 4px; font-size: 11px; }
  .tr-ctl { min-width: 30px; padding: 0 4px; }
  .ctlbar { padding: 8px 6px 4px; }
  .tr-start .glyph { width: 56px; height: 56px; }
  .tr-start .glyph svg { width: 24px; height: 24px; }
  /* Steps scroll sideways rather than shrink past reading. */
  .tiles { grid-auto-columns: 30%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .tile { scroll-snap-align: start; }
  .idea { padding: 16px; }
  .pband { width: calc(100% + 32px); margin: -16px -16px 14px; }
  .istats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docpanel { padding: 18px 16px 20px; }
  /* A funnel on a phone: each drop-off row takes two lines, the step and its people, then a full-width bar and the share
     lost there. */
  .fcard, .fsec, .ftwo { padding: 16px; }
  .fnum { font-size: 40px; }
  .drop-head { display: none; }
  .drop-phone-head { display: block; margin: -6px 0 6px; color: var(--alpha-dim); font-size: 12px; text-align: right; }
  .drop-row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "n name people" "bar bar lost"; gap: 5px 10px; }
  .drop-bar { height: 8px; }
  .drop-lost { font-size: 12px; }
  .sbar { display: none; }
  /* Where visitors came from keeps the source, its visitors and its rate; the count of conversions gives way. */
  .fsources .scount { display: none; }
  .fseen-pick { min-width: 0; }
}

/* Approved shorts in a narrow column (a phone, or half the page on a small laptop) become a card each, so a title never
   breaks a word to a line and Download and Copy caption stay in reach: a phone is where a founder posts from. */
@container (max-width: 460px) {
  .posts .table thead { display: none; }
  .posts .table, .posts .table tbody, .posts .table tr, .posts .table td { display: block; }
  .posts .table td { padding: 3px 14px; border: 0; }
  .posts .table td:first-child { padding-top: 12px; }
  .posts .table td:last-child { padding-bottom: 12px; border-bottom: 1px solid rgba(249, 249, 249, 0.07); }
  .posts .table tr:last-child td:last-child { border-bottom: 0; }
  .posts .table td[data-label]::before { content: attr(data-label); margin-right: 8px; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
  .posts .table .sub { display: inline-block; margin: 0 0 0 14px; }
}

/* A touch screen: every player control is a 44px target. */
@media (pointer: coarse) {
  .tr-ctl { min-width: 44px; height: 44px; }
  .tr-scrub { height: 24px; }
}

/* Posting (socialsViews.mjs): the posts sent for a short, and the accounts on /socials. */
.posted { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.posted li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.posted li form { display: inline; margin: 0; }
.posted li .advice { flex-basis: 100%; margin: 0; }
#posting .toggles { display: flex; flex-wrap: wrap; gap: 8px; }
#posting .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------- MichiaAI: past conversations beside the open one, answers set as documents, the moments they came from ---------- */

.m-page { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.m-chats { position: sticky; top: 20px; display: grid; gap: 12px; padding: 12px; }
.m-chats .hint { margin: 0; padding: 0 4px; }
.m-list { display: grid; gap: 1px; max-height: calc(100vh - 220px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.m-list a { display: grid; gap: 2px; padding: 8px 10px; border-left: 2px solid transparent; text-decoration: none; }
.m-list a:hover { background: rgba(249, 249, 249, 0.05); }
.m-list a[aria-current] { border-left-color: var(--alpha-coral); background: rgba(255, 70, 46, 0.08); }
.m-list span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--alpha-white); font-size: 13.5px; line-height: 1.35; }

.m-talk { display: grid; gap: 16px; min-width: 0; max-width: 820px; }
.m-talk > .formerror, .m-talk > .formnotice { margin: 0; }
.m-thread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.m-thread > * { min-width: 0; }
.m-turn > .eyebrow { margin: 0 0 8px; font-weight: 400; }
.m-turn.is-michia > .eyebrow { color: var(--alpha-coral); }
.m-turn.is-you { padding: 0 2px; }
.m-said { max-width: 68ch; color: var(--alpha-white); font-size: 15px; line-height: 1.55; }
.m-said p { margin: 0; }
.m-said p + p { margin-top: 0.6em; }
.m-turn.is-michia { padding: 20px 24px 22px; }
.m-turn .formerror { margin: 0; }
.m-thinking { color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.m-thinking::after { content: "…"; }

.m-hello .lede { max-width: 62ch; font-size: 15.5px; }
.m-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.m-starters .btn-ghost { text-align: left; cursor: pointer; }

.m-reel { margin: 20px -24px -22px; padding: 14px 24px 18px; border-top: 1px solid var(--alpha-line); background: var(--alpha-inset); }
.m-reel .eyebrow { margin: 0 0 10px; }
.m-reel ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 8px; margin: 0; padding: 0 0 2px; overflow-x: auto; overscroll-behavior-x: contain; list-style: none; }
.m-reel a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 10px 12px 12px; border: 1px solid var(--alpha-line); background: var(--alpha-panel); text-decoration: none; }
.m-reel a:hover { border-color: rgba(255, 70, 46, 0.6); }
.m-reel time { color: var(--alpha-coral); font-family: var(--alpha-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.m-reel span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--alpha-body); font-size: 13px; line-height: 1.4; }

.m-ask { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 10px; padding: 12px; box-shadow: 0 -12px 24px rgba(9, 9, 9, 0.8); }
.m-ask textarea { resize: none; font-size: 14.5px; }
.m-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.m-row .btn { margin-left: auto; }
.m-check, .m-pick { display: inline-flex; align-items: center; gap: 8px; color: var(--alpha-muted); font-size: 13px; }
.m-check input { width: 15px; height: 15px; accent-color: var(--alpha-coral); }
.m-check a { color: var(--alpha-tint); }
.m-pick select.input { width: auto; max-width: 220px; padding: 6px 8px; font-size: 13px; }
.m-ask .hint { margin: 0; }
.m-ask.is-busy .btn { opacity: 0.3; pointer-events: none; }

@container (max-width: 760px) {
  .m-page { grid-template-columns: minmax(0, 1fr); }
  .m-chats { position: static; }
  .m-list { max-height: 180px; }
  .m-turn.is-michia { padding: 16px 16px 18px; }
  .m-reel { margin: 16px -16px -18px; padding: 12px 16px 16px; }
  .m-reel ol { grid-auto-columns: minmax(150px, 72%); }
  .m-row .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .m-thinking::after { display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; animation: m-thinking 1.2s steps(4) infinite; }
  @keyframes m-thinking { from { width: 0; } to { width: 1.2em; } }
}

/* The date ranges with Custom picked: the tabs, then two date fields and Apply. */
.franges { display: grid; justify-items: end; gap: 8px; }
.fcustom { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.fcustom label { display: grid; gap: 4px; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.fcustom .input { width: auto; min-width: 150px; }
.ranges { flex-wrap: wrap; }
@media (max-width: 640px) { .franges { justify-items: start; } }

/* A split test (funnelViews.mjs splitPanel): the two versions side by side, the significance against its 95% mark, and
   both versions' rates day by day. Only the significance (green, red) and tracking health are coloured. */
.sx h2 { margin-top: 4px; }
.sx .fsec-head { align-items: flex-start; }
.sx-arms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 18px; }
.sx-arm { display: grid; align-content: start; gap: 8px; padding: 16px 18px 18px; border: 1px solid var(--alpha-line); background: var(--alpha-inset); }
.sx-armhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.sx-arm .fnum { font-size: 40px; }
.sx-chip { border-color: rgba(249, 211, 205, 0.5); color: var(--alpha-tint); }
.sx-verdict { display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--alpha-line); }
.sx-verdict .v { margin-top: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.sx-verdict .v.is-up { color: var(--alpha-exc); }
.sx-verdict .v.is-down { color: var(--alpha-danger); }
.sx-verdict .why { color: var(--alpha-muted); font-size: 13px; }
.sx-verdict.is-up { border-color: rgba(62, 207, 142, 0.4); background: rgba(62, 207, 142, 0.05); }
.sx-verdict.is-down { border-color: rgba(224, 120, 102, 0.4); background: rgba(224, 120, 102, 0.05); }
.sx-sig { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0 12px; margin: 0 0 8px; }
.sx-siglab { color: var(--alpha-muted); font-family: var(--alpha-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.sx-signum { color: var(--alpha-white); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.sx-meter { position: relative; display: block; height: 10px; margin: 0 6px 0 8px; }
.sx-meter svg { display: block; width: 100%; height: 10px; }
.sx-meter .track { fill: rgba(249, 249, 249, 0.06); }
.sx-meter .fill { fill: rgba(249, 211, 205, 0.55); }
.sx-goal { position: absolute; left: 95%; top: -7px; height: 24px; border-left: 1px dashed rgba(249, 249, 249, 0.55); }
.sx-goal span { position: absolute; right: 6px; top: 26px; color: var(--alpha-dim); font-family: var(--alpha-mono); font-size: 10.5px; white-space: nowrap; }
.sx-verdict.is-up .sx-signum { color: var(--alpha-exc); }
.sx-verdict.is-up .sx-meter .fill { fill: var(--alpha-exc); }
.sx-verdict.is-down .sx-signum { color: var(--alpha-danger); }
.sx-verdict.is-down .sx-meter .fill { fill: var(--alpha-danger); }
.sx-promote { margin: 0 0 6px; }
.sx-racehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin: 6px 0 8px; }
.sx-key { display: flex; gap: 14px; color: var(--alpha-muted); font-size: 12.5px; }
.sx-key i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--alpha-tint); }
.sx-key i.is-a { background: var(--alpha-muted); }
.sx-race { margin-bottom: 8px; }
.sx-race polyline.is-a { stroke: var(--alpha-muted); }
.sx-race circle { stroke-width: 1.5; }
.sx-race circle.is-a { fill: var(--alpha-muted); }
.sx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(249, 249, 249, 0.08); }
.sx-during { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(249, 249, 249, 0.08); color: var(--alpha-dim); font-size: 12.5px; }
.sx-past td.kept { color: var(--alpha-muted); }
.sx-past td.sig { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .sx-arms { gap: 8px; }
  .sx-arm { padding: 12px; }
  .sx-arm .fnum { font-size: 30px; }
  .sx-armhead .go { display: none; }
  .sx-signum { font-size: 24px; }
  .sx-sig { display: flex; flex-wrap: wrap; align-items: center; }
  .sx-meter { flex: 1 0 100%; margin: 12px 0 18px; }
}