/* Narrative component. Layers: canvas 0, copy 1, phone/status 2, controls 3. Existing page tokens are preserved. */
.parking-story { --story-bg:#10212e; --story-ink:#f1f6f5; --story-muted:#b4c8cc; --story-accent:#72e3c6; color:var(--story-ink); background:var(--story-bg); font-family:Onest,Arial,sans-serif; isolation:isolate; }
.parking-story *, .parking-story *::before, .parking-story *::after { box-sizing:border-box; }
.parking-story button, .parking-story a { -webkit-tap-highlight-color:transparent; }
.parking-story button { font:600 13px Onest,Arial,sans-serif; cursor:pointer; }
.parking-story button:focus-visible, .parking-story a:focus-visible, .parking-story summary:focus-visible, .story-stage:focus-visible { outline:3px solid var(--story-accent); outline-offset:4px; }
.parking-story button:disabled { opacity:.45; cursor:default; }
.parking-story-intro { max-width:1400px; margin:auto; padding:80px 48px 48px; }
.parking-story-intro h2 { font-size:clamp(36px,5vw,70px); line-height:1.03; letter-spacing:-.055em; font-weight:600; margin:0 0 24px; color:var(--story-ink); }
.parking-story-intro p { font-size:18px; max-width:470px; color:var(--story-muted); line-height:1.5; margin:0 0 24px; }
.story-start { display:inline-flex; align-items:center; gap:30px; min-height:48px; padding:0 23px; border:0; border-radius:6px; background:var(--story-accent); color:#102b2c; }
.story-start:hover { background:#a1efdb; }
.story-start span { font-size:23px; }
.story-scroll { position:relative; }
.story-stage { position:sticky; top:72px; min-height:620px; height:calc(100svh - 72px); max-height:1100px; overflow:hidden; background:var(--story-bg); scroll-margin-top:76px; }
.story-canvas { position:absolute; top:0; left:25%; width:75%; height:100%; display:block; mask-image:linear-gradient(to right,transparent,#000 7%); }
.story-copy { position:absolute; z-index:1; top:44px; left:max(40px,calc((100vw - 1320px)/2)); width:360px; pointer-events:none; }
.story-phase { display:block; color:var(--story-accent); font-size:13px; margin-bottom:14px; }
.story-copy h3 { font-size:clamp(34px,3.6vw,54px); font-weight:600; letter-spacing:-.055em; line-height:1.06; margin:0 0 18px; color:var(--story-ink); text-wrap:balance; }
.story-description { font-size:15px; line-height:1.55; color:var(--story-muted); max-width:315px; margin:0; }
.story-car-id { margin-top:23px; display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-size:13px; }
.story-car-id b { letter-spacing:.035em; color:var(--story-ink); }
.story-route-label { font-size:11px; color:var(--story-muted); }
.story-route-color { width:14px; height:14px; border-radius:50%; background:#667b87; border:2px solid #92a5af; }
.story-stage[data-colored="true"] .story-route-color { background:var(--story-accent); border-color:var(--story-accent); }
.story-counter { position:absolute; z-index:2; top:42px; right:42px; text-align:right; font-variant-numeric:tabular-nums; }
.story-counter > span { display:block; font-size:11px; color:var(--story-muted); margin-bottom:1px; }
.story-counter > strong { font-size:40px; line-height:1.1; font-weight:500; color:var(--story-ink); }
.story-counter > small { margin-left:6px; font-size:12px; color:var(--story-muted); }
.story-counter-delta { display:block; font-size:14px; color:var(--story-accent); margin-top:5px; }
.story-phone { position:absolute; z-index:2; right:40px; bottom:140px; width:234px; min-height:325px; padding:19px 15px 15px; border:5px solid #60757e; border-radius:30px; color:#183335; background:#eef5f1; box-shadow:0 24px 64px #071a2866; transition:opacity .25s,transform .4s; }
.story-phone[hidden], .story-operator[hidden], .story-counter-delta[hidden] { display:none; }
.story-phone-brand { display:flex; justify-content:space-between; align-items:center; padding-bottom:19px; border-top:3px solid #183335; padding-top:13px; }
.story-phone-brand b { font-size:15px; letter-spacing:-.04em; }
.story-phone-brand span { font-size:10px; color:#536d68; }
.story-phone-content > span { display:block; font-size:11px; color:#526f68; margin-bottom:7px; }
.story-phone-content h4 { color:#173c37; font-size:28px; letter-spacing:-.045em; font-weight:600; margin:0 0 12px; line-height:1.08; }
.story-phone-content p { font-size:12px; line-height:1.45; margin:8px 0; color:#365a54; }
.story-phone-content strong { color:#153932; }
.story-phone-content dl { margin:12px 0; display:grid; grid-template-columns:1fr auto; gap:7px; font-size:11px; }
.story-phone-content dt { color:#526f68; }.story-phone-content dd { margin:0; font-weight:600; }
.story-phone-action { width:100%; min-height:44px; margin-top:13px; padding:10px 7px; background:#16684f; color:#f3faf7; border:0; border-radius:6px; font-size:12px!important; }
.story-phone-action:hover { background:#0d4d3a; }
.story-phone-safety { display:block; color:#526f68; font-size:9px; line-height:1.4; margin-top:9px; text-align:center; }
.story-operator { position:absolute; z-index:2; left:40px; bottom:170px; width:305px; padding:18px 20px; background:#1b3947; border-left:3px solid var(--story-accent); border-radius:0 6px 6px 0; }
.story-operator span { display:block; font-size:11px; color:var(--story-accent); margin-bottom:7px; }
.story-operator strong { display:block; font-size:17px; color:var(--story-ink); }
.story-operator p { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--story-muted); }
.story-controls { position:absolute; z-index:3; bottom:53px; left:40px; right:40px; display:flex; gap:8px; align-items:center; }
.story-controls button { border:1px solid #68818d; background:#183440; color:#f1f6f5; border-radius:6px; min-height:44px; padding:0 17px; }
.story-controls button:hover:not(:disabled) { background:#285260; }
.story-controls .story-play { min-width:215px; background:var(--story-accent); color:#102b2c; border-color:var(--story-accent); }
.story-controls .story-play:hover { background:#a1efdb; }
.story-prev,.story-next { font-size:20px!important; min-width:44px; }
.story-count { margin-left:auto; font-size:12px; color:var(--story-muted); font-variant-numeric:tabular-nums; }
.story-caption { position:absolute; z-index:1; bottom:116px; left:40px; color:var(--story-accent); font-size:12px; max-width:500px; }
.story-disclaimer { position:absolute; z-index:3; bottom:17px; left:40px; right:40px; margin:0; font-size:10px; line-height:1.35; color:var(--story-muted); }
.story-disclaimer a { color:#e1f5ee; text-decoration:underline; text-underline-offset:3px; }
.story-chapters { position:relative; margin-top:calc(-100svh + 72px); pointer-events:none; }
.story-chapters article { min-height:95svh; pointer-events:none; }
.story-chapters h3,.story-chapters p { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.story-scope { max-width:1400px; margin:auto; padding:24px 48px 42px; scroll-margin-top:100px; }
.story-scope summary { font-size:14px; min-height:44px; cursor:pointer; color:var(--story-muted); }
.story-scope p { font-size:14px; line-height:1.6; max-width:850px; color:var(--story-muted); }
.story-loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; color:var(--story-muted); }
.story-loading[hidden] { display:none; }
.story-map { position:relative; height:112px; background:#dce9e2; margin:10px 0; border-radius:4px; overflow:hidden; }
.story-map canvas { width:100%; height:100%; }
.story-stage[data-step="8"] .story-caption { font-size:18px; }
.story-display { position:absolute;z-index:2;right:40px;bottom:170px;width:310px;padding:20px;background:#081b24;border:2px solid #547581;border-radius:8px;box-shadow:0 16px 48px #07172266;color:#eef8f2; }
.story-display[hidden]{display:none}.story-display>span{font-size:11px;color:#b4c8cc;display:block;margin-bottom:12px}.story-display>strong{font-size:24px;letter-spacing:.02em;display:block;color:#72e3c6}.story-display-route{font-size:12px;color:#72e3c6;display:block;margin:5px 0 17px}.story-display-total{display:flex;align-items:center;justify-content:space-between;border-block:1px solid #355360;padding:10px 0;margin-bottom:13px}.story-display-total span{font-size:12px}.story-display-total b{font-size:29px;font-weight:500}.story-display-directions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 12px}.story-display-directions>span{font-size:12px;display:flex;gap:5px;align-items:center}.story-display-directions>span>b{font-size:18px;color:#72e3c6}.story-display-directions strong{margin-left:auto;font-size:16px;color:#f3faf7}.story-display small{font-size:9px;color:#b4c8cc;display:block;line-height:1.4;margin-top:13px}
@media (min-width:981px) and (max-width:1200px) { .story-copy { width:300px; left:28px; }.story-phone{right:24px;width:212px}.story-copy h3{font-size:39px}.story-description{font-size:13px;max-width:270px} }
@media (max-width:980px) {
  .story-display{right:22px;bottom:135px;width:260px;padding:14px}.story-display>strong{font-size:22px}
  .story-canvas { left:0; top:145px; width:100%; height:calc(100% - 220px); }
  .parking-story-intro { padding:48px 24px 32px; }.parking-story-intro h2{font-size:42px}.parking-story-intro p{font-size:16px}
  .story-stage { top:76px;height:calc(100svh - 76px);min-height:640px; }
  .story-chapters { margin-top:calc(-100svh + 76px); }
  .story-copy{top:22px;left:22px;width:calc(100% - 120px)}.story-copy h3{font-size:30px;max-width:360px;margin-bottom:10px}.story-phase{font-size:11px;margin-bottom:8px}.story-description{font-size:12px;max-width:390px}
  .story-counter{top:22px;right:22px}.story-counter>strong{font-size:31px}.story-counter>span{font-size:9px}.story-car-id{margin-top:12px;font-size:12px}.story-route-label{font-size:10px}
  .story-phone{right:22px;bottom:133px;width:195px;min-height:270px;padding:12px;border-width:4px;border-radius:25px}.story-phone-brand{padding-top:9px;padding-bottom:13px}.story-phone-content h4{font-size:24px}.story-phone-content p{font-size:11px}.story-phone-content dl{font-size:10px}.story-phone-safety{font-size:9px}
  .story-caption{left:22px;bottom:110px;max-width:calc(100% - 44px);font-size:11px}.story-controls{left:22px;right:22px;bottom:54px}.story-disclaimer{left:22px;right:22px;bottom:14px;font-size:9px}
  .story-operator{left:22px;bottom:165px;width:210px;padding:12px}.story-operator strong{font-size:14px}.story-operator p{font-size:11px}.story-scope{padding:24px}
}
@media (max-width:560px) {
  .story-display{right:18px;bottom:142px;width:165px;padding:12px}.story-display>span{font-size:9px;margin-bottom:7px}.story-display>strong{font-size:17px}.story-display-route{font-size:9px;margin-bottom:8px}.story-display-total{padding:5px 0;margin-bottom:8px}.story-display-total b{font-size:24px}.story-display-total span{font-size:10px;max-width:80px}.story-display-directions{grid-template-columns:repeat(2,1fr);gap:5px 10px}.story-display-directions>span{font-size:10px}.story-display-directions strong{font-size:14px}.story-display small{font-size:8px;margin-top:8px}
  .story-stage .story-canvas{width:calc(100% - 135px);top:175px;height:calc(100% - 305px)}
  .story-canvas { left:0;top:185px;width:100%;height:calc(100% - 300px); }
  .story-stage:not([data-step="1"]):not([data-step="2"]):not([data-step="3"]) .story-canvas { width:calc(100% - 135px);top:175px;height:calc(100% - 305px); }
  .story-stage{min-height:0}.story-chapters{margin-top:calc(-100svh + 76px)}.story-chapters article{min-height:100svh}
  .story-copy{left:18px;top:21px;width:calc(100% - 110px)}.story-copy h3{font-size:26px}.story-description{font-size:11px;line-height:1.5}.story-car-id{gap:6px}.story-car-id .story-route-label{width:100%;padding-left:20px}
  .story-counter{right:18px}.story-counter>span{max-width:62px}.story-counter>strong{font-size:30px}.story-counter>small{font-size:10px}.story-counter-delta{font-size:11px}
  .story-phone{right:18px;bottom:143px;width:165px;min-height:238px;padding:11px 10px;border-radius:23px}.story-phone-brand{padding-bottom:10px}.story-phone-brand b{font-size:13px}.story-phone-content h4{font-size:23px}.story-phone-content dl{margin:8px 0;gap:5px}.story-phone-content>span{font-size:10px}.story-phone-content p{font-size:10px}.story-phone-action{font-size:11px!important;margin-top:8px;padding:8px 4px}.story-phone-safety{font-size:8px}.story-map{height:80px}
  .story-operator{left:18px;bottom:192px;width:145px;padding:11px}.story-operator strong{font-size:12px}.story-operator p{font-size:10px}
  .story-controls{left:18px;right:18px;gap:6px}.story-controls .story-play{min-width:0;flex:1;padding:0 7px;font-size:11px}.story-controls button{padding:0 12px}.story-count{font-size:10px;margin-left:4px}.story-caption{left:18px;right:18px;bottom:115px}.story-disclaimer{left:18px;right:18px}
}
@media (max-height:740px) and (max-width:560px) { .story-phone{min-height:0;padding:9px;bottom:130px}.story-phone-brand{padding-top:5px;padding-bottom:7px}.story-phone-content h4{font-size:19px;margin-bottom:7px}.story-phone-content p{margin:4px 0;font-size:9px}.story-phone-content dl{font-size:9px}.story-phone-safety{font-size:7px;margin-top:5px}.story-phone-action{margin-top:5px}.story-copy h3{font-size:24px}.story-map{height:65px}.story-operator{bottom:165px}.story-operator p{font-size:9px} }
@media (max-height:740px) and (max-width:560px) {
  .story-display{padding:10px;line-height:1.3}.story-display>span{margin-bottom:6px;line-height:1.3}.story-display>strong{font-size:16px;line-height:1.3}.story-display-route{font-size:8px;line-height:1.3;margin:4px 0}.story-display-total{padding:4px 0;margin-bottom:6px}.story-display-total b{font-size:22px;line-height:1.3}.story-display-directions{gap:3px 10px}.story-display-directions>span>b{font-size:14px;line-height:1.3}.story-display-directions strong{font-size:12px;line-height:1.3}.story-display small{font-size:8px;line-height:1.3;margin-top:6px}
  .story-stage .story-canvas{top:210px;height:calc(100% - 340px)}
}
@media (max-height:550px) and (min-width:561px) { .story-stage{position:relative;top:0;min-height:560px}.story-chapters{display:none}.story-copy h3{font-size:27px}.story-phone{width:180px;bottom:130px}.story-copy{width:330px}.story-canvas{left:30%;width:70%;top:70px;height:400px} }
@media (prefers-reduced-motion:reduce) { .parking-story * { transition:none!important;scroll-behavior:auto!important; }.story-chapters article{min-height:75svh} }
.parking-story:not(.story-enhanced) .story-stage { position:relative; }.parking-story:not(.story-enhanced) .story-chapters{margin-top:0;max-width:1000px;margin-inline:auto;padding:24px}.parking-story:not(.story-enhanced) .story-chapters article{min-height:0;margin-bottom:28px}.parking-story:not(.story-enhanced) .story-chapters h3,.parking-story:not(.story-enhanced) .story-chapters p { position:static;clip-path:none;width:auto;height:auto; }
.parking-story:not(.story-enhanced) .story-stage,.parking-story:not(.story-enhanced) .story-start { display:none; }
.parking-story:not(.story-enhanced) .story-chapters { display:block; }
.parking-story:not(.story-enhanced) .story-chapters h3 { color:var(--story-ink);font-size:24px; }
.parking-story:not(.story-enhanced) .story-chapters p { color:var(--story-muted);font-size:15px;line-height:1.6; }

/* Driver phone stays outside the main vehicle/route area on the right. */
.story-phone{left:40px;right:auto}
.story-operator{left:292px;width:230px}
@media (min-width:981px) and (max-width:1200px){.story-phone{left:28px}.story-operator{left:256px;width:210px}}
@media (min-width:981px){
  .story-stage .story-copy{top:24px}
  .story-stage .story-copy h3{font-size:32px;margin-bottom:12px}
  .story-stage .story-description{font-size:12px;line-height:1.45;max-width:340px}
  .story-stage .story-car-id{margin-top:12px}
}
@media (min-width:981px) and (max-height:900px){
  .story-phone{min-height:0;padding:12px;border-width:4px}
  .story-phone-brand{padding-top:8px;padding-bottom:10px}.story-phone-content h4{font-size:23px;margin-bottom:9px}.story-phone-content p{font-size:11px;margin:6px 0}.story-phone-content dl{margin:8px 0}.story-phone-action{margin-top:8px}.story-phone-safety{margin-top:6px}
}
@media (max-width:980px){.story-phone{left:22px;right:auto}.story-operator{left:auto;right:22px;width:210px}}
@media (max-width:560px){
  .story-phone{left:18px;right:auto}.story-operator{left:auto;right:18px;width:145px}
  .story-stage .story-canvas{left:auto;right:0;mask-image:linear-gradient(to right,transparent,#000 18%)}
}
@media (max-height:550px) and (min-width:561px){.story-stage{min-height:760px}}
@media (max-height:740px) and (max-width:560px){.story-stage{position:relative;top:0;min-height:760px}.story-chapters{display:none}}
@media (max-height:760px) and (min-width:981px){.story-stage{position:relative;top:0;min-height:800px}.story-chapters{display:none}}

/* The enlarged display shares the phone's left information area; they never appear together. */
.story-display{left:40px;right:auto}
@media (min-width:981px) and (max-width:1400px){.story-display{width:260px;padding:14px}}
@media (min-width:981px) and (max-width:1200px){.story-display{left:28px}}
@media (min-width:981px) and (max-height:900px){
  .story-display{bottom:140px;padding:12px}
  .story-display>span{margin-bottom:8px}.story-display-route{margin-bottom:10px}
  .story-display-total{padding:7px 0;margin-bottom:9px}.story-display-directions{row-gap:6px}.story-display small{margin-top:9px}
}
@media (max-width:980px){.story-display{left:22px;right:auto}}
@media (max-width:560px){.story-display{left:18px;right:auto}}
@media (min-width:981px) and (max-width:1200px) and (max-height:900px){.story-map{height:60px}}