/* Stable News: one mono voice on warm paper, three bold things on purpose (the band, the mark, the marks). Nothing moves, but one thing on Status: the events picture unfolding into the world when asked. */

@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/geist-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/geist-mono-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/geist-mono-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Until the files arrive, a system mono sized to match, so nothing jumps. */
@font-face { font-family: "Geist Mono Fallback"; src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"); size-adjust: 94%; ascent-override: 92%; descent-override: 24%; }

:root {
  --paper: #f5f4ef;
  --ink: #141414;
  --ink-soft: #141414;
  --muted: #6c6a62;
  --rule: #d8d6cc;
  --rule-strong: #141414;
  --underline: #000000;            /* the line under the page in hand: black by day, white by night (owner, 2026-10-10) */
  --wash: #ebe9e2;
  --site: #2f7f78;                 /* the site's colour: the name, the current page; --day (set per edition) colours the marks and rules */
  --accent: var(--site);
  --focus: var(--site);
  --warn: #8a4b12;
  /* Distributions: a diverging pair around a neutral gray (behind red, ahead blue), and a one-hue blue ramp */
  --d-far-behind: #c53a3a;
  --d-behind: #eba39b;
  --d-within: #cfcabf;
  --d-ahead: #86b6ef;
  --d-far-ahead: #1c5cab;
  --d-none: #e9e6de;
  --d-step-1: #cde2fb;
  --d-step-2: #86b6ef;
  --d-step-3: #3987e5;
  --d-step-4: #1c5cab;

  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
  --sans: var(--mono);
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;

  --gutter: 16px;
  --measure: 640px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111210;
    --ink: #ecebe4;
    --ink-soft: #ecebe4;
    --muted: #908e84;
    --rule: #34352f;
    --rule-strong: #ecebe4;
    --underline: #ffffff;
    --wash: #1c1d1a;
    --site: #6fb3ad;
    --warn: #e0b47a;
    --d-far-behind: #e66767;
    --d-behind: #8a3f3a;
    --d-within: #4a4741;
    --d-ahead: #2f5f9a;
    --d-far-ahead: #8fbcf0;
    --d-none: #25231f;
    --d-step-1: #184f95;
    --d-step-2: #256abf;
    --d-step-3: #5598e7;
    --d-step-4: #9ec5f4;
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;            /* 14px: about 42 characters a line on a phone */
  line-height: 1.6;
  font-kerning: normal;
  overflow-wrap: break-word;
}

@media (min-width: 600px) { body { font-size: 0.9375rem; } }  /* 15px */

a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--paper); padding: 8px 12px; z-index: 1; }

/* --- Masthead: the name, the day, the day's band, what was done, then the pages ------------------ */

.masthead, main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.masthead { padding-top: 18px; }

.brand {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* The name over its tagline, with the mark before them: the walker's frame runs from the name's cap line
   (Charter's cap height is 0.671em) to the tagline's baseline, so it is exactly two lines tall. */
.brand a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 0.671em auto;
  column-gap: 0.4em;
  align-items: start;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* Two lines tall, stated outright (WebKit cannot size an SVG from grid rows): the cap row, the tagline's gap and its line. */
.walker { grid-row: 1 / 3; height: calc(0.671em + 0.4 * 0.75rem + 0.85 * 0.75rem); width: calc(0.671em + 0.4 * 0.75rem + 0.85 * 0.75rem); overflow: visible; }
.brand .name { display: block; line-height: 0.671em; }
.brand .tagline { display: block; margin-top: 0.4em; font-family: var(--mono); font-size: 0.75rem; line-height: 0.85; color: var(--muted); }

.dateline {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  text-align: right;
}

/* The band: 179 x 28 cells drawn by web/band.py, shown at two pixels a cell, never smoothed. */
.band {
  width: 100%;
  aspect-ratio: 179 / 26;
  margin: 14px 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.provenance {
  margin: 6px 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--muted);
}
.provenance b { font-weight: 400; color: var(--ink); }

.masthead nav {
  margin-top: 10px;
  border-top: 1px solid var(--ink);
}
.masthead ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.masthead li { display: flex; align-items: center; }
.masthead nav a, .masthead nav button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 0.25em;
}
/* Only the page in hand is underlined: black by day, white by night (the "underlying", owner 2026-10-10). */
.masthead nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--underline); }

main { padding-bottom: 56px; }
main > :first-child > .section-label, main > .notice + * > .section-label { margin-top: 8px; }

/* --- Shared bits -------------------------------------------------------------- */

/* A section starts with its name and a rule cut from the day's band: the first section gets the band's top rows,
   the next the rows below, and so on down the page, so the morning's picture runs through it. Pages without a band
   (Add, Past, Status) get a dithered rule in ink instead. */
.section-label {
  margin: 44px 0 10px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  container-type: inline-size;    /* so the rule below can be measured in band cells (100cqw / 179) */
}
/* The rule under a section name: exactly three rows of the day's band, cut on whole rows whatever the width (a
   cell is 100cqw / 179), the first section the top three, the next the three below, so the picture runs down. */
.section-label::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 179 / 3;
  margin-top: 6px;
  background-image: var(--band, radial-gradient(var(--ink) 0.9px, transparent 1px));
  background-size: 100% auto;
  background-position: 0 calc(var(--rows, 0) * -100cqw / 179);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
body:not([style*="--band"]) .section-label::after { aspect-ratio: auto; height: 8px; background-size: 4px 4px; background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent); mask-image: linear-gradient(90deg, #000 25%, transparent); }
main > section:nth-of-type(2) .section-label::after { --rows: 3; }
main > section:nth-of-type(3) .section-label::after { --rows: 6; }
main > section:nth-of-type(4) .section-label::after { --rows: 9; }
main > section:nth-of-type(5) .section-label::after { --rows: 12; }
main > section:nth-of-type(6) .section-label::after { --rows: 15; }
main > section:nth-of-type(7) .section-label::after { --rows: 18; }
/* How much is in a section: a number after its name, so its length is plain before reading. */
.count { margin-left: 0.6em; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

.aside { color: var(--muted); font-size: 0.8125rem; }

.notice {
  margin: 24px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--ink);
  font-size: 0.8125rem;
}

.quiet-page h1 { font-size: 1.25rem; margin: 36px 0 12px; line-height: 1.3; font-weight: 700; }
/* Mine: who is signed in, and the way out, on one line under the name. */
.signed-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0 0 8px; }
.signed-in form { display: inline; margin: 0; }
/* A page starts where Today's first section does: just under the nav, not a paragraph below it. */
.quiet-page > h1:first-child, .quiet-page > h2:first-child, .status > h1:first-child { margin-top: 12px; }
.mail-address { font-size: 1rem; margin: 16px 0 4px; overflow-wrap: anywhere; }
.mail-address code { padding: 6px 10px; border: 1px solid var(--ink); user-select: all; }
.quiet-page h2:not(.section-label) { font-size: 1.0625rem; margin: 40px 0 12px; }

pre, code { font-family: var(--mono); font-size: 0.8125rem; }
pre {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  white-space: pre;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { box-shadow: 2px 2px 0 var(--ink); text-decoration: none; }
.btn-primary { font-weight: 700; }

/* Every fold reads the same: small muted, + to open, − to close. */
details.more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  color: var(--muted);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: " +"; white-space: pre; }
details.more[open] > summary::after { content: " −"; }
details.more > summary:hover { color: var(--ink); }
details.show-more > summary { display: flex; width: 100%; min-height: 36px; border-bottom: 1px solid var(--rule); color: var(--ink); }
details.show-more > summary::after { content: " ▾"; }
details.show-more[open] > summary::after { content: " ▴"; }
details.show-more[open] > summary { border-bottom: 0; }

/* --- Briefing ------------------------------------------------------------------ */

.briefing h3 {
  margin: 20px 0 6px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}
.briefing ul, .summary ul, .notes, .plain-list, .opened-list { list-style-type: square; }
.briefing ul { margin: 0; padding-left: 1.2em; }
.briefing li { margin: 0 0 10px; padding-left: 0.1em; }
.briefing li::marker, .summary li::marker, .notes li::marker, .plain-list li::marker, .opened-list li::marker { color: var(--ink); }

.src {
  font-size: 0.75rem;
  white-space: normal;
  color: var(--muted);
}
.src::before { content: "— "; }
.src a { color: var(--muted); text-decoration-color: var(--rule); padding: 6px 0; }
.src a:hover { color: var(--ink); }
.src-all { display: inline; }
.src-all summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline dotted var(--rule); padding: 6px 0; }
.src-all summary::-webkit-details-marker { display: none; }
.src-all summary::before { content: "· "; text-decoration: none; }
.src-all summary:hover { color: var(--ink); }
.src-all[open] summary::after { content: ": "; }
/* + / − after an outlet link in the briefing: "I read it, good / not good". Quiet until chosen. */
.verdict { display: inline; margin-left: 3px; white-space: nowrap; }
.verdict button {
  padding: 0 1px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.verdict button + button { margin-left: 1px; }
.verdict button:hover { color: var(--ink); }
.verdict button[aria-pressed="true"] { color: var(--day, var(--site)); font-weight: 700; }
.verdict.htmx-request { opacity: 0.6; }

/* --- Mainstream pulse: smaller, no box --------------------------------------------- */

.pulse {
  margin-top: 40px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.pulse h3 {
  margin: 14px 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.pulse ol { margin: 0; padding-left: 1.6em; }
.pulse li { margin: 0 0 6px; }
.pulse li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.pulse .src { font-size: 0.6875rem; }

/* --- Today's ten: a list on rules, none louder than the rest ------------------------------- */

.ten .section-label { margin-bottom: 10px; }

.card {
  padding: 18px 0 16px;
  border-top: 1px solid var(--rule);
}
/* The first card under a section's name sits on the band rule, not on a second line. */
.section-label + .card { border-top: 0; }

/* --- Worth going to ------------------------------------------------------------------ */

.happenings { margin-top: 40px; }
.happenings .section-label { margin-bottom: 0; }
.happening { padding: 16px 0 14px; }
.happening .about { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--ink); }
.happening-changes {
  margin: 12px 0 16px;
  padding-left: 18px;
  font-size: 0.8125rem;
}
.single .card { border-top: 0; padding-top: 28px; }

/* What a piece is, left; how long it takes, right. */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.meta .sep { color: var(--rule); }
.meta .length { margin-left: auto; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--ink);
}
.byline .who { flex: 1 1 auto; min-width: 0; margin: 0; }
.outlet { font-weight: 700; }
.author { color: var(--muted); }

.title {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}
@media (min-width: 600px) { .title { font-size: 1rem; } }
.title a { color: inherit; text-decoration: none; }
.title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
.title.is-original { font-weight: 400; }
.card.is-opened .title { color: var(--muted); }

.pending { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); }
.pending[role="status"] { font-style: italic; }

.continues { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.continues a { color: inherit; }

.numbers { margin: 2px 0 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.numbers a { color: inherit; text-decoration-color: var(--rule); }

.thread-steps { list-style: none; padding: 0; margin: 24px 0 0; }
.thread-steps > li { border-left: 2px solid var(--rule); padding: 0 0 20px 16px; }
.thread-title { font-weight: 700; margin: 4px 0; }
.thread-cited { margin: 8px 0 0; padding-left: 18px; }
.thread-facts { margin: 6px 0 0; padding-left: 18px; list-style: square; }

.labels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}
.discussion { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration-color: var(--rule); }
.clickbait summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--warn);
  cursor: pointer;
  list-style: none;
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
}
.clickbait summary::-webkit-details-marker { display: none; }
.clickbait summary::after { content: " +"; }
.clickbait[open] summary::after { content: " −"; }
.clickbait[open] { flex-basis: 100%; }
.clickbait .orig { margin: 4px 0 0; font-size: 0.8125rem; color: var(--ink); }
.clickbait .orig-why { margin: 4px 0 0; }

/* + / − at the end of a byline: the reader's marks. 36px to hit, the chosen one in the day's colour. */
.tags { display: contents; }
.toggles { display: inline-flex; margin-right: -10px; }
.btn-toggle {
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.btn-toggle:hover, .btn-toggle[aria-expanded="true"] { color: var(--ink); }
.btn-toggle.has-choice { color: var(--day, var(--site)); }

/* Reasons: plain words in a row, no boxes; the chosen ones bold, underlined in the site's colour. */
.chips {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 4px;
}
.chips[hidden] { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip-item { text-decoration: underline dotted var(--rule); text-underline-offset: 0.25em; }
.chip[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline solid var(--site) 1px;
  text-underline-offset: 0.3em;
}
.chip.htmx-request { opacity: 0.6; }

.summary ul { margin: 6px 0 0; padding-left: 1.2em; }
.summary li { margin-bottom: 8px; }

.back { margin-top: 32px; font-size: 0.8125rem; }

/* --- End of the edition --------------------------------------------------------------- */

.colophon {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: 0.75rem;
  color: var(--muted);
}
.colophon p { margin: 0; }

/* --- Add link -------------------------------------------------------------------------- */

.add-form { display: grid; gap: 10px; margin: 24px 0 16px; }
.add-form label { font-size: 0.8125rem; font-weight: 700; }
/* A field is a rule to write on, not a box. */
.add-form input {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;              /* 16px+ keeps iOS from zooming */
}
.add-form input:focus { outline: none; border-bottom-color: var(--site); }
.add-form input:focus-visible { outline: none; box-shadow: 0 1px 0 var(--site); }
.add-form input[aria-invalid="true"] { border-color: var(--warn); }
/* The set-up page: the prompt to copy, the paste box (a field, like the others), and the checks it failed. */
.start-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; }
pre.prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
.add-form textarea {
  width: 100%;
  min-height: 240px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.45;
  resize: vertical;
}
.add-form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.add-form textarea[aria-invalid="true"] { border-color: var(--warn); }
.errors { font-size: 0.8125rem; padding-left: 1.2em; }
.errors li { margin-bottom: 6px; }
/* The Add page: the field and its button on one line. */
.add-row { grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; }
.add-row .form-error { grid-column: 1 / -1; }
.btn-text {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-text:hover { text-decoration: underline 1px var(--site); text-underline-offset: 0.3em; }
.add-form .btn { justify-self: start; min-width: 96px; }
.kind-choice { grid-column: 1 / -1; }
.kind-choice fieldset { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; border: 0; }
.add-form .kind-choice label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 400; color: var(--ink); }
.add-form .kind-choice input { width: auto; min-height: 0; margin: 0; accent-color: var(--ink); }
.kind-choice .aside { margin: 4px 0 0; }
.kind-line { margin: 12px 0 0; }
.kind-line .btn-text { min-height: 32px; font-size: inherit; font-weight: 400; text-decoration: underline 1px var(--rule); text-underline-offset: 0.25em; }
.added-event { margin: 0 0 8px; }
.added-event .section-label { margin-bottom: 0; }
.form-error { margin: 0; color: var(--warn); font-size: 0.8125rem; }

/* --- Archive ----------------------------------------------------------------------------- */

.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
                     gap: 0 12px; border-top: 1px solid var(--rule); }
.archive-list > li > details[open] { flex-basis: 100%; }
/* A cut of the day's band beside its date, one line tall: the whole band is 358 x 52 px at two pixels a cell; the
   window shows its middle rows and as much width as the line leaves, never wrapping the date. */
.day-band {
  flex: 1 1 48px;
  min-width: 48px;
  max-width: 180px;
  height: 14px;
  align-self: center;
  background-size: 358px 52px;
  background-position: 0 -20px;      /* row 10 of 26: whole rows, two pixels a cell */
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.archive-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 0; }
.archive-day > a, .archive-day > span:first-child { display: inline-flex; align-items: center; min-height: 44px; }
.opened-list { margin: 0 0 12px; padding-left: 1.2em; font-size: 0.8125rem; line-height: 1.5; }
.opened-list li { margin-bottom: 4px; }
.opened-list a, .plain-list a { color: var(--ink); text-decoration-color: var(--rule); }
.plain-list { padding-left: 1.2em; font-size: 0.8125rem; }
.plain-list li { margin-bottom: 6px; }

/* --- Status and review: plain tables ------------------------------------------------------- */

.status h1 { font-size: 1.25rem; margin: 12px 0 0; }
.status h3 { font-size: 1rem; margin: 18px 0 4px; }
.table-wrap { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.4; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); }
thead th { font-weight: 600; color: var(--muted); border-bottom-color: var(--rule-strong); }
tbody th { font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.notes { font-family: var(--sans); font-size: 0.875rem; padding-left: 1.1em; }

.review table { min-width: 860px; }
.review td:nth-child(1), .review td:nth-child(2) { min-width: 220px; }

@media (max-width: 420px) {
  .masthead nav a { padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.entities form.inline, .status form.inline { display: inline; }
.entities input[name="qid"], .status input[name="qid"] { width: 7em; min-height: 32px; padding: 2px 8px; border: 1px solid var(--rule-strong);
  border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; }
.entities form.inline .btn { min-height: 32px; padding: 0 10px; font-size: 0.8125rem; }

/* --- Distributions: a tile map and a table of shares per place ------------------------------------ */

.muted { color: var(--muted); }
.flag { color: var(--warn); font-weight: 600; }
.dist .view h3 { margin: 32px 0 2px; font-size: 1rem; }
.dist .lede { margin: 2px 0 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }

.tiles { display: block; width: 100%; max-width: 440px; height: auto; margin: 14px auto 8px; }
.t-none { fill: var(--d-none); background: var(--d-none); }
.t-within { fill: var(--d-within); background: var(--d-within); }
.t-behind { fill: var(--d-behind); background: var(--d-behind); }
.t-far-behind { fill: var(--d-far-behind); background: var(--d-far-behind); }
.t-ahead { fill: var(--d-ahead); background: var(--d-ahead); }
.t-far-ahead { fill: var(--d-far-ahead); background: var(--d-far-ahead); }
.t-home { fill: var(--ink-soft); background: var(--ink-soft); }
.tiles .t-untargeted { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1.5; }
.legend .t-untargeted { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.t-step-1 { fill: var(--d-step-1); background: var(--d-step-1); }
.t-step-2 { fill: var(--d-step-2); background: var(--d-step-2); }
.t-step-3 { fill: var(--d-step-3); background: var(--d-step-3); }
.t-step-4 { fill: var(--d-step-4); background: var(--d-step-4); }

.tiles text { font-family: var(--sans); font-size: 6.5px; font-weight: 600; fill: var(--ink); text-anchor: middle;
              dominant-baseline: central; pointer-events: none; }
.tiles .l-step-3, .tiles .l-step-4, .tiles .l-far-behind, .tiles .l-far-ahead, .tiles .l-home { fill: var(--paper); }

.legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 10px; padding: 0; list-style: none;
          font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 0; vertical-align: -1px; }
.legend i + i { margin-left: -2px; }

/* Small multiples: the same picture once per place, side by side. */
.multiples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin: 18px 0 10px; }
.multiples figure { margin: 0; min-width: 0; }
.multiples figcaption { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }

/* How far a place is from even: one bar, a tick for what chance alone gives. */
.meter { margin: 2px 0 0; font-family: var(--sans); font-size: 0.6875rem; color: var(--muted); }
.meter svg { display: block; width: 100%; height: 6px; margin-bottom: 2px; }
.meter .m-track { stroke: var(--rule); stroke-width: 1; }
.meter .m-bar { fill: var(--ink-soft); }
.meter .m-tick { stroke: var(--ink); stroke-width: 1.2; }
.meter.is-unjudged .m-bar { fill: var(--rule-strong); }

/* Bullet bars: three thin bars a row (B, M, R) on one scale, a tick for the target, the number at the bar's end. */
.bullet-table { table-layout: fixed; }
.bullet-table .c-name { width: 32%; }
.view .legend { justify-content: center; }
.bullet-table th[scope="row"] { padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400;
                                vertical-align: middle; }
.bullet-table td { padding: 5px 0; }
.bullets { display: grid; gap: 2px; }
.bl { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 4px; height: 9px; }
.bl-place { font-family: var(--sans); font-size: 0.5625rem; color: var(--muted); line-height: 1; }
.bl-track { position: relative; height: 9px; }
.bl-bar { position: absolute; left: 0; top: 1.5px; height: 6px; width: var(--w); min-width: 2px; background: var(--ink-soft); }
.bl-bar.pos-behind, .bl-bar.pos-far-behind { background: var(--d-far-behind); }
.bl-bar.pos-ahead, .bl-bar.pos-far-ahead { background: var(--d-far-ahead); }
.bl-bar.pos-home { background: var(--ink); }
.bl-tick { position: absolute; top: -1px; height: 11px; left: var(--at); width: 1.5px; margin-left: -0.75px; background: var(--ink); }
.bl-val { position: absolute; left: calc(var(--w) + 5px); top: 50%; transform: translateY(-50%);
          font-family: var(--sans); font-size: 0.625rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }


/* --- Events: where (rings around home, or the world) and when (a lane per ring) -------------------------- */

/* The switch above the picture: two words, the chosen one bold on the site's underline; its caption after. */
.switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 6px 0 0; font-size: 0.8125rem; }
.switch[hidden] { display: none; }
.switch button { min-height: 36px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline 1px var(--site); text-underline-offset: 0.3em; }
.switch .sep { color: var(--rule); }
.switch [data-caption] { flex-basis: 100%; margin-top: -4px; }

/* Nested by area: each place one more share of area than the one inside it, the inner where it really lies. */
.nest { display: block; width: 100%; max-width: 560px; height: auto; margin: 6px auto 14px; overflow: visible; }
.nest .level { stroke: none; }   /* a level is one shade: its countries' own borders stay unseen */
.nest .level.depth-0 { stroke: var(--ink); stroke-width: 0.8; stroke-linejoin: round; }
/* a quiet step from paper towards ink per level, the world lightest, Wola deepest; the lanes' swatches match */
.depth-5 { fill: color-mix(in srgb, var(--ink) 7%, var(--paper)); background: color-mix(in srgb, var(--ink) 7%, var(--paper)); }
.depth-4 { fill: color-mix(in srgb, var(--ink) 13%, var(--paper)); background: color-mix(in srgb, var(--ink) 13%, var(--paper)); }
.depth-3 { fill: color-mix(in srgb, var(--ink) 19%, var(--paper)); background: color-mix(in srgb, var(--ink) 19%, var(--paper)); }
.depth-2 { fill: color-mix(in srgb, var(--ink) 25%, var(--paper)); background: color-mix(in srgb, var(--ink) 25%, var(--paper)); }
.depth-1 { fill: color-mix(in srgb, var(--ink) 31%, var(--paper)); background: color-mix(in srgb, var(--ink) 31%, var(--paper)); }
.depth-0 { fill: color-mix(in srgb, var(--ink) 40%, var(--paper)); background: color-mix(in srgb, var(--ink) 40%, var(--paper)); }
.nest .home { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.nest .pick { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.nest .pick.is-opened { fill: var(--ink); stroke: var(--paper); }

/* The timeline is HTML, so its words keep their size on a phone: a row per ring, the picks on a rule. */
.timeline { list-style: none; margin: 4px 0 2px; padding: 0; font-family: var(--sans); }
.timeline li { display: grid; grid-template-columns: 9px minmax(0, 7.5em) 1fr 64px; gap: 0 6px; align-items: center; height: 22px; }
.timeline .swatch { width: 9px; height: 9px; }
.timeline .lane-label { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline .lane-label.is-under { color: var(--warn); font-weight: 600; }
.timeline .track { position: relative; height: 100%; }
.timeline .lane .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--rule); }
.timeline .today { position: absolute; left: var(--x); top: 0; bottom: 0; border-left: 1px dashed var(--ink-soft); }
.timeline .pick { position: absolute; left: calc(var(--x) + var(--step, 0) * 7px); top: 50%; width: 7px; height: 7px;
                  transform: translate(-50%, -50%); border: 1.2px solid var(--ink-soft); background: var(--paper); }
.timeline .pick.is-opened { background: var(--ink); border-color: var(--ink); }
.timeline .count-bar { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--muted); }
.timeline .count-bar i { display: block; width: calc(var(--w) * 0.65); height: 6px; background: var(--ink-soft); }
.timeline .axis { height: 16px; align-items: start; }
/* a tick's words start at its day; the last ends there, and on a phone (where the month before is left out)
   so does today's, so neighbours never run into each other */
.timeline .tick { position: absolute; left: var(--x); top: 2px; font-size: 9px; color: var(--muted); white-space: nowrap; }
.timeline .tick.is-end { transform: translateX(-100%); padding-right: 3px; }
.timeline .tick:not(.is-end) { padding-left: 3px; }
@media (max-width: 600px) { .timeline .tick.is-today { transform: translateX(-100%); padding: 0 3px 0 0; } }
.timeline .tick.is-today { color: var(--ink); font-weight: 600; }
.timeline .count-h { font-size: 9px; color: var(--muted); padding-top: 2px; }
@media (max-width: 600px) {
  .timeline li { grid-template-columns: 9px minmax(0, 7em) 1fr 44px; }   /* room for the track */
  .timeline .is-minor { display: none; }
  .timeline .axis { height: 28px; }
  .timeline .tick.is-end { top: 15px; }                                   /* the far end on its own line */
}
.status .key { margin: 10px 0 4px; }
.status .credit { margin: 4px 0 0; font-size: 0.75rem; }
.status details.more { margin: 8px 0 0; }
.status details.more > summary { font-size: 0.8125rem; }

/* Accept / decline and extend / revoke: words with room between them. */
.role-line { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; }

/* Status: a line of where to jump, and the distribution views one at a time (app.js hides the others). */
.jump, .views { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 8px; font-size: 0.8125rem; }
.status .jump + section > .section-label { margin-top: 16px; }
.jump a, .views a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.jump a:hover, .views a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); }
.views a[aria-current="true"] { color: var(--ink); font-weight: 700; text-decoration: underline 1px var(--site); text-underline-offset: 0.3em; }
.views { margin-top: 8px; }
.dist .view[hidden] { display: none; }
.dist .view.is-alone h3 { margin-top: 12px; }

/* --- Touch loupe: a square lens above the finger, naming what is under it ------------------------------- */

.loupe { position: fixed; z-index: 10; display: none; width: 132px; padding: 0; border: 1px solid var(--rule-strong);
         background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); pointer-events: none; }
.loupe.is-open { display: block; }
.loupe-view { width: 130px; height: 130px; overflow: hidden; border-bottom: 1px solid var(--rule); }
.loupe-view[hidden] { display: none; }
.loupe-view svg { display: block; width: 130px; height: 130px; max-width: none; margin: 0; }
.loupe-label { margin: 0; padding: 5px 7px; font-family: var(--sans); font-size: 0.6875rem; line-height: 1.35; color: var(--ink); }
.loupe:has(.loupe-view[hidden]) { width: auto; max-width: 260px; }
svg.tiles, svg.nest { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Mouse and trackpad: the label beside the cursor (web/static/app.js). */
.tip { position: fixed; z-index: 10; display: none; max-width: 280px; padding: 5px 8px; border: 1px solid var(--rule-strong);
       background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 0.75rem; line-height: 1.35;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); pointer-events: none; }
.tip.is-open { display: block; }
/* While a finger is down, everything but the shape under it fades: what is named is plain to see. */
.is-touching rect:not(.is-touched), .is-touching path:not(.is-touched) { opacity: 0.4; }
.is-touched { stroke: var(--ink) !important; stroke-width: 1.5px !important; }

/* --- Admin: the run as a funnel, plain tables --------------------------------------------------- */
.admin table.funnel th[scope="row"] { white-space: nowrap; font-weight: 600; }
.admin td.rules { font-size: 0.75rem; color: var(--muted); max-width: 22em; }
.admin td.rules code { font-size: 0.75rem; }
.admin .fold { margin: 4px 0 0; font-size: 0.8125rem; }
.admin .fold summary { cursor: pointer; color: var(--muted); }
.admin tr.trouble th[scope="row"] { font-weight: 600; }
.admin ol.plain-list { padding-left: 1.4em; }
.admin ol.plain-list li { margin: 0 0 4px; }