/* ==========================================================================
   story.css: the Charge page's scenes (tools/charge_story.py), loaded on /charge/ only, after alive.css.
   A scene's resting state is its finished picture. story.js adds html.st-on and, as a scene arrives, data-on on it; the rules marked "start" put
   a scene back to where it began for as long as it has no data-on, and its transitions walk it to the finished one. No script, or reduced motion,
   and nothing is ever put back: the scenes stay finished. Opacity and transform only, on the scene's own parts (a scene is one glass panel and
   holds no other glass). The type is the phone's four sizes: 12, 13, 15, 17px.
   ========================================================================== */

.sc{ margin:0 0 var(--gap,14px); padding:clamp(20px,3.8vw,34px); --ease-out:cubic-bezier(.2,.75,.3,1) }
.st-k{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--amber,#F6A22B) }
.sc h2{ margin:0 0 .45em; font-family:var(--display); font-weight:900; font-size:clamp(1.4rem,4.8vw,2.1rem); line-height:1.1; letter-spacing:-.01em; text-wrap:balance }
.st-p{ margin:0 0 1.3em; max-width:40rem; font-size:17px; line-height:1.55; color:var(--ink-2) }
.st-note{ margin:1.3em 0 0; font-size:13px; line-height:1.5; color:var(--ink-3) }
.st-nums{ list-style:none; display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:16px clamp(12px,3vw,24px); margin:1.5em 0 0; padding:1.1em 0 0;
          border-top:1px solid var(--hairline,rgba(229,231,235,.1)) }
.st-nums b{ display:block; font-family:var(--display); font-weight:900; font-size:clamp(1.55rem,6vw,2.5rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums }
.st-nums li > span{ display:block; margin-top:.5em; font-size:13px; line-height:1.4; color:var(--ink-3) }

/* ---------- the stage: the car's own instruments ---------- */
.st-stage{ padding-top:clamp(18px,3vw,28px) }
.st-cluster{ display:grid; gap:clamp(20px,3.4vw,38px); grid-template-columns:minmax(0,1fr); align-items:center }
@media (min-width:760px){ .st-cluster{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.st-gauge{ margin:0; justify-self:center; width:min(100%,400px) }
.st-dial{ position:relative }
.st-dial svg{ display:block; width:100%; height:auto; overflow:visible }
.st-ticks line{ stroke:rgba(240,242,245,.26); stroke-width:1.5; stroke-linecap:round }
.st-ticks .maj{ stroke:rgba(240,242,245,.6); stroke-width:2 }
.st-track{ fill:none; stroke:rgba(240,242,245,.1); stroke-width:12; stroke-linecap:round }
.st-arc{ fill:none; stroke:url(#st-arcg); stroke-width:12; stroke-linecap:round }
.st-needle{ fill:#F0F2F5; transform-origin:120px 116px }
.st-hub{ fill:#0b0e16; stroke:#F0F2F5; stroke-width:2 }
.st-read{ position:absolute; left:50%; bottom:1%; width:62%; transform:translateX(-50%); text-align:center; line-height:1 }
.st-read b{ display:block; font-family:var(--display); font-weight:900; font-size:clamp(2.2rem,9.5vw,3.2rem); font-variant-numeric:tabular-nums; color:var(--ink) }
.st-read small{ margin-left:.08em; font-size:.5em; color:var(--ink-2) }
.st-read > span{ display:block; margin:.55em auto 0; font-size:12px; font-weight:700; line-height:1.35; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.st-gauge .st-cap{ margin:10px 0 0; text-align:center }
.st-lamps{ list-style:none; display:grid; gap:12px; margin:0; padding:0 }
.st-lamp{ --c:87,199,245; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; padding:13px 22px 13px 14px;
          background:rgba(229,231,235,.05); box-shadow:inset 3px 0 0 rgba(var(--c),.8);
          clip-path:polygon(0 0,100% 0,calc(100% - var(--cut,10px)) 100%,0 100%) }
.st-lamp--amber{ --c:246,162,43 }
.st-lamp-i{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1.5px solid rgb(var(--c)); color:rgb(var(--c));
            box-shadow:0 0 20px rgba(var(--c),.4), inset 0 0 12px rgba(var(--c),.22) }
.st-lamp-i svg{ display:block; width:24px; height:24px }
.st-lk{ display:block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3) }
.st-lamp-t b{ display:block; margin-top:.3em; font-family:var(--display); font-weight:900; font-size:clamp(1.15rem,4.8vw,1.55rem); line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums }
.st-lamp-t small{ display:block; margin-top:.4em; font-size:13px; line-height:1.4; color:var(--ink-3) }

/* ---------- the way around the page ---------- */
.st-jump{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 var(--gap,14px) }
.st-jump a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px 0 12px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
            color:var(--ink-2) !important; text-decoration:none; border-bottom:0 !important; background:rgba(229,231,235,.06); box-shadow:inset 0 -1px 0 rgba(229,231,235,.2);
            clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out) }
.st-jump a:hover{ color:var(--ink) !important; background:rgba(229,231,235,.1); box-shadow:inset 3px 0 0 var(--ignition,#F4511E), inset 0 -1px 0 rgba(229,231,235,.2) }
.st-jump a:focus-visible{ outline:2px solid var(--speed-blue,#57C7F5); outline-offset:2px }
html{ scroll-padding-top:calc(var(--navh,60px) + 12px) }

/* ---------- the places ---------- */
.st-rows{ list-style:none; display:grid; gap:14px; margin:0; padding:0 }
.st-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px; align-items:baseline }
.st-rn{ font-size:15px; font-weight:700; line-height:1.3; color:var(--ink) }
.st-rn small{ margin-left:.5em; font-size:13px; font-weight:400; color:var(--ink-3) }
.st-rv{ font-size:13px; text-align:right; white-space:nowrap; color:var(--ink-2) }
.st-rv b{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums }
.st-rv small{ margin-left:.5em; font-size:13px; color:var(--ink-3) }
.st-rbar{ grid-column:1 / -1; order:3; position:relative; height:8px; background:rgba(229,231,235,.08); overflow:hidden }
.st-rbar i{ position:absolute; inset:0 auto 0 0; width:calc(var(--w) * 100%); transform-origin:left;
            background:linear-gradient(90deg,var(--ignition,#F4511E),#FF7A45); transition:transform .9s var(--ease-out); transition-delay:calc(var(--i,0) * 70ms + .15s) }
.st-row--priv .st-rbar i{ background:var(--speed-blue,#57C7F5) }

/* ---------- the curve ---------- */
.st-curvebox{ display:grid; gap:26px; grid-template-columns:minmax(0,1fr) }
@media (min-width:860px){ .st-curvebox{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start; gap:40px } }
.st-plot{ margin:0 }
.st-readout{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.35em; min-height:2.6em; font-size:15px; color:var(--ink-2) }
.st-readout b{ font-family:var(--display); font-weight:900; font-size:clamp(1.9rem,7.4vw,2.7rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums }
.st-readout small{ font-size:13px; color:var(--ink-3) }
.st-plotwrap{ position:relative; margin:8px 0 0 34px; padding:0 0 24px }
.st-plotwrap svg{ display:block; width:100%; height:auto; overflow:visible }
.st-grid{ fill:none; stroke:rgba(229,231,235,.1); stroke-width:1 }
.st-axis{ fill:none; stroke:rgba(229,231,235,.32); stroke-width:1.5 }
.st-area{ fill:url(#st-area); stroke:none }
.st-line{ fill:none; stroke:var(--ignition,#F4511E); stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.st-dot{ fill:#fff; stroke:var(--ignition,#F4511E); stroke-width:3 }
.st-ylab, .st-xlab{ position:absolute; pointer-events:none }
.st-ylab{ left:-34px; top:0; bottom:24px; width:28px }
.st-xlab{ left:0; right:0; bottom:0; height:20px }
.st-ylab span, .st-xlab span{ position:absolute; font-size:12px; line-height:1; color:var(--ink-3) }
.st-ylab span{ right:0; transform:translateY(50%); text-align:right }
.st-xlab span{ bottom:0; transform:translateX(-50%) }
.st-cap{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ink-3) }
.st-sh{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2) }
.st-steps{ list-style:none; display:grid; gap:12px; margin:0; padding:0 }
.st-steps li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:baseline }
.st-sl{ font-size:15px; color:var(--ink-2) }
.st-sv{ font-size:13px; color:var(--ink-3); white-space:nowrap }
.st-sv b{ font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums }
.st-sbar{ grid-column:1 / -1; order:3; position:relative; height:10px; background:rgba(229,231,235,.08); overflow:hidden }
.st-sbar i{ position:absolute; inset:0 auto 0 0; width:calc(var(--w) * 100%); transform-origin:left;
            background:linear-gradient(90deg,var(--speed-blue,#57C7F5),var(--ignition,#F4511E)); transition:transform .9s var(--ease-out); transition-delay:calc(var(--i,0) * 110ms + .5s) }

/* ---------- the price ---------- */
.st-bars{ display:grid; gap:16px; margin:0 0 4px }
.st-bar{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; align-items:baseline }
.st-bl{ font-size:15px; font-weight:700; color:var(--ink) }
.st-bl em{ margin-left:.5em; font-style:normal }
.st-bv{ font-family:var(--display); font-weight:900; font-size:clamp(1.35rem,5.2vw,1.9rem); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums }
.st-btrack{ grid-column:1 / -1; order:3; position:relative; height:20px; background:rgba(229,231,235,.07); overflow:hidden;
            clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%) }
.st-btrack i{ position:absolute; inset:0 auto 0 0; width:calc(var(--w) * 100%); transform-origin:left; background:rgba(229,231,235,.42);
              transition:transform 1.1s var(--ease-out) .25s }
.st-hot .st-btrack i{ background:linear-gradient(90deg,var(--ignition,#F4511E),#FF7A45); transition-delay:.55s }
.st-hot .st-bv{ color:var(--ignition,#F4511E) }
.st-loss{ position:relative; display:block; height:8px; margin-top:12px; background:rgba(229,231,235,.1) }
.st-loss i{ position:absolute; inset:0 0 0 auto; width:calc(var(--w) * 100%); background:var(--amber,#F6A22B); transform-origin:right;
            transition:transform .8s var(--ease-out) .9s }

/* ---------- the week ---------- */
.st-hours{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; max-width:36rem; margin:0 }
.st-hours i{ position:relative; display:block; aspect-ratio:1; background:rgba(229,231,235,.08); overflow:hidden }
.st-hours i::after{ content:""; position:absolute; inset:0; background:var(--ignition,#F4511E); transform-origin:left; transform:scaleX(var(--p,0));
                    transition:transform .45s var(--ease-out); transition-delay:calc(var(--n,0) * 85ms + .25s) }

@media (min-width:900px){
  .st-week{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:clamp(32px,5vw,72px); align-items:center }
  .st-week > .st-k, .st-week > h2, .st-week > .st-p{ grid-column:1 / -1 }
  .st-week .st-nums{ grid-template-columns:minmax(0,1fr); margin:0; padding:0; border-top:0; gap:22px }
}

/* a line under the header that fills as the page is read (story.js makes it) */
.st-prog{ position:fixed; top:var(--navh,60px); left:0; right:0; height:3px; z-index:58; pointer-events:none; background:rgba(229,231,235,.06) }
.st-prog i{ display:block; height:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--ignition,#F4511E),var(--speed-blue,#57C7F5)) }

/* ---------- the start state: only with the script, only until a scene arrives ---------- */
@media (prefers-reduced-motion:no-preference){
  html.st-on .sc:not([data-on]) .st-lamp-i{ color:rgba(229,231,235,.3); border-color:rgba(229,231,235,.22); box-shadow:none; transition:none }
  html.st-on .sc:not([data-on]) .st-lamp-t{ opacity:0; transform:translate3d(0,10px,0); transition:none }
  html.st-on .sc:not([data-on]) .st-lamp{ box-shadow:inset 3px 0 0 rgba(229,231,235,.14); transition:none }
  html.st-on .sc:not([data-on]) :is(.st-rbar,.st-sbar,.st-btrack) i{ transform:scaleX(0); transition:none }
  html.st-on .sc:not([data-on]) .st-loss i{ transform:scaleX(0); transition:none }
  html.st-on .sc:not([data-on]) .st-hours i::after{ transform:scaleX(0); transition:none }

  /* the three lamps light one after the other, and each one's words arrive with it */
  .st-lamp, .st-lamp-i{ transition:color .5s ease var(--d,0s), border-color .5s ease var(--d,0s), box-shadow .6s ease var(--d,0s) }
  .st-lamp-t{ transition:opacity .6s var(--ease-out) var(--d,0s), transform .6s var(--ease-out) var(--d,0s) }
  .st-lamp:nth-child(1){ --d:.2s }
  .st-lamp:nth-child(2){ --d:1.3s }
  .st-lamp:nth-child(3){ --d:2.4s }
  [data-on] .st-lamp:nth-child(3) .st-lamp-i{ animation:st-breathe 2.6s ease-in-out 4.6s infinite alternate }
  @keyframes st-breathe{ from{ box-shadow:0 0 14px rgba(var(--c),.25), inset 0 0 10px rgba(var(--c),.16) } to{ box-shadow:0 0 28px rgba(var(--c),.55), inset 0 0 14px rgba(var(--c),.3) } }
}