/* Pointsman brand (pointsman/brand/BRAND.md): ink, cream, green for the decision taken. */
:root {
  --ink: #171717;
  --cream: #F5F2EC;
  --green: #2E9E6B;
  --amber: #C98A1B;
  --red: #C8463A;
  --violet: #7A68B8;
  --grey: #8f8a82;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', 'IBM Plex Sans JP', 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  color-scheme: dark;
  --bg: #141414;
  --fg: var(--cream);
  --fg-2: #d6d2ca;
  --muted: #a8a49c;
  --panel: #1c1c1c;
  --panel-2: #242424;
  --line: #2e2e2e;
  --code-bg: #101010;
  /* Tints behind an outcome, and the text on them. */
  --t-publish: #16382a; --i-publish: #8ed6b2;
  --t-review: #3a2c0f; --i-review: #f0c477;
  --t-urgent: #3d1a16; --i-urgent: #f2a196;
  --t-reject: #28223d; --i-reject: #c3b7ec;
  --t-map: #15263a; --i-map: #9fc6ee; --line-map: #2b4a6b;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-2: #3d3a34;
  --muted: #6b665e;
  --panel: #FBFAF7;
  --panel-2: #F1EEE7;
  --line: #DCD6CA;
  --code-bg: #F1EEE7;
  --t-publish: #DDF0E6; --i-publish: #1E6B48;
  --t-review: #F6E7C8; --i-review: #7A520C;
  --t-urgent: #F5D9D5; --i-urgent: #8E2A20;
  --t-reject: #E6E1F3; --i-reject: #4E3F86;
  --t-map: #E3EDF8; --i-map: #1F4F80; --line-map: #C3D6EC;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: var(--cream); --fg: var(--ink); --fg-2: #3d3a34; --muted: #6b665e;
    --panel: #FBFAF7; --panel-2: #F1EEE7; --line: #DCD6CA; --code-bg: #F1EEE7;
    --t-publish: #DDF0E6; --i-publish: #1E6B48; --t-review: #F6E7C8; --i-review: #7A520C;
    --t-urgent: #F5D9D5; --i-urgent: #8E2A20; --t-reject: #E6E1F3; --i-reject: #4E3F86;
    --t-map: #E3EDF8; --i-map: #1F4F80; --line-map: #C3D6EC;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--sans); }
a { color: inherit; text-underline-offset: 3px; }
code, pre { font-family: var(--mono); font-size: 0.86em; }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 0; }
h3 { font: 600 0.95rem var(--mono); margin: 0 0 4px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--i-urgent); margin: 0; }
.kicker { font: 500 0.8rem var(--mono); color: var(--muted); letter-spacing: 0.01em; }

.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 600 15px var(--mono); }
.brand .tag { font-weight: 400; color: var(--muted); }
/* The mark in ink on light, in cream on dark. */
.mark.dark { display: none; }
:root[data-theme="dark"] .mark.light { display: none; }
:root[data-theme="dark"] .mark.dark { display: inline; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: 14px var(--sans); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: 40px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip.strong { border-color: var(--fg); font-weight: 500; }
.chip.strong[aria-expanded="true"] { background: var(--fg); color: var(--bg); }

main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 12px; display: grid; gap: 26px; }

.btn { font: 600 15px var(--sans); min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); cursor: pointer; }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.go { background: #1E6B48; border-color: #1E6B48; color: #fff; }
.btn:disabled { opacity: 0.55; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Step 3's button below the check's box. */
#chain > .actions { margin-top: 18px; }

/* Intro and steps */
.intro { display: grid; gap: 12px; }
.intro p { margin: 0; font-size: 1.15rem; color: var(--fg-2); max-width: 60ch; }
.stepper { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; scroll-margin-top: 80px; }
.stepper li { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.stepper .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--mono); background: var(--panel-2); }
.stepper li.done { color: var(--fg); }
.stepper li.done .num { background: var(--t-publish); color: var(--i-publish); }
.stepper li.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.stepper li.active .num { background: #1E6B48; color: #fff; }

.flow { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.steps { flex: 999 1 560px; min-width: 0; }
.step { display: grid; gap: 14px; }
.step .sub { margin: -6px 0 0; color: var(--fg-2); }
.step > div:empty { display: none; }

/* Step 1 */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { width: 100%; height: 100%; min-height: 160px; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; cursor: pointer; }
.card:hover:not(:disabled) { border-color: var(--fg); }
.card .label { align-self: flex-start; font: 500 0.8rem var(--mono); padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--fg-2); }
.card .road { font-size: 1.15rem; }
/* A pin before the landmark. */
.card .place { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 0.92rem; }
.card .place::before { content: ''; flex: none; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin: 0 1px 2px; }
.card .text { color: var(--muted); font-size: 0.9rem; }
.card .checks-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font: 0.75rem var(--mono); color: var(--muted); }
/* "Based on": what the rule used; AI answers neutral, map checks blue. */
.chip-map { padding: 2px 8px; border-radius: 999px; background: var(--t-map); color: var(--i-map); }
.more { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.more summary { cursor: pointer; font-weight: 500; min-height: 28px; }
.more-list { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 6px; }
.more-list button { width: 100%; text-align: left; background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 0.95rem; cursor: pointer; }
.more-list button:hover:not(:disabled) { border-color: var(--muted); }

/* Boxes */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 8px; min-width: 0; }
.box-title { font-size: 1.05rem; }
.box.quote #cur-text { font-size: 1.1rem; }
.box.tint { border: none; }
.box.tint.publish { background: var(--t-publish); } .box.tint.publish .kicker, .box.tint.publish .headline { color: var(--i-publish); }
.box.tint.review { background: var(--t-review); } .box.tint.review .kicker, .box.tint.review .headline { color: var(--i-review); }
.box.tint.urgent { background: var(--t-urgent); } .box.tint.urgent .kicker, .box.tint.urgent .headline { color: var(--i-urgent); }
.box.tint.reject { background: var(--t-reject); } .box.tint.reject .kicker, .box.tint.reject .headline { color: var(--i-reject); }
.headline { font-size: 1.25rem; }
.rule-text { font-size: 1.05rem; }
.rule-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.box.duty { border: 2px solid var(--fg); }
.why-more { margin: 0; color: var(--muted); font-size: 0.92rem; }
.why { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; color: var(--fg-2); }
.chain-result.alert { color: var(--i-urgent); }

/* Step 2 */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timeline li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); opacity: 0.55; }
.timeline li.done, .timeline li.active { opacity: 1; }
.timeline li.done { background: var(--panel); }
.timeline .mark { flex: none; margin-top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); }
.timeline li.active .mark { border-color: var(--fg); animation: pulse 1s ease-in-out infinite alternate; }
.timeline li.done .mark { background: var(--green); border-color: var(--green); }
.timeline .what { display: grid; gap: 2px; min-width: 0; flex: 1; }
.timeline .head { display: flex; align-items: baseline; gap: 12px; }
.timeline .what .sub { font-size: 0.92rem; color: var(--fg-2); }
.timeline .time { margin-left: auto; font: 0.8rem var(--mono); color: var(--muted); white-space: nowrap; }
.timeline .body:empty { display: none; }
.timeline .body { margin-top: 10px; }
/* The AI and the map checks: one group, they run at the same time. */
.timeline li.pair { display: grid; gap: 8px; padding: 10px 10px 10px 14px; background: none; border: 1px dashed var(--line); opacity: 1; }
.timeline .pair-head { display: flex; align-items: baseline; gap: 12px; }
.timeline .pair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* A moving mark while something runs. */
.busy { display: inline-flex; align-items: center; gap: 8px; }
.spin { flex: none; width: 0.95em; height: 0.95em; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--fg); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Without motion: a still ring, like the timeline's still mark (the text says it runs). */
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
@keyframes pulse { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .timeline li.active .mark { animation: none; } }
.qa { display: grid; }
.qa .row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--line); }
/* The question (and its rule tag) on the left; the answer with its chips on the right, kept together. */
.qa .qcol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.qa .acol { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 10px; text-align: right; min-width: 0; }
.qa .acol strong { min-width: 0; overflow-wrap: anywhere; }
.qa .row > .fn { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .qa .row { grid-template-columns: 1fr; }
  .qa .acol { justify-content: flex-start; text-align: left; }
  /* Narrow screens: the source as wide as the row. */
  .src-pop { left: 0; right: 0; width: auto; max-width: none; }
}
.qa .row:first-child { border-top: none; }
.qa .q { color: var(--fg-2); }
.conf { font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--panel-2); color: var(--fg-2); }
.conf.vsure, .conf.sure { background: var(--t-publish); color: var(--i-publish); }
.conf.unsure { background: var(--t-review); color: var(--i-review); }
/* The map checks: question, answer and level, like the AI's answers; the source behind an (i). */
.facts .ftag { margin-right: 6px; font: 0.7rem var(--mono); color: var(--i-map); border: 1px solid var(--line-map); border-radius: 999px; padding: 1px 8px; }
.facts .fn { font-size: 0.8rem; color: var(--muted); }
/* The popover hangs from the whole row, so it never leaves the screen. */
.qa .row { position: relative; }
.src { position: static; }
.src > summary { list-style: none; }
.src > summary::-webkit-details-marker { display: none; }
.src-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: italic 600 12px/1 Georgia, serif; cursor: pointer; }
.src-btn:hover, .src[open] .src-btn { color: var(--fg); border-color: var(--fg); }
.src-btn:focus-visible { outline: 2px solid var(--i-map); outline-offset: 2px; }
.src-pop { position: absolute; z-index: 3; right: 0; top: calc(100% - 2px); width: max-content; max-width: min(420px, 100%); box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); font: 0.75rem/1.45 var(--mono); color: var(--fg-2); text-align: left; overflow-wrap: anywhere; }
.map-checks .kicker { color: var(--i-map); }
/* How much a map check matters, in the rules' terms (like the AI's confidence words). */
.lvl { font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.lvl.high { background: var(--t-urgent); color: var(--i-urgent); }
.lvl.mid { background: var(--t-review); color: var(--i-review); }
.lvl.low { background: var(--t-publish); color: var(--i-publish); }
/* A map check no rule of this step reads: context only, no colour. */
.lvl.ctx { background: var(--panel-2); color: var(--fg-2); }
/* The answers and checks the rule used: the same mark here and in "Based on". */
.qa .row.used-row { box-shadow: inset 3px 0 0 var(--fg); padding-left: 10px; }
.use-tag { font: 500 0.7rem var(--mono); color: var(--fg-2); border: 1px solid var(--fg-2); border-radius: 999px; padding: 0 7px; white-space: nowrap; }

.shelter-pin { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; pointer-events: none; }
.shelter-pin .mark { width: 16px; height: 16px; border-radius: 4px; background: #2E9E6B; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.route-pin { pointer-events: none; }
.route-pin .name { display: block; font: 600 12px var(--sans); color: #1f5fa8; background: #fff; padding: 3px 7px; border-radius: 6px; border: 2px solid #1f5fa8; white-space: nowrap; }
/* The way around by car (first check): brown, like its line. */
.route-pin.car .name { color: #8a5a00; border-color: #8a5a00; }
.shelter-pin .name { font: 600 12px var(--sans); color: #1E6B48; background: #fff; padding: 3px 7px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); white-space: nowrap; }
details.data > summary, .box details > summary, #pending-info details > summary { cursor: pointer; font: 0.8rem var(--mono); color: var(--muted); }
details.data { display: grid; gap: 4px; }
pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; max-height: 320px; margin: 6px 0 0; }

/* Darker than the map colours, so white text keeps at least 4.5:1 (WCAG AA). */
.badge { font: 600 0.85rem var(--mono); padding: 3px 12px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge.publish { background: #1E7A50; } .badge.review { background: #8A5A0C; } .badge.urgent { background: #A8352B; }
.badge.reject { background: #5E4FA0; } .badge.pending { background: #5E5A54; }
.badge.alert { background: #A8352B; } .badge.none { background: #1E7A50; }

/* Map */
.map-card { flex: 1 1 400px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.map-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.toggle { display: flex; background: var(--panel-2); border-radius: 999px; padding: 3px; }
.toggle button { font: 500 14px var(--sans); min-height: 38px; padding: 0 14px; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.map { height: 420px; }
.map-foot { padding: 12px 14px; display: grid; gap: 8px; }
.map-foot p { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.publish { background: var(--green); } .dot.review { background: var(--amber); } .dot.urgent { background: var(--red); }
.dot.reject { background: var(--violet); } .dot.pending { background: var(--grey); }
/* The flood layer: the 0.5 to 3 m colour of the GSI legend. */
.swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch.flood { background: #FFD8C0; border: 1px solid #FFB7B7; opacity: 0.75; }

/* How it works */
.how { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 20px; scroll-margin-top: 80px; }
.how-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.how-head p { margin: 6px 0 0; max-width: 72ch; color: var(--fg-2); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.how-steps li { background: var(--panel-2); border-radius: 12px; padding: 14px; display: grid; gap: 6px; align-content: start; font-size: 0.92rem; color: var(--fg-2); }
.how-steps li strong { color: var(--fg); font-size: 1rem; }
.how-steps li.accent { background: var(--t-publish); }
.how-steps li.accent .kicker { color: var(--i-publish); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; font-size: 0.92rem; }
.live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.reports { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.reports button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left;
  background: none; color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; min-height: 44px; }
.reports button:hover { border-color: var(--muted); }
.reports .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.reports .time { font: 0.78rem var(--mono); color: var(--muted); }
.pending li { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: 8px; align-items: center; }
.pending .issue { font: 0.85rem var(--mono); text-align: right; }
#pending-info p { margin: 8px 0 0; }

footer { max-width: 1240px; margin: 0 auto; padding: 8px 24px 32px; }

@media (max-width: 900px) {
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main { padding: 20px 16px 8px; }
  .top { padding: 8px 16px; }
  .cards, .how-steps { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .map { height: 300px; }
  .stepper li { padding-right: 12px; font-size: 0.88rem; }
}

/* Developer view: beside the page on wide screens, a drawer at the bottom on
   narrow ones. A sequence diagram: one column per part, an arrow per event. */
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.dev { position: fixed; z-index: 4; top: var(--top-h, 62px); right: 0; bottom: 0; width: var(--side-w, 440px); box-sizing: border-box; overflow: auto;
  --dev-pad: 16px; padding: var(--dev-pad) 18px 24px; background: var(--panel); border-left: 1px solid var(--line); display: grid; align-content: start; gap: 10px; }
.dev-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dev p { margin: 0; }
/* The left edge of a side panel: drag it (or use the arrow keys) to resize. */
.side-grip { position: fixed; z-index: 5; top: var(--top-h, 62px); bottom: 0; right: calc(var(--side-w, 440px) - 5px); width: 10px; cursor: col-resize; touch-action: none; }
.side-grip::after { content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: var(--line); }
.side-grip:hover::after, .side-grip:focus-visible::after, body.resizing .side-grip::after { background: var(--muted); }
.side-grip:focus-visible { outline: 2px solid var(--i-map); outline-offset: -2px; }
body.resizing { cursor: col-resize; user-select: none; }
/* The reports panel: the two lists as tabs; the open one scrolls by itself. */
.side-reports section { display: grid; gap: 6px; }
.side-reports h3 { margin: 6px 0 0; font-size: 1rem; }
.side-reports .reports { max-height: max(240px, calc(100vh - 420px)); overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.tabs { display: flex; gap: 4px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] { font: 600 0.9rem var(--sans); padding: 8px 12px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--i-map); outline-offset: -2px; }
.tabs .count { font: 500 0.75rem var(--mono); padding: 1px 7px; border-radius: 999px; background: var(--panel-2); color: var(--fg-2); }
.tabs .count:empty { display: none; }
@media (min-width: 1100px) {
  body.dev-open main, body.dev-open footer { margin-right: calc(var(--side-w, 440px) + 16px); margin-left: 16px; }
}
@media (max-width: 1099px) {
  .side-grip { display: none; }
  .dev { top: auto; left: 0; width: auto; height: 42vh; height: 42dvh; --dev-pad: 12px; border-left: 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
  body.dev-open { padding-bottom: 43vh; padding-bottom: 43dvh; }
  html:has(body.dev-open) { scroll-padding-bottom: 43dvh; }
}
.seq { display: grid; gap: 2px; --lane: var(--line);
  background-image: linear-gradient(to right, transparent calc(10% - 1px), var(--lane) calc(10% - 1px), var(--lane) 10%, transparent 10%,
    transparent calc(30% - 1px), var(--lane) calc(30% - 1px), var(--lane) 30%, transparent 30%,
    transparent calc(50% - 1px), var(--lane) calc(50% - 1px), var(--lane) 50%, transparent 50%,
    transparent calc(70% - 1px), var(--lane) calc(70% - 1px), var(--lane) 70%, transparent 70%,
    transparent calc(90% - 1px), var(--lane) calc(90% - 1px), var(--lane) 90%, transparent 90%); }
.seq-lanes { position: sticky; top: calc(-1 * var(--dev-pad)); z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px 0;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.seq-lanes span { font: 600 0.68rem var(--mono); text-align: center; color: var(--fg-2); overflow-wrap: anywhere; }
.ev { padding: 4px 0 8px; border-radius: 8px; }
.ev.pending { opacity: 0.45; }
.ev-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 14px; }
.arrow { position: relative; }
.arrow::before { content: ''; position: absolute; top: 6px; left: calc(50% / var(--k)); right: calc(50% / var(--k)); border-top: 2px solid var(--fg-2); }
.arrow::after { content: ''; position: absolute; top: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.arrow.ltr::after { right: calc(50% / var(--k)); border-left: 8px solid var(--fg-2); }
.arrow.rtl::after { left: calc(50% / var(--k)); border-right: 8px solid var(--fg-2); }
.ev-text { background: var(--panel); margin: 2px 6px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.85rem; display: grid; gap: 4px; }
.ev-text p { color: var(--fg-2); }
.ev-data { display: grid; gap: 4px; }
.ev-data summary { cursor: pointer; font: 0.75rem var(--mono); color: var(--i-map); }
.ev-data pre { margin: 0; max-height: 260px; overflow: auto; background: var(--code-bg); padding: 8px; border-radius: 8px; font-size: 0.72rem; }
/* Wide data scrolls inside its own box: the grids around it never grow past the panel. */
.seq, .ev-text, .ev-data { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ev { min-width: 0; }
.ev-data pre { max-width: 100%; }
/* One step marked on the page and in the developer view. */
.dev-hl { outline: 2px solid var(--i-map); outline-offset: 3px; border-radius: 10px; }
.ev.dev-hl { outline-offset: 1px; background: var(--t-map); }
/* The header button: a short label on phones, so the header does not wrap. */
.short { display: none; }
@media (max-width: 600px) { .long { display: none; } .short { display: inline; } }
/* The final result (step 4) is its headline. */
.box.final .headline { font-size: 1.45rem; }
.box.final .rule-text { display: block; margin-top: 4px; }
/* The first two results are steps on the way: smaller than the final one. */
#outcome .headline { font-size: 1.05rem; }
/* The chain as a diagram (Pointsman's SVG): in the page's colours, light and dark. */
#graph-box .pm-graph { --pm-bg: var(--panel); --pm-line: var(--line); --pm-brand: var(--green); --pm-text: var(--fg); --pm-text2: var(--muted); --pm-text3: var(--grey); font-family: var(--sans); }
/* A flow from left to right: on narrow screens it scrolls sideways instead of shrinking. */
#graph-box .graph-svg { overflow-x: auto; }
#graph-box .graph-svg svg { display: block; width: 100%; min-width: 600px; max-width: 860px; margin: 8px auto; }
/* The diagram's own boxes are SVG rects, not the page's .box. */
#graph-box rect.box { display: inline; }
#graph-box a { font-size: 0.85rem; }
/* Five header buttons on one line on a phone. */
@media (max-width: 420px) { nav { gap: 6px; } .chip { font-size: 13px; padding: 0 10px; } }
/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Phones: less padding in the nested First check list. */
@media (max-width: 520px) {
  .timeline li { padding: 10px; gap: 10px; }
  .timeline li.pair { padding: 8px 6px; }
}

/* Steps 2 and 3: one line under the rule instead of repeating the answers. */
.uses-note { font-size: 0.85rem; color: var(--fg-2); }
.uses-note .use-tag { margin-right: 2px; }
/* Step 4: what the final result was made from, as the chain it went through. */
.stages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stages .kicker { flex-basis: 100%; }
.stage { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--fg-2); }
.stage-arrow { color: var(--muted); }
.badge.small { font-size: 0.78rem; padding: 1px 9px; }
.badge.skip { background: var(--panel-2); color: var(--fg-2); }
/* The report, above the map in steps 3 and 4. */
.map-report { display: grid; gap: 2px; padding: 14px 16px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.map-report[hidden] { display: none; }
.map-report #map-report-title { font-size: 1.05rem; }
.map-report #map-report-place { font-size: 0.88rem; color: var(--fg-2); }
.map-report #map-report-title:empty, .map-report #map-report-place:empty { display: none; }
/* The report itself is the key information: large, with a bar like a quote. */
.map-report blockquote { margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--fg); font-size: 1.02rem; line-height: 1.5; color: var(--fg); }