/*
THESIS: A receipt is the article itself, read once, with every claim lit in place. It refuses the stack of identical claim cards.
OWN-WORLD: pitch.html's paper. #f6f5f0 ground, white cards on #d9d6cc hairlines, Archivo expanded 800 for headings, Source Serif 4 for reading, JetBrains Mono for data. Status is a highlighter fill plus its own underline: solid green, double red, dashed yellow, dotted grey, hatched for no automated status.
STORY: The visitor reads the verdict in one line, reads the page with its claims lit, taps a mark, and gets the quote and source behind it.
FIRST VIEWPORT: Home: the tagline at display size, a serif lede, an ink-ruled paste box with a phosphor-on-ink button, the example receipt below. Receipt: source line, title, the scorecard (count sentence, bar, share), filter chips, then the article.
FORM: Pinned by the brief (pitch.html). No concept roll.
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance
*/

@font-face {
  font-family: "Archivo";
  src:
    url("/fonts/Archivo-Variable.woff2") format("woff2"),
    url("/fonts/Archivo-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src:
    url("/fonts/SourceSerif4-Variable.woff2") format("woff2"),
    url("/fonts/SourceSerif4-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src:
    url("/fonts/JetBrainsMono-Variable.woff2") format("woff2"),
    url("/fonts/JetBrainsMono-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #101418;
  --paper: #f6f5f0;
  --card: #ffffff;
  --well: #fbfaf7;
  --muted: #5b6168;
  --rule: #d9d6cc;
  --rule-strong: #c4bfb1;
  --phosphor: #c6f432;

  --ok: #1b7f4b;
  --ok-ink: #14663b;
  --ok-fill: #e3f2e9;
  --bad: #b42318;
  --bad-ink: #a01f15;
  --bad-fill: #fbe7e5;
  --wait: #8a6a00;
  --wait-ink: #735800;
  --wait-fill: #fbf3d6;
  --wait-bar: #d8ac2b;
  --old: #5b6168;
  --old-fill: #ecebe6;
  --hatch: rgba(16, 20, 24, 0.22);
  --hatch-fill: #efede6;
  /* Agent authorship (BRAND §2 vermilion; SPEC-social §7): the only social tokens, used by public/social.css. */
  --agent: #b8380e;
  --agent-fill: #f6e3da;

  --display: "Archivo", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --measure: 760px;
  --gutter: 24px;
  --drawer: 440px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 0 var(--rule), 0 12px 28px -20px rgba(16, 20, 24, 0.22);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Hover states: the ink button lifts to --ink-hover; quiet controls take a faint ink tint. */
  --ink-hover: #262c33;
  --hover-tint: rgba(16, 20, 24, 0.06);
}

/* ---- tones: one vocabulary for highlights, swatches, chips, bars ------------------------------------------- */

[data-tone="corroborated"],
.s-corroborated,
.receipt[data-filter="corroborated"] .hl[data-tones~="corroborated"] {
  --tone: var(--ok);
  --tone-ink: var(--ok-ink);
  --tone-fill: var(--ok-fill);
  --tone-bar: var(--ok);
  --tone-line: linear-gradient(var(--ok), var(--ok)) left bottom / 100% 2px no-repeat;
}
[data-tone="unsupported"],
.s-unsupported,
.receipt[data-filter="unsupported"] .hl[data-tones~="unsupported"] {
  --tone: var(--bad);
  --tone-ink: var(--bad-ink);
  --tone-fill: var(--bad-fill);
  --tone-bar: var(--bad);
  --tone-line:
    linear-gradient(var(--bad), var(--bad)) left bottom / 100% 1.5px no-repeat,
    linear-gradient(var(--bad), var(--bad)) left calc(100% - 3.5px) / 100% 1.5px no-repeat;
}
[data-tone="outdated"],
.s-outdated,
.receipt[data-filter="outdated"] .hl[data-tones~="outdated"] {
  --tone: var(--old);
  --tone-ink: var(--old);
  --tone-fill: var(--old-fill);
  --tone-bar: #8d9298;
  --tone-line: repeating-linear-gradient(90deg, var(--old) 0 2px, transparent 2px 5px) left bottom / 100% 2px no-repeat;
}
[data-tone="unverified"],
.s-unverified,
.receipt[data-filter="unverified"] .hl[data-tones~="unverified"] {
  --tone: var(--wait);
  --tone-ink: var(--wait-ink);
  --tone-fill: transparent;
  --tone-hover: var(--wait-fill);
  --tone-bar: var(--wait-bar);
  --tone-line:
    repeating-linear-gradient(90deg, var(--wait) 0 6px, transparent 6px 10px) left bottom / 100% 2px no-repeat;
}
[data-tone="not_auto_checked"],
.s-hazard,
.s-not_auto_checked,
.receipt[data-filter="not_auto_checked"] .hl[data-tones~="not_auto_checked"] {
  --tone: var(--muted);
  --tone-ink: var(--ink);
  --tone-fill: repeating-linear-gradient(-45deg, var(--hatch) 0 1.5px, transparent 1.5px 6px), var(--hatch-fill);
  --tone-bar: repeating-linear-gradient(-45deg, rgba(16, 20, 24, 0.35) 0 2px, transparent 2px 5px), #d6d2c6;
  --tone-line: linear-gradient(var(--muted), var(--muted)) left bottom / 100% 1px no-repeat;
}

/* ---- base ---------------------------------------------------------------------------------------------------- */

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

html {
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--rule-strong) transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px / 1.6 var(--serif);
  font-optical-sizing: auto;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(32px, 6vw, 52px);
  margin: 0.1em 0 0.3em;
}

h2 {
  font-size: 26px;
  margin: 64px 0 14px;
}

p {
  text-wrap: pretty;
}

.mono {
  font-family: var(--mono);
}

.muted {
  color: var(--muted);
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 30;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--phosphor);
  font: 600 14px var(--mono);
  border-radius: 8px;
}

.skip:focus {
  top: 12px;
}

.icon {
  flex: none;
}

/* ---- shell --------------------------------------------------------------------------------------------------- */

.site-header > .bar,
main,
.site-footer {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  padding-bottom: 88px;
}

/* Sticky header: wordmark | sections | search | Check a link + account. Solid ink (the ink bar below), no glass. It sits
   under the evidence drawer (z 20) and the skip link (z 30). Under 720px the sections and search fold into the menu
   sheet. Every control is at least 44px tall. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}

.site-header > .bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 44px;
  margin-right: 6px;
  text-decoration: none;
  border-radius: 8px;
}

.brand-name {
  font: 800 23px / 1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.02em;
}

.nav-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sections: quiet until hovered; the current one is a white tab on a 2px ink baseline. */
.site-nav {
  display: flex;
  gap: 2px;
}

.site-nav a,
.nav-signin,
.nav-cta,
.nav-bell,
.nav-pop > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 9px;
  font: 600 13px / 1 var(--mono);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 140ms var(--ease),
    color 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.site-nav a {
  padding: 0 13px;
  color: var(--muted);
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--hover-tint);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 -2px 0 var(--ink);
}

/* Search: a real field, not a link. */
.nav-search,
.sheet-search {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-search form,
.sheet-search form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}

.nav-search {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 260px;
  margin-left: auto;
}

.nav-search .nav-icon,
.sheet-search .nav-icon {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none;
}

.nav-search input,
.sheet-search input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px 0 37px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: 13px var(--mono);
  transition: border-color 140ms var(--ease);
}

.nav-search input::placeholder,
.sheet-search input::placeholder {
  color: var(--muted);
}

.nav-search input:hover,
.sheet-search input:hover {
  border-color: var(--muted);
}

.nav-search input:focus-visible,
.sheet-search input:focus-visible {
  border-color: var(--ink);
  outline-offset: 1px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* The one primary action: the house button, phosphor on ink. */
.nav-cta {
  padding: 0 16px 0 13px;
  background: var(--ink);
  color: var(--phosphor);
}

.nav-cta:hover {
  background: var(--ink-hover);
}

.nav-cta[aria-current="page"] {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--ink);
}

.nav-signin {
  padding: 0 15px;
  border: 1px solid var(--rule-strong);
  background: var(--card);
  color: var(--ink);
}

.nav-signin:hover {
  border-color: var(--ink);
}

.nav-bell,
.nav-menu > summary {
  position: relative;
  width: 44px;
  color: var(--ink);
}

.nav-bell:hover,
.nav-pop > summary:hover,
.nav-pop[open] > summary {
  background: var(--hover-tint);
}

/* Unread count: phosphor on ink, the same reading as the current filter count. Hidden at zero. */
.nav-bell .badge {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--paper);
  border-radius: 9px;
  background: var(--ink);
  color: var(--phosphor);
  font: 700 10px / 14px var(--mono);
  text-align: center;
  box-sizing: content-box;
}

.nav-bell .badge[data-unread="0"] {
  display: none;
}

/* Pop-overs: <details>, so they open without JS; app.js closes them on Escape and outside clicks. */
.nav-pop {
  position: relative;
}

.nav-pop > summary {
  list-style: none;
  cursor: pointer;
}

.nav-pop > summary::-webkit-details-marker {
  display: none;
}

.account-menu > summary {
  padding: 0 4px;
  color: var(--ink);
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--phosphor);
  font: 800 15px / 1 var(--display);
  font-stretch: 125%;
}

.nav-sheet {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 16;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 236px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--rule),
    0 22px 44px -22px rgba(16, 20, 24, 0.4);
  transition:
    opacity 160ms var(--ease),
    translate 160ms var(--ease);
}

@starting-style {
  .nav-pop[open] > .nav-sheet {
    opacity: 0;
    translate: 0 -6px;
  }
}

.nav-sheet a,
.nav-sheet button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font: 500 14px / 1 var(--mono);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-sheet a:hover,
.nav-sheet button:hover {
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.nav-sheet a[aria-current="page"] {
  box-shadow: inset 2px 0 0 var(--ink);
  background: var(--well);
  font-weight: 700;
}

.nav-sheet .nav-icon {
  order: -1; /* label first in the markup, icon first on screen */
  color: var(--muted);
}

.nav-sheet form {
  margin: 0;
}

/* On a phone the call to action lives in the sheet: the house button again. */
.nav-sheet a.sheet-cta,
.nav-sheet a.sheet-cta:hover {
  margin-bottom: 4px;
  background: var(--ink);
  box-shadow: none;
  color: var(--phosphor);
  font-weight: 700;
}

.nav-sheet a.sheet-cta .nav-icon {
  color: var(--phosphor);
}

.nav-sheet form[action="/auth/logout"] {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}

.nav-sheet form[action="/auth/logout"] button {
  color: var(--muted);
}

.sheet-who {
  margin: 0 0 4px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: 12.5px / 1.4 var(--mono);
}

.sheet-who strong {
  color: var(--ink);
}

.sheet-search {
  margin-bottom: 6px;
}

.nav-menu {
  display: none;
}

/* Tablet: the call to action keeps its icon; its words go to the screen-reader only. */
@media (max-width: 959px) {
  .nav-cta {
    width: 44px;
    padding: 0;
  }

  .nav-cta .cta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (max-width: 719px) {
  .site-header > .bar {
    min-height: 60px;
    gap: 6px;
  }

  .brand {
    margin-right: auto;
  }

  .brand-name {
    font-size: 21px;
  }

  .site-nav,
  .nav-search,
  .nav-cta {
    display: none;
  }

  .nav-actions {
    gap: 4px;
  }

  .nav-menu {
    display: block;
  }

  .account-handle {
    display: none;
  }

  /* On a phone the sheets drop full width under the bar. */
  .nav-sheet {
    position: fixed;
    top: 62px;
    left: 12px;
    right: 12px;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }

  .nav-sheet a,
  .nav-sheet button {
    min-height: 48px;
    font-size: 15px;
  }
}

/* ---- ink bar: the header is the instrument panel ------------------------------------------------------------ */
/* Ink ground, paper wordmark, a segmented section switcher and the receipt mark's three tones as the rule under it.
   Phosphor is the action colour here (the one place phosphor fills a button; see DESIGN.md "Header"). These rules
   layer over the base header above. */

/* The avatar-only account control and the mark-only brand keep a 44px target. */
.site-header .account-menu > summary,
.site-header .brand {
  min-width: 44px;
  justify-content: center;
}

.site-header {
  background: var(--ink);
  border-bottom: 0;
  color: var(--paper);
  margin-bottom: 14px;
}

.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #3dbe7a 0 33.3%, #f0614f 33.3% 55%, #f2c94c 55% 100%);
}

.site-header > .bar {
  max-width: 1180px;
  min-height: 74px;
  gap: 14px;
}

.site-header .nav-search {
  max-width: 340px;
}

.site-header :focus-visible {
  outline-color: var(--phosphor);
}

.site-header .brand-name {
  font-size: 27px;
  color: var(--paper);
}

.site-header .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(246, 245, 240, 0.22);
}

.site-header .site-nav {
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(246, 245, 240, 0.06);
  box-shadow: inset 0 0 0 1px rgba(246, 245, 240, 0.12);
}

.site-header .site-nav .nav-icon {
  display: block;
  width: 17px;
  height: 17px;
}

.site-header .site-nav a {
  padding: 0 14px 0 11px;
  color: #b4bcc3;
}

.site-header .site-nav a:hover {
  color: var(--paper);
  background: rgba(246, 245, 240, 0.09);
}

.site-header .site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.site-header .nav-search input {
  border-color: rgba(246, 245, 240, 0.16);
  background: rgba(246, 245, 240, 0.07);
  color: var(--paper);
}

.site-header .nav-search input::placeholder,
.site-header .nav-search .nav-icon {
  color: #a3abb2;
}

.site-header .nav-search input:hover {
  border-color: rgba(246, 245, 240, 0.4);
}

.site-header .nav-search input:focus-visible {
  border-color: var(--phosphor);
}

.site-header .nav-cta {
  background: var(--phosphor);
  color: var(--ink);
  font-weight: 800;
}

.site-header .nav-cta:hover {
  background: color-mix(in srgb, var(--phosphor) 78%, #ffffff);
}

.site-header .nav-cta[aria-current="page"] {
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 4px var(--phosphor);
}

.site-header .nav-signin {
  border-color: rgba(246, 245, 240, 0.32);
  background: transparent;
  color: var(--paper);
}

.site-header .nav-signin:hover {
  border-color: var(--paper);
}

.site-header .nav-bell,
.site-header .nav-pop > summary {
  color: var(--paper);
}

.site-header .nav-bell:hover,
.site-header .nav-pop > summary:hover,
.site-header .nav-pop[open] > summary {
  background: rgba(246, 245, 240, 0.1);
}

.site-header .nav-bell .badge {
  border-color: var(--ink);
  background: var(--phosphor);
  color: var(--ink);
}

.site-header .avatar {
  background: var(--phosphor);
  color: var(--ink);
}

@media (max-width: 719px) {
  .site-header > .bar {
    min-height: 62px;
  }

  .site-header .brand-name {
    font-size: 23px;
  }

  .site-header .nav-sheet {
    top: 70px;
  }
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  padding-bottom: 40px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--muted);
}

/* ---- buttons and controls ------------------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: 600 13.5px / 1.2 var(--mono);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background-color 0.15s;
}

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

.btn-ink,
.btn-cta {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn-ink:hover {
  color: var(--phosphor);
}

.btn-cta {
  color: var(--phosphor);
  font-size: 15px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 10px;
}

.btn-cta:hover .icon {
  transform: translateX(3px);
}

.btn-cta .icon {
  transition: transform 0.2s var(--ease);
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

.ibtn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.ibtn:hover {
  background: var(--paper);
}

.ibtn[disabled] {
  color: var(--rule-strong);
  cursor: default;
  background: transparent;
}

/* ---- tone primitives ----------------------------------------------------------------------------------------- */

.hl,
.swatch,
.tone-word,
.sc-count {
  background: var(--tone-line, none), var(--tone-fill, transparent);
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.swatch {
  display: inline-block;
  flex: none;
  width: 1.75em;
  height: 1.05em;
  vertical-align: -0.2em;
  box-shadow: inset 0 0 0 1px rgba(16, 20, 24, 0.06);
}

.tone-word {
  padding: 0 0.18em 0.1em;
  font-weight: 600;
}

mark.claim {
  background: none;
  color: inherit;
  padding: 0;
}

.hl {
  color: inherit;
  text-decoration: none;
  padding: 0.04em 0.1em 0.15em;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

a.hl:hover,
a.hl[aria-current="true"] {
  background: var(--tone-line, none), var(--tone-hover, var(--tone-fill, transparent));
  box-shadow: inset 0 0 0 1px var(--tone);
}

a.hl[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--tone);
}

.hl-n {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 0.3em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--tone);
  color: #fff;
  font: 600 11px / 1.6 var(--mono);
  text-align: center;
  vertical-align: 0.15em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  background: var(--tone-fill);
  color: var(--tone-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent);
  font: 600 12.5px / 1.35 var(--mono);
  white-space: nowrap;
}

.chip-icon {
  flex: none;
}

/* ---- tally bar ----------------------------------------------------------------------------------------------- */

.tbar {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 14px;
}

.tbar .seg {
  flex: 1 1 0;
  min-width: 5px;
  background: var(--tone-bar);
  border-radius: 3px;
}

.tbar .seg-empty {
  background: var(--rule);
}

.tbar-mini {
  height: 6px;
  gap: 2px;
}

.tbar-mini .seg {
  min-width: 3px;
  border-radius: 2px;
}

/* ---- home ---------------------------------------------------------------------------------------------------- */

.hero {
  padding-top: 52px;
  scroll-margin-top: 16px;
}

.hero-title {
  font-size: clamp(46px, 10.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

.lede {
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.45;
  margin: 0 0 30px;
  max-width: 34em;
}

.paste {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px 20px;
  box-shadow: 0 18px 40px -28px rgba(16, 20, 24, 0.45);
  transition: box-shadow 0.2s var(--ease);
}

.paste:focus-within {
  box-shadow:
    0 0 0 4px rgba(198, 244, 50, 0.7),
    0 18px 40px -28px rgba(16, 20, 24, 0.45);
}

.paste-label {
  display: block;
  font: 500 13px var(--mono);
  color: var(--muted);
}

.paste-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.paste input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 21px / 1.3 var(--mono);
  padding: 10px 0 12px;
  outline: none;
}

.paste input::placeholder {
  color: #8b9097;
}

.paste-hint {
  margin: 4px 0 0;
  font: 400 13px / 1.5 var(--mono);
  color: var(--muted);
}

.paste-hint[data-state="error"] {
  color: var(--bad-ink);
}

.paste-hint[data-state="busy"] {
  color: var(--ink);
}

.example {
  margin: 44px 0 0;
}

.example-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow);
}

.example-score {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 12px;
}

.example-total {
  font: 800 17px / 1 var(--display);
  font-stretch: 125%;
  white-space: nowrap;
}

.example-score .tbar {
  max-width: 160px;
}

.example-text {
  margin: 0;
}

.example figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

ol.steps {
  counter-reset: s;
  list-style: none;
  padding: 0;
  margin: 0;
}

ol.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 18px 50px;
  min-height: 34px;
}

ol.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 600 15px / 32px var(--mono);
  text-align: center;
}

.rcards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 14px;
}

.rcard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 16px 18px 15px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.rcard:hover {
  border-color: var(--ink);
  box-shadow: 0 14px 28px -18px rgba(16, 20, 24, 0.4);
  transform: translateY(-2px);
}

.rcard-domain {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcard-title {
  font: 800 17px / 1.25 var(--display);
  font-stretch: 112%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.rcard .tbar {
  margin-top: auto;
}

.rcard-counts {
  font-size: 12px;
  color: var(--muted);
}

.empty {
  color: var(--muted);
}

/* ---- receipt: header and scorecard --------------------------------------------------------------------------- */

.r-head {
  padding-top: 36px;
  margin-bottom: 22px;
}

.r-source {
  display: flex;
  gap: 0.45em;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}

.r-source > span {
  flex: none;
}

.r-source a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
}

.r-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.r-title {
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.05;
  margin: 12px 0 12px;
  overflow-wrap: anywhere;
}

.r-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.scorecard,
.r-article,
.progress,
.state-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.scorecard {
  padding: 20px 22px 22px;
}

.sc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.sc-total {
  font-size: 26px;
  margin: 0;
}

.sc-n {
  font-variant-numeric: tabular-nums;
}

.share {
  display: flex;
  gap: 8px;
}

.sc-line {
  margin: 12px 0 16px;
  font-size: 18px;
  line-height: 1.6;
}

.sc-sep {
  color: var(--rule-strong);
}

.sc-part {
  white-space: nowrap;
}

.sc-count {
  padding: 0.05em 0.32em 0.12em;
  font: 600 0.92em var(--mono);
  color: var(--tone-ink);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--ink);
}

/* ---- receipt: tools ------------------------------------------------------------------------------------------ */

.r-tools {
  margin: 22px 0 14px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 13px / 1.2 var(--mono);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.fchip:hover {
  border-color: var(--ink);
}

.fchip .swatch {
  width: 1.45em;
  height: 0.95em;
}

.fc-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.fchip[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.fchip[aria-current="true"] .fc-n {
  color: var(--phosphor);
}

.view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
}

.view-toggle a {
  padding: 6px 13px;
  border-radius: 999px;
  font: 500 13px / 1.2 var(--mono);
  color: var(--muted);
  text-decoration: none;
}

.view-toggle a[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
}

html:not(.js) .view-toggle {
  display: none;
}

/* ---- receipt: article ---------------------------------------------------------------------------------------- */

.r-article {
  padding: 20px 26px 18px;
}

.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
}

.r-article-title {
  margin: 0;
  font: 500 12.5px / 1.4 var(--mono);
  letter-spacing: 0;
  color: var(--muted);
}

.passage {
  margin: 0;
  max-width: 68ch;
  font: 400 19px / 1.78 var(--serif);
}

.passage + .passage {
  margin-top: 1.05em;
  padding-top: 1.05em;
  border-top: 1px dashed var(--rule);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.4;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend b {
  font-weight: 600;
}

.legend-short {
  color: var(--muted);
}

.filter-empty {
  display: none;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.filter-empty.is-shown {
  display: block;
}

/* Filters: hide what does not match, and mute highlights of other statuses. */
.receipt:not([data-filter="all"]) .passage,
.receipt:not([data-filter="all"]) .row {
  display: none;
}

.receipt[data-filter="corroborated"] .passage[data-tones~="corroborated"],
.receipt[data-filter="unsupported"] .passage[data-tones~="unsupported"],
.receipt[data-filter="outdated"] .passage[data-tones~="outdated"],
.receipt[data-filter="unverified"] .passage[data-tones~="unverified"],
.receipt[data-filter="not_auto_checked"] .passage[data-tones~="not_auto_checked"] {
  display: block;
}

.receipt[data-filter="corroborated"] .row[data-tone="corroborated"],
.receipt[data-filter="unsupported"] .row[data-tone="unsupported"],
.receipt[data-filter="outdated"] .row[data-tone="outdated"],
.receipt[data-filter="unverified"] .row[data-tone="unverified"],
.receipt[data-filter="not_auto_checked"] .row[data-tone="not_auto_checked"] {
  display: block;
}

.receipt:not([data-filter="all"]) .passage + .passage {
  border-top: 0;
  padding-top: 0;
}

.receipt:not([data-filter="all"]) .hl {
  --tone: var(--rule-strong);
  --tone-fill: transparent;
  --tone-line: none;
}

/* Views (JS only; without JS both render, article first). */
html.js .receipt[data-view="article"] .r-list,
html.js .receipt[data-view="list"] .r-article {
  display: none;
}

html.js .receipt[data-view="list"] .r-list {
  margin-top: 0;
}

/* ---- receipt: claim rows ------------------------------------------------------------------------------------- */

.r-list {
  margin-top: 44px;
}

.r-list-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 24px;
}

.r-list-title .mono {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.row {
  border-bottom: 1px solid var(--rule);
}

.row summary {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 6px;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}

.row summary::-webkit-details-marker {
  display: none;
}

.row summary:hover {
  background: rgba(255, 255, 255, 0.7);
}

.row-ord {
  padding-top: 3px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.row-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.row-text {
  font: 400 17.5px / 1.5 var(--serif);
}

.row-sources {
  padding-top: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.row details[open] .row-sources::after {
  content: " ▴";
}

.claim-body {
  position: relative;
  padding: 0 6px 20px calc(2.4em + 18px);
}

.anchor {
  position: absolute;
  top: -120px;
}

.set-aside {
  margin-top: 22px;
  font-size: 15px;
  color: var(--muted);
}

.set-aside summary {
  cursor: pointer;
  font-size: 13px;
}

.set-aside ul {
  padding-left: 1.2em;
}

/* ---- claim body (rows and drawer) ---------------------------------------------------------------------------- */

.explain {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.split-from {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.split-from .mono {
  font-size: 12px;
}

.b-h {
  margin: 20px 0 8px;
  font: 600 11.5px / 1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.b-none {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.evidence,
.corrections {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ev {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--well);
}

.ev-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}

.ev-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.stance {
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11.5px / 1.4 var(--mono);
}

.st-supports {
  color: var(--ok-ink);
  background: var(--ok-fill);
}

.st-contradicts {
  color: var(--bad-ink);
  background: var(--bad-fill);
}

.st-context {
  color: var(--muted);
  background: var(--old-fill);
}

.ev-kind {
  font-size: 12px;
  color: var(--muted);
}

.ev-quote {
  margin: 8px 0 0;
  font: italic 400 16px / 1.55 var(--serif);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ev-quote::before {
  content: "“";
}

.ev-quote::after {
  content: "”";
}

.corrections li {
  font-size: 15px;
}

.history {
  margin-top: 16px;
}

.history summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
}

.history ol {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

.suggest {
  margin-top: 18px;
}

.suggest:empty {
  display: none;
}

/* ---- evidence drawer ----------------------------------------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(var(--drawer), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  box-shadow: -28px 0 56px -32px rgba(16, 20, 24, 0.35);
  flex-direction: column;
  z-index: 20;
}

.drawer[open] {
  display: flex;
  animation: drawer-in 0.32s var(--ease);
}

.drawer::backdrop {
  background: rgba(16, 20, 24, 0.34);
}

.drawer-grip {
  display: none;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 10px 12px 20px;
  border-bottom: 1px solid var(--rule);
}

.drawer-title {
  margin: 0;
  font-size: 18px;
  outline: none;
}

.drawer-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.drawer-pos {
  min-width: 4.5em;
  font-size: 12.5px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 40px;
}

.d-claim + .d-claim {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.d-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.d-ord {
  font-size: 12.5px;
  color: var(--muted);
}

.d-claim:only-child .d-ord {
  display: none;
}

.d-text {
  margin: 12px 0 12px;
  font: 500 21px / 1.42 var(--serif);
}

@keyframes drawer-in {
  from {
    transform: translateX(28px);
    opacity: 0;
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}

@media (min-width: 1100px) {
  body.drawer-open main {
    margin-left: max(var(--gutter), calc((100vw - var(--drawer) - var(--measure) - 2 * var(--gutter)) / 2));
    margin-right: var(--drawer);
  }
}

/* ---- correction form ----------------------------------------------------------------------------------------- */

.correction {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--well);
  font-size: 15px;
}

.correction fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.correction legend {
  margin-bottom: 8px;
  font: 800 16px var(--display);
  font-stretch: 112%;
}

.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.field {
  display: grid;
  gap: 6px;
}

.field > span {
  font: 500 12.5px / 1.4 var(--mono);
  color: var(--muted);
}

.correction input[type="url"],
.correction textarea,
.correction select,
.paste-form input,
.auth input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: 400 15px / 1.4 var(--mono);
}

.correction select {
  width: auto;
  padding: 5px 8px;
  font-size: 14px;
}

.correction textarea {
  font-family: var(--serif);
  font-size: 16px;
  resize: vertical;
}

.correction input:focus,
.correction textarea:focus,
.correction select:focus,
.paste-form input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.form-actions {
  display: flex;
  gap: 8px;
}

.form-status {
  margin: 0;
  font: 500 13px / 1.5 var(--mono);
}

.form-status:empty {
  display: none;
}

.form-status[data-state="error"] {
  color: var(--bad-ink);
}

.form-status[data-state="ok"] {
  color: var(--ok-ink);
}

/* ---- pending, failed, no text -------------------------------------------------------------------------------- */

.progress {
  padding: 24px 26px 20px;
}

.progress-title {
  margin: 0 0 22px;
  font-size: 24px;
}

.psteps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.psteps li {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding-bottom: 24px;
}

.psteps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--rule);
  transition: background-color 0.4s;
}

.psteps li[data-state="done"]::after {
  background: var(--ink);
}

.pdot {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  transition:
    background-color 0.3s,
    border-color 0.3s,
    color 0.3s;
}

.pdot-n {
  font-size: 14px;
  font-weight: 600;
}

.pdot-ok {
  display: none;
}

[data-state="done"] .pdot {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--phosphor);
}

[data-state="done"] .pdot-n {
  display: none;
}

[data-state="done"] .pdot-ok {
  display: block;
}

[data-state="active"] .pdot {
  border-color: var(--ink);
  color: var(--ink);
}

[data-state="active"] .pdot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid transparent;
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}

.ptext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 5px;
}

.ptext b {
  font: 800 17px / 1.3 var(--display);
  font-stretch: 112%;
}

.pdesc {
  font-size: 15.5px;
  color: var(--muted);
}

[data-state="todo"] .ptext {
  opacity: 0.55;
}

[data-state="active"] .ptext::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 10px;
  max-width: 260px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--ink), var(--ink)) 0 0 / 34% 100% no-repeat,
    var(--rule);
  animation: sweep 1.6s var(--ease) infinite;
}

.pcount {
  font-size: 13px;
  color: var(--ink);
}

.pcount:empty {
  display: none;
}

.progress-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sweep {
  from {
    background-position:
      -40% 0,
      0 0;
  }
  to {
    background-position:
      140% 0,
      0 0;
  }
}

.state-card {
  padding: 24px 26px;
}

.state-card h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--hatch-fill);
  font-size: 15.5px;
}

.note p {
  margin: 0;
}

.note .chip-icon {
  margin-top: 4px;
}

.r-foot {
  margin-top: 36px;
  font-size: 12.5px;
  color: var(--muted);
}

.r-foot a {
  color: var(--muted);
}

/* ---- other pages (auth, accuracy) ---------------------------------------------------------------------------- */

.auth,
.accuracy {
  padding-top: 36px;
}

.paste-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
}

.paste-form label {
  font: 500 13px var(--mono);
  color: var(--muted);
}

.paste-form button,
.auth-logout button {
  min-height: 42px;
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  color: var(--phosphor);
  font: 600 14px var(--mono);
  cursor: pointer;
}

.auth-status:empty {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

td,
th {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th {
  font: 600 12px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- small screens ------------------------------------------------------------------------------------------- */

@media (max-width: 719px) {
  :root {
    --gutter: 18px;
  }

  body {
    font-size: 17px;
  }

  h2 {
    font-size: 23px;
    margin-top: 52px;
  }

  .hero {
    padding-top: 30px;
  }

  .paste {
    padding: 12px 12px 12px 14px;
  }

  .paste-row {
    flex-wrap: wrap;
  }

  .paste input {
    flex-basis: 100%;
    font-size: 18px;
  }

  .paste .btn-cta {
    width: 100%;
  }

  .r-head {
    padding-top: 24px;
  }

  .scorecard,
  .r-article,
  .progress,
  .state-card {
    border-radius: var(--radius);
  }

  .scorecard {
    padding: 16px 16px 18px;
  }

  .sc-total {
    font-size: 22px;
  }

  .sc-line {
    font-size: 16.5px;
  }

  .share {
    width: 100%;
  }

  .share .btn {
    flex: 1;
  }

  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .r-article {
    padding: 16px 16px 14px;
  }

  .passage {
    font-size: 17.5px;
    line-height: 1.75;
  }

  .row summary {
    grid-template-columns: 2em 1fr;
    gap: 10px;
  }

  .row-sources {
    grid-column: 2;
    padding-top: 0;
  }

  .claim-body {
    padding-left: calc(2em + 16px);
  }

  .drawer {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 88dvh;
    border-left: 0;
    border-top: 1px solid var(--rule);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -24px 48px -28px rgba(16, 20, 24, 0.4);
  }

  .drawer[open] {
    animation-name: sheet-in;
  }

  .drawer-grip {
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--rule-strong);
  }

  .drawer-head {
    padding-top: 6px;
  }

  .paste-form {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}