:root{font-family:system-ui,-apple-system,sans-serif;color:#182e32;background:#f4f6f3;font-size:16px}*{box-sizing:border-box}body{margin:0}header{height:80px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce5df;color:#526661}.brand{font-weight:750;color:#183f36}main{max-width:1200px;margin:auto;padding:44px 24px}h1{font-size:clamp(28px,4vw,44px);letter-spacing:-1.5px;margin:8px 0 24px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:#42705f}.intro,.note,.caption{color:#65756e;line-height:1.6}#login{max-width:560px;margin:50px auto}form{display:grid;gap:16px;margin-top:32px}label{display:grid;gap:8px;font-size:13px;font-weight:600}input,select{font:inherit;background:white;border:1px solid #cad7ce;border-radius:9px;padding:12px;min-width:0}button{font:inherit;border:0;border-radius:9px;background:#175745;color:white;padding:12px 18px;cursor:pointer;font-weight:650}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #96bfaa;outline-offset:3px}.secondary{background:#e9eee8;color:#285143;font-size:13px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.filters{display:flex;gap:16px;margin:0 0 28px}.filters label{flex:1}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px}.card{background:white;border:1px solid #dce5df;border-radius:16px;padding:24px}.maphead{display:flex;justify-content:space-between;align-items:center;gap:10px}#fresh{font-size:13px;color:#68766e;min-height:20px}#map{height:400px;border-radius:12px;background:#e7eee7}.caption{font-size:12px;margin-bottom:0}.stop{border-top:1px solid #e5ebe5;padding:20px 0}.stop h2{font-size:19px;margin:0 0 12px}.time{display:flex;justify-content:space-between;gap:15px;margin:10px 0;font-size:14px}.time span{color:#6a776e}.note{font-size:13px;padding:0 10px}#message{color:#96421d}footer{text-align:center;font-size:12px;color:#6d7e72;padding:24px}[hidden]{display:none!important}@media(max-width:750px){main{padding:26px 16px}.layout{grid-template-columns:1fr}.filters{flex-wrap:wrap}.filters label{min-width:120px}.card{padding:18px}#map{height:340px}header{font-size:13px;height:64px}#login{margin:30px auto}.top{align-items:flex-start}}
.demo-banner{padding:13px 18px;border-radius:10px;background:#f8edcf;color:#806321;font-size:13px;margin-bottom:28px}.week-section{margin-bottom:34px}h2{font-size:21px;letter-spacing:-.4px}.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:16px}.day{background:white;border:1px solid #dce5df;color:#203e33;text-align:left;padding:14px 10px;min-height:150px;border-radius:12px}.day.selected{border:2px solid #175745;background:#eaf3ec}.day small,.day span{display:block;font-size:11px;line-height:1.6;font-weight:450;margin-top:6px}.day strong{display:block;font-size:15px}.day .weekend{color:#8a928b}.route-stop{display:flex;gap:12px;border-top:1px solid #edf0ea;padding:13px 0;margin-top:8px;font-size:14px}.route-stop span{color:#6c786f;font-size:12px;display:block;margin-top:4px}.stop-dot{width:24px;height:24px;border-radius:50%;background:#edf2ec;text-align:center;padding:3px;color:#275a45;font-size:12px;flex-shrink:0}@media(max-width:950px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:550px){.week{grid-template-columns:repeat(2,minmax(0,1fr))}.day{min-height:120px}.week-section>.top{align-items:flex-start;flex-wrap:wrap}}

.stop-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;flex-shrink:0;font-size:19px;font-weight:800;color:white;border:2px solid white;box-shadow:0 2px 7px #183f3620}.departure{background:#16704f}.arrival{background:#223a64}.timeo{background:#c57b19}.leo{background:#8857ad}.school{background:#257b9d}.stop-heading{display:flex;gap:12px;align-items:center}.stop-heading small{display:block;color:#6c786f;margin-top:4px;font-size:12px}.schedule-stop .time{margin-left:48px}.stop-marker,.vehicle-marker{background:none;border:0}.stop-label{border:0!important;border-radius:9px!important;box-shadow:0 2px 10px #1233!important;padding:6px 10px!important}.map-stop-label{display:flex;gap:9px;align-items:center}.map-stop-label strong{font-size:11px}.map-stop-label span{font-size:13px;font-weight:800}.vehicle{width:48px;height:68px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 5px #17375388)}.car{width:32px;height:54px;transform-origin:center}.car svg{width:100%;height:100%;display:block}.vehicle.stale{opacity:.55}#map{height:480px}@media(max-width:750px){#map{height:400px}.map-stop-label strong{font-size:10px}.map-stop-label{gap:6px}}

.simulation-clock{background:rgba(24,63,54,.7);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 3px 12px #15352733;min-width:132px;border:2px solid white}.simulation-clock span{display:block;font-size:9px;letter-spacing:1.5px;opacity:.8}.simulation-clock strong{display:block;font-size:25px;line-height:1.5;font-variant-numeric:tabular-nums}.simulation-clock small{display:block;font-size:11px;opacity:.8}

.speed-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid #ffffff30}.speed-controls button{padding:0;width:29px;height:29px;border-radius:7px;background:#ffffff22;color:white;font-size:21px;line-height:1}.speed-controls button:hover{background:#ffffff44}.speed-controls button:disabled{opacity:.35;cursor:default}.speed-value{font-size:13px;min-width:35px;text-align:center;font-variant-numeric:tabular-nums}

.clock-edit{background:#ffffff20;color:white;font-size:11px;padding:7px 9px;margin-top:8px;width:100%}.clock-form{margin-top:9px;gap:7px}.clock-form label{font-size:11px;color:white}.clock-form input{font-size:13px;padding:7px;width:150px}.clock-form button{font-size:11px;padding:7px;background:#ffffff25;color:white}.clock-form small{max-width:155px}

.approach-warning{max-width:310px;padding:12px 15px;border:2px solid #b85b00;border-radius:11px;background:#fff1c9;color:#643700;font-size:13px;font-weight:750;line-height:1.5;box-shadow:0 3px 12px #17375333;animation:approach-pulse 1.5s ease-in-out infinite}
@keyframes approach-pulse{0%,100%{background:#fff1c9;box-shadow:0 0 0 0 #d77b0040}50%{background:#ffda85;box-shadow:0 0 0 5px #d77b0010}}
@media(prefers-reduced-motion:reduce){.approach-warning{animation:none}}
@media(max-width:550px){.approach-warning{max-width:240px;font-size:12px}}

#status{white-space:pre-line;line-height:1.6}#journeyProgress{overflow-x:auto;overflow-y:hidden;margin:16px 0 22px;padding:0 65px;width:100%;max-width:100%;-webkit-overflow-scrolling:touch}.journey-track{position:relative;height:168px;min-width:500px}.journey-rail{position:absolute;top:65px;left:0;right:0;height:7px;border-radius:6px;background:#dde5df}.journey-fill{height:100%;background:#175745;border-radius:6px}.journey-stage{position:absolute;transform:translateX(-50%);width:118px;text-align:center;font-size:11px;line-height:1.4}.journey-stage b{display:block;color:#789084}.journey-stage strong,.journey-stage small{display:block}.journey-stage small{color:#68766e}.journey-stage.passed b{color:#175745}.journey-stage.passed small:last-child{color:#175745;font-weight:700}

/* Let the map and timeline shrink inside their grid column. */
.layout>*,.card,.maphead,#status,.filters label,.top>*,#journeyProgress{min-width:0}
#map{width:100%;max-width:100%;overflow:hidden}
#status,.route-stop,.stop-heading,.caption{overflow-wrap:anywhere}
@media(max-width:750px){
 .layout{grid-template-columns:minmax(0,1fr)}
 input,select,.clock-form input{font-size:16px}
 header{gap:12px}header>span{min-width:0;overflow-wrap:anywhere}
 .top{flex-wrap:wrap}
 #journeyProgress{margin:20px 0 28px}
 .simulation-clock{padding:9px 11px;min-width:0}
 .approach-warning{max-width:calc(100vw - 90px)}
}
@media(max-width:400px){
 main{padding:22px 12px}.card{padding:14px}.filters{gap:12px}
 .filters label{flex:1 1 100%;min-width:0}
 .week-section>.top>div{display:flex;gap:5px;flex-wrap:wrap}
 #map{height:420px}
}

#journeyProgress.family-progress{padding:0;overflow:visible}
.family-track{position:relative;height:28px;margin:0 12px}
.family-rail{position:absolute;left:0;right:0;top:11px;height:6px;background:#dde5df;border-radius:6px}
.family-dot{position:absolute;top:0;transform:translateX(-50%);font-size:16px;line-height:28px;color:#94a69c;background:white;border-radius:50%;width:24px;text-align:center}
.family-dot.passed{color:#175745}
.family-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px;text-align:center;font-size:14px}
.family-details strong,.family-details small{display:block;line-height:1.6}
.family-details small{font-size:13px;color:#68766e}
.family-details .confirmed{color:#175745;font-weight:700}

.family-details{display:block;position:relative;margin:8px 12px 0;min-height:78px}
.family-detail{position:absolute;top:0;width:120px;max-width:48%;transform:translateX(-50%);text-align:center}
.family-detail.destination{transform:translateX(-100%);text-align:right}

main{max-width:none;width:100%}
.layout{grid-template-columns:minmax(0,1fr)}
.layout>aside{width:100%}
#schedule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media(max-width:550px){#schedule{grid-template-columns:minmax(0,1fr);gap:0}}

/* Extend the transport panel to the viewport edges, retaining readable text spacing. */
main{--page-gutter:24px;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.mapcard{margin-left:calc(-1 * var(--page-gutter));margin-right:calc(-1 * var(--page-gutter));width:calc(100% + 2 * var(--page-gutter));padding:18px 8px;border-radius:0;border-left:0;border-right:0}
.maphead,#attendance,#fresh,.mapcard>#routeCaption,.mapcard>#stops{margin-left:8px;margin-right:8px}
.maphead,#status{width:100%}
.maphead{width:auto;display:block}
#status{display:block}
@media(max-width:750px){main{--page-gutter:16px}}
@media(max-width:400px){main{--page-gutter:12px}.mapcard{padding:14px 4px}}
#administration{background:white;border:1px solid #cad7ce;border-radius:12px;padding:18px;margin-bottom:24px}#administration summary{cursor:pointer;font-weight:700}#adminContent{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}#adminContent form{margin-top:12px}#adminContent p{font-size:13px;line-height:1.5;color:#65756e}#adminContent fieldset label{display:flex;align-items:center;margin:10px 0}.admin-key{grid-column:1/-1;background:#fff1c9;padding:16px}.admin-key input{width:100%}