/* Ćwiczenia (exercise mode). Colours only from tokens.css (--rl-*), docs/rescue-locator/ui-design.md. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--rl-bg);color:var(--rl-ink);font:var(--rl-fs)/1.45 var(--rl-font)}
header{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;gap:12px;align-items:center;padding:8px 16px;background:var(--rl-panel);backdrop-filter:blur(var(--rl-blur));border-bottom:1px solid var(--rl-line)}
header h1{font-size:var(--rl-fs-l);margin:0;display:flex;align-items:center;gap:8px}
header .sub{font-weight:600;color:var(--rl-accent)}
.logo{width:26px;height:18px;fill:var(--rl-danger)}
a{color:var(--rl-accent)}
a.back{font-weight:600;text-decoration:none}
button{font:inherit;cursor:pointer;border-radius:var(--rl-radius-s);border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ink);padding:6px 12px}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--rl-danger);color:var(--rl-on-danger);border-color:var(--rl-danger);font-weight:700}
button.big{font-size:var(--rl-fs-l);padding:10px 22px}
button.link{border:0;background:none;color:var(--rl-accent);padding:4px 0}
input{font:inherit;background:var(--rl-card);color:var(--rl-ink);border:1px solid var(--rl-line-strong);border-radius:6px;padding:3px 6px}
.mute{color:var(--rl-mute)}.small{font-size:var(--rl-fs-s)}
h3{font-size:var(--rl-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--rl-mute);margin:14px 0 6px}
.page{padding:64px 16px 32px;min-height:100%}
.wrap{max-width:980px;margin:0 auto}
.lead{font-size:var(--rl-fs-xl);margin:8px 0 4px}
.panel{background:var(--rl-panel-solid);border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);padding:12px 16px;margin:12px 0;box-shadow:var(--rl-shadow)}
.panel h3:first-child{margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
.excard{background:var(--rl-panel-solid);border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);padding:14px 16px;box-shadow:var(--rl-shadow);display:flex;flex-direction:column;gap:6px}
.excard h4{margin:0;font-size:var(--rl-fs-l)}
.excard .tag{align-self:flex-start;font-size:var(--rl-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rl-accent);border:1px solid var(--rl-accent);border-radius:9px;padding:0 7px}
.excard .meta{font-family:var(--rl-mono);font-size:var(--rl-fs-s);color:var(--rl-ink-2)}
.excard button{margin-top:auto;align-self:flex-start}
.clock{font-family:var(--rl-mono);font-variant-numeric:tabular-nums;font-weight:700}
.clock.big{font-size:30px;line-height:1}
ul.feed,ul.teamlist,ul.seglist,ul.declist{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid var(--rl-line);font-size:var(--rl-fs-s)}
.feed li .t{font-family:var(--rl-mono);color:var(--rl-mute);flex:none}
.feed li.found{color:var(--rl-danger);font-weight:700}
.feed li.clue,.feed li.info{color:var(--rl-accent);font-weight:600}
.feed li.searched{color:var(--rl-ink-2)}
.teamlist li{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:var(--rl-radius-s);border:1px solid transparent;font-size:var(--rl-fs-s)}
.teamlist.pick li.free{cursor:pointer;background:var(--rl-card);border-color:var(--rl-line)}
.teamlist.pick li.free:hover{border-color:var(--rl-accent)}
.teamlist .tag{flex:none;font-size:var(--rl-fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.teamlist.pick li.sel{background:var(--rl-accent);border-color:var(--rl-accent);color:var(--rl-on-accent)}
.teamlist.pick li.sel .why,.teamlist.pick li.sel .tag{color:var(--rl-on-accent)}
.teamlist.pick li.sel:hover{border-color:var(--rl-accent)}
.teamlist.pick li.sent{border-color:var(--rl-accent);box-shadow:inset 4px 0 0 var(--rl-accent)}
.teamlist.pick li.sent .tag{color:var(--rl-accent)}
.seglist{max-height:none}  /* B6: the panel scrolls; a 220 px inner box hid sectors #8+ */
.seglist li{display:flex;gap:8px;align-items:center;padding:3px 6px;border-radius:var(--rl-radius-s);cursor:pointer;font-size:var(--rl-fs-s)}
.seglist li:hover{background:var(--rl-panel-2)}
.seglist li.sel{outline:2px solid var(--rl-accent);outline-offset:-2px;background:var(--rl-panel-2)}
.seglist li.sel .nm b{color:var(--rl-accent)}
.seglist li.pending{background:var(--rl-accent);color:var(--rl-on-accent)}
.seglist li.pending .eta,.seglist li.pending .who,.seglist li.pending .nm b{color:var(--rl-on-accent)}
.seglist li.pending .rk{border-color:var(--rl-on-accent)}
.seglist li.no{opacity:.45;cursor:default}
.seglist .rk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rl-ink-2);text-align:center;font-weight:700;font-size:12px;line-height:19px;flex:none}
.seglist li:first-child .rk{background:var(--rl-danger);border-color:var(--rl-danger);color:var(--rl-on-danger)}
.seglist .w{font-family:var(--rl-font-num);font-size:var(--rl-fs-l);font-weight:700;width:46px;text-align:right;flex:none}
.seglist .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seglist .eta{font-family:var(--rl-mono);color:var(--rl-accent);font-size:var(--rl-fs-xs);flex:none}
.seglist .who{font-size:var(--rl-fs-xs);color:var(--rl-ink-2);flex:none}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
#scrPlay{position:fixed;inset:0;padding-top:46px}
#map{width:100%;height:100%;border:0;display:block;background:var(--rl-bg)}
.float{position:absolute;top:58px;right:12px;bottom:12px;width:360px;max-width:calc(100% - 24px);overflow:auto;background:var(--rl-panel);backdrop-filter:blur(var(--rl-blur));border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);box-shadow:var(--rl-shadow);padding:12px 14px}
@media (max-width:700px){.float{top:auto;height:55%;left:12px;width:auto}}
.clockrow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.clockrow .right{text-align:right}
.msg{margin-top:8px;padding:6px 10px;border-radius:var(--rl-radius-s);background:var(--rl-chrome);color:var(--rl-on-chrome);font-size:var(--rl-fs-s)}
.msg.bad{background:var(--rl-danger);color:var(--rl-on-danger)}
.msg.ok{background:var(--rl-accent);color:var(--rl-on-accent);font-weight:600}
.mapbusy{position:absolute;top:58px;left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:var(--rl-radius-s);background:var(--rl-chrome);color:var(--rl-on-chrome);font-size:var(--rl-fs-s);font-weight:600;box-shadow:var(--rl-shadow)}
.hero{text-align:center}
.total{font-family:var(--rl-font-num);font-size:84px;font-weight:700;line-height:1;color:var(--rl-ink)}
.foundline{margin-top:8px;font-weight:700}
.foundline.yes{color:var(--rl-danger)}
.part{display:grid;grid-template-columns:150px 1fr 60px;gap:8px;align-items:center;font-size:var(--rl-fs-s);margin:5px 0}
.part .bar,.vs .bar{height:10px;background:var(--rl-panel-2);border:1px solid var(--rl-line);border-radius:5px;overflow:hidden}
.part .bar i,.vs .bar i{display:block;height:100%;background:var(--rl-accent)}
.part .n,.vs .n{font-family:var(--rl-mono);text-align:right}
.vs{display:grid;grid-template-columns:170px 1fr 52px 1.4fr;gap:8px;align-items:center;font-size:var(--rl-fs-s);margin:6px 0}
.vs.me .bar i{background:var(--rl-danger)}
.vs.me .lbl{font-weight:700}
.vs .res{color:var(--rl-ink-2);font-size:var(--rl-fs-xs)}
@media (max-width:640px){.vs{grid-template-columns:110px 1fr 44px}.vs .res{grid-column:1/-1}}
.declist li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--rl-line);font-size:var(--rl-fs-s);align-items:flex-start}
.declist .t{font-family:var(--rl-mono);color:var(--rl-mute);flex:none}
.verdict{flex:none;font-size:var(--rl-fs-xs);font-weight:700;border-radius:9px;padding:1px 8px;border:1px solid var(--rl-line-strong);min-width:52px;text-align:center}
.verdict.dobra{background:var(--rl-ok);color:var(--rl-on-ok);border-color:var(--rl-ok)}
.verdict.ok{background:var(--rl-warn);color:var(--rl-ink);border-color:var(--rl-warn)}
.verdict.słaba{background:var(--rl-card);color:var(--rl-danger);border-color:var(--rl-danger)}
.declist .why{color:var(--rl-ink-2)}
.howto ol{margin:0;padding-left:20px}

/* score: a part that does not apply (safety with no dispatched team) (AI Marcina) */
.part.na .n,.part.na span:first-child{color:var(--rl-mute)}

/* dock + events (AI Marcina): the operator app's compact dock (dock.css) at the bottom of the game screen, and the event list
   with the same kind dots (k-* colours from the --rl-ev-* tokens) */
.exdock{position:absolute;left:12px;right:calc(360px + 24px);bottom:12px;z-index:4;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:var(--rl-panel);border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);box-shadow:var(--rl-shadow)}
.exdock .tl{flex:1 1 auto}
.exdock .ticker{max-width:40%}
@media (max-width:700px){.exdock{display:none}}
.feed li[data-seq]{cursor:pointer;align-items:baseline}
.feed li > i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--rl-accent));flex:none;align-self:center}
.feed li.cur{background:var(--rl-panel-2);border-radius:var(--rl-radius-s)}

/* team cards (AI Marcina): the Zasoby unit card (unitcard.css) inside the pick list; selection and "wysłany" on the card */
.teamlist li.cardli{display:block;position:relative;padding:0;border:0;margin-bottom:6px}
.teamlist.pick li.cardli.free{background:none}
.teamlist li.cardli .unit{padding:7px 10px}
.teamlist li.cardli .u-sub{margin-bottom:0}
.teamlist li.cardli:not(.free) .unit{cursor:default}
.teamlist.pick li.cardli.sel .unit,.teamlist.pick li.cardli.sent .unit{outline:2px solid var(--rl-accent);border-color:var(--rl-accent)}
.teamlist li.cardli .tag{position:absolute;right:10px;bottom:7px}
.teamlist .u-top h3{text-transform:none;letter-spacing:normal;color:var(--rl-ink)}   /* this page's section h3 style must not reach the card */
.teamlist.pick li.cardli.sel,.teamlist.pick li.cardli.sent{background:none;box-shadow:none;border:0}
.teamlist.pick li.cardli .tag{color:var(--rl-accent)}

/* touch targets + mobile header (AI Marcina, qa-mobile.md pt 6): "Odprawa" 44 px; at 480 px and below the header stays one row -
   logo + "Ćwiczenia" (the brand name only for screen readers, like the /app top bar), PIN inline, "Wróć do akcji" one line, 44 px */
.excard button{min-height:44px;padding:8px 18px}
#pinbox{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
a.back{white-space:nowrap;flex:none}
@media (max-width:480px){
  header{gap:10px;padding:4px 12px}
  header h1{white-space:nowrap;flex:none}
  header h1 .brand{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #hdrInfo{display:none}
  #pin{width:4.5em}
  a.back{min-height:44px;display:inline-flex;align-items:center}
}
/* sens-funkcji R2-5: key lock + popover, same as Zasoby / Centrum (#15) */
#keyLock{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:28px;padding:2px 6px;background:none;border:1px solid var(--rl-line);border-radius:var(--rl-radius-s);color:var(--rl-mute);cursor:pointer}
#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{color:var(--rl-danger)}
#pinbox.keypop{position:absolute;top:calc(100% + 6px);right:12px;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:min(340px,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;background:var(--rl-panel-solid,var(--rl-panel));border:1px solid var(--rl-line);border-radius:var(--rl-radius);box-shadow:var(--rl-shadow);color:var(--rl-ink);font-size:var(--rl-fs-s)}
#pinbox.keypop[hidden]{display:none}
#pinbox .kstate{flex-basis:100%;color:var(--rl-mute)}
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)}
@media (max-width:480px){#keyLock{min-height:44px;min-width:44px}}