@import url("fonts.css");

/* National Railways Federation - branch federation of the railway operating
   cooperatives, constituted under Article 89.

   The federation is not an organ of the Republic, so this site loads none of the
   shared state frame. The design is inspired from the vehicles themselves: white
   flank, deep blue band, and the wave that Sederna presses into the panel
   below the windows. */

:root {
  --ink:     #10202c;
  --ink-2:   #445c6b;
  --ink-3:   #6c8494;
  --paper:   #eceff2;
  --plate:   #ffffff;
  --rule:    #bfcad2;
  --rule-2:  #dde4e9;

  /* The band. 0b4ea2 is the designation colour Podnik prints on rail stock. */
  --band:    #0b4ea2;
  --band-2:  #08376f;
  --wash:    #dce8f6;

  /* Secondary marks. Brass for the card standard, red for a refused passage,
     green for a record that was taken. */
  --brass:   #8a5c0d;
  --refuse:  #a4231c;
  --taken:   #1c6b40;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 64rem;
  --pad: 1.1rem;
}

/* ---------- ground ---------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0 0 0.85em;
}

a {
  color: var(--band-2);
}

h1, h2, h3 {
  font-family: var(--serif);
}

:focus-visible {
  outline: 3px solid var(--band);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 0.7rem 1rem;
  background: var(--band);
  color: #fff;
  font-weight: 600;
}

.skip:focus {
  left: 0;
}

/* ---------- masthead and the band ---------- */

.head {
  background: var(--plate);
  border-top: 5px solid var(--band);
}

.head .wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}

.head a {
  color: var(--ink);
  text-decoration: none;
}

.mark {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: block;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.03;
}

.standfirst {
  margin: 0.22rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Signature: the flank of the vehicle. A blue band with the pressed wave running along its upper edge, repeated across the full width. */

.band {
  height: 26px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="26" viewBox="0 0 72 26"><path d="M0 9 Q9 1 18 9 T36 9 T54 9 T72 9 V26 H0 Z" fill="%230b4ea2"/></svg>')
    repeat-x left bottom / 72px 26px,
    var(--wash);
}

.band-foot {
  height: 26px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="26" viewBox="0 0 72 26"><path d="M0 17 Q9 25 18 17 T36 17 T54 17 T72 17 V0 H0 Z" fill="%230b4ea2"/></svg>')
    repeat-x left top / 72px 26px,
    var(--band-2);
}

/* ---------- navigation ---------- */

.nav {
  background: var(--band-2);
  top: 0;
  z-index: 30;
}

.nav .wrap {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.nav a {
  flex: 0 0 auto;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #c6d8ec;
}

.nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.nav a[aria-current="page"] {
  color: #fff;
}

.nav :focus-visible {
  outline-color: #fff;
  outline-offset: -3px;
}

/* ---------- openings and blocks ---------- */

main {
  padding-bottom: 3rem;
}

.opening {
  background: var(--plate);
  border-bottom: 1px solid var(--rule);
  padding: 2rem 0 2.1rem;
}

.opening h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.9rem, 7.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}

.lede {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.block {
  padding: 1.6rem 0 0;
}

.block > .wrap > h2 {
  margin: 0 0 0.9rem;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.block > .wrap > h2 + .sub {
  margin-top: -0.5rem;
}

.sub {
  color: var(--ink-2);
  font-size: 0.97rem;
}

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.9rem;
  margin: 1.4rem 0 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--rule-2);
  list-style: none;
}

.figures li {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.figures b {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--band-2);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- panels in a grid ---------- */

.plates {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plates li {
  display: flex;
  flex-direction: column;
  background: var(--plate);
  border-top: 4px solid var(--band);
  padding: 1rem 1rem 1.05rem;
}

.plates li > p:last-child:has(.go) {
  margin-top: auto;
  padding-top: 0.5rem;
}

.plates li > p:last-child > .go {
  margin-bottom: -0.35rem;
}

.plates h3 {
  margin: 0 0 0.35rem;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.plates p {
  margin: 0 0 0.65rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.plates p:last-child {
  margin-bottom: 0;
}

.tag {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.42rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.03em;
}

.go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--band-2);
  border-bottom: 3px solid var(--band);
  padding-bottom: 1px;
}

.go:hover {
  border-bottom-color: var(--ink);
}

/* ---------- prose ---------- */

.essay {
  background: var(--plate);
  padding: 1.15rem 1.05rem 1.2rem;
}

.essay p {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink-2);
}

.essay p:last-child {
  margin-bottom: 0;
}

.essay strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- notice ---------- */

.notice {
  background: var(--wash);
  border-left: 6px solid var(--band);
  padding: 1rem 1rem;
  font-size: 0.95rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice b {
  font-weight: 600;
}

.notice.warn {
  background: #f7e9e8;
  border-left-color: var(--refuse);
}

.notice.card {
  background: #f6efe1;
  border-left-color: var(--brass);
}

/* ---------- tables ---------- */

.tablewrap {
  overflow-x: auto;
  margin-bottom: 1.1rem;
  background: var(--plate);
  border-top: 3px solid var(--band);
  -webkit-overflow-scrolling: touch;
}

.tablewrap:last-child {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

caption {
  padding: 0.75rem 0.85rem;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
}

th, td {
  padding: 0.55rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule-2);
}

th:last-child, td:last-child {
  border-right: 0;
}

thead th {
  background: var(--ink);
  color: #fff;
  border-right-color: rgba(255, 255, 255, 0.22);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody th {
  font-weight: 600;
}

td.num, th.num {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 0.84rem;
}

tbody tr:last-child td, tbody tr:last-child th {
  border-bottom: 0;
}

/* ---------- definition specs ---------- */

.spec {
  display: grid;
  gap: 0.55rem 1.3rem;
  margin: 0;
  background: var(--plate);
  padding: 1rem 1.05rem;
}

.spec dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.spec dd {
  margin: 0.05rem 0 0;
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- code ---------- */

.code {
  margin: 0;
  padding: 1rem 1.05rem;
  background: var(--ink);
  color: #dce6ee;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.code b {
  color: #8fc0f0;
  font-weight: 400;
}

.code i {
  color: #9fb3c0;
  font-style: normal;
}

.host {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--band-2);
  border-bottom: 1px dotted var(--band);
  white-space: nowrap;
}

code.inline {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--wash);
  padding: 0.08em 0.3em;
}

/* ---------- numbered steps ---------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  background: var(--plate);
  padding: 1rem 1.05rem 1.05rem 3.4rem;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.05rem;
  top: 1rem;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  background: var(--band);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.steps h3 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 600;
}

.steps p {
  margin: 0 0 0.6rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.steps p:last-child {
  margin-bottom: 0;
}

/* ---------- route groups ---------- */

.groups {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.group {
  background: var(--plate);
  border-left: 6px solid var(--g, var(--band));
  padding: 0.95rem 1rem 1rem;
}

.group h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.group .seat {
  margin: 0.12rem 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.group p {
  margin: 0 0 0.5rem;
  font-size: 0.93rem;
  color: var(--ink-2);
}

.group p:last-child {
  margin-bottom: 0;
}

.group .members {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0 0;
  border-top: 1px solid var(--rule-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* ---------- footer ---------- */

.foot {
  background: var(--band-2);
  color: #b9cde3;
  padding: 1.7rem 0 2.2rem;
  font-size: 0.88rem;
}

.foot a {
  color: #fff;
}

.foot :focus-visible {
  outline-color: #fff;
}

.foot h2 {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7fa3c7;
}

.foot-cols {
  display: grid;
  gap: 1.5rem;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}

.foot .standing {
  margin-top: 0.6rem;
}

/* ---------- wider viewports ---------- */

@media (min-width: 34rem) {
  .plates { grid-template-columns: repeat(2, 1fr);
}

.groups {
  grid-template-columns: repeat(2, 1fr);
}

.spec {
  grid-template-columns: repeat(2, 1fr);
}

.foot-cols {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 52rem) {
  body { font-size: 18px;
}

.opening {
  padding: 3rem 0 2.9rem;
}

.plates {
  grid-template-columns: repeat(3, 1fr);
}

.plates.two {
  grid-template-columns: repeat(2, 1fr);
}

.plates.four {
  grid-template-columns: repeat(4, 1fr);
}

.spec {
  grid-template-columns: repeat(3, 1fr);
}

.foot-cols {
  grid-template-columns: repeat(3, 1fr);
}

.steps {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
}
* {
  transition: none !important;
  animation: none !important;
}
}

@media print {
  .nav, .foot, .band, .band-foot { display: none;
}

body {
  background: #fff;
  font-size: 11pt;
}
}

/* ---------- the network map ---------- */

.mapfig {
  margin: 0;
  background: var(--plate);
  border-top: 4px solid var(--band);
}

.mapfig img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.6rem;
}

.mapfig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  padding: 0.5rem 0.9rem 0.7rem;
  border-top: 1px solid var(--rule-2);
  font-size: 0.88rem;
  color: var(--ink-2);
}

.dot {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.4rem;
  background: var(--g, var(--band));
  vertical-align: baseline;
}

/* ---------- route and station list ---------- */

.routes {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.routes li {
  background: var(--plate);
  padding: 0.75rem 0.95rem 0.85rem;
}

.rl {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}

.rn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--g, var(--band));
  color: #fff;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1;
}

.rs {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.rs b {
  color: var(--ink);
  font-weight: 600;
}

.halts {
  margin: 0;
  padding: 1rem 1.05rem;
  background: var(--plate);
  font-size: 0.87rem;
  line-height: 1.7;
  color: var(--ink-2);
}

@media (min-width: 52rem) {
  .routes { grid-template-columns: repeat(2, 1fr);
}
}

.keys {
  display: grid;
  gap: 0.15rem 1.2rem;
  margin: 0;
  padding: 0.9rem 1.05rem;
  background: var(--plate);
  border-top: 1px solid var(--rule-2);
  list-style: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-2);
}

@media (min-width: 34rem) {
  .keys { grid-template-columns: repeat(2, 1fr);
} }
@media (min-width: 52rem) {
  .keys { grid-template-columns: repeat(4, 1fr);
} }

/* ---------- grouped navigation ---------- */

.nav .wrap {
  position: relative;
  align-items: stretch;
}

.navtop,
.grp > summary {
  flex: 0 0 auto;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  color: #c6d8ec;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.grp > summary::-webkit-details-marker {
  display: none;
}

.grp > summary::after {
  content: "";
  margin-left: 0.4rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.navtop:hover,
.grp > summary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.navtop[aria-current="page"],
.grp > summary.on {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.grp[open] > summary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* The bar scrolls sideways and never wraps, and a scrolling box clips
   an absolutely positioned child, so the panels are fixed to the
   viewport against a sticky bar. Script anchors each under its own
   summary. */
.grp > ul {
  position: fixed;
  left: 0;
  top: 46px;
  z-index: 31;
  min-width: 15rem;
  width: max-content;
  max-width: min(24rem, 92vw);
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--band-2);
  box-shadow: 0 8px 18px rgba(16, 32, 44, 0.28);
}

.grp > ul a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0.55rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: #c6d8ec;
  text-decoration: none;
  border-left: 4px solid transparent;
}

.grp > ul a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-left-color: #fff;
}

.grp > ul a {
  text-decoration: none;
}

.grp > ul a[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  border-left-color: #fff;
}

.grp[open] > summary::after {
  transform: translateY(-1px) rotate(180deg);
}

@media (min-width: 44rem) {
  .grp > ul { left: auto;
  right: auto;
  min-width: 15rem;
  border-radius: 0 0 2px 2px;
}
}

.footlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.footlinks a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: 0.88rem;
}