/* GMONIT brand tokens (lifted from od-portal /map) — light enterprise, flat, Manrope */
:root{
  --bg:#EBEFF5; --surface:#FFFFFF;
  --primary:#0B73FE; --primary-ink:#030c57; --primary-tint:#EAF2FF;
  --text:#1A2332; --text-2:#3F5073; --muted:#6B7A99; --muted-2:#8494AB;
  --border:#DDE3ED; --border-2:#E2E8F0;
  --success:#22C55E; --warning:#F59E0B; --critical:#DC2626;
  --r-ctl:8px; --r-card:16px;
  --shadow-card:0 1px 2px rgba(16,33,64,.04);
  --header-h:62px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5; overflow:hidden;
}

/* Header */
.header{height:var(--header-h); background:rgba(255,255,255,.92); border-bottom:1px solid var(--border); display:flex; align-items:center; position:relative}
.header-inner{width:100%; padding:0 24px; display:flex; align-items:center; gap:16px}
.logo{height:28px; width:auto; display:block}
.logo-div{width:1px; height:24px; background:var(--border)}
.header-title{font-size:14px; font-weight:600; color:var(--text-2)}
.header-spacer{flex:1}
.pill{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 13px; border-radius:999px;
  background:var(--primary-tint); color:var(--primary-ink); font-size:12.5px; font-weight:600; border:1px solid #D6E6FF}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.pill.alert{background:#FEECEC; color:#B42318; border-color:#FBD0D0}
.pill.alert .dot{background:var(--critical); box-shadow:0 0 0 3px rgba(220,38,38,.18)}
/* header: logo · СЕЙЧАС <talk> · ДАЛЕЕ <talk> · spacer · clock · pill — agenda lives in the
   left block (no centered column); equal-width chips keep both titles starting at the same x. */
.header-now, .sb-next{display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto}
.hn-label, .sb-next-label{flex:none; min-width:66px; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#fff; background:#030c57; border-radius:999px; padding:3px 9px}
.hn-title, .sb-next-title{font-size:13.5px; font-weight:700; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.header-clock{flex:none; font-size:15px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:.5px}
/* Row 2 in NORMAL = "ДАЛЕЕ <talk>" directly under "СЕЙЧАС" (same chip/type size; show.js aligns
   the left edge with the СЕЙЧАС chip). Incidents replace it with the state widgets. */
.sb-next{display:none}
body.state-normal .sb-next{display:flex}
body.state-normal .sb-state, body.state-normal .sb-id, body.state-normal .sb-count, body.state-normal .sb-prog{display:none}

/* Monitor layout: map + right rail */
.monitor{height:calc(100% - var(--header-h)); display:grid; grid-template-columns:1fr 320px; gap:18px; padding:18px}
.map-wrap{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden}
#city{position:absolute; inset:0; z-index:0}
.maplibregl-map{background:#dfe6f0; font-family:"Manrope",-apple-system,sans-serif}
.maplibregl-ctrl-attrib{font-size:10px}
.dlabel{font:700 13px/16px "Manrope",sans-serif; color:#1A2332; text-shadow:0 1px 2px #fff,0 0 5px #fff,0 0 5px #fff; white-space:nowrap; text-align:center; pointer-events:none}
.courier{font-size:18px; line-height:24px; text-align:center; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.courier-i{display:inline-block; animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.14)}}
/* venues must read as ANCHORS against the courier traffic — noticeably bigger + white halo */
.whouse{font-size:26px; line-height:30px; text-align:center}
.resto{font-size:24px; line-height:28px; text-align:center; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.store{font-size:28px; line-height:32px; text-align:center; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.zonelabel{font:800 15px/18px "Manrope",sans-serif; color:#1A2332; letter-spacing:.3px; text-shadow:0 1px 2px #fff,0 0 6px #fff,0 0 6px #fff; white-space:nowrap; text-align:center; pointer-events:none; transition:color .4s}
.zonelabel.warn{color:#EA580C; text-shadow:0 1px 2px #fff,0 0 6px #fff,0 0 9px rgba(234,88,12,.5)}
.zonelabel.crit{color:#DC2626; text-shadow:0 1px 2px #fff,0 0 6px #fff,0 0 11px rgba(220,38,38,.55); animation:zone-pulse 1.1s ease-in-out infinite}
@keyframes zone-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Right rail */
.rail{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:18px; display:flex; flex-direction:column; gap:10px}
.rail-head{font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-2); margin-bottom:4px}
.stat{display:flex; align-items:baseline; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-2)}
.stat-label{font-size:13px; color:var(--muted)}
.stat-val{font-size:22px; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums}
.stat-val.warn{color:var(--warning)} .stat-val.crit{color:var(--critical)}
.qr-card{margin-top:auto; display:flex; align-items:center; gap:14px; padding-top:14px}
.qr-box{width:84px; height:84px; border-radius:var(--r-ctl); background:#fff; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden}
.qr-box canvas, .qr-box img{display:block}
.qr-cap{font-size:13px; color:var(--text-2); font-weight:600}

/* City Health KPI tiles (Live Wall C) */
.kpi-grid{display:flex; flex-direction:column; gap:9px}
.kpi{background:#F8FAFD; border:1px solid var(--border); border-radius:12px; padding:10px 13px; transition:border-color .4s, background .4s, box-shadow .4s}
.kpi-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.kpi-label{font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap}
.kpi-delta{font-size:11.5px; font-weight:800; color:var(--muted-2); font-variant-numeric:tabular-nums}
.kpi-val{font-size:31px; font-weight:800; letter-spacing:-.5px; line-height:1.05; margin-top:2px; color:var(--text); font-variant-numeric:tabular-nums}
.kpi-spark{display:block; width:100%; height:24px; margin-top:5px; overflow:visible}
.kpi-spark polyline{stroke:#9DB2D4; stroke-width:2; fill:none}
.kpi.warn{border-color:#FBE2B0; background:#FFFBEB}
.kpi.warn .kpi-val, .kpi.warn .kpi-delta{color:#B45309}
.kpi.warn .kpi-spark polyline{stroke:#F59E0B}
.kpi.crit{border-color:#FBD0D0; background:#FEF2F2; box-shadow:0 0 0 1px rgba(220,38,38,.12)}
.kpi.crit .kpi-val, .kpi.crit .kpi-delta{color:#DC2626}
.kpi.crit .kpi-spark polyline{stroke:#DC2626}
.kpi.crit .kpi-val{animation:kpi-flash 1.1s ease-in-out infinite}
@keyframes kpi-flash{0%,100%{opacity:1}50%{opacity:.6}}

/* Attract overlay */
.attract{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; transition:opacity .4s; background:radial-gradient(circle at 50% 40%, rgba(11,115,254,.06), transparent 60%)}
.attract.hidden{opacity:0}
.attract-card{text-align:center; background:rgba(255,255,255,.78); backdrop-filter:blur(2px); padding:22px 30px; border-radius:var(--r-card); border:1px solid var(--border)}
.attract-card h1{margin:0 0 6px; font-size:30px; font-weight:800; letter-spacing:-.5px}
.attract-card p{margin:0 0 12px; color:var(--muted); font-size:15px}
.attract-tags{font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--primary)}

/* Incident banner */
.banner{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); padding:10px 20px; border-radius:999px; font-weight:700; font-size:14px; box-shadow:0 8px 24px -8px rgba(16,33,64,.3); z-index:600}
.banner.ok{background:#ECFDF3; color:#15803D; border:1px solid #C5EFD2}
.banner.alert{background:#FEECEC; color:#B42318; border:1px solid #FBD0D0}

/* Investigation guided panel (/investigate) */
.invest{max-width:920px; margin:0 auto; padding:26px 24px 40px; height:calc(100% - var(--header-h)); overflow:auto}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.step{display:flex; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-card)}
.step.hot{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), var(--shadow-card)}
.step-n{flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:800; background:var(--primary-tint); color:var(--primary-ink)}
.step.hot .step-n{background:var(--primary); color:#fff}
.step-body{flex:1}
.step-title{font-size:16px; font-weight:700; margin-bottom:3px}
.step-tag{font-size:11px; font-weight:700; color:var(--primary-ink); background:var(--primary-tint); border:1px solid #D6E6FF; border-radius:999px; padding:2px 8px; vertical-align:middle; margin-left:6px}
.step-look{font-size:13.5px; color:var(--muted); line-height:1.5; margin-bottom:8px}
.step-link{font-size:13px; font-weight:600; color:var(--primary); text-decoration:none}
.step-link:hover{text-decoration:underline}
.invest-note{margin-top:18px; font-size:12.5px; color:var(--muted-2)}
.invest-note code{font-family:ui-monospace,Menlo,Consolas,monospace; background:#F4F7FB; border:1px solid var(--border); border-radius:6px; padding:1px 6px}

/* ===== Phone UI (/join) ===== */
body.phone{overflow:auto}
.phone-head{height:54px; display:flex; align-items:center; gap:10px; padding:0 16px; background:#fff; border-bottom:1px solid var(--border); font-weight:700; color:var(--text-2); font-size:14px}
.phone-head .logo{height:22px}
.phone-main{max-width:480px; margin:0 auto; padding:16px; display:flex; flex-direction:column; gap:14px}
.ph-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:22px}
.ph-card.hot{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), var(--shadow-card)}
.ph-card h2{margin:.1em 0 .3em; font-size:24px; font-weight:800; letter-spacing:-.3px}
.ph-kicker{font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#030c57}
.ph-kicker.alert{color:var(--critical)}
.ph-quiz{display:block; text-decoration:none; background:linear-gradient(135deg,#030c57 0%,#0B73FE 100%); border:none; box-shadow:0 10px 26px -10px rgba(11,115,254,.6); -webkit-tap-highlight-color:transparent}
.ph-quiz .ph-kicker{color:#fff}
.ph-quiz h2{color:#fff; margin:.12em 0 .25em}
.ph-quiz .ph-sub{color:#fff; opacity:.92; margin:.2em 0 .2em}
.ph-quiz .pq-cta{display:inline-block; margin-top:6px; font-weight:800; font-size:14px; color:#fff}
.ph-quiz:active{transform:scale(.99)}

/* wall rail: engineer launch buttons (replace QR in timed "buttons mode") */
.wall-launch{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:14px}
.wl-h{font-size:13px; font-weight:800; color:#030c57; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px}
.wl-timer{font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; font-size:12px}
.wl-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wl-btn{padding:14px 8px; border-radius:10px; border:1px solid var(--border); background:#fff; color:#030c57; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; line-height:1.25}
.wl-btn:hover{border-color:var(--primary); background:var(--primary-tint)}
.wl-btn:active{transform:scale(.98)}
.wl-msg{margin-top:10px; font-size:12px; color:var(--muted); min-height:14px; text-align:center}
.ph-sub{color:var(--muted); font-size:14px; margin:.2em 0 1em}
.ph-q{font-weight:700; margin:.2em 0 .8em}
.ph-code{font-size:56px; font-weight:800; letter-spacing:6px; color:var(--text); font-variant-numeric:tabular-nums; margin:.1em 0}
.ph-btn{display:block; width:100%; margin-top:10px; padding:16px; border:none; border-radius:12px; background:var(--primary); color:#fff; font-size:17px; font-weight:700; font-family:inherit; cursor:pointer}
.ph-btn:active{transform:scale(.99)}
.ph-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ph-opt{padding:16px; border:1px solid var(--border); border-radius:12px; background:#fff; font-size:15px; font-weight:700; font-family:inherit; color:var(--text); cursor:pointer}
.ph-opt:active{background:var(--primary-tint); border-color:var(--primary)}
.ph-result{margin-top:6px; padding:14px; border-radius:12px; font-weight:700; font-size:15px}
.ph-result.good{background:#ECFDF3; color:#15803D; border:1px solid #C5EFD2}
.ph-result.bad{background:#FFF7E6; color:#9A6700; border:1px solid #FBE2B0}
.ph-flash{display:none; position:fixed; left:50%; top:14px; transform:translateX(-50%); background:#1A2332; color:#fff; padding:10px 16px; border-radius:999px; font-size:13px; font-weight:600; z-index:9}

/* ===== Backstage (/backstage) ===== */
.bk{max-width:1000px; margin:0 auto; padding:22px 20px; display:flex; flex-direction:column; gap:16px; height:calc(100% - var(--header-h)); overflow:auto}
.bk-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:18px}
.bk-h{font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-2); margin-bottom:12px}
.bk-row{display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap}
.bk-btn{padding:9px 14px; border:none; border-radius:var(--r-ctl); background:var(--primary); color:#fff; font-weight:700; font-size:13.5px; font-family:inherit; cursor:pointer}
.bk-btn.sm{padding:6px 10px; font-size:12.5px}
.bk-btn.danger{background:var(--critical)}
.bk-btn.ghost{background:#fff; color:var(--text-2); border:1px solid var(--border)}
.bk-sel{padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-ctl); font-family:inherit; font-size:13.5px; background:#fff}
.bk-sel.sm{padding:5px 8px; font-size:12.5px}
.bk-table{width:100%; border-collapse:collapse}
.bk-table td{padding:9px 8px; border-bottom:1px solid var(--border-2); font-size:13.5px; vertical-align:middle}
.bk-code{font-weight:800; font-size:18px; font-variant-numeric:tabular-nums}
.bk-inc{color:var(--critical); font-weight:700}
.bk-ok{color:#15803D; font-weight:700}
.bk-empty{color:var(--muted-2); text-align:center}

/* ===== Mobile-first: map page (/) on phones ===== */
@media (max-width:759px){
  .header-inner{padding:0 14px; gap:10px}
  .header-now, .sb-next, .header-clock{display:none !important}
  .logo{height:24px}
  /* stack: map hero on top, compact stats grid below */
  .monitor{display:flex; flex-direction:column; padding:0; gap:0}
  .map-wrap{flex:1 1 auto; min-height:0; border:none; border-radius:0; box-shadow:none}
  .rail{flex:0 0 auto; display:block; padding:10px;
        background:var(--surface); border:none; border-top:1px solid var(--border); border-radius:0; box-shadow:none}
  .rail-head, .qr-card, .banner{display:none}      /* status lives in the header pill on mobile */
  .kpi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
  .kpi{padding:8px 10px; min-width:0}                 /* min-width:0 lets cells shrink instead of overflowing */
  .kpi-label{font-size:11px; line-height:1.25; white-space:normal}   /* wrap long labels so the grid fits the viewport */
  .kpi-delta{display:none}
  .kpi-val{font-size:22px; margin-top:1px}
  .kpi-spark{display:none}
  /* launch buttons are a wall/TV engineer tool — hide on phones (phones participate via /join, not the wall) */
  .wall-launch{display:none !important}
}

/* ===== Phase 4: voting + lead form (phone) ===== */
.vote-row{position:relative; display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff; font-family:inherit; font-size:15px; font-weight:700; color:var(--text); cursor:pointer; overflow:hidden}
.vote-row.sel{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}
.vote-bar{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--primary-tint); z-index:0; transition:width .4s ease}
.vote-lbl{position:relative; z-index:1; flex:1; text-align:left}
.vote-n{position:relative; z-index:1; color:var(--muted); font-weight:800}
.lead-in{display:block; width:100%; margin-top:8px; padding:13px 12px; border:1px solid var(--border); border-radius:10px; font-family:inherit; font-size:15px; background:#fff}
.lead-chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.lead-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; font-weight:600; cursor:pointer}
.lead-chip input{accent-color:var(--primary); width:16px; height:16px}
/* backstage vote tally */
.bk-votes{display:flex; flex-direction:column; gap:6px}
.bk-vrow{position:relative; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; overflow:hidden; font-size:13.5px; font-weight:600}
.bk-vbar{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--primary-tint); z-index:0; transition:width .4s ease}
.bk-vrow .g, .bk-vrow .n{position:relative; z-index:1}
.bk-vrow .g{flex:1}
.bk-vrow .n{font-variant-numeric:tabular-nums; color:var(--text-2)}

/* Incident Assistant card (on-brand light) */
.assist-card{margin-top:14px; background:var(--primary-tint); border:1px solid #D6E6FF; border-radius:var(--r-card); padding:18px; font-size:14px; line-height:1.55; color:var(--text)}
.assist-h{font-weight:800; margin-bottom:8px; color:var(--primary-ink)}
.assist-card ul{margin:6px 0; padding-left:18px; color:var(--text-2)}
.assist-card p{margin:6px 0}
.assist-card b{color:var(--text)}
.assist-tools{margin-top:10px; font-size:11.5px; color:var(--muted-2); font-family:ui-monospace,Menlo,Consolas,monospace}

/* ============================================================================
   Live Wall (Increment B) — cinematic states + status bar + event ticker + overlay
   ============================================================================ */
:root{ --statusbar-h:42px; --ticker-h:42px }

/* The wall page is a vertical stack: header · status bar · map · ticker */
body.wall{display:flex; flex-direction:column}
body.wall .header{flex:0 0 auto}
body.wall .statusbar{flex:0 0 auto}
body.wall .monitor{flex:1 1 auto; height:auto; min-height:0}
body.wall .ticker{flex:0 0 auto}

/* pill variants (investigation = amber, recovery = blue) */
.pill.warn{background:#FFF7E6; color:#9A6700; border-color:#FBE2B0}
.pill.warn .dot{background:var(--warning); box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.pill.info{background:var(--primary-tint); color:var(--primary-ink); border-color:#D6E6FF}
.pill.info .dot{background:var(--primary); box-shadow:0 0 0 3px rgba(11,115,254,.18)}

/* Status bar */
.statusbar{height:var(--statusbar-h); display:flex; align-items:center; gap:14px; padding:0 22px; position:relative;
  background:#fff; border-bottom:1px solid var(--border); transition:background .5s,border-color .5s}
.sb-state{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:13px; letter-spacing:.5px; color:#15803D}
.sb-dot{width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(34,197,94,.18); transition:background .4s,box-shadow .4s}
.sb-id{font-weight:700; font-size:13px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw}
.sb-spacer{flex:1}
.sb-count{font-variant-numeric:tabular-nums; font-weight:800; font-size:16px; color:var(--text-2); letter-spacing:.5px}
.sb-prog{position:relative; width:170px; height:6px; border-radius:999px; background:var(--border-2); overflow:hidden}
.sb-prog-bar{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--primary); transition:width .9s linear}
body.state-incident .statusbar{background:#FEF2F2; border-bottom-color:#FBD0D0}
body.state-incident .sb-state{color:#B42318}
body.state-incident .sb-dot{background:var(--critical); box-shadow:0 0 0 3px rgba(220,38,38,.20); animation:sb-pulse 1s infinite}
body.state-incident .sb-prog-bar{background:var(--critical)}
body.state-investigation .statusbar{background:#FFFBEB; border-bottom-color:#FBE2B0}
body.state-investigation .sb-state{color:#9A6700}
body.state-investigation .sb-dot{background:var(--warning); box-shadow:0 0 0 3px rgba(245,158,11,.20)}
body.state-investigation .sb-prog-bar{background:var(--warning)}
body.state-recovery .statusbar{background:#EFF6FF; border-bottom-color:#D6E6FF}
body.state-recovery .sb-state{color:var(--primary-ink)}
body.state-recovery .sb-dot{background:var(--primary); box-shadow:0 0 0 3px rgba(11,115,254,.20)}
body.state-recovery .sb-prog, body.state-recovery .sb-count{visibility:hidden}
@keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* NO full-screen map vignette: incident state is shown by the AFFECTED DISTRICTS (crit/warn
   polygons + labels), the status bar, KPI tiles and the ticker — a whole-screen red wash made
   the wall look fake. (Removed 2026-06-11, founder feedback.) */

/* Event ticker (bottom) */
.ticker{height:var(--ticker-h); background:#0E1626; overflow:hidden; position:relative; display:flex; align-items:center; border-top:1px solid #1E2A40}
.ticker::before, .ticker::after{content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none}
.ticker::before{left:0; background:linear-gradient(90deg,#0E1626,transparent)}
.ticker::after{right:0; background:linear-gradient(270deg,#0E1626,transparent)}
.ticker-track{display:inline-flex; align-items:center; white-space:nowrap; will-change:transform}
.tk-run{display:inline-flex; align-items:center}
.tk{display:inline-flex; align-items:center; gap:9px; padding:0 6px; font-size:13px; font-weight:600; color:#C9D4E5}
.tk-x{white-space:nowrap}
.tk-sep{padding:0 18px; color:#3A4A66; font-weight:700}
.tk-tag{font-size:10px; font-weight:800; letter-spacing:.6px; padding:2px 7px; border-radius:5px; background:#1E2A40; color:#9DB2D4}
.k-rum{background:#13294B; color:#7FB0FF} .k-apm{background:#2E1A4D; color:#C99CFF}
.k-trace{background:#0E3A34; color:#5FE3C7} .k-infra{background:#3A2A0E; color:#F2C16B}
.k-net{background:#0E2E3A; color:#6BD6F2} .k-biz{background:#11341F; color:#79E0A0}
.k-mcp{background:#3A0E2A; color:#F26BC1} .k-ok{background:#11341F; color:#79E0A0}
.k-sys{background:#1E2A40; color:#9DB2D4}
body.state-incident .ticker{border-top-color:#5B1A1A}
/* ticker scroll is JS-driven (show.js scrollTicker) — continuous, no reset on content change */

/* Incident overlay ("ИНЦИДЕНТ ЗАПУЩЕН" → shrink) */
.incident-overlay{position:fixed; inset:0; z-index:1200; display:grid; place-items:center; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(220,38,38,.30), rgba(14,22,38,.66) 72%);
  opacity:0; visibility:hidden; transition:opacity .45s}
.incident-overlay.show{opacity:1; visibility:visible}
.incident-overlay.shrink{opacity:0; visibility:visible; transition:opacity .65s}
.iov-card{text-align:center; transform:scale(.88); transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.incident-overlay.show .iov-card{transform:scale(1)}
.incident-overlay.shrink .iov-card{transform:scale(.42)}
.iov-kicker{display:inline-block; font-size:18px; font-weight:800; letter-spacing:3px; color:#fff; background:var(--critical);
  padding:9px 22px; border-radius:999px; box-shadow:0 14px 44px -8px rgba(220,38,38,.7); animation:iov-flash 1.1s ease-in-out infinite}
.iov-title{margin-top:20px; font-size:64px; font-weight:800; letter-spacing:-1px; color:#fff; text-shadow:0 6px 34px rgba(0,0,0,.55)}
.iov-sub{margin-top:12px; font-size:18px; font-weight:600; color:rgba(255,255,255,.82); font-variant-numeric:tabular-nums}
@keyframes iov-flash{0%,100%{opacity:1}50%{opacity:.5}}

@media (max-width:759px){
  .statusbar, .ticker{display:none}
  .iov-title{font-size:34px} .iov-sub{font-size:14px} .iov-kicker{font-size:14px; letter-spacing:2px}
}

/* Mobile HUD — floating bottom-left card: agenda (Сейчас/Далее) + live incident timer.
   Hidden on the desktop wall (status bar + header already carry this). */
.mhud{display:none}
@media (max-width:759px){
  .mhud{display:block; position:absolute; left:10px; bottom:10px; z-index:10; max-width:80vw;
    background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 26px -10px rgba(16,33,64,.4); padding:9px 11px}
  .mhud-row{display:flex; gap:7px; align-items:center; line-height:1.4}
  .mhud-row + .mhud-row{margin-top:4px}
  .mhud-k{flex:none; font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff; background:#030c57; border-radius:999px; padding:2px 7px; min-width:48px; text-align:center}
  .mhud-v{font-size:12px; font-weight:700; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64vw}
  .mhud-inc{display:none; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border-2)}
  body.state-incident .mhud-inc, body.state-investigation .mhud-inc, body.state-recovery .mhud-inc{display:flex}
  .mhud-state{font-size:11px; font-weight:800; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}
  .mhud-timer{margin-left:auto; flex:none; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); letter-spacing:.5px}
  body.state-incident .mhud-state, body.state-incident .mhud-timer{color:var(--critical)}
  body.state-investigation .mhud-state, body.state-investigation .mhud-timer{color:#9A6700}
  body.state-recovery .mhud-state{color:var(--primary-ink)}
}

/* ============================================================================
   Live Wall D — on-screen GMONIT Investigation panel + MCP Incident Assistant card
   ============================================================================ */
.invpanel{position:absolute; left:0; top:0; bottom:0; width:440px; max-width:42vw; z-index:8;
  background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-right:1px solid var(--border); box-shadow:8px 0 30px -12px rgba(16,33,64,.35);
  transform:translateX(-104%); transition:transform .55s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding:16px 16px 12px; overflow-y:auto}
body.state-incident .invpanel, body.state-investigation .invpanel, body.state-recovery .invpanel{transform:translateX(0)}
.inv-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.inv-h-title{font-size:14px; font-weight:800; color:var(--primary-ink); letter-spacing:.2px}
.inv-run{font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.inv-steps{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px}
.inv-step{display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; opacity:.5; transition:opacity .4s, border-color .4s, box-shadow .4s}
.inv-step.active{opacity:1; border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}
.inv-step.done{opacity:1}
.inv-n{flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-weight:800; font-size:12px; background:var(--primary-tint); color:var(--primary-ink)}
.inv-step.active .inv-n{background:var(--primary); color:#fff; animation:inv-pulse 1s ease-in-out infinite}
.inv-step.done .inv-n{background:var(--success); color:#fff}
.inv-body{flex:1; min-width:0}
.inv-t{font-size:13px; font-weight:700; color:var(--text)}
.inv-f{font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px}
.inv-st{flex:none; align-self:center; font-size:11px; font-weight:800}
.inv-step.active .inv-st::after{content:'анализ…'; color:var(--primary)}
.inv-step.done .inv-st::after{content:'✓'; color:var(--success); font-size:15px}
@keyframes inv-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.inv-mcp{margin-top:auto; background:var(--primary-tint); border:1px solid #D6E6FF; border-radius:12px; padding:13px; opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s}
.inv-mcp.show{opacity:1; transform:none}
.inv-mcp-h{font-weight:800; color:var(--primary-ink); font-size:13.5px; margin-bottom:7px}
.inv-mcp.show:not(.ready) .inv-mcp-h::after{content:' · анализирует…'; font-weight:600; color:var(--muted)}
.inv-mcp-tools{display:flex; flex-wrap:wrap; gap:5px}
.mcp-tool{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; background:#fff; border:1px solid #D6E6FF; border-radius:6px; padding:2px 6px; color:var(--primary-ink)}
.inv-mcp-analysis{font-size:12.5px; color:var(--text-2); line-height:1.5; max-height:0; overflow:hidden; opacity:0; transition:max-height .6s ease, opacity .5s; margin-top:0}
.inv-mcp.ready .inv-mcp-analysis{max-height:360px; opacity:1; margin-top:8px}
.inv-mcp-analysis p{margin:5px 0} .inv-mcp-analysis b{color:var(--text)}
.inv-mcp-analysis ul{margin:5px 0; padding-left:17px}
.inv-rec{color:var(--primary-ink); font-weight:600}
@media (max-width:759px){ .invpanel{display:none} }   /* wall feature; mobile uses the HUD + KPIs */

/* ============================================================================
   Synthetic storefront (/shop) — the user-facing app that drives the RUM→APM trace
   ============================================================================ */
body.shop{overflow:auto; background:var(--bg)}
.shop-main{max-width:680px; margin:0 auto; padding:22px 18px 40px}
.shop-h{font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-2); margin-bottom:12px}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px}
.shop-card{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-card); font-family:inherit; cursor:pointer; text-align:left}
.shop-card.sel{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), var(--shadow-card)}
.sc-n{font-size:15px; font-weight:700; color:var(--text)}
.sc-a{font-size:14px; font-weight:800; color:var(--primary-ink)}
.shop-order{display:block; width:100%; margin-top:18px; padding:16px; border:none; border-radius:12px; background:var(--primary); color:#fff; font-size:17px; font-weight:800; font-family:inherit; cursor:pointer}
.shop-order:active{transform:scale(.99)}
.shop-result{margin-top:14px; min-height:22px; font-size:15px; font-weight:700; text-align:center}
.shop-result.pending{color:var(--muted)} .shop-result.good{color:#15803D} .shop-result.bad{color:var(--critical)}

/* ============================================================================
   NETWORK SHOW (CITY-026 «Проблемы со связью») — cinematic centre stage.
   Accents: incident = red/orange · investigation/MCP = blue/violet · recovery = green.
   Everything here is wall-only (hidden on phones) and gated by body.net-incident.
   ============================================================================ */

/* ---- (4) Investigation panel: richer, sequential step cards (story spine) ---- */
.inv-steps{padding:2px}
.inv-step{flex-direction:column; gap:0; padding:11px 13px}
.inv-step .inv-row{display:flex; gap:11px; align-items:flex-start; width:100%}
.inv-t{font-size:14px; font-weight:800}
.inv-step.active .inv-t{font-size:15.5px}
.inv-text{font-size:12.5px; color:var(--text-2); line-height:1.45; margin-top:7px; display:none}
.inv-metrics{display:none; flex-wrap:wrap; gap:6px; margin-top:8px}
.inv-m{font-size:11.5px; font-weight:700; background:#F2F6FC; border:1px solid var(--border); border-radius:7px; padding:3px 8px; color:var(--text-2); font-variant-numeric:tabular-nums}
.inv-m b{color:var(--text)}
.inv-m.crit{background:#FEF2F2; border-color:#FBD0D0; color:#B42318} .inv-m.crit b{color:#B42318}
.inv-m.ok{background:#ECFDF3; border-color:#C5EFD2; color:#15803D} .inv-m.ok b{color:#15803D}
.inv-verdict{font-size:12px; font-weight:700; color:var(--primary-ink); margin-top:8px; padding-left:9px; border-left:3px solid var(--primary); display:none}
.inv-step.active .inv-text, .inv-step.active .inv-metrics{display:flex}
.inv-step.active .inv-text{display:block}
.inv-step.active .inv-verdict, .inv-step.done .inv-verdict{display:block}
.inv-step.active{box-shadow:0 0 0 2px var(--primary); transform:scale(1.015)}
.inv-step.done{opacity:.92}
.inv-step.crit.active{box-shadow:0 0 0 2px var(--critical)} .inv-step.crit.active .inv-n{background:var(--critical)}
.inv-step.crit.active .inv-verdict{color:#B42318; border-left-color:var(--critical)}

/* ---- centre stage container ---- */
.netstage{display:none}
body.incident-active .netstage{display:flex; position:absolute; left:472px; right:18px; top:14px; bottom:14px; z-index:7;
  flex-direction:column; align-items:center; justify-content:center; gap:16px; pointer-events:none}
.ns-topo, .ns-evidence, .ns-mcp{width:100%; max-width:760px}
.ns-evidence, .ns-mcp{display:none}
.ns-topo.on, .ns-evidence.on, .ns-mcp.on{animation:ns-rise .5s cubic-bezier(.2,.8,.2,1) both}
.ns-evidence.on, .ns-mcp.on{display:block}
.ns-topo{display:none} body.net-incident .ns-topo.on{display:block}
@keyframes ns-rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---- (2) Network topology ---- */
.ns-topo{background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:18px; padding:18px 20px 16px;
  box-shadow:0 24px 60px -24px rgba(16,33,64,.5)}
.nt-title{font-size:14px; font-weight:700; color:var(--text-2); text-align:center; margin-bottom:14px}
.nt-title b{color:var(--text)}
.nt-flow{display:flex; align-items:center; gap:0}
.nt-node{flex:0 0 auto; width:122px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  padding:12px 8px; border-radius:14px; border:2px solid var(--border); background:#fff; transition:border-color .4s, box-shadow .4s, background .4s}
.nt-ic{font-size:26px; line-height:1.1}
.nt-nm{font-size:12.5px; font-weight:800; color:var(--text); white-space:nowrap}
.nt-meta{font-size:10.5px; font-weight:600; color:var(--muted); line-height:1.2}
.nt-node.ok{border-color:#9BE3B6; background:#F4FDF7} .nt-node.ok .nt-nm{color:#15803D}
.nt-node.crit{border-color:var(--critical); background:#FEF3F3; box-shadow:0 0 0 4px rgba(220,38,38,.12); animation:nt-node-pulse 1.3s ease-in-out infinite}
.nt-node.crit .nt-nm{color:#B42318} .nt-node.crit .nt-meta{color:#C2410C; font-weight:700}
@keyframes nt-node-pulse{0%,100%{box-shadow:0 0 0 4px rgba(220,38,38,.12)}50%{box-shadow:0 0 0 8px rgba(220,38,38,.05)}}
.nt-wire{flex:1 1 auto; position:relative; height:40px; min-width:34px}
.nt-rail{position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); border-radius:3px; background:#CBD6E6}
.nt-wire.ok .nt-rail{background:#9BE3B6}
.nt-wire.crit .nt-rail{background:repeating-linear-gradient(90deg,#DC2626 0 10px,#F8B4B4 10px 18px); background-size:200% 100%; animation:nt-flow-dash .7s linear infinite}
@keyframes nt-flow-dash{to{background-position:-28px 0}}
.nt-packets{position:absolute; inset:0; overflow:hidden}
.pk{position:absolute; top:50%; left:0; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#0B73FE; box-shadow:0 0 7px rgba(11,115,254,.7); animation:pk-move 1.5s linear forwards}
.pk.drop{animation:pk-drop 1.1s ease-in forwards}
.pk.drop::after{content:"✕"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:11px; font-weight:800; color:var(--critical); opacity:0}
.pk.drop.x{background:transparent; box-shadow:none} .pk.drop.x::after{opacity:1}
@keyframes pk-move{from{left:2%} to{left:96%}}
@keyframes pk-drop{0%{left:2%; opacity:1} 55%{left:50%; opacity:1} 70%{opacity:.9} 100%{left:54%; opacity:0}}
.nt-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:15px}
.nt-chip{font-size:12px; font-weight:700; color:var(--text-2); background:#F2F6FC; border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-variant-numeric:tabular-nums}
.nt-chip b{color:var(--text)}
.nt-chip.crit{background:#FEF2F2; border-color:#FBD0D0; color:#B42318} .nt-chip.crit b{color:#B42318}
/* recovery: the whole path turns green */
body.net-recover .nt-node.crit{border-color:#9BE3B6; background:#F4FDF7; box-shadow:none; animation:none}
body.net-recover .nt-node.crit .nt-nm{color:#15803D} body.net-recover .nt-node.crit .nt-meta{color:#15803D}
body.net-recover .nt-wire.crit .nt-rail{background:#9BE3B6; animation:none}
body.net-recover .nt-chip.crit{background:#ECFDF3; border-color:#C5EFD2; color:#15803D} body.net-recover .nt-chip.crit b{color:#15803D}
body.net-recover .nt-packets{display:none}

/* ---- (3) Evidence: one frontend, two paths ---- */
.ns-evidence{background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:18px; padding:17px 22px 14px; box-shadow:0 24px 60px -24px rgba(16,33,64,.5)}
.ev-h{font-size:15px; font-weight:800; color:var(--text); text-align:center; margin-bottom:14px}
.ev-row{margin-bottom:13px}
.ev-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px}
.ev-lbl{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; font-weight:700; color:var(--text-2)}
.ev-badge{font-size:10px; font-weight:800; letter-spacing:.6px; padding:2px 8px; border-radius:6px}
.ev-badge.crit{background:#FEE2E2; color:#B42318} .ev-badge.ok{background:#DCFCE7; color:#15803D}
.ev-row{display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:center}
.ev-top{grid-column:1 / -1}
.ev-bar{height:18px; border-radius:6px; background:#EEF2F8; overflow:hidden}
.ev-fill{display:block; height:100%; border-radius:6px}
.ev-fill.crit{background:linear-gradient(90deg,#F97316,#DC2626); animation:ev-grow 1s cubic-bezier(.2,.8,.2,1) both}
.ev-fill.ok{background:#22C55E}
@keyframes ev-grow{from{width:0}}
.ev-val{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; min-width:64px; text-align:right}
.ev-row.crit .ev-val{color:var(--critical)} .ev-row.ok .ev-val{color:#15803D}
.ev-foot{text-align:center; font-size:17px; font-weight:700; color:var(--text-2); margin-top:6px}
.ev-foot b{color:var(--critical); font-size:19px; font-weight:800}

/* ---- (5) MCP moment ---- */
.ns-mcp{max-width:680px; background:linear-gradient(160deg,#10162A,#1B2348); border:1px solid #2C3B6B; border-radius:20px;
  padding:20px 22px; box-shadow:0 30px 80px -28px rgba(8,12,28,.8); color:#E7ECF7}
.mcpm-h{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.mcpm-badge{font-size:14px; font-weight:800; letter-spacing:.3px; color:#fff; background:linear-gradient(90deg,#0B73FE,#7C3AED); padding:6px 13px; border-radius:999px}
.mcpm-sub{font-size:12.5px; color:#9FB0D6}
.mcpm-tools{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px}
.mcpm-tool{display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;
  background:rgba(124,58,237,.12); border:1px solid #3A4684; border-radius:8px; padding:4px 9px; color:#C9B8FF; opacity:.4; transition:opacity .3s, border-color .3s}
.mcpm-tool .tk-c{color:#5FE3C7; font-weight:800; opacity:0; transition:opacity .25s}
.mcpm-tool.done{opacity:1; border-color:#5FE3C7} .mcpm-tool.done .tk-c{opacity:1}
.mcpm-verdict{display:flex; align-items:center; gap:20px; opacity:0; max-height:0; overflow:hidden; transition:opacity .5s, max-height .6s}
.ns-mcp.ready .mcpm-verdict{opacity:1; max-height:260px}
.mcpm-rcwrap{flex:1}
.mcpm-rc-k{font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#8AA0CE}
.mcpm-rc-v{font-size:20px; font-weight:800; color:#fff; line-height:1.25; margin-top:3px}
.mcpm-rec{font-size:13px; color:#C2CEE8; margin-top:10px} .mcpm-rec b{color:#fff}
.mcpm-conf{flex:0 0 auto; position:relative; width:104px; text-align:center}
.conf-ring{width:88px; height:88px; transform:rotate(-90deg)}
.conf-ring .cr-bg{fill:none; stroke:#2C3B6B; stroke-width:7}
.conf-ring .cr-fg{fill:none; stroke:url(#cgrad); stroke:#5FE3C7; stroke-width:7; stroke-linecap:round; stroke-dasharray:195; stroke-dashoffset:195; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.conf-num{position:absolute; left:0; right:0; top:30px; font-size:23px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums}
.conf-cap{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#8AA0CE; margin-top:30px}
.mcpm-ev{list-style:none; margin:14px 0 0; padding:0; display:none; flex-direction:column; gap:5px}
.ns-mcp.ready .mcpm-ev{display:flex}
.mcpm-ev li{font-size:12px; color:#C2CEE8; padding-left:18px; position:relative; line-height:1.4}
.mcpm-ev li::before{content:"✓"; position:absolute; left:0; color:#5FE3C7; font-weight:800}

/* ---- (10) audience quiz ---- */
.quizpanel{display:none}
body.net-incident .quizpanel{display:block; position:absolute; right:16px; bottom:16px; width:316px; z-index:9; pointer-events:none;
  background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:16px; padding:15px 16px; box-shadow:0 22px 54px -22px rgba(16,33,64,.5)}
.qz-h{font-size:17px; font-weight:800; color:var(--text)}
.qz-sub{font-size:11.5px; font-weight:700; color:var(--primary); margin:2px 0 11px}
.qz-opts{display:flex; flex-direction:column; gap:7px}
.qz-opt{position:relative; display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff}
.qz-bar{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--primary-tint); z-index:0; transition:width .5s ease}
.qz-lbl{position:relative; z-index:1; flex:1; font-size:13px; font-weight:700; color:var(--text-2)}
.qz-n{position:relative; z-index:1; font-size:13px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums}
.qz-opt.correct{border-color:var(--success); box-shadow:0 0 0 2px rgba(34,197,94,.35)}
.qz-opt.correct .qz-bar{background:#DCFCE7} .qz-opt.correct .qz-lbl{color:#15803D}
.qz-opt.correct .qz-lbl::after{content:" ✓ root cause"; font-weight:800; color:#15803D}
.qz-opt.wrong{opacity:.55}

/* ---- (8) priority toasts ---- */
.toasts{position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:11; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:70%}
.toast{display:flex; align-items:center; gap:11px; padding:11px 18px; border-radius:12px; background:#0E1626; color:#fff; font-size:15px; font-weight:700;
  box-shadow:0 16px 40px -12px rgba(8,12,28,.6); animation:toast-in .35s cubic-bezier(.2,.8,.2,1) both}
.toast.out{animation:toast-out .4s ease forwards}
.toast .tt-tag{font-size:10px; font-weight:800; letter-spacing:.6px; padding:3px 8px; border-radius:6px; background:#1E2A40; color:#9DB2D4}
.toast.crit{background:linear-gradient(95deg,#7F1D1D,#B42318)} .toast.crit .tt-tag{background:rgba(255,255,255,.18); color:#fff}
.toast.mcp{background:linear-gradient(95deg,#1B2348,#4C1D95)} .toast.mcp .tt-tag{background:rgba(255,255,255,.18); color:#fff}
.toast.ok{background:linear-gradient(95deg,#14532D,#15803D)} .toast.ok .tt-tag{background:rgba(255,255,255,.18); color:#fff}
@keyframes toast-in{from{opacity:0; transform:translateY(-12px) scale(.96)}to{opacity:1; transform:none}}
@keyframes toast-out{to{opacity:0; transform:translateY(-10px)}}

/* ---- (1) incident overlay: network drama (signal lost / packet loss) ---- */
.incident-overlay.net{background:radial-gradient(circle at 50% 42%, rgba(220,38,38,.42), rgba(8,12,24,.82) 70%)}
.iov-fx{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .4s}
.incident-overlay.net.show .iov-fx{opacity:1}
.iov-fx span{position:absolute; left:-10%; width:120%; height:2px; background:linear-gradient(90deg,transparent,rgba(255,120,120,.9),transparent); animation:fx-sweep 1.6s linear infinite}
.iov-fx span:nth-child(1){top:26%; animation-delay:0s} .iov-fx span:nth-child(2){top:42%; animation-delay:.3s}
.iov-fx span:nth-child(3){top:58%; animation-delay:.6s} .iov-fx span:nth-child(4){top:71%; animation-delay:.15s} .iov-fx span:nth-child(5){top:84%; animation-delay:.45s}
@keyframes fx-sweep{0%{transform:translateX(-8%); opacity:0}10%{opacity:1}50%{transform:translateX(6%)}90%{opacity:1}100%{transform:translateX(10%); opacity:0}}
.iov-kicker.net{background:#0E1626; box-shadow:0 14px 44px -8px rgba(220,38,38,.7)}

/* ---- (9) recovery banner ---- */
.recovery-banner{position:fixed; inset:0; z-index:1100; display:grid; place-items:center; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(34,197,94,.22), rgba(14,22,38,.0) 60%); opacity:0; visibility:hidden; transition:opacity .5s}
.recovery-banner.show{opacity:1; visibility:visible}
.rb-card{text-align:center; transform:scale(.9); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.recovery-banner.show .rb-card{transform:scale(1)}
.rb-check{width:80px; height:80px; margin:0 auto 14px; border-radius:50%; background:#22C55E; color:#fff; font-size:44px; font-weight:800; display:grid; place-items:center; box-shadow:0 16px 48px -10px rgba(34,197,94,.7); animation:rb-pop .6s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes rb-pop{from{transform:scale(.2); opacity:0}to{transform:scale(1); opacity:1}}
.rb-title{font-size:46px; font-weight:800; color:#fff; letter-spacing:-.5px; text-shadow:0 6px 30px rgba(0,0,0,.5)}
.rb-sub{font-size:18px; font-weight:600; color:rgba(255,255,255,.85); margin-top:8px}

/* keep the whole network stage off phones (mobile keeps HUD + KPIs) */
@media (max-width:759px){
  body.net-incident .netstage, body.net-incident .quizpanel, .toasts{display:none !important}
  .rb-title{font-size:30px} .rb-sub{font-size:14px} .rb-check{width:56px; height:56px; font-size:30px}
}

/* ============================================================================
   /shop v2 — полный флоу заказа (адрес → магазин → меню → оплата → трекинг)
   ============================================================================ */
.sf-stepper{display:inline-flex; align-items:center; gap:6px}
.sf-st{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:#F2F6FC; color:var(--muted); border:1px solid var(--border)}
.sf-st.on{background:var(--primary); color:#fff; border-color:var(--primary)}
.sf-st.done{background:#ECFDF3; color:#15803D; border-color:#C5EFD2}
.sf-st-sep{width:10px; height:1px; background:var(--border)}
.sf-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:22px; margin-bottom:14px}
.sf-kicker{font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--primary)}
.sf-kicker.ok{color:#15803D}
.sf-card h2{margin:.15em 0 .35em; font-size:23px; font-weight:800; letter-spacing:-.3px}
.sf-sub{color:var(--muted); font-size:13.5px; margin:.2em 0 1em}
.sf-sub a{color:var(--primary); font-weight:600}
.sf-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.sf-chip{padding:9px 14px; border:1px solid var(--border); border-radius:999px; background:#fff; font:600 13.5px "Manrope",sans-serif; color:var(--text-2); cursor:pointer}
.sf-chip.sel{background:var(--primary); border-color:var(--primary); color:#fff}
.sf-addr-row{display:flex; gap:8px; margin-bottom:14px}
.sf-in{flex:1; min-width:0; padding:12px; border:1px solid var(--border); border-radius:10px; font:600 14px "Manrope",sans-serif; background:#fff; color:var(--text)}
.sf-in-house{max-width:84px}
.sf-btn{display:block; width:100%; padding:15px; border:none; border-radius:12px; background:var(--primary); color:#fff; font:800 16px "Manrope",sans-serif; cursor:pointer}
.sf-btn:disabled{opacity:.5; cursor:default}
.sf-btn:active:not(:disabled){transform:scale(.99)}
.sf-btn.ghost{background:#fff; color:var(--text-2); border:1px solid var(--border); margin-top:12px}
.sf-btn-inline{width:auto; padding:11px 18px; font-size:14.5px}
.sf-stores{display:flex; flex-direction:column; gap:9px}
.sf-store{display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--border); border-radius:13px; background:#fff; cursor:pointer; text-align:left; font-family:inherit}
.sf-store:hover{border-color:#BFDAFF}
.sf-store-ic{font-size:25px; flex:none}
.sf-store-b{flex:1; min-width:0}
.sf-store-n{display:block; font-size:15px; font-weight:700; color:var(--text)}
.sf-store-m{display:block; font-size:12px; color:var(--muted)}
.sf-store-eta{flex:none; font-size:13px; font-weight:800; color:#15803D; background:#ECFDF3; border:1px solid #C5EFD2; border-radius:999px; padding:4px 10px}
.sf-store-eta.far{color:#9A6700; background:#FFF7E6; border-color:#FBE2B0}
.sf-items{display:flex; flex-direction:column}
.sf-item{display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--border-2)}
.sf-item-n{flex:1; font-size:14.5px; font-weight:600; color:var(--text)}
.sf-item-a{font-size:14px; font-weight:800; color:var(--primary-ink); white-space:nowrap}
.sf-q{width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:#fff; font:800 17px "Manrope",sans-serif; color:var(--primary); cursor:pointer}
.sf-q-add{background:var(--primary-tint); border-color:#D6E6FF}
.sf-qty{display:inline-flex; align-items:center; gap:9px}
.sf-qty b{min-width:16px; text-align:center; font-size:15px}
.sf-cartbar{position:sticky; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#0E1626; color:#fff; border-radius:14px; padding:12px 16px; font-size:14.5px; font-weight:700;
  box-shadow:0 14px 36px -10px rgba(8,12,28,.55)}
.sf-sum{border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:12px}
.sf-line{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--text-2); padding:3px 0}
.sf-line-total{border-top:1px solid var(--border-2); margin-top:6px; padding-top:8px; font-weight:800; color:var(--text); font-size:15px}
.sf-cardform{background:#F8FAFD; border:1px solid var(--border); border-radius:12px; padding:13px; margin-bottom:14px}
.sf-cc-row{display:flex; gap:8px; margin-bottom:8px}
.sf-cc-note{margin:2px 0 0; font-size:11.5px; color:var(--muted-2)}
.sf-pending{color:var(--muted); font-weight:700; margin:10px 0 0}
.sf-fail{color:var(--critical); font-weight:700; margin:10px 0 0}
.sf-track{display:flex; flex-direction:column; gap:9px; margin:14px 0 10px}
.sf-stage{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--muted-2)}
.sf-stg-dot{width:12px; height:12px; border-radius:50%; background:#E2E8F0; flex:none}
.sf-stage.on{color:var(--primary-ink); font-weight:800}
.sf-stage.on .sf-stg-dot{background:var(--primary); box-shadow:0 0 0 4px rgba(11,115,254,.15); animation:kpi-flash 1.2s ease-in-out infinite}
.sf-stage.done{color:#15803D}
.sf-stage.done .sf-stg-dot{background:#22C55E}
.sf-stage.fail{color:var(--critical)} .sf-stage.fail .sf-stg-dot{background:var(--critical)}
.sf-eta{font-size:17px; font-weight:800; color:var(--text); margin:4px 0 10px}
.sf-warn{font-size:13px; font-weight:700; color:#9A6700; background:#FFF7E6; border:1px solid #FBE2B0; border-radius:10px; padding:8px 12px; margin-bottom:10px}
.sf-map{height:300px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#dfe6f0}
.sf-mk{font-size:22px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.sf-mk-c{font-size:26px; animation:bob 1.5s ease-in-out infinite}
@media (max-width:759px){ .sf-map{height:240px} .sf-stepper{display:none} }

/* ============================================================================
   Interactive program popup (программа дня) — opened from the agenda; PDF-styled.
   ============================================================================ */
.ag-open{cursor:pointer}
.hn-cal{width:15px; height:15px; margin-left:7px; flex:none; fill:none; stroke:var(--primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.65; vertical-align:middle; transition:opacity .15s, transform .15s}
.header-now:hover .hn-cal{opacity:1; transform:scale(1.08)}
.header-now:hover .hn-title, .sb-next:hover .sb-next-title{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--primary)}
.mhud-cal{margin-left:auto; opacity:.6}

.agm{position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px;
  background:rgba(14,22,38,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s}
.agm.open{opacity:1; visibility:visible}
.agm-backdrop{position:absolute; inset:0}
.agm-card{position:relative; z-index:1; width:min(760px,100%); max-height:88vh; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(16,33,64,.55); padding:28px 30px 22px;
  transform:translateY(26px) scale(.98); transition:transform .38s cubic-bezier(.2,.85,.25,1)}
.agm.open .agm-card{transform:none}
/* float the close button over the FIXED header (card no longer scrolls; only .agm-list does)
   so the × stays reachable however far the program is scrolled */
.agm-x{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; z-index:5;
  box-shadow:0 4px 14px -4px rgba(16,33,64,.28); transition:color .15s, border-color .15s, background .15s}
.agm-x:hover{color:var(--text); border-color:#BFDAFF; background:var(--primary-tint)}
.agm-head{position:relative; margin-bottom:14px; flex:0 0 auto}
.agm-logo{height:26px; width:auto; display:block; margin-bottom:14px}
.agm-date{position:absolute; top:0; right:44px; font-size:13px; font-weight:700; color:var(--primary-ink); background:var(--primary-tint); border:1px solid #D6E6FF; border-radius:999px; padding:4px 12px}
.agm-title{margin:0; font-size:30px; font-weight:800; letter-spacing:-.5px; color:var(--primary-ink)}
.agm-sub{margin:5px 0 0; font-size:14px; color:var(--muted)}
.agm-list{list-style:none; margin:8px 0 0; padding:0; flex:1 1 auto; overflow-y:auto; min-height:0;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.ag-row{display:grid; grid-template-columns:128px 1fr; gap:18px; padding:15px 12px; border-top:1px solid var(--border-2); border-radius:10px;
  transition:background .5s ease, opacity .45s ease}
.ag-row:first-child{border-top:none}
.ag-time{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.ag-tt{font-size:15px; font-weight:800; color:var(--primary-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.ag-now-badge{display:none; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#fff; background:var(--primary-ink); border-radius:999px; padding:2px 8px}
.ag-title{font-size:15.5px; font-weight:700; color:var(--text); line-height:1.35}
.ag-demo{margin-left:8px; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#15803D; background:#ECFDF3; border:1px solid #C5EFD2; border-radius:999px; padding:2px 7px; white-space:nowrap; vertical-align:middle}
.ag-rsub{font-size:13px; color:var(--muted); margin-top:3px; line-height:1.4}
.ag-spk{display:flex; flex-direction:column; gap:3px; margin-top:9px}
.ag-spk.panel{display:grid; grid-template-columns:1fr 1fr; gap:9px 18px}
.ag-person{display:flex; flex-direction:column; line-height:1.3}
.ag-pn{font-size:13px; font-weight:700; color:var(--text-2)}
.ag-pr{font-size:12px; color:var(--muted)}
.ag-row.brk{background:#FAFBFD}
.ag-row.brk .ag-title{font-weight:600; color:var(--text-2)}
/* time states */
.ag-row.past{opacity:.42}
.ag-row.past .ag-tt{color:var(--muted-2)}
.ag-row.past .ag-title{color:var(--muted)}
.ag-row.now{background:var(--primary-tint); box-shadow:inset 3px 0 0 var(--primary-ink); opacity:1}
.ag-row.now .ag-title{color:var(--primary-ink)}
.ag-row.now .ag-now-badge{display:inline-block; animation:agpop .42s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes agpop{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
@media (max-width:640px){
  .agm{padding:0}
  .agm-card{width:100%; max-height:100vh; height:100vh; border-radius:0; padding:20px 16px}
  .agm-title{font-size:23px}
  .agm-date{position:static; display:inline-block; margin-bottom:10px}
  .ag-row{grid-template-columns:1fr; gap:7px; padding:13px 8px}
  .ag-time{flex-direction:row; align-items:center; gap:10px}
  .ag-spk.panel{grid-template-columns:1fr}
}

/* /join — compact "До / Сейчас / Далее" program widget (tap → opens the full popup) */
.ja-wrap{max-width:480px; margin:0 auto; padding:16px 16px 0}
.ja{display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:12px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:border-color .15s, box-shadow .15s}
.ja:hover,.ja:focus-visible{border-color:#BFDAFF; box-shadow:0 0 0 1px var(--primary-tint), var(--shadow-card); outline:none}
.ja-head{display:flex; align-items:center; gap:8px; padding:2px 6px 9px; font-size:13px; font-weight:800;
  color:var(--primary-ink); border-bottom:1px solid var(--border-2); margin-bottom:6px}
.ja-head .hn-cal{width:17px; height:17px; flex:none}
.ja-go{margin-left:auto; font-size:11px; font-weight:700; color:#030c57}
.ja-row{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px}
.ja-row + .ja-row{margin-top:2px}
.ja-k{flex:0 0 50px; font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted)}
.ja-meta{display:flex; flex-direction:column; min-width:0}
.ja-when{font-size:12px; font-weight:700; color:var(--primary-ink); font-variant-numeric:tabular-nums}
.ja-title{font-size:13px; font-weight:600; color:var(--text); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ja-now{background:var(--primary-tint); box-shadow:inset 3px 0 0 var(--primary-ink)}
.ja-now .ja-k{color:var(--primary-ink)}
.ja-prev{opacity:.6}
.ja-prev .ja-when{color:var(--muted)}
.ja-empty{display:none}

/* backstage: collapsible "Программа дня" fold */
.bk-fold{border:0}
.bk-fold>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--text); user-select:none}
.bk-fold>summary::-webkit-details-marker{display:none}
.bk-fold>summary::before{content:"›"; font-size:18px; line-height:1; color:var(--muted); transition:transform .2s; display:inline-block}
.bk-fold[open]>summary::before{transform:rotate(90deg)}
.bk-fold>summary:hover{color:var(--primary-ink)}
.bk-fold>summary .bk-fold-hint{margin-left:auto; font-size:12px; font-weight:600; color:var(--muted)}
.bk-fold[open]>summary{margin-bottom:12px}

/* backstage: rich program editor */
.ag-ed{display:flex; flex-direction:column; gap:12px; margin-bottom:8px}
.ag-ed-row{border:1px solid var(--border); border-radius:12px; padding:12px; background:#FAFBFD; display:flex; flex-direction:column; gap:8px}
.ag-ed-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ag-ed-top .aef-from, .ag-ed-top .aef-to{width:62px; text-align:center}
.aef-dash{color:var(--muted-2)}
.aef-chk{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-2); font-weight:600; white-space:nowrap}
.aef-chk input{accent-color:var(--primary)}
.aef-sp{flex:1}
.aef-spk{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; resize:vertical; line-height:1.5}

/* ---- (7) map: "order stuck" chips at the user side + affected banner (network_issues) ---- */
.stuck{display:flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font:700 11px/1.2 "Manrope",sans-serif; white-space:nowrap; box-shadow:0 3px 10px -3px rgba(16,33,64,.45); transform:translateY(-4px); pointer-events:none}
.stuck-dot{width:8px; height:8px; border-radius:50%; flex:none}
.stuck.placing{background:#FFF7E6; color:#9A6700; border:1px solid #FBE2B0}
.stuck.placing .stuck-dot{background:#F59E0B; animation:kpi-flash 1s ease-in-out infinite}
.stuck.timeout{background:#FEF2F2; color:#B42318; border:1px solid #FBD0D0; animation:stuck-shake .45s ease}
.stuck.timeout .stuck-dot{background:#DC2626}
.stuck.done{background:#ECFDF3; color:#15803D; border:1px solid #C5EFD2}
.stuck.done .stuck-dot{background:#22C55E}
@keyframes stuck-shake{0%,100%{transform:translateY(-4px)}25%{transform:translate(-3px,-4px)}75%{transform:translate(3px,-4px)}}
.netbanner{background:#0E1626; color:#fff; font:800 13px/1.3 "Manrope",sans-serif; padding:7px 13px; border-radius:10px; box-shadow:0 10px 26px -8px rgba(8,12,28,.6); white-space:nowrap; border:1px solid #7F1D1D; animation:kpi-flash 1.6s ease-in-out infinite}

/* wall: highlighted courier of a REAL /shop order (blue route + badge) */
.shopc{display:flex; flex-direction:column; align-items:center; pointer-events:none}
.shopc-i{font-size:24px; line-height:1.1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); animation:bob 1.4s ease-in-out infinite}
.shopc-tag{margin-top:1px; font:800 10.5px/1.3 "Manrope",sans-serif; color:#fff; background:var(--primary); border-radius:999px; padding:2px 8px; white-space:nowrap; box-shadow:0 4px 12px -4px rgba(11,115,254,.6)}
.shopc.done .shopc-tag{background:#15803D}
.shopc.done .shopc-i{animation:none}
.shopc.fail .shopc-tag{background:var(--critical)}

/* ============================================================================
   IMPACT WALL rework — live synthetic-user widget + control/engineer screens
   ============================================================================ */
/* live synthetic-user journey (wall only; mirrors the real RUM a synthetic user generates) */
.liveuser{display:none}
body.impact .liveuser{display:block; position:absolute; left:16px; bottom:16px; z-index:8; width:250px;
  background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 44px -18px rgba(16,33,64,.42); padding:13px 14px}
.lu-h{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--text-2); margin-bottom:9px}
.lu-dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(34,197,94,.18)}
body.state-incident .lu-dot{background:var(--warning); box-shadow:0 0 0 3px rgba(245,158,11,.2)}
body.state-recovery .lu-dot{background:var(--primary); box-shadow:0 0 0 3px rgba(11,115,254,.2)}
.lu-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.lu-steps li{font-size:12px; font-weight:600; color:var(--muted-2); padding-left:20px; position:relative; line-height:1.5; transition:color .3s}
.lu-steps li::before{content:'○'; position:absolute; left:2px; color:var(--border)}
.lu-steps li.done{color:var(--text-2)} .lu-steps li.done::before{content:'✓'; color:var(--success)}
.lu-steps li.active{color:var(--primary-ink); font-weight:800} .lu-steps li.active::before{content:'◉'; color:var(--primary)}
.lu-steps li.stall{color:#B45309; font-weight:800} .lu-steps li.stall::before{content:'…'; color:var(--warning); font-weight:800}
.lu-status{margin-top:9px; font-size:12px; font-weight:700; color:var(--text-2)}
body.state-incident .lu-status{color:#B45309} body.state-recovery .lu-status{color:var(--primary-ink)}
@media (max-width:759px){ body.impact .liveuser{display:none} }

/* phone: static symptom preview (non-clickable) */
.ph-opt-static{opacity:.7; cursor:default}

/* ============================================================================
   FLUID WALL — blocks sized as % of the viewport (vh/vw), so the same markup fills
   any screen from a 720p booth TV to a 4K wall. Scoped to body.wall ≥760px; phones
   keep the mobile layout above. Only vh/vw/calc are used (old TV engines: no clamp()).
   ============================================================================ */
@media (min-width:760px){
  body.wall .header{height:6.2vh; min-height:50px}
  body.wall .header-inner{padding:0 1.4vw; gap:1.2vw}
  body.wall .logo{height:3vh; min-height:22px}
  /* booth typography: visitors read this from ~5 m — agenda title and clock go big */
  body.wall .header-clock{font-size:3.4vh}
  body.wall .hn-title, body.wall .sb-next-title{font-size:2.7vh; font-weight:700}
  /* equal-width "СЕЙЧАС"/"ДАЛЕЕ" chips → both titles start at the same x */
  body.wall .hn-label, body.wall .sb-next-label{font-size:1.6vh; width:9.5vh; min-width:76px; flex:none; box-sizing:border-box; padding:.5vh 0}
  body.wall .pill{height:3.6vh; font-size:1.6vh; padding:0 1.6vh}
  body.wall .pill .dot{width:1.1vh; height:1.1vh}

  body.wall .statusbar{height:4.3vh; min-height:34px; padding:0 1.4vw}
  body.wall .sb-state, body.wall .sb-id{font-size:1.55vh}
  body.wall .ticker{height:4.3vh; min-height:34px}
  body.wall .tk{font-size:1.55vh}
  body.wall .tk-tag{font-size:1.15vh}

  /* grid row = EXACTLY the container height (minmax(0,1fr)), never content-sized: an over-tall
     rail can no longer push the map/ticker past the viewport (Firefox line metrics differ from
     Chrome). Anything that still doesn't fit clips inside the rail instead of overlapping. */
  body.wall .monitor{padding:1.2vh 1.2vh; gap:1.2vh; overflow:hidden;
    grid-template-columns:minmax(0,1fr) minmax(280px,21vw); grid-template-rows:minmax(0,1fr)}

  /* right rail: the QR card is the fixed anchor (must be scannable from a distance), the six
     KPI tiles flex-share whatever height is left; sparklines compress/clip first */
  body.wall .rail{min-height:0; overflow:hidden; padding:1.2vh 1.2vw; gap:.9vh}
  body.wall .rail-head{font-size:1.6vh; margin-bottom:.3vh}
  body.wall .kpi-grid{flex:1 1 auto; min-height:0; overflow:hidden; gap:.8vh}
  body.wall .kpi{flex:1 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:.6vh 1.1vw; border-radius:1.2vh}
  body.wall .kpi-top, body.wall .kpi-val{flex:0 0 auto}
  body.wall .kpi-label{font-size:1.7vh}
  body.wall .kpi-delta{font-size:1.4vh}
  body.wall .kpi-val{font-size:3.2vh}
  body.wall .kpi-spark{flex:0 1 auto; height:2.2vh; min-height:0; margin-top:.4vh}
  body.wall .qr-card{flex:0 0 auto; gap:1.4vh; padding-top:1vh}
  body.wall .qr-box{flex:none; width:14vh; height:14vh; min-width:92px; min-height:92px}
  body.wall .qr-cap{font-size:1.8vh}
  body.wall .qr-box canvas, body.wall .qr-box img{width:100%; height:100%; image-rendering:pixelated}
  body.wall .qr-cap{font-size:1.55vh}

  /* live synthetic-user card over the map */
  body.wall .liveuser{width:15vw; min-width:230px; padding:1.3vh 1.3vh; border-radius:1.4vh}
  body.wall .lu-h{font-size:1.45vh; margin-bottom:.9vh}
  body.wall .lu-steps li{font-size:1.4vh}
  body.wall .lu-status{font-size:1.4vh; margin-top:.9vh}

  /* full-screen overlays scale too */
  body.wall .iov-kicker{font-size:1.9vh}
  body.wall .iov-title{font-size:6.4vh}
  body.wall .iov-sub{font-size:1.9vh}
  body.wall .rb-check{width:8.5vh; height:8.5vh; font-size:4.6vh}
  body.wall .rb-title{font-size:4.6vh}
  body.wall .rb-sub{font-size:1.9vh}
}

/* short layout viewports (TV browsers with tiny CSS viewports, half-screen windows):
   tighten the rail so all 6 KPI tiles + the QR card always fit */
@media (min-width:760px) and (max-height:580px){
  body.wall .kpi-spark{display:none}
  body.wall .kpi{padding:.8vh 1vw}
  body.wall .rail{gap:.7vh; padding:1vh 1vw}
  body.wall .kpi-grid{gap:.7vh}
  body.wall .qr-card{padding-top:.8vh; gap:1vh}
  /* qr-box keeps its 92px hard floor from the fluid block — the QR never shrinks away */
}

/* ---- TV profile (body.tv, set by city.js): drop GPU-expensive effects ---- */
.tv .courier-i{animation:none}                                     /* 22 infinite transform anims */
.tv .liveuser, .tv .invpanel, .tv .mhud, .tv .attract-card{-webkit-backdrop-filter:none; backdrop-filter:none}
.tv .maplibregl-ctrl-top-right{display:none}                       /* no pointer on a TV anyway */
.tv .kpi, .tv .zonelabel{transition:none}
.tv .pill .dot, .tv .sb-dot{box-shadow:none}
/* infinite opacity loops keep invalidating layers on weak compositors — statics on TV */
.tv .kpi.crit .kpi-val{animation:none}
.tv .zonelabel.crit{animation:none}
body.tv.state-incident .sb-dot{animation:none}
.tv .iov-kicker{animation:none}
.tv .stuck.placing .stuck-dot, .tv .netbanner{animation:none}

/* control + engineer screens */
.bk-sub{font-size:13px; color:var(--muted); line-height:1.5; margin:2px 0 10px}
.bk-sub code, #eng-inc code{font-family:ui-monospace,Menlo,Consolas,monospace; background:#F4F7FB; border:1px solid var(--border); border-radius:6px; padding:1px 6px}
.bk-lbl{font-size:12px; font-weight:700; color:var(--text-2)}
.bk-fault{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; font-weight:700; color:#B42318; background:#FEF2F2; border:1px solid #FBD0D0; border-radius:6px; padding:2px 7px}
.bk-pill-mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; font-weight:700; color:var(--text-2); background:#F2F6FC; border:1px solid var(--border); border-radius:6px; padding:3px 8px}
.eng-pre{white-space:pre-wrap; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.55; background:#0E1626; color:#E7ECF7; border-radius:12px; padding:14px 16px; overflow:auto; max-height:360px; margin:0}