/* kit.css: the look every motion visual shares (newsroom/visual-kit/kit.css). build.py puts it first in styles.css and the
   visual's own CSS after it.
   Palette: dark card, white text, indigo and cyan for marks, rose only for "not confirmed / not stated", amber only for a note.
   Two frames on one DOM: tall (the fixed 1060px frame below 900px wide) is the base; wide (the block's aspect ratio, 5:4 or
   16:10 on screens 900px and wider) overrides it in the media query near the end. The wide query must match WIDE_QUERY in kit.js.
   Wide sizes are in rem and the root font size scales with the frame, so the wide design is one fixed composition. */
:root {
  --bg: #0b1726; --panel: #102039; --panel2: #16294a; --line: #2f4668; --line2: #4a6590;
  --mute: #b9c7dc; --ink: #0b1726;
  --indigo: #635bff; --indigo-t: #b3afff; --cyan: #06b6d4; --cyan-t: #3fd9f0; --rose: #fb7185; --amber: #fbbf24;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; font-size: 16px; }
body { margin: 0; background: var(--bg); color: #fff; font-family: var(--font); line-height: 1.35; min-height: 100vh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
.lw { display: none; }
.lt { display: inline; }

/* ---------- the frame ---------- */
.stage { position: relative; display: flex; flex-direction: column; height: 100vh; padding: 0.6rem 0.7rem 0.5rem; gap: 0.4rem; max-width: 46rem; margin: 0 auto; }
.top { display: flex; flex-direction: column; gap: 0.4rem; }
h1 { margin: 0; font-size: 1.1rem; line-height: 1.2; font-weight: 700; }
.ctl { display: flex; gap: 0.5rem; }
.btn { min-height: 2.5rem; min-width: 5.5rem; padding: 0 1rem; border: 1px solid #5b7399; background: var(--panel2); border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.btn:hover:not(:disabled) { border-color: #fff; }
.btn:disabled { color: #a8b6cc; border-color: var(--line); background: transparent; cursor: default; }
.btn[hidden] { display: none; }

/* ---------- slider row: label, range input, readout ---------- */
.scrub { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center; flex: none; }
.scrub-l { font-size: 0.875rem; color: var(--mute); white-space: nowrap; }
.scrub input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 2.2rem; margin: 0; background: transparent; cursor: pointer; }
.scrub input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #3a5278; }
.scrub input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #3a5278; }
.scrub input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 5px solid var(--indigo); }
.scrub input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--indigo); }
.when { grid-column: 1 / span 2; margin: 0; font-size: 0.875rem; color: var(--mute); min-height: 1.35em; }

/* ---------- tooltip: a sheet over the free edge of the frame (tall), floating beside the target (wide) ---------- */
.dock { flex: none; }
.tip { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; z-index: 30; max-height: 58%; overflow: auto; padding: 0.5rem 0.8rem 0.6rem; background: #09111f; border: 1px solid #5b7399; border-left-width: 5px; border-radius: 0.5rem; font-size: 0.875rem; box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.6); pointer-events: none; }
.tip.pinned { pointer-events: auto; }
.tip[hidden] { display: none; }
.tip p { margin: 0; }
.tip[data-tone="plain"], .tip[data-tone="stage"] { border-left-color: var(--indigo); }
.tip[data-tone="rose"] { border-left-color: var(--rose); }
.tip[data-tone="amber"] { border-left-color: var(--amber); }
.tip[data-tone="cyan"] { border-left-color: var(--cyan); }
.tk-kick { color: var(--mute); }
.tk-title { font-weight: 700; font-size: 1rem; margin-top: 0.1rem !important; }
.tk-plain { margin-top: 0.25rem !important; }
.vb { margin-top: 0.35rem; }
.vh { color: var(--cyan-t); font-weight: 700; }
.q { margin: 0.1rem 0 0; padding: 0 0 0 0.6rem; border-left: 2px solid #5b7399; font-style: italic; }
.vn { color: var(--mute); margin-top: 0.15rem !important; }
.tk-der { margin-top: 0.4rem !important; color: var(--cyan-t); font-weight: 600; }
.tk-mid { margin-top: 0.4rem !important; }
.tk-ns { margin-top: 0.4rem !important; color: var(--rose); font-weight: 600; }
.tk-close { display: none; position: sticky; bottom: 0; margin-top: 0.5rem; min-height: 2.6rem; padding: 0 1.2rem; background: var(--panel2); border: 1px solid #5b7399; border-radius: 0.4rem; font-weight: 600; font-size: 0.875rem; pointer-events: auto; }
.tip.pinned .tk-close { display: inline-block; }
.src { margin: 0; flex: none; font-size: 0.875rem; color: var(--mute); }
.tipping .src { display: none; }

/* ---------- wide frame ---------- */
@media (min-aspect-ratio: 21/20) {
  .lw { display: inline; }
  .lt { display: none; }
  html { font-size: min(calc(100vw / 53), calc(100vh / 42.4)); }
  body { overflow: hidden; }
  .stage { max-width: calc(100vh * 1.25); padding: 0.5rem 1rem 0.35rem; gap: 0.3rem; }
  .top { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  h1 { font-size: 1.2rem; }
  .btn { min-height: 1.9rem; min-width: 4.6rem; padding: 0 0.8rem; font-size: 0.85rem; }
  .scrub { grid-template-columns: auto minmax(0, 20rem) 1fr; column-gap: 0.7rem; }
  .scrub-l { font-size: 0.85rem; }
  .scrub input[type="range"] { height: 1.6rem; }
  .scrub input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border-width: 4px; }
  .when { grid-column: auto; font-size: 0.85rem; }
  .dock { position: static; height: 0; }
  .tip { right: auto; bottom: auto; width: 28rem; max-width: calc(100% - 1rem); max-height: calc(100% - 1rem); font-size: 0.85rem; padding: 0.5rem 0.7rem; }
  .tk-title { font-size: 0.95rem; }
  .tk-close { margin-top: 0.4rem; min-height: 1.9rem; font-size: 0.85rem; }
  .src, .tipping .src { display: block; font-size: 0.8rem; }
}

/* ---------- without script ----------
   A module script runs a moment after first paint, so the plain list waits 1.4 seconds before it appears. A reader with script
   never sees it flash, a reader without script still gets it. */
html:not(.js) .plain { opacity: 0; animation: nojs 0.01s 1.4s forwards; }
@keyframes nojs { to { opacity: 1; } }
html:not(.js) body { overflow: auto; }
html:not(.js) .stage { height: auto; min-height: 100vh; }
html:not(.js) .scrub, html:not(.js) .dock, html:not(.js) .ctl, html:not(.js) .chart { display: none; }
html.js .plain { display: none; }

/* ---------- reduced motion, and the freeze while a tooltip is open ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.frozen *, .frozen *::before, .frozen *::after { transition: none !important; animation: none !important; }

/* Timeline styles. Come after kit.css in styles.css. The tall frame is the base (the fixed 1060px frame below 900px wide): a vertical
   stack of the same items. The wide frame overrides it in the media query near the end: two wording cards (Opaque's post as captured
   on 13 October against the live page on 19 October, the changed words in amber), the 13 to 19 October strip drawn to scale, the 249 day
   axis from the Series B with two derived intervals, then the four named open projects, what each source says, and what is not stated.
   Markers, cards, brackets and rows are real buttons. Wide sizes are in rem and the root font size scales with the frame, so the wide
   design is one fixed composition, 51rem wide inside the frame.
   Marks: a solid indigo dot is Opaque's own words, a grey square is a third party or a public record, a ring is this site's reading of a
   page. Cyan marks a derived figure, rose marks what is not stated, amber marks the words that differ between the two readings. */
:root { --grey: #cbd5e1; }
/* the kit sheet is placed with top or bottom only; with both set by the sheet rule it would stretch to its maximum height */
.tip { bottom: auto; }
/* a pinned tooltip that scrolls ends in an opaque Close bar, so text never runs under a floating button */
.tip.pinned .tk-close { display: block; position: sticky; bottom: -0.6rem; width: calc(100% + 1.6rem); margin: 0.5rem -0.8rem -0.6rem; padding: 0 0.8rem; border: 0; border-top: 1px solid #5b7399; border-radius: 0 0 0.4rem 0.4rem; background: #09111f; text-align: left; }
.tip[data-tone="amber"] { border-left-color: var(--amber); }
@media not all and (min-aspect-ratio: 21/20) { .tip { max-height: 80%; } }
h1 { font-size: 1rem; }
.tip p, .q { overflow-wrap: anywhere; }
.pj, .sp, .ns, .bkr, .si, .pi, .rul, .rib { opacity: var(--r, 1); }
.chart { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }
.when { margin: 0; flex: none; font-size: 0.875rem; line-height: 1.25; color: var(--mute); min-height: 1.25em; }
.plot { flex: none; min-width: 0; }
html:not(.js) .when { display: none; }
.tlw { display: none; }
.mk::after, .rw2::after { content: ""; position: absolute; inset: -0.2rem; }

/* ---------- the kinds of mark, and the words that differ ---------- */
.kco.mk { background: var(--indigo); border: 2px solid #fff; border-radius: 50%; }
.ktp.mk { background: var(--grey); border: 2px solid var(--grey); border-radius: 0.22rem; }
.krd.mk { background: var(--bg); border: 3px solid var(--indigo-t); border-radius: 50%; }
.dot { display: inline-block; flex: none; width: 0.8rem; height: 0.8rem; box-sizing: border-box; }
.kco .dot { background: var(--indigo); border: 2px solid #fff; border-radius: 50%; }
.ktp .dot { background: var(--grey); border: 2px solid var(--grey); border-radius: 0.18rem; }
.krd .dot { background: var(--bg); border: 3px solid var(--indigo-t); border-radius: 50%; }
.kg { display: inline-block; flex: none; width: 0.85rem; height: 0.85rem; box-sizing: border-box; }
.kg.kco { background: var(--indigo); border: 2px solid #fff; border-radius: 50%; }
.kg.ktp { background: var(--grey); border-radius: 0.18rem; }
.kg.krd { background: var(--bg); border: 3px solid var(--indigo-t); border-radius: 50%; }
.chg { color: #fff; background: rgba(251, 191, 36, calc(0.34 * var(--m, 1))); box-shadow: 0 2px 0 rgba(251, 191, 36, var(--m, 1)); border-radius: 0.15rem; padding: 0 0.12rem; }
.lg .chg, .kbox .chg { --m: 1; }

/* ---------- tall frame: the stack ---------- */
.tlt { position: relative; display: block; }
.tlt > li { position: relative; margin: 0 0 0.25rem; }
.lg { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; font-size: 0.875rem; line-height: 1.25; color: var(--mute); }
.li2 { display: inline-flex; align-items: center; gap: 0.35rem; }
.rul { padding: 0.1rem 0.1rem 0; }
.rtr { position: relative; height: 0.5rem; margin: 0.3rem 0 0.2rem; border-radius: 0.25rem; background: #3a5278; }
.rfl { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0.25rem 0 0 0.25rem; background: var(--cyan); }
.rsx { position: absolute; top: -0.2rem; bottom: -0.2rem; min-width: 3px; background: var(--amber); border-radius: 0.1rem; }
.rtk { position: absolute; top: -0.12rem; width: 2px; height: 0.74rem; margin-left: -1px; background: #fff; opacity: 0.75; }
.grp { display: block; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.cdt { padding: 0 0.25rem; font-size: 0.875rem; line-height: 1.2; font-weight: 700; color: var(--mute); }
.chip { min-width: 0; min-height: 1.45rem; margin: 0; padding: 0 0.4rem; border-radius: 0.3rem; font-size: 0.875rem; line-height: 1.2; font-weight: 600; color: #fff; text-align: center; white-space: nowrap; }
.chip.kco { background: var(--indigo); border: 2px solid var(--indigo); }
.chip.krd { background: transparent; border: 2px solid var(--indigo-t); }
.chip.ktp { background: var(--grey); border: 2px solid var(--grey); color: #0b1726; }
.chip.cur { box-shadow: 0 0 0 2px #fff; }
.chip.pin, .chip:hover { box-shadow: 0 0 0 2px #fff; }
.tbands { margin: 0; }
.bkr { margin: 0.05rem 0 0; }
.bkt { display: block; width: 100%; margin: 0; padding: 0 0.2rem 0 0.4rem; border: 0; border-left: 3px solid var(--cyan); border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.3; min-height: 1.3rem; }
.bkt b { color: var(--cyan-t); }
.bkt span { color: var(--mute); }
.bkt:hover, .bkt.pin, .st:hover, .st.pin, .nsb:hover, .nsb.pin, .pr:hover, .pr.pin, .pnb:hover, .pnb.pin, .arw:hover, .arw.pin { background: rgba(99, 91, 255, 0.22); }

/* the two wording cards in the tall frame, one above the other, with the interval between them */
.cds { display: block; }
.card { display: block; width: 100%; margin: 0; padding: 0.2rem 0.4rem 0.25rem 0.5rem; border: 1px solid var(--line2); border-left: 4px solid var(--indigo); border-radius: 0.5rem; background: #0a1424; text-align: left; font-size: 0.875rem; line-height: 1.25; color: #fff; }
.card .ck { display: block; }
.card .ck b { color: #fff; }
.card .kr { color: var(--mute); }
.card .cq { display: block; margin-top: 0.1rem; }
.card .cn { display: block; margin-top: 0.1rem; color: var(--mute); }
.card:hover, .card.pin, .card.cur { background: rgba(99, 91, 255, 0.2); border-color: #fff; border-left-color: var(--indigo); }
.arw { display: block; width: 100%; margin: 0; padding: 0 0.3rem; border: 0; border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.3; min-height: 1.4rem; color: #fff; }
.abt { display: flex; align-items: center; gap: 0.35rem; }
.abt b { color: var(--cyan-t); }
.abt span { color: var(--mute); }
.adn { position: relative; display: inline-block; flex: none; width: 0; height: 0.9rem; margin: 0 0.3rem 0 0.6rem; border-left: 2px solid var(--cyan); }
.adn::after { content: ""; position: absolute; left: -5px; bottom: -1px; border: 4px solid transparent; border-top: 6px solid var(--cyan); border-bottom: 0; }

/* ---------- the panels (both frames): the four open projects, what each source says ---------- */
.panels { display: block; flex: none; }
.pj { margin: 0.1rem 0 0; }
.sp { margin: 0.3rem 0 0; }
.sh { margin: 0; font-size: 0.875rem; line-height: 1.25; font-weight: 400; }
.sh b { font-weight: 700; margin-right: 0.5rem; }
.sstamp { color: var(--mute); }
.pcol { display: flex; justify-content: space-between; padding: 0 0.3rem 0 0.6rem; font-size: 0.875rem; line-height: 1.2; color: var(--mute); }
.pl, .sl { display: block; }
.pr { display: block; width: 100%; margin: 0; padding: 0.05rem 0.3rem 0.1rem 0.5rem; border: 0; border-left: 3px solid var(--indigo); border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.2; color: #fff; }
.pr.ms { border-left-color: var(--grey); }
.pr .l1 { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.pr .l2 { display: flex; justify-content: space-between; gap: 0.4rem; color: var(--mute); }
.pr .pn { grid-area: pn; font-weight: 700; }
.pr .ph { grid-area: ph; font-weight: 600; white-space: nowrap; color: var(--mute); }
.pr.ms .ph { color: #fff; }
.pr .pm { grid-area: pm; color: var(--mute); }
.pr .pa { grid-area: pa; color: var(--mute); }
.pr .ps { grid-area: ps; color: var(--mute); }
.pr b { color: #fff; font-weight: 700; }
.pnb { display: block; width: 100%; margin: 0.05rem 0 0; padding: 0.05rem 0.3rem 0.1rem 0.5rem; border: 0; border-left: 3px solid var(--rose); border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.25; color: #fff; }
.st { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.4rem; align-items: center; width: 100%; margin: 0; padding: 0.03rem 0.3rem 0.05rem; border: 0; border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.2; color: #fff; }
.st .sn { font-weight: 700; }
.st .ss { justify-self: end; padding: 0 0.45rem; border-radius: 0.6rem; border: 1px solid; text-align: center; font-weight: 600; white-space: nowrap; }
.st .sd { grid-column: 1 / -1; color: var(--mute); }
.st .sd:empty, .st .sd .lt:empty { display: none; }
.st.rd .ss { border: 2px solid var(--indigo-t); color: var(--indigo-t); background: transparent; }
.st.co .ss { border-color: var(--indigo); color: #fff; background: rgba(99, 91, 255, 0.55); }
.st.tp .ss { border-color: var(--grey); color: #e2e8f0; background: rgba(203, 213, 225, 0.14); }
.st.tl { display: block; }
.st.tl .sy { color: var(--cyan-t); font-weight: 600; }

/* ---------- what the sources do not state ---------- */
.ns { flex: none; margin: 0.15rem 0 0; padding: 0.25rem 0.5rem 0.3rem; border: 1px dashed var(--rose); border-radius: 0.4rem; background: rgba(251, 113, 133, 0.07); }
.nsh { margin: 0; font-size: 0.95rem; line-height: 1.15; font-weight: 700; color: var(--rose); }
.nsl { margin: 0.1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.4rem; row-gap: 0.05rem; }
.nsb { position: relative; display: block; width: 100%; min-height: 1.2rem; margin: 0; padding: 0.05rem 0.1rem 0.05rem 0.85rem; border: 0; border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.2; color: #fff; }
.nsb::before { content: ""; position: absolute; left: 0.2rem; top: 0.5em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--rose); }

/* ---------- the plain list, shown without script ---------- */
.plain { padding: 0.2rem 0; font-size: 0.95rem; }
.plain h2 { margin: 0.6rem 0 0.2rem; font-size: 1.05rem; }
.plain ol, .plain ul { padding-left: 1.2rem; list-style: decimal; }
.plain ul { list-style: disc; }
.plain li { margin: 0.45rem 0; }
.plain table { width: 100%; border-collapse: collapse; margin: 0.3rem 0 0.8rem; }
.plain caption { padding: 0.3rem 0; text-align: left; font-weight: 700; }
.plain th, .plain td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.plain th { color: var(--mute); font-weight: 600; }
.plain p { margin: 0.3rem 0; }
.plain li p { margin: 0.2rem 0; }
.plain em { font-style: italic; }
.plain mark { color: #fff; background: rgba(251, 191, 36, 0.34); }
.plain .der { color: var(--cyan-t); font-weight: 600; }
.plain .nst { color: var(--rose); font-weight: 600; }

/* ---------- a tall frame that is not narrow (520px and up): the longer wording fits ---------- */
@media (min-width: 520px) and (not (min-aspect-ratio: 21/20)) {
  .src .lw { display: inline; }
  .src .lt { display: none; }
  .st { grid-template-columns: 9rem 9rem minmax(0, 1fr); }
  .st .ss { justify-self: start; }
  .st .sd { grid-column: auto; }
  .st .sn .lw, .st .ss .lw, .st .sd .lw, .sstamp .lw, .nsb .lw, .card .lw, .st.tl .lw, .pt .lw { display: inline; }
  .st .sn .lt, .st .ss .lt, .st .sd .lt, .sstamp .lt, .nsb .lt, .card .lt, .st.tl .lt, .pt .lt { display: none; }
  .nsl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- a tall frame from 700px: each project on one line ---------- */
@media (min-width: 700px) and (not (min-aspect-ratio: 21/20)) {
  .pcol { display: grid; justify-content: normal; grid-template-columns: 12rem 6.6rem 7.2rem 8.8rem minmax(0, 1fr); column-gap: 0.3rem; padding: 0 0.3rem 0 0.65rem; }
  .pcol .lt { display: none; }
  .pcol .lw { display: block; }
  .pr .l1, .pr .l2 { display: contents; }
  .pr { display: grid; grid-template-columns: 12rem 6.6rem 7.2rem 8.8rem minmax(0, 1fr); grid-template-areas: "pn ph pm pa ps"; column-gap: 0.3rem; align-items: center; padding-left: 0.65rem; }
  .pr .pm .lw { display: inline; }
  .pr .pm .lt { display: none; }
}

/* ---------- a tall frame from 336px: the full sentence fits on the cards ---------- */
@media (min-width: 336px) and (not (min-aspect-ratio: 21/20)) {
  .card .lw { display: inline; }
  .card .lt { display: none; }
}

/* ---------- very narrow screens: the title leaves the frame (it stays for screen readers) so the stack fits ---------- */
@media (max-width: 419px) {
  h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stage { padding: 0.45rem 0.55rem 0.4rem; gap: 0.3rem; }
  .top { gap: 0.2rem; }
}

/* ---------- wide frame: a 51rem composition ---------- */
@media (min-aspect-ratio: 21/20) {
  .src, .tipping .src, .btn, .tk-close, .tip { font-size: 0.875rem; }
  .tip.pinned .tk-close { width: calc(100% + 1.4rem); margin: 0.4rem -0.7rem -0.6rem; padding: 0 0.7rem; }
  .btn { min-height: 1.75rem; }
  .when { min-height: 0; height: 1.3em; line-height: 1.3; white-space: nowrap; font-size: 0.875rem; }
  .chart { gap: 0.3rem; }
  .tlt, .tbands { display: none; }
  .plot { border: 1px solid var(--line); border-radius: 0.6rem; background: #0d1a2d; }
  .tlw { display: block; position: relative; height: var(--th); overflow: visible; }

  /* the axis: track, the cyan line, the month ribbon, a playhead */
  .trk { position: absolute; left: var(--ax0); width: var(--axw); top: var(--ay); height: 2px; margin-top: -1px; background: var(--line2); }
  .elp { position: absolute; left: var(--ax0); top: var(--ay); width: 0; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--cyan); }
  .pha { position: absolute; top: var(--ay); width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.55); z-index: 4; }
  .rib { position: absolute; left: var(--ax0); width: var(--axw); top: calc(var(--ay) + 0.75rem); height: 1.1rem; }
  .ys { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line2); background: rgba(74, 101, 144, 0.22); }
  .ys:nth-child(even) { background: rgba(74, 101, 144, 0.1); }
  .yt { position: absolute; top: 50%; left: 0.4rem; transform: translateY(-50%); font-size: 0.875rem; line-height: 1; color: var(--mute); white-space: nowrap; }

  /* markers on the axis, and the pill that stands for the strip */
  .mk { position: absolute; top: var(--ay); z-index: 3; box-sizing: border-box; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; opacity: var(--r, 1); transform: translate(-50%, -50%) scale(calc(0.4 + 0.6 * var(--r, 1))); }
  .mk.clmk { background: rgba(99, 91, 255, 0.28); border: 2px solid var(--indigo-t); border-radius: 0.6rem; }
  .mk:hover, .mk.pin, .mk.cur, .rw2:hover, .rw2.pin, .rw2.cur { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
  .rw2:hover, .rw2.pin, .rw2.cur { box-shadow: none; background: rgba(99, 91, 255, 0.3); }
  .zs { position: absolute; width: 0; border-left: 1px dashed var(--indigo-t); z-index: 1; opacity: var(--r, 1); }

  /* the flags of the dates on the axis: a label above the axis on one of two lanes, with a stem down to its marker */
  .lb { position: absolute; z-index: 2; height: 1rem; padding: 0 0 0 0.4rem; border-left: 1px solid var(--line2); font-size: 0.875rem; line-height: 1; white-space: nowrap; opacity: var(--r, 1); pointer-events: none; color: var(--mute); }
  .lb b { color: #fff; }
  .lb.ln1 { top: calc(var(--ay) - 1.55rem); }
  .lb.ln2 { top: calc(var(--ay) - 2.55rem); }
  .lb.ln2::after { content: ""; position: absolute; left: -1px; top: 100%; height: 0.97rem; border-left: 1px solid var(--line2); }

  /* the two wording cards, absolutely placed, and the interval between them */
  .card { position: absolute; z-index: 3; width: auto; padding: 0.3rem 0.55rem 0.2rem 0.65rem; opacity: var(--r, 1); overflow: hidden; }
  .card .cq { margin-top: 0.15rem; line-height: 1.3; }
  .card .cn { margin-top: 0.1rem; }
  .card .lw { display: inline; }
  .card .lt { display: none; }
  .arw { position: absolute; z-index: 3; width: auto; min-height: 0; margin: 0; padding: 0; opacity: var(--r, 1); }
  .arw .abt { height: 100%; }
  .arw .adn { margin-left: 1.2rem; }

  /* the strip: 13 to 19 October drawn to scale, one column for each date, one row for each entry */
  .ins { position: absolute; z-index: 2; border: 1px solid var(--line2); border-radius: 0.5rem; background: #0a1424; opacity: var(--r, 1); }
  .ih { position: absolute; left: 0.7rem; top: 0.3rem; margin: 0; font-size: 0.875rem; line-height: 1.1; white-space: nowrap; }
  .ih b { font-weight: 700; }
  .ih span { color: var(--mute); margin-left: 0.5rem; }
  .iax { position: absolute; top: 2.6rem; height: 1px; background: var(--line2); }
  .itk { position: absolute; top: -0.25rem; width: 1px; height: 0.5rem; background: var(--mute); }
  .itl { position: absolute; top: 1.5rem; transform: translateX(-50%); font-size: 0.875rem; line-height: 1; color: var(--mute); white-space: nowrap; }
  .rw2 { position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.3rem; height: 0.92rem; margin: 0; padding: 0 0.3rem 0 0; border: 0; border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1; color: var(--mute); white-space: nowrap; opacity: var(--r, 1); }
  .rw2.lf { flex-direction: row-reverse; padding: 0 0 0 0.3rem; text-align: right; }
  .rw2 .tx b { color: #fff; }
  .kbox { position: absolute; left: 0.7rem; right: 0.5rem; bottom: 0.35rem; font-size: 0.875rem; line-height: 1.2; color: var(--mute); }
  .kl { display: flex; align-items: center; gap: 0 0.9rem; margin: 0 0 0.2rem; white-space: nowrap; }
  .kr2 { display: inline-flex; align-items: center; gap: 0.35rem; }
  .kn { color: var(--cyan-t); font-weight: 600; }

  /* the two derived intervals on the axis, under the month ribbon */
  .bk { position: absolute; height: 1rem; margin: 0; padding: 0; border: 0; background: none; text-align: left; z-index: 2; }
  .bline { position: absolute; left: 0; right: 0; top: 0.1rem; height: 0.55rem; border: 2px solid var(--cyan); border-top: 0; opacity: 0.8; transform: scaleX(var(--r, 1)); transform-origin: left; }
  .bt { position: absolute; left: calc(100% + 0.45rem); top: 0.05rem; font-size: 0.875rem; line-height: 1; white-space: nowrap; opacity: calc(var(--r, 1) * var(--r, 1)); }
  .bt b { color: var(--cyan-t); }
  .bt span { color: var(--mute); }
  .bk.in .bt { left: 0.5rem; background: #0d1a2d; padding: 0 0.3rem; margin-left: -0.3rem; }
  .bk:hover .bt b, .bk.pin .bt b { text-decoration: underline; }
  .bk::after { content: ""; position: absolute; inset: 0; }

  /* the panel of the four open projects: one row for each, five columns */
  .pj { margin: 0; padding: 0.3rem 0.5rem 0.3rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #0d1a2d; }
  .sh b { margin-right: 0.6rem; }
  .pcol { display: grid; justify-content: normal; grid-template-columns: 12.6rem 6.9rem 8.1rem 9.2rem minmax(0, 1fr); column-gap: 0.3rem; margin-top: 0.1rem; padding: 0 0.3rem 0 0.65rem; }
  .pcol .lt { display: none; }
  .pcol .lw { display: block; }
  .pr .l1, .pr .l2 { display: contents; }
  .pr { display: grid; padding: 0.05rem 0.3rem 0.1rem 0.65rem; grid-template-columns: 12.6rem 6.9rem 8.1rem 9.2rem minmax(0, 1fr); grid-template-areas: "pn ph pm pa ps"; column-gap: 0.3rem; align-items: center; min-height: 1.3rem; }
  .pr .ph { justify-self: start; padding: 0 0.45rem; border-radius: 0.6rem; border: 1px solid var(--grey); }
  .pr.ms .ph { border-color: #fff; background: rgba(203, 213, 225, 0.18); }
  .pr .pm .lw { display: inline; }
  .pr .pm .lt { display: none; }
  .pnb { margin-top: 0.15rem; }
  .pt .lw { display: inline; }
  .pt .lt { display: none; }

  /* the panels row: what each source says on the left, what is not stated on the right */
  .panels { display: grid; grid-template-columns: 28.6rem minmax(0, 1fr); gap: 0.4rem; align-items: stretch; }
  .sp { margin: 0; padding: 0.3rem 0.5rem 0.3rem; border: 1px solid var(--line); border-radius: 0.5rem; background: #0d1a2d; }
  .sl { display: flex; flex-direction: column; justify-content: space-between; margin-top: 0.2rem; height: calc(100% - 1.5rem); }
  .st { grid-template-columns: 8.8rem 7.7rem minmax(0, 1fr); column-gap: 0.3rem; min-height: 1.3rem; }
  .st .ss { justify-self: start; }
  .st .sd { grid-column: auto; }
  .st .sn .lw, .st .ss .lw, .st .sd .lw, .sstamp .lw, .st.tl .lw { display: inline; }
  .st .sn .lt, .st .ss .lt, .st .sd .lt, .sstamp .lt, .st.tl .lt { display: none; }
  .ns { margin-top: 0; padding: 0.25rem 0.6rem 0.3rem; }
  .nsh { font-size: 0.95rem; }
  .nsl { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .nsb { min-height: 1.2rem; }
  .nsb .lw { display: inline; }
  .nsb .lt { display: none; }
}