/* An article is prose, so it wants the measured middle column a chapter gets —
   not the full-width span manual.css hands to pages without a data-chapter
   attribute, which exists for the contents page's card grid. Written with the
   same selector rather than a bare `.wrap` because that one is more specific and
   would win; this file loads after manual.css, so an equal match takes it. Not
   faking a data-chapter attribute: manual-nav.js reads that to decide a page is
   a chapter, and an article is not one. */
body:not([data-chapter]) .wrap {
  grid-column: 2;
  width: auto;
  max-width: none;
  justify-self: stretch;
}

/* Articles reuse the manual's typography and palette wholesale — /manual/manual.css
   is loaded first and this file only adds what an article needs and a chapter
   does not. Two stylesheets rather than a copy of one: the manual is already the
   place where Thai body text at this measure was tuned, and a second set of the
   same tokens would drift from it within a month. */

.article-hero {
  padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.article-kicker {
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.article-meta {
  font-size: 0.9rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}

/* The number itself, when a paragraph would bury it. Used sparingly — three or
   four to an article, for the figures a reader should leave holding. */
.headline-figure {
  margin: 1.8rem 0;
  padding: 1.3rem 1.5rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--measure);
}
.headline-figure .big {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.headline-figure .caption {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Measured data, so it scrolls rather than squeezing: a table of eleven days
   with six columns does not reflow into 360px, and a squeezed number is worse
   than one the reader has to swipe to. */
.data-table-wrap {
  overflow-x: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td {
  padding: 0.6rem 0.8rem;
  text-align: end;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table th:first-child,
.data-table td:first-child {
  text-align: start;
}
.data-table thead th {
  background: var(--code-bg);
  font-weight: 600;
  color: var(--ink-2);
  position: sticky;
  top: 0;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr.highlight {
  background: var(--accent-bg);
}
.table-note {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin: -1rem 0 1.8rem;
  max-width: var(--measure);
}

/* Where the article says what it cannot tell you. Deliberately not styled as a
   warning: these are the terms the numbers come with, not a hazard. */
.limits {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  max-width: var(--measure);
}
.limits h2 {
  font-size: 1.15rem;
  margin: 0 0 0.7rem;
}
.limits ul {
  margin: 0;
  padding-inline-start: 1.2rem;
}
.limits li {
  margin: 0.45rem 0;
}
.limits > :last-child {
  margin-bottom: 0;
}

/* A map is the argument in sections 2 and 4, not an illustration of it, so it
   gets the full column rather than the prose measure — the two panels are meant
   to be compared side by side, and squeezing them to 34rem defeats that. */
.map-figure {
  margin: 2rem 0;
  max-width: none;
}
.map-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.map-figure figcaption {
  max-width: var(--measure);
  margin-top: 0.8rem;
}

/* Below this the two panels are ~180px each and the dots merge. Stacking keeps
   each one legible; the shared scale still holds, so the comparison survives. */
@media (max-width: 640px) {
  .map-figure img {
    min-width: 0;
  }
}

/* ── Interactive plan map ─────────────────────────────────────────────── */

/* Sits under the static figure it belongs to, so the argument is already made
   before this loads. Nothing here is required reading — it is for the reader who
   wants to check the claim against streets they know. */
.plan-map {
  margin: 1.2rem 0 2rem;
  /* Reserve the height before the map exists. Two reasons, and the first one is
     not cosmetic: this container starts empty, an empty div is 712x0, and an
     IntersectionObserver on a zero-area target never fires — so the lazy mount
     never ran at all. The second is the usual one, that the page should not jump
     when the map arrives. */
  min-height: 30rem;
}
@media (max-width: 640px) {
  .plan-map { min-height: 24rem; }
}
.plan-map-canvas {
  height: 26rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--code-bg);
}
@media (max-width: 640px) {
  .plan-map-canvas { height: 20rem; }
}

.plan-map-controls {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.plan-map-tab {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.plan-map-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.plan-map-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}
.plan-map-van {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
/* A van switched off keeps its colour on the dot — the dot is what identifies it
   between the map and this button, so draining it would break the pairing. */
.plan-map-van.is-off {
  color: var(--ink-3);
  text-decoration: line-through;
  opacity: 0.65;
}
.plan-map-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.plan-map-summary {
  margin-inline-start: auto;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* The depot, drawn to match the static figures' square rather than Leaflet's
   default teardrop pin. */
.plan-map-depot span {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.plan-map-hint {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin: 0.6rem 0 0;
  max-width: var(--measure);
}
/* Fetch or Leaflet failed. The static figure above already said it, so this only
   has to stop the empty box looking broken. */
.plan-map.is-unavailable { display: none; }