/* Junavalon kaaviot (junat.js). Sama tiedosto kaupunni.orgin junajutussa,
   pasiaj.com/projektit/junavalo/-sivulla (rakennus kopioi sen täältä) ja
   julkisessa repossa github.com/pasiaj/junavalo (web/junat.css).
   Käyttää sivun muuttujia --paper, --ink, --muted, --rule, --heavy, --sans
   ja --serif. */

/* ── Kaaviot (junat.js) ─────────────────────────────────────────────
   Liikennevalot: validoitu paletti (dataviz-validaattori, vaalea #fbfaf7
   ja tumma #151515: värisokean erottuvuus ΔE 8,7). Sama sävy molemmissa
   tiloissa; väri ei ole koskaan ainoa tieto. */
:root { --vihrea: #43a96e; --keltainen: #b37903; --punainen: #a8353e; --tyhja: #e7e4dd; }
@media (prefers-color-scheme: dark) { :root { --tyhja: #2a2926; } }
.kaavio { margin: 34px -60px; padding: 18px 0 0; border-top: 2px solid var(--heavy); }
@media (max-width: 820px) { .kaavio { margin: 30px 0; } }
.kaavio > figcaption { font: 700 15px/1.35 var(--sans); margin-bottom: 4px; }
.kaavio > figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 2px; }
.kaavio-alue { position: relative; font: 13px/1.4 var(--sans); }
.kaavio-alue:empty::before { content: "Ladataan junadataa…"; color: var(--muted); }
.kaavio-vierita { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kaavio-valinnat { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.kaavio-valinnat button, .kaavio-lisaa {
  font: 600 12px/1 var(--sans); padding: 7px 10px; border: 1px solid var(--rule); border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer;
}
.kaavio-valinnat button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kaavio-lisaa { margin-top: 8px; }
.kaavio-selite { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; color: var(--muted); font: 12px/1.4 var(--sans); }
.kaavio-selite span { display: inline-flex; align-items: center; gap: 6px; }
.kaavio-pieni { color: var(--muted); font: 12px/1.45 var(--sans); margin: 8px 0 0; }
.kaavio-iso { font: 400 17px/1.3 var(--sans); margin: 6px 0 12px; }
.kaavio-iso strong { font: 700 34px/1 var(--serif); margin-right: 4px; }
.pallo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tyhja); flex: none; }
.pallo.vihrea { background: var(--vihrea); } .pallo.keltainen { background: var(--keltainen); } .pallo.punainen { background: var(--punainen); }
.pallo.alku { background: var(--paper); border: 2px solid var(--ink); } .pallo.loppu { background: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kaavio-vihje {
  position: fixed; z-index: 50; display: none; pointer-events: none; max-width: 280px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--heavy); padding: 8px 10px;
  font: 12px/1.45 var(--sans); box-shadow: 3px 3px 0 var(--rule);
}
.vihje-rivi { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.vihje-rivi .pallo { width: 8px; height: 8px; }
.kaavio svg { display: block; width: 100%; height: auto; overflow: visible; }
.kaavio svg .akseli { font: 11px var(--sans); fill: var(--muted); }
.kaavio svg .akseli.loppu { text-anchor: end; } .kaavio svg .akseli.keski { text-anchor: middle; }
.ruutu.vihrea, .palkki.vihrea { fill: var(--vihrea); } .ruutu.keltainen, .palkki.keltainen { fill: var(--keltainen); }
.ruutu.punainen, .palkki.punainen { fill: var(--punainen); } .ruutu.tyhja { fill: var(--tyhja); }
.ruutu:hover, .palkki:hover { stroke: var(--ink); stroke-width: 1.5; }
.kalenteri { min-width: 640px; }
/* Eilen */
.eilen-lista { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 28px; }
.eilen-lista li { display: grid; grid-template-columns: 12px 42px 62px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.eilen-lista .klo, .eilen-lista .ero { font-variant-numeric: tabular-nums; }
.eilen-lista .reitti { color: var(--muted); }
.eilen-lista .ero { font-weight: 600; text-align: right; }
/* Matriisi */
.matriisi, .rytmi, .vuorot { border-collapse: collapse; font: 13px/1.3 var(--sans); }
.matriisi { min-width: 640px; width: 100%; }
.matriisi th, .matriisi td { padding: 5px 4px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.matriisi thead th { font-weight: 600; color: var(--muted); font-size: 11px; text-align: center; }
.matriisi tbody th { text-align: left; font-weight: 600; padding-right: 10px; }
.matriisi tbody tr:not(.valiotsake) th, .matriisi thead th:first-child { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.matriisi .valiotsake th { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 14px; }
.matriisi .valiotsake th span { position: sticky; left: 0; }
.matriisi td { text-align: center; font-variant-numeric: tabular-nums; }
.matriisi td .pallo { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.matriisi td.tyhja { color: var(--muted); }
.matriisi td:hover { background: var(--tyhja); }
/* Viikkorytmi */
.rytmi { border-collapse: separate; border-spacing: 2px; }
.rytmi th { font-weight: 400; color: var(--muted); font-size: 11px; padding: 0 4px; }
.rytmi td { width: 26px; height: 22px; border-radius: 3px; background: var(--tyhja); }
.rytmi td.vihrea { background: var(--vihrea); } .rytmi td.keltainen { background: var(--keltainen); } .rytmi td.punainen { background: var(--punainen); }
.rytmi td.tyhja { background: none; }
.rytmi td:not(.tyhja):hover { outline: 2px solid var(--ink); }
/* Viikot */
.viivakaavio .vyohyke { opacity: .1; } .viivakaavio .vyohyke.vihrea { fill: var(--vihrea); }
.viivakaavio .vyohyke.keltainen { fill: var(--keltainen); } .viivakaavio .vyohyke.punainen { fill: var(--punainen); }
@media (prefers-color-scheme: dark) { .viivakaavio .vyohyke { opacity: .16; } }
.viivakaavio .ruudukko { stroke: var(--rule); stroke-width: 1; }
.viivakaavio .viiva { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.viivakaavio .viiva.ohut { stroke: var(--muted); stroke-width: 1; opacity: .45; }
.viivakaavio .kohdistin { stroke: var(--muted); stroke-dasharray: 3 3; }
.viivakaavio .piste { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
/* Synty */
.synty { min-width: 520px; }
.synty .nolla { stroke: var(--rule); } .synty .kahva { stroke: var(--muted); stroke-width: 2; }
.synty .alku { fill: var(--paper); stroke: var(--ink); stroke-width: 2; } .synty .loppu { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.synty .akseli { font-size: 12px; fill: var(--ink); } .synty text.keski { fill: var(--muted); font-size: 11px; }
/* Syyt */
.syyt { list-style: none; margin: 10px 0 0; padding: 0; }
.syyt li { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 48px; gap: 10px; align-items: center; padding: 4px 0; }
.syyt .palkki-ala { height: 12px; }
.syyt .palkki-taytto { display: block; height: 100%; background: var(--ink); border-radius: 0 4px 4px 0; }
.syyt .maara { text-align: right; font-variant-numeric: tabular-nums; }
/* Vuorot */
.vuorot { width: 100%; min-width: 520px; }
.vuorot th, .vuorot td { padding: 6px 6px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.vuorot th { font-size: 11px; color: var(--muted); font-weight: 600; }
.vuorot .luku { text-align: right; font-variant-numeric: tabular-nums; }
/* Junavalo-indikaattori (data-kaavio="nyt"), etusivun sivupalsta */
.junavalo .section-head a { color: inherit; text-decoration: none; }
.junavalo .section-head a:hover { text-decoration: underline; }
.junavalo .tapahtuu-paikka { margin: -8px 0 12px; }
.junavalo .kaavio-alue { font: 13px/1.4 var(--sans); }
.jv-paa { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; }
.jv-lamppu { display: block; width: 28px; height: 70px; }
.rail .junavalo + * { margin-top: 26px; }
.jv-kotelo { fill: #1d1d1b; stroke: var(--rule); }
.jv-valo { fill: #fff; opacity: .14; }
.jv-valo.palaa { opacity: 1; }
.jv-valo.palaa.vihrea { fill: var(--vihrea); } .jv-valo.palaa.keltainen { fill: var(--keltainen); } .jv-valo.palaa.punainen { fill: var(--punainen); }
.jv-klo { margin: 0; color: var(--muted); font-size: 12px; }
.jv-iso { margin: 2px 0; font-size: 15px; }
.jv-iso strong { font: 700 30px/1 var(--serif); margin-right: 2px; }
.jv-tila { margin: 0; font-weight: 600; font-size: 12px; }
.jv-osat { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.jv-alaotsikko { margin: 14px 0 4px; font: 700 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jv-viimeiset, .jv-paivat { list-style: none; margin: 0; padding: 0; }
.jv-viimeiset li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.jv-viimeiset li:last-child { border-bottom: 0; }
.jv-ero { font-weight: 600; font-variant-numeric: tabular-nums; }
.jv-paivat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jv-paivat li { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; }
.jv-paivat .pallo { width: 16px; height: 16px; }
.jv-lisaa { margin: 12px 0 0; font: 600 13px/1.3 var(--sans); }