/* OSFeed V2: single stylesheet, mobile first, no framework. Art direction "A · Wire desk" (docs/e0-wire-desk):
   IBM Plex (static/css/fonts.css), a black band for the header, ink on cool grey, one orange used only for live signal.
   Colours are tokens on :root with a dark set under prefers-color-scheme (automatic, no switch). Every text/background
   pair meets WCAG AA (>= 4.5:1, WCAG 2 formula; checked for both themes). Meaning never relies on colour alone: every
   badge carries its label in words (plus a textual marker).
   Dark mode covers every page that uses these tokens (all of them, except the static 500 page and the inline-styled
   e-mail preview, which keep their own light colours). */

:root {
  color-scheme: light dark;
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface-2: #eceef1;
  --line: #dde1e6;          /* hairlines */
  --line-2: #c3c9d1;        /* borders of boxes and buttons */
  --text: #0f1216;          /* 16.9:1 on bg */
  --muted: #434b57;         /* 7.9:1 on bg */
  --ink-3: #5e6774;         /* 5.2:1 on bg, 4.9:1 on surface-2 */
  --border: var(--line-2);
  --link: var(--text);
  --link-hover: #b23f06;
  --accent: #0f1216;        /* primary buttons: ink, never orange */
  --accent-text: #ffffff;
  --hot: #b23f06;           /* live signal only (growth, new-source tags, last spark bar): 5.2:1 on bg, 5.8:1 on white */
  --sel: #fff6f0;           /* selected report: tint + 3px bar of --hot */
  --flash: #ffe9d6;         /* a row that just got a new source: 5.0:1 for --hot text */
  --focus: #b23f06;         /* focus ring (non-text, needs 3:1) */
  --amber: #8a5300;         /* "contests it": 6.3:1 on white */
  --amber-line: #d99a2b;

  --band: #0f1216;          /* the black band: site header and the Now band */
  --band-line: #0f1216;
  --band-ink: #f2f3f5;
  --band-ink-2: #a3abb6;    /* 8.1:1 on band */
  --signal: #ff7a3d;
  --signal-halo: rgba(255, 122, 61, .25);

  --single-bg: #eceff1;  --single-fg: #263238;   /* 11.4:1 */
  --one-bg: #fff4d6;     --one-fg: #5c3d00;      /* 9.0:1 */
  --both-bg: #e3f4e8;    --both-fg: #0d4d24;     /* 8.7:1 */
  --contra-bg: #fde8e8;  --contra-fg: #7a1010;   /* 9.4:1 */
  --field-border: #7b8288;  /* 3.9:1 on white (non-text, needs 3:1) */

  --radius: 4px;
  --measure: 44rem;
  font-size: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --surface: #12161b;
    --surface-2: #1a1f26;
    --line: #242a32;
    --line-2: #363e48;
    --text: #e9ecf0;        /* 16.4:1 on bg */
    --muted: #a9b2be;       /* 9.3:1 on bg, 8.5:1 on surface */
    --ink-3: #8892a0;       /* 6.2:1 on bg, 5.3:1 on surface-2 */
    --link-hover: #ff8a4c;
    --accent: #e9ecf0;
    --accent-text: #0b0d10;
    --hot: #ff8a4c;         /* 8.3:1 on bg, 7.6:1 on sel */
    --sel: #1c1712;
    --flash: #2a1d12;
    --focus: #ff8a4c;
    --amber: #e8b25a;       /* 9.5:1 on surface */
    --amber-line: #a8741d;

    --band: #07090b;
    --band-line: #242a32;
    --band-ink: #e9ecf0;
    --band-ink-2: #99a3b0;  /* 7.8:1 on band */
    --signal: #ff8a4c;
    --signal-halo: rgba(255, 138, 76, .22);

    --single-bg: #1a1f26;  --single-fg: #c9d1db;   /* 10.8:1 */
    --one-bg: #2a2110;     --one-fg: #f2d08a;      /* 10.7:1 */
    --both-bg: #12261a;    --both-fg: #9adbb0;     /* 10.0:1 */
    --contra-bg: #2d1416;  --contra-fg: #f4a6a6;   /* 8.9:1 */
    --field-border: #6b7480;  /* 3.8:1 on surface (non-text) */
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-color: var(--line-2); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The skip link focuses <main> (tabindex="-1"): no ring around the whole page. */
main:focus { outline: none; }
/* Long ids, handles and URLs never push the page sideways on a phone. */
main { overflow-wrap: break-word; }

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

h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; margin-top: 1rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-text); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: 0.5rem; }

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

/* --- header / footer --- */
/* The black band. Wider than the reading column so that it lines up with the Now grid (max 1440 px). */
.site-header { background: var(--band); color: var(--band-ink); border-bottom: 1px solid var(--band-line); }
.site-header .wrap { max-width: none; padding-inline: max(1.5rem, calc((100% - 1392px) / 2)); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 1.5rem; min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font: 600 15px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--band-ink); padding: 0.6rem 0; }
.brand:hover { color: var(--band-ink); }
.brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-halo); }
/* the Now band carries its own live dot */
body:has(main.now) .site-header .brand::before { display: none; }
.nav { list-style: none; display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin: 0; padding: 0; font-size: 14px; }
/* touch targets >= 24 px (WCAG 2.5.8) on phones */
.nav a, .nav .linklike, .footer-links a { display: inline-block; padding: 0.3rem 0; }
.site-header .nav a, .site-header .nav .linklike { padding: 15px 10px; color: var(--band-ink-2); text-decoration: none; border-bottom: 2px solid transparent; line-height: 1.5; font-size: 14px; }
.site-header .nav a:hover, .site-header .nav .linklike:hover { color: var(--band-ink); }
.site-header .nav a[aria-current="page"] { color: var(--band-ink); border-bottom-color: var(--signal); }
.site-header :focus-visible { outline-color: var(--signal); }
@media (max-width: 760px) {
  .site-header .wrap { padding-inline: 1rem; }
  .header-inner { min-height: 0; padding-top: 0.25rem; }
  .site-header .nav a, .site-header .nav .linklike { padding: 10px 8px; }
}
.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }

.site-footer { margin-top: 4rem; border-top: 1px solid var(--text); color: var(--muted); font-size: 0.8667rem; padding: 1.5rem 0; }
.site-footer .wrap { max-width: none; padding-inline: max(1.5rem, calc((100% - 1392px) / 2)); }
.site-footer p { max-width: 64ch; margin: 0; }
.site-footer a { color: var(--text); }

/* --- generic --- */
.lead { font-size: 1.125rem; }
.muted { color: var(--muted); }
.note { color: var(--muted); }
.count { color: var(--muted); font-size: 0.95rem; }
.crumbs { font-size: 0.95rem; margin: 1rem 0 0; }
.sep { color: var(--muted); padding: 0 0.15em; }

.button {
  display: inline-block; background: var(--accent); color: var(--accent-text); border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 0.6rem 1rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--muted); border-color: var(--muted); color: var(--accent-text); }
.button-secondary { background: transparent; color: var(--text); border-color: var(--line-2); }
.button-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.card h2 { margin-top: 0; }
.card + .card { margin-top: 1rem; }
.grid-2, .grid-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.hero { padding: 1.5rem 0 0.5rem; }
.hero h1 { font-size: 2rem; }
.price { font-size: 1.2rem; }

.defs dt { margin-top: 0.75rem; font-weight: 600; }
.defs dd { margin: 0.25rem 0 0; }

/* --- flash / forms --- */
/* Messages (templates/_messages.html): info and debug neutral, success green, warning amber, error red. */
.flash p { padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.flash-error { border-color: var(--contra-fg) !important; background: var(--contra-bg) !important; color: var(--contra-fg); }
.flash-success { border-color: var(--both-fg) !important; background: var(--both-bg) !important; color: var(--both-fg); }
.flash-warning { border-color: var(--one-fg) !important; background: var(--one-bg) !important; color: var(--one-fg); }

/* Empty lists: a helpful sentence, set apart from content. */
.empty { color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }

/* Pro upsell (templates/_pro_teaser.html), the same everywhere. */
.pro-teaser { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem; }
.pro-teaser .tag { margin-right: 0.3rem; }

.form.narrow { max-width: 24rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.help { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 0; }
.field-check { display: flex; gap: 0.5rem; align-items: center; align-self: end; }
.field-check label { display: inline; margin: 0; }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.error, .errors { color: var(--contra-fg); }

.filters { display: grid; gap: 0.5rem 1rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 40rem) { .filters { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }

/* --- tags & badges --- */
.tag, .badge {
  display: inline-block; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  padding: 0.1rem 0.5rem; border-radius: 3px; border: 1px solid currentColor; white-space: nowrap;
}
.tag { background: var(--surface); color: var(--muted); }
.badge .marker { display: inline-block; min-width: 1em; margin-right: 0.3em; font-weight: 700; }
.badge-single_source { background: var(--single-bg); color: var(--single-fg); }
.badge-one_side { background: var(--one-bg); color: var(--one-fg); }
.badge-both_sides { background: var(--both-bg); color: var(--both-fg); }
.badge-contradicted { background: var(--contra-bg); color: var(--contra-fg); }
.badge-status { background: var(--surface); }
.badge-status-reported { color: var(--single-fg); }
.badge-status-relayed { background: var(--one-bg); color: var(--one-fg); }
.badge-status-corroborated { background: var(--both-bg); color: var(--both-fg); }
.decision-status { font-size: 0.85rem; font-weight: 600; }
.decision-applied { color: var(--both-fg); }
.decision-pending { color: var(--contra-fg); }
.decision-superseded { color: var(--muted); font-weight: 400; }

/* --- week / story --- */
.story-card { border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 1.5rem; }
.story-card h2 { margin-top: 0.5rem; }
.story-card h2 a { text-decoration: none; color: var(--text); }
.story-card h2 a:hover { text-decoration: underline; }

.incident-lines { list-style: none; margin: 0.5rem 0; padding: 0; }
.incident-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.incident-line > a { text-decoration: none; color: var(--text); }
.incident-line > a:hover .place { text-decoration: underline; }
.incident-line .place { font-weight: 600; }
.line-badges { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }

.story-summary { margin: 0.25rem 0 0.5rem; font-weight: 600; }
.story-summary .muted { font-weight: 400; }
.more { margin: 0.25rem 0 0; }
.secondary-stories { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 0.5rem; }
.secondary-lines { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.secondary-lines li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.secondary-lines time { font-size: 0.9rem; white-space: nowrap; }
.secondary-note { margin-top: -0.5rem; }
.legend { font-size: 0.9rem; }
.legend-item { white-space: nowrap; }
.count { font-size: 0.9rem; font-weight: 400; }
.day { margin-top: 2rem; }
.day > h2 { border-bottom: 2px solid var(--border); padding-bottom: 0.25rem; }
.country h3 { font-size: 1.05rem; margin: 1.25rem 0 0.25rem; }
.place-lines { list-style: none; margin: 0; padding: 0; }
.place-line { padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.place-line .place { font-weight: 600; }
.facts { list-style: none; margin: 0.15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.fact { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.fact time { font-variant-numeric: tabular-nums; }
.fact .badge, .fact .tag { font-size: 0.75rem; padding: 0 0.4rem; }
.fact-statement .kind, .fact-claim .kind { font-style: italic; }
.facts-unplaced { padding: 0.45rem 0; }
.split-note { color: var(--muted); font-size: 0.85rem; }
.split-from { font-size: 0.95rem; }

.related-facts { border-top: 2px solid var(--border); margin-top: 2rem; }
.related-facts h3 { margin: 1rem 0 0.25rem; }
.related-lines { list-style: none; margin: 0; padding: 0; }
.related-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.related-line time { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.related-type { color: var(--muted); font-size: 0.8rem; font-style: italic; }
.related-note { font-size: 0.85rem; }

.incident { border-top: 2px solid var(--border); margin-top: 2rem; padding-top: 0.25rem; }
.incident-meta { margin: 0.25rem 0; }
.incident-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }

.version { background: var(--surface); border-left: 4px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.75rem 1rem; margin: 1rem 0; }
.version-denial { border-left-color: var(--contra-fg); }
.version .camp { margin: 0 0 0.5rem; font-size: 1.05rem; }
.version blockquote { margin: 0; padding: 0; }
.version blockquote p { margin: 0; }
.translation-note { font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0; }
.who { margin: 0.6rem 0 0.25rem; }
.affirmer { white-space: normal; }
details summary { cursor: pointer; color: var(--link); margin-top: 0.4rem; }
.originals { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.originals li { border-top: 1px solid var(--border); padding: 0.5rem 0; }
.originals .muted { margin: 0; font-size: 0.9rem; }
.original { margin: 0.25rem 0 0; unicode-bidi: plaintext; }

.overview { border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.5rem 1rem; margin: 1.5rem 0; }
.overview h2 { margin-top: 0.25rem; }
.overview blockquote { margin: 0.25rem 0 0; padding: 0; }
.overview blockquote p { margin: 0; }
.overview-note { margin: 1rem 0; font-size: 0.95rem; }
.overview-note p { margin: 0; }

.why-grouped { border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.5rem 1rem; }
.why-grouped h3, .why-grouped h2 { margin-top: 0.25rem; font-size: 1rem; }

/* "Report an error" on an event page: discreet until opened. */
.report-error { margin: 2rem 0 1rem; font-size: 0.95rem; }
.report-error > summary { color: var(--muted); font-size: 0.9rem; }
.report-form { margin-top: 0.75rem; max-width: 40rem; }
.report-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 1rem; padding: 0.5rem 0.8rem; }
.report-form legend { font-weight: 600; padding: 0 0.25rem; }
.report-form .choice { display: block; margin: 0.3rem 0; }
.report-excerpt { display: block; margin-inline-start: 1.6rem; color: var(--muted); font-size: 0.9rem; unicode-bidi: plaintext; }
.report-form textarea, .feedback-form textarea { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
/* Show the message checkboxes / the other-event field only for the kind that uses them (all shown without :has). */
.report-form:has(input[name=kind]:checked:not([value=wrong_grouping])) .report-messages,
.report-form:has(input[name=kind]:checked:not([value=missing_link])) .report-other,
.report-form:not(:has(input[name=kind]:checked)) .report-messages,
.report-form:not(:has(input[name=kind]:checked)) .report-other { display: none; }

/* --- sources --- */
.source-list { list-style: none; padding: 0; margin: 0; }
.source-list li { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
.source-head { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.why { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; }

/* --- tables (advanced / review) --- */
.table-wrap { overflow-x: auto; }
table.raw { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
table.raw th, table.raw td { border-bottom: 1px solid var(--border); padding: 0.4rem; text-align: start; vertical-align: top; }
table.raw td p { margin: 0; }
.merge-form { display: grid; gap: 0.5rem; margin: 1rem 0; }
.review td form input[type=text] { margin-bottom: 0.3rem; }
details.overview > summary { cursor: pointer; }
details.overview > summary .overview-title { display: inline; font-size: 1.15rem; margin: 0; }

/* Pair labelling screen */
.label-pair { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 1rem 0; }
.label-msg { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; }
.label-msg h2 { font-size: 1rem; margin-top: 0; }
.label-original { font-size: 1.05rem; white-space: normal; overflow-wrap: anywhere; }
.label-en { overflow-wrap: anywhere; }
.label-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.label-undo { margin-top: 1rem; }
.progress { width: 100%; }
@media (max-width: 700px) { .label-pair { grid-template-columns: 1fr; } }

/* Live feed */
.live-filter { margin: 0.5rem 0 1rem; }
.live-filter [aria-current] { font-weight: 700; text-decoration: none; }
.live-feed { list-style: none; padding: 0; }
.live-item { border-top: 1px solid var(--border); padding: 0.75rem 0; }
.live-item h2 { font-size: 1.1rem; margin: 0.25rem 0; }
.live-head { margin: 0; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.origin { margin: 0.5rem 0 0; padding-left: 0.75rem; border-left: 3px solid var(--border); }
.origin-text, .translation { overflow-wrap: anywhere; }
.live-changes { background: var(--surface); padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.live-changes h2 { font-size: 1rem; margin: 0 0 0.25rem; }
.live-changes ul { margin: 0; padding-left: 1.1rem; }

/* Advanced mode (Pro) */
.filter-actions { display: flex; gap: 1rem; align-items: center; align-self: end; }
.feed { list-style: none; padding: 0; margin: 0.5rem 0; }
.feed-item { border-top: 1px solid var(--border); padding: 0.6rem 0; }
.feed-meta { margin: 0; color: var(--muted); font-size: 0.9rem; }
.feed-text { margin: 0.3rem 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.feed-event { margin: 0.3rem 0 0; font-size: 0.92rem; }
.feed-more { padding: 1rem 0; }

/* --- public showcase (home, method, pricing, sources) --- */
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.5rem 0 0; padding: 0; }
.footer-links a { overflow-wrap: anywhere; }

.steps { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: step; }
.steps > li { counter-increment: step; margin: 0; }
.steps > .card + .card { margin-top: 0; }
.steps h3 { margin: 0 0 0.25rem; }
.steps h3::before { content: counter(step) ". "; color: var(--muted); }
.steps p { margin: 0; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.illustration { margin: 1rem 0; border: 2px dashed var(--border); border-radius: var(--radius); padding: 0.75rem 1rem 1rem; }
.illustration figcaption { color: var(--muted); font-size: 0.9rem; }
.illustration-label { display: inline-block; font-weight: 700; color: var(--contra-fg); background: var(--contra-bg); border: 1px solid currentColor; border-radius: 3px; padding: 0 0.5rem; margin-right: 0.4rem; }
.illustration-card { margin-top: 0.75rem; }
.illustration-title { font-size: 1.15rem; margin: 0.5rem 0 0; }
.illustration-related { font-size: 0.9rem; margin: 0.75rem 0 0; }
.illustration .version blockquote p { overflow-wrap: anywhere; }

.audience { padding-left: 1.1rem; }
.audience li { margin: 0.35rem 0; }
.plan-teaser { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 1.1rem; }

.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 1rem; margin: 1rem 0; font-size: 0.95rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
section[id] { scroll-margin-top: 1rem; }

.faq details { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.faq summary { font-weight: 600; color: var(--text); }
.faq details p { margin: 0.4rem 0 0.25rem; }
.plan ul { padding-left: 1.1rem; }

/* Alert rules (Pro) */
.alert-form { max-width: 40rem; }
.alert-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 1rem; padding: 0.5rem 0.8rem; }
.alert-form legend { font-weight: 600; padding: 0 0.25rem; }
.alert-form .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.15rem 1rem; margin-top: 0.25rem; }
.alert-form .choice { display: flex; gap: 0.4rem; align-items: baseline; margin: 0; }
.alert-form textarea, .alert-form input[type=number] { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.alert-form input[type=number] { max-width: 8rem; }
.alert-test { margin: 1rem 0; }
.alert-events { list-style: none; margin: 0.5rem 0; padding: 0; }
.alert-events li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.alert-events time { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.rule-list { list-style: none; margin: 1rem 0; padding: 0; }
.rule { border-top: 1px solid var(--border); padding: 0.5rem 0 0.75rem; }
.rule h2 { font-size: 1.15rem; margin: 0.25rem 0; }
.rule-summary { margin: 0.25rem 0; overflow-wrap: anywhere; }
.rule-off h2 a { color: var(--muted); }
.recent-hits { border-top: 2px solid var(--border); margin-top: 2rem; }
.g3-engine { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.g3-engine dt { font-weight: 600; }
.g3-engine dd { margin: 0; }
.g3-form fieldset { margin: 0.75rem 0; }
.g3-form label { margin-right: 1rem; }
.g3-camps { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }

/* --- live: events being checked, held new reports, paused banner --- */
.badge-checking { background: var(--surface); border: 1px dashed currentColor; }
.live-item-checking { opacity: 0.92; }
.new-reports { display: block; width: 100%; margin: 0.5rem 0 1rem; padding: 0.5rem 1rem; font: inherit; font-weight: 700;
  cursor: pointer; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.new-reports[hidden], .live-banner[hidden], .live-poll[hidden] { display: none; }
.live-banner { padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); }
.origin-en { margin-top: 0.25rem; }

/* team glossary: one name per line */
ul.plain { list-style: none; margin: 0; padding: 0; }

/* actor note: tap/keyboard popover (hover keeps the native title tooltip) */
.gl { position: relative; cursor: help; }
.gl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-pop {
  position: absolute; left: 0; top: 100%; z-index: 20; margin-top: 0.3rem; width: max-content; max-width: min(18rem, 80vw);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.4rem 0.6rem; font: 400 0.8667rem/1.4 var(--font-sans, inherit); white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}