/* Wake: a stylised product screen comes up once, when the light or the visitor reaches it.
   This file holds two things: the finished look of what wake_finish.py adds, and the wake itself.
   The figure carries the state: none (waiting), "waking", "done". html.wk-on is set before first
   paint, and only when motion is allowed; without it every screen is simply finished.
   Only opacity, transform (translate, scale), stroke-dashoffset and text change. Nothing moves the layout. */
[data-wake]{--wk-ease:cubic-bezier(.16,1,.3,1);--wk-draw:cubic-bezier(.4,.1,.2,1)}
[data-wake] .wk-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Home Rooftop: the finished screen (sample figures, all made up) ---------- */
.ar-scene.wk-rooftop .ar-dashboard{min-height:0}
.ar-scene.wk-rooftop .wk-rt{color:#191d1e;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ar-scene.wk-rooftop .wk-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #d3d3c6}
.ar-scene.wk-rooftop .wk-brand{display:flex;align-items:center;gap:7px;min-width:0}
.ar-scene.wk-rooftop .wk-brand>b{font-size:17px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:#191d1e}
.ar-scene.wk-rooftop .wk-brand>span{font-size:12px;line-height:1.2;color:#4f5b4e;margin:2px 0 0}
.ar-scene.wk-rooftop .wk-logo{display:block;width:57px!important;height:17px!important;max-width:none;margin:1px 0 0 -3px;flex:none}
.ar-scene.wk-rooftop .wk-now{margin-left:auto;font-size:12px;line-height:1.2;color:#4f5b4e;white-space:nowrap}
.ar-scene.wk-rooftop .ar-online{flex:none}
.ar-scene.wk-rooftop .ar-dash-title{margin-top:18px}
.ar-scene.wk-rooftop .ar-dash-title h3{color:#191d1e}
.ar-scene.wk-rooftop .wk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.ar-scene.wk-rooftop .wk-kpi{min-width:0;padding:11px 11px 10px;background:#fbf8f0;border:1px solid #dedccf;border-radius:4px}
.ar-scene.wk-rooftop .wk-kpi-l{display:block;font-size:12px;line-height:1.3;color:#4f5b4e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-scene.wk-rooftop .wk-kpi-n{display:block;margin-top:6px;font-size:27px;line-height:1.12;font-weight:600;letter-spacing:-.035em;color:#191d1e;white-space:nowrap}
.ar-scene.wk-rooftop .wk-kpi-s{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px;line-height:1.3;color:#4f5b4e;white-space:nowrap}
.ar-scene.wk-rooftop .wk-mark{display:block;flex:none;width:7px;height:7px;border-radius:50%;background:#3f6b46}
.ar-scene.wk-rooftop .wk-mark.wk-warn{background:#e16324}
.ar-scene.wk-rooftop .wk-mark.wk-up{width:0;height:0;border-radius:0;background:none;border:solid transparent;border-width:0 4px 7px;border-bottom-color:#3f6b46}
.ar-scene.wk-rooftop .wk-chart{margin-top:16px}
.ar-scene.wk-rooftop .wk-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;line-height:1.3}
.ar-scene.wk-rooftop .wk-chart-head>b{font-weight:600;color:#191d1e;white-space:nowrap}
.ar-scene.wk-rooftop .wk-legend{display:flex;gap:16px;font-size:12px;color:#4f5b4e;white-space:nowrap}
.ar-scene.wk-rooftop .wk-legend>span::before{content:"";display:inline-block;width:14px;height:0;border-top:2px solid #e16324;vertical-align:middle;margin:-2px 6px 0 0}
.ar-scene.wk-rooftop .wk-legend>span+span::before{border-top:2px dashed #7b8672}
.ar-scene.wk-rooftop .wk-plot{position:relative;margin-top:10px;aspect-ratio:600/190}
.ar-scene.wk-rooftop .wk-plot>svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.ar-scene.wk-rooftop .wk-grid{stroke:#a8b29e;stroke-opacity:.3;stroke-width:1}
.ar-scene.wk-rooftop .wk-base{stroke:#8d977f;stroke-width:1}
.ar-scene.wk-rooftop .wk-target{stroke:#7b8672;stroke-width:1.5;stroke-dasharray:5 7}
.ar-scene.wk-rooftop .wk-now-rule{stroke:#191d1e;stroke-opacity:.35;stroke-width:1;stroke-dasharray:2 4}
.ar-scene.wk-rooftop .wk-area{fill:#e16324;fill-opacity:.1}
.ar-scene.wk-rooftop .wk-trace{stroke:#e16324;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ar-scene.wk-rooftop .wk-dot{fill:#e16324;stroke:#f4f0e7;stroke-width:3;transform-box:fill-box;transform-origin:center}
.ar-scene.wk-rooftop .wk-tag{position:absolute;margin:9px 0 0 10px;padding:5px 7px;border-radius:3px;background:#191d1e;color:#f4f0e7;font-size:12px;line-height:1;white-space:nowrap}
.ar-scene.wk-rooftop .wk-tag>data{font-weight:600}
.ar-scene.wk-rooftop .wk-axis{position:relative;height:17px;margin-top:6px;font-size:12px;line-height:17px;color:#4f5b4e}
.ar-scene.wk-rooftop .wk-axis>span{position:absolute;top:0;transform:translateX(-50%)}
.ar-scene.wk-rooftop .wk-axis>.wk-first{left:0;transform:none}
.ar-scene.wk-rooftop .wk-axis>.wk-last{right:0;transform:none}
.ar-scene.wk-rooftop .wk-axis>.wk-today{color:#191d1e;font-weight:600}
.ar-scene.wk-rooftop .wk-depts{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid #d3d3c6;font-size:12px;line-height:1.3;color:#4f5b4e}
.ar-scene.wk-rooftop .wk-depts>span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ar-scene.wk-rooftop .wk-depts b{font-weight:600;color:#191d1e}
/* One caption, readable, and no pause control: this screen plays once and rests. */
body .ar-scene.wk-rooftop>figcaption>span{font-size:12px!important;line-height:1.4;opacity:1}
body .ar-scene.wk-rooftop>figcaption>.ar-pause{visibility:hidden}
/* The sleeping glass. Out of the way unless the screen is waiting. */
.wk-glass{position:absolute;inset:0;z-index:4;border-radius:5px;background:linear-gradient(180deg,#1b2022 0,#0f1314 100%);box-shadow:inset 0 1px 0 #f5f2ec1f;opacity:0;visibility:hidden;pointer-events:none}
.wk-glass::after{content:"";position:absolute;left:50%;bottom:14px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#e16324;opacity:.7}
@container (max-width:600px){
 .ar-scene.wk-rooftop .wk-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .ar-scene.wk-rooftop .wk-kpi-n{font-size:25px}
 .ar-scene.wk-rooftop .wk-now>span{display:none}
 .ar-scene.wk-rooftop .wk-depts{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
 .ar-scene.wk-rooftop .wk-trace{stroke-width:5}
 .ar-scene.wk-rooftop .wk-dot{r:9;stroke-width:5}
 .ar-scene.wk-rooftop .wk-target{stroke-width:2.5}
 .ar-scene.wk-rooftop .wk-now-rule,.ar-scene.wk-rooftop .wk-grid,.ar-scene.wk-rooftop .wk-base{stroke-width:2}
}

@container (max-width:340px){
 .ar-scene.wk-rooftop .wk-tag{margin-left:7px;padding:4px 5px}
 .ar-scene.wk-rooftop .wk-now,.ar-scene.wk-rooftop .wk-legend>span:first-child{display:none}
 .ar-scene.wk-rooftop .ar-online{margin-left:auto}
 .ar-scene.wk-rooftop .wk-depts{grid-template-columns:minmax(0,1fr)}
}

/* ---------- The other renditions: figures where there were none ---------- */
[data-wake] .ra-department-grid>div{position:relative}
[data-wake] .ra-department-grid .wk-fig{position:absolute;top:16px;right:18px;font-size:16px;line-height:1.3;font-weight:600;color:#283b2c}
@container (max-width:300px){[data-wake] .ra-department-grid .wk-fig{position:static;display:block;margin-top:3px}}
[data-wake] .ra-legend>.wk-fig{margin-left:auto;font-size:12px;line-height:1.1;font-weight:500;color:#33443a;white-space:nowrap}
[data-wake] .ra-legend>.wk-fig>data{font-weight:600}
[data-wake] .ra-bar>.wk-fig{font-size:12px;line-height:1.25;color:#24312c}
[data-wake] .ra-line>b>.wk-count{display:inline-block;min-width:2.1em;font-size:12px;font-weight:600}
[data-wake] .ra-lane>span>.wk-count{margin-left:5px;font-size:12px;line-height:1;font-weight:600;color:#223138}
[data-wake] .ra-lane article small{font-size:12px!important;line-height:1.4}
/* Shotgun: the car is back, so the road is full and the key is home. */
[data-wake] .wk-road,[data-wake] .wk-car{animation:none!important}
[data-wake] .wk-road{transform:scaleX(1)}
[data-wake] .wk-car{transform:translateX(100%)}
[data-wake] .ap-day-stops,[data-wake] .ap-day-stops>b,[data-wake] .ap-vehicle-list>article div>span{font-size:12px!important;line-height:1.35}
[data-wake] .ap-vehicle-list>article>i{display:inline-block;min-width:44px;text-align:center;font-size:12px!important;line-height:1.35}
[data-wake] .ap-day-stops>.wk-swap{display:inline-block;min-width:8.4em;text-align:right}
/* Steady: one highlighted day on the forecast. */
[data-wake] .wk-plotbox{position:relative;margin-top:15px;color:#237968}
[data-wake] .wk-plotbox>svg{display:block;width:100%;height:auto;aspect-ratio:420/95;margin:0;overflow:visible}
[data-wake] .wk-point{fill:#237968;stroke:#edf5ef;stroke-width:2.5;transform-box:fill-box;transform-origin:center}
[data-wake] .wk-point-label{position:absolute;right:0;margin-top:9px;padding:3px 6px;border-radius:3px;background:#183b35;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
body.sys-n main [data-wake] .ap-forecast .wk-point-label,[data-wake] .wk-point-label{color:#f2f8f2!important}
/* A drawn line stays drawn: the wake draws it once. */
[data-wake] .wk-line{animation:none!important;stroke-dasharray:1;stroke-dashoffset:0!important;opacity:1}

/* ---------- Asleep: what waits, before the wake ---------- */
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) .wk-glass{opacity:1;visibility:visible}
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) .ar-art{translate:0 10px;scale:.985}
/* Round 11 (1280x720): nothing of the screen shows as dark ink through the sleeping glass. Its contents stay at
   opacity 0 until the wake, then come up as the glass clears (the figures keep their own later steps). */
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) .ar-art>:not(.wk-glass){opacity:0}
[data-wake="full"][data-wk-state="waking"] .ar-art>:not(.wk-glass){transition:opacity 280ms linear 200ms}
/* Round 12 (motion: 144 to 165 ms on a phone): the hidden contents stay in layout and sit on their own composited layer
   from before the reveal, so the reveal is an opacity change only; the layer is dropped once the wake is done. */
html.wk-on [data-wake="full"]:not([data-wk-state="done"]) .ar-art>:not(.wk-glass){will-change:opacity}
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) .wk-trace{stroke-dashoffset:1}
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) :is(.wk-area,.wk-now-rule,.wk-kpi-n,.wk-kpi-s,.wk-tag,.wk-depts>span){opacity:0}
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) :is(.wk-kpi-s,.wk-depts>span){translate:0 5px}
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) .wk-tag{translate:-6px 0}
html.wk-on [data-wake="full"]:not([data-wk-state="waking"],[data-wk-state="done"]) :is(.wk-dot,.wk-mark){scale:0}
html.wk-on [data-wake]:is([data-wake="short"],[data-wake="story"]):not([data-wk-state="waking"],[data-wk-state="done"]) .wk-frame{opacity:0;translate:0 12px}
html.wk-on [data-wake]:is([data-wake="short"],[data-wake="story"]):not([data-wk-state="waking"],[data-wk-state="done"]) .wk-key{opacity:0;translate:0 8px}
html.wk-on [data-wake]:is([data-wake="short"],[data-wake="story"]):not([data-wk-state="waking"],[data-wk-state="done"]) .wk-line{stroke-dashoffset:1!important}
html.wk-on [data-wake]:is([data-wake="short"],[data-wake="story"]):not([data-wk-state="waking"],[data-wk-state="done"]) :is(.wk-fade,.wk-point-label){opacity:0}
html.wk-on [data-wake]:is([data-wake="short"],[data-wake="story"]):not([data-wk-state="waking"],[data-wk-state="done"]) .wk-point{scale:0}
html.wk-on [data-wake]:is([data-wake="short"],[data-wake="story"]):not([data-wk-state="waking"],[data-wk-state="done"]) .wk-bar::before{transform:scaleX(0)}
html.wk-on [data-wake="story"]:not([data-wk-state="waking"],[data-wk-state="done"]) .wk-road,
html.wk-on [data-wake="story"][data-wk-state="waking"][data-wk-step="0"] .wk-road{transform:scaleX(0)}
html.wk-on [data-wake="story"]:not([data-wk-state="waking"],[data-wk-state="done"]) .wk-car,
html.wk-on [data-wake="story"][data-wk-state="waking"][data-wk-step="0"] .wk-car{transform:translateX(0)}
html.wk-on [data-wake="story"][data-wk-state="waking"][data-wk-step="1"] .wk-road{transform:scaleX(.5)}
html.wk-on [data-wake="story"][data-wk-state="waking"][data-wk-step="1"] .wk-car{transform:translateX(50%)}

/* ---------- Waking: the home Rooftop sequence. Frame 0 to 300, line 250 to 1150, figures 950 to 1730, marks to 2000. ---------- */
[data-wake="full"][data-wk-state="waking"] .wk-glass{visibility:visible;transition:opacity 300ms var(--wk-ease),visibility 0s 300ms}
[data-wake="full"][data-wk-state="waking"] .ar-art{transition:translate 360ms var(--wk-ease),scale 360ms var(--wk-ease)}
[data-wake="full"][data-wk-state="waking"] .wk-now-rule{transition:opacity 300ms linear 250ms}
[data-wake="full"][data-wk-state="waking"] .wk-trace{transition:stroke-dashoffset 900ms var(--wk-draw) 250ms}
[data-wake="full"][data-wk-state="waking"] .wk-area{transition:opacity 600ms linear 650ms}
[data-wake="full"][data-wk-state="waking"] .wk-dot{transition:scale 320ms var(--wk-ease) 1080ms}
[data-wake="full"][data-wk-state="waking"] .wk-tag{transition:opacity 240ms linear 950ms,translate 360ms var(--wk-ease) 950ms}
[data-wake="full"][data-wk-state="waking"] .wk-kpi-n{transition:opacity 180ms linear calc(950ms + var(--wk-n,0)*60ms)}
[data-wake="full"][data-wk-state="waking"] .wk-kpi-s{transition:opacity 260ms linear calc(1480ms + var(--wk-n,0)*50ms),translate 360ms var(--wk-ease) calc(1480ms + var(--wk-n,0)*50ms)}
[data-wake="full"][data-wk-state="waking"] .wk-kpi-s>.wk-mark{transition:scale 360ms var(--wk-ease) calc(1520ms + var(--wk-n,0)*50ms)}
[data-wake="full"][data-wk-state="waking"] .wk-depts>span{transition:opacity 260ms linear calc(1580ms + var(--wk-n,0)*50ms),translate 360ms var(--wk-ease) calc(1580ms + var(--wk-n,0)*50ms)}
[data-wake="full"][data-wk-state="waking"] .wk-depts .wk-mark{transition:scale 360ms var(--wk-ease) calc(1620ms + var(--wk-n,0)*50ms)}
.wk-kpi:nth-child(2),.wk-depts>span:nth-child(2){--wk-n:1}
.wk-kpi:nth-child(3),.wk-depts>span:nth-child(3){--wk-n:2}
.wk-kpi:nth-child(4),.wk-depts>span:nth-child(4){--wk-n:3}

/* ---------- Waking: every other screen, about 600 ms. Frame, then its figure or line. ---------- */
[data-wake][data-wk-state="waking"] .wk-frame{transition:opacity 300ms linear,translate 420ms var(--wk-ease)}
[data-wake][data-wk-state="waking"] .wk-key{transition:opacity 260ms linear calc(160ms + var(--wk-i,0)*45ms),translate 400ms var(--wk-ease) calc(160ms + var(--wk-i,0)*45ms)}
[data-wake][data-wk-state="waking"] .wk-line{transition:stroke-dashoffset 480ms var(--wk-draw) 160ms}
[data-wake][data-wk-state="waking"] .wk-fade{transition:opacity 360ms linear 300ms}
[data-wake][data-wk-state="waking"] .wk-bar::before{transition:transform 480ms var(--wk-ease) 160ms}
[data-wake][data-wk-state="waking"] .wk-point{transition:scale 300ms var(--wk-ease) 520ms}
[data-wake][data-wk-state="waking"] .wk-point-label{transition:opacity 220ms linear 560ms}
[data-wake="story"][data-wk-state="waking"] :is(.wk-road,.wk-car){transition:transform 400ms var(--wk-ease)}

/* Belt and braces: with motion reduced nothing here may move, whatever the script decides. */
@media (prefers-reduced-motion:reduce){
 [data-wake] :is(.wk-glass,.wk-frame,.wk-key,.wk-line,.wk-fade,.wk-point,.wk-point-label,.wk-road,.wk-car,.wk-rt *),[data-wake].wk-rooftop .ar-art,[data-wake] .wk-bar::before{transition:none!important}
}