/*
 RadarČeska — Train Card v4.4.1
 CSS ONLY · SAFE POLISH
 No JavaScript · no fetch · no observers · no map / Motion changes.
*/

:root{
  --rc441-ink:#102e3c;
  --rc441-muted:#71848d;
  --rc441-border:#dfe8e9;
  --rc441-soft:#f7faf9;
  --rc441-soft-2:#f1f6f5;
  --rc441-green:#087b59;
  --rc441-green-bright:#0aa275;
  --rc441-green-soft:#eaf8f3;
  --rc441-red:#cf4250;
  --rc441-red-soft:#fff0f2;
}

/* Card shell — dimensions stay close to current production. */
#trainDetailCard{
  border:1px solid rgba(31,72,80,.10);
  border-radius:24px;
  background:rgba(255,255,255,.985);
  box-shadow:0 18px 50px rgba(27,54,62,.16);
  color:var(--rc441-ink);
  scrollbar-width:thin;
  scrollbar-color:#c8d5d7 transparent;
}
#trainDetailCard::-webkit-scrollbar{width:5px}
#trainDetailCard::-webkit-scrollbar-thumb{background:#c8d5d7;border-radius:8px}
#trainDetailCard .card-close{
  border-radius:50%;
  color:#71858e;
  transition:background .16s ease,color .16s ease;
}
#trainDetailCard .card-close:hover{
  background:#eef4f3;
  color:#173845;
}

/* Header */
#trainDetailCard .train-detail-topline{
  gap:10px;
  margin-bottom:5px;
}
#trainDetailCard .train-detail-kicker{
  color:#52727c;
  font-size:10px;
  font-weight:800;
  letter-spacing:.075em;
  line-height:1.3;
  text-transform:uppercase;
}
#trainDetailCard .train-detail-glyph{
  color:var(--rc441-green);
}
#trainDetailCard .train-detail-live-actions{
  gap:6px;
}
#trainDetailCard .train-detail-freshness{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:4px 9px;
  border:1px solid #d7ede5;
  border-radius:999px;
  background:#eff9f5;
  color:#087456;
  font-size:10px;
  font-weight:800;
}
#trainDetailCard .train-follow-btn{
  border:1px solid var(--rc441-border);
  border-radius:10px;
  background:#fff;
  color:#31515d;
  box-shadow:none;
}
#trainDetailCard .train-follow-btn[aria-pressed="true"]{
  border-color:#b9e0d2;
  background:var(--rc441-green-soft);
  color:#087456;
}

#trainDetailCard .train-detail-title-row{
  gap:8px;
  align-items:center;
  margin-top:1px;
}
#trainDetailCard #trainDetailTitle{
  color:#0c2b3a;
  font-size:30px;
  line-height:1.04;
  letter-spacing:-.035em;
}
#trainDetailCard #trainDetailRoute{
  margin-top:5px;
  color:#58717b;
  font-size:11px;
  line-height:1.45;
}

/* Delay: clearer but compact. */
#trainDetailCard .train-mobile-summary{
  gap:8px;
  align-items:stretch;
}
#trainDetailCard .train-detail-delay{
  min-width:100px;
  border:1px solid #f0d9dc;
  border-radius:15px;
  background:var(--rc441-red-soft);
  padding:8px 10px;
}
#trainDetailCard .train-detail-delay span{
  color:#8f6f74;
  font-size:8px;
  font-weight:700;
  letter-spacing:.02em;
}
#trainDetailCard .train-detail-delay strong{
  color:var(--rc441-red);
  font-size:19px;
  line-height:1.05;
  letter-spacing:-.025em;
}
#trainDetailCard[data-delay-state="ontime"] .train-detail-delay,
#trainDetailCard[data-delay-state="on_time"] .train-detail-delay{
  border-color:#d2eadf;
  background:#eef9f4;
}
#trainDetailCard[data-delay-state="ontime"] .train-detail-delay strong,
#trainDetailCard[data-delay-state="on_time"] .train-detail-delay strong{
  color:#087557;
}

/* ETA / next-stop summary */
#trainDetailCard .train-eta{
  border:1px solid #dce8e7;
  border-radius:15px;
  background:linear-gradient(180deg,#fbfdfd,#f5faf8);
  padding:8px 10px;
}
#trainDetailCard .train-eta-copy small{
  color:#768a92;
  font-size:8px;
}
#trainDetailCard .train-eta-copy strong{
  color:#173845;
  font-size:11px;
}
#trainDetailCard .train-eta-copy em,
#trainDetailCard #trainEtaRelative{
  color:#087557;
  font-size:10px;
}

/* Existing metadata — cleaner, flatter, easier scanning. */
#trainDetailCard .train-detail-meta-grid,
#trainDetailCard .train-detail-quick-grid{
  gap:7px;
}
#trainDetailCard .train-detail-meta{
  min-height:54px;
  padding:9px 10px;
  border:1px solid #e2eaea;
  border-radius:13px;
  background:var(--rc441-soft);
  box-shadow:none;
}
#trainDetailCard .train-detail-meta span{
  color:#758891;
  font-size:8px;
  font-weight:700;
  letter-spacing:.015em;
}
#trainDetailCard .train-detail-meta strong{
  color:#173744;
  font-size:11px;
  line-height:1.28;
}
#trainDetailCard .train-detail-quick{
  background:#f3f8f6;
}
#trainDetailCard #trainDetailNextRow{
  border-color:#d5e9e2;
  background:#eef9f5;
}
#trainDetailCard #trainDetailNextRow strong{
  color:#086e52;
}

/* Buttons/actions already generated by existing production JS. */
#trainDetailCard #rcTrainUxActions,
#trainDetailCard .train-ux-actions,
#trainDetailCard .train-detail-actions{
  gap:7px;
  margin-top:8px;
  margin-bottom:9px;
}
#trainDetailCard #rcTrainUxActions button,
#trainDetailCard .train-ux-actions button,
#trainDetailCard .train-detail-actions button{
  min-height:49px;
  border:1px solid #dce6e7;
  border-radius:13px;
  background:#fff;
  color:#173744;
  box-shadow:0 1px 1px rgba(20,50,58,.025);
  font-size:9px;
  font-weight:750;
}
#trainDetailCard #rcTrainUxActions button:hover,
#trainDetailCard .train-ux-actions button:hover,
#trainDetailCard .train-detail-actions button:hover{
  border-color:#c8dcda;
  background:#f6faf9;
}

/* Full Timetable renderer — visual only. */
#trainDetailCard #rcFullTimetable{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--rc441-border);
  border-radius:16px;
  background:#fff;
  box-shadow:none;
}
#trainDetailCard #rcFullTimetable .rc-full-tt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
#trainDetailCard #rcFullTimetable .rc-full-tt-head > div:first-child{
  min-width:0;
}
#trainDetailCard #rcFullTimetable .rc-full-tt-head b{
  color:#102f3e;
  font-size:14px;
  letter-spacing:-.015em;
}
#trainDetailCard #rcFullTimetable .rc-full-tt-head small{
  display:block;
  margin-top:1px;
  color:#83949a;
  font-size:8px;
  line-height:1.25;
}
#trainDetailCard #rcFullTimetable .rc-full-tt-actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
#trainDetailCard #rcFullTtCount{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 7px;
  border-radius:999px;
  background:var(--rc441-green-soft);
  color:#087456;
  font-size:8px;
  font-weight:850;
  white-space:nowrap;
}
#trainDetailCard #rcFullTtToggle{
  min-height:25px;
  padding:4px 8px;
  border:1px solid #dce7e7;
  border-radius:999px;
  background:#fff;
  color:#34515c;
  font-size:8px;
  font-weight:800;
}
#trainDetailCard .rc-full-tt-list{
  max-height:282px;
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:2px;
  scrollbar-width:thin;
}
#trainDetailCard .rc-full-tt-row{
  min-height:41px;
  padding:5px 3px;
  border-radius:10px;
}
#trainDetailCard .rc-full-tt-row + .rc-full-tt-row{
  margin-top:1px;
}
#trainDetailCard .rc-full-tt-row.is-past{
  opacity:.62;
}
#trainDetailCard .rc-full-tt-row.is-current,
#trainDetailCard .rc-full-tt-row.is-next{
  background:var(--rc441-green-soft);
  opacity:1;
}
#trainDetailCard .rc-full-tt-rail i{
  background:#becdce;
}
#trainDetailCard .rc-full-tt-row.is-current .rc-full-tt-rail i,
#trainDetailCard .rc-full-tt-row.is-next .rc-full-tt-rail i{
  background:var(--rc441-green-bright);
}
#trainDetailCard .rc-full-tt-station{
  color:#183844;
  font-size:11px;
  font-weight:760;
}
#trainDetailCard .rc-full-tt-row.is-current .rc-full-tt-station,
#trainDetailCard .rc-full-tt-row.is-next .rc-full-tt-station{
  color:#076c50;
}
#trainDetailCard .rc-full-tt-copy > small{
  color:#7f9198;
  font-size:8px;
}
#trainDetailCard .rc-full-tt-timebar{
  gap:4px;
  margin-top:3px;
}
#trainDetailCard .rc-full-tt-timechip{
  border-radius:7px;
  padding:3px 5px;
  background:#f4f7f7;
}
#trainDetailCard .rc-full-tt-timechip em{
  color:#8a999f;
  font-size:7px;
}
#trainDetailCard .rc-full-tt-timechip b{
  color:#284650;
  font-size:9px;
}
#trainDetailCard .rc-full-tt-timechip.is-actual{
  background:#fff1f2;
}
#trainDetailCard .rc-full-tt-timechip.is-actual b{
  color:#c9414f;
}
#trainDetailCard .rc-full-tt-map{
  border-radius:999px;
}
#trainDetailCard .rc-full-tt-note{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #edf1f1;
  color:#85969c;
  font-size:7px;
  line-height:1.35;
}

/* Existing full-timetable missing-data state. */
#trainDetailCard .rc-full-tt-loading{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 24px;
  border:1px dashed #d8e4e3;
  border-radius:13px;
  background:linear-gradient(180deg,#fbfdfd,#f7faf9);
  color:#70838b;
  font-size:10px;
  line-height:1.55;
  text-align:center;
}

/* Native timetable (used when the full timetable module is not the visible owner). */
#trainDetailCard #trainJourney{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--rc441-border);
  border-radius:16px;
  background:#fff;
}
#trainDetailCard #trainJourney .train-journey-head,
#trainDetailCard #trainJourney header{
  margin-bottom:8px;
}
#trainDetailCard #trainJourney h3{
  color:#102f3e;
  font-size:14px;
}
#trainDetailCard #trainJourneyList{
  max-height:282px;
  overflow:auto;
  overscroll-behavior:contain;
}
#trainDetailCard .train-journey-empty{
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  border:1px dashed #d8e4e3;
  border-radius:13px;
  background:#f9fbfb;
  color:#71848c;
  text-align:center;
}
#trainDetailCard .train-journey-empty strong{
  color:#284650;
  font-size:11px;
}
#trainDetailCard .train-journey-empty p{
  max-width:300px;
  margin:5px auto 0;
  font-size:9px;
  line-height:1.45;
}
#trainDetailCard .train-journey-empty.is-warning{
  border-color:#eadfbd;
  background:#fffaf0;
}

/* Full-detail / collection / railfan sections: visual cohesion only. */
#trainDetailCard .train-railfan-full-detail-btn{
  border-radius:12px;
}
#trainDetailCard .train-detail-foot{
  color:#89989d;
  font-size:7px;
}

/* Mobile bottom sheet: no change to visibility or JS behavior. */
@media (max-width:700px){
  #trainDetailCard.mobile-map-sheet{
    border-radius:22px 22px 0 0;
    background:#fff;
    box-shadow:0 -10px 36px rgba(25,53,62,.14);
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  #trainDetailCard .mobile-sheet-grabber{
    opacity:.8;
  }
  #trainDetailCard #trainDetailTitle{
    font-size:25px;
  }
  #trainDetailCard #trainDetailRoute{
    font-size:10px;
  }
  #trainDetailCard .train-detail-delay{
    min-width:88px;
    padding:7px 8px;
  }
  #trainDetailCard .train-detail-delay strong{
    font-size:17px;
  }
  #trainDetailCard .train-detail-meta{
    min-height:50px;
    padding:8px 9px;
  }
  #trainDetailCard .train-detail-meta strong{
    font-size:10px;
  }
  #trainDetailCard #rcTrainUxActions button,
  #trainDetailCard .train-ux-actions button,
  #trainDetailCard .train-detail-actions button{
    min-height:46px;
    padding:6px 5px;
    font-size:8px;
  }
  #trainDetailCard #rcFullTimetable,
  #trainDetailCard #trainJourney{
    padding:10px;
    border-radius:15px;
  }
  #trainDetailCard .rc-full-tt-list,
  #trainDetailCard #trainJourneyList{
    max-height:215px;
  }
  #trainDetailCard #rcFullTimetable .rc-full-tt-head small{
    display:none;
  }
  #trainDetailCard .rc-full-tt-station{
    font-size:10px;
  }
  #trainDetailCard .rc-full-tt-timechip{
    padding:2px 4px;
  }
}

/* Small phones: preserve content, avoid squeezing controls into illegibility. */
@media (max-width:390px){
  #trainDetailCard #rcFullTimetable .rc-full-tt-head{
    align-items:flex-start;
  }
  #trainDetailCard #rcFullTimetable .rc-full-tt-actions{
    gap:3px;
  }
  #trainDetailCard #rcFullTtCount,
  #trainDetailCard #rcFullTtToggle{
    font-size:7px;
    padding-left:6px;
    padding-right:6px;
  }
}