/* Plague News: outbreak monitor.
 *
 * One screen, no page scroll on a desktop: a header, a strip of reported figures, three columns
 * (situation, map and figures by day, timeline and reports) and a footer line. Panels scroll inside
 * themselves. Below 1100px it becomes one ordinary scrolling column.
 *
 * Type: Inter for everything you work with, sentence case, tabular figures; EB Garamond only for
 * the wordmark, the summary's headline, the timeline's days and the tally's sentence of figures. No monospace, no letter-spaced
 * capitals: they read as a template, not as a tool someone works in.
 *
 * Depth comes from three surface levels (page, panel, raised drawer and tooltip), a hairline
 * highlight on each panel's top edge and one soft shadow from a light above. No glow, no neon.
 *
 * Ornament: Bosch-style engravings (static/art, docs/art.md) at the edges only: the logo, the
 * footer's procession, a sea monster in the empty Pacific, empty states, the Method tab. Never near
 * the figures, the summary or the death.
 *
 * Colour: a graphite scale for surfaces and text, and few hues, each with one job.
 *   --blue    the Siberian outbreak (map pins, chart series) and interface focus
 *   --other   other plague reports (validated against --blue on --p1 for colour-blind readers)
 *   --red     deaths and the top assessment level only
 *   --amber   warnings: sensational framing, the middle assessment levels
 * Text never wears a series colour.
 */
:root {
  --bg: #0d0f12; --p1: #15181c; --p2: #1a1d22; --p3: #22262c; --line: #24282f; --line2: #323740;
  --tx: #f2efe8; --tx2: #d8d4cb; --tx3: #b1ada4; --tx4: #9e9a91; --tx5: #8a857d; /* tx5 is the faintest text: 4.86:1 on a panel, AA */
  --bone: #e8e2d4; --hl-ink: #17150a;
  /* the three kinds of time on an event: when it happened, first published, first seen */
  --t-event: #9db8a4; --t-pub: #cdb98f; --t-seen: #9e9a91;
  --shadow: 0 1px 1px rgba(0, 0, 0, .45), 0 14px 34px -18px rgba(0, 0, 0, .85);
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --blue: #4c90f0; --blue-bg: rgba(45, 114, 210, .16); --other: #c87619;
  --red: #e76a6e; --amber: #fbb360; --green: #72ca9b;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; color: var(--tx2); font: 400 13px/1.45 var(--sans); font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  /* fine grain, like the paper an engraving is pulled on, so the black is not a screen's flat black */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") }
::selection { background: rgba(250, 228, 80, .75); color: var(--hl-ink) }
a { color: inherit; text-decoration: none }
a:hover { color: var(--tx); text-decoration: underline; text-decoration-color: var(--tx5); text-underline-offset: 2px }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--tx) }
p { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
[x-cloak] { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px }
::-webkit-scrollbar-track { background: transparent }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent }

/* ---- frame ---------------------------------------------------------------------------------- */
.dash { display: grid; grid-template-rows: 50px auto minmax(0, 1fr) 40px; gap: 8px; height: 100vh; padding: 0 10px }
.main { display: grid; grid-template-columns: 350px minmax(0, 1fr) 470px; gap: 8px; min-height: 0 }
.center { display: grid; grid-template-rows: minmax(0, 1fr) 200px; gap: 8px; min-height: 0; min-width: 0 }
.analytics { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; min-height: 0 }
.pnl { position: relative; background: var(--p1); border: 1px solid rgba(255, 255, 255, .055); border-radius: 6px; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--shadow) }
.pnl-h { flex: none; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(255, 255, 255, .012) }
.pnl-h h2 { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--tx) }
.pnl-h h2 .i { color: var(--tx4) }
.pnl-h > * { flex: none }
.pnl-h .meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: auto; font-size: 12px; color: var(--tx4) }
.pnl-b { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px }
/* htmx fragment wrappers pass the grid cell's size through to their panel */
.frag { display: flex; flex-direction: column; min-height: 0; min-width: 0 }
.frag > * { flex: 1; min-height: 0 }
.frag-kpis > * { flex: none }
.lbl { font-size: 12px; font-weight: 600; color: var(--tx3) }
.sub { font-size: 12px; color: var(--tx4) }
.empty { color: var(--tx4); font-size: 12.5px; padding: 8px 0 }
.pad { padding: 12px 14px }

/* ---- header --------------------------------------------------------------------------------- */
.top { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); white-space: nowrap; min-width: 0; font-size: 12.5px; color: var(--tx3) }
h1.top-h { margin: 0; font: inherit }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 600 23px/1 var(--serif); color: var(--tx); letter-spacing: .005em }
.brand img { display: block; width: 30px; height: 30px }
.brand:hover { text-decoration: none }
.top .what { color: var(--tx3); overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.top .pv { font-size: 11.5px; color: var(--tx4); border: 1px solid var(--line2); border-radius: 3px; padding: 2px 6px }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 16px }
.live .ago:not(:empty)::before { content: "(" }
.live .ago:not(:empty)::after { content: ")" }
.live.stale .ago { color: var(--amber) }
.top .tz { color: var(--tx4) }

/* ---- reported figures (owner, 2026-10-05: no tiles, no sentence; three groups, Bosch at the ends) - */
.tally { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 10px 18px 10px 14px;
  background: var(--p1); border: 1px solid rgba(255, 255, 255, .055); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--shadow) }
.tally-art { display: block; height: 88px; width: auto; opacity: .72 }
.figs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; min-width: 0 }
.fc { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: 4px 22px 4px 0; background: none; border: 0;
  color: inherit; font: inherit; text-align: left; cursor: default }
.fc.gs { padding-left: 28px; border-left: 1px solid var(--line2) }
button.fc { cursor: pointer }
button.fc:focus-visible { outline: 2px solid rgba(255, 255, 255, .3); outline-offset: 2px; border-radius: 3px }
.fc .fv { font: 600 30px/1.05 var(--sans); color: var(--tx); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap }
.fc .fv small { font-size: 14px; font-weight: 500; color: var(--tx4); letter-spacing: 0 }
.fc .fv small.was { margin-left: 7px; font-size: 12px; color: var(--tx4) }
.fc .fv.none { font-size: 22px; line-height: 1.43; font-weight: 500; color: var(--tx5); letter-spacing: 0 }
.fc.death .fv { color: var(--red) }
.fc .fl { margin-top: 7px; font-size: 12.5px; font-weight: 500; color: var(--tx2); white-space: nowrap }
.fc .fa { margin-top: 2px; font-size: 11.5px; color: var(--tx4); white-space: nowrap }
.fc .fa .chg { color: var(--amber) }
button.fc:hover .fl { text-decoration: underline; text-decoration-color: var(--tx4); text-underline-offset: 3px }
@media (max-width: 1260px) { .fc { padding-right: 16px } .fc.gs { padding-left: 20px } .fc .fv { font-size: 26px } }
@media (max-width: 1100px) {
  .tally-art.r { display: none }
  .figs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px }
  .fc.gs { padding-left: 0; border-left: 0 }
}
@media (max-width: 700px) {
  .tally { grid-template-columns: minmax(0, 1fr); padding: 12px 14px }
  .tally-art { display: none }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .fc .fl, .fc .fa { white-space: normal }
}

/* ---- situation ------------------------------------------------------------------------------ */
.assess { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px }
.assess .lv { margin-top: 6px; font-size: 13px; color: var(--tx2) }
.assess .lv b { color: var(--tx) }
.assess .sub { margin-top: 6px; font-size: 11.5px }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 0; background: var(--amber) }
.sw.lv-0 { background: var(--green) }
.sw.lv-2, .sw.lv-3 { background: var(--red) }
.brief h3 { font: 500 20px/1.22 var(--serif); color: var(--tx); margin-bottom: 8px; text-wrap: balance }
.brief > p { color: var(--tx2); font-size: 13px; line-height: 1.55 }
.brief .ai { margin: 8px 0 0; font-size: 11.5px; color: var(--tx4) }
.blk { margin-top: 16px }
.blk .lbl { margin-bottom: 6px }
.pts li { position: relative; padding: 0 0 8px 14px; font-size: 13px; color: var(--tx2) }
.pts li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--tx4) }
.cites { display: inline; font-size: 12px; color: var(--tx4) }
.cites a { color: var(--tx3); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px }
.assess details.care { margin: 10px 0 0 }
details.care { margin: -4px 0 14px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 5px; background: rgba(255, 255, 255, .015) }
details.care summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--tx) }
details.care p, details.care li { margin-top: 6px; font-size: 12.5px; color: var(--tx3) }
details.care a { color: var(--blue) }

/* ---- map ------------------------------------------------------------------------------------ */
.mapwrap { position: relative; flex: 1; min-height: 0; background: #0c0f13; box-shadow: inset 0 0 70px rgba(0, 0, 0, .6) }
.mapwrap svg { position: absolute; inset: 0; width: 100%; height: 100% }
.pin circle { stroke: #0c0f13; stroke-width: .6 }
.pin.linked circle { fill: var(--blue); fill-opacity: .85 }
.pin.other circle { fill: var(--other); fill-opacity: .9 }
.pin .halo { fill: none !important; stroke: var(--blue); stroke-opacity: .3 }
.pin.other .halo { stroke: var(--other) }
.pin.death .halo { stroke: var(--red); stroke-opacity: .9 }
.plabel text { font-family: var(--sans); font-weight: 600; fill: var(--tx); paint-order: stroke; stroke: #0c0f13; stroke-linejoin: round; pointer-events: none }
.plabel text.fig { font-weight: 500; fill: var(--tx3) }
.pin { cursor: zoom-in }
.pin:hover circle, .pin:focus circle { fill-opacity: 1 }
.pin:focus { outline: none }
.pin:focus-visible .halo { stroke: var(--tx); stroke-opacity: 1 }
.monster { opacity: .55; pointer-events: none }
.mapwrap:not([data-v="world"]) .monster { display: none }
.mapwrap svg.inset { position: absolute; inset: 10px 10px auto auto; width: 150px; height: 83px; border: 1px solid var(--line2); border-radius: 4px; background: #0c0f13; box-shadow: var(--shadow) }
.inset rect { fill: rgba(242, 239, 232, .08); stroke: var(--tx); stroke-width: 1.2; vector-effect: non-scaling-stroke }
.ref { pointer-events: none }
.ref circle { fill: var(--tx4) }
.ref text, text.ref { font-family: var(--sans); fill: var(--tx4); paint-order: stroke; stroke: #0c0f13; stroke-linejoin: round }
text.ref.area { fill: var(--tx5); font-style: italic; text-anchor: middle }
.mapwrap[data-v="world"] .ref { display: none }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden }
.seg button { font: 500 12px/1 var(--sans); color: var(--tx3); background: transparent; border: 0; padding: 5px 10px; cursor: pointer }
.seg button + button { border-left: 1px solid var(--line2) }
.seg button[aria-pressed="true"] { background: var(--p3); color: var(--tx) }
.legend { position: absolute; left: 10px; bottom: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--tx3); pointer-events: none }
.legend > span { background: rgba(12, 15, 19, .85); padding: 3px 6px; border-radius: 3px }
.legend .note { margin-left: auto; color: var(--tx4) }
.key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0 }
.key.linked { background: var(--blue) }
.key.other { background: var(--other) }
.key.bar { border-radius: 1px }
.key.death { background: transparent; box-shadow: inset 0 0 0 2px var(--red) }
.tip { position: absolute; z-index: 5; max-width: 300px; background: var(--p3); border: 1px solid var(--line2); border-radius: 5px; padding: 8px 10px; font-size: 12px; color: var(--tx2); pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .5) }
.tip b { display: block; color: var(--tx); font-weight: 600; margin-bottom: 3px }
.tip div { color: var(--tx3) }

/* ---- figures by day and the chart ----------------------------------------------------------- */
.scroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 8px }
.figs th { font-weight: 500 }
.figs td.n { font-weight: 600; color: var(--tx3) }
.figs td.n.up { color: var(--tx) }
.figs td.n.thin { color: var(--tx5); font-weight: 500; text-decoration: underline dotted var(--tx5); text-underline-offset: 3px }
.figs td.na { font-weight: 400; color: var(--tx5); font-size: 11.5px }
.figs td:first-child { color: var(--tx3); white-space: nowrap; padding-right: 12px }
/* More days than fit: the names stay put and the days scroll, opened on the newest (enhance.js). */
.figs th:first-child, .figs td:first-child { position: sticky; left: 0; z-index: 1; background: var(--p1) }
.figs th, .figs td.n, .figs td.na { white-space: nowrap }
.chart .ec { height: 100% }
.chart .peak { position: absolute; left: 12px; top: 3px; font-size: 10.5px; color: var(--tx5) }
.chart .xax { position: relative; height: 14px; margin: 0 }
.chart .xax span { position: absolute; top: 2px; font-size: 11px; color: var(--tx4); white-space: nowrap }
.chart .grid { stroke: var(--line); stroke-width: 1 }
.chart .base { stroke: var(--line2); stroke-width: 1 }
.chart .hit { fill: transparent; cursor: crosshair }
.chart .hit:hover, .chart .hit.on { fill: rgba(255, 255, 255, .04) }
.clegend { display: flex; gap: 14px; white-space: nowrap; overflow: hidden; padding: 0 12px 8px; font-size: 11.5px; color: var(--tx3) }

/* ---- tabs ----------------------------------------------------------------------------------- */
.tabbar { padding: 0 4px; gap: 0; height: 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
.tabbar::-webkit-scrollbar { display: none }
.tabbar button { flex: none; height: 100%; padding: 0 8px; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 500 13px/1 var(--sans); color: var(--tx3) }
.tabbar button b { margin-left: 2px; font-weight: 500; color: var(--tx5) }
.tabbar button:hover { color: var(--tx) }
.tabbar button[aria-selected="true"] { color: var(--tx); border-bottom-color: var(--blue) }
.tabbar button[aria-selected="true"] b { color: var(--tx4) }
.tabp { flex: 1; min-height: 0; overflow: auto; padding: 0 }
.loading { color: var(--tx4); font-size: 12.5px; padding: 14px }

/* timeline */
.day { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; padding: 7px 14px 6px; background: var(--p2); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--tx4); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, .9) }
.day .d { font: 600 16px/1.2 var(--serif); color: var(--tx) }
.newsince { padding: 7px 14px; font-size: 12px; color: var(--tx2); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02) }
.ev { padding: 11px 14px 12px; border-bottom: 1px solid var(--line) }
.ev.is-new { box-shadow: inset 2px 0 0 var(--bone) }
.ev .sep, .rep .sep { font-size: 11.5px; font-weight: 500; color: var(--tx3); white-space: nowrap }
.ev h3 { margin: 0 0 5px; font-size: 13.5px; line-height: 1.35 }
.ev .f { font-size: 12.5px; line-height: 1.5; color: var(--tx3) }
.ev .m { display: flex; flex-wrap: wrap; gap: 0 10px; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--tx4) }
.ev .m a { color: var(--tx2); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px }
.ev .m .when { white-space: nowrap }
.ev details { margin-top: 6px }
.ev summary { cursor: pointer; font-size: 12px; color: var(--tx3) }
.ev summary:hover { color: var(--tx) }
.ev details ul { margin-top: 6px; columns: 2; column-gap: 14px }
.ev details li { break-inside: avoid; font-size: 12px; color: var(--tx3); padding: 1px 0 }
.ev details li span { font-size: 11px; color: var(--tx5); margin-left: 5px }

/* reports */
.flt { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--p2); border-bottom: 1px solid var(--line) }
.flt input[type=search], .flt select { font: 400 12.5px/1 var(--sans); color: var(--tx); background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; padding: 5px 8px; height: 29px }
.flt input[type=search] { flex: 1 1 100%; min-width: 120px }
.flt select { flex: 1 1 28%; min-width: 0 }
.flt label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx3); cursor: pointer }
.flt input[type=checkbox] { accent-color: var(--blue); margin: 0 }
.count { padding: 7px 14px; font-size: 12px; color: var(--tx4); border-bottom: 1px solid var(--line) }
.rep { padding: 11px 14px; border-bottom: 1px solid var(--line) }
.rep .t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--tx4) }
.rep .t .o { color: var(--tx2); font-weight: 600; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line2); border-radius: 3px; font-size: 11px; color: var(--tx3) }
.tag.warn { color: var(--amber); border-color: rgba(251, 179, 96, .4) }
.rep h3 { margin: 3px 0 3px; font-size: 14px; line-height: 1.35 }
.rep h3 a:hover { color: var(--tx); text-decoration-color: var(--tx4) }
.rep .orig { font-size: 12px; color: var(--tx5) }
.rep .l { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--tx3) }
.rep .m { margin-top: 5px; font-size: 12px; color: var(--tx4) }
.more { display: block; width: calc(100% - 28px); margin: 12px 14px 16px; padding: 8px; background: transparent; border: 1px solid var(--line2); border-radius: 4px; color: var(--tx2); font: 500 12.5px var(--sans); cursor: pointer }
.more:hover { border-color: var(--tx4); color: var(--tx) }

/* early warning and method */
.sec { padding: 12px 14px 14px; border-bottom: 1px solid var(--line) }
.sec > .lbl { margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; color: var(--tx) }
.sec > .lbl span { color: var(--tx4); font-weight: 400 }
.sec > p { font-size: 12.5px; color: var(--tx3) }
.flag { padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px }
.lbl + .flag { border-top: 0; padding-top: 0 }
.flag a { color: var(--tx) }
.flag .m { margin-top: 2px; font-size: 12px; color: var(--tx4) }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px }
.tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--tx4); padding: 4px 8px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap }
.tbl td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); color: var(--tx2) }
.tbl tr:last-child td { border-bottom: 0 }
.tbl td.n, .tbl th.n { text-align: right }
.tbl tr.pass td { color: var(--tx); font-weight: 600 }
.spark { display: block }
.spark rect { fill: var(--tx5) }
.spark rect.last { fill: var(--tx2) }
.prose p { font-size: 12.5px; line-height: 1.55; color: var(--tx3); margin-bottom: 8px }
.prose p:last-child { margin-bottom: 0 }
.prose a { color: var(--blue) }

/* ---- footer --------------------------------------------------------------------------------- */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--tx4); white-space: nowrap; overflow: hidden }
.foot > span:first-child { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis }
.foot a { color: var(--tx3); text-decoration: underline; text-decoration-color: var(--line2) }

/* ---- preview gate and fragment pages -------------------------------------------------------- */
.gate { min-height: 100vh; display: grid; place-content: center; gap: 14px; text-align: center }
.gate p { color: var(--tx4) }
.gate form { display: flex; gap: 6px }
.gate input { font: 400 13px var(--sans); color: var(--tx); background: var(--p1); border: 1px solid var(--line2); border-radius: 4px; padding: 8px 10px; width: 240px }
.gate button { font: 600 13px var(--sans); color: var(--tx); background: var(--blue-bg); border: 1px solid var(--blue); border-radius: 4px; padding: 0 14px; cursor: pointer }
.gate .err { color: var(--red) }
.page { max-width: 980px; margin: 0 auto; padding: 16px }

/* ---- one column below 1100px ---------------------------------------------------------------- */
@media (max-width: 1360px) {
  .top .next { display: none }
}
@media (max-width: 1100px) {
  .dash { height: auto; grid-template-rows: auto; padding: 0 8px 8px }
  .top { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 6px }
  .top .what { white-space: normal; flex-basis: 100%; order: 3 }
  .top .right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; min-width: 0; white-space: normal }
  .top .tz { font-size: 11.5px }
  .main { grid-template-columns: minmax(0, 1fr) }
  .center { grid-template-rows: 380px auto }
  .analytics { grid-template-columns: minmax(0, 1fr) }
  .analytics .pnl { min-height: 200px }
  .pnl.situation .pnl-b { max-height: 70vh }
  .pnl.tabs { height: 85vh }
  .foot { flex-direction: column; align-items: flex-start; white-space: normal; gap: 4px; padding: 10px 0 }
}
@media (max-width: 560px) {
  .top .pv { display: none }
  .center { grid-template-rows: 320px auto }
  .legend .note { display: none }
  .tabbar button { padding: 0 8px; font-size: 12.5px }
  .ev details ul { columns: 1 }
}

/* ---- facts: the timeline's terse nested bullets ---------------------------------------------- */
.facts { margin: 0; padding: 0 }
.fact { position: relative; margin: 2px 0; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--tx2) }
.fact::before { content: ""; position: absolute; left: 3px; top: .66em; width: 4px; height: 4px; border-radius: 50%; background: var(--tx4) }
.fact .facts { margin: 2px 0 4px 1px; padding-left: 11px; border-left: 1px solid var(--line2) }
.fact .fact { font-size: 12.5px; color: var(--tx3) }
.fact .fact::before { top: .74em; width: 5px; height: 1px; border-radius: 0 }
.fact .st { font-size: 11.5px; font-weight: 600; color: var(--tx3); margin-right: 1px }
.s-claimed > .st, .s-denied > .st { font-style: italic; font-weight: 500 }
.refs { font-size: 9.5px; line-height: 0; white-space: nowrap }
.refs a { color: var(--tx4); padding: 0 1px }
.refs a:hover { color: var(--tx) }
.fact.one::before { background: transparent; box-shadow: inset 0 0 0 1px var(--tx4) }
.fact .fact.one::before { background: transparent; box-shadow: none; border-top: 1px dotted var(--tx4); height: 0 }
.refs { margin-left: 2px }
.tkey { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 14px; font-size: 11px; color: var(--tx4); border-bottom: 1px solid var(--line) }
.tkey .b { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--tx4) }
.tkey .b.o { background: transparent; box-shadow: inset 0 0 0 1px var(--tx4) }
.ent { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--tx5); text-underline-offset: 3px }
.ent:hover, .ent:focus-visible { color: var(--tx); text-decoration-color: var(--tx2) }
.rep .t .ent.o { color: var(--tx2); font-weight: 600; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration-color: var(--line2) }
.fact s { color: var(--tx4); text-decoration-color: var(--tx4) }
.fact .corr { color: var(--tx2) }
.olist li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12.5px }
.olist time { font-size: 11.5px; color: var(--tx4) }
.olist a { color: var(--tx2) }
.drawer .tbl td.n { white-space: normal }
.sub.rec { margin-top: 8px }

/* ---- the highlighter --------------------------------------------------------------------------
 * The four hand-drawn strokes of collecteral.com (ported there from eifohakesef.com), in a
 * Stabilo yellow that is not the amber of a warning. The stroke is a background on the words, drawn
 * again for every line a phrase wraps across, the way a pen would; ink on it is dark, as on paper.
 * Spent sparingly: two phrases in the summary, three in the timeline, never on the death. */
mark.hl { color: var(--hl-ink); padding-inline: .18em; padding-block: calc(.1319em + .76mm);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: transparent var(--swipe) no-repeat 0 0 / 100% 100% }
mark.hl .ent { text-decoration-color: rgba(23, 21, 10, .5) }
mark.hl.h0 { --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.1L8.3 5.1L16.6 4.7L24.8 4.4L33.1 3.9L41.4 3.5L49.7 2.8L57.9 2.2L66.2 2.0L74.5 1.8L82.8 1.9L91.0 2.0L99.3 1.8L107.6 2.0L115.9 2.1L124.1 2.2L132.4 2.3L140.7 2.3L149.0 2.0L157.2 1.6L165.5 2.3L173.8 3.1L182.1 4.1L190.3 4.8L198.6 5.0L206.9 5.1L215.2 4.9L223.4 4.5L231.7 4.1L240.0 4.0L240.0 39.1L231.7 39.0L223.4 39.0L215.2 39.2L206.9 39.3L198.6 39.8L190.3 39.8L182.1 39.3L173.8 39.0L165.5 39.0L157.2 39.0L149.0 38.8L140.7 38.4L132.4 38.2L124.1 38.0L115.9 37.9L107.6 37.8L99.3 37.9L91.0 37.9L82.8 37.9L74.5 37.6L66.2 37.8L57.9 37.8L49.7 37.8L41.4 38.1L33.1 38.4L24.8 38.4L16.6 38.7L8.3 39.1L0.0 39.4Z' fill='rgb(250,228,80)' fill-opacity='0.62'/%3E%3Cpath d='M0.0 8.5L8.3 8.2L16.6 8.2L24.8 7.9L33.1 7.6L41.4 7.4L49.7 7.1L57.9 6.6L66.2 6.6L74.5 7.2L82.8 7.4L91.0 7.6L99.3 7.7L107.6 8.1L115.9 8.2L124.1 8.2L132.4 8.2L140.7 8.1L149.0 8.2L157.2 8.2L165.5 8.2L173.8 7.9L182.1 7.7L190.3 7.6L198.6 7.7L206.9 7.8L215.2 7.8L223.4 7.6L231.7 7.4L240.0 7.0L240.0 35.5L231.7 35.3L223.4 35.1L215.2 34.9L206.9 34.7L198.6 34.6L190.3 34.2L182.1 34.6L173.8 34.9L165.5 35.2L157.2 35.5L149.0 35.9L140.7 36.3L132.4 36.5L124.1 36.9L115.9 37.2L107.6 37.4L99.3 37.2L91.0 36.8L82.8 36.6L74.5 36.5L66.2 36.6L57.9 37.0L49.7 37.4L41.4 37.2L33.1 37.1L24.8 36.9L16.6 36.8L8.3 36.7L0.0 36.6Z' fill='rgb(250,228,80)' fill-opacity='0.24'/%3E%3C/svg%3E") }
mark.hl.h1 { --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 3.7L8.3 4.1L16.6 4.7L24.8 5.3L33.1 5.5L41.4 5.3L49.7 5.4L57.9 5.7L66.2 5.7L74.5 6.0L82.8 6.0L91.0 6.2L99.3 6.4L107.6 6.4L115.9 6.1L124.1 5.6L132.4 5.4L140.7 5.1L149.0 4.6L157.2 4.2L165.5 3.7L173.8 3.2L182.1 2.6L190.3 2.3L198.6 1.8L206.9 1.6L215.2 2.5L223.4 3.0L231.7 3.3L240.0 3.3L240.0 40.0L231.7 40.4L223.4 40.5L215.2 40.1L206.9 39.8L198.6 40.0L190.3 40.1L182.1 39.9L173.8 39.8L165.5 39.9L157.2 39.9L149.0 40.1L140.7 39.9L132.4 39.7L124.1 39.3L115.9 39.1L107.6 39.2L99.3 38.8L91.0 38.5L82.8 37.6L74.5 37.7L66.2 38.5L57.9 39.2L49.7 39.5L41.4 39.6L33.1 39.8L24.8 40.0L16.6 39.9L8.3 39.9L0.0 40.0Z' fill='rgb(250,228,80)' fill-opacity='0.62'/%3E%3Cpath d='M0.0 8.3L8.3 8.0L16.6 7.8L24.8 7.8L33.1 7.8L41.4 7.8L49.7 8.0L57.9 8.1L66.2 8.4L74.5 8.5L82.8 8.7L91.0 8.6L99.3 8.4L107.6 8.3L115.9 8.0L124.1 7.5L132.4 7.3L140.7 7.0L149.0 6.6L157.2 6.8L165.5 7.2L173.8 7.4L182.1 7.5L190.3 7.8L198.6 7.8L206.9 7.9L215.2 7.9L223.4 7.8L231.7 8.0L240.0 8.0L240.0 36.5L231.7 36.5L223.4 36.8L215.2 37.0L206.9 37.0L198.6 36.9L190.3 36.9L182.1 36.9L173.8 36.7L165.5 36.4L157.2 36.3L149.0 36.3L140.7 36.6L132.4 36.6L124.1 36.5L115.9 36.6L107.6 37.0L99.3 37.1L91.0 37.3L82.8 37.4L74.5 37.3L66.2 37.0L57.9 36.9L49.7 36.7L41.4 36.5L33.1 36.3L24.8 36.2L16.6 36.1L8.3 35.9L0.0 35.9Z' fill='rgb(250,228,80)' fill-opacity='0.24'/%3E%3C/svg%3E") }
mark.hl.h2 { --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 4.0L8.3 3.8L16.6 3.8L24.8 4.0L33.1 4.3L41.4 4.5L49.7 4.7L57.9 4.7L66.2 4.6L74.5 4.2L82.8 4.1L91.0 3.9L99.3 4.0L107.6 4.1L115.9 4.2L124.1 4.3L132.4 4.4L140.7 4.7L149.0 5.2L157.2 5.9L165.5 6.4L173.8 5.9L182.1 5.7L190.3 5.7L198.6 5.9L206.9 5.7L215.2 5.7L223.4 5.3L231.7 5.4L240.0 5.7L240.0 40.0L231.7 39.8L223.4 40.0L215.2 40.0L206.9 39.6L198.6 39.5L190.3 39.3L182.1 39.5L173.8 39.4L165.5 39.0L157.2 38.7L149.0 38.8L140.7 38.6L132.4 38.5L124.1 38.8L115.9 38.6L107.6 38.7L99.3 39.0L91.0 39.5L82.8 39.9L74.5 40.0L66.2 40.3L57.9 40.4L49.7 40.7L41.4 40.7L33.1 40.7L24.8 40.6L16.6 40.8L8.3 40.4L0.0 40.3Z' fill='rgb(250,228,80)' fill-opacity='0.62'/%3E%3Cpath d='M0.0 7.8L8.3 8.2L16.6 8.6L24.8 9.2L33.1 9.5L41.4 9.4L49.7 9.7L57.9 9.8L66.2 9.4L74.5 8.9L82.8 8.5L91.0 8.1L99.3 8.0L107.6 7.7L115.9 7.7L124.1 7.4L132.4 7.5L140.7 7.7L149.0 7.9L157.2 8.2L165.5 8.5L173.8 8.7L182.1 8.6L190.3 8.5L198.6 8.4L206.9 8.4L215.2 8.6L223.4 8.9L231.7 8.8L240.0 8.9L240.0 37.0L231.7 37.4L223.4 37.3L215.2 37.1L206.9 36.9L198.6 36.9L190.3 36.9L182.1 36.9L173.8 37.0L165.5 37.1L157.2 37.1L149.0 36.8L140.7 36.6L132.4 36.3L124.1 36.0L115.9 36.0L107.6 36.1L99.3 36.1L91.0 36.2L82.8 36.2L74.5 36.3L66.2 36.2L57.9 36.3L49.7 36.3L41.4 36.1L33.1 36.0L24.8 36.1L16.6 36.0L8.3 35.8L0.0 35.6Z' fill='rgb(250,228,80)' fill-opacity='0.24'/%3E%3C/svg%3E") }
mark.hl.h3 { --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 2.8L8.3 3.2L16.6 3.3L24.8 3.8L33.1 4.2L41.4 4.5L49.7 5.0L57.9 5.0L66.2 4.7L74.5 4.2L82.8 3.7L91.0 3.1L99.3 2.5L107.6 1.7L115.9 1.6L124.1 1.6L132.4 1.9L140.7 2.4L149.0 2.7L157.2 2.8L165.5 2.6L173.8 2.7L182.1 2.5L190.3 1.9L198.6 1.7L206.9 2.0L215.2 2.0L223.4 2.1L231.7 2.4L240.0 2.4L240.0 39.1L231.7 38.8L223.4 38.7L215.2 38.2L206.9 37.6L198.6 37.6L190.3 37.7L182.1 37.6L173.8 37.6L165.5 37.7L157.2 37.8L149.0 37.8L140.7 37.6L132.4 37.8L124.1 38.0L115.9 38.2L107.6 38.2L99.3 38.0L91.0 37.9L82.8 37.6L74.5 37.8L66.2 38.0L57.9 38.5L49.7 39.1L41.4 39.5L33.1 40.1L24.8 40.4L16.6 40.2L8.3 40.1L0.0 39.6Z' fill='rgb(250,228,80)' fill-opacity='0.62'/%3E%3Cpath d='M0.0 8.0L8.3 8.3L16.6 8.4L24.8 8.5L33.1 8.6L41.4 8.5L49.7 8.4L57.9 8.2L66.2 8.1L74.5 8.1L82.8 7.9L91.0 7.8L99.3 7.6L107.6 7.2L115.9 7.0L124.1 7.0L132.4 6.9L140.7 7.0L149.0 7.0L157.2 6.8L165.5 6.6L173.8 7.0L182.1 7.0L190.3 7.3L198.6 7.7L206.9 7.9L215.2 7.9L223.4 7.8L231.7 8.0L240.0 8.0L240.0 35.0L231.7 34.8L223.4 34.9L215.2 35.0L206.9 35.1L198.6 34.8L190.3 34.5L182.1 34.2L173.8 34.3L165.5 34.5L157.2 34.7L149.0 34.5L140.7 34.6L132.4 34.5L124.1 34.4L115.9 34.5L107.6 34.5L99.3 34.6L91.0 34.8L82.8 34.8L74.5 34.8L66.2 35.0L57.9 35.0L49.7 34.7L41.4 34.2L33.1 34.6L24.8 34.9L16.6 35.1L8.3 35.3L0.0 35.5Z' fill='rgb(250,228,80)' fill-opacity='0.24'/%3E%3C/svg%3E") }

@media print { mark.hl { background: none; padding: 0; color: inherit; border-bottom: 2px solid currentColor } }

/* ---- entity drawer: the graph, one name at a time --------------------------------------------- */
.drawer { position: absolute; inset: 40px 0 0 0; z-index: 4; display: flex; flex-direction: column; background: var(--p3); border-top: 1px solid var(--line2);
  box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, .8) }
.drawer[hidden] { display: none }
@media (prefers-reduced-motion: no-preference) { .drawer { animation: drawer-in .18s ease-out } @keyframes drawer-in { from { opacity: 0; transform: translateY(8px) } } }
.drawer-h { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line2) }
.drawer-h h3 { margin-top: 2px; font: 600 21px/1.15 var(--serif) }
.drawer .x { font: 500 12px var(--sans); color: var(--tx2); background: transparent; border: 1px solid var(--line2); border-radius: 4px; padding: 5px 9px; cursor: pointer }
.drawer .x:hover { color: var(--tx); border-color: var(--tx4) }
.drawer-b { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 16px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.ent.chip { text-decoration: none; font-size: 12px; color: var(--tx2); border: 1px solid var(--line2); border-radius: 999px; padding: 3px 9px; background: rgba(255, 255, 255, .02) }
.ent.chip b { margin-left: 6px; font-weight: 500; color: var(--tx4) }
.ent.chip:hover { border-color: var(--tx4) }
.efacts > li { padding: 8px 0; border-bottom: 1px solid var(--line) }
.efacts .when { font-size: 11.5px; color: var(--tx4); margin-bottom: 3px }

/* ---- ornament ------------------------------------------------------------------------------- */
.emptyart { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px; text-align: center }
.emptyart img { width: 110px; height: auto; opacity: .75 }
.emptyart p { font: italic 500 15px/1.4 var(--serif); color: var(--tx3) }
.vign { float: right; margin: 0 0 6px 14px; width: 104px; text-align: center }
.vign img { width: 96px; height: auto; opacity: .8 }
.vign figcaption { font: italic 500 12.5px/1.25 var(--serif); color: var(--tx4) }
.foot .frieze { flex: 1 1 auto; min-width: 120px; height: 34px; opacity: .5; background: url("art/frieze.webp") repeat-x right center / auto 34px }
.gate-art { width: min(420px, 86vw); height: auto; opacity: .85; margin: 0 auto 4px }
.gate .brand { font-size: 28px; justify-content: center }
.gate-art.nf { width: 160px }
.gate a { color: var(--tx2); text-decoration: underline; text-decoration-color: var(--line2) }

/* ---- analytics notice (Europe only, until the reader chooses) -------------------------------- */
.consent { position: fixed; left: 14px; bottom: 50px; z-index: 20; max-width: 360px; padding: 12px 14px; background: var(--p3); border: 1px solid var(--line2);
  border-radius: 6px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); font-size: 12.5px; color: var(--tx2) }
.consent[hidden] { display: none }
.consent div { display: flex; gap: 8px; margin-top: 10px }
.consent button { font: 500 12.5px var(--sans); color: var(--tx); background: transparent; border: 1px solid var(--line2); border-radius: 4px; padding: 6px 12px; cursor: pointer }
.consent button[data-consent-yes] { background: var(--blue-bg); border-color: var(--blue) }
.foot a[data-consent-open] { color: var(--tx4) }

/* ---- icons and icon buttons (Heroicons, docs/icons.md) ------------------------------------------ */
svg.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em }
.ib { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--tx3); background: transparent;
  border: 1px solid var(--line2); border-radius: 4px; cursor: pointer }
.ib:hover, .ib:focus-visible { color: var(--tx); border-color: var(--tx4) }
.ib svg.i { width: 16px; height: 16px; vertical-align: 0 }
.top .ib { width: 26px; height: 26px; border-color: transparent }
.live { display: inline }
.live svg.i { color: var(--tx4); margin-right: 5px }
.seg button { display: inline-flex; align-items: center; gap: 5px }
.seg button svg.i { width: 14px; height: 14px; vertical-align: 0 }
.tabbar button { display: inline-flex; align-items: center; gap: 5px }
.tabbar button svg.i { width: 15px; height: 15px; vertical-align: 0; color: var(--tx4) }
.tabbar button[aria-selected="true"] svg.i { color: var(--tx2) }

/* ---- timeline toolbar, key and times ------------------------------------------------------------ */
.tbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: var(--p2);
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, .9) }
.tbar select { font: 400 12px var(--sans); color: var(--tx2); background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; height: 28px; padding: 0 6px; max-width: 150px }
.tbar .chips { display: inline-flex; flex-wrap: wrap; gap: 4px }
.tbar .chips button { display: inline-flex; align-items: center; gap: 4px; font: 500 11.5px var(--sans); color: var(--tx3); background: transparent;
  border: 1px solid var(--line2); border-radius: 999px; padding: 3px 9px; cursor: pointer }
.tbar .chips button svg.i { width: 13px; height: 13px; vertical-align: 0 }
.tbar .chips button[aria-pressed="true"] { color: var(--tx); background: var(--p3); border-color: var(--tx4) }
.tsearch { flex: 1 1 140px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; background: var(--bg); border: 1px solid var(--line2);
  border-radius: 4px; color: var(--tx4) }
.tsearch input { flex: 1; min-width: 0; font: 400 12.5px var(--sans); color: var(--tx); background: transparent; border: 0; outline: none }
.tkey { gap: 4px 14px }
.tc { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--tx3); white-space: nowrap }
.tc svg.i { width: 14px; height: 14px; vertical-align: 0 }
.tc.ev-day svg.i { color: var(--t-event) }
.tc.pub svg.i { color: var(--t-pub) }
.tc.seen svg.i { color: var(--t-seen) }
.tc.seen { font-style: italic }
.ev .evlinks { margin: 0 0 6px; font-size: 12px; color: var(--tx4) }
.ev .evlinks svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px }
.ev .evlinks a { color: var(--tx2) }
.ev.hit { outline: 1px solid var(--tx4); outline-offset: 2px }
.ev .whens { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 6px }
.ev .m svg.i { width: 13px; height: 13px; color: var(--tx4); margin-right: 3px }
.ev details.srcs summary { display: inline-flex; align-items: center; gap: 5px }
.ev details.srcs li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline }
.ev details.srcs li .lg { font-size: 11px; color: var(--tx5) }
.rep .t .tc { font-size: 12px }
.day .n { color: var(--tx4) }

/* ---- place names that move the map ----------------------------------------------------------------- */
.geo { cursor: zoom-in; text-decoration: underline dotted var(--t-event); text-underline-offset: 3px; text-decoration-thickness: 1px }
.geo:hover { color: var(--tx); text-decoration-style: solid }
.geo svg.i { width: 13px; height: 13px; margin-right: 2px; color: var(--tx4) }
.ent[data-geo] { text-decoration-color: var(--t-event) }
.geo-focus { fill: none; stroke: var(--bone); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; pointer-events: none }
.geo-name { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 3px 9px; font: 500 12px var(--sans); color: var(--tx);
  background: rgba(12, 15, 19, .85); border: 1px solid var(--line2); border-radius: 999px; pointer-events: none }

/* ---- charts ------------------------------------------------------------------------------------------ */
.ec { width: 100%; min-height: 60px }
.chart { position: relative; flex: 1; min-height: 0; padding: 4px 6px 0 }
.fgroup { padding: 8px 0; border-bottom: 1px solid var(--line) }
.fgroup .fv { font-size: 12.5px; color: var(--tx3); margin-bottom: 4px }
.fgroup .fv b { font-size: 16px; color: var(--tx); margin-right: 4px }
.olist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px }
.olist li > time { flex: none; min-width: 84px }
.olist q { color: var(--tx4); font-size: 11.5px }

/* ---- drawer tools, help, back to top ----------------------------------------------------------------- */
.dtools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
.drawer .x { display: inline-flex; align-items: center; gap: 5px }
.drawer .x svg.i { width: 14px; height: 14px; vertical-align: 0 }
.helpbox { position: fixed; right: 16px; top: 56px; z-index: 30; width: 340px; background: var(--p3); border: 1px solid var(--line2); border-radius: 6px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9) }
.helpbox[hidden] { display: none }
.helpbox .drawer-h h3 { font: 600 18px var(--serif) }
.helpbox .x { font: 500 12px var(--sans); color: var(--tx2); background: transparent; border: 1px solid var(--line2); border-radius: 4px; padding: 4px 9px; cursor: pointer }
.helpbox dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px 10px; margin: 0; padding: 10px 14px; font-size: 12.5px }
.helpbox dt { font-weight: 600; color: var(--tx) }
.helpbox dd { margin: 0; color: var(--tx3) }
.helpbox .sub { padding: 0 14px 12px }
.tabp, .pnl-b, .drawer-b { position: relative }
.btt { position: sticky; float: right; bottom: 10px; margin: 0 10px 10px 0; z-index: 4; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--tx2); background: var(--p3); border: 1px solid var(--line2); border-radius: 50%; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .6) }
.btt[hidden] { display: none }
.btt:hover { color: var(--tx); border-color: var(--tx4) }
.btt svg.i { width: 16px; height: 16px; vertical-align: 0 }
.pnl.tabs { overflow: clip }

/* ---- checks of the facts against the reports ----------------------------------------------------- */
.vb { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 5px; height: 17px; vertical-align: 1px; font: 600 10.5px var(--sans);
  color: var(--tx3); background: transparent; border: 1px solid var(--line2); border-radius: 999px; cursor: pointer }
.vb svg.i { width: 12px; height: 12px; vertical-align: 0; color: var(--t-event) }
.vb.dis svg.i { color: var(--amber) }
.vb:hover, .vb:focus-visible { color: var(--tx); border-color: var(--tx4) }
.lbl.ok::before, .lbl.warn::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--t-event) }
.lbl.warn::before { background: var(--amber) }
blockquote.role { margin: 4px 0 10px; padding: 6px 10px; border-left: 2px solid var(--line2); font: italic 500 15px/1.4 var(--serif); color: var(--tx2) }
blockquote.role a { font: 400 11.5px var(--sans); color: var(--tx4); font-style: normal }
.fact-link { font: inherit; font-size: 12.5px; text-align: left; color: var(--tx2); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted var(--tx5); text-underline-offset: 3px }
.fact-link:hover { color: var(--tx) }
.drawer-h h3.fact-h { font: 500 16px/1.35 var(--sans) }
.fact .per { font-size: 11.5px; color: var(--tx4); font-style: italic; white-space: nowrap }
.rep details.copies { margin-top: 5px; font-size: 12px }
.rep details.copies summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--tx3) }
.rep details.copies li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 2px 0 }
.rep details.copies .lg { font-size: 11px; color: var(--tx5) }
.fgroup .fnote { font-size: 11px; color: var(--tx5) }

/* ---- redesign 2026-10-05: header links, bottom line, official position, since last visit ------- */
.hnav { display: flex; align-items: center; gap: 6px }
.hb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font: 500 12.5px var(--sans); color: var(--tx2); background: transparent;
  border: 1px solid var(--line2); border-radius: 4px; cursor: pointer }
.hb:hover, .hb:focus-visible { color: var(--tx); border-color: var(--tx4) }
.hb svg.i { width: 15px; height: 15px }
.brief { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px }
.official { padding: 10px 12px; margin-bottom: 12px; background: var(--p2); border: 1px solid var(--line2); border-radius: 5px }
.official .lbl, .since .lbl { display: flex; align-items: center; gap: 6px; margin-bottom: 6px }
.official .lbl svg.i, .since .lbl svg.i { width: 15px; height: 15px; color: var(--tx4) }
.official li { font-size: 13px; color: var(--tx2); line-height: 1.5 }
.official li + li { margin-top: 6px }
.official .st, .fact .st { display: inline-flex; align-items: center; gap: 3px }
.official .st { font-size: 12px; font-weight: 600; color: var(--tx) }
.st svg.i { width: 13px; height: 13px; vertical-align: 0 }
.official .sub { margin-left: 4px }
.since { margin-bottom: 14px }
.since li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid var(--line) }
.since li:last-child { border-bottom: 0 }
.since li[hidden] { display: none }
.since li a { color: var(--tx2) }
.since li time { flex: none; font-size: 11.5px; color: var(--tx5) }
.tkeyd { position: relative }
.tkeyd > summary { list-style: none; border: 1px solid var(--line2); border-radius: 4px }
.tkeyd > summary::-webkit-details-marker { display: none }
.tkey-pop { position: absolute; right: 0; top: 34px; z-index: 6; width: 300px; padding: 8px 0 10px; background: var(--p3); border: 1px solid var(--line2);
  border-radius: 6px; box-shadow: var(--shadow) }
.tkey-pop .tkey { flex-direction: column; border: 0; padding: 4px 12px }
.tkey-pop .tkey > span { display: flex; align-items: center; gap: 6px; white-space: normal }
.tkey-pop .tkey svg.i { width: 14px; height: 14px }
.tkey-pop .sub { padding: 4px 12px 0 }
.tbar { flex-wrap: nowrap }
.tbar select { flex: 0 1 auto; min-width: 0 }
.tsearch { flex: 1 1 90px; min-width: 70px }
.cite { padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px; color: var(--tx2); background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; user-select: all }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font: 500 12.5px var(--sans); color: var(--tx); background: var(--p2);
  border: 1px solid var(--line2); border-radius: 4px; cursor: pointer }
.btn:hover { border-color: var(--tx4) }
.btn svg.i, .dl svg.i { width: 15px; height: 15px }
.dl li { padding: 8px 0; border-bottom: 1px solid var(--line) }
.dl li a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tx) }
.dl li .sub { display: block; margin-top: 3px }
.drawer-b.about .sec { padding: 0 0 12px }
@media (max-width: 1100px) {
  .hnav .hb { padding: 0 8px; font-size: 12px }
}
@media (max-width: 560px) {
  .hnav .hb { font-size: 0; gap: 0; width: 28px; padding: 0; justify-content: center }
  .hnav .hb svg.i { width: 16px; height: 16px }
  .tbar { flex-wrap: wrap }
}
@media (max-width: 560px) {
}

/* ---- basemap names, the named place, wheel and drag (2026-10-05) ------------------------------- */
.labs { pointer-events: none }
/* Hidden until enhance.js has chosen which names fit (declutter): sent visible, all 1,400 of them
   flashed on every load. */
.labs > [data-k] { display: none }
.labs text { font-family: var(--sans); paint-order: stroke; stroke: #0c0f13; stroke-linejoin: round; stroke-width: calc(var(--u, 1) * 3px) }
.labs .lc { font-size: calc(var(--u, 1) * 11px); font-weight: 500; fill: #8f8a80; text-anchor: middle }
.labs .lt circle { r: calc(var(--u, 1) * 1.6px); fill: #8f8a80 }
.labs .lt text { font-size: calc(var(--u, 1) * 10px); fill: #a8a399; transform: translate(calc(var(--u, 1) * 4px), calc(var(--u, 1) * 3.5px)) }
.geo-label { font: 600 calc(var(--u, 1) * 12.5px) var(--sans); fill: var(--tx); paint-order: stroke; stroke: #0c0f13; stroke-width: calc(var(--u, 1) * 3.5px);
  stroke-linejoin: round; text-anchor: middle; transform: translateY(calc(var(--u, 1) * -10px)); pointer-events: none }
@media (pointer: fine) { .mapwrap:not([data-v="world"]) svg[data-pins] { touch-action: none } }
.mapwrap svg[data-pins] { cursor: grab }
.mapwrap[data-v="world"] svg[data-pins] { cursor: default }
.mapwrap svg.dragging { cursor: grabbing }

/* ---- name cards ---------------------------------------------------------------------------------- */
.ecard { position: fixed; z-index: 30; padding: 10px 12px; background: var(--p3); border: 1px solid var(--line2); border-radius: 6px;
  box-shadow: var(--shadow); font-size: 12.5px; color: var(--tx2); line-height: 1.45 }
.ecard .card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px }
.ecard .card-h b { color: var(--tx); font-size: 13px }
.ecard .card-h span { flex: none; font-size: 11.5px; color: var(--tx4) }
.ecard p + p { margin-top: 5px }
.ecard .src { font-size: 11px; color: var(--tx5) }
.ecard .src a { color: var(--tx3); text-decoration: underline; text-decoration-color: var(--tx5) }
.drawer-b .wd { margin-bottom: 10px; font-size: 13px; color: var(--tx2) }

/* ---- the reader's own copy: search, changes since the last visit (local.js) --------------------- */
.srch { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; background: rgba(5, 6, 8, .55) }
.srch[hidden] { display: none }
.srch-in { width: min(680px, calc(100vw - 24px)); max-height: 72vh; display: flex; flex-direction: column; background: var(--p3); border: 1px solid var(--line2);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden }
.srch-in input { font: 400 15px var(--sans); color: var(--tx); background: var(--p2); border: 0; border-bottom: 1px solid var(--line2); padding: 14px 16px; outline: none }
.srch-note { padding: 6px 16px }
.srch-r { overflow: auto; padding: 0 0 8px }
.srch-r li { padding: 7px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 2px }
.srch-r li b { font-weight: 500; color: var(--tx2); font-size: 13px }
.srch-r li .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.srch-r li.on, .srch-r li:hover { background: rgba(255, 255, 255, .05) }
.srch-r li.on b { color: var(--tx) }
.srch-r li.srch-g { cursor: default; padding: 10px 16px 3px; font-size: 11.5px; font-weight: 600; color: var(--tx4); background: none }
.fact .chg { margin-left: 6px; font-size: 11px; color: var(--amber); white-space: nowrap }
.fact.is-newfact > .chg { color: var(--t-event) }

/* ---- the reader's desk (desk.js) ------------------------------------------------------------------ */
.hb .badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--amber); color: var(--hl-ink); font-size: 10.5px; font-weight: 700;
  line-height: 16px; text-align: center }
.hb .badge[hidden] { display: none }
.desk .dtabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line) }
.desk .dtabs button { font: 500 12.5px var(--sans); color: var(--tx3); background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 8px; cursor: pointer }
.desk .dtabs button[aria-selected="true"] { color: var(--tx); border-bottom-color: var(--blue) }
.witem { padding: 10px 0; border-bottom: 1px solid var(--line) }
.witem .wh { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px }
.witem .wh b { font-weight: 500; color: var(--tx); font-size: 13px }
.witem.moved .wh b::after { content: " \2022"; color: var(--amber) }
.witem .wtools { display: flex; gap: 6px; margin-top: 6px }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--tx2) }
.hist-s { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.hist-s input { flex: 1 }
.hist-at { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px }
.hist-at b { color: var(--tx); font-weight: 600 }
.tbl tr.moved td { color: var(--amber) }
[data-watch][aria-pressed="true"] { color: var(--tx); border-color: var(--tx4) }
.ent.watched { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px }
li.fact.watched { box-shadow: inset 2px 0 0 var(--amber); padding-left: 6px }

/* ---- notes and offline (notes.js, local.js) -------------------------------------------------------- */
.note-ed { margin-bottom: 12px; padding: 10px; background: var(--p2); border: 1px solid var(--line2); border-radius: 5px }
.note-ed textarea { width: 100%; margin-top: 6px; font: 400 13px/1.45 var(--sans); color: var(--tx); background: var(--bg); border: 1px solid var(--line2);
  border-radius: 4px; padding: 8px; resize: vertical }
.note-ed .lbl .sub { font-weight: 400; margin-left: 6px }
.witem .nt { font-size: 12.5px; color: var(--tx2); white-space: pre-wrap }
.top .offline { color: var(--amber) }
/* The header's tools need the room below 1500px; the summary's headline says what the page is about. */
@media (min-width: 1101px) and (max-width: 1500px) { .top .what { display: none } }

/* ---- the SQL console (console.js) ------------------------------------------------------------------ */
body.console { height: 100vh; display: flex; flex-direction: column; padding: 0 10px 10px }
body.console .top { flex: none; height: 50px }
.cons { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 8px; padding-top: 8px }
.cons-side .btn { margin: 10px 0 }
.cons-main { display: flex; flex-direction: column }
.cons-main .pnl-h select { margin-left: auto; font: 400 12px var(--sans); color: var(--tx2); background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; height: 28px; max-width: 260px }
.cons-main textarea { flex: none; height: 150px; margin: 10px 12px 0; padding: 10px; font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tx);
  background: var(--bg); border: 1px solid var(--line2); border-radius: 4px; resize: vertical }
.cons-info { padding: 6px 12px }
.cons-out { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 12px }
.cons-out .tbl td { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cons-err { color: var(--amber); font-size: 13px; padding: 8px 0; white-space: pre-wrap }
.tbl-d { border-bottom: 1px solid var(--line); padding: 4px 0 }
.tbl-d summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer }
.tbl-d ul { padding: 4px 0 6px 12px; font-size: 12px }
.tbl-d li b { font-weight: 500; color: var(--tx2) }
.lnk { font: 600 13px var(--sans); color: var(--tx); background: none; border: 0; padding: 0; cursor: pointer }
.lnk:hover { text-decoration: underline }
@media (max-width: 900px) { .cons { grid-template-columns: minmax(0, 1fr) } body.console { height: auto } }
body.console .top .what { display: inline }

/* ---- the Social tab (social.go) ---------------------------------------------------------------- */
.social li.post { padding: 10px 14px; border-bottom: 1px solid var(--line) }
.social .ph { display: flex; align-items: center; gap: 8px; min-width: 0 }
.social .ph img { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--p3) }
.social .pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px }
.social .pn b { font-weight: 600; color: var(--tx) }
.social .pk { margin-left: auto; flex: none; font-size: 11px; color: var(--tx4) }
.social .k-new_claim .pk, .social .k-on_ground .pk { color: var(--tx2) }
.social .pt { margin: 5px 0 4px; font-size: 13px; line-height: 1.5; color: var(--tx2); white-space: pre-wrap; overflow-wrap: anywhere }
.social .pm { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; color: var(--tx5) }
.social .pcs { display: inline-flex; align-items: center; gap: 14px; margin-left: auto }
.social .pc { display: inline-flex; align-items: center; gap: 4px; color: var(--tx4); font-variant-numeric: tabular-nums }
.social .pc svg.i { width: 14px; height: 14px }
.social .bsky { display: inline-flex; color: var(--tx4) }
.social .bsky:hover { color: var(--tx) }
.social .bsky svg.bf { width: 14px; height: 13px }
.social .pm a { color: var(--tx4) }
.newbar { display: block; width: calc(100% - 28px); margin: 8px 14px; padding: 7px; font: 500 12.5px var(--sans); color: var(--tx); background: var(--blue-bg);
  border: 1px solid var(--blue); border-radius: 5px; cursor: pointer }

/* Official record (official.go) */
.offrec { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2) }
.offrec > .sub { font-size: 12px; margin-bottom: 4px }
.offrec ol, .offall { list-style: none; margin: 0; padding: 0 }
.offrec li, .offall li { font-size: 13px; line-height: 1.45; color: var(--tx2) }
.offrec li + li, .offall li + li { margin-top: 5px }
.offrec a, .offall a, .official li > a:not(.sub) { color: var(--tx) }
.offrec .more { margin-top: 6px }
.offnone { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tx3) }
.official > .lbl + .offnone { margin-top: 0 }
.offtext p { margin: 0 0 8px; line-height: 1.55 }
.offtext.orig { color: var(--tx3); font-size: 13px }
.offwarn { color: var(--amber, #d29922); font-size: 13px }
.offlinks { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px }
.offlinks a { display: inline-flex; align-items: center; gap: 4px }
.offlinks svg.i { width: 15px; height: 15px }
.official ul + .offnone { padding-top: 8px; border-top: 1px solid var(--line2) }

/* API reference (api_spec.go). Inter only: code is set in the page's face, marked by a surface. */
.apiref code, .apiref pre { font-family: inherit; font-size: 13px; background: var(--p2); border: 1px solid var(--line2); border-radius: 4px; padding: 1px 5px; color: var(--tx) }
.apiref pre { padding: 10px 12px; overflow-x: auto; white-space: pre-wrap }
.apiref table.api td { vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line2); line-height: 1.5 }
.apiref table.api td:first-child { white-space: nowrap }
.apiref h3 { margin: 22px 0 8px }
.apiref a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--tx4); text-underline-offset: 2px }
.apiref a:hover { text-decoration-color: var(--tx) }
@media (max-width: 700px) {
  .apiref table.api, .apiref table.api tbody, .apiref table.api tr, .apiref table.api td { display: block; width: auto }
  .apiref table.api td { border: 0; padding: 4px 0 }
  .apiref table.api tr { padding: 8px 0; border-bottom: 1px solid var(--line2) }
  .apiref table.api td:first-child { white-space: normal }
}
.cred { margin: 6px 0 10px; font-size: 13px; line-height: 1.5; color: var(--tx2) }
.cred b { font-weight: 600; color: var(--tx) }
.cred .sub { display: block; margin-top: 2px; font-size: 11.5px }