/* Trace Labeler — custom layer over Pico.
   Pico carries the base typography/spacing; this file owns the chat transcript,
   the role-coded step timeline, and the progressive-disclosure verdict control.
   Saturated colour is reserved for verdict semantics — nothing else. */

:root {
  /* ── Verdict / semantic colour ────────────────────────────────────────── */
  --tl-good: #1f9d63;
  --tl-good-soft: #e6f4ec;
  --tl-bad: #d64550;
  --tl-bad-strong: #c0392b;  /* deeper red for solid fills — readable with white text */
  --tl-bad-soft: #fbe9ea;
  --tl-unsure: #c98202;
  --tl-unsure-soft: #fbf0db;
  --tl-rail: var(--pico-muted-border-color);
  --tl-user-accent: var(--pico-primary);
  --tl-measure: 56rem;

  /* ── TYPE scale ───────────────────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;

  /* ── SPACING scale ────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* ── Measure ──────────────────────────────────────────────────────────── */
  --measure-prose: 38rem;
}

/* Dark overrides for the custom soft-fill tokens. Pico flips its own variables;
   these mirror that for our --tl-*-soft tokens. Applied both when dark is forced
   ([data-theme="dark"]) and when the OS prefers dark and nothing is forced. */
:root[data-theme="dark"] {
  --tl-good-soft: #11271c;
  --tl-bad-soft: #2c1517;
  --tl-unsure-soft: #2a2008;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tl-good-soft: #11271c;
    --tl-bad-soft: #2c1517;
    --tl-unsure-soft: #2a2008;
  }
}

/* ── App shell ─────────────────────────────────────────────────────────── */
/* Always reserve the vertical scrollbar gutter so the centered container keeps
   one width whether a tab's list scrolls (Available, long) or not (My labels,
   short) — otherwise the ~15px scrollbar appearing/disappearing shifts the whole
   layout when flipping between tabs. */
html { scrollbar-gutter: stable; }

/* Animate same-origin navigations (e.g. flipping between the Available and My
   labels tabs) with the browser's native cross-document View Transitions.
   Only the list table animates: it carries its own transition name (shared
   across both tabs so it morphs between them), while the rest of the page —
   header, tabs, filters — swaps instantly because the root snapshot's animation
   is disabled. Unsupported browsers simply navigate instantly. */
@view-transition { navigation: auto; }
.worklist-table { view-transition-name: worklist-table; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(worklist-table),
  ::view-transition-new(worklist-table) { animation: none; }
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pico-card-background-color);
  border-bottom: 1px solid var(--pico-card-border-color);
}
.app-header__inner {
  max-width: var(--tl-measure);
  margin-inline: auto;
  padding: var(--space-2) var(--pico-spacing);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.app-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--pico-color);
}
.app-header__left { display: flex; align-items: center; gap: var(--space-5); }
.app-nav { display: flex; align-items: center; gap: var(--space-4); margin: 0; }
.app-nav a {
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--pico-muted-color);
}
.app-nav a:hover { color: var(--pico-color); }
.app-header__right { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  width: auto;
  margin: 0;
  padding: 0.2rem 0.5rem;
  font-size: var(--text-base);
  line-height: 1;
  background: transparent;
  border: 1px solid var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--pico-card-sectioning-background-color); }
.app-who__name { color: var(--pico-muted-color); font-size: var(--text-sm); }
.app-who__logout { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); margin: 0; }
/* Match .app-header__inner's horizontal gutter so nav, headings, and the
   worklist table share one left/right edge (Pico's .container leaves the inline
   padding at 0 here, leaving main content flush while the header was inset). */
.app-main { max-width: var(--tl-measure); padding-block: var(--pico-spacing); padding-inline: var(--pico-spacing); }

/* ── Item header / meta ────────────────────────────────────────────────── */
.item-head { margin-bottom: var(--space-5); }
/* subject_key is an opaque ID — render as a quiet eyebrow identifier, not a title */
.item-head h1 {
  font-size: var(--text-xs);
  font-weight: 400;
  font-family: var(--pico-font-family-monospace);
  color: var(--pico-muted-color);
  margin-bottom: var(--space-1);
  word-break: break-all;
}
.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--pico-muted-color);
}
.item-meta .tag {
  font-family: var(--pico-font-family-monospace);
  background: var(--pico-code-background-color);
  padding: 0.05rem var(--space-1);
  border-radius: var(--pico-border-radius);
}

/* Status banners */
.banner {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--pico-border-radius);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.banner-done   { background: var(--pico-card-sectioning-background-color); border-color: var(--tl-rail); }
.banner-leased { background: var(--tl-unsure-soft); border-color: var(--tl-unsure); }
.banner-mine   { background: var(--tl-good-soft); border-color: var(--tl-good); }

/* ── Chat transcript ───────────────────────────────────────────────────── */
/* Hide only the native left-side marker. Pico's right-side chevron
   (summary::after) is kept — it already rotates on open — and we just center it
   against our flex summary rows (Pico floats it, which flex ignores). */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
.step__row::after,
.steps__label::after,
.step__details > summary::after,
.msg-block__head::after,
.io-block__head::after,
.downstream__head::after { align-self: center; }
/* Pico tints focused summaries primary; keep our disclosure text neutral.
   Matches Pico's specificity and loads later, so it wins without !important. */
.app-main details summary:focus,
.app-main details summary:focus-visible { color: var(--pico-muted-color); }

/* Turn separation: clear divider between turns, not on the first */
.turn { margin-bottom: var(--space-5); }
.turn + .turn {
  border-top: 1px solid var(--pico-card-border-color);
  padding-top: var(--space-5);
}
.turn__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pico-muted-color);
  margin: 0;  /* the flex bar owns vertical rhythm; no stray <p> margin */
}

/* Chat bubbles — user prompt + assistant answer */
.bubble { border-radius: 1rem; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); max-width: 92%; }
/* bubble__role: sentence-case, differentiated by weight/size — no uppercase on role labels */
.bubble__role { font-size: var(--text-xs); font-weight: 600; opacity: 0.75; margin-bottom: 0.15rem; }
.bubble__text { margin: 0; white-space: pre-wrap; max-width: var(--measure-prose); }

/* User bubble: quiet neutral tint, not saturated blue (colour reserved for verdicts) */
.bubble-user {
  background: var(--pico-card-sectioning-background-color);
  border: 1px solid var(--pico-card-border-color);
  border-bottom-left-radius: 0.25rem;
}

/* Assistant bubble: same shape as the user bubble, alternated to the right so
   the turn reads as a chat. Distinguished from the user by side + a white fill. */
.bubble-assistant {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-card-border-color);
  border-bottom-right-radius: 0.25rem;
  margin-left: auto;
}

/* Turn controls */
.turn__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.turn__controls { display: flex; gap: var(--space-1); flex: none; }
.turn__controls button { width: auto; padding: 0.2rem var(--space-3); font-size: var(--text-xs); margin: 0; }
.turn__steps { margin-top: var(--space-1); }
.steps__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pico-muted-color);
  margin: var(--space-3) 0 var(--space-1);
}
.steps__count {
  background: var(--pico-code-background-color);
  border-radius: 999px;
  padding: 0 0.45rem;
  font-variant-numeric: tabular-nums;
}

/* Assistant work — a left-railed timeline of collapsible steps.
   Rail geometry is optical: .steps padding-left + the dot's `left` offset are
   tuned together so the node dots land ON the rail — keep them as literals, not
   scale tokens, or the dots drift off the line. */
.steps { border-left: 2px solid var(--tl-rail); padding-left: 0.9rem; margin-left: 0.3rem; }
.steps .steps { margin-top: var(--space-2); }

/* Step card: border + background + rail + dot + chip. The border carries the
   visual separation between adjacent spans, so keep it. */
.step {
  position: relative;
  margin-bottom: var(--space-2);
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
}
.step::before { /* node dot on the rail */
  content: "";
  position: absolute;
  left: -1.28rem;
  top: 0.95rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tl-rail);
}
.step--agent::before { background: var(--tl-user-accent); }
.step--tool::before  { background: var(--tl-unsure); }
.step__row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  color: var(--pico-color);  /* keep neutral; Pico tints open/active summaries */
}
.step__body { padding: 0 var(--space-3) var(--space-2); }
/* Role chips (AGENT/TOOL/LLM): keep uppercase + letter-spacing — these are semantic type labels */
.step__chip {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--tl-rail);
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.step--agent .step__chip { color: var(--tl-user-accent); border-color: var(--tl-user-accent); }
.step--tool  .step__chip { color: var(--tl-unsure); border-color: var(--tl-unsure); }
.step--llm   .step__chip { color: var(--pico-muted-color); }
.step__title { font-weight: 600; color: var(--pico-color); }
.step__fact  { font-family: var(--pico-font-family-monospace); font-size: var(--text-xs); color: var(--pico-muted-color); }
.step__dur   { margin-left: auto; font-size: var(--text-xs); color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }

/* Conversation content inside a step */
.msg { margin: var(--space-1) 0; }
/* msg__role: sentence-case (no uppercase), differentiated by weight */
.msg__role { font-size: var(--text-xs); font-weight: 600; color: var(--pico-muted-color); margin-bottom: 0.1rem; }
.msg__text { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.5; max-width: var(--measure-prose); }
.msg--assistant .msg__text {
  border-left: 3px solid var(--tl-good);
  padding-left: var(--space-2);
}
/* Per-role input message blocks (collapsible). Role colour mirrors the step
   chips so System / User / Assistant / Tool are distinguishable at a glance. */
.msg-block { margin: var(--space-1) 0; border-left: 2px solid var(--tl-rail); padding-left: 0.55rem; }
.msg-block__head { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
/* msg-block__role: sentence-case, differentiated by colour/weight (no uppercase) */
.msg-block__role { font-size: var(--text-xs); font-weight: 700; }
.msg-block--system    .msg-block__role { color: var(--pico-muted-color); }
.msg-block--user      .msg-block__role { color: var(--tl-user-accent); }
.msg-block--assistant .msg-block__role { color: var(--tl-good); }
.msg-block--tool      .msg-block__role { color: var(--tl-unsure); }
.msg-block__tag { font-size: var(--text-xs); font-style: italic; color: var(--pico-muted-color); }
.msg-block__text { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.5; margin-top: var(--space-1); max-width: var(--measure-prose); }
/* Tool-call args / tool-result payloads carried in the llm input history. */
.msg-block__pre { margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3); max-height: 24rem; overflow: auto; font-size: var(--text-xs); }
/* Carried-over context: dimmed, smaller; still expandable. */
.msg-block--carryover { opacity: 0.5; border-left-style: dashed; }
.msg-block--carryover .msg-block__text { font-size: var(--text-xs); color: var(--pico-muted-color); }

/* Tool input / output blocks (collapsible) */
.io-block { margin: 0.35rem 0; }
/* Flex so Pico's right-floated chevron sits next to the label, not at the edge. */
/* io-block__head: sentence-case (no uppercase) — differentiated by size/color */
.io-block__head { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); font-weight: 600; color: var(--pico-muted-color); cursor: pointer; }
.io-block pre { margin: 0.2rem 0 0; padding: var(--space-2) var(--space-3); max-height: 24rem; overflow: auto; font-size: var(--text-xs); }
/* Marks a raw payload the upstream truncated (so it couldn't be parsed/humanized). */
.io-block__warn { font-weight: 600; color: var(--pico-del-color, #b3261e); }

/* Downstream roll-up — the pruned SQL/HTTP/compute subtree a step fanned out
   into. Muted and collapsed: it's context, not something to annotate. */
.downstream { margin: var(--space-1) 0; }
/* downstream__head: sentence-case (no uppercase) — differentiated by size/color */
.downstream__head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--pico-muted-color);
}
.downstream__count {
  background: var(--pico-code-background-color);
  border-radius: 999px;
  padding: 0 0.45rem;
  font-variant-numeric: tabular-nums;
}
.downstream__list { font-size: var(--text-xs); }
.downstream__list dd { font-variant-numeric: tabular-nums; color: var(--pico-muted-color); }

/* Progressive disclosure for technical detail */
.step__details { margin-top: var(--space-2); }
/* Flex (not block) so Pico's right-floated chevron becomes a flex item sitting
   right after the label — the disclosure cue stays next to "Attributes" instead
   of drifting to the far edge. Summary stays full-width for a large click target. */
.step__details > summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--pico-muted-color);
}
/* The whole <dl> is one grid so every value aligns to a single column sized to
   the widest key (max-content). `display: contents` dissolves the per-pair
   wrapper <div>s so their dt/dd land directly in that grid. */
.kv {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-3);
  row-gap: 0.2rem;
}
.kv > div { display: contents; }
.kv dt { font-family: var(--pico-font-family-monospace); color: var(--pico-muted-color); padding: 0.12rem 0; }
.kv dd { margin: 0; padding: 0.12rem 0; overflow-wrap: anywhere; text-wrap: pretty; }
.state-diff { margin-top: var(--space-2); font-size: var(--text-xs); }
.state-diff pre { margin: 0.2rem 0; max-height: 16rem; overflow: auto; }
.state-pre  { border-left: 3px solid var(--pico-muted-border-color); padding-left: var(--space-2); }
.state-post { border-left: 3px solid var(--tl-good); padding-left: var(--space-2); }

/* ── Verdict control (progressive disclosure) ─────────────────────────── */
.verdict { margin-top: 0.55rem; }
.verdict__form { margin: 0; }
.seg {
  display: inline-flex;
  border: 1px solid var(--tl-rail);
  border-radius: 999px;
  overflow: hidden;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0.2rem var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid var(--tl-rail);
  line-height: 1.4;
  user-select: none;
  transition: background var(--pico-transition), color var(--pico-transition);
}
.seg label:last-of-type { border-right: 0; }
/* Pico gives radio-associated labels a 1em inline-end margin
   ([type=radio]~label:not(:last-of-type)); the segmented pill wants them flush
   (divided only by the 1px border). The extra specificity here beats Pico's
   rule, so the segments don't render a gap that reads as stray whitespace once a
   segment's fill makes it visible. */
.seg [type="radio"] ~ label:not(:last-of-type) { margin-inline-end: 0; }
.seg__emoji { font-size: 0.95em; line-height: 1; }
/* Hover previews each verdict's own colour (soft) on UNselected segments only,
   so the segment reads as good/bad before you commit. Excluding :checked is what
   keeps the selected fill authoritative: otherwise the hover rule (higher
   specificity) would win on a hovered+checked segment, and because HTMX swaps in
   a fresh (un-hovered) node on save, you'd see solid→soft jank as the pointer
   re-resolves hover. Disabled (read-only) pills don't react. */
.seg input[value="good"]:not(:disabled):not(:checked)   + label:hover { background: var(--tl-good-soft); color: var(--tl-good); }
.seg input[value="bad"]:not(:disabled):not(:checked)     + label:hover { background: var(--tl-bad-soft);  color: var(--tl-bad); }
/* Selected (sticky) state: solid fill, unaffected by hover. */
.seg input[value="good"]:checked   + label { background: var(--tl-good);        color: #fff; }
.seg input[value="bad"]:checked     + label { background: var(--tl-bad-strong); color: #fff; }
.verdict__form--readonly .seg label { cursor: default; }

/* Note field is hidden until "bad" is chosen */
.note-field { display: none; margin-top: var(--space-2); }
.verdict__form:has(input[value="bad"]:checked) .note-field { display: block; }
.note-field textarea { margin-bottom: var(--space-1); }
.verdict__form .verdict__save { display: none; width: auto; padding: var(--space-1) var(--space-4); font-size: var(--text-xs); margin: var(--space-1) 0 0; }
.verdict__form:has(input[value="bad"]:checked) .verdict__save { display: inline-block; }

/* Status chip (worklist badge, read-only contexts) */
.chip { font-size: var(--text-xs); font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; }
.chip-good   { background: var(--tl-good-soft);   color: var(--tl-good); }
.chip-bad    { background: var(--tl-bad-soft);    color: var(--tl-bad); }
.chip-unsure { background: var(--tl-unsure-soft); color: var(--tl-unsure); }
/* Completed/settled — muted neutral, distinct from open (green) and in-progress (amber). */
.chip-done   { background: var(--pico-card-sectioning-background-color); color: var(--pico-muted-color); }

/* ── Overall (item-level) verdict + complete ──────────────────────────── */
.overall {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}
.overall h2 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.overall__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.overall__complete, .overall__release { margin: 0; }
.overall__complete button, .overall__release button { width: auto; }

/* ── Worklist ──────────────────────────────────────────────────────────── */
/* Tabs (Available / My labels) */
.tabs {
  display: flex;
  justify-content: flex-start;  /* Pico's nav defaults to space-between → tabs drift to edges */
  gap: var(--space-4);
  border-bottom: 1px solid var(--pico-card-border-color);
  margin-bottom: var(--space-4);
}
.tab {
  padding: var(--space-2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.tab:hover { color: var(--pico-color); }
.tab--active { color: var(--pico-color); border-bottom-color: var(--tl-user-accent); }

/* My-labels filter bar */
.filters { display: flex; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-4); }
.filters label { font-size: var(--text-xs); color: var(--pico-muted-color); margin: 0; }
.filters select { margin: var(--space-1) 0 0; font-size: var(--text-sm); }

/* Conversation link: prose prompt snippet (not an opaque ID), so use the body
   font rather than monospace. Truncation is handled by .col-conv below. */
.subject { font-size: var(--text-sm); }
.lease-badge {
  font-weight: 600;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--tl-unsure-soft);
  color: var(--tl-unsure);
}
.worklist-empty { padding: var(--space-6) 0; text-align: center; }

/* ── Worklist / My-labels tables ───────────────────────────────────────── */
/* One consistent text size across every cell in a row, including the pills. */
.worklist-table { width: 100%; }
.worklist-table th,
.worklist-table td { font-size: var(--text-sm); vertical-align: middle; }
.worklist-table .chip,
.worklist-table .lease-badge { font-size: var(--text-sm); }
/* The Conversation cell takes the remaining width and truncates to one line.
   max-width:0 + width:100% forces the greedy cell to shrink so the inner link's
   ellipsis engages instead of the cell stretching the table. */
.worklist-table td.col-conv { max-width: 0; width: 100%; }
.worklist-table td.col-conv .subject {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Keep the timestamp on one line with aligned digits. */
.worklist-table td.col-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Domain / status cells must never wrap — the greedy Conversation column would
   otherwise squeeze them onto two lines. Reserve a sensible minimum width. */
.worklist-table .tag,
.worklist-table .chip,
.worklist-table .lease-badge { white-space: nowrap; }
.worklist-table .col-domain { min-width: 10rem; white-space: nowrap; }
.worklist-table .col-status { min-width: 7rem; white-space: nowrap; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-card { max-width: 26rem; margin: 3rem auto; }

/* ── Inline alerts (HTMX error/conflict partials) ─────────────────────────── */
.mark-error, .mark-conflict {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--pico-border-radius);
  font-size: var(--text-sm);
  background: var(--tl-bad-soft);
  border: 1px solid var(--tl-bad);
}

@media (max-width: 480px) {
  .step__dur { margin-left: 0; width: 100%; }
}

/* ── Domain selector ──────────────────────────────────────────────────────
   Multi-select card grid (hidden checkbox + styled label), mirroring the
   verdict .seg pattern: the card itself carries the selected state. */
.domain-form { max-width: 40rem; margin: 0 auto; }
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.domain-card__input { position: absolute; opacity: 0; pointer-events: none; }
.domain-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  margin: 0;
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  transition: border-color var(--pico-transition), background var(--pico-transition);
}
.domain-card__emoji { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; position: relative; top: 0.08em; }
.domain-card__label { flex: 0 0 auto; font-size: var(--text-sm); font-weight: 600; line-height: 1; }
/* The check badge only appears once the card is selected. */
.domain-card__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--tl-good);
  color: #fff;
  font-size: var(--text-xs);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--pico-transition), transform var(--pico-transition);
}
.domain-card__input:not(:checked):not(:disabled) + .domain-card:hover {
  border-color: var(--tl-good);
  background: var(--tl-good-soft);
}
.domain-card__input:checked + .domain-card {
  border-color: var(--tl-good);
  background: var(--tl-good-soft);
}
.domain-card__input:checked + .domain-card .domain-card__check {
  opacity: 1;
  transform: scale(1);
}
.domain-card__input:focus-visible + .domain-card {
  outline: 2px solid var(--pico-primary-focus);
  outline-offset: 2px;
}
.domain-form__actions { display: flex; gap: var(--space-3); align-items: center; justify-content: center; }
.domain-form__actions button,
.domain-form__actions [role="button"] { margin: 0; width: auto; }
.domain-form__save { min-width: 8rem; max-width: 12rem; }
.app-who__domains { font-size: var(--text-xs); color: var(--pico-muted-color); }

/* ── Splash / public landing ──────────────────────────────────────────────
   Minimal centered hero: app name, one line, and a single sign-in CTA. */
.splash {
  max-width: 36rem;
  margin: clamp(3rem, 12vh, 7rem) auto 0;
  text-align: center;
}
.splash__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.splash__lead {
  margin: 0 auto var(--space-5);
  font-size: var(--text-lg);
  color: var(--pico-muted-color);
}
.splash__cta {
  display: inline-block;
  margin: 0;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: 999px;
}