/* Living Skills owns the shared shell; these rules arrange the bus activity. */
.bus-page .site-header{max-width:none;margin:0;flex-wrap:nowrap}.bus-page .brand{width:auto}.bus-page .brand img{max-width:none}.bus-page .utility-nav{margin-left:auto}.bus-page .utility-nav img{width:34px;height:34px}
.bus-workspace{max-width:1280px;margin:0;width:100%}.bus-workspace .activity{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}.bus-title{flex:1;min-width:0}.bus-title h1{margin:0;font-size:clamp(28px,2.3vw,38px)}.bus-title p{margin:10px 0 0;font-size:20px}.bus-workspace .lesson-heading{margin-bottom:24px;flex-wrap:nowrap}.bus-workspace .mode-tabs{flex:0 1 330px;min-width:290px;align-self:center}.bus-workspace .mode-tabs a{font-size:18px;padding:8px 18px}
.bus-guide .guide-portrait{height:280px;width:100%;margin:0;object-position:center}.bus-guide .guide-bubble{margin:0;padding:14px 16px;min-height:58px;text-align:left}.bus-setup{width:100%;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f8fcff}.bus-setup .activity-setup{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}.bus-setup label{margin:0;font-size:17px;font-weight:800;min-width:0}.bus-setup label:first-child{grid-column:1/-1}.bus-setup label:nth-child(3){grid-column:auto}.bus-setup input,.bus-setup select{border-color:var(--line);font-size:18px;min-width:0;min-height:48px;padding:8px 10px;margin-top:6px;border-radius:8px}.bus-setup .small-label:empty{display:none}.bus-setup .small-label{margin:8px 0 0;font-size:15px;line-height:1.4}.bus-setup [aria-invalid=true]{border:2px solid #b33b23}
.bus-page [hidden]{display:none!important}.bus-page .illustrated-stage{background:transparent}.bus-picture{position:relative;aspect-ratio:3/1;overflow:hidden;border-radius:20px;background:#e4f1f5 url('bus-stop-perspective.webp') center / 100% 100% no-repeat;isolation:isolate}.bus-picture .road{position:absolute;inset:0;height:100%;width:100%;margin:0;border:0;container-type:normal}.bus-picture .bus-vehicle{position:absolute;left:8%;width:7%;bottom:40%;z-index:2}.bus-picture #bus-art,.bus-picture .bus-vehicle>img{display:block;position:static;width:100%;height:auto;max-width:none;transform:none;filter:drop-shadow(0 3px 2px #14313d45)}.bus-picture .marvin,.bus-picture .practice-learner{position:absolute;left:73%;bottom:21%;height:44%;width:11%;transform:none;z-index:3}.bus-picture .marvin.boarding{height:34%;width:9%}.bus-picture .marvin img,.bus-picture .practice-learner img{width:100%;height:100%;object-fit:contain}.bus-picture .marvin span,.bus-picture .practice-learner span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.bus-picture .onboard{position:absolute;left:40.7%;top:28%;width:14.5%;height:30.4%;bottom:auto;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;transform:none;overflow:hidden;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);z-index:1}.bus-picture .onboard img{position:absolute;left:-25%;top:3%;width:150%;height:auto;max-width:none}.bus-picture .onboard::after{content:"";position:absolute;inset:0;border:0;background:linear-gradient(115deg,#b4e4ff25,#a6d8f54d 50%,#d5efff18)}
.time-overview{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px) minmax(0,1fr);gap:16px;align-items:end;margin-top:-56px;z-index:2}.time-overview .clock-panel{padding:0;min-width:0;text-align:center}.time-overview #clock{width:clamp(180px,20vw,320px);max-width:100%;height:auto;filter:none;background:transparent;overflow:visible}.time-overview #clock>circle:first-child{stroke:#536a9b;stroke-width:10}.time-overview #clock-marks text{fill:var(--navy);font-weight:850}.time-overview .now-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:max-content;max-width:100%;min-width:0;position:relative;background:transparent;border:0;border-radius:8px;margin:0 auto;padding:0;font-weight:900}.now-panel .digital-time,.now-panel strong{font-size:clamp(28px,2.8vw,44px);line-height:1.15;font-weight:950;margin:0;color:var(--navy);letter-spacing:-.5px;white-space:nowrap}.now-panel>span{font-size:17px;color:var(--blue);line-height:1.2}.start-display,.time-overview .arrival-label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-align:center;margin:0 0 35px;padding:0;font-size:18px;line-height:1.3}.start-display strong,.time-overview .arrival-label strong{font-size:clamp(22px,2.4vw,36px);font-weight:950;line-height:1.2}.time-overview .arrival-label{background:transparent}
.bus-timeline{position:relative;margin-top:28px}.bus-timeline .waiting-timeline{width:calc(92% * var(--wait-share));margin-top:0}.bus-timeline .route-progress{position:absolute;top:52px;left:4%;right:4%;height:14px;padding:0;margin:0}.bus-timeline .route-progress #road-progress{width:calc(var(--wait-share) * 100%);height:14px;opacity:0}.bus-timeline #departure-progress{height:14px;margin-left:14px;border-radius:8px;overflow:hidden}.bus-timeline .route-labels{position:absolute;top:104px;right:4%;display:block;width:calc(92% * (1 - var(--wait-share)) - 14px);padding:0;background:transparent;text-align:right;font-size:14px}.bus-workspace .interval-panel #bus-status{margin:0 0 12px;padding:0;min-height:0;background:transparent;font-size:18px}
/* Shared segmented waiting scale. Native progress elements retain fractional playback. */
.waiting-timeline{position:relative;margin:28px 4% 16px;--wait-color:#29adc2;--step-gap:8px}
.hour-mode .waiting-timeline{--wait-color:#b85c19}
.bus-page .waiting-scale{position:relative;list-style:none;padding:0;margin:0;width:100%;height:124px;background:transparent;color:var(--navy)}
.bus-page .waiting-scale::before,.bus-page .waiting-scale::after{content:none}
.bus-page .waiting-scale .timeline-tick{position:absolute;top:0;width:calc(100% / var(--units))!important;min-height:0;padding:0;border:0;transform:none;font-size:16px;font-weight:900;text-align:left;white-space:nowrap}
.bus-page .waiting-scale .timeline-tick:last-child{width:0!important}
.bus-page .waiting-scale .timeline-tick::before{content:'';position:absolute;left:0;right:auto;top:46px;width:var(--tick-width,4px);height:26px;border:0;border-radius:3px;background:#b7cfeb;transform:translateX(-50%)}
.bus-page .waiting-scale .timeline-tick::after{content:none}
.timeline-time{position:absolute;top:80px;left:0;transform:translateX(-50%);line-height:1.3}
.timeline-label{position:absolute;top:104px;left:0;transform:translateX(-50%);font-size:13px;font-weight:750;line-height:1.3}
.timeline-tick.current .timeline-time{color:var(--blue)}
.bus-page .waiting-scale .timeline-step{position:absolute;top:52px;left:calc(var(--step-gap)/2);width:calc(100% - var(--step-gap));height:14px;margin:0;appearance:none;border:var(--step-border,1.5px) solid #afcfee;border-radius:8px;background:#e6f2fd;overflow:hidden;color:var(--wait-color)}
.timeline-step::-webkit-progress-bar{background:#e6f2fd;border-radius:6px}
.timeline-step::-webkit-progress-value{background:var(--wait-color);border-radius:6px}
.timeline-step::-moz-progress-bar{background:var(--wait-color);border-radius:6px}
.timeline-marker{position:absolute;z-index:2;top:0;left:0;transform:translateX(-50%);min-width:64px;padding:4px 12px;border-radius:20px;background:var(--blue);color:white;text-align:center;font-size:16px;font-weight:900;line-height:24px}
.timeline-marker::before{content:'';position:absolute;top:32px;left:calc(50% - 1.5px);width:3px;height:27px;background:var(--blue)}
.timeline-marker::after{content:'';position:absolute;top:45px;left:calc(50% - 14px);width:28px;height:28px;box-sizing:border-box;border:4px solid white;outline:2px solid var(--blue);border-radius:50%;background:var(--blue)}

@media(max-width:1199px){.bus-page .waiting-scale .timeline-tick{font-size:14px}.timeline-label{font-size:12px}.bus-timeline .route-labels{font-size:12px}}
@media(max-width:640px){.waiting-timeline{margin-left:5%;margin-right:5%}.bus-timeline .waiting-timeline{margin-left:5%;width:calc(90% * var(--wait-share))}.bus-timeline .route-progress{left:5%;right:5%}.bus-page .waiting-scale .timeline-tick{font-size:12px}.timeline-label{font-size:11px}.timeline-tick:first-child .timeline-label{transform:none}.timeline-tick:last-child .timeline-label{transform:translateX(-100%)}.timeline-marker{font-size:14px;min-width:52px;padding-left:8px;padding-right:8px}.bus-timeline .route-labels{font-size:11px;right:5%}}
.bus-workspace .interval-panel{border:1px solid var(--line);border-radius:16px;background:white;text-align:center;margin:16px 0 0;padding:18px}.bus-workspace .scene-wait{margin:0;min-height:0;font-size:24px;font-weight:900}.bus-workspace .interval-panel>.small-label{font-size:17px;margin:8px 0 0;color:#365a7e}.bus-workspace .lesson-footer{margin-top:20px}.bus-workspace .lesson-footer .navigation-button{font-size:17px;background:transparent;color:var(--blue);border-color:var(--line)}
.bus-page dialog form button{width:100%;font-size:20px;background:var(--blue);color:white}.bus-page .finish-dialog section>a{display:block;background:var(--blue);color:white;border-radius:12px;text-decoration:none;padding:12px;margin:12px 0}.bus-page .finish-dialog section>button{width:100%;font-size:20px}.bus-page .finish-dialog section{padding:0}.bus-page .finish-dialog section>a+button{margin-left:0}
.practice-units{width:100%;padding-top:16px;border-top:1px solid var(--line)}.practice-units>strong{display:block;font-size:17px;margin-bottom:8px}.practice-units>div{display:flex;gap:10px}.practice-units button{flex:1;min-width:0;font-size:17px;font-weight:850;padding:8px}.practice-units button[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue)}
@media(max-width:1199px){.bus-workspace .lesson-heading{flex-wrap:wrap}.bus-title{flex-basis:100%}.bus-title p{font-size:18px}.bus-guide .guide-portrait{height:210px}.bus-setup{padding:10px}.bus-setup label{font-size:15px}.bus-setup input,.bus-setup select{font-size:16px;padding:6px}.bus-page .action-rail{padding:30px 12px}.time-overview{grid-template-columns:minmax(0,1fr) minmax(0,260px) minmax(0,1fr);gap:8px;margin-top:-40px}.start-display,.time-overview .arrival-label{font-size:15px;margin-bottom:30px}.bus-workspace .scene-wait{font-size:21px}.bus-workspace .interval-panel>.small-label{font-size:15px}}
@media(max-width:900px){.bus-page .action-rail{padding:12px;gap:0}.bus-page .action-rail button{font-size:17px;padding:4px 8px}.bus-guide .guide-portrait{height:170px}.bus-setup .activity-setup{grid-template-columns:1fr}.bus-setup label{grid-column:auto!important}.practice-units>div{flex-direction:column}.time-overview{grid-template-columns:minmax(0,1fr) minmax(0,200px) minmax(0,1fr);margin-top:-24px}.start-display,.time-overview .arrival-label{font-size:13px;margin-bottom:30px}.bus-title p{font-size:17px}.bus-picture{border-radius:16px}}
@media(max-width:640px){.bus-page .site-header{padding:4px 16px}.bus-page .utility-nav img{width:26px;height:26px}.bus-guide{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;padding:12px 16px}.bus-guide .guide-portrait{height:85px;width:58px;grid-column:1;grid-row:1;object-position:center}.bus-guide .guide-bubble{grid-column:2;grid-row:1;font-size:14px;min-height:0;padding:10px}.bus-guide .bus-setup,.bus-guide .practice-units{grid-column:1/-1;grid-row:2}.bus-guide .bus-setup{padding:8px 12px}.bus-setup .activity-setup{grid-template-columns:1.2fr .7fr 1fr;gap:8px}.bus-setup label:first-child{grid-column:auto}.bus-setup input,.bus-setup select{font-size:15px;min-height:42px}.practice-units{padding-top:8px}.practice-units>div{flex-direction:row}.practice-units>strong{font-size:15px}.practice-units button{min-height:42px}.bus-workspace .mode-tabs{flex:1;min-width:0}.bus-workspace .lesson-heading{gap:12px;margin-bottom:18px}.bus-title p{font-size:16px;margin-top:8px}.bus-picture{aspect-ratio:3/1}.time-overview{grid-template-columns:minmax(0,1fr) minmax(0,160px) minmax(0,1fr);gap:4px;margin-top:-18px}.time-overview #clock{width:160px}.start-display,.time-overview .arrival-label{font-size:12px;gap:5px;margin-bottom:28px}.start-display strong,.time-overview .arrival-label strong{font-size:20px}.now-panel .digital-time,.now-panel strong{font-size:24px}.now-panel>span{font-size:13px}.bus-timeline .route-labels{font-size:11px}.bus-workspace .interval-panel #bus-status{font-size:16px}.bus-workspace .scene-wait{font-size:19px}.bus-workspace .interval-panel{padding:14px}.bus-workspace .interval-panel>.small-label{font-size:14px}.bus-workspace .lesson-footer{justify-content:center;gap:8px}.bus-page .action-rail{padding:8px}.bus-page .action-rail button{flex-direction:column;font-size:14px;gap:4px;padding:0 4px}.bus-workspace .lesson-footer .navigation-button{font-size:15px}}


/* Only the analog face overlaps the illustration; hidden-clock readouts stay below it. */
.bus-page .time-overview:has(#clock[hidden],#practice-clock[hidden]){margin-top:24px;align-items:center}
.bus-page .time-overview:has(#clock[hidden],#practice-clock[hidden]) .start-display,.bus-page .time-overview:has(#clock[hidden],#practice-clock[hidden]) .arrival-label{margin-bottom:0}