/* "How trains work" (set PHY): the page's own styles. The site's site.css comes first, so these only add what the
   figures need. Figure colours are tokens with a dark set, as the site's are. */
:root {
  --sky: #F2F4F6; --fumes: #3A3530; --fumes2: #6A625A; --ground: #E9E4DA; --ballast: #CFC8BA; --sleeper: #A8957A; --rail: #6E737C;
  --shell: #3B4048; --dark: #23262C; --metal: #8A909A; --metal2: #B9BEC6; --wheel: #2A2D33; --spoke: #9AA0AA;
  --water: #8FC1DE; --steam: #E3EAEF; --fire: #E8792B; --fire2: #F6C445; --live: #D9472B; --exh: #9AA3AE;
  --amp: #D99A00; --regen: #1F9D55; --glass: #A9C0D0; --body: #E5E8EC; --body-line: #3B4048; --wire: #2E3238; --blue: #1D5FBF;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --sky: #151A20; --fumes: #8C8278; --fumes2: #5E5750; --ground: #1D2026; --ballast: #34373D; --sleeper: #5E503F; --rail: #9AA0AA;
  --shell: #59606B; --dark: #30343B; --metal: #7C838E; --metal2: #5A606A; --wheel: #3A3F47; --spoke: #A4AAB5;
  --water: #2F6A8C; --steam: #232B33; --glass: #3E5566; --body: #262B32; --body-line: #A4AAB5; --wire: #C9CDD3;
  --amp: #F2B829; --regen: #3CC47A; --blue: #6E9EF0; } }
:root[data-theme="dark"] {
  --sky: #151A20; --fumes: #8C8278; --fumes2: #5E5750; --ground: #1D2026; --ballast: #34373D; --sleeper: #5E503F; --rail: #9AA0AA;
  --shell: #59606B; --dark: #30343B; --metal: #7C838E; --metal2: #5A606A; --wheel: #3A3F47; --spoke: #A4AAB5;
  --water: #2F6A8C; --steam: #232B33; --glass: #3E5566; --body: #262B32; --body-line: #A4AAB5; --wire: #C9CDD3;
  --amp: #F2B829; --regen: #3CC47A; --blue: #6E9EF0;
}

.hw .lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
.hw p { max-width: 72ch; }

/* The colour key (PHY6): each colour has one job in every figure */
.hw-key { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .9rem; color: var(--muted); margin: 14px 0 0; max-width: none; }
.hw-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--k); margin-right: 5px; vertical-align: -1px; }
.hw-key i.k-steam-used { opacity: .6; }

/* What's on this page: ten cards, the first fold's picture of the page. Each shows a still crop of its own section's
   drawing (made by the script from the live figure), its title and a question. */
.hw-cards ol { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hw-cards a { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 10px 12px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--fg); text-decoration: none; }
.hw-cards a:hover { border-color: var(--muted); }
.hw-thumb { display: flex; gap: 3px; aspect-ratio: 2.4; margin: 0 0 8px; border-radius: 6px; overflow: hidden; background: var(--sky); }
.hw-thumb svg { flex: 1; min-width: 0; width: 100%; height: 100%; display: block; }
.hw-cards b { font-weight: 700; line-height: 1.25; }
.hw-cn { display: none; }
.hw-hook { color: var(--muted); font-size: .86rem; line-height: 1.35; margin-top: 3px; }
  color: var(--bg); font-size: .8rem; font-weight: 700; margin-bottom: 6px; }
@media (max-width: 560px) {
  .hw-cards ol { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hw-cards a { padding: 8px 10px 10px; }
  .hw-hook { font-size: .8rem; }
}

/* Sections: each starts on its heading, clear of the masthead and (on narrow screens) the jump row */
.hw section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--mast-h) + 12px); }
.hw .line-main > section:first-child { border-top: 0; margin-top: 0; }
/* Under 960 px the jump row (about 48 px) pins under the masthead. The section lands with its top 28 px under the
   masthead and its heading clear of the row, and the section before ends above line.js's 80 px line, so the row marks
   the section you jumped to rather than the one before it. */
@media (max-width: 960px) { .hw .line-layout section[id] { scroll-margin-top: calc(var(--mast-h) + 28px); padding-top: 34px; } }
.hw section h2 { margin-top: 0; }
.section-num { color: var(--muted); font-weight: 600; font-size: .85rem; margin: 0 0 2px; }
.hw-next { margin: 18px 0 0; font-size: .92rem; }
.hw-next a { font-weight: 650; text-decoration: none; }
.hw-next a:hover { text-decoration: underline; }

.hw figure { margin: 16px 0 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px; }
.hw figure svg { display: block; width: 100%; height: auto; }
.hw figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.fig-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.fig-title { font-weight: 700; font-size: .98rem; margin-right: auto; }
.btn { font: inherit; font-size: .85rem; padding: 6px 12px; min-height: 32px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg); color: var(--fg); cursor: pointer; }
.btn:hover { border-color: var(--fg); }
.btn[aria-pressed="true"].toggle { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hw-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; max-width: 100%; }
.hw-seg button { font: inherit; font-size: .85rem; padding: 6px 12px; min-height: 32px; border: 0; background: var(--bg); color: var(--fg); cursor: pointer; }
.hw-seg button + button { border-left: 1px solid var(--rule); }
.hw-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.ctrl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: .9rem; margin: 6px 0 4px; }
.ctrl label { display: inline-flex; align-items: center; gap: 8px; }
.ctrl input[type=range] { width: 180px; accent-color: var(--fg); }
.ctrl output { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.5em; display: inline-block; }
.readout { font-size: .95rem; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.readout p { margin: .15em 0; max-width: none; }
.readout b { font-variant-numeric: tabular-nums; }
.ok { color: var(--regen); font-weight: 700; } .bad { color: var(--warn-fg); font-weight: 700; } .meh { color: var(--warn-fg); font-weight: 700; }

ol.steps { margin: 6px 0 0; padding-left: 0; list-style: none; counter-reset: s; font-size: .93rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 22px; }
ol.steps li { counter-increment: s; position: relative; padding-left: 30px; }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: .75rem; font-weight: 700; display: grid; place-items: center; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two figure { margin: 0; }
#fig-cant svg { max-width: 520px; margin: 0 auto; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } .ctrl input[type=range] { width: 140px; } }

.hw-timeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.hw-timeline li { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; font-size: .9rem; border-top: 4px solid var(--c, var(--fg)); }
.hw-timeline .yr { font-weight: 800; font-size: 1.15rem; display: block; font-variant-numeric: tabular-nums; }
.hw-timeline .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }

.bars { display: grid; gap: 10px; margin: 10px 0; }
.bar-row { display: grid; grid-template-columns: 150px 1fr minmax(60px, auto); gap: 10px; align-items: center; font-size: .92rem; }
.bar-track { background: var(--bg); border-radius: 6px; height: 22px; overflow: hidden; border: 1px solid var(--rule); }
.bar-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .35s ease; }
.bar-val { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 96px 1fr minmax(52px, auto); font-size: .85rem; } }

.hw .table-scroll { overflow-x: auto; }
.hw table { font-size: .92rem; margin: 12px 0; }
.hw th, .hw td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.callout { border-left: 4px solid var(--fg); padding: 4px 0 4px 14px; margin: 14px 0; }
.check { font-size: .9rem; }
.check li { margin-bottom: 4px; }

/* On a phone a wide drawing (760 units across) would shrink to under half size, too small to read. Like the strip maps
   (set SB), it keeps a readable size and scrolls sideways, with the thin bar the strip maps fall back to and a hint. */
.fig-hint { display: none; }
@media (max-width: 600px) {
  .fig-scroll { overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 34%, transparent) transparent; }
  .hw figure .fig-scroll > svg { width: 680px; max-width: none; }
  .fig-scroll::-webkit-scrollbar { height: 8px; }
  .fig-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 99px; }
  .fig-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg) 34%, transparent); border-radius: 99px; }
  .fig-hint { display: block; font-size: .8rem; color: var(--muted); margin: 2px 0 0; }
}

/* The leaves figure's readings, above its drawing */
.lf-meter { display: grid; gap: 6px; margin: 4px 0 10px; }
.lf-meter .bar-row { grid-template-columns: 64px 1fr minmax(64px, auto); }
.lf-meter .bar-fill { transition: none; }
.lf-state { justify-self: start; font-weight: 700; font-size: .85rem; padding: 3px 12px; border-radius: 999px; }
.lf-state.rolling { background: color-mix(in srgb, var(--regen) 16%, transparent); color: var(--regen); }
.lf-state.sliding { background: var(--warn-bg); color: var(--warn-fg); }
.lf-state.stopped { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }

/* SVG parts */
.ws-wheel { fill: var(--metal2); stroke: var(--shell); stroke-width: 1.5; }
.hw-credit { font-size: 11px; fill: var(--muted); opacity: .8; }
svg text { font-family: var(--font); }
.sky { fill: var(--sky); }
.ground { fill: var(--ground); }
.ballast { fill: var(--ballast); }
.sleeper { fill: var(--sleeper); }
.rail { stroke: var(--rail); stroke-width: 4; }
.railhead { fill: var(--rail); }
.shell { fill: var(--shell); }
.dark { fill: var(--dark); }
.metal { fill: var(--metal); }
.metal2 { fill: var(--metal2); }
.wheel { fill: var(--wheel); stroke: var(--spoke); stroke-width: 1.5; }
.spoke { stroke: var(--spoke); stroke-width: 2; }
.hub { fill: var(--spoke); }
.h2o { fill: var(--water); }
.steamspace { fill: var(--steam); }
.firebox { fill: #2A1408; }
.fire { fill: var(--fire); }
.fire2 { fill: var(--fire2); }
.tube { stroke: var(--metal); stroke-width: 5; stroke-linecap: round; opacity: 0.7; }
.gas { fill: var(--fire); }
.bubble { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0.8; }
.pipe-live { fill: none; stroke: var(--live); stroke-width: 5; stroke-dasharray: 8 6; stroke-linecap: round; }
.pipe-exh { fill: none; stroke: var(--exh); stroke-width: 5; stroke-dasharray: 8 6; stroke-linecap: round; }
.cyl { fill: var(--metal2); stroke: var(--shell); stroke-width: 2; }
.ch-live { fill: var(--live); opacity: 0.85; }
.ch-exh { fill: var(--exh); opacity: 0.6; }
.piston { fill: var(--dark); }
.rod { stroke: var(--metal); stroke-width: 6; stroke-linecap: round; }
.rod-thin { stroke: var(--metal); stroke-width: 3; }
.pin { fill: var(--fire2); stroke: var(--dark); stroke-width: 1; }
.puff { fill: var(--exh); }
.puff-steam { fill: #E9EDF1; stroke: var(--exh); stroke-width: 0.6; }
.badge circle { fill: var(--fg); }
.badge text { fill: var(--bg); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.glass { fill: var(--glass); }
.body { fill: var(--body); stroke: var(--body-line); stroke-width: 2; }
.engine { fill: var(--metal2); stroke: var(--shell); stroke-width: 2; }
.bore { fill: var(--surface); stroke: var(--shell); stroke-width: 1.5; }
.alt { fill: var(--metal2); stroke: var(--shell); stroke-width: 2; }
.eqbox { fill: var(--metal2); stroke: var(--shell); stroke-width: 2; }
.tank { fill: var(--metal); stroke: var(--shell); stroke-width: 1.5; }
.cable { fill: none; stroke: var(--amp); stroke-width: 2.5; opacity: 0.55; }
.cable-fuel { fill: none; stroke: #8A6A2A; stroke-width: 3; opacity: 0.6; }
.amp { fill: var(--amp); }
.amp.regen { fill: var(--regen); }
.fuel { fill: #B5862E; }
.wire { stroke: var(--wire); stroke-width: 2; fill: none; }
.wire-thin { stroke: var(--wire); stroke-width: 1; fill: none; opacity: 0.7; }
.mast { stroke: var(--metal); stroke-width: 6; }
.lbl { font-size: 12px; fill: var(--muted); }
.lbl-b { font-size: 13px; fill: var(--fg); font-weight: 700; }
.motor { fill: var(--metal2); stroke: var(--shell); stroke-width: 1.5; }
.flash { fill: var(--fire2); }
.contact { fill: var(--fg); }
.trace { fill: none; stroke: var(--blue); stroke-width: 2.5; }
.centre { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.strap { stroke: var(--fg); stroke-width: 2; }
.plumb { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.arrow { stroke: var(--blue); stroke-width: 2.5; fill: none; marker-end: url(#arrowhead); }
.lane { stroke: var(--rule); stroke-width: 6; stroke-linecap: round; }
.axtick { stroke: var(--muted); stroke-width: 1; }
.stopline { stroke: var(--fg); stroke-width: 2; stroke-dasharray: 4 3; }
.veh-car { fill: var(--blue); }
.veh-pax { fill: var(--fg); }
.veh-frt { fill: var(--metal); stroke: var(--shell); stroke-width: 1; }
.veh-wagon { fill: none; stroke: var(--metal); stroke-width: 1.2; }
.veh-wheel { fill: var(--fg); }
.rail-run { stroke: var(--rail); stroke-width: 2; }
.sigline { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 2 3; }