/* 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 events with the days between them. The wide frame (5:4) overrides it in the media query near the end: one
   horizontal axis drawn to scale, the markers, a magnified inset, the days between dates, two outcome bars and two brackets.
   Markers, bars and brackets 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, 53rem by 42.4rem. Colours: indigo marks a date, a ring marks the Trust's own account, cyan marks a derived
   number, rose marks what is not stated, amber marks an aim or a floor. */
:root { --seg-d: #635bff; --seg-f: #b3afff; --seg-1: #06b6d4; }
/* 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; }
@media not all and (min-aspect-ratio: 21/20) { .tip { max-height: 80%; } }
h1 { font-size: 1rem; }
.chart { display: flex; flex-direction: column; gap: 0.4rem; flex: none; }
.pu { margin: 0; }
.scrub .when { height: 2.55em; min-height: 0; overflow: hidden; line-height: 1.25; }
.plot { flex: none; min-width: 0; }
.tlw { display: none; }

/* ---------- segments of an outcome bar (shared by both frames) ---------- */
.sg { display: block; min-width: 0; min-height: 0; box-shadow: inset 0 0 0 1px #0d1a2d; }
.sg.dismissal, .sw.dismissal { background: var(--seg-d); }
.sg.final, .sw.final { background: var(--seg-f); }
.sg.first, .sw.first { background: var(--seg-1); }
.sg.none, .sw.none { background: transparent; box-shadow: inset 0 0 0 2px var(--mute); }
.sw { display: inline-block; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 2px; vertical-align: -1px; }

/* ---------- tall frame: the stack ---------- */
.tlt { position: relative; display: block; }
.tlt::before { content: ""; position: absolute; left: 0.55rem; top: 0.7rem; bottom: 0.7rem; width: 2px; background: var(--line2); }
.tlt > li { position: relative; padding-left: 1.5rem; }
.rw { position: relative; display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 1.6rem; margin: 0; padding: 0.05rem 0.3rem 0.05rem 0.2rem; border: 0; border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.2; color: #fff; }
.rw .dt { flex: none; font-weight: 700; white-space: nowrap; }
.rw .nm { min-width: 0; color: var(--mute); }
.rw .dot { position: absolute; left: -1.4rem; top: 50%; width: 0.95rem; height: 0.95rem; margin-top: -0.475rem; border-radius: 50%; background: var(--indigo); border: 2px solid #fff; }
.rw.acct .dot { background: var(--bg); border: 3px solid var(--indigo-t); }
.rw.aim .dot { background: transparent; border: 2px dashed var(--cyan-t); }
.rw:hover, .rw.pin, .rw.cur, .chip:hover, .chip.pin, .chip.cur, .bkt:hover, .bkt.pin, .gbtn:hover, .gbtn.pin { background: rgba(99, 91, 255, 0.22); }
.aimr .nm { color: var(--cyan-t); }
.gr { display: flex; align-items: center; min-height: 1.25rem; padding-left: 1.5rem; font-size: 0.875rem; }
.gr > button { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 1.25rem; margin: 0; padding: 0 0.2rem; border: 0; border-radius: 0.3rem; background: none; text-align: left; color: var(--cyan-t); }
.gr .gb { display: block; flex: none; height: 0.55rem; width: calc(var(--n, 0) / 479 * 5rem * var(--r, 1)); border-radius: 1px; background: var(--cyan); }
.gr .gtx { margin-left: 0.5rem; font-size: 0.875rem; line-height: 1.1; font-weight: 600; color: var(--cyan-t); white-space: nowrap; }
.gr > button .gtx { margin-left: 0; }
.gr > .gb + .gtx { margin-left: 0.5rem; }
.grp .gh { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.1rem 0 0.1rem; font-size: 0.875rem; line-height: 1.2; }
.grp .dt { font-weight: 700; white-space: nowrap; }
.grp .nm { color: var(--mute); }
.chips { display: flex; gap: 0.2rem; }
.chip { flex: 1 1 0; min-width: 0; min-height: 1.6rem; margin: 0; padding: 0; border: 2px solid var(--indigo); border-radius: 0.3rem; background: var(--indigo); font-size: 0.875rem; line-height: 1.2; font-weight: 600; color: #fff; text-align: center; }
.chip.acct { background: transparent; border-color: var(--indigo-t); }
.chip.pin, .chip.cur { box-shadow: 0 0 0 2px #fff; }
.otb { display: flex; width: calc(var(--bn, 0) / 34 * 100% * var(--r, 1)); height: 1.2rem; margin: 0.1rem 0 0; padding: 0; border: 0; background: none; }
.otb .sg { flex: var(--c) 1 0; height: 100%; }
.otb:hover, .otb.pin { box-shadow: 0 0 0 2px #fff; }
.otx { display: block; margin: 0.05rem 0 0.05rem; font-size: 0.875rem; line-height: 1.2; color: #fff; }
.bkr { padding-left: 1.5rem; }
.bkt { display: block; width: 100%; margin: 0.1rem 0 0; padding: 0 0.2rem; border: 0; border-left: 3px dashed var(--cyan-t); border-radius: 0.3rem; background: none; text-align: left; font-size: 0.875rem; line-height: 1.2; }
.bkt b { display: block; color: var(--cyan-t); }
.bkt span { display: block; color: var(--mute); }
.tkey { display: flex; flex-wrap: wrap; gap: 0 0.8rem; padding: 0.2rem 0 0 !important; font-size: 0.875rem; line-height: 1.2; }
.tk2 { display: inline-flex; align-items: center; gap: 0.3rem; }
.tnote { padding: 0 0 0 !important; font-size: 0.875rem; line-height: 1.2; color: var(--mute); }
.tlt .tkey::before, .tlt .tnote::before { content: none; }

/* ---------- what the record does 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; gap: 0.05rem; }
.nsl li { position: relative; padding-left: 0.9rem; font-size: 0.875rem; line-height: 1.2; }
.nsl li::before { content: ""; position: absolute; left: 0.15rem; 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 .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 and longer gap bars fit ---------- */
@media (min-width: 520px) and (not (min-aspect-ratio: 21/20)) {
  .ns .lw, .src .lw { display: inline; }
  .ns .lt, .src .lt { display: none; }
  .gr .gb { width: calc(var(--n, 0) / 479 * 14rem * var(--r, 1)); }
}

/* ---------- 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: 53rem by 42.4rem 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; }
  .scrub { grid-template-columns: auto minmax(0, 13rem) 1fr; }
  .scrub-l, .scrub .when { font-size: 0.875rem; }
  .scrub .when { line-height: 1.25; }
  .chart { gap: 0.3rem; }
  .tlt { display: none; }
  .plot { border: 1px solid var(--line); border-radius: 0.6rem; background: #0d1a2d; }
  .tlw { --ax0: 0.9rem; --axw: 49.2rem; --ay: 12.5rem; --th: 26.2rem; --bh: 9.2rem; display: block; position: relative; height: var(--th); overflow: visible; }

  /* the axis, the elapsed line, the year ribbon and the 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); width: calc(var(--e, 0) * var(--axw)); top: var(--ay); height: 4px; margin-top: -2px; border-radius: 2px; background: var(--cyan); }
  .pha { position: absolute; left: calc(var(--ax0) + var(--pk, 0) * var(--axw)); 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.8rem); height: 1.2rem; }
  .ys { position: absolute; top: 0; bottom: 0; left: calc(var(--k) * 100%); width: calc(var(--kw) * 100%); 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: calc(var(--at) * 100%); transform: translateY(-50%); font-size: 0.875rem; line-height: 1; color: var(--mute); }

  /* date markers */
  .mk { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw)); top: var(--ay); z-index: 3; width: 1.15rem; height: 1.15rem; margin: -0.575rem 0 0 -0.575rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--indigo); opacity: var(--r, 1); transform: scale(calc(0.4 + 0.6 * var(--r, 1))); }
  .mk::after { content: ""; position: absolute; inset: -0.3rem; }
  .mk.acct { border: 3px solid var(--indigo-t); background: var(--bg); }
  .mk.aim { width: 1.3rem; height: 1.3rem; margin: -0.65rem 0 0 -0.65rem; border: 2px dashed var(--cyan-t); background: var(--bg); }
  .mk.clmk { width: calc(var(--kw) * var(--axw) + 1.15rem); margin-left: calc((var(--kw) * var(--axw) + 1.15rem) / -2); border-radius: 0.6rem; }
  .mk:hover, .mk.pin, .mk.cur, .imk:hover, .imk.pin, .imk.cur { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }

  /* labels: a short flag on the marker (above) or a stem down from it (below) */
  .lb { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw)); z-index: 2; padding: 0 0.4rem; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; opacity: var(--r, 1); }
  .lb b { display: block; }
  .lb span { display: block; color: var(--mute); }
  .lb.l { border-left: 1px solid var(--line2); }
  .lb.r { transform: translateX(-100%); border-right: 1px solid var(--line2); text-align: right; }
  .lb.up { bottom: calc(var(--th) - var(--ay) + 0.62rem); }
  .lb.dn { top: calc(var(--ay) + 3.6rem); }
  .lb.dn2 { top: calc(var(--ay) + 6.1rem); }
  .stem.dn2 { height: 5.5rem; }
  .stem { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw)); top: calc(var(--ay) + 0.6rem); height: 3rem; width: 0; border-left: 1px solid var(--line2); opacity: var(--r, 1); }

  /* the days between dates */
  .gp { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw)); width: calc(var(--kw) * var(--axw)); top: calc(var(--ay) + 2.15rem); height: 1.5rem; margin: 0; padding: 0; border: 0; background: none; z-index: 2; }
  .gline { position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 0.5rem; border-left: 1px solid var(--cyan); border-right: 1px solid var(--cyan); background: linear-gradient(var(--cyan), var(--cyan)) center / 100% 1px no-repeat; transform: scaleX(var(--r, 1)); transform-origin: left; }
  .gtxt { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 0.875rem; line-height: 1.1; font-weight: 600; color: var(--cyan-t); white-space: nowrap; opacity: calc(var(--r, 1) * var(--r, 1) * var(--r, 1) * var(--r, 1)); }
  .gbtn:hover .gtxt, .gbtn.pin .gtxt { text-decoration: underline; }
  .gbtn::after { content: ""; position: absolute; inset: -0.2rem 0; }
  .gcap { display: none; }

  /* the sky: outcomes */
  .lgd { position: absolute; left: 25.1rem; top: 0.3rem; width: 15.1rem; font-size: 0.875rem; line-height: 1.25; opacity: var(--r, 1); }
  .lgh, .lgr { display: grid; grid-template-columns: 0.85rem minmax(0, 1fr) 2.2rem 2.2rem; column-gap: 0.35rem; align-items: baseline; }
  .lgh .lgn { grid-column: 1 / span 2; }
  .lgh .lgc { color: var(--mute); text-align: right; font-weight: 400; }
  .lgc { text-align: right; font-weight: 700; }
  .lgx { margin: 0.1rem 0 0; color: var(--mute); }
  .ob { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw) - 1.2rem); bottom: calc(var(--th) - var(--ay) + 0.85rem); z-index: 2; display: flex; flex-direction: column-reverse; width: 2.4rem; height: calc(var(--bn) / 34 * var(--bh) * var(--r, 1)); margin: 0; padding: 0; border: 0; background: none; }
  .ob .sg { flex: var(--c) 1 0; }
  .ob:hover, .ob.pin { box-shadow: 0 0 0 2px #fff; }
  .obl { position: absolute; left: 50%; bottom: calc(100% + 0.15rem); transform: translateX(-50%); text-align: center; font-size: 0.875rem; line-height: 1.15; white-space: nowrap; }
  .obl.lf { left: 0; transform: none; text-align: left; }
  .obl b { display: block; color: #fff; }
  .obl span { display: block; color: var(--cyan-t); font-weight: 600; }

  /* the inset: 10 to 21 February 2025, 12 days drawn to scale */
  .ins { --ix0: 1.6rem; --iu: 2.05rem; --iy: 4.9rem; --ih: 8.5rem; position: absolute; left: 0; top: 0.3rem; z-index: 2; width: 24.9rem; height: var(--ih); border: 1px solid var(--line2); border-radius: 0.5rem; background: #0a1424; }
  .ih { margin: 0; padding: 0.3rem 0.6rem 0; font-size: 0.875rem; line-height: 1.25; white-space: nowrap; }
  .ih b { margin-right: 0.7rem; }
  .ih span { color: var(--mute); }
  .itrk { position: absolute; left: var(--ix0); width: calc(11 * var(--iu)); top: var(--iy); height: 3px; margin-top: -1.5px; background: var(--cyan); }
  .imk { position: absolute; left: calc(var(--ix0) + var(--d) * var(--iu)); top: var(--iy); z-index: 3; width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--indigo); opacity: var(--r, 1); transform: scale(calc(0.4 + 0.6 * var(--r, 1))); }
  .imk::after { content: ""; position: absolute; inset: -0.3rem; }
  .imk.acct { border: 3px solid var(--indigo-t); background: var(--bg); }
  .ilb { position: absolute; left: calc(var(--ix0) + var(--d) * var(--iu)); z-index: 2; padding: 0 0.4rem; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; opacity: var(--r, 1); }
  .ilb b { display: block; }
  .ilb span { display: block; color: var(--mute); }
  .ilb.l { border-left: 1px solid var(--line2); }
  .ilb.r { transform: translateX(-100%); border-right: 1px solid var(--line2); text-align: right; }
  .ilb.up { bottom: calc(var(--ih) - var(--iy) + 0.55rem); }
  .ilb.dn { top: calc(var(--iy) + 0.55rem); }
  .zoomline { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw)); top: 8.8rem; height: 3.15rem; width: 0; border-left: 1px dashed var(--indigo-t); z-index: 1; opacity: var(--r, 1); }

  /* the two brackets, from a date to 1 January 2027 */
  .bk { position: absolute; left: calc(var(--ax0) + var(--k) * var(--axw)); width: calc(var(--kw) * var(--axw)); height: 2.9rem; margin: 0; padding: 0; border: 0; background: none; text-align: left; z-index: 2; }
  .bk1 { top: calc(var(--ay) + 6.9rem); }
  .bk2 { top: calc(var(--ay) + 9.9rem); }
  .bline { position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 0.5rem; border: 1px dashed var(--cyan); border-top: 0; transform: scaleX(var(--r, 1)); transform-origin: left; }
  .bt { position: absolute; left: 0; top: 0; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; opacity: calc(var(--r, 1) * var(--r, 1)); }
  .bt b { display: block; color: var(--cyan-t); }
  .bt span { display: block; color: var(--mute); }
  .bk2 .bt { left: auto; right: calc(100% + 0.5rem); top: 0.65rem; text-align: right; }
  .bk:hover .bt b, .bk.pin .bt b { text-decoration: underline; }
  .bk::after { content: ""; position: absolute; inset: 0 0 0 0; }

  /* the key */
  .kbox { position: absolute; left: 0.9rem; top: calc(var(--ay) + 3.6rem); width: 17.2rem; font-size: 0.875rem; line-height: 1.25; color: var(--mute); }
  .kbox p { margin: 0 0 0.25rem; }

  /* the panel of what is not stated: two columns */
  .ns { margin-top: 0.3rem; padding: 0.25rem 0.6rem 0.3rem; }
  .nsh { font-size: 0.95rem; }
  .nsl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.2rem; row-gap: 0.15rem; grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
}