@charset "utf-8";
/* ============================================================================
   The Grief Economy — accountability record
   Design brief: sober, legible, cheap to load. Nothing here should feel like
   the content it documents. No motion for its own sake, no colour for drama.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;

  --paper:        #faf8f4;
  --paper-2:      #f2efe8;
  --paper-3:      #e9e5db;
  --ink:          #1b1a17;
  --ink-2:        #4a473f;
  --ink-3:        #6d685d;
  --rule:         #d5cfc2;
  --rule-strong:  #b6ad9b;

  --false:        #97281c;   /* used only to mark falsehood */
  --false-bg:     #f6e7e4;
  --record:       #23545c;   /* used only to mark the verified record */
  --record-bg:    #e2ecec;
  --caution:      #6b4d10;
  --caution-bg:   #f5eddb;
  --money:        #3a4a22;
  --money-bg:     #e9eddf;

  --focus:        #1d4ed8;

  --ff-serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text",
              Cambria, Georgia, "Noto Serif", "Times New Roman", serif;
  --ff-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ff-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
              "Liberation Mono", monospace;

  --measure: 36rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --rail: 17rem;

  --r-sm: 3px;
  --r-md: 5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #15151a;
    --paper-2:      #1d1d23;
    --paper-3:      #26262e;
    --ink:          #eceae4;
    --ink-2:        #c1beb5;
    --ink-3:        #948f85;
    --rule:         #37373f;
    --rule-strong:  #4f4f59;

    --false:        #f0a094;
    --false-bg:     #331d19;
    --record:       #8fc9d2;
    --record-bg:    #14282c;
    --caution:      #e0bf7c;
    --caution-bg:   #2e2515;
    --money:        #b6cd8e;
    --money-bg:     #1e2416;

    --focus:        #93b4ff;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #faf8f4; --paper-2: #f2efe8; --paper-3: #e9e5db;
  --ink: #1b1a17; --ink-2: #4a473f; --ink-3: #6d685d;
  --rule: #d5cfc2; --rule-strong: #b6ad9b;
  --false: #97281c; --false-bg: #f6e7e4;
  --record: #23545c; --record-bg: #e2ecec;
  --caution: #6b4d10; --caution-bg: #f5eddb;
  --money: #3a4a22; --money-bg: #e9eddf;
  --focus: #1d4ed8;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15151a; --paper-2: #1d1d23; --paper-3: #26262e;
  --ink: #eceae4; --ink-2: #c1beb5; --ink-3: #948f85;
  --rule: #37373f; --rule-strong: #4f4f59;
  --false: #f0a094; --false-bg: #331d19;
  --record: #8fc9d2; --record-bg: #14282c;
  --caution: #e0bf7c; --caution-bg: #2e2515;
  --money: #b6cd8e; --money-bg: #1e2416;
  --focus: #93b4ff;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, figure { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:target { scroll-margin-top: 6rem; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ----------------------------------------------------------- utilities */
.u-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: var(--r-md);
  font-family: var(--ff-sans); font-size: 0.9rem; text-decoration: none;
}
.skip:focus { top: 0.5rem; }

.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); }
.small { font-size: 0.875rem; }
.meta {
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------- masthead */
.masthead {
  border-bottom: 3px double var(--rule-strong);
  background: var(--paper);
}
.masthead__inner {
  max-width: 72rem; margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) 1.75rem;
}
.masthead__kicker {
  font-family: var(--ff-sans);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}
.masthead h1 {
  font-size: clamp(1.9rem, 6.2vw, 3.3rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
  max-width: 22ch;
}
.masthead__sub {
  font-size: clamp(1.02rem, 2.4vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
  max-width: 52ch;
}
.masthead__bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  align-items: baseline;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------ controls */
.ctrl {
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  line-height: 1.3;
}
.ctrl:hover { background: var(--paper-3); }
.ctrl[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
select.ctrl, input.ctrl { cursor: auto; }
input.ctrl::placeholder { color: var(--ink-3); opacity: 1; }

/* ---------------------------------------------------------------- shell */
.shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 5rem;
  display: block;
}
@media (min-width: 62rem) {
  .shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}

/* ------------------------------------------------------------------ TOC */
.toc { font-family: var(--ff-sans); }
.toc__box { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper-2); }
.toc summary {
  cursor: pointer; padding: 0.85rem 1rem;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " ▾"; float: right; }
.toc[open] summary::after { content: " ▴"; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0.85rem; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 0.38rem 1rem 0.38rem 0.9rem;
  font-size: 0.875rem; line-height: 1.35;
  color: var(--ink-2); text-decoration: none;
  border-left: 3px solid transparent;
}
.toc a:hover { color: var(--ink); background: var(--paper-3); text-decoration: underline; }
.toc a[aria-current="true"] {
  color: var(--ink); font-weight: 700;
  border-left-color: var(--false);
  background: var(--paper-3);
}
.toc__num { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 0.45rem; font-size: 0.8em; }

@media (min-width: 62rem) {
  .toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
  .toc summary { pointer-events: none; }
  .toc summary::after { display: none; }
}
@media (max-width: 61.99rem) {
  .toc { margin: 1.5rem 0 0; }
  /* Without JavaScript the contents list stays open on a phone. Cap it so it
     never swallows the whole first screen. */
  .toc ol { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
}

/* --------------------------------------------------------------- prose */
.prose { max-width: var(--measure); }
.prose > * { max-width: var(--measure); }
.wide { max-width: 100%; }

main section { padding-top: 3.5rem; }
main section + section { border-top: 1px solid var(--rule); }

h2 {
  font-size: clamp(1.45rem, 3.6vw, 2.05rem);
  line-height: 1.18; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 0.5rem; max-width: 24ch;
}
h3 {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.28; font-weight: 700;
  margin: 2.5rem 0 0.6rem; max-width: 30ch;
}
h4 {
  font-family: var(--ff-sans);
  font-size: 0.9375rem; font-weight: 700; line-height: 1.35;
  margin: 1.6rem 0 0.4rem;
}
.sect__num {
  font-family: var(--ff-sans);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  display: block; margin-bottom: 0.65rem;
}
p { margin: 0 0 1.05rem; }
ul, ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
li { margin: 0 0 0.5rem; }
li > ul, li > ol { margin-top: 0.5rem; }
strong { font-weight: 700; }
blockquote {
  margin: 1.5rem 0; padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--rule-strong);
  color: var(--ink-2); font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; font-style: normal; margin-top: 0.55rem; }

/* ------------------------------------------------------------ citations */
.cite {
  font-family: var(--ff-sans);
  font-size: 0.72em;
  font-style: normal;
  font-weight: 700;
  vertical-align: 0.32em;
  line-height: 1;
  white-space: nowrap;
}
.cite a {
  color: var(--record);
  text-decoration: none;
  padding: 0.1em 0.28em;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.cite a:hover, .cite a:focus-visible { background: var(--record-bg); text-decoration: none; }

/* ---------------------------------------------------------------- tags */
.tag {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
  line-height: 1.4;
  /* No nowrap: at 200% text zoom a long tag must be allowed to wrap rather than
     push the page sideways. */
  white-space: normal;
  max-width: 100%;
}
.tag--false   { color: var(--false);   background: var(--false-bg); }
.tag--record  { color: var(--record);  background: var(--record-bg); }
.tag--caution { color: var(--caution); background: var(--caution-bg); }
.tag--money   { color: var(--money);   background: var(--money-bg); }
.tag--plain   { color: var(--ink-2);   background: var(--paper-2); }

/* --------------------------------------------------------------- callout */
.callout {
  border: 1px solid var(--rule-strong);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: 1.1rem 1.2rem;
  margin: 1.75rem 0;
  background: var(--paper-2);
  font-size: 0.98rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout__t {
  font-family: var(--ff-sans);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.callout--false   { border-left-color: var(--false);   background: var(--false-bg); }
.callout--false .callout__t { color: var(--false); }
.callout--record  { border-left-color: var(--record);  background: var(--record-bg); }
.callout--record .callout__t { color: var(--record); }
.callout--caution { border-left-color: var(--caution); background: var(--caution-bg); }
.callout--caution .callout__t { color: var(--caution); }
.callout--money   { border-left-color: var(--money);   background: var(--money-bg); }
.callout--money .callout__t { color: var(--money); }

/* ------------------------------------------------------------- summary */
.keypoints { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: kp; }
.keypoints > li {
  counter-increment: kp;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.4rem;
}
.keypoints > li::before {
  content: counter(kp);
  position: absolute; left: 0; top: 0.05em;
  width: 1.85rem; height: 1.85rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--ff-sans); font-size: 0.8125rem; font-weight: 700;
  color: var(--ink-2); background: var(--paper-2);
}
.keypoints h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
.keypoints p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ bilingual */
.bil { margin: 1.15rem 0; }
.bil > summary {
  font-family: var(--ff-sans);
  font-size: 0.8125rem; font-weight: 700;
  color: var(--record);
  cursor: pointer;
  padding: 0.35rem 0;
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.bil > summary::-webkit-details-marker { display: none; }
.bil > summary::before { content: "▸"; font-size: 0.85em; }
.bil[open] > summary::before { content: "▾"; }
.bil > summary:hover { text-decoration: underline; }
.bil__body {
  border-left: 3px solid var(--record);
  padding: 0.65rem 0 0.2rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.98rem;
  color: var(--ink-2);
}
.bil__body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- figure */
figure.fig {
  margin: 2.25rem 0;
  max-width: 100%;
}
figure.fig .fig__scroll {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}
figure.fig img {
  width: 100%;
  background: #fff;
  border-radius: var(--r-md);
}
.fig__pan { display: none; }
.fig__nopan { display: inline; }

/* On a phone a 16:9 diagram rendered at 340px is unreadable. Let it render at a
   legible width inside its own scroller instead of shrinking into a smear. */
@media (max-width: 46rem) {
  figure.fig .fig__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  figure.fig img { width: auto; max-width: none; min-width: 40rem; height: auto; }
  .fig__pan { display: inline; }
  .fig__nopan { display: none; }
}
@media (prefers-color-scheme: dark) {
  figure.fig img { filter: brightness(0.94) contrast(1.02); }
  figure.fig .fig__scroll { background: #eae7e0; }
}
:root[data-theme="dark"] figure.fig img { filter: brightness(0.94) contrast(1.02); }
:root[data-theme="dark"] figure.fig .fig__scroll { background: #eae7e0; }
:root[data-theme="light"] figure.fig img { filter: none; }
:root[data-theme="light"] figure.fig .fig__scroll { background: #fff; }

figure.fig figcaption {
  font-family: var(--ff-sans);
  font-size: 0.8125rem; line-height: 1.55;
  color: var(--ink-2);
  margin-top: 0.7rem;
  padding-left: 0.1rem;
  border-left: 0;
}
figure.fig figcaption b { color: var(--ink); }
.fig__src { display: block; margin-top: 0.35rem; color: var(--ink-3); font-size: 0.78rem; }

/* --------------------------------------------------------------- tables */
.tablewrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-family: var(--ff-sans);
  font-size: 0.875rem;
  line-height: 1.45;
}
caption {
  text-align: left;
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
th, td { padding: 0.6rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
thead th {
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper-2); font-weight: 700;
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- catalogue */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
  max-width: 100%;
  align-items: flex-end;
  margin: 1.5rem 0 0.75rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.filters__f { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.filters__f > * { max-width: 100%; }
.filters__f label {
  font-family: var(--ff-sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.filters__f select, .filters__f input { width: min(11rem, 100%); max-width: 100%; }
.filters__f--grow { flex: 1 1 min(14rem, 100%); min-width: 0; }
.filters__f--grow input { width: 100%; }
.filters__f--grow { max-width: 100%; }

.resultline {
  font-family: var(--ff-sans); font-size: 0.8125rem;
  color: var(--ink-2); margin: 0.9rem 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
}

.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.case {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper-2);
  overflow: hidden;
  margin: 0;
}
.case[hidden] { display: none; }
.case__head { padding: 1.1rem 1.2rem 0.9rem; }
.case__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.case__title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.5rem; font-weight: 700; }
.case__title a { text-decoration: none; }
.case__title a:hover { text-decoration: underline; }
.case__claim { margin: 0 0 0.7rem; color: var(--ink-2); font-size: 0.98rem; }
.case__stats {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; min-width: 0;
  font-family: var(--ff-sans); font-size: 0.78rem; color: var(--ink-3);
  padding-top: 0.6rem; border-top: 1px dotted var(--rule);
}
.case__stats b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.case__more { border-top: 1px solid var(--rule); }
.case__more > summary {
  padding: 0.7rem 1.2rem;
  font-family: var(--ff-sans); font-size: 0.8125rem; font-weight: 700;
  color: var(--record); cursor: pointer; list-style: none;
  background: var(--paper);
}
.case__more > summary::-webkit-details-marker { display: none; }
.case__more > summary::before { content: "▸ "; }
.case__more[open] > summary::before { content: "▾ "; }
.case__more > summary:hover { background: var(--paper-3); }
.case__body { padding: 0.4rem 1.2rem 1.3rem; background: var(--paper); font-size: 0.97rem; }
.case__body h4 {
  font-family: var(--ff-sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  margin: 1.4rem 0 0.45rem;
}
.case__body h4:first-child { margin-top: 0.9rem; }
.case__body ul { padding-left: 1.2rem; }
.case__perma {
  font-family: var(--ff-sans); font-size: 0.75rem;
  margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px dotted var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
}
.debunks { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.debunks li { margin-bottom: 0.45rem; font-family: var(--ff-sans); font-size: 0.85rem; line-height: 1.45; }

.empty {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-2);
  background: var(--paper-2);
}
.empty p { margin: 0 0 0.75rem; }
.empty p:last-child { margin: 0; }

/* --------------------------------------------------------------- pipeline */
.pipe { list-style: none; margin: 1.75rem 0; padding: 0; counter-reset: pp; }
.pipe > li {
  counter-increment: pp;
  position: relative;
  padding: 0 0 1.5rem 3rem;
  border-left: 2px solid var(--rule);
  margin: 0;
}
.pipe > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pipe > li::before {
  content: counter(pp);
  position: absolute; left: -0.95rem; top: 0;
  width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule-strong);
  font-family: var(--ff-sans); font-size: 0.78rem; font-weight: 700; color: var(--ink-2);
}
.pipe h4 { margin: 0.1rem 0 0.35rem; font-size: 1rem; }
.pipe p { margin: 0 0 0.5rem; font-size: 0.97rem; }
.pipe p:last-child { margin-bottom: 0; }
.pipe__cost {
  font-family: var(--ff-sans); font-size: 0.78rem; color: var(--ink-3);
  display: block; margin-top: 0.3rem;
}

/* ------------------------------------------------------------- estimator */
.calc {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--paper-2);
  padding: 1.25rem;
  margin: 1.75rem 0;
}
.calc__grid { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc__f { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.calc__f > * { max-width: 100%; }
.calc__f select.ctrl { width: 100%; }
.calc__f label {
  font-family: var(--ff-sans); font-size: 0.8125rem; font-weight: 700; color: var(--ink-2);
}
.calc__f .hint { font-family: var(--ff-sans); font-size: 0.75rem; color: var(--ink-3); font-weight: 400; }
.calc input[type="range"] { width: 100%; accent-color: var(--record); }
.calc input[type="number"] {
  font-family: var(--ff-mono); font-size: 1rem;
  padding: 0.5rem 0.6rem; width: 100%;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.calc__out { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.calc__rows { list-style: none; margin: 0; padding: 0; }
.calc__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px dotted var(--rule);
  margin: 0;
  font-family: var(--ff-sans); font-size: 0.875rem;
}
.calc__rows li:last-child { border-bottom: 0; }
.calc__plat { color: var(--ink-2); min-width: 0; overflow-wrap: break-word; }
.calc__plat b { display: block; color: var(--ink); font-size: 0.95rem; }
.calc__plat span { font-size: 0.75rem; color: var(--ink-3); }
.calc__val {
  min-width: 0; overflow-wrap: anywhere;
  font-family: var(--ff-mono); font-size: 1.02rem; font-weight: 700;
  color: var(--money); text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__val small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--ink-3); font-family: var(--ff-sans); }

/* ---------------------------------------------------------------- timeline */
.tl { list-style: none; margin: 1.75rem 0; padding: 0; }
.tl > li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0 0 1.6rem;
  margin: 0;
}
@media (max-width: 34rem) {
  .tl > li { grid-template-columns: minmax(0, 1fr); }
}
.tl__date {
  font-family: var(--ff-sans); font-size: 0.78rem; font-weight: 700;
  color: var(--ink-3); letter-spacing: 0.03em; padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.tl__body { border-left: 2px solid var(--rule); padding-left: 1.15rem; position: relative; }
@media (max-width: 34rem) { .tl__body { margin-top: 0.35rem; } }
.tl__body::before {
  content: ""; position: absolute; left: -0.42rem; top: 0.45rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule-strong);
}
.tl--record .tl__body::before { border-color: var(--record); background: var(--record); }
.tl--churn  .tl__body::before { border-color: var(--false);  background: var(--false); }
.tl--correction .tl__body::before { border-color: var(--caution); background: var(--paper); }
.tl__title { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.3rem; line-height: 1.35; }
.tl__body p { font-size: 0.95rem; margin: 0 0 0.45rem; color: var(--ink-2); }
.tl__body p:last-child { margin-bottom: 0; }
.tl__legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-family: var(--ff-sans); font-size: 0.8125rem; color: var(--ink-2);
  margin: 1.25rem 0 0;
  padding: 0.85rem 0 0; border-top: 1px solid var(--rule); list-style: none;
}
.tl__legend li { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid; flex: none; }
.dot--record { background: var(--record); border-color: var(--record); }
.dot--churn { background: var(--false); border-color: var(--false); }
.dot--correction { background: var(--paper); border-color: var(--caution); }

/* --------------------------------------------------------------- glossary */
.gloss { margin: 1.5rem 0; }
.gloss dt {
  font-family: var(--ff-sans); font-weight: 700; font-size: 0.95rem;
  margin-top: 1.35rem; color: var(--ink);
}
.gloss dd { margin: 0.3rem 0 0; color: var(--ink-2); font-size: 0.98rem; }
.gloss dd + dd { margin-top: 0.5rem; }

/* --------------------------------------------------------------- sources */
.srcfilters { margin: 1.5rem 0 1rem; }
.srclist { list-style: none; margin: 0; padding: 0; }
.srclist > li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-sans); font-size: 0.875rem; line-height: 1.5;
  margin: 0;
  display: grid; gap: 0.3rem;
}
.srclist > li[hidden] { display: none; }
.srclist .src__t { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.srclist .src__m { color: var(--ink-3); font-size: 0.8rem; }
.srclist .src__u { word-break: break-all; font-size: 0.78rem; font-family: var(--ff-mono); }
.srclist .src__u a { color: var(--record); }
.srclist .src__n { color: var(--ink-2); font-size: 0.82rem; font-style: italic; }

/* ------------------------------------------------------------- tell cards */
.tells { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 46rem) { .tells { grid-template-columns: 1fr 1fr; } }
.tellcard {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--false);
  border-radius: var(--r-md);
  padding: 0.95rem 1.1rem;
  background: var(--paper-2);
  margin: 0;
}
.tellcard__k {
  font-family: var(--ff-sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.35rem;
}
.tellcard h3 { margin: 0 0 0.4rem; font-size: 1rem; font-family: var(--ff-serif); line-height: 1.3; }
.tellcard p { font-size: 0.92rem; margin: 0 0 0.5rem; color: var(--ink-2); }
.tellcard p:last-child { margin: 0; }
.tellcard .bil { margin: 0.6rem 0 0; }

/* ------------------------------------------------------------ how-to-report */
.howto { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
.howto > li {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 1.05rem 1.15rem; background: var(--paper-2); margin: 0;
}
.howto h4 { margin: 0 0 0.5rem; font-size: 1rem; font-family: var(--ff-serif); }
.path {
  font-family: var(--ff-mono); font-size: 0.84rem; line-height: 1.7;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 0.6rem 0.75rem;
  margin: 0.5rem 0 0.65rem; color: var(--ink);
  overflow-x: auto; white-space: pre-wrap;
}
.path b { color: var(--record); font-weight: 700; }

/* --------------------------------------------------------------- footer */
.foot {
  border-top: 3px double var(--rule-strong);
  background: var(--paper-2);
  padding: 2.5rem var(--gutter) 3.5rem;
  margin-top: 3rem;
}
.foot__inner { max-width: 72rem; margin: 0 auto; }
.foot h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.foot p, .foot li { font-size: 0.9rem; color: var(--ink-2); }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.4fr 1fr; } }

/* --------------------------------------------------------------- progress */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  background: transparent; z-index: 60; pointer-events: none;
}
.progress__bar { height: 100%; width: 0; background: var(--false); }
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

.backtotop {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 55;
  display: none;
}
.backtotop.is-on { display: block; }

/* ------------------------------------------------- javascript-only controls */
/* Shown only once app.js has run. A control that cannot do anything should not
   be offered; the underlying content is always present either way. */
.js-only { display: none !important; }
html.has-js .js-only { display: revert !important; }
html.has-js .filters.js-only { display: flex !important; }

/* --------------------------------------------------------------- noscript */
.nojs {
  border: 1px solid var(--caution);
  background: var(--caution-bg); color: var(--caution);
  border-radius: var(--r-md); padding: 0.85rem 1rem;
  font-family: var(--ff-sans); font-size: 0.85rem;
  margin: 1.25rem 0;
}
.nojs a { color: inherit; }

/* --------------------------------------------------------------- print */
@media print {
  :root {
    --paper: #fff; --paper-2: #fff; --paper-3: #fff;
    --ink: #000; --ink-2: #222; --ink-3: #444;
    --rule: #bbb; --rule-strong: #888;
    --false: #000; --record: #000; --caution: #000; --money: #000;
    --false-bg: #fff; --record-bg: #fff; --caution-bg: #fff; --money-bg: #fff;
  }
  body { font-size: 10.5pt; line-height: 1.45; background: #fff; color: #000; }
  .toc, .progress, .backtotop, .filters, .resultline, .srcfilters,
  .masthead__bar, .calc input, .skip, .nojs { display: none !important; }
  .shell { display: block; max-width: none; padding: 0; }
  .prose, .prose > * { max-width: none; }
  main section { padding-top: 1.5rem; break-inside: auto; }
  h2 { break-after: avoid; page-break-after: avoid; }
  h3, h4 { break-after: avoid; }
  figure.fig, .callout, .case, .tellcard, table { break-inside: avoid; }
  .case__more[open] > summary, .case__more > summary { color: #000; }
  /* Everything prints. A printed page has no affordance for "click to expand",
     so all case files, translations and notes must be on the paper. */
  details, details[open] { display: block; }
  details > summary { list-style: none; font-weight: 700; }
  details > summary::before, details > summary::after { content: "" !important; }
  details::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
    contain-intrinsic-block-size: auto !important;
  }
  details:not([open]) > *:not(summary) { display: revert !important; }
  details > .case__body, details > .bil__body { display: block !important; }
  .bil > summary { color: #000; }
  .bil__body { border-left: 2px solid #999; }
  .cite a { border: 0; color: #000; text-decoration: none; }
  .cite a::after { content: ""; }
  a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: var(--ff-mono); font-size: 7.5pt; color: #444; word-break: break-all;
  }
  .toc a[href]::after, .cite a[href]::after, nav a[href]::after { content: ""; }
  figure.fig .fig__scroll { overflow: visible !important; border: 1px solid #999; }
  figure.fig img { width: 100% !important; min-width: 0 !important; max-width: 100% !important; filter: none; }
  .fig__pan, .fig__nopan { display: none !important; }
  .foot { border-top: 1pt solid #000; background: #fff; padding: 1rem 0; }
}

/* ------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .tag, .callout, .case, .tellcard, .calc, figure.fig img, .path { border: 1px solid CanvasText; }
  .cite a { border: 1px solid LinkText; }
  .tl__body::before, .dot { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
  .progress__bar { background: Highlight; }
}