/* css/19-overlays-boot-start-end.css — boot / start / end overlays incl. P4 Start CTA.
   Split from the index.html <style> block (REFACTOR-PLAN Phase 2). Load order = cascade order; do not reorder. */
/* ---------- overlays: boot / start / end ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:1;transform:translateY(0);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.overlay.out{opacity:0;visibility:hidden;transform:translateY(8px)}
/* ---- boot layer: 3D boot sequence (boot3d.js, from proto/boot3d.html) ----
   #boot keeps the .overlay/.out contract; `display:block` so the tdw layers
   position from it, and the ink/vignette/grain layers stay opaque so the Start
   view never shows through the transparent WebGL canvas. */
#boot{display:block;overflow:hidden;background:#0B0F0E;will-change:opacity,transform;transform-origin:50% 50%;
  transition:opacity var(--boot-exit,500ms) var(--ease-out-cubic),
             transform var(--boot-exit,500ms) var(--ease-out-cubic)}
/* the handoff (index.html bootExit): the stage fades to 0 and pushes 3% past
   the frame while #start fades in underneath it. visibility is NOT part of the
   exit — .overlay.out would flip it instantly and kill the fade — so the layer
   is taken out of the flow by .tdw-off once the transition has ended. */
#boot.out{opacity:0;visibility:visible;transform:scale(1.03);pointer-events:none}
#boot.out #tdwBrand{opacity:0;transition:opacity calc(var(--boot-exit,500ms) * .8) var(--ease-out-cubic)}
#boot.tdw-off{display:none}
/* reduced motion: opacity only, no scale */
#boot.tdw-rm{transition:opacity var(--boot-exit,200ms) linear}
#boot.tdw-rm.out{transform:none}
#boot.tdw-rm.out #tdwBrand{transition:none}
#tdwBase{position:absolute;inset:0;background:
    radial-gradient(115% 80% at 50% 78%, #111a18 0%, #0B0F0E 58%, #060808 100%)}
#tdwVig{position:absolute;inset:0;background:
    radial-gradient(78% 62% at 50% 62%, rgba(22,46,42,.30) 0%, rgba(11,15,14,0) 72%),
    radial-gradient(140% 118% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.66) 100%)}
#tdwGrain{position:absolute;inset:0;opacity:.38;background-repeat:repeat;mix-blend-mode:screen;pointer-events:none}
#tdwCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* evidence cards (screen-space, projected from the 3D beam landing points) */
#tdwEv{position:absolute;inset:0;pointer-events:none}
.tdwCard{position:absolute;left:0;top:0;width:176px;height:99px;opacity:0;
         transform-origin:50% 50%;will-change:transform,opacity}
.tdwShot{position:absolute;inset:0;border-radius:8px;overflow:hidden;
         background:#0a0f0e center/cover no-repeat;
         box-shadow:0 12px 30px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.10) inset}
.tdwShot::after{content:"";position:absolute;inset:0;
         background:linear-gradient(180deg,rgba(6,12,11,.10),rgba(6,12,11,.50))}
.tdwBox{position:absolute;border:1.5px solid var(--acc,#22C882);border-radius:3px;z-index:2;
        box-shadow:0 0 10px rgba(34,200,130,.45), inset 0 0 14px rgba(34,200,130,.14)}
.tdwChip{position:absolute;left:0;top:100%;margin-top:6px;z-index:3;white-space:nowrap;
         font:600 12px/1 inherit;letter-spacing:.01em;color:#04150D;
         background:var(--acc,#22C882);border-radius:5px;padding:4px 7px;
         box-shadow:0 2px 12px rgba(34,200,130,.35)}
.tdwBr{position:absolute;width:12px;height:12px;z-index:4;border:1.5px solid rgba(210,255,238,.85)}
.tdwBr.a{left:-3px;top:-3px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.tdwBr.b{right:-3px;top:-3px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.tdwBr.c{left:-3px;bottom:-3px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.tdwBr.d{right:-3px;bottom:-3px;border-left:0;border-top:0;border-radius:0 0 5px 0}
/* brand block */
#tdwBrand{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;
          text-align:center;pointer-events:none}
#tdwMark{opacity:0;filter:blur(8px);transform:scale(.94);will-change:opacity,transform,filter}
#tdwWord{opacity:0;transform:translateY(3px);font-weight:600;letter-spacing:.015em;color:#F4F8F6;
         white-space:nowrap;will-change:opacity,transform;text-shadow:0 1px 18px rgba(0,0,0,.85)}
#tdwBy{opacity:0;transform:translateY(3px);display:flex;align-items:center;justify-content:center;
       color:rgba(255,255,255,.72);letter-spacing:.10em;text-transform:uppercase;
       will-change:opacity,transform;white-space:nowrap}
#tdwBy img{opacity:.78;display:block;flex:none}
#tdwProg{opacity:0;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
#tdwProg i{display:block;height:100%;width:0%;border-radius:2px;
           background:linear-gradient(90deg,var(--acc,#22C882),#12A7CF);
           box-shadow:0 0 10px rgba(34,200,130,.55)}
@media (prefers-reduced-motion: reduce){ #tdwMark{filter:none} }
/* start: the sector map is the full-bleed stage, the readiness card is glass */
#start{display:block;overflow:hidden;
  transition:opacity var(--boot-exit,200ms) var(--ease-out-cubic),
             transform var(--boot-exit,200ms) var(--ease-out-cubic),
             visibility var(--boot-exit,200ms)}
.startmap{position:absolute;inset:0;overflow:hidden;background:#0A0F11}
.startmap canvas{position:absolute;inset:0;width:100%;height:100%}
.startmap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 100% at 70% 50%, rgba(7,10,11,0) 30%, rgba(7,10,11,.5) 74%, rgba(7,10,11,.9) 100%),
    linear-gradient(90deg, rgba(7,10,11,.92) 0, rgba(7,10,11,.5) 42%, rgba(7,10,11,0) 62%)}
.startwrap{position:absolute;inset:0;display:grid;grid-template-columns:min(440px,44%) 1fr;
  gap:20px;padding:22px;padding-top:calc(22px + var(--header-h));align-items:stretch;z-index:2;pointer-events:none}
.startwrap>*{pointer-events:auto}
.startcard{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh-lg)}
/* wave11 Fix 1: the readiness half scrolls, the action block never does —
   margin-top:auto inside a scrolling flex column used to push the header off
   the top of the box (split/portrait clipped the inspector row). */
.startbody{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:14px}
.startbody::-webkit-scrollbar{display:none}
.startacts{flex:0 0 auto;margin-top:auto;display:flex;flex-direction:column;gap:12px}
.startcard.hasresume{gap:10px;padding:18px}
.startcard.hasresume .startbody{gap:10px}
.startcard.hasresume h2{font-size:var(--fz-ttl)}
.startcard.hasresume .startbody>.cap{display:none}
.startcard h2{margin:0;font-size:var(--fz-ttl-lg);font-weight:750;letter-spacing:-.03em;line-height:1.15}
.startcard .who{display:flex;align-items:center;gap:12px}
.avatar{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-weight:700;color:var(--acc);font-size:var(--fz-md-lg);border:1px solid var(--hair2)}
.who b{display:block;font-size:var(--fz-md-lg)}.who span{font-size:var(--fz-body);color:var(--tx2)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.045);border:1px solid var(--hair);font-size:var(--fz-body);font-weight:600}
.chk i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--acc-dim);color:var(--acc);flex:0 0 auto}
.chk i svg{width:14px;height:14px;stroke-width:2.6}
.chk.wait i{background:rgba(255,209,102,.12);color:var(--minor)}
.chk small{display:block;color:var(--tx3);font-weight:500;font-size:var(--fz-meta)}
.resume{background:rgba(34,200,130,.08);border:1px solid rgba(34,200,130,.4);border-radius:var(--r-sm);padding:14px;display:flex;flex-direction:column;gap:10px}
/* the card title only — `.resume span` used to catch the Resume button's own
   label span too, painting it muted mint on the accent fill (wave11 Fix 1). */
.resume>div>b{display:block;font-size:var(--fz-md-lg);font-weight:700;color:var(--tx)}
.resume .rsub{display:block;font-size:var(--fz-body);color:var(--tx2);margin-top:2px}
.resume .row{display:grid;grid-template-columns:1fr auto;gap:10px}
/* primary: dark text on the accent fill, always. secondary: ghost, white text */
.resume .btn{height:56px;font-size:var(--fz-btn);font-weight:600}
.resume .btn .lab{font-weight:600;font-size:var(--fz-btn)}
.resume .btn.valid,.resume .btn.valid .lab{color:#06201A}
.resume .btn.valid svg{color:#06201A}
.resume .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;padding:0 22px}
.resume .btn.ghost .lab{color:#fff}
/* tertiary: a real 48px ghost button, not an underlined text link */
.startcard.hasresume .big{margin-top:0;height:48px;border-radius:14px;background:transparent;box-shadow:none;
  color:#fff;border:1px solid rgba(255,255,255,.18);font-size:var(--fz-md);font-weight:600;text-decoration:none}
.startcard.hasresume .big svg{display:none}
.startcard .big{margin-top:0;height:56px;border-radius:16px;background:var(--acc);color:#06201A;font-size:var(--fz-btn);font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--sh-lg);transition:.15s;position:relative;isolation:isolate}
.startcard .big:active{transform:scale(.98)}
.startcard .big svg{stroke-width:2.6}
/* ---------- P4: gradient sweep + glow pulse, transform/opacity only --------
   The old version animated `background-position` (the sweep) and `box-shadow`
   (the glow) directly on .big -- both paint properties, looping the entire
   time the Start screen is up (docs/PERFORMANCE.md P4). Same visual, two
   different properties:
     .sweep (a real, empty, aria-hidden span -- the button's first child, see
     markup) is the fixed CLIP FRAME (overflow:hidden, sized to the button).
     .sweep::before is FOUR TIMES that width (two repeats of the same 2x-wide
     tile the old background-size:200% used), carrying the six-stop gradient
     as a repeating background, and slides via `translateX` -- a plain
     background-position sweep can't be expressed with transform, so the pan
     needs a wider layer moving inside a same-size clipping frame; the 2x
     tile width keeps the resting (0%) frame identical to the old resting
     background-position:0% frame, which matters because prefers-reduced-
     motion freezes on exactly that frame. The glow is .big::after: its
     box-shadow is a fixed "peak" value (declared once, never animated) and
     only its OPACITY pulses. Its BASE (non-animated) opacity is 0 -- not the
     keyframe's low value -- on purpose: the original's box-shadow animation
     had no `animation-fill-mode`, so whenever it isn't actively running
     (duration:0 for the smoke-test baseline capture, or `animation:none`
     under prefers-reduced-motion, both below) it reverts to the plain
     `var(--sh-lg)` on .big itself, not to either keyframe value -- i.e. NO
     added glow at rest, just the button's ordinary drop shadow. A resting
     opacity above 0 first shipped a permanent dark-green halo bleeding past
     the card's own edge in that frozen state (caught via baseline diff).
     Matching that fallback-to-nothing behaviour is why the base declaration
     and the keyframes differ. Both layers sit behind .sweep's content in the
     DOM/paint order (negative z-index, and .big needs `isolation:isolate`
     so that z-index is scoped to the button and not some ancestor) so the
     glow can bleed past the button's rounded corners without being clipped
     by .sweep's own overflow:hidden, which only clips its own descendants. */
.startcard:not(.hasresume) .big .sweep{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.startcard:not(.hasresume) .big .sweep::before{content:"";position:absolute;inset:0;width:400%;
  background-image:linear-gradient(115deg, #0E9F63, #22C882 30%, #37E8A6 48%, #4FD9E8 62%, #22C882 82%, #0E9F63);
  background-repeat:repeat-x;background-size:50% 100%;
  animation:startbtnsweep 6s linear infinite;will-change:transform}
.startcard:not(.hasresume) .big::after{content:"";position:absolute;inset:-10px;z-index:-1;border-radius:26px;
  box-shadow:0 6px 30px rgba(55,232,166,.55);opacity:0;pointer-events:none;
  animation:startbtnglow 6s ease-in-out infinite;will-change:opacity}
@keyframes startbtnsweep{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes startbtnglow{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .startcard .big .sweep::before,.startcard .big::after{animation:none}
}
/* revamp 11 (client): .startinfo — the two bottom-right glass cards — is
   deleted. The Start map draws today's four sectors instead, which is the
   overview those cards were approximating. What remains is the sector id chip
   the map drops at each sector's centroid. */
.seclab{font:700 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;white-space:nowrap;
  padding:5px 9px;border-radius:999px;color:var(--tx2);
  background:rgba(10,16,18,.78);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(4px);pointer-events:none}
.seclab.now{color:#BFF6DE;background:rgba(6,32,26,.82);border-color:rgba(34,200,130,.55)}

/* ---------- end of inspection: the HUD summary (revamp 9 / pass 23) ------
   One screen, no scrolling at 1280x604: a header of mono chips, four hero KPIs
   (two of them ring gauges), and a two-column band.

   pass 23 (client) rearranged that band. The two cards - "Top KPIs violated"
   and "Status of reported incidents" - are ONE card now, grouping every
   reported incident under the KPI it violated, and the space that freed is a
   plan-view sector map carrying the covered route and a status-coloured pin per
   incident. The heroes give up ~24 px of height (150 px tiles, 60 px numerals,
   104 px rings, a 178x106 half-gauge) to buy the band the ~268 px the map wants;
   at 1280 the map card lands near 600x230, the 2.5:1 a 15 km circuit reads in.
   The half-gauge path is authored in a 200x120 viewBox, so it scales with its
   box and halfGaugeTile()/HGAUGE_C need no change. */
#end{display:block;overflow:hidden}
.sumwrap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:10px;
  padding:0 20px 12px;padding-top:calc(var(--header-h) + 8px)}
.sumhead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.sumhead h2{margin:0;font-size:30px;font-weight:750;letter-spacing:-.03em;line-height:1.15}
.sumchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sumchips .c{display:flex;align-items:baseline;gap:8px;padding:5px 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.sumchips .c i{font-style:normal;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);font-weight:700}
.sumchips .c b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:18px;font-weight:700;color:var(--tx)}
/* row 1 - the heroes */
.sumheroes{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sumheroes .t{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);padding:12px;
  min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  opacity:0;transform:translateY(12px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.sumwrap.in .sumheroes .t{opacity:1;transform:none}
.sumwrap.in .sumheroes .t:nth-child(2){transition-delay:60ms}
.sumwrap.in .sumheroes .t:nth-child(3){transition-delay:120ms}
.sumwrap.in .sumheroes .t:nth-child(4){transition-delay:180ms}
.sumheroes .t .l{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);
  font-weight:700;text-align:center;line-height:1.3}
.sumheroes .t .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:60px;font-weight:700;
  letter-spacing:-.045em;line-height:1;color:var(--tx)}
.sumheroes .t .s{font-size:16px;color:var(--tx3);margin-top:-2px}
/* the ring gauges: 110 px, 8 px stroke, the value arc drawn from 12 o'clock */
.gring{position:relative;width:104px;height:104px}
.gring svg{display:block;width:104px;height:104px}
.gring circle{fill:none;stroke-width:8;stroke-linecap:round}
.gring .trk{stroke:rgba(255,255,255,.08)}
.gring .arc{transition:stroke-dashoffset .9s var(--ease)}
.gring .pc{position:absolute;inset:0;display:grid;place-items:center}
.gring .pc span{display:flex;align-items:baseline;gap:1px}
.gring .pc b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:40px;font-weight:700;
  letter-spacing:-.04em;color:var(--tx)}
.gring .pc i{font-style:normal;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--tx3)}
/* client pass: compliance is a half-circle gauge - 180 degrees over the top,
   opening downward, drawn in by the same dashoffset transition as the rings */
.hgring{position:relative;width:178px;height:106px}
.hgring svg{display:block;width:178px;height:106px;overflow:visible}
.hgring path{fill:none;stroke-width:12;stroke-linecap:round}
.hgring .trk{stroke:rgba(255,255,255,.08)}
.hgring .arc{transition:stroke-dashoffset .9s var(--ease)}
.hgring .hgend{fill:var(--tx3);font-size:12px;font-weight:700;font-family:var(--mono)}
.hgring .hgpc{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:22px;pointer-events:none}
.hgring .hgpc span{display:flex;align-items:baseline;gap:1px}
.hgring .hgpc b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:40px;font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--tx)}
.hgring .hgpc i{font-style:normal;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--tx3)}
.sumheroes .t.hg{gap:2px}
/* the band, side by side because 604 px of height has no room to stack. The
   map takes the wider half: the merged list is text and wraps, a 15 km coverage
   circuit does not. */
.sumband{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1.12fr;gap:10px}
.sumcard{background:var(--glass);border:1px solid var(--hair);border-radius:var(--r-lg);padding:10px 15px;
  display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  opacity:0;transform:translateY(12px);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.sumwrap.in .sumcard{opacity:1;transform:none}
.sumwrap.in .sumcard:nth-child(1){transition-delay:240ms}
.sumwrap.in .sumcard:nth-child(2){transition-delay:300ms}
.sumcard .cap{flex:0 0 auto}
.sumcard .none{color:var(--tx3);font-size:var(--fz-body)}
/* final review UX#6: the count LEADS as a mono numeral and the bar drops to a
   3 px magnitude rule under it. Four full-width bars, one per KPI, all at
   maximum because every count was 1, was a chart carrying no information. */
.bl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;align-items:baseline}
.bl .k{font-size:19px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;color:var(--acc);line-height:1;min-width:1.2em}
.bl .bar{grid-column:2;height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.bl .bar i{display:block;height:100%;width:0;border-radius:3px;background:rgba(34,200,130,.75);transition:width .6s var(--ease)}
.sumwrap.in .bl .bar i{width:var(--w,0%)}
/* status of reported incidents - one stacked bar, its legend, the newest rows */
.sstack{flex:0 0 auto;display:flex;height:12px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.07)}
.sstack .sg{width:0;transition:width .6s var(--ease)}
.sumwrap.in .sstack .sg{width:var(--w)}
.slegend{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px 14px}
.slegend .lg{display:flex;align-items:center;gap:7px;font-size:16px;color:var(--tx2)}
.slegend .lg s{width:10px;height:10px;border-radius:2px;display:block;text-decoration:none;flex:0 0 auto}
.slegend .lg b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tx);font-weight:700}
.srows{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.srows .r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hair);font-size:17px}
.srows .r s{width:8px;height:8px;border-radius:50%;flex:0 0 auto;text-decoration:none}
.srows .r b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tx3);font-weight:700;flex:0 0 auto}
.srows .r span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx)}
.srows .r em{font-style:normal;color:var(--tx2);white-space:nowrap;flex:0 0 auto}
/* pass 23: one KPI group = the .bl magnitude row as its header, then that KPI's
   own incidents as ordinary .r rows under it. Both classes are reused verbatim,
   so the bar's entrance (.sumwrap.in .bl .bar i) and every .srows .r rule apply
   at the new nesting depth with no new CSS behind them. */
.kg{display:flex;flex-direction:column}
.kg+.kg{margin-top:8px;padding-top:8px;border-top:1px solid var(--hair2)}
/* .bl is authored as a two-row grid (count + name, then the bar beneath). As a
   GROUP header that second row costs ~12 px per group and the card only has
   ~165 px to give, so the header collapses to one line - count, KPI, then the
   magnitude rule taking whatever is left. #endBullets was .bl's only other user
   and went with the merge, so this is a re-shape, not an override of a rule
   something else still depends on; the .sumwrap.in .bl .bar i entrance still
   drives the fill because .kgh keeps the .bl class. */
.kgh{margin:0 0 1px;display:flex;align-items:baseline;gap:12px}
.kgh b{font-size:24px}
.kgh .k{flex:0 1 auto}
.kgh .bar{flex:1 1 auto;align-self:center}
/* the sector map card (pass 23). Modelled on the .summary .mapcard rules the
   printable report took with it in revamp Task 9: a rounded, clipped, near-black
   stage the GL canvas fills absolutely, with the no-WebGL canvas stacked in the
   same box. */
#endMapCard{padding:10px 12px}
.endmapbox{position:relative;flex:1 1 auto;min-height:120px;border-radius:16px;overflow:hidden;background:#0B1210}
#endmap{position:absolute;inset:0}
#endmap .maplibregl-canvas{outline:none}
#endcv{position:absolute;inset:0;width:100%;height:100%;display:none}
/* the key floats bottom-start over the stage rather than costing the box a
   28 px row it does not have. Its swatch is a rotated teardrop, so it reads as
   the pin it stands for and not as a generic dot, and every colour carries a
   word beside it - the map never encodes status in colour alone. */
.emleg{position:absolute;inset-inline-start:10px;bottom:10px;z-index:2;display:flex;flex-wrap:wrap;
  gap:4px 12px;padding:6px 10px;border-radius:12px;pointer-events:none;
  background:rgba(10,15,17,.78);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.emleg>span{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--tx2);white-space:nowrap}
.emleg i{width:11px;height:11px;flex:0 0 auto;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
/* the canvas fallback draws the grey route and no pins at all, so the card must
   not go on claiming a colour key it is not honouring */
#endMapCard.fb .emleg{display:none}
.sumfoot{flex:0 0 auto;display:flex;justify-content:flex-end}
.sumfoot .btn{height:56px;min-height:56px;min-width:290px;font-size:20px;font-weight:650}
@media (prefers-reduced-motion: reduce){
  .sumheroes .t,.sumcard{opacity:1;transform:none;transition:none}
  .gring .arc,.hgring .arc,.bl .bar i,.sstack .sg{transition:none}
}

/* confirm dialog */
.dlg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(7,10,11,.6);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.25s}
.dlg.on{opacity:1;visibility:visible}
.dlg .box{width:min(520px,92vw);background:var(--glass-solid);border:1px solid var(--hair2);border-radius:var(--r-lg);padding:24px;transform:scale(.96);transition:.25s var(--ease);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--sh-lg)}
.dlg.on .box{transform:scale(1)}
.dlg h3{margin:0 0 6px;font-size:var(--fz-ttl);font-weight:750;letter-spacing:-.025em}
.dlg p{margin:0 0 18px;color:var(--tx2);font-size:var(--fz-body)}
.dlg .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlg .btn{height:60px}
.dlg .btn.ghost{background:rgba(255,255,255,.07);border:1px solid var(--hair2);color:var(--tx)}
.dlg .btn.danger{background:var(--crit);color:#fff}


/* ---------- pass 23: the Start screen, hosted as the HOME module -----------
   The client asked for Home to be a real module, re-enterable mid-shift, with
   the four task sectors and the sector list it already shows on cold boot.
   Rather than build a second copy of that screen (two sector maps, two task
   lists, two MapLibre instances to keep in step), #start IS the Home view:
   setView('home') drops `.asview` on it and the same markup, the same
   drawStartMap() and the same fitStartCamera() serve both entry points.
   All `.asview` has to do is get out of the overlay layer. At z-index:50 the
   overlay sits above #app and would bury the dock; at `auto` it paints in tree
   order, i.e. underneath #app — so #app goes transparent for the duration and
   contributes only its own chrome, the dock, on top of Home. #stage is hidden
   by css/02 on this view so the basemap cannot paint over Home either. */
#start.asview{z-index:auto}
/* #app is the layer ON TOP of Home, so it must not swallow the taps meant for
   the screen underneath: it goes fully transparent to pointers and hands the
   input back to the one piece of itself Home needs — the dock. */
body[data-view="home"] #app{background:transparent;pointer-events:none}
body[data-view="home"] nav.dock{pointer-events:auto}
/* the dock is a floating pill over the screen now, so the readiness card has to
   end above it — measured clearance, the same --dock-clear main uses. */
#start.asview .startwrap{padding-bottom:var(--dock-clear,calc(var(--dock-h) + 6px))}