/* Components — "Swiss Journal" (design-system spec §5). Mobile-first.
   Class prefixes: c- chrome/app, rv- review apparatus (emitted by the
   renderer transform), t- typography utilities, u- shared utilities. */

/* --- Utilities ------------------------------------------------------- */
.u-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-scroll-x { overflow-x: auto; }

/* --- Typography utilities (§2.2) -------------------------------------- */
.t-hero { font-size: var(--text-hero-size); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.t-title { font-size: var(--text-title-size); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.t-title--sm { font-size: min(var(--text-title-size), 34px); }
.t-section { font-size: var(--text-section-size); font-weight: 600; color: var(--ink); }
.t-subsection { font-size: var(--text-subsection-size); font-weight: 600; color: var(--ink); }
.t-body { font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.t-ui { font-size: var(--text-ui-size); }
.t-refs { font-size: var(--text-refs-size); line-height: var(--text-refs-lh); }
.t-meta { font-size: var(--text-meta-size); color: var(--muted); }
.t-kicker { font-size: var(--text-kicker-size); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.t-mono { font: var(--text-mono); }

/* --- Chrome (§5.1) ---------------------------------------------------- */
.c-skip {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 16px;
  z-index: 100;
}
.c-skip:focus { left: var(--gutter); }

.c-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule-strong); /* full-width ink rule (bundle) */
}
.c-wordmark {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.c-wordmark .dot { color: var(--accent); font-size: 1.3em; line-height: 0; }
.c-nav-right { display: flex; align-items: center; gap: 20px; }
.c-nav-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.c-nav-link[aria-current="page"] { border-bottom: 2px solid var(--accent); }

.c-account { position: relative; }
.c-account summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.c-account summary::-webkit-details-marker { display: none; }
.c-account-icon { display: inline-block; }
.c-account-icon .head {
  display: block;
  width: 8px; height: 8px;
  background: var(--ink);
  margin: 0 auto 2px;
}
.c-account-icon .torso {
  display: block;
  width: 20px; height: 10px;
  background: var(--ink);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.c-account-panel {
  position: absolute;
  right: 0; top: 100%;
  min-width: 180px;
  max-width: calc(100vw - 2 * var(--gutter));
  background: var(--surface);
  border: 1px solid var(--ink);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

.c-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px var(--gutter) 48px;
}
/* Container-width modifiers: results content column (bundle 5a) and the
   share/sample centered container (bundle 5e). */
.c-main--results { max-width: 1060px; }
.c-main--public { max-width: 900px; }
.c-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  padding: 16px var(--gutter);
  font-size: var(--text-meta-size);
}

/* --- Controls (§5.2) --------------------------------------------------- */
/* Bundle 6a/7a: the primary button carries no border and no line-height of
   its own; the phone tap floor lives on the BORDER box (deviation §13-B.6)
   and lifts at ≥700px, where the bundle's natural height (~43px) stands. */
.c-btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: normal;
  text-transform: uppercase;
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
}
.c-btn:hover { background: var(--accent); }
.c-btn:disabled { background: var(--disabled); border-color: var(--disabled); cursor: not-allowed; }
.c-btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.c-btn--secondary:hover { background: var(--ink); color: var(--bg); }
.c-btn--danger { background: transparent; color: var(--error); border: 1px solid var(--error); }
.c-btn--danger:hover { background: var(--error); color: var(--bg); }

/* Compact nav CTA (bundle 7a "Join beta": ~31px visual). The ::after overlay
   extends the phone hit area back to 44px without any visual change. */
.c-nav .c-btn {
  position: relative;
  display: inline-flex;
  font-size: 11px;
  font-weight: 400; /* bundle 7a: the nav CTA inherits the nav's 400/0.14em */
  letter-spacing: 0.14em;
  padding: 8px 14px;
  min-height: 0;
  white-space: nowrap;
}
.c-nav .c-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.c-linkbutton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.c-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--ink);
  padding: 10px 14px;
  font: inherit;
  line-height: normal;
  color: var(--body);
}
.c-field--error { border-color: var(--error); }
.c-field-error { color: var(--error); font-weight: 600; font-size: 13px; }

/* Phone-first ≥44px hit areas (spec §5.2, deviation §13-B.6) — chrome and
   controls only, never .review-body content. Border-box so the floor is the
   rendered height (these selectors carry no padding/border — no visual
   change). The .c-btn floor lives in its own rule above. */
.c-nav a, .c-nav summary, .c-linkbutton, .c-table a, .c-filelist a,
.c-share summary, .c-review-meta a {
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (min-width: 700px) {
  .c-nav a, .c-linkbutton, .c-table a, .c-filelist a,
  .c-share summary, .c-review-meta a {
    min-height: 0;
    display: inline;
  }
  .c-btn { min-height: 0; }
}

/* --- Indicators (§5.3) -------------------------------------------------- */
.c-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: normal;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 3px 8px;
}
.c-badge--pending { color: var(--muted); }
.c-badge--running {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.c-badge--completed { color: var(--ink); }
.c-badge--error { color: var(--error); }
@media (prefers-color-scheme: dark) {
  /* dark mode: outline style, no accent fill (spec §2.1 --on-accent row) */
  .c-badge--running { color: var(--accent); background: transparent; border-color: var(--accent); }
}

.c-alert {
  border: 1px solid var(--error);
  background: var(--error-tint);
  padding: 14px 16px;
}
.c-alert-title { color: var(--error); font-weight: 600; }
.c-alert-strong { color: var(--ink); font-weight: 600; }
.c-notice {
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--muted);
  padding: 12px 16px;
}

.c-kicker {
  font-size: var(--text-kicker-size);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.c-kicker--accent { color: var(--accent); }
.c-kicker--error { color: var(--error); }
.c-newreview { max-width: 640px; }
.c-newreview .c-btn { margin-top: 12px; }
.c-kicker .sq {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--accent);
  vertical-align: middle;
  margin: 0 6px;
}

/* Payment picker (pricing spec §9; closes new-review-payment-fieldset-unstyled) */
.c-payment {
  border: 1px solid var(--rule);
  padding: 12px 16px;
  margin: 16px 0;
}
.c-payment legend { padding: 0 4px; }
.c-payment-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.c-payment-option--disabled { opacity: .5; }

/* --- Dashboard (§5.4) ---------------------------------------------------- */
.c-dash-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}
/* Status-count kicker sits ABOVE the title (bundle 6a): 6px to the title,
   whose default margins are dropped. */
.c-dash-header .c-kicker { margin: 0 0 6px; }
.c-dash-header .t-title { margin: 0; }
.c-dash-actions { display: flex; align-items: center; gap: 20px; }
.c-dash-footnote { margin-top: 16px; }

/* Balance (dashboard only, bundle 6a): two-tone — normal-case muted label,
   ink 600 amount (tabular numerals come from the body). new_review/credits
   keep the uppercase kicker treatment instead. */
.c-balance { font-size: 12px; color: var(--muted); }
.c-balance strong { font-weight: 600; color: var(--ink); }

/* Table: stacked entries on phone (base), real table ≥700px. */
.c-table { width: 100%; border-collapse: collapse; }
.c-table thead { display: none; }
.c-table tr {
  display: block;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}
.c-table td { display: block; padding: 2px 0; }
.c-table-no { color: var(--muted); font-size: var(--text-meta-size); }
.c-table-topic { font-weight: 500; }
/* Topic links (bundle 6a): ink, no underline at rest or hover; completed
   rows carry a persistent --disabled-colored underline (the status hook is
   the anchor's modifier class in partials/review_list.html). */
.c-table-topic a { color: var(--ink); text-decoration: none; }
.c-table-topic a.c-table-link--completed {
  text-decoration: underline;
  text-decoration-color: var(--disabled);
}
.c-table-created { color: var(--muted); font-size: var(--text-meta-size); }
.c-table-action form { margin: 0; }
.c-table .c-linkbutton { font-size: 12px; }

@media (min-width: 700px) {
  .c-table thead { display: table-header-group; }
  .c-table tr { display: table-row; padding: 0; }
  .c-table td, .c-table th { display: table-cell; padding: 10px 8px; }
  .c-table thead tr { border-bottom: 0; }
  .c-table thead th {
    text-align: left;
    /* Bundle 6a header row: ink rule ABOVE it, --disabled rule below. */
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--disabled);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .c-table { table-layout: fixed; }
  th.c-table-no, td.c-table-no { width: 56px; }
  th.c-table-status, td.c-table-status { width: 150px; }
  th.c-table-created, td.c-table-created { width: 130px; }
  th.c-table-action, td.c-table-action { width: 90px; }
  .c-table-topic {
    font-weight: 400;      /* phone stacked entries keep 500 (bundle 6d) */
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  td.c-table-created { font-size: 14px; } /* phone entries keep the meta size */
}

/* --- Empty state (§5.3) ------------------------------------------------- */
.c-empty { text-align: center; padding: 64px 0; }
.c-empty p { color: var(--muted); }

/* --- Review view chrome (§6.2) ------------------------------------------- */
/* Title block: kicker · title · meta row, closed by the full-width ink rule.
   Sticky + scroll-hidden on tablet/phone (§5.1/§7); static on desktop. */
.c-review-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 32px;
}
.c-review-header .c-kicker { margin: 0 0 8px; }
.c-review-header .t-title { margin: 0 0 12px; max-width: 24ch; }
/* Desktop rhythm (bundle 5a/5e): header is static and breathes more; the
   compact values above stand below 1080px, where the header is sticky. */
@media (min-width: 1080px) {
  .c-review-header {
    position: static;
    padding-bottom: 28px;
    margin-bottom: 40px;
  }
  .c-review-header .c-kicker { margin-bottom: 14px; }
  .c-review-header .t-title { margin-bottom: 18px; }
}

/* The ONLY transition in the system lives on [data-scrollhide] (tokens.css
   note); its reduced-motion override is re-asserted here because this file
   loads after tokens.css. */
[data-scrollhide] { transition: transform 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-scrollhide] { transition: none; }
}

/* Meta row: fragments separated by middots; each fragment is conditional
   on its datum (spec §6.2/§9.8). */
.c-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Bundle 5a/5e: plain 28px gaps between the fragments, no separators. */
  column-gap: 28px;
  row-gap: 4px;
}
/* Share/Download render ink underlined, not accent (bundle 5a/5e). */
.c-review-meta a { color: var(--ink); }

/* Share panel: <details class="c-share js-dismissible"> in the meta row. */
.c-share { position: relative; }
.c-share summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.c-share summary::-webkit-details-marker { display: none; }
.c-share-panel {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 280px;
  max-width: calc(100vw - 2 * var(--gutter));
  background: var(--surface);
  border: 1px solid var(--ink);
  padding: 12px 16px;
  z-index: 10;
  font-size: var(--text-ui-size);
  color: var(--body);
}
.c-share-panel p { margin: 0 0 8px; }
.c-share-actions { display: flex; gap: 20px; margin-top: 8px; }
.c-share-actions form { margin: 0; }

/* Files list (§6.2): name as accent link + right-aligned size, faint rules.
   The header renders as the bundle's label treatment but STAYS a heading in
   the DOM (a11y decision: restyle, don't demote). */
/* Bundle 5a/5e: the Files block sits in an ink border-top box, 66ch-ish. */
.c-filelist-section {
  margin: 44px 0 0;
  border-top: 1px solid var(--rule-strong);
  padding-top: 22px;
  max-width: 560px;
}
.c-filelist-section h2 {
  margin: 0;
  font-size: var(--text-kicker-size);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.c-filelist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.c-filelist li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-faint);
}
.c-filelist-size { color: var(--muted); font-size: var(--text-meta-size); }

.c-review-retry { margin: 16px 0 32px; }
.c-review-actions { margin-top: 48px; }
.c-review-actions form { margin: 0; }

/* --- Review body & margin apparatus (rv-*, spec §4/§6) --------------------
   SCREEN LAYOUT ONLY — the prose typography numbers (sizes/line-heights/
   measures) live in review.css, as does @media print (plan Task 12 split;
   the Task-24 gate enforces it). Markup shapes are the transform's
   (reviews/transform.py): every top-level block is a div.rv-row; numbered
   headings carry span.rv-num INSIDE the h2/h3; each citing row appends one
   div.rv-apparatus[role=note]. */

/* Rows: single column on phone; margin column + text ≥700px (§4/§7). */
.rv-row { display: grid; grid-template-columns: 1fr; }
.rv-row > * { min-width: 0; }              /* grid children must shrink */
.rv-row > pre { overflow-x: auto; }        /* wide content scrolls in-cell */
.rv-row > table { display: block; overflow-x: auto; }

/* Citation marks: superscript accent numerals (§4). */
.rv-cite { line-height: 0; }
.rv-cite a {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
}

/* Section numerals: accent, tabular (global), 400 per bundle — the
   apparatus and trace-card numerals below stay 600. Sizes SCALE with the
   layout context (bundle: 30px desktop / 26px tablet / 20px phone-inline /
   16px landing card — 5a/5c/5d/7a). */
.rv-h .rv-num { color: var(--accent); font-weight: 400; }
/* Phone (base): numeral inline before the heading on the shared baseline
   (bundle 5d) — 20px, with space + margin ≈ the bundle's 12px gap. The
   hairline is KEPT at phone: a block ::after on the heading itself, below
   the heading row (an ::after inside the inline span would split the line
   box). 36px, ink for sections / --rule for subsections. */
.rv-h-section .rv-num { font-size: 20px; margin-right: 7px; }
.rv-h-subsection .rv-num { font-size: 17px; margin-right: 7px; }
.rv-h-section::after,
.rv-h-subsection::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin-top: 10px;
  background: var(--rule);
}
.rv-h-section::after { background: var(--rule-strong); }

/* Apparatus — phone (base): in-flow block under the citing block:
   hairline-top, rows of "numeral + author-year", 12px (§4 phone collapse). */
.rv-apparatus {
  border-top: 1px solid var(--rule);
  margin: 4px 0 16px;
  padding-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.rv-apparatus-entry { margin: 2px 0; }
.rv-apparatus .rv-num { color: var(--accent); font-weight: 600; }

@media (min-width: 700px) {
  .rv-row { grid-template-columns: 110px 1fr; column-gap: 28px; }
  .rv-row > * { grid-column: 2; }

  /* Apparatus moves into the margin column, right-aligned, 11px muted
     with the accent numeral on its own line above each entry (§4). */
  .rv-row > .rv-apparatus {
    grid-column: 1;
    grid-row: 1;
    border-top: 0;
    margin: 0;
    padding-top: 8px;      /* optical alignment with the citing block */
    text-align: right;
    font-size: 11px;
  }
  .rv-apparatus-entry { margin: 0 0 12px; }
  .rv-apparatus .rv-num { display: block; }

  /* Numbered headings span both columns and mirror the row grid, so the
     numeral (explicit column 1) sits right-aligned in the margin and the
     heading text (anonymous grid item) starts in the text column. The only
     plain .rv-h heading left (§6.1.2 v7) is the References label — it gets
     the margin rule below. The phone inline treatment is undone here. */
  .rv-row > .rv-h-section, .rv-row > .rv-h-subsection {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 28px;
  }
  .rv-h-section::after, .rv-h-subsection::after { content: none; }
  /* line-height 1 + padding-top put the numeral's CAP TOP flush with the
     heading's cap top (Johannes, 2026-07-17 — bundle placement). Computed
     from Instrument Sans metrics (ascent .970 / descent .250 / cap .720):
     capTop = pad + (lh − 1.22·size)/2 + .25·size; the 22px/1.75 heading's
     cap top sits 11.33px below the cell top → 26px numeral pads 8px, 30px
     pads 7px; the 17px subsection numeral equals its heading size, where
     cap-flush ≡ center → 6px. */
  .rv-h .rv-num {
    grid-column: 1;
    text-align: right;
    line-height: 1;
    margin-right: 0;
    padding-top: 6px;
  }
  .rv-h-section .rv-num { font-size: 26px; padding-top: 8px; }   /* bundle 5c */
  /* Rule beneath the numeral (36px at tablet per 5c): ink for sections,
     --rule for subs. */
  .rv-h .rv-num::after {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    margin: 8px 0 0 auto;
    background: var(--rule);
  }
  .rv-h-section .rv-num::after { background: var(--rule-strong); }
  /* References label row (bundle 5a/5e): a short right-aligned ink rule in
     the margin column beside the label — same mirrored-grid trick. The
     rv-references row class scopes it to the label row only. */
  .rv-references > .rv-h {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 110px 1fr;
    column-gap: 28px;
  }
  .rv-references > .rv-h::before {
    content: "";
    grid-column: 1;
    justify-self: end;
    align-self: start;
    width: 36px;
    height: 1px;
    margin-top: 5px;   /* ~4px below the label's top edge per mock (56/52) */
    background: var(--rule-strong);
  }
}

@media (min-width: 1080px) {
  .rv-row { grid-template-columns: 200px 1fr; column-gap: 40px; }
  .rv-row > .rv-h-section, .rv-row > .rv-h-subsection,
  .rv-references > .rv-h {
    grid-template-columns: 200px 1fr;
    column-gap: 40px;
  }
  /* Desktop numeral: 30px (bundle 5a) → pad 7px keeps the cap tops flush
     (see the ≥700 formula). Rules widen to the bundle's 48px; the section
     rule sits 10px under its numeral (5a), the subsection one keeps 8px. */
  .rv-h-section .rv-num { font-size: 30px; padding-top: 7px; }
  .rv-h .rv-num::after { width: 48px; }
  .rv-h-section .rv-num::after { margin-top: 10px; }
  .rv-references > .rv-h::before { width: 48px; }
  /* Share/sample views (900px container, bundle 5e): narrower margin column. */
  .c-main--public .rv-row,
  .c-main--public .rv-row > .rv-h-section,
  .c-main--public .rv-row > .rv-h-subsection,
  .c-main--public .rv-references > .rv-h { grid-template-columns: 160px 1fr; }
}

/* Compact variant (landing sample card, §7): container-scoped, NOT a media
   query — the card keeps a MINIATURE margin apparatus at every viewport
   (bundle 7a): 64px margin column + 16px gap, 16px numeral over a 24px ink
   rule, 9/9.5px apparatus entries right-aligned in the margin. Placed after
   the media blocks so equal-specificity ties resolve to it; every value is
   restated because at <700px the base (phone) layout never defines the
   grid. */
.rv--compact .rv-row,
.rv--compact .rv-row > .rv-h-section,
.rv--compact .rv-row > .rv-h-subsection {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
}
.rv--compact .rv-row > * { grid-column: 2; }
.rv--compact .rv-row > .rv-h-section,
.rv--compact .rv-row > .rv-h-subsection { grid-column: 1 / -1; }
.rv--compact .rv-row > .rv-apparatus {
  grid-column: 1;
  grid-row: 1;
  border-top: 0;
  margin: 0;
  padding-top: 2px;    /* optical: mock cell pads sit 2px under the text's */
  text-align: right;
  font-size: 9.5px;
}
.rv--compact .rv-apparatus-entry { margin: 0 0 8px; }
.rv--compact .rv-apparatus .rv-num { display: block; font-size: 9px; }
.rv--compact .rv-h .rv-num {
  grid-column: 1;
  text-align: right;
  font-size: 16px;
  line-height: 1;
  margin-right: 0;
  padding-top: 2px;    /* cap top flush with the 13px/1.35 card heading */
}
.rv--compact .rv-h .rv-num::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin: 6px 0 0 auto;
  background: var(--rule-strong);
}
.rv--compact .rv-h-section::after,
.rv--compact .rv-h-subsection::after { content: none; }

/* Claim-trace card (§4 — FUTURE, roadmap items 5/6): the CSS component
   ships now, rendered in the styleguide only; no live trace UI in v1. */
.rv-trace-card {
  border: 1px solid var(--accent);
  background: var(--surface);
  max-width: 260px;
  padding: 12px 14px;
  text-align: left;
}
.rv-trace-card .rv-num { color: var(--accent); font-weight: 600; }
.rv-trace-claim { color: var(--ink); font-size: 11px; margin: 8px 0 0; }
.rv-trace-quote {
  color: var(--muted);
  font-size: 10px;
  border-top: 1px solid var(--rule);
  margin: 8px 0 0;
  padding-top: 6px;
}
.rv-trace-card a { font-size: 11px; }
/* Claim-highlight: the supported passage. The `0 1px 0` shadow below is the
   ONE sanctioned shadow in the system (spec §2.3 exception — a border
   substitute, not a real shadow). */
.rv-trace-highlight {
  background: var(--accent-tint);
  box-shadow: 0 1px 0 var(--accent);
}

/* --- Forced colors (§8.3) ------------------------------------------------ */
@media (forced-colors: active) {
  .c-account-icon .head, .c-account-icon .torso {
    background: CanvasText;
    forced-color-adjust: none;
  }
  :focus-visible { outline-color: Highlight; }
}

/* --- Public chrome + banner (§5.1) --- */
/* Public bar reuses .c-nav; the persistent "What is this?" link is
   kicker-styled per bundle 5e (11px, 0.14em tracking, uppercase, accent,
   underlined). */
.c-public-link {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Dismissible share banner (bundle 5e): baseline flex row on --banner-tint,
   hairline-bottom, full-width under the nav; copy 13px muted with a
   600-weight ink lead-in; Read more → is a normal accent link. */
.c-banner {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--banner-tint);
}
/* The dismissed banner is rendered hidden, not omitted, so the header
   "What is this?" link can re-open it in place (§13-B.5 reversal). The
   author-level display:flex above would otherwise beat the UA [hidden]. */
.c-banner[hidden] { display: none; }
.c-banner p {
  margin: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.c-banner strong { font-weight: 600; color: var(--ink); }
/* Dismiss ✕: link-button semantics, muted quiet treatment per the bundle. */
.c-banner .c-linkbutton {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
}

/* --- Progress log (§5.5) --- */
/* Header line: badge + "Started 14:32 · elapsed 18 min" (muted, tabular). */
.c-progress-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.c-progress-title { margin: 0; max-width: 30ch; }
/* The as-entered prompt, shown under the short title on the progress page
   (roadmap item 12, user issue 1): quiet, full text, never the h1. */
.c-progress-prompt {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 820px;
}
.c-progress-reassure {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
}
.c-progress-cancel { margin-top: 24px; }
.c-progress-cancel form { margin: 0 0 8px; }
.c-progress-conn { margin-top: 24px; }
.c-progress-terminal { margin-top: 24px; max-width: 640px; }
.c-progress-terminal .c-progress-retry { margin: 16px 0 8px; }

/* The log: ink rule on top; milestone separators --rule, domain separators
   --rule-faint (bundle "Progress running"). Dimmed while the live connection
   is down (9c) — progress.js sets aria-busy only pre-terminal. */
.c-log {
  margin-top: 36px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 6px;
  max-width: 820px;
}
.c-log[aria-busy="true"] { opacity: 0.55; }

/* Squares are DECORATION (8px; state always travels in the .u-vh words):
   filled accent = completed/milestone, outlined accent = running, outlined
   --rule = planned/stopped/phase footer (§5.5 + declared deviation §13-B.2). */
.c-log-sq {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.c-log-sq--done { background: var(--accent); }
.c-log-sq--running { border: 1px solid var(--accent); }
.c-log-sq--idle { border: 1px solid var(--rule); }

/* Milestone rows: 600 text, right-aligned muted timestamp, --rule hairline. */
.c-log-row--milestone {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.c-log-row--milestone .c-log-msg {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Domain rows: indented under the milestones, --rule-faint separators. */
.c-log-row--domain {
  padding: 12px 0 4px 22px;
  border-bottom: 1px solid var(--rule-faint);
}
.c-log-domainline {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.c-log-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.c-log-meta {
  flex: 1;
  font-size: 12px;
  color: var(--muted);
}
.c-log-ts {
  font-size: 11px;
  color: var(--muted);
}

/* L-connected child line (≤1 per domain): border-left + border-bottom corner
   glyph (bundle #C7C9C5 = --disabled), 12px mono muted. */
.c-log-child {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 0 6px 3px;
}
.c-log-elbow {
  width: 8px;
  height: 10px;
  border-left: 1px solid var(--disabled);
  border-bottom: 1px solid var(--disabled);
  flex-shrink: 0;
  position: relative;
  top: 2px;
}
.c-log-childtext { color: var(--muted); }

/* Legacy/unknown replayed events: muted plain rows (spec §9.2 disposition). */
.c-log-row--other {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 13px;
  color: var(--muted);
}
.c-log-row--other .c-log-msg { flex: 1; }

/* Empty-log row (§5.5/§9.8): no square, removed when the first row lands. */
.c-log-row--empty {
  padding: 12px 0;
  font-size: 13px;
  color: var(--muted);
}

/* Next-step footer (bundle 9a): accent-outlined square + Next-step preview;
   text is REPLACED by a new phase (announced via the status element — it sits
   outside the log). */
.c-log-phase {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 820px;
}
/* Same author-display-beats-UA-[hidden] trap as .c-banner: the phase footer
   is rendered hidden until the first phase event arrives. */
.c-log-phase[hidden] { display: none; }
.c-log-phase .c-log-sq { top: 0; }

/* Forced colors (§8.3): background fills are stripped, so the FILLED square
   needs an explicit 1px border to stay visible; state words carry meaning. */
@media (forced-colors: active) {
  .c-log-sq--done { border: 1px solid CanvasText; }
}

/* --- Landing (§9.6/§10) ---------------------------------------------------
   Bundle 7a: copy column + framed excerpt card, side by side ≥1080px
   (1fr + 420px, 72px gap), stacked in source order below. The card is the
   trust move — the artifact argues before the marketing does. */
.c-landing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 48px 0 64px;
  max-width: 1144px;
}
@media (min-width: 1080px) {
  .c-landing {
    grid-template-columns: 1fr 420px;
    gap: 72px;
    padding-top: 88px;
    padding-bottom: 96px;
  }
}
.c-landing-copy .t-hero { max-width: 18ch; margin: 0; }
.c-landing-copy .c-kicker { margin: 0 0 20px; }
.c-landing-lede {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.75;
  max-width: 56ch;
}
.c-landing-copy .t-hero + .c-landing-lede { margin-top: 32px; }
.c-landing-beta {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.7;
  max-width: 56ch;
  font-style: italic;
  color: var(--muted);
}
.c-landing-ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.c-landing-ctas a:not(.c-btn) { font-size: 14px; }
.c-landing-copy .c-btn { padding: 14px 26px; } /* hero CTA (bundle 7a) */

/* Sample-review excerpt card: 1px --rule frame on --surface; title over an
   ink hairline; compact apparatus body (rv--compact, container-scoped);
   hairline-top footer with the "read in full →" link. */
.c-sample-card {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 32px 32px 28px;
  align-self: start;
}
.c-sample-card .c-kicker { margin: 0 0 10px; }
.c-sample-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 14px;
}
/* Compact typography for the excerpt: the card is a miniature, not a page —
   the .review-body page numbers (review.css) are not loaded on the landing. */
.c-sample-card .review-body { margin-top: 18px; }
.c-sample-card .review-body p {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--body);
}
.c-sample-card .review-body .rv-h {
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 10px;
}
.c-sample-card .rv-cite a { font-size: 8px; }
.c-sample-card-foot {
  border-top: 1px solid var(--rule);
  margin: 18px 0 0;
  padding-top: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Derived screens (§10) ------------------------------------------------
   ONLY the auth-column layout helper and the credits-table tweaks live here;
   everything else on the derived screens reuses the §5 components above
   (§10 closing rule: a derived screen needing a new token/component is a
   spec bug to raise, never a local invention). */

/* Auth column (login/register): narrow centered form column, no card box,
   single column at ALL widths — deliberately no media queries. */
.c-authcol { max-width: 400px; margin: 16px auto 0; }
.c-authcol .t-title--sm { margin-bottom: 24px; }
.c-authcol .c-label { margin-top: 20px; }
.c-authcol form .c-btn { margin-top: 24px; }
.c-authcol .t-meta { margin: 6px 0 0; }

/* Credits transactions table (§5.4 derived, No.-less): phone = date+kind on
   one line with the delta right-aligned, note wrapping below; ≥700px = the
   standard c-table columns. The explicit "+" on positive deltas comes from
   the template. The date column reuses .c-table-created (muted meta, 130px). */
.c-table--credits tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
}
.c-table--credits .c-table-delta { margin-left: auto; }
.c-table--credits .c-table-note {
  flex-basis: 100%;
  color: var(--muted);
}
@media (min-width: 700px) {
  .c-table--credits tr { display: table-row; }
  .c-table--credits .c-table-delta { margin-left: 0; }
  th.c-table-kind, td.c-table-kind { width: 110px; }
  th.c-table-delta, td.c-table-delta { width: 90px; }
}