/* weida.doodleshnookie.net: the Netzplan.
   One white sheet, black signage lettering, one colour per line. */

@font-face { font-family: "D-DIN"; src: url("fonts/d-din.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "D-DIN"; src: url("fonts/d-din-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "D-DIN"; src: url("fonts/d-din-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "D-DIN Condensed"; src: url("fonts/d-dincondensed.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "D-DIN Condensed"; src: url("fonts/d-dincondensed-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-next.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-next-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h10M8 3.5 12.5 8 8 12.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --paper: #ffffff;
  --ink: #15181b;
  --grey: #5d6369;
  --rule: #d7dadd;
  --panel: #f2f3f4;
  --weida: #0b58a4;
  --zmq: #cf1f2c;
  --nng: #2b7a32;
  --mqtt: #86287f;
  --amqp: #e0660f;
  --nats: #077d90;
  --foundation: #15181b;

  --sign: "D-DIN", "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
  --sign-c: "D-DIN Condensed", "D-DIN", "Bahnschrift", "Arial Narrow", sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --code: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --u: 1.5rem;
  --page: 90rem;
  --gutter: clamp(1rem, 0.4rem + 2.4vw, 3rem);
  --measure: 70ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scrollbar-color: var(--ink) var(--panel);
  accent-color: var(--weida);
  caret-color: var(--weida);
}

body { margin: 0; font-size: 1.0625rem; font-variant-numeric: lining-nums tabular-nums; }

::selection { background: var(--weida); color: var(--paper); }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--grey); }
a:hover { text-decoration-thickness: 3px; text-decoration-color: var(--weida); }
:focus-visible { outline: 3px solid var(--weida); outline-offset: 3px; border-radius: 2px; }

code, pre, kbd { font-family: var(--code); font-variant-ligatures: none; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; font-family: var(--sign); font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------ bullets */

.bullet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6em; height: 1.55em; padding: 0 0.6em;
  border-radius: 999px;
  font-family: var(--sign); font-weight: 700; font-size: 0.95rem; line-height: 1;
  letter-spacing: 0.01em;
  color: var(--paper); background: var(--weida);
  white-space: nowrap;
}
.bullet + .bullet { margin-left: 0.3em; }
.bullet--weida { background: var(--weida); }
.bullet--zmq { background: var(--zmq); }
.bullet--nng { background: var(--nng); }
.bullet--mqtt { background: var(--mqtt); }
.bullet--amqp { background: var(--amqp); color: var(--ink); }
.bullet--nats { background: var(--nats); }
.bullet--foundation { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }

/* ---------------------------------------------------------------- bar */

.bar {
  display: flex; align-items: center; gap: 0.5rem 2rem; flex-wrap: wrap;
  max-width: var(--page); margin: 0 auto;
  padding: 0.9rem var(--gutter) 0.8rem;
  border-bottom: 3px solid var(--ink);
  font-family: var(--sign);
}
.bar__home { text-decoration: none; }
.bar__home .bullet { font-size: 1.15rem; height: 1.6em; min-width: 0; padding: 0 0.75em; }
.bar__nav { flex: 1 1 auto; }
.bar__nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.bar__link { display: inline-block; padding: 0.3rem 0 0.15rem; font-weight: 700; font-size: 1.05rem; text-decoration: none; border-bottom: 4px solid transparent; transition: border-color 200ms var(--ease); }
.bar__link:hover { border-bottom-color: var(--rule); }
.bar__link.is-here { border-bottom-color: var(--weida); }
.bar__out { display: flex; gap: 1.2rem; margin: 0; font-size: 0.95rem; }
.bar__out a { color: var(--grey); }

main { display: block; }

/* ---------------------------------------------------------------- map */

.netz {
  position: relative;
  /* the whole map, legend and fare card fit the first viewport */
  max-width: min(var(--page), calc((100svh - 4.6rem) * 1.5789 + 2 * var(--gutter)));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.netz__sheet { position: relative; container-type: inline-size; }
.netz__svg { display: block; width: 100%; height: auto; overflow: visible; }
.netz__svg--tall { display: none; }

.netz__title {
  position: absolute;
  left: 2%; top: 4.5%;
  width: 44%;
  z-index: 2;
}
.netz__name {
  margin: 0;
  font-family: var(--sign); font-weight: 700;
  font-size: clamp(3.5rem, 1rem + 6.4vw, 6rem);
  line-height: 0.9; letter-spacing: -0.02em;
}
.netz__lead {
  margin: 1.1rem 0 0; max-width: 34ch;
  font-size: clamp(1.1rem, 0.85rem + 0.55vw, 1.4rem); line-height: 1.4;
  text-wrap: pretty;
}
.netz__lead code { font-size: 0.85em; }

.netz__source {
  max-width: 58rem;
  margin: 0.25rem 0 0; padding: 0.75rem 0 0;
  border-top: 1px solid var(--rule);
  color: var(--grey); font-family: var(--sign); font-size: 0.9rem; line-height: 1.45;
}
.netz__source code { font-size: 0.85em; color: var(--ink); }

/* lines */
.ln { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 260ms var(--ease), stroke 260ms var(--ease); }
.ln--weida { stroke: var(--weida); }
.ln--zmq { stroke: var(--zmq); }
.ln--nng { stroke: var(--nng); }
.ln--mqtt { stroke: var(--mqtt); }
.ln--amqp { stroke: var(--amqp); }
.ln--nats { stroke: var(--nats); }
.ln--foundation { stroke: var(--foundation); }
.ln--pending { stroke-dasharray: 9 8; stroke-linecap: butt; }

/* line bullets on the map */
.nb rect { fill: var(--weida); }
.nb text { font-family: var(--sign); font-weight: 700; font-size: 17px; fill: var(--paper); }
.nb--zmq rect { fill: var(--zmq); }
.nb--nng rect { fill: var(--nng); }
.nb--mqtt rect { fill: var(--mqtt); }
.nb--amqp rect { fill: var(--amqp); }
.nb--amqp text { fill: var(--ink); }
.nb--nats rect { fill: var(--nats); }
.nb { transition: opacity 260ms var(--ease); }

/* stations */
.netz__svg a { text-decoration: none; }
.st { cursor: pointer; outline: none; transition: opacity 260ms var(--ease); }
.st__hit { fill: transparent; stroke: none; }
.st__ring { fill: var(--paper); stroke: var(--ink); stroke-width: 3; transition: stroke-width 200ms var(--ease); }
.st__ring--hollow { fill: var(--paper); stroke-dasharray: 4.4 3.2; }
.st__ring--pending { fill: var(--paper); stroke-width: 3; stroke-dasharray: 3 3; }
.st__dot { fill: var(--ink); pointer-events: none; }
.st__ring--binding { stroke-width: 3.5; }
.st__ring--inner { fill: var(--ink); stroke: none; pointer-events: none; }
.st__capsule { fill: var(--paper); stroke: var(--ink); stroke-width: 3.5; }
.st__label {
  font-family: var(--sign); font-weight: 700; font-size: 15px; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round;
}
.st__label--binding { font-weight: 400; }
.st__label--codec { font-weight: 400; }
.st__label--big { font-size: 34px; letter-spacing: -0.01em; }
.st__note { font-family: var(--sign); font-size: 13px; font-style: italic; fill: var(--grey); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.st:is(:hover, :focus-visible) .st__ring, .st:is(:hover, :focus-visible) .st__capsule { stroke-width: 5; }
.st:focus-visible .st__label { text-decoration: underline; text-decoration-thickness: 2px; }
.st:focus-visible .st__hit { stroke: var(--weida); stroke-width: 3; }

/* one active edge: pointing at a station greys the network except its lines */
.netz__svg:has(.st:is(:hover, :focus-visible)) :is(.ln, .st, .nb) { opacity: 0.16; }
.netz__svg:has(.st[data-lines~="weida"]:is(:hover, :focus-visible)) :is(.ln--weida, .st[data-lines~="weida"]),
.netz__svg:has(.st[data-lines~="zmq"]:is(:hover, :focus-visible)) :is(.ln--zmq, .st[data-lines~="zmq"], .nb--zmq),
.netz__svg:has(.st[data-lines~="nng"]:is(:hover, :focus-visible)) :is(.ln--nng, .st[data-lines~="nng"], .nb--nng),
.netz__svg:has(.st[data-lines~="mqtt"]:is(:hover, :focus-visible)) :is(.ln--mqtt, .st[data-lines~="mqtt"], .nb--mqtt),
.netz__svg:has(.st[data-lines~="amqp"]:is(:hover, :focus-visible)) :is(.ln--amqp, .st[data-lines~="amqp"], .nb--amqp),
.netz__svg:has(.st[data-lines~="nats"]:is(:hover, :focus-visible)) :is(.ln--nats, .st[data-lines~="nats"], .nb--nats),
.netz__svg:has(.st[data-lines~="foundation"]:is(:hover, :focus-visible)) :is(.ln--foundation, .st[data-lines~="foundation"]) { opacity: 1; }
.netz__svg .st:is(:hover, :focus-visible) { opacity: 1; }

/* motion is a trace: a message runs the lit route to the foundation */
.trace { fill: none; stroke: var(--paper); stroke-linecap: round; opacity: 0; pointer-events: none; }
.trace--dot { stroke-dasharray: 0.1 999.9; }
.trace--tail { stroke-dasharray: 70 930; }
@keyframes run-dot { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
@keyframes run-tail { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -930; } }
.netz__svg:has(.st[data-lines~="weida"]:is(:hover, :focus-visible)) .trace--weida,
.netz__svg:has(.st[data-lines~="zmq"]:is(:hover, :focus-visible)) .trace--zmq,
.netz__svg:has(.st[data-lines~="nng"]:is(:hover, :focus-visible)) .trace--nng,
.netz__svg:has(.st[data-lines~="mqtt"]:is(:hover, :focus-visible)) .trace--mqtt,
.netz__svg:has(.st[data-lines~="amqp"]:is(:hover, :focus-visible)) .trace--amqp,
.netz__svg:has(.st[data-lines~="nats"]:is(:hover, :focus-visible)) .trace--nats { opacity: 1; }
.netz__svg:has(.st:is(:hover, :focus-visible)) .trace--dot { animation: run-dot 2.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.netz__svg:has(.st:is(:hover, :focus-visible)) .trace--tail { animation: run-tail 2.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; opacity: 0; }
.netz__svg:has(.st[data-lines~="weida"]:is(:hover, :focus-visible)) .trace--tail.trace--weida,
.netz__svg:has(.st[data-lines~="zmq"]:is(:hover, :focus-visible)) .trace--tail.trace--zmq,
.netz__svg:has(.st[data-lines~="nng"]:is(:hover, :focus-visible)) .trace--tail.trace--nng,
.netz__svg:has(.st[data-lines~="mqtt"]:is(:hover, :focus-visible)) .trace--tail.trace--mqtt,
.netz__svg:has(.st[data-lines~="amqp"]:is(:hover, :focus-visible)) .trace--tail.trace--amqp,
.netz__svg:has(.st[data-lines~="nats"]:is(:hover, :focus-visible)) .trace--tail.trace--nats { opacity: 0.55; }

/* the station board */
.st__board { display: none; overflow: visible; }
.st:is(:hover, :focus-visible) .st__board { display: inline; }
.netz__svg:not(:has(.st:is(:hover, :focus-visible))) .st--default .st__board { display: inline; }
.board {
  box-sizing: border-box; height: 100%;
  padding: 9px 16px 10px;
  background: var(--ink); color: var(--paper);
  border-top: 6px solid var(--weida);
  font-family: var(--sign); font-size: 15px; line-height: 1.35;
}
.board--zmq { border-top-color: var(--zmq); }
.board--nng { border-top-color: #3aa443; }
.board--mqtt { border-top-color: #b04aa9; }
.board--amqp { border-top-color: var(--amqp); }
.board--nats { border-top-color: #10a7bd; }
.board--foundation { border-top-color: var(--paper); }
.board p { margin: 0; }
.board__name { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; letter-spacing: 0.01em; }
.board__lamp { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--paper); flex: none; }
.board__lamp--on { background: #ffd23f; border-color: #ffd23f; box-shadow: 0 0 10px 1px rgb(255 210 63 / 0.55); }
.board__lamp--pending { border-style: dashed; }
.board__text { margin-top: 4px !important; font-family: var(--text); font-size: 14.5px; line-height: 1.4; color: #e8eaec;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.board__state { margin-top: 6px !important; font-size: 14px; color: #b8bdc2; }
.board code { font-family: var(--code); font-size: 0.9em; }

/* legend: the printed box in the corner of a Netzplan. It is sized in
   container units so it scales with the map and never covers a station. */
.legend {
  position: absolute;
  right: 0.5cqw; bottom: 0.4cqw;
  width: 31cqw;
  z-index: 2;
  padding: 0.75em 0.9em 0.85em;
  background: var(--paper);
  border: 3px solid var(--ink);
  font-family: var(--sign); font-size: max(11px, 1.12cqw); line-height: 1.2;
}
.legend ul { list-style: none; margin: 0; padding: 0; }
.legend__lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em 0.6em; margin-bottom: 0.65em !important; padding-bottom: 0.6em !important; border-bottom: 1px solid var(--rule); }
.legend__lines li { display: flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.legend__lines .bullet { font-size: 0.82em; min-width: 3.6em; }
.legend__marks { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.3em 1.4em; color: var(--ink); }
.legend__marks li { display: flex; align-items: center; gap: 0.45em; }
.legend__marks svg { width: 1.5em; height: 1.1em; flex: none; overflow: visible; }
.legend__marks svg[viewBox="0 0 40 24"] { width: 1.9em; }
.mk-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.mk-ring--hollow { stroke-dasharray: 4.4 3.2; }
.mk-ring--binding { stroke-width: 3.5; }
.mk-ring--inner { fill: var(--ink); stroke: none; }
.mk-dot { fill: var(--ink); }
.mk-pending { stroke: var(--ink); stroke-width: 6; stroke-dasharray: 7 5; fill: none; }
.mk-capsule { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
@container (max-width: 1150px) { .legend__lines { display: none; } }

.fare { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 0.9em; margin-top: 0.7em; padding-top: 0.7em; border-top: 3px solid var(--ink); }
.fare p { margin: 0; }
.fare__cmd code { display: block; padding: 0.45em 0.6em; background: var(--panel); font-size: 0.88em; overflow-x: auto; white-space: nowrap; }
.fare__cmd { flex: 1 1 100%; }
.fare__go { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: center; }
.legend .go { font-size: 1.08em; }

.go {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sign); font-weight: 700; font-size: 1.05rem; line-height: 1;
  text-decoration: none;
}
.go--weida { padding: 0.62em 1.1em 0.58em; border-radius: 999px; background: var(--weida); color: var(--paper); transition: background-color 200ms var(--ease); }
.go--weida::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor;
  mask: var(--arrow) center / contain no-repeat; }
.go--weida:hover { background: #08467f; }
.go--quiet { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.go--quiet:hover { text-decoration-thickness: 3px; text-decoration-color: var(--weida); }

/* ------------------------------------------------------------- plates */

.plate {
  max-width: var(--page);
  margin: 0 auto;
  padding: calc(var(--u) * 3) var(--gutter) calc(var(--u) * 1.5);
}
.plate__title {
  margin: 0 0 calc(var(--u) * 1);
  padding-top: 0.6rem;
  border-top: 6px solid var(--ink);
  font-family: var(--sign); font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.01em;
}
.plate__title--second { margin-top: calc(var(--u) * 2.5); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); border-top-width: 3px; }
.plate__source { margin: 1rem 0 0; font-family: var(--sign); color: var(--grey); font-size: 0.95rem; }

.rows { border-top: 3px solid var(--ink); }
.row {
  display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, var(--measure));
  gap: 0.75rem 3rem;
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.row__label { margin: 0.15rem 0 0; font-family: var(--sign); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.row__label .bullet { font-size: 1.05rem; }
.row__text > :first-child { margin-top: 0; }
.row__text > :last-child { margin-bottom: 0; }

.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; align-items: start; }
.quick-grid .plate__title--second { margin-top: 0; }
.quick { max-width: var(--measure); }
.quick pre { max-width: 100%; }

/* the timetable of lines */
.timetable { width: 100%; border-collapse: collapse; font-family: var(--sign); }
.timetable thead th {
  padding: 0 1rem 0.5rem 0; text-align: left;
  font-weight: 400; font-size: 0.95rem; color: var(--grey);
  border-bottom: 3px solid var(--ink);
}
.timetable tbody th, .timetable td { padding: 1rem 1rem 1rem 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; }
.timetable tbody th { width: 17rem; font-weight: 700; }
.timetable tbody th .bullet { margin-right: 0.7rem; min-width: 4em; }
.timetable__name { font-size: 1.2rem; }
.timetable__doc { width: 22rem; font-size: 1.05rem; }
.stops { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.stops__item { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.stops__item::before { content: ""; align-self: center; width: 0.7rem; height: 0.7rem; border: 2.5px solid var(--ink); border-radius: 50%; flex: none; }
.stops__item.is-published::before { background: radial-gradient(circle, var(--ink) 0 38%, var(--paper) 42%); }
.stops__item code { font-size: 0.92rem; }
.stops__state { color: var(--grey); font-size: 0.88rem; }
.stops__item.is-published .stops__state { color: var(--ink); }

/* destinations: the platform board of the site's own lines */
.plate--board { max-width: none; background: var(--ink); color: var(--paper); margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 2.5); padding-bottom: calc(var(--u) * 2.5); }
.plate--board > * { max-width: calc(var(--page) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.plate--board .plate__title { border-top-color: var(--paper); }
.plate--board ::selection { background: var(--paper); color: var(--ink); }
.departures { list-style: none; padding: 0; border-top: 3px solid var(--paper); }
.dep {
  display: grid; grid-template-columns: 14rem 9rem minmax(0, 1fr); gap: 0.4rem 2rem; align-items: baseline;
  padding: 1rem 0 1.05rem; border-bottom: 1px solid #3a4046;
}
.dep__to { font-family: var(--sign); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); line-height: 1; color: var(--paper); text-decoration: none; }
.dep__to:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: #ffd23f; }
.dep__to:focus-visible { outline-color: #ffd23f; }
.dep__count { grid-column: 2; margin: 0; font-family: var(--sign); color: #ffd23f; }
.dep__via { grid-column: 3; margin: 0; color: #b8bdc2; font-size: 0.98rem; line-height: 1.5; }
.dep__to + .dep__via { grid-column: 2 / 4; }
.dep__via span:not(:last-child)::after { content: " \00B7 "; color: #5d6369; }
.dep__more { font-style: italic; }
.plate--board + .foot { margin-top: 0; }

/* ---------------------------------------------------------- documents */

.band {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem var(--gutter) 0;
  --lc: var(--weida);
  overflow-x: auto;
  scrollbar-width: thin;
}
.band--zmq { --lc: var(--zmq); }
.band--nng { --lc: var(--nng); }
.band--mqtt { --lc: var(--mqtt); }
.band--amqp { --lc: var(--amqp); }
.band--nats { --lc: var(--nats); }
.band__stops {
  display: flex; list-style: none; margin: 0; padding: 7.2rem 1rem 0.8rem 0;
  position: relative; width: max-content;
}
.band__stops::before {
  content: ""; position: absolute; left: 0.5rem; right: 0.5rem; top: calc(7.2rem + 0.45rem);
  height: 8px; margin-top: -4px; border-radius: 4px; background: var(--lc);
}
.band__stop { position: relative; width: 2.6rem; flex: none; }
.band__stop a {
  display: block; position: relative; width: 1.9rem; height: 1.9rem; margin-top: -0.5rem;
  text-decoration: none;
}
.band__stop a::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.35rem; width: 1.2rem; height: 1.2rem;
  box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink);
}
.band__stop a:hover::before { box-shadow: 0 0 0 2px var(--ink); }
.band__stop.is-here a::before { background: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--lc); }
.band__name {
  position: absolute; left: 0.85rem; bottom: 1.85rem;
  transform-origin: 0 100%; transform: rotate(-42deg);
  width: max-content; max-width: 10rem; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--sign-c); font-size: 0.92rem; line-height: 1.1; white-space: nowrap; color: var(--grey);
}
.band__stop a:hover .band__name { color: var(--ink); text-decoration: underline; }
.band__stop.is-here .band__name { color: var(--ink); font-weight: 700; font-size: 1.02rem; max-width: 10rem; }
.band__stop.band__stop--bullet { width: auto; margin-right: 0.7rem; z-index: 1; }
.band__stop--bullet .bullet { margin-top: -0.35rem; box-shadow: 0 0 0 4px var(--paper); }
.band__stop--more { width: 2rem; }
.band__stop--more span { display: block; width: 1.4rem; height: 8px; margin: 0.12rem 0 0 0.1rem; background: repeating-linear-gradient(90deg, var(--paper) 0 3px, transparent 3px 7px); }

.doc {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) calc(var(--u) * 4);
  display: grid;
  grid-template-columns: minmax(13rem, 18rem) minmax(0, var(--measure)) minmax(0, 1fr);
  grid-template-areas: "head head head" "toc body .";
  gap: 0 3.5rem;
}
.doc__head { grid-area: head; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 3px solid var(--ink); }
.doc__title {
  margin: 0; max-width: 24ch;
  font-family: var(--sign); font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.015em;
  text-wrap: balance;
}
.doc__source { margin: 1rem 0 0; font-family: var(--sign); color: var(--grey); font-size: 0.95rem; }
.doc__source code { font-size: 0.85em; color: var(--ink); }

.toc { grid-area: toc; align-self: start; position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; font-family: var(--sign); scrollbar-width: thin; }
.toc__head { font-weight: 700; font-size: 1.05rem; padding-bottom: 0.4rem; list-style: none; pointer-events: none; }
.toc::details-content { content-visibility: visible; height: auto; }
.toc__head::-webkit-details-marker { display: none; }
.toc__list, .toc__list ol { list-style: none; margin: 0; padding: 0; }
.toc__list { position: relative; padding: 0.3rem 0 0.3rem 1.35rem; --lc: var(--weida); }
.toc__list--zmq { --lc: var(--zmq); } .toc__list--nng { --lc: var(--nng); } .toc__list--mqtt { --lc: var(--mqtt); } .toc__list--amqp { --lc: var(--amqp); } .toc__list--nats { --lc: var(--nats); }
.toc__list::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; bottom: 0.9rem; width: 5px; border-radius: 3px; background: var(--lc); }
.toc__list > li { position: relative; padding: 0.3rem 0; line-height: 1.25; }
.toc__list > li::before { content: ""; position: absolute; left: -1.33rem; top: 0.52rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); }
.toc__list a { text-decoration: none; font-size: 0.98rem; }
.toc__list a:hover { text-decoration: underline; text-decoration-color: var(--lc); text-decoration-thickness: 2px; }
.toc__list ol { padding: 0.2rem 0 0.1rem; }
.toc__list ol li { padding: 0.12rem 0; }
.toc__list ol a { color: var(--grey); font-size: 0.9rem; }

.doc__body { grid-area: body; min-width: 0; }

/* prose: the repository's own sentences */
.prose { font-size: 1.0625rem; line-height: 1.62; }
.prose > * { max-width: var(--measure); }
.prose p { margin: 0 0 1.05em; }
.prose h2, .prose h3, .prose h4 { font-family: var(--sign); font-weight: 700; line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; scroll-margin-top: 1.5rem; }
.prose h2 { margin: 2.6em 0 0.7em; padding-top: 0.5rem; border-top: 3px solid var(--ink); font-size: 1.95rem; }
.prose h3 { margin: 2em 0 0.55em; font-size: 1.4rem; }
.prose h4 { margin: 1.6em 0 0.45em; font-size: 1.15rem; }
.prose h2 code, .prose h3 code, .prose h4 code { font-size: 0.82em; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.prose li { margin: 0.2em 0; }
.prose li::marker { color: var(--grey); font-family: var(--sign); }
.prose strong { font-weight: 700; }
.prose :not(pre) > code { font-size: 0.86em; padding: 0.08em 0.3em; background: var(--panel); border-radius: 3px; overflow-wrap: anywhere; }
.prose pre {
  max-width: min(100%, 52rem);
  margin: 0 0 1.3em; padding: 1rem 1.2rem;
  background: var(--panel) !important;
  border-left: 0; border-top: 3px solid var(--ink);
  overflow-x: auto; font-size: 0.88rem; line-height: 1.55;
  scrollbar-width: thin;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose blockquote { margin: 0 0 1.05em; padding: 0.1em 0 0.1em 1.1em; box-shadow: inset 1px 0 0 var(--ink); color: var(--grey); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.5em 0; }
.prose p > img:only-child { max-width: min(100%, 64rem); }
.prose table {
  display: block; max-width: 100%; width: max-content;
  overflow-x: auto; margin: 0 0 1.5em;
  border-collapse: collapse; font-size: 0.93rem; line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
  scrollbar-width: thin;
}
.prose thead th { font-family: var(--sign); font-weight: 700; font-size: 0.95rem; text-align: left; vertical-align: bottom; border-bottom: 3px solid var(--ink); padding: 0.4rem 1.1rem 0.45rem 0; }
.prose td { padding: 0.5rem 1.1rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; min-width: 6rem; max-width: 34rem; }
.prose td:first-child { min-width: 9rem; }
.prose tbody tr:hover td { background: #f7f8f9; }
.prose .footnote-definition { font-size: 0.92rem; color: var(--grey); }

.linelist { list-style: none; padding: 0 !important; border-top: 3px solid var(--ink); }
.linelist li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); margin: 0 !important; font-family: var(--sign); font-weight: 700; font-size: 1.25rem; }
.linelist a { text-decoration: none; }
.linelist a:hover { text-decoration: underline; text-decoration-color: var(--weida); text-decoration-thickness: 3px; }

/* 404 */
.lost { max-width: var(--page); margin: 0 auto; padding: 6rem var(--gutter) 8rem; }
.lost__code { margin: 0; font-family: var(--sign); font-weight: 700; font-size: 6rem; line-height: 1; color: var(--weida); }
.lost__title { margin: 0.5rem 0 1rem; font-family: var(--sign); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1.05; }
.lost__text { max-width: 50ch; color: var(--grey); }
.lost__go { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: center; margin-top: 2rem; }

/* footer */
.foot { margin-top: calc(var(--u) * 3); border-top: 3px solid var(--ink); }
.foot__inner { max-width: var(--page); margin: 0 auto; padding: 1.6rem var(--gutter) 3rem; font-family: var(--sign); }
.foot__line { margin: 0; font-size: 1.05rem; }
.foot__small { margin: 0.6rem 0 0; max-width: 72ch; color: var(--grey); font-size: 0.92rem; line-height: 1.5; }
.foot__small code { font-size: 0.85em; color: var(--ink); }

/* ------------------------------------------------------------- narrow */

@media (max-width: 75rem) {
  /* the map keeps its canvas; title and legend leave the sheet */
  .netz__sheet { display: flex; flex-direction: column; }
  .netz__name { font-size: clamp(3rem, 1rem + 5vw, 4.5rem); }
  .netz__lead { font-size: 1.05rem; }
  .doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body"; }
  .toc { position: static; max-height: none; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
  .toc__head { list-style: revert; pointer-events: auto; cursor: pointer; }
  .toc::details-content { content-visibility: revert; height: revert; }
  .toc:not([open])::details-content { content-visibility: hidden; }
  .quick-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-grid .plate__title--second { margin-top: calc(var(--u) * 2); }
  .toc__head::-webkit-details-marker { display: revert; }
  .timetable__doc { width: auto; }
}

@media (max-width: 56rem) {
  .netz__title { position: static; width: auto; order: -1; padding: 2.4rem 0 0.5rem; }
  .legend { position: static; order: 1; width: auto; max-width: 44rem; margin: 1.5rem 0 0.5rem; font-size: 0.95rem; }
  .legend__lines { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .netz__lead { max-width: 46ch; }
}

@media (max-width: 40rem) {
  .netz__svg--wide { display: none; }
  .netz__svg--tall { display: block; max-width: 30rem; margin: 0 auto; }
  .st__label { font-size: 13.5px; }
  .st__label--big { font-size: 26px; }
  .legend__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend__marks { grid-template-columns: repeat(2, max-content); }
  .bar { flex-wrap: nowrap; gap: 0.9rem; padding-top: 0.7rem; padding-bottom: 0.55rem; }
  .bar__nav { min-width: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .bar__nav ul { flex-wrap: nowrap; gap: 0 1.1rem; padding-right: 2rem; }
  .bar__link { font-size: 1rem; white-space: nowrap; }
  .bar__out { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 0 1.2rem; }
  .timetable, .timetable tbody, .timetable tr, .timetable th, .timetable td { display: block; width: auto; }
  .timetable thead { display: none; }
  .timetable tbody tr { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
  .timetable tbody th, .timetable td { border: 0; padding: 0.3rem 0; }
  .dep { grid-template-columns: minmax(0, 1fr); }
  .dep__count, .dep__via, .dep__to + .dep__via { grid-column: 1; }
  .band { padding-top: 1.5rem; }
  .band__stops { padding-top: 6rem; }
  .band__stops::before { top: calc(6rem + 0.45rem); }
  .band__stop { width: 2.2rem; }
  .band__stop.is-far { display: none; }
  .band__name { max-width: 9rem; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .trace--tail { opacity: 0 !important; }
  .trace--dot { opacity: 0 !important; }
}

@media print {
  .bar__nav, .bar__out, .band, .toc, .legend .fare { display: none; }
  .doc { display: block; }
}