/* ---------------------------------------------------------------
   Spoorkaart (/spoor/). Bouwt voort op style.css: kleuren, kop,
   paneel, lijst en donkere kaarttegels komen daarvandaan.
   --------------------------------------------------------------- */
:root{
  --sp-storing:#d92d2d;
  --sp-werk:#e08c00;
  --sp-net:#5b6b7a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sp-storing:#f05252;
    --sp-werk:#f5a524;
    --sp-net:#b4c2ce;
  }
}
:root[data-theme="dark"]{
  --sp-storing:#f05252;
  --sp-werk:#f5a524;
  --sp-net:#b4c2ce;
}

.sp-stand{margin-left:auto; color:var(--ink-dim); font-size:13px; font-variant-numeric:tabular-nums}
.sp-terug{color:var(--ink); text-decoration:none; font-size:14px; font-weight:500;
          border:1px solid var(--line); border-radius:999px; padding:5px 12px}
.sp-terug:hover{background:var(--vlak-2)}

.panel .intro{margin:0; padding:12px 14px; border-bottom:1px solid var(--line)}

.mapwrap{position:relative; min-height:0}

/* lijst */
.item .tag.storing{background:var(--sp-storing); color:#fff}
.item .tag.werk{background:var(--sp-werk); color:var(--op-fel)}
.item .tag.calamiteit{background:var(--op-fel); color:#fff}
.item .titel{font-weight:600}
.item .wanneer{color:var(--ink-dim); font-size:12px; margin-top:3px}
.item.sp-storing.is-active{box-shadow:inset 3px 0 0 var(--sp-storing)}
.item.sp-werk.is-active{box-shadow:inset 3px 0 0 var(--sp-werk)}

/* popup */
.sp-pop h3{margin:0 0 4px}
.sp-pop .sp-sit{margin:0 0 8px}
.sp-pop ul{margin:6px 0 0; padding-left:18px; font-size:13px}
.sp-pop .sp-dim{color:var(--popup-dim); font-size:12px; margin-top:8px}

/* routecheck */
:root{ --sp-route:#0b62c4; --sp-goed:#0f7a4a; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --sp-route:#5aa9ff; --sp-goed:#4ade80; }
}
:root[data-theme="dark"]{ --sp-route:#5aa9ff; --sp-goed:#4ade80; }

.sp-route{padding:12px 14px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.sp-route__kop{margin:0; font-size:15px}
.sp-route__rij{display:flex; gap:8px; align-items:flex-end}
.sp-route__veld{flex:1; display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink-dim)}
.sp-route__veld input{
  font:inherit; font-size:14px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:7px 9px; min-width:0;
}
.sp-route__veld input:focus{outline:2px solid var(--sp-route); outline-offset:-1px}
.sp-route__wissel,.sp-route__knop{
  font:inherit; border-radius:8px; border:1px solid var(--line); cursor:pointer; padding:7px 12px;
}
.sp-route__wissel{background:transparent; color:var(--ink); font-size:16px; line-height:1}
.sp-route__knop{background:var(--sp-route); border-color:var(--sp-route); color:#fff; font-weight:600}
.sp-route__knop:disabled{opacity:.6; cursor:wait}

.sp-uitslag{padding:10px 14px 12px; border-bottom:1px solid var(--line); max-height:55vh; overflow-y:auto}
.sp-oordeel{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px;
            background:var(--vlak-2); margin-bottom:10px; font-size:14px}
.sp-oordeel b{display:block}
.sp-oordeel__stip{flex:none; width:12px; height:12px; border-radius:50%; margin-top:4px}
.sp-oordeel--goed .sp-oordeel__stip{background:var(--sp-goed)}
.sp-oordeel--let .sp-oordeel__stip{background:var(--sp-werk)}
.sp-oordeel--fout .sp-oordeel__stip{background:var(--sp-storing)}
.sp-uitslag h3{margin:12px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim)}
.sp-reis{padding:8px 0; border-top:1px solid var(--line); font-size:13px}
.sp-reis__kop{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.sp-reis__tijd{font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}
.sp-reis__oud{text-decoration:line-through; color:var(--ink-dim); font-weight:400}
.sp-reis__label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
                padding:1px 6px; border-radius:4px}
.sp-reis__label--fout{background:var(--sp-storing); color:#fff}
.sp-reis__label--let{background:var(--sp-werk); color:var(--op-fel)}
.sp-reis__label--goed{background:transparent; color:var(--sp-goed); padding:0}
.sp-reis__legs{margin:4px 0 0; padding:0; list-style:none; color:var(--ink-dim)}
.sp-reis__legs li{margin:2px 0}
.sp-reis__legs .fout{color:var(--sp-storing); font-weight:600}
.sp-reis__legs .let{color:var(--sp-werk); font-weight:600}
.sp-reis__msg{margin:4px 0 0; color:var(--ink)}
.sp-prob{padding:8px 10px; border-radius:8px; border-left:4px solid var(--sp-werk);
         background:var(--vlak-2); margin:0 0 8px; font-size:13px; cursor:pointer}
.sp-prob--storing,.sp-prob--calamiteit{border-left-color:var(--sp-storing)}
.sp-prob b{display:block}
.sp-uitslag .sub{color:var(--ink-dim); font-size:12.5px; margin:0}
.sp-uitslag .sp-ns{display:inline-block; margin-top:8px; font-size:13px; color:var(--popup-link, #0b62c4)}

/* legenda */
.sp-legenda{
  position:absolute; left:10px; bottom:22px; z-index:500;
  display:flex; gap:12px; padding:6px 10px; border-radius:8px; font-size:12px;
  background:rgba(var(--paneel-rgb),.92); color:var(--ink); box-shadow:0 1px 4px var(--schaduw);
}
.sp-legenda span{display:flex; align-items:center; gap:6px}
.sp-l{display:inline-block; width:22px; height:4px; border-radius:2px}
.sp-l--storing{background:var(--sp-storing); height:5px}
.sp-l--werk{background:var(--sp-werk); height:5px}
.sp-l--net{background:var(--sp-net); height:2px}
.sp-l--route{background:var(--sp-route); height:6px}

@media (max-width:820px){
  .sp-stand{order:3; margin-left:0; width:100%}
  .layout{grid-template-rows:55vh 1fr}
  .panel{order:2}
  .mapwrap{order:1}
}