/* ============================================================================
   Memória de Reuniões — design system
   ============================================================================

   DIRECTION: "Registro" — the transcript as a document of record.

   The subject's world is transcripts: timecodes, who spoke, what was said. So the interface is built
   like a record rather than like a dashboard. Nearly achromatic — cool paper, blue-black ink — with
   exactly ONE saturated colour, reserved for live capture, because in recording red is an earned
   convention rather than decoration. Highlighter yellow marks search hits, which is what a person
   would actually do to a transcript on paper.

   THE SIGNATURE is the timecode gutter: a narrow monospaced column with a continuous vertical rule,
   running down the transcript, the meeting list and the search results. Everything here is
   timestamped speech, so the spine of the product is time.

   THE RISK, stated: monospaced timestamps everywhere reads technical, even cold. That is deliberate
   for an instrument of record, and it is balanced by the editorial serif and generous measure. If it
   ever feels clinical, the fix is more air, not more colour.

   Three type roles, each load-bearing:
     Newsreader     — editorial serif, titles and the masthead
     Libre Franklin — interface and body
     IBM Plex Mono  — timecodes, counts, identifiers

   No build step, no CSS framework: two screens do not earn a toolchain, and a self-hostable product
   is better off with a stylesheet its owner can read.
   ============================================================================ */

@import url("fonts.cea24578a547.css");

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* One declaration per token, both themes inside it, via `light-dark()`. The alternative — a second
     `@media (prefers-color-scheme: dark)` block redeclaring every variable — is two sources of truth
     that drift the moment someone edits one and forgets the other. Switching themes here means
     switching `color-scheme`, which is what the toggle in the masthead does. */
  color-scheme: light dark;

  /* Paper is COOL, not cream. Cream + serif display + terracotta accent is the current house style of
     machine-made design; so is near-black with one acid accent. This is deliberately neither. */
  --paper:        light-dark(#eceef1, #0f1216);
  --paper-sunk:   light-dark(#e3e6ea, #171b21);
  --card:         light-dark(#ffffff, #1c2128);
  --card-raised:  light-dark(#ffffff, #232931);

  --ink:          light-dark(#15181d, #edf0f4);
  --ink-2:        light-dark(#3d4551, #bfc7d2);
  --ink-3:        light-dark(#6b7482, #909aa8);
  --ink-4:        light-dark(#98a1ae, #6c7683);

  --rule:         light-dark(#d7dbe1, #2f3640);
  --rule-strong:  light-dark(#bcc3cc, #444d59);

  /* The only saturated colour in the system, and it means exactly one thing: we are listening. */
  --signal:       light-dark(#ae2b1f, #f08b7d);
  --signal-weak:  light-dark(#fbeceb, #37211e);

  /* What a person would actually reach for to mark up a transcript. */
  --marker:       light-dark(#f6e58a, #6b5c14);
  --marker-ink:   light-dark(#4a3d00, #fdf3c4);

  --alert:        light-dark(#8a5a12, #e0b366);
  --alert-weak:   light-dark(#faf1e0, #322813);
  --bad:          light-dark(#98241d, #f09088);
  --bad-weak:     light-dark(#fbeae9, #351f1d);
  --good:         light-dark(#2b5741, #86c2a4);
  --good-weak:    light-dark(#e8f0ec, #17281f);

  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans:  "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* One spacing scale, used everywhere. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;

  --gutter: 84px;            /* the timecode column — the product's spine */
  --measure: 68ch;           /* comfortable reading width for transcript prose */

  --lift:   light-dark(0 1px 2px rgb(21 24 29 / 5%), 0 1px 2px rgb(0 0 0 / 40%));
  --lift-2: light-dark(0 8px 28px rgb(21 24 29 / 10%), 0 10px 32px rgb(0 0 0 / 50%));
}

/* An explicit choice wins over the system preference. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

/* Spacing comes from `gap` on containers, never from element defaults — one system, one place to
   change it, and no surprise vertical rhythm from the user agent stylesheet. */
p, ul, ol, figure, blockquote { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--marker); color: var(--marker-ink); }

/* Visible keyboard focus everywhere, once, so nothing has to remember to add it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.014em; }
h1 { font-family: var(--serif); font-size: 1.65rem; line-height: 1.2; }
h2 { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }

/* The small-caps section label is a STYLE, not a heading level. Keeping the two apart is what lets
   the document keep a correct h1 → h2 outline while every section still looks like a filing tab. */
.label {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.4;
}

/* Screen-reader-only, for headings and labels the layout implies but the markup still needs. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A skip link that appears on focus, in CSS rather than inline event handlers. */
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 99;
  transition: top 120ms ease;
}
.skip:focus-visible { top: var(--s2); }

/* ── the timecode spine ─────────────────────────────────────────────────── */

.tc {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tc--lg { font-size: 0.86rem; color: var(--ink-2); }

/* ── shell ──────────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  position: sticky; top: 0; z-index: 30;
}
.masthead__in {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--s5);
  min-height: 62px; display: flex; align-items: center; gap: var(--s4);
}

.wordmark { display: flex; align-items: baseline; gap: 9px; text-decoration: none; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wordmark__name {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
}
.wordmark__tag {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--ink-4); text-transform: uppercase;
}

.grow { flex: 1 1 auto; min-width: 0; }

.shell { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.stack { display: grid; gap: var(--s5); }
.stack--tight { gap: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--wrap { flex-wrap: wrap; }
.row--baseline { align-items: baseline; }

.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.sm { font-size: 0.86rem; }
.xs { font-size: 0.76rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nums { font-variant-numeric: tabular-nums; }

/* ── the pitch: a shelf product should say what it is ───────────────────── */

.pitch {
  display: grid; gap: var(--s3);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}
.pitch__line {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.18; letter-spacing: -0.02em; max-width: 30ch;
  text-wrap: balance;
}
.pitch__sub { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* ── surfaces ───────────────────────────────────────────────────────────── */

.sheet {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}
.sheet__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
}
.sheet__body { padding: var(--s5); }
.sheet__body--flush { padding: 0; }
.sheet__foot {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s3);
}

.split { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) 316px; } }
/* Cards in the side column hug their content: a grid stretches its children by default, which left
   the first card padded out to the height of a 30-turn transcript. */
.split > * { align-self: start; }

/* ── controls ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 0.88rem; font-weight: 500;
  padding: 7px 13px; border-radius: var(--r);
  border: 1px solid var(--rule-strong);
  background: var(--card); color: var(--ink);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
.btn:hover { background: var(--paper-sunk); border-color: var(--ink-4); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-2); border-color: var(--ink-2); }

.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--paper-sunk); border-color: var(--rule); color: var(--ink); }

.btn--danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--rule)); }
.btn--danger:hover { background: var(--bad-weak); border-color: var(--bad); }

.btn--sm { padding: 4px 9px; font-size: 0.8rem; }

.field { display: grid; gap: 5px; }
.field > label { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); }

input[type="text"], input[type="url"], input[type="search"], select, textarea {
  font: inherit; width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
input:hover, select:hover { border-color: var(--ink-4); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 14%, transparent);
}
::placeholder { color: var(--ink-4); }

.errors { margin: 0; padding: 0; list-style: none; color: var(--bad); font-size: 0.82rem; }
.notice {
  padding: 9px 12px; border-radius: var(--r); font-size: 0.86rem;
  background: var(--alert-weak); color: var(--alert);
  border: 1px solid color-mix(in srgb, var(--alert) 25%, transparent);
}
.notice--bad { background: var(--bad-weak); color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 25%, transparent); }

/* ── search ─────────────────────────────────────────────────────────────── */

.finder { display: grid; gap: var(--s3); }
.finder__bar { position: relative; }
.finder__bar input {
  padding: 11px 40px 11px 38px; font-size: 1rem;
  border-radius: var(--r);
}
.finder__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); display: flex; pointer-events: none;
}
.finder__spin {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  display: none; color: var(--ink-3);
}
.htmx-request .finder__spin { display: flex; }

.modes { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--rule);
         border-radius: var(--r); background: var(--paper-sunk); }
.modes button {
  font: inherit; font-size: 0.8rem; font-weight: 500;
  padding: 4px 11px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.modes button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--lift); }
.modes button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── the ledger: meetings as a record, with the timecode spine ──────────── */

.ledger { display: grid; }

.entry {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr) auto;
  gap: 0 var(--s4);
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background 120ms ease;
}
.entry:last-child { border-bottom: 0; }
.entry:hover { background: var(--paper-sunk); text-decoration: none; }

/* The spine: a mono date column with a rule to its right, continuing down the page. */
.entry__when {
  border-right: 1px solid var(--rule);
  padding: 2px var(--s4) 2px var(--s4);
  display: grid; gap: 1px; align-content: start; text-align: right;
}
.entry__body { display: grid; gap: 3px; align-content: start; padding-top: 1px; }
.entry__title {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink);
}
.entry__title--code { font-family: var(--mono); font-size: 0.94rem; letter-spacing: -0.02em; }
.entry__facts { display: flex; flex-wrap: wrap; gap: 3px var(--s3); color: var(--ink-3); font-size: 0.82rem; }
.entry__facts b { font-weight: 500; color: var(--ink-2); }
.entry__side {
  display: flex; align-items: center; gap: var(--s3);
  justify-content: flex-end; align-self: start; padding-top: 3px;
}
.entry__note { font-size: 0.72rem; color: var(--ink-4); white-space: nowrap; }

/* ── state, said once ───────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper-sunk); color: var(--ink-2);
  white-space: nowrap;
}
.tag--live   { background: var(--signal-weak); color: var(--signal);
               border-color: color-mix(in srgb, var(--signal) 30%, transparent); }
.tag--alert  { background: var(--alert-weak); color: var(--alert);
               border-color: color-mix(in srgb, var(--alert) 28%, transparent); }
.tag--bad    { background: var(--bad-weak); color: var(--bad);
               border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.tag--good   { background: var(--good-weak); color: var(--good);
               border-color: color-mix(in srgb, var(--good) 26%, transparent); }

/* The recording light. Only ever shown while we are actually listening. */
.rec { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
       animation: rec 1.9s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* ── live strip ─────────────────────────────────────────────────────────── */

.live {
  display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) auto;
  gap: 0 var(--s4); align-items: center;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border: 1px solid color-mix(in srgb, var(--signal) 34%, var(--rule));
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--signal-weak), var(--card) 42%);
  text-decoration: none; color: inherit;
}
.live:hover { text-decoration: none; border-color: var(--signal); }
.live__when { border-right: 1px solid var(--rule); padding-right: var(--s4); text-align: right; }

/* ── the script: the transcript, and the signature of the product ──────── */

.script { display: grid; }

.turn {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: 0 var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.turn:first-child { border-top: 0; }
/* The masthead is sticky, so a link to a turn must land below it rather than under it. */
.turn { scroll-margin-top: 84px; }
.turn__tc {
  border-right: 1px solid var(--rule);
  padding-right: var(--s4);
  text-align: right;
  padding-top: 2px;
}
.turn__body { display: grid; gap: 4px; max-width: var(--measure); }
.turn__who {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-2);
}
/* Same person resuming after a pause: the name still appears — the pause earned it — but quieter, so
   the eye reads it as "still them" rather than as a new voice. */
.turn--same .turn__who { color: var(--ink-4); font-weight: 500; }
.turn__what { color: var(--ink); text-wrap: pretty; }
.turn--forming .turn__what { color: var(--ink-3); }
.turn--forming .turn__who::after {
  content: " · transcrevendo…"; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; color: var(--ink-4);
}

/* ── facts panel ────────────────────────────────────────────────────────── */

.facts { display: grid; }
.fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: 8px 0; border-bottom: 1px dotted var(--rule);
}
.fact:last-child { border-bottom: 0; }
.fact__k { font-size: 0.8rem; color: var(--ink-3); }
.fact__v { font-size: 0.88rem; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.fact__v--mono { font-family: var(--mono); font-size: 0.8rem; }

.who { display: grid; gap: var(--s2); }
.who__row { display: flex; align-items: center; gap: var(--s3); }
.who__name { font-size: 0.88rem; }
.who__bar { height: 3px; border-radius: 999px; background: var(--rule-strong); flex: none; }

/* ── log ────────────────────────────────────────────────────────────────── */

.log { list-style: none; margin: 0; padding: 0; display: grid; }
.log li {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--s3);
  padding: 6px 0; font-size: 0.84rem; align-items: baseline;
}
.log li + li { border-top: 1px dotted var(--rule); }
.log__when { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); }
.log li[data-level="warning"] .log__what { color: var(--alert); }
.log li[data-level="error"] .log__what { color: var(--bad); }

/* ── search results ─────────────────────────────────────────────────────── */

.hit { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule);
       display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); gap: 0 var(--s4); }
.hit:last-child { border-bottom: 0; }
.hit__when { border-right: 1px solid var(--rule); padding-right: var(--s4); text-align: right; }
.hit__body { display: grid; gap: var(--s2); min-width: 0; }
.hit__title {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 500;
  text-decoration: none;
}
.hit__title:hover { text-decoration: underline; text-decoration-color: currentColor; }

.passage {
  display: block; text-decoration: none; color: var(--ink-2);
  font-size: 0.9rem; line-height: 1.6;
  padding: var(--s2) var(--s3);
  border-left: 2px solid var(--rule-strong);
  background: var(--paper-sunk);
  border-radius: 0 var(--r) var(--r) 0;
  max-width: var(--measure);
}
.passage:hover { border-left-color: var(--ink-3); text-decoration: none; }
.passage__who { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-4); display: block; margin-bottom: 2px; }

mark { background: var(--marker); color: var(--marker-ink); border-radius: 2px; padding: 0 1px; }

/* ── empty ──────────────────────────────────────────────────────────────── */

.blank { padding: var(--s7) var(--s5); text-align: center; display: grid; gap: var(--s2); justify-items: center; }
.blank__mark { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
               text-transform: uppercase; color: var(--ink-4); }
.blank__line { font-family: var(--serif); font-size: 1.2rem; max-width: 34ch; text-wrap: balance; }
.blank__hint { color: var(--ink-3); font-size: 0.88rem; max-width: 44ch; text-wrap: pretty; }

/* ── charts ─────────────────────────────────────────────────────────────────
   Mark specs are fixed, not per-chart: thin marks, 4px rounded data-ends, a 2px
   surface gap doing the separating, hairline recessive axes. Identity on the
   timeline comes from the LANE and its label, never from hue — so the number of
   speakers is unbounded and the one saturated colour stays reserved for "recording".
   ───────────────────────────────────────────────────────────────────────────── */

.chart { display: grid; gap: var(--s2); }

/* KPI row. Five values are a row of tiles, not a chart. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg);
         overflow: hidden; }
.tile { background: var(--card); padding: var(--s3) var(--s4); display: grid; gap: 1px; }
.tile__v { font-size: 1.32rem; line-height: 1.15; font-variant-numeric: tabular-nums;
           letter-spacing: -0.02em; }
.tile__v small { font-size: 0.72rem; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.tile__k { font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }

/* Activity: one series over discrete days → thin columns, one hue, no legend. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.spark__col {
  flex: 1 1 0; min-width: 2px; max-width: 14px;
  background: var(--ink-2);
  border-radius: 2px 2px 0 0;            /* rounded data-end, square at the baseline */
  transition: background 120ms ease;
}
/* A day with no meetings shows NOTHING. A 2px stub for zero reads as a small value, which is a lie
   the floor line already tells better. */
.spark__col[data-has="0"] { background: transparent; }
.spark__col[data-has="1"] { min-height: 3px; }
.spark__col:hover { background: var(--ink); }
.spark__floor { height: 1px; background: var(--rule); }

/* Speaker timeline: one lane per person; position and label carry identity. */
.tl { display: grid; gap: var(--s2); }
.tl__axis { display: flex; position: relative; height: 13px; }
.tl__tick { position: absolute; transform: translateX(-1px); padding-left: 4px;
            border-left: 1px solid var(--rule); }
.tl__lane { display: grid; grid-template-columns: 108px minmax(0, 1fr) 54px; gap: var(--s3);
            align-items: center; }
.tl__name { font-size: 0.78rem; color: var(--ink-2); overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.tl__track { position: relative; height: 12px; border-radius: 2px;
             background: var(--paper-sunk); box-shadow: inset 0 0 0 1px var(--rule); }
.tl__band {
  position: absolute; top: 0; bottom: 0;
  background: var(--ink-2);
  border-radius: 2px;
  /* The 2px separation is done by the surface showing through, not by a stroke. */
  box-shadow: 0 0 0 1.5px var(--card);
}
.tl__band:hover { background: var(--ink); }
.tl__share { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3);
             font-variant-numeric: tabular-nums; text-align: right; }

/* A meter reads a ratio against its own track — same ramp, lighter step. */
.meter { height: 5px; border-radius: 999px; background: var(--paper-sunk);
         box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.meter__fill { height: 100%; background: var(--ink-3); border-radius: 999px; }

@media (max-width: 640px) {
  .tl__lane { grid-template-columns: 82px minmax(0, 1fr) 44px; gap: var(--s2); }
  .tile__v { font-size: 1.15rem; }
}

/* ── the door ───────────────────────────────────────────────────────────────
   One decision on the page, so the page is one card and nothing else. Narrow measure, generous air:
   the same "more air, not more colour" correction the direction commits to, applied where a first
   impression happens. */

.gate { display: grid; gap: var(--s4); justify-items: center; padding-top: clamp(var(--s5), 8vh, var(--s8)); }
.gate__card { width: min(430px, 100%); }
.gate__title {
  font-family: var(--serif); font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-weight: 500;
  line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; margin: 0;
}
.gate__sub { color: var(--ink-2); font-size: 0.92rem; text-wrap: pretty; margin: 0; }
.gate__foot { text-align: center; max-width: 46ch; text-wrap: pretty; }

.btn--wide { width: 100%; justify-content: center; }

/* ── who is signed in ───────────────────────────────────────────────────────
   `<details>` rather than a scripted dropdown: it opens, closes, takes focus and works with the
   keyboard without a line of JavaScript, and this menu holds two facts and one button. */

.who-menu { position: relative; }
.who-menu__button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--card);
  padding: 3px 9px 3px 4px; list-style: none; max-width: 240px;
}
.who-menu__button::-webkit-details-marker { display: none; }
.who-menu__button:hover { border-color: var(--rule-strong); }
.who-menu__initial {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: var(--r-sm); background: var(--paper-sunk); color: var(--ink-2);
  font-family: var(--mono); font-size: 0.7rem;
}
.who-menu__where {
  font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.who-menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  display: grid; gap: var(--s2); min-width: 232px; padding: var(--s3);
  border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--card);
  box-shadow: var(--lift-2);
}
.who-menu__email { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); margin: 0;
  word-break: break-all; }
.who-menu__line { display: flex; align-items: center; gap: var(--s2); font-size: 0.84rem; margin: 0; }
.who-menu__line .stamp { margin-left: auto; }

@media (max-width: 640px) { .who-menu__where { display: none; } }

/* ── misc ───────────────────────────────────────────────────────────────── */

.pager { display: flex; gap: var(--s3); justify-content: center; align-items: center;
         padding: var(--s4); }

.toasts { position: fixed; right: var(--s4); bottom: var(--s4); display: grid; gap: var(--s2); z-index: 60;
          max-width: min(400px, calc(100vw - 32px)); }
.toast { padding: 10px 13px; border-radius: var(--r); background: var(--card);
         border: 1px solid var(--rule-strong); box-shadow: var(--lift-2); font-size: 0.88rem; }
.toast--error { border-color: var(--bad); color: var(--bad); }
.toast--success { border-color: var(--good); color: var(--good); }
.toast--warning { border-color: var(--alert); color: var(--alert); }

dialog {
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); box-shadow: var(--lift-2);
  padding: 0; width: min(520px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(21 24 29 / 42%); backdrop-filter: blur(3px); }

.stamp {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 2px 7px; background: var(--card); white-space: nowrap;
}

.theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink-3); cursor: pointer;
}
.theme:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme__sun { display: none; }
.theme__moon { display: block; }
@media (prefers-color-scheme: dark) { .theme__sun { display: block; } .theme__moon { display: none; } }
:root[data-theme="dark"]  .theme__sun  { display: block; }
:root[data-theme="dark"]  .theme__moon { display: none; }
:root[data-theme="light"] .theme__sun  { display: none; }
:root[data-theme="light"] .theme__moon { display: block; }

.spin { animation: spin 850ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spin, .rec { animation: none; }
  * { transition-duration: 1ms !important; }
}

@media (max-width: 640px) {
  :root { --gutter: 74px; }
  .shell { padding: var(--s5) var(--s4) var(--s7); }
  .masthead__in { padding: 0 var(--s4); gap: var(--s3); min-height: 56px; }
  .wordmark__tag { display: none; }
  .wordmark__name { font-size: 1rem; }
  .tc { font-size: 0.7rem; }
  .tc--lg { font-size: 0.76rem; }
  .entry, .live, .hit { grid-template-columns: var(--gutter) minmax(0, 1fr); }
  .entry__when { padding-left: var(--s2); padding-right: var(--s3); }
  .hit__when, .live__when { padding-right: var(--s3); }
  .turn { grid-template-columns: 52px minmax(0, 1fr); }
  .turn__tc { padding-right: var(--s3); }
  /* The state note moves under the facts instead of claiming its own column. */
  .entry__side { grid-column: 2; justify-content: flex-start; padding-top: var(--s1); }
  .split { gap: var(--s4); }
  .btn { padding: 7px 11px; }
}
@media (max-width: 420px) {
  .masthead .btn span,
  .masthead .btn { font-size: 0.84rem; }
}