:root,[data-theme]{--bg:var(--rl-bg);--panel:var(--rl-panel);--panel2:var(--rl-panel-2);--line:var(--rl-line);--ink:var(--rl-ink);--ink2:var(--rl-ink-2);--mute:var(--rl-mute);--accent:var(--rl-accent);--ok:var(--rl-ok);--warn:var(--rl-warn);--bad:var(--rl-danger);--heat:var(--rl-danger);--sel:var(--rl-select)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:var(--rl-fs)/1.4 var(--rl-font)}
#app{display:grid;grid-template-columns:300px 1fr 330px;grid-template-rows:auto 1fr 180px;height:100vh}
header{grid-column:1/4;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
header h1{font-size:17px;margin:0 6px 0 0}
#left,#right{overflow:auto;padding:8px 12px;background:var(--panel)}
#left{border-right:1px solid var(--line)}#right{border-left:1px solid var(--line)}
#center{position:relative;display:flex;min-height:240px;min-width:0}
#map{position:relative;flex:1;min-width:0}
#pane3d{position:relative;flex:1;display:none;min-width:0;border-left:1px solid var(--line)}
#frame3d{width:100%;height:100%;border:0;display:block;background:#0b0f12}
body.view-3d #map{display:none}body.view-3d #pane3d{display:block;border-left:0}
body.view-split #pane3d{display:block}
#pane2d{position:relative;flex:1;display:none;min-width:0}#frame2d{width:100%;height:100%;border:0;display:block;background:var(--bg)}
body.view-2da #map{display:none}body.view-2da #pane2d{display:block}
#legend{position:absolute;right:10px;top:10px;z-index:3;background:rgba(14,19,23,.88);border:1px solid var(--line);border-radius:8px;padding:5px 8px;width:220px}
.note3d{position:absolute;left:8px;bottom:8px;z-index:3;font-size:11px;color:var(--ink2);background:rgba(14,19,23,.85);border-radius:6px;padding:3px 8px;pointer-events:none;max-width:80%}
.note3d:empty{display:none}
#bottom{grid-column:1/4;border-top:1px solid var(--line);background:var(--panel);overflow:auto;padding:6px 12px}
h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:10px 0 6px}
button{font:inherit;cursor:pointer;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:4px 10px}
button.primary{background:var(--accent);color:#062126;border-color:var(--accent);font-weight:700}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{font:inherit;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.views{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.views button{border:0;border-radius:0;padding:4px 12px}
.views button.on{background:var(--accent);color:#062126;font-weight:700}
body.readonly .edit-only{display:none!important}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.help{color:var(--mute);font-size:12px;margin:4px 0}
.note{color:var(--warn);font-size:12px}
.mute{color:var(--mute)}
.box{border:1px solid var(--line);border-radius:9px;padding:7px 9px;margin-bottom:7px;background:var(--panel2)}
.big{font-size:21px;font-weight:800;color:var(--ok)}
.seg{cursor:pointer}.seg.sel{border-color:var(--sel)}
.seg .p{font-size:19px;font-weight:700}
.rank{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--heat);color:#fff;text-align:center;font-weight:700;font-size:12px;line-height:20px;margin-right:6px}
.team.off{opacity:.6;border-style:dashed}.flag{color:#ff8a65;font-size:12px;font-weight:600}
.team details{font-size:12px;color:var(--ink2);margin-top:3px}.team summary{cursor:pointer;color:var(--accent)}
.pill{font-size:11px;padding:1px 6px;border-radius:9px;background:var(--ok);color:#000}.pill.off{background:var(--bad);color:#fff}
.alert{border-left:4px solid var(--warn);background:var(--panel2);padding:5px 8px;margin-bottom:5px;border-radius:5px;font-size:12px}
.alert.bad{border-color:var(--bad)}.alert.ok{border-color:var(--ok);color:var(--mute)}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:1px 0}.kv b{color:var(--ink)}
.bar{height:7px;background:#26313a;border-radius:4px;overflow:hidden;margin:4px 0}.bar i{display:block;height:100%;background:var(--ok)}
#slider{flex:1;min-width:120px}
#events{display:flex;gap:7px;overflow-x:auto;padding:4px 0}
.ev{min-width:190px;max-width:230px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--panel2);font-size:12px;cursor:pointer;touch-action:pan-x}
.ev.cur{border-color:var(--warn)}.ev.future{opacity:.5}.ev .t{font-weight:600;font-size:13px}.ev .src{font-family:ui-monospace,Menlo,monospace;color:var(--mute);font-size:11px}
.ev .ops{display:flex;gap:4px;margin-top:3px}.ev .ops button{padding:0 7px;font-size:12px}
.ev.drop-before{box-shadow:inset 4px 0 0 var(--accent)}.ev.drop-after{box-shadow:inset -4px 0 0 var(--accent)}.ev.dragsrc{opacity:.4}
#toast{position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:9;background:var(--warn);color:#000;padding:6px 12px;border-radius:8px;font-weight:700;display:none;max-width:80%}
#hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;background:rgba(14,19,23,.9);border:1px solid var(--line);border-radius:18px;padding:5px 14px;font-size:13px;color:var(--ink2);white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis}
#hint:empty{display:none}#hint b{color:var(--accent)}
/* drag and drop */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.card{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:5px 7px;background:var(--panel2);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;font-size:12.5px;line-height:1.2}
.card:hover{border-color:var(--accent)}.card.armed{outline:2px solid var(--accent);background:#173238}
.card .dot{width:12px;height:12px;border-radius:50%;flex:none;border:1.5px solid #000}
.card.off{opacity:.42;cursor:not-allowed;border-style:dashed}.card.busy{opacity:.55;cursor:default}
.card .sub{display:block;color:var(--mute);font-size:11px}
body.dragging,body.dragging *{cursor:grabbing!important}
#ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-120%);background:var(--accent);color:#062126;font-weight:700;padding:4px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.5);display:none;white-space:nowrap}
#map.drop-ok::after{content:"";position:absolute;inset:0;border:3px dashed var(--accent);pointer-events:none;z-index:4}
#map.armed-map{cursor:crosshair}
.pop{position:absolute;z-index:8;background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:8px 10px;width:230px;box-shadow:0 6px 20px rgba(0,0,0,.6);font-size:12px}
.pop h3{margin:0 0 4px;font-size:13px}
.pop label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:3px 0;color:var(--ink2)}
.pop input,.pop select{width:110px}.pop input[type=checkbox]{width:auto}
.pop .row{margin-top:6px;justify-content:flex-end}
.pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #000;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.5);touch-action:none}
.pin span{display:block;transform:rotate(45deg);text-align:center;font:700 11px/18px sans-serif;color:#000}
.pin.future{opacity:.35}.pin.sel{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel)}
.tok{background:rgba(14,19,23,.95);border:2px solid var(--warn);border-radius:10px;padding:5px 7px;font-size:12px;color:var(--ink);min-width:150px;text-align:center}
.tok b{display:block}.tok .row{justify-content:center;margin-top:4px}
.tok button{padding:6px 12px;font-weight:700;font-size:13px}
.tok button.nic{background:#2b3741}.tok button.found{background:var(--ok);color:#000;border-color:var(--ok)}.tok button.x{padding:2px 7px;font-size:11px}
@media (max-width:900px){#app{grid-template-columns:1fr;grid-template-rows:auto 55vh auto auto auto;height:auto}header,#bottom{grid-column:1}#center{min-height:55vh}body.view-split #center{flex-direction:column}}

/* modes */
.modes button{font-weight:600}
body:not(.mode-edycja) .edit-mode{display:none!important}
body:not(.mode-edycja) .ev .ops{display:none}
body:not(.mode-edycja) #map{display:none!important}
body.mode-edycja #pane2d{display:none!important}
body.mode-akcja #pane2d,body.mode-akcja #pane3d{display:none}
body.mode-akcja.view-2d #pane2d,body.mode-akcja.view-split #pane2d{display:block!important}
body.mode-akcja.view-3d #pane3d,body.mode-akcja.view-split #pane3d{display:block!important;border-left:0}
body.mode-akcja.view-split #pane3d{border-left:1px solid var(--line)}
body.mode-edycja #pane3d{display:none}body.mode-edycja.view-split #pane3d{display:block!important}
/* Akcja 2D <-> 3D crossfade: both scene panes stay laid out on top of each other (the warm one keeps running), the hidden one is transparent and inert */
body.mode-akcja:not(.view-split) #pane2d,body.mode-akcja:not(.view-split) #pane3d{display:block!important;position:absolute;inset:0;border-left:0;transition:opacity .22s ease,visibility 0s linear .22s}
body.mode-akcja:not(.view-3d):not(.view-split) #pane3d,body.mode-akcja:not(.view-2d):not(.view-split) #pane2d{opacity:0;visibility:hidden;pointer-events:none}   /* also while setMode has not set the view yet: 3D never flashes over 2D */
body.mode-akcja.view-2d #pane2d,body.mode-akcja.view-3d #pane3d{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.full{grid-column:1/4;grid-row:2/4;display:none;position:relative;min-height:0;background:var(--bg)}
.full iframe{width:100%;height:100%;border:0;display:block}
.full.scroll{overflow:auto}
.fullnote{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--mute);background:rgba(14,19,23,.85);padding:3px 8px;border-radius:6px;pointer-events:none}
body.mode-teren #paneTeren,body.mode-monitoring #paneMon,body.mode-walidacja #paneVal{display:block}
body.mode-teren #left,body.mode-teren #right,body.mode-teren #center,body.mode-teren #bottom,
body.mode-monitoring #left,body.mode-monitoring #right,body.mode-monitoring #center,body.mode-monitoring #bottom,
body.mode-walidacja #left,body.mode-walidacja #right,body.mode-walidacja #center,body.mode-walidacja #bottom{display:none}
/* validation */
#val{max-width:1200px;margin:0 auto;padding:12px 16px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.vcard{border:1px solid var(--line);border-radius:var(--rl-radius);background:var(--panel);padding:10px 12px}
.vcard h3{margin:0 0 6px;font-size:14px}
.vcard svg{width:100%;height:auto;display:block}
.vcard svg text{fill:var(--ink2);font:11px var(--rl-font)}
.stat{display:inline-block;margin:0 18px 6px 0}.stat b{display:block;font-size:22px;color:var(--ink)}.stat span{font-size:11px;color:var(--mute)}
table.cases{width:100%;border-collapse:collapse;font-size:12px}table.cases td,table.cases th{border-bottom:1px solid var(--line);padding:3px 6px;text-align:left}
table.cases th{color:var(--mute);font-weight:600}

/* Teren overview */
#teamFeed{padding:12px 16px;height:100%;overflow:auto}
.asec ul{margin:2px 0 6px 16px;padding:0}.asec li{margin:2px 0;font-size:12.5px}.seglink{color:var(--accent);cursor:pointer;font-weight:700}
/* roles */
#rolePick{position:fixed;inset:0;z-index:100;background:rgba(5,8,10,.85);display:flex;align-items:center;justify-content:center;padding:16px}
#rolePick[hidden]{display:none}
.rolebox{background:var(--panel);border:1px solid var(--line);border-radius:var(--rl-radius-l);padding:18px;max-width:420px;width:100%}
.rolebox button{display:block;width:100%;text-align:left;padding:16px;margin:10px 0;font-size:17px;border-radius:12px;background:var(--panel2)}
.rolebox button span{display:block;font-size:13px;color:var(--mute);margin-top:3px}
#rescuer{display:none}
body.role-ratownik #app{display:flex;flex-direction:column}
body.role-ratownik #app>*:not(header):not(#rescuer){display:none!important}
body.role-ratownik header>*:not(h1):not(#roleBtn):not(#status):not(#pinbox){display:none!important}
body.role-ratownik #rescuer{display:flex;flex-direction:column;gap:8px;padding:8px 10px;position:fixed;top:44px;left:0;right:0;bottom:0;overflow:auto;background:var(--bg)}
.rbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rbar select{font-size:16px;padding:8px;max-width:70vw}.rbar button{padding:9px 14px;font-size:15px}
.rcard{border:2px solid var(--accent);border-radius:12px;padding:10px 12px;background:var(--panel)}
.rlabel{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.rbig{font-size:24px;font-weight:800;margin:2px 0 4px}.rbig.off{color:var(--bad)}
.rflag{color:#ff8a65;font-weight:700}.rcard details{margin-top:6px}.rcard summary{color:var(--accent);font-size:15px;cursor:pointer;padding:4px 0}
.rsurv{color:var(--warn);font-size:14px}.rsurv:empty{display:none}
#rMapHost{position:relative;height:38vh;min-height:220px;border-radius:12px;overflow:hidden;flex:none}
#rMapHost #map{position:absolute;inset:0;display:block!important}
#frameRescuer{width:100%;min-height:520px;flex:1;border:0;border-radius:12px;background:var(--panel)}
.gpsdot{width:16px;height:16px;border-radius:50%;background:#3fa9ff;border:3px solid #fff;box-shadow:0 0 0 6px rgba(63,169,255,.3)}
/* sens-funkcji R2-12: background folded into one Sygnały card */
.ev.evbg{border-style:dashed}.ev.evbg .note{font-size:11px;color:var(--rl-mute,var(--mute));margin-top:2px}
.ev.evoff{opacity:.45;text-decoration:line-through}.ev .evt{vertical-align:-2px;margin:0 4px 0 0;cursor:pointer}

/* ---------- floating layout (structure; owned by the plumbing, look below is ui design's) ----------
   Akcja and Edycja on desktop: the scene (#center: map / 2D frame / 3D frame / split) is full-bleed behind everything and
   header, #left, #right and #bottom float over it. Geometry comes only from these variables; app.js measures the panels and
   hands the free area to the frames as insets (?insets=T,R,B,L and {type:'insets'}), so the scene centres in the gap. */
:root{--float-gap:12px;--rail-l-w:320px;--rail-r-w:340px;--dock-h:176px;--bar-h:56px;--panel-radius:14px;--panel-bg:rgba(13,21,27,.84);--panel-border:1px solid rgba(255,255,255,.07);--panel-blur:16px}
@media (min-width:901px){
  body.float #app{display:block;height:100vh;overflow:hidden}
  body.float #center{position:fixed;inset:0;z-index:0;min-height:0}
  body.float header,body.float #left,body.float #right,body.float #bottom{position:fixed;z-index:10;background:var(--panel-bg);border:var(--panel-border);border-radius:var(--panel-radius);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));box-shadow:0 8px 28px rgba(0,0,0,.35)}
  body.float header{top:var(--float-gap);left:var(--float-gap);right:var(--float-gap);min-height:var(--bar-h)}
  body.float #left,body.float #right{top:calc(var(--float-gap) * 2 + max(var(--bar-h), var(--hdr-h, 0px)));bottom:calc(var(--float-gap) * 2 + var(--dock-h))}
  body.float #left{left:var(--float-gap);width:var(--rail-l-w)}
  body.float #right{right:var(--float-gap);width:var(--rail-r-w)}
  body.float #bottom{left:var(--float-gap);right:var(--float-gap);bottom:var(--float-gap);height:var(--dock-h)}
  /* in-scene overlays of the app's own map keep clear of the panels */
  body.float #legend{top:calc(var(--float-gap) * 2 + max(var(--bar-h), var(--hdr-h, 0px)) + 10px);right:calc(var(--float-gap) * 2 + var(--rail-r-w) + 10px)}
  body.float #toast{top:calc(var(--float-gap) * 2 + max(var(--bar-h), var(--hdr-h, 0px)) + 10px)}
  body.float #hint{bottom:calc(var(--float-gap) * 2 + var(--dock-h) + 10px)}
  body.float .note3d{left:calc(var(--float-gap) * 2 + var(--rail-l-w) + 8px);bottom:calc(var(--float-gap) * 2 + var(--dock-h) + 8px)}
  /* Kino (3D cinema mode, {type:'cinema'} from the frame): the panels step aside, the scene takes the screen */
  body.float header,body.float #left,body.float #right,body.float #bottom{transition:opacity .6s,transform .6s}
  /* Akcja <-> Plan: the dock grows/shrinks (--dock-h) and the rails follow, animated instead of a jump */
  body.float #bottom{transition:opacity .6s,transform .6s,height .22s ease}body.float #left,body.float #right{transition:opacity .6s,transform .6s,bottom .22s ease}
  body.float.cinema header,body.float.cinema #left,body.float.cinema #right,body.float.cinema #bottom{opacity:0;pointer-events:none}
}

/* ---------- look: paper over terrain (ui design; canvas https://claude.ai/artifact/MKFv412DcTTKiZsPvanixR) ----------
   Values for the plumbing variables above, then the panels' look. Akcja: header, one right panel (Top 3 + przydział),
   a one-line dock; #left only in Plan (edycja); the event cards behind "Sygnały". */
:root{--float-gap:12px;--rail-l-w:300px;--rail-r-w:360px;--dock-h:84px;--bar-h:56px;--panel-radius:var(--rl-radius-l);--panel-bg:var(--rl-panel);--panel-border:1px solid var(--rl-line);--panel-blur:var(--rl-blur)}
body.signals,body.mode-edycja{--dock-h:204px}
html,body{font-family:var(--rl-font);-webkit-font-smoothing:antialiased}
button{border-radius:var(--rl-radius-s);border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ink);min-height:32px}
button:hover:not(:disabled){border-color:var(--rl-ink)}
button.primary{background:var(--rl-danger);color:var(--rl-on-danger);border-color:var(--rl-danger)}
input,select,textarea{background:var(--rl-card);border-color:var(--rl-line-strong);border-radius:var(--rl-radius-s);color:var(--rl-ink)}
h2{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--rl-mute);margin:14px 0 8px}
.help{color:var(--rl-mute)}
.mute{color:var(--rl-mute)}
@media (min-width:901px){
  body.float header,body.float #left,body.float #right,body.float #bottom{box-shadow:var(--rl-shadow)}
  body.float.mode-akcja #left{display:none}
  body.float:not(.signals):not(.mode-edycja) #events{display:none}
  /* hover-hold right panel (hoverHold in dock.js, #right.peek): in Akcja the rail is collapsed to Top 3 (+ alerts and the
     "Niepotwierdzone: N" row when there are any); hover / focus / tap unfolds Zasoby, Na żywo and the details over the map for
     3 s after leaving. The top and left edge stay put, so the insets and the map never move. */
  body.float.mode-akcja #right:not(.peek):not(.pinned){bottom:auto;max-height:calc(100vh - var(--float-gap) * 4 - max(var(--bar-h), var(--hdr-h, 0px)) - var(--dock-h))}
  body.float.mode-akcja #right:not(.peek):not(.pinned) :is(#assets,#moreInfo),body.float.mode-akcja #right:not(.peek):not(.pinned) #liveBox:not(.has-unack),body.float.mode-akcja #right:not(.peek):not(.pinned) #liveBox>:not(.ackrow){display:none}
  body.float.mode-akcja #right:not(.peek):not(.pinned) #liveBox{border-top:0;margin-top:4px}
  body.float.mode-akcja #right:not(.peek):not(.pinned) #ackCount{color:var(--rl-danger);font-weight:700}
  body.float.mode-akcja #right.peek:not(.pinned) :is(#assets,#liveBox,#moreInfo){animation:rl-unfold .18s ease both}
  #right.fold.fold-live>h2:first-of-type{display:none}   /* the fold strip (dock.js foldPanel) carries the title in Akcja */
  body.float.mode-akcja #right.fold>.fold-head{margin:2px 0 6px}
}
@keyframes rl-unfold{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){body.float #right.peek :is(#assets,#liveBox,#moreInfo){animation:none}}
/* header = app bar */
header{gap:12px;padding:6px 8px 6px 14px;min-height:56px;background:var(--rl-panel);border-bottom:1px solid var(--rl-line)}
header h1{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:.01em;white-space:nowrap;margin:0 4px 0 0}
header .logo{width:36px;height:25px;fill:var(--rl-ink);flex:none}
header .logo circle{fill:var(--rl-danger)}
.scenlbl{display:flex;align-items:center}
.scenlbl>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#scen{height:40px;border-radius:var(--rl-radius);font-weight:600;font-size:14px;padding:0 10px;max-width:260px}
#scen[hidden]{display:none!important}
#scenPick{height:40px;font-weight:600;font-size:14px;padding:0 12px;white-space:nowrap}
.views{border:0;border-radius:12px;padding:3px;gap:2px;background:color-mix(in srgb,var(--rl-ink) 6%,transparent);overflow:visible}
.views button{min-height:36px;padding:0 16px;border:0;border-radius:9px;background:transparent;font-weight:600;font-size:15px;color:var(--rl-ink-2)}
.views button:not(.on):hover:not(:disabled){color:var(--rl-ink);border:0}
.views button.on:hover{border:0}
.views button.on{background:var(--rl-chrome);color:var(--rl-on-chrome);font-weight:700}
#status{font-size:12.5px;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#roleBtn{min-height:40px;border-radius:20px;padding:0 16px;font-weight:600}
#firstRun{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--rl-warn-ink);background:color-mix(in srgb,var(--rl-warn) 22%,transparent);border-radius:10px;padding:4px 6px 4px 12px}
#firstRun[hidden]{display:none}
/* the 2D/3D switch floats over the scene, centred in the free area */
#views{position:fixed;z-index:12;top:80px;right:16px;background:var(--rl-panel);border:1px solid var(--rl-line);box-shadow:var(--rl-shadow);backdrop-filter:blur(var(--rl-blur));-webkit-backdrop-filter:blur(var(--rl-blur))}
#views button{font-size:15px;padding:0 20px}
@media (min-width:901px){
  body.float #views{top:calc(var(--float-gap) * 2 + max(var(--bar-h), var(--hdr-h, 0px)));right:auto;left:calc((100vw - var(--rail-r-w) - var(--float-gap)) / 2);transform:translateX(-50%)}
  body.float.mode-edycja #views{left:calc((100vw + var(--rail-l-w) - var(--rail-r-w)) / 2)}
  body.float.cinema #views{opacity:0;pointer-events:none}
}
/* right panel: Top 3 sektory + przydział */
#right{padding:4px 12px 12px}
.hero{padding:0 4px 10px}
.hero .big{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:400;color:var(--rl-ink-2);line-height:1.25}
.hero .big b{font-family:var(--rl-font-num);font-size:54px;font-weight:700;line-height:1;color:var(--rl-danger);font-variant-numeric:tabular-nums}
.hero .big em{font-style:normal;font-weight:700;color:var(--rl-ink)}
.hero .help{font-family:var(--rl-mono);font-size:11.5px;margin-top:6px}
.seg{position:relative;background:var(--rl-card);border:1px solid var(--rl-line);border-radius:12px;padding:12px 12px 12px 52px;margin-bottom:8px}
.seg:hover{border-color:var(--rl-line-strong)}
.seg .rank{position:absolute;left:12px;top:12px;width:30px;height:30px;line-height:27px;margin:0;font-size:14px;background:transparent;border:1.5px solid var(--rl-danger);color:var(--rl-danger)}
#segs .seg:first-child{border:1.5px solid var(--rl-danger);box-shadow:0 2px 10px color-mix(in srgb,var(--rl-danger) 14%,transparent)}
#segs .seg:first-child .rank{background:var(--rl-danger);color:var(--rl-on-danger)}
.seg>b{display:block;font-size:16px;font-weight:600;line-height:1.2}
.seg .p{font-family:var(--rl-font-num);font-size:26px;font-weight:700;color:var(--rl-danger);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:2px}
.seg .p .mute{font-family:var(--rl-font);font-size:13px!important;font-weight:400}
.segbar{display:block;position:relative;height:5px;border-radius:3px;margin-top:8px;overflow:hidden;background:color-mix(in srgb,var(--rl-ink) 8%,transparent)}
.segbar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:3px;background:var(--rl-danger)}
#segs .seg:nth-child(2) .segbar::after{background:#d9572b}
#segs .seg:nth-child(n+3) .segbar::after{background:#e9a23b}
.segteam{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;font-weight:600}
.segteam .tk{width:24px;height:24px;border-radius:7px;background:var(--rl-accent);color:var(--rl-on-accent);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.seg.sel,#segs .seg.sel:first-child{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel)}
.moreinfo{border-top:1px solid var(--rl-line);margin-top:8px;padding:0 4px}
.moreinfo>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;color:var(--rl-accent)}
.moreinfo>summary::-webkit-details-marker{display:none}
.moreinfo>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;flex:none}
.moreinfo[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.box{background:var(--rl-card);border-color:var(--rl-line);border-radius:12px;padding:10px 12px}
.pill{background:color-mix(in srgb,var(--rl-ok) 14%,transparent);color:var(--rl-ok);font-weight:600;padding:2px 8px}
.pill.off{background:color-mix(in srgb,var(--rl-danger) 12%,transparent);color:var(--rl-danger)}
.flag,.rflag{color:var(--rl-danger)}
.team summary,.asec .seglink,.seglink{color:var(--rl-accent)}
.bar{background:color-mix(in srgb,var(--rl-ink) 10%,transparent)}
.bar i{background:var(--rl-accent)}
.big{color:var(--rl-ok)}
.alert{border:1px solid color-mix(in srgb,var(--rl-warn) 60%,transparent);background:color-mix(in srgb,var(--rl-warn) 16%,transparent);border-radius:10px;padding:9px 11px;font-size:13px;color:var(--rl-ink)}
.alert.bad{border-color:color-mix(in srgb,var(--rl-danger) 35%,transparent);background:color-mix(in srgb,var(--rl-danger) 9%,transparent)}
.alert.ok{border-color:var(--rl-line);background:transparent;color:var(--rl-mute)}
.note{color:var(--rl-warn-ink)}
/* dock: one line in Akcja, event cards in Plan or with "Sygnały" */
#bottom{padding:0 14px 0 12px}
#bottom>.row{min-height:82px;gap:12px;flex-wrap:nowrap}
#play{width:52px;height:52px;min-height:0;flex:none;border-radius:50%;border:0;padding:0;background:var(--rl-danger);color:var(--rl-on-danger);font-size:18px;box-shadow:0 4px 12px color-mix(in srgb,var(--rl-danger) 35%,transparent)}
#play:hover{border:0;filter:brightness(.92)}
#bottom>.row>b{font-size:15px}
#clock{font-family:var(--rl-mono);font-size:13px;color:var(--rl-ink-2);max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#slider{accent-color:var(--rl-accent);height:28px;cursor:pointer}
#sigBtn,#evReset{min-height:36px;font-weight:600;flex:none}
#sigBtn[aria-pressed=true]{border-color:var(--rl-accent);color:var(--rl-accent);background:color-mix(in srgb,var(--rl-accent) 8%,var(--rl-card))}
body.mode-edycja #sigBtn{display:none}
#events{gap:8px;padding:2px 0 10px}
.ev{background:var(--rl-card);border-color:var(--rl-line);border-radius:10px;padding:8px 10px}
.ev.cur{border:2px solid var(--rl-accent)}
.ev .src{font-family:var(--rl-mono)}
/* overlays of the app's own map (Plan) */
#legend{background:var(--rl-panel);border-color:var(--rl-line);border-radius:12px;box-shadow:var(--rl-shadow);padding:8px 10px}
.note3d,.fullnote{background:var(--rl-panel);color:var(--rl-ink-2)}
#hint{background:var(--rl-chrome);color:var(--rl-on-chrome);border:0;box-shadow:var(--rl-shadow)}
#hint b{color:var(--rl-warn)}
#toast{background:var(--rl-chrome);color:var(--rl-on-chrome);border-radius:10px;box-shadow:var(--rl-shadow)}
#ghost{background:var(--rl-accent);color:var(--rl-on-accent)}
.card{background:var(--rl-card);border-color:var(--rl-line);border-radius:10px;min-height:44px}
.card.armed{outline-color:var(--rl-accent);background:color-mix(in srgb,var(--rl-accent) 8%,var(--rl-card))}
.pop{background:var(--rl-panel-solid);border-color:var(--rl-line-strong);box-shadow:var(--rl-shadow)}
.tok{background:var(--rl-panel-solid);color:var(--rl-ink);border-color:var(--rl-accent)}
.tok button.nic{background:var(--rl-card)}
.tok button.found{background:var(--rl-ok);color:var(--rl-on-ok);border-color:var(--rl-ok)}
/* Więcej: Teren, Monitoring, Walidacja on the page ground */
.full{background:var(--rl-bg)}
#val{max-width:1240px;padding:24px}
#teamFeed{max-width:1240px;margin:0 auto;padding:24px}
.vcard{background:var(--rl-panel-solid);border-color:var(--rl-line);border-radius:14px;padding:18px 20px}
.vcard h3{font-size:17px}
.stat b{font-family:var(--rl-font-num);font-size:30px}
/* role picker and the rescuer's phone */
#rolePick{background:color-mix(in srgb,var(--rl-ink) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rolebox{background:var(--rl-panel-solid);border:0;border-radius:20px;padding:22px;box-shadow:var(--rl-shadow)}
.rolebox button{background:var(--rl-card);border-radius:14px}
.rolebox button[data-role=ratownik]{background:var(--rl-danger);color:var(--rl-on-danger);border-color:var(--rl-danger)}
.rolebox button[data-role=ratownik] span{color:inherit;opacity:.85}
.rcard{border:0;border-radius:16px;background:var(--rl-panel-solid);box-shadow:var(--rl-shadow)}
.rbig.off{color:var(--rl-danger)}
.rsurv{color:var(--rl-warn-ink)}
#frameRescuer{background:var(--rl-panel-solid)}
.box.seg{padding:12px 12px 12px 52px}
/* first-run hint floats under the bar instead of wrapping it */
header{position:relative}
header #firstRun{position:absolute;top:calc(100% + 8px);left:0;right:auto;max-width:560px;z-index:30;background:var(--rl-panel-solid);color:var(--rl-ink);border:1px solid color-mix(in srgb,var(--rl-warn) 70%,transparent);box-shadow:var(--rl-shadow);padding:8px 8px 8px 14px}
@media (min-width:901px){body.float header{z-index:11}}
/* Walidacja: AI Marcina's summary card and AI Denisa's card read as one column */
#validation-summary{max-width:1192px;margin:24px auto 0}
#validation-summary>*{background:var(--rl-panel-solid)!important;border:1px solid var(--rl-line)!important;border-radius:14px!important;box-shadow:none!important}
#validation-summary:empty{display:none}
#validation-summary~#val{padding-top:12px}
/* Ratownik: one screen - the patrol view (sector, direction, report buttons) under a slim team bar; the app's own task
   card and map would repeat what the patrol view already shows */
body.role-ratownik header{flex-wrap:nowrap;min-height:56px}
body.role-ratownik header #status{display:none}
body.role-ratownik header #roleBtn{margin-left:auto}
body.role-ratownik #rescuer{top:56px;padding:0;gap:0}
body.role-ratownik #rTask,body.role-ratownik #rSurv,body.role-ratownik #rMapHost,body.role-ratownik #rCenter{display:none!important}
body.role-ratownik .rbar{padding:8px 12px;background:var(--rl-panel-solid);border-bottom:1px solid var(--rl-line)}
body.role-ratownik .rbar select{flex:1;min-height:44px;font-weight:600}
body.role-ratownik #rClock{font-family:var(--rl-mono);font-weight:700;color:var(--rl-ink)}
body.role-ratownik #frameRescuer{flex:1;min-height:0;border-radius:0}
/* live mode: scenario title + mode badge (header, phone bar), live feed and ad-hoc actions in #right (CONTRACT.md "Live mode") */
.livehead{display:flex;align-items:center;gap:10px;min-width:0}
.livehead b{font-size:var(--rl-fs-xl);font-weight:700;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.lbadge{display:inline-flex;align-items:center;gap:8px;flex:none;font:700 16px/1 var(--rl-font);letter-spacing:.1em;padding:7px 13px;border-radius:999px;background:var(--rl-accent);color:var(--rl-on-accent)}
.lbadge.odtworzenie{background:var(--rl-panel-2);color:var(--rl-ink-2);box-shadow:inset 0 0 0 1px var(--rl-line-strong)}
.lbadge.live{background:var(--rl-danger);color:var(--rl-on-danger)}
.lbadge i{display:none}
.lbadge.live i{display:block;width:10px;height:10px;border-radius:50%;background:var(--rl-on-danger);animation:rl-live 1.2s ease-in-out infinite}
@keyframes rl-live{50%{opacity:.2;transform:scale(.65)}}
.rlive{padding:8px 12px;background:var(--rl-panel-solid);border-bottom:1px solid var(--rl-line)}
.rlive b{font-size:var(--rl-fs-l);max-width:none;flex:1}
.livebox .row{display:flex;gap:6px;align-items:center}
.livebox h2{margin:10px 0 6px}
#liveDispatch{margin-bottom:6px}#liveDispatch select{min-width:0;flex:1}
#liveClue.on{background:var(--rl-accent);color:var(--rl-on-accent);border-color:var(--rl-accent)}
.lfi{font-size:var(--rl-fs-s);padding:5px 0;border-bottom:1px solid var(--rl-line)}
.lft{font-family:var(--rl-mono);color:var(--rl-mute)}
.livebox[hidden],.livebox [hidden]{display:none!important}
/* live-mode header (AI Mateusza 465161b) in the app bar: the title replaces the incident line, so the bar stays one row */
header .livehead b{font-size:18px;max-width:26vw}
header .lbadge{font-size:12px;padding:6px 11px;letter-spacing:.12em}
header .lbadge.live i{width:8px;height:8px}
body.role-operator header #status{display:none}
#scen{max-width:190px}
.livebox{border-top:1px solid var(--rl-line);margin-top:8px;padding:0 4px}
.livebox button{min-height:34px;font-weight:600}
#liveFeed{max-height:180px;overflow:auto}
#centrumLink{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-accent);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
#centrumLink:hover{border-color:var(--rl-accent)}
#zasobyLink{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-accent);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
#zasobyLink:hover{border-color:var(--rl-accent)}
#liveFeed [data-actor]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
/* Zasoby akcji (Akcja, right panel under the top 3): one row per unit, click = actor drawer + its track */
body:not(.mode-akcja) #assets{display:none}
#assets{margin:10px 0 4px;border-top:1px solid var(--rl-line);padding-top:6px}
#assets>summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none}
#assets>summary::-webkit-details-marker{display:none}
#assets>summary h2{margin:0}
#assets>summary::after{content:"▾";margin-left:auto;color:var(--rl-mute)}
#assets:not([open])>summary::after{content:"▸"}
#assetsSum{font-size:var(--rl-fs-xs)}
.assetlist{max-height:198px;overflow:auto;margin-top:4px}
.arow{display:flex;align-items:center;gap:7px;padding:4px;border-bottom:1px solid var(--rl-line);font-size:var(--rl-fs-s);cursor:pointer;border-radius:var(--rl-radius-s)}
.arow:hover,.arow:focus-visible{background:var(--rl-panel-2);outline:none}
.arow .ak{flex:none;width:26px;text-align:center;font:700 10px/18px var(--rl-mono);border-radius:5px;background:var(--rl-accent);color:var(--rl-on-accent)}
.arow .an{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .as{flex:none;font-size:var(--rl-fs-xs);color:var(--rl-ink-2);white-space:nowrap}
.arow .ah{flex:none;font:600 var(--rl-fs-xs)/16px var(--rl-mono);font-variant-numeric:tabular-nums;padding:0 5px;border-radius:5px;border:1px solid var(--rl-line-strong);color:var(--rl-ink-2)}
.arow .ah.amber{background:var(--rl-warn);border-color:var(--rl-warn);color:var(--rl-ink)}
.arow .ah.red{background:var(--rl-danger);border-color:var(--rl-danger);color:var(--rl-on-danger)}
.arow .ad{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rl-mute);opacity:.45}
.arow .ad.live{background:var(--rl-ok);opacity:1}
.arow .ad.stale{background:var(--rl-warn);opacity:1}

/* "+ Nowa akcja" (AI Michała): operator starts a new search - who, where, when -> /story/new. Tokens only. */
#newActionBtn{min-height:40px;border-radius:20px;padding:0 16px;font-weight:600;white-space:nowrap}
body.role-ratownik #newActionBtn{display:none}
#newAction{border:0;border-radius:20px;background:var(--rl-panel-solid);color:var(--rl-ink);box-shadow:var(--rl-shadow);width:min(560px,94vw);padding:18px 20px}
#newAction::backdrop{background:color-mix(in srgb,var(--rl-ink) 55%,transparent)}
#newAction h2{margin:0 0 10px;font-size:var(--rl-fs-xl)}
#newAction label{display:block;margin:12px 0 4px;font-size:var(--rl-fs-s);color:var(--rl-mute);text-transform:uppercase;letter-spacing:.5px}
#newAction input,#newAction select{width:100%;box-sizing:border-box;min-height:42px;padding:8px 10px;border:1px solid var(--rl-line-strong);border-radius:var(--rl-radius);background:var(--rl-card);color:var(--rl-ink);font:inherit}
#newAction #naLatLon{margin-top:6px}
#naSugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}#naSugg:empty{display:none}
#naSugg button,#naNear button{min-height:34px;padding:0 10px;border-radius:17px;border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ink);font:inherit;font-size:var(--rl-fs-s)}
#naMap{height:210px;margin-top:6px;border-radius:var(--rl-radius);border:1px solid var(--rl-line-strong);overflow:hidden;cursor:crosshair}
#naMap .maplibregl-canvas{cursor:crosshair}
#naNear{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}#naNear:empty{display:none}
@media (max-width:600px){#naMap{height:170px}}
.na-chips{display:flex;flex-wrap:wrap;gap:6px}
.na-chips button{min-height:38px;padding:0 12px;border-radius:19px;border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ink);font:inherit}
.na-chips button.on{background:var(--rl-accent);border-color:var(--rl-accent);color:var(--rl-on-accent)}
.na-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.na-act{margin-top:14px}
.na-act button{min-height:44px;border-radius:22px;border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ink);font:inherit;font-weight:600}
.na-act button.primary{background:var(--rl-danger);border-color:var(--rl-danger);color:var(--rl-on-danger)}
/* app bar under 1500 px: logo without the name, "Centrum" short label, narrower title and picker, so the bar stays one row */
@media (max-width:1499px){
  header h1{font-size:0;gap:0;margin-right:0}
  #centrumLink{font-size:0;padding:0 14px}
  #centrumLink::after{content:"Centrum";font-size:14px}
  #scen{max-width:150px}
  header .livehead b{max-width:18vw}
  #roleBtn .rl-pre{display:none}   /* demo review b0858be pt 2 (rest at the end of the file) */
}

/* Udostępnij: join links + QR */
#shareBtn{min-height:40px;border-radius:20px;padding:0 16px;white-space:nowrap}
body.role-ratownik #shareBtn{display:none}
#shareDlg{border:0;border-radius:20px;background:var(--rl-panel-solid);color:var(--rl-ink);box-shadow:var(--rl-shadow);width:min(620px,94vw);padding:18px 20px}
#shareDlg::backdrop{background:color-mix(in srgb,var(--rl-ink) 55%,transparent)}
#shareDlg h2{margin:0 0 10px;font-size:var(--rl-fs-xl)}
#shareDlg .shr{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--rl-line)}
#shareDlg .shq{flex:0 0 120px;width:120px;height:120px;background:#fff;border-radius:8px;padding:4px;box-sizing:border-box}
#shareDlg .shq svg{width:100%;height:100%;display:block}
#shareDlg input{width:100%;box-sizing:border-box;margin:6px 0;padding:6px 8px;border:1px solid var(--rl-line-strong);border-radius:var(--rl-radius);background:var(--rl-card);color:var(--rl-ink);font:inherit;font-size:var(--rl-fs-s)}
#shareDlg .shfoot{display:flex;gap:8px;margin-top:12px}
@media (max-width:520px){#shareDlg .shr{flex-direction:column;align-items:stretch}#shareDlg .shq{margin:0 auto}}

/* LIVE blinks only at the end of the timeline (Mateusz): back in time the dot stays still and the badge dims */
.lbadge.live:not(.atend) i{animation:none;opacity:.55}
.lbadge.live:not(.atend){opacity:.75}

/* operator ACK of live messages (Mateusz) */
.lfi.unack{border-left:3px solid var(--rl-danger);padding-left:6px;font-weight:600}
.lfi .ack1{min-height:26px;padding:0 9px;border-radius:13px;border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ok);font-weight:700;cursor:pointer}
.lfi .ackd{color:var(--rl-ok)}
.ackrow{margin:4px 0 6px}
#liveAckAll{min-height:32px;border-radius:16px;padding:0 12px}
/* Na żywo vs Historia (Andrzej): header switch, HISTORIA badge, held timeline in live, inactive live box and live-only actions */
.lbadge.historia{background:var(--rl-panel-2);color:var(--rl-ink-2);box-shadow:inset 0 0 0 1px var(--rl-line-strong)}
.tmode{flex:none}
.tmode button[data-t="live"].on{background:var(--rl-danger);color:var(--rl-on-danger)}
.tmode button:disabled{opacity:.45;cursor:not-allowed}
body.time-live #slider,body.time-live #play{opacity:.4;cursor:not-allowed}
.needslive{opacity:.5;cursor:not-allowed}
.livebox.frozen>.row:first-child,.livebox.frozen .ackrow,.livebox.frozen #liveFeed{opacity:.55}
.livebox button:disabled{cursor:not-allowed}
.livenote{margin:6px 0 8px;padding:8px 10px;border-radius:10px;background:var(--rl-card);box-shadow:inset 0 0 0 1px var(--rl-line-strong);font-size:var(--rl-fs-s);color:var(--rl-ink-2);line-height:1.4}
.livenote .golive{display:block;margin-top:6px;width:100%}
/* the mode must be obvious at a glance: a label tab at the top edge with its name (red = live, navy = recording);
   no frame around the whole screen any more (it boxed the 2D/3D views in red), the colour lives only in the tab */
body.time-live::before,body.time-hist::before{content:"NA ŻYWO";position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:61;pointer-events:none;padding:2px 14px 4px;border-radius:0 0 10px 10px;background:var(--rl-danger);color:var(--rl-on-danger);font:700 12px/1.2 var(--rl-font);letter-spacing:.14em}
body.time-hist::before{content:"HISTORIA · NAGRANIE";background:var(--rl-accent);color:var(--rl-on-accent)}
body.role-ratownik::before,body.role-ratownik::after{display:none}
/* demo review (faa0899) pt 6: with Na żywo / Historia and Udostępnij the bar wrapped at 1280 px: under 1500 px the live
   badge stays but the title goes (the scenario picker names the incident), and long role labels truncate */
@media (max-width:1499px){
  header .livehead b{display:none}
  #roleBtn{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Na żywo: the operator moves the incident on for everyone (replaces play + slider) */
.advbox{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.advbox #advNextT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--rl-fs-s)}
.advbox button{flex:none}
.advbox[hidden],#bottom [hidden]{display:none!important}   /* display:flex would beat the hidden attribute */
#histStart{flex:none;width:40px;height:40px;min-height:0;padding:0;border-radius:50%}
/* compact dock (Mateusz): one slim row - icon buttons, the current event on one line, kind markers on the timeline (hover = tiny
   tooltip, click = jump), a ticker of the last events; the event cards stay behind ☰ Sygnały. Phone: two slim rows. */
:root{--dock-h:44px}
body.signals,body.mode-edycja{--dock-h:166px}
#bottom{padding:0 8px 0 6px}
#bottom>.row{min-height:42px;gap:8px;flex-wrap:nowrap}
#bottom .ib{width:32px;height:32px;min-height:0;padding:0;flex:none;border-radius:50%;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#play{width:34px;height:34px;font-size:13px;box-shadow:none}
/* playback speed (Historia): one compact pill, click cycles 1x/2x/5x/10x/30x; "Wróć na żywo" after an event jump from Na żywo */
#bottom .spd{flex:none;min-height:0;height:26px;min-width:38px;padding:0 7px;border-radius:13px;font:600 12px/1 var(--rl-mono);color:var(--rl-ink)}
#bottom .backlive{flex:none;min-height:0;height:28px;padding:0 10px;border-radius:14px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--rl-danger);border:1px solid color-mix(in srgb,var(--rl-danger) 45%,transparent);background:transparent}
#bottom .backlive:hover{background:color-mix(in srgb,var(--rl-danger) 10%,transparent)}
#tlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#clock{flex:0 1 300px;min-width:0;max-width:300px;font-size:12.5px}
.dkstep{flex:none;font:500 12px/1 var(--rl-mono);color:var(--rl-mute);white-space:nowrap}.dkstep b{color:var(--rl-ink);font-weight:700}
.advbox{display:contents}
.advbox #advNextT{max-width:230px;order:2;flex:0 1 auto;min-width:0}
.tl{order:1}.ticker{order:3}#evReset,#sigBtn{order:4}
/* dock: track, markers, ticker and group card live in dock.css (linked before this file) */
@media (max-width:1280px){.ticker .tk:nth-child(n+3){display:none}#clock{flex-basis:220px;max-width:220px}}
@media (max-width:1100px){.ticker{display:none}}
@media (max-width:900px){
  #bottom>.row{flex-wrap:wrap;row-gap:0;min-height:0;padding:4px 0 2px}
  #bottom .ib,#play{width:40px;height:40px}
  #clock{flex:1 1 0;max-width:none}
  .tl{order:9;flex:1 1 100%;height:30px}
  .advbox #advNextT,.ticker{display:none}
  body:not(.signals):not(.mode-edycja) #events{display:none}
}
/* app bar never wraps on desktop (demo review + 1791052271523): one row, the live title takes the leftover space and
   ellipsises; under 1500 px the live badge hides too, because the Na żywo / Historia switch already shows the mode */
@media (min-width:901px){
  header{flex-wrap:nowrap}
  header>*{flex-shrink:0}
  header .livehead{flex:1 1 auto;min-width:0}
  header .livehead b{max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis}
  header>span[style*="flex:1"]{flex:0 0 0}
}
@media (min-width:901px) and (max-width:1499px){ header .livehead{display:none} }
/* clue weights (wagi śladów): bar + number in the Sygnały cards and the Na żywo feed */
.cw{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;color:var(--rl-mute,#93a1ad);cursor:help;font-weight:400}
.cw .cwb{flex:0 0 54px;height:6px;border-radius:3px;background:var(--rl-line,#2a3540);overflow:hidden;display:block}
.cw .cwb i{display:block;height:100%;background:var(--rl-accent,#f2b134)}
.cw.info .cwb i{background:var(--rl-mute,#8797a4)}.cw.man .cwb i{background:var(--rl-ok,#3ee08f)}
.cw b{font-family:var(--rl-mono,ui-monospace,monospace);color:var(--rl-ink,inherit);min-width:28px}
.cw .cwm{font-size:10px;border:1px solid var(--rl-line,#2a3540);border-radius:8px;padding:0 5px}
.cw button{min-height:22px;min-width:22px;padding:0 6px;font-size:12px;line-height:1;border-radius:11px;cursor:pointer}
/* header at 1500-1800 px with the Klucz field (public deploy): the bar was ~120 px too wide, the live head shrank to 0 and its
   badge spilled over the Na żywo / Historia switch. The switch + scenario picker already name the mode and the incident, so
   the live head goes under 1800 px, the key field gets compact, and nothing may overflow its own box any more */
header .livehead{overflow:hidden}
@media (min-width:901px) and (max-width:1799px){
  header .livehead{display:none}
  #pinbox{font-size:13px;gap:4px}
  #pinbox input{width:64px;min-width:0}
  #centrumLink{font-size:0;padding:0 14px}
  #centrumLink::after{content:"Centrum";font-size:14px}
}
/* 901-1399 px with the key field: still ~105 px too wide at 1280 - shorter "+ Akcja", the key field without its label
   (placeholder "klucz"), a narrower role button */
@media (min-width:901px) and (max-width:1399px){
  #newActionBtn{font-size:0;padding:0 14px}
  #newActionBtn::after{content:"+ Akcja";font-size:14px}
  #pinbox{font-size:0}
  #pinbox input{font-size:13px}
  #roleBtn{max-width:100px}
  header .scenlbl select{max-width:120px}
  body.float header{column-gap:8px!important}
}
/* QA mobile (qa-mobile.md "For AI Marcina" 4, 5): the field screen shows the key box only once the server asked for it (401), at touch size.
   pin-asked (a real 401 on a change, hidden again after 20 s unless typing), not pin-needed (set at boot whenever no key is stored): a rescuer without a key reads the map
   and the task without the box popping up on every load */
body.role-ratownik:not(.pin-asked) header #pinbox{display:none!important}
body.role-ratownik header #pinbox input{min-height:44px;font-size:16px}
/* GET /api/key (app.js keyProbe): the box shows which key this device holds - green operator, sand rescuer, red wrong (its title has the words) */
body.key-operator #pin{box-shadow:inset 0 -2px 0 var(--rl-ok)}body.key-field #pin{box-shadow:inset 0 -2px 0 var(--rl-warn)}body.key-wrong #pin{box-shadow:inset 0 0 0 2px var(--rl-danger)}
#firstRunOk,#roleBtn{min-height:44px}
/* QA (AI Michała, Walidacja at 1920 px): outside Akcja/Plan the bar is a plain top row - room for the NA ŻYWO / HISTORIA tab above it
   (the tab names the mode, so the bar's own badge goes), and a full bar wraps instead of pushing Rola off the right edge */
body:not(.float):not(.role-ratownik).time-live header,body:not(.float):not(.role-ratownik).time-hist header{padding-top:20px}   /* the rescuer phone has no mode tab */
body:not(.float) .livehead{display:none}
body:not(.float) header{flex-wrap:wrap;row-gap:6px}
/* demo review (AI Michała d1510b2) pt 1: the first-run hint lives in the floating bar (z 11) and slid under the 2D/3D switch (z 12) - lift the bar while it shows */
body.float header:has(#firstRun:not([hidden])){z-index:13}
@media (min-width:901px){body.float header #firstRun{top:calc(100% + 104px)}}   /* below the 2D/3D switch and the views' "Waga mapy" legend (header + 10 px + ~88 px), over neither */
/* demo review b0858be pt 2: with the key box shown (production) the Akcja bar overflowed 1280 / 1440 and cut "Rola: operat" -
   under 1500 px the key box is its input only (placeholder "klucz", title says what it is) and "Rola:" goes */
@media (max-width:1499px){
  header #pinbox{font-size:0;gap:0}
  header #pinbox input{font-size:13px;width:60px;min-width:0}
}
@media (max-width:1349px){ body.float header{column-gap:4px!important} #scen{max-width:120px} }   /* 1280 px (runbook minimum) still one row */
/* the same bar at 1500-1919 px: 9-124 px too wide (1536: "Rola: operator" off screen) - the logo without the name and the key box
   as its input only, as under 1500 px */
@media (min-width:1500px) and (max-width:1919px){
  header h1{font-size:0;gap:0;margin-right:0}
  header #pinbox{font-size:0;gap:0}
  header #pinbox input{font-size:13px;width:60px;min-width:0}
}
/* phone menu (mobile.css): "Zmień scenariusz" as a full-width row like the other menu items */
@media (max-width:600px){ body.m-menu:not(.role-ratownik) header>.scenlbl #scenPick{flex:1 1 100%;min-height:48px;font-size:16px;text-align:left;border-radius:10px;padding:0 14px} }
/* "Zmień scenariusz" in place: the Centrum pick iframe (pick=1&embed=1) over the whole app, kept in the DOM between uses */
#pickLayer{position:fixed;inset:0;z-index:900;background:color-mix(in srgb,var(--rl-bg) 97%,transparent);display:flex}
#pickLayer[hidden]{display:none}
#pickLayer iframe{flex:1;width:100%;height:100%;border:0;background:transparent}
body.picking{overflow:hidden}
#pickLayer .pickslow{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:var(--rl-panel-solid);color:var(--rl-ink);border:1px solid var(--rl-line);border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
#pickLayer .pickslow[hidden]{display:none}
#pickLayer .pickslow button{margin-left:8px}

/* Symulacja 24/7 bell in the header (appbell.js, AI Mateusza #1): operator only; the rescuer phone has its own screen */
header>.lfhost{display:inline-flex;align-items:center}
header>.lfhost[hidden],body.role-ratownik header>.lfhost,body.role-ratownik .lftoasts{display:none}
/* qa-wieczor #2 (AI Mateusza #1): Plan adds Nowa historia / Cofnij / name / Zapisz to the bar, which pushed Czat, Udostępnij, ? and
   Rola off screen at 1440 px. In Plan the story is always Historia (no Na żywo), the scenario is the studio and a new live action
   needs Na żywo, so those three go and the bar fits again */
body.mode-edycja header>#tmode,body.mode-edycja header>.scenlbl,body.mode-edycja header>#newActionBtn{display:none!important}
/* qa-wieczor round 2 #3 (AI Mateusza #1): 1100 px - the bar ran 140 px past the edge (? and Rola off screen); tighter gaps and padding,
   13 px labels between the phone layout and 1250 px, same items */
@media (min-width:601px) and (max-width:1250px){
  header{gap:4px!important;column-gap:4px!important}
  header>button,header>a,header>.scenlbl>button,header .views button,header .lfbell{padding-left:7px!important;padding-right:7px!important}
  header>button:not(#newActionBtn),header>a:not(#centrumLink),header>.scenlbl>button,header .views button{font-size:13px!important}   /* not the two short-label links (font-size:0 + ::after) */
  header>h1 .logo{margin-right:0}
}
/* sens-funkcji #15: no key field in the desktop bar - a lock (open = this device may change the action, colour = role), the field in Udostępnij;
   the phone menu (mobile.css, under 601 px) and the rescuer's 401 box keep the field in the bar */
@media (min-width:601px){body:not(.role-ratownik) header>#pinbox{display:none!important}}
#keyLock{display:inline-flex;align-items:center;justify-content:center;min-width:36px;color:var(--rl-mute)}
#keyLock[hidden]{display:none}
#keyLock .kl-o{display:none}
body.key-operator #keyLock .kl-o,body.key-field #keyLock .kl-o{display:inline}
body.key-operator #keyLock .kl-c,body.key-field #keyLock .kl-c{display:none}
body.key-operator #keyLock{color:var(--rl-ok)}body.key-field #keyLock{color:var(--rl-warn)}body.key-wrong #keyLock,body.pin-asked #keyLock{color:var(--rl-danger)}
header #pinbox .kstate{display:none}
#shareDlg #pinbox:not([style*="none"]){display:flex!important;align-items:center;gap:10px;padding:0 0 10px;font-size:var(--rl-fs-m,14px)}
#shareDlg #pinbox input{flex:0 1 200px;width:auto;margin:0}
#shareDlg #pinbox .kstate{color:var(--rl-mute);font-size:var(--rl-fs-s,12px)}
/* sens-funkcji #2 (AI Mateusza #1): bell toasts never over "Gdzie szukać najpierw" - next to it, in the map */
@media (min-width:901px){body.float .lftoasts{right:calc(var(--float-gap,12px) * 2 + var(--rail-r-w,360px));width:min(380px,calc(100vw - var(--rail-r-w,360px) - 64px))}}
/* sens-funkcji #12: right panel tabs "Gdzie szukać najpierw" | "Zespoły" (app.js renderTeamTab); the fold strip keeps working above them */
#right>#rtabs{display:flex;gap:2px;flex-wrap:wrap;margin:2px 0 6px}
#right.fold.fold-live>#rtabs{display:flex}
#rtabs button{appearance:none;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:4px 6px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--rl-mute);cursor:pointer;min-height:28px}
#rtabs button.on{color:var(--rl-ink);border-bottom-color:var(--rl-accent)}
#right:not(.rt-zesp)>#teamTab{display:none!important}
#right.rt-zesp>:is(.hero,#segs,#assets,#moreInfo){display:none!important}
.teamtab .trow{padding:6px 4px;border-bottom:1px solid var(--rl-line);cursor:pointer;border-radius:var(--rl-radius-s);font-size:var(--rl-fs-s)}
.teamtab .trow:hover,.teamtab .trow:focus-visible{background:var(--rl-panel-2);outline:none}
.teamtab .trow .row{gap:6px;align-items:baseline;flex-wrap:nowrap}
.teamtab .trow .row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamtab .trow .mute{font-size:var(--rl-fs-xs);white-space:nowrap}
.teamtab .trow .help{margin:1px 0 0;overflow-wrap:anywhere}
.teamtab .tst{flex:none;font-size:var(--rl-fs-xs);font-weight:700;padding:0 6px;border-radius:999px;border:1px solid var(--rl-line-strong);color:var(--rl-ink-2);white-space:nowrap}
.teamtab .tst.on{background:var(--rl-ok,#2e7d32);border-color:transparent;color:var(--rl-on-ok)}
.teamtab .tst.go{background:var(--rl-warn);border-color:var(--rl-warn);color:var(--rl-ink)}
.teamtab .tst.off{opacity:.6}
.teamtab .ah{font-weight:600;padding:0 4px;border-radius:5px}
.teamtab .ah.amber{background:var(--rl-warn);color:var(--rl-ink)}
.teamtab .ah.red{background:var(--rl-danger);color:var(--rl-on-danger)}
.teamtab .tzas{display:inline-block;margin:8px 4px 2px;font-size:var(--rl-fs-s);font-weight:600}