/* Sivun tyylit (siirretty index.html:n <style>-lohkosta, jotta CSP voi
   myöhemmin kieltää inline-tyylit; ks. docs/JATKOKEHITYS.md A6). */
/* Sama tumma teema kuin muissa SURO-sovelluksissa (tausta #151514, kortit
   #1e1e1c, aksentti #7ec8f0). Tulosteet (AAR) ovat aina vaaleita. */
:root{--fs:1;--bg:#151514;--card:#1e1e1c;--card-alt:#252523;--card-hi:#2c2c29;--border:#2a2a28;--border-soft:#3a3a38;
  --text:#e8e8e4;--text-strong:#f4f4f0;--muted:#9a9a96;--faint:#908f8b;
  --accent:#7ec8f0;--accent-bg:#1a2a4a;--accent-border:#2a5a8c;
  --ok:#7cf07c;--ok-bg:#16301a;--ok-border:#2f6a36;--warn:#f0c040;--warn-bg:#3d3200;--warn-border:#7a6410;
  --bad:#f07c7c;--bad-bg:#3a1a1a;--bad-border:#8c2a2a;--crit:#ff5a5a;--crit-bg:#5c0a0a;
  --viz-good:#0ca30c;--viz-warning:#fab219;--viz-critical:#d03b3b;--viz-neutral:#3987e5;--viz-track:#34342f;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:calc(15px * var(--fs));line-height:1.4}
a{color:var(--accent)}
.hidden{display:none !important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:calc(13px * var(--fs))} .tiny{font-size:calc(12px * var(--fs))}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)} .crit{color:var(--crit)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

/* Yläpalkki ja välilehdet samassa sticky-säiliössä: rivittyvä yläpalkki ei jää välilehtien alle. */
.topbar{position:sticky;top:0;z-index:20}
header{background:#0e0e0c;padding:8px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.brand{font-weight:800;letter-spacing:.08em;color:var(--text-strong);text-decoration:none;font-size:calc(17px * var(--fs))}
.brand small{font-weight:500;letter-spacing:.02em;color:var(--muted);font-size:calc(11px * var(--fs));margin-left:6px}
.sess-name{font-weight:600;color:var(--text-strong);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clock{font-family:var(--mono);font-size:calc(22px * var(--fs));font-weight:700;color:var(--text-strong);letter-spacing:.02em}
.clock .tplus{font-size:calc(12px * var(--fs));color:var(--muted);margin-left:6px;font-weight:500}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border-soft);background:var(--card-alt);color:var(--muted);white-space:nowrap}
.chip.run{color:var(--ok);border-color:var(--ok-border);background:var(--ok-bg)}
.chip.pause{color:var(--warn);border-color:var(--warn-border);background:var(--warn-bg)}
.chip.stop{color:var(--bad);border-color:var(--bad-border);background:var(--bad-bg)}
.chip.lvl1{color:#000;background:var(--warn);border-color:var(--warn)}
.chip.lvl2{color:#fff;background:#c0561c;border-color:#e0702c}
.chip.lvl3{color:#fff;background:#b01818;border-color:#ff4a4a}
.chip.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
select,input,textarea,button{font-family:inherit;font-size:calc(14px * var(--fs))}
select,input,textarea{padding:6px 8px;border:1px solid var(--border-soft);border-radius:5px;background:var(--card-alt);color:var(--text)}
input[type=checkbox]{accent-color:var(--accent)}
textarea{width:100%;min-height:60px;resize:vertical}
input::placeholder,textarea::placeholder{color:#76766f}
label.f{display:block;font-size:calc(13px * var(--fs));color:var(--muted);margin:8px 0 3px}
.btn{background:var(--card-alt);color:var(--accent);border:1px solid var(--accent-border);padding:7px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--accent-bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sec{color:var(--text);border-color:var(--border-soft)} .btn.sec:hover{background:#2f2f2c}
.btn.danger{color:var(--bad);border-color:var(--bad-border)} .btn.danger:hover{background:var(--bad-bg)}
.btn.ok{color:var(--ok);border-color:var(--ok-border)} .btn.ok:hover{background:var(--ok-bg)}
.btn.warn{color:var(--warn);border-color:var(--warn-border)} .btn.warn:hover{background:var(--warn-bg)}
.btn.sm{padding:4px 9px;font-size:calc(13px * var(--fs))}
.btn.primary{background:var(--accent-border);color:#fff;border-color:var(--accent-border)} .btn.primary:hover{background:#3570a8}

nav#tabs{display:flex;gap:2px;background:var(--card);padding:0 10px;border-bottom:1px solid var(--border);overflow-x:auto}
nav#tabs button{font-size:calc(14px * var(--fs));padding:10px 13px;border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;color:var(--muted);white-space:nowrap;position:relative}
nav#tabs button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
nav#tabs .badge{position:relative;top:-6px;margin-left:3px;background:var(--bad);color:#fff;border-radius:9px;padding:0 5px;font-size:calc(10px * var(--fs));font-weight:800}
.subtabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin:4px 0 10px}
.subtabs button{padding:8px 12px;border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;color:var(--muted);white-space:nowrap}
.subtabs button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.subtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.subtabs .badge{margin-left:5px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border);border-radius:9px;padding:0 5px;font-size:calc(10px * var(--fs));font-weight:800}
.subtab-panel > h3:first-child,.subtab-panel > .grid2:first-child h3:first-child{margin-top:4px}
#alertbar{display:flex;gap:6px;flex-wrap:wrap;padding:6px 12px;background:#18120f;border-bottom:1px solid var(--border)}
#alertbar:empty{display:none}
#discussionBar:empty{display:none}
#discussionBar{padding:10px 14px;background:#10202e;border-bottom:2px solid #7ec8f0}
#discussionBar h2{margin:0 0 6px;font-size:calc(16px * var(--fs));display:flex;gap:8px;align-items:center}
#discussionBar ul{margin:4px 0 8px 18px;padding:0}
#discussionBar textarea{width:100%;min-height:70px}
.disc-notes{white-space:pre-wrap;font-size:calc(13px * var(--fs))}
.alert{font-size:calc(13px * var(--fs));padding:3px 9px;border-radius:5px;border:1px solid}
.alert.CRITICAL{background:var(--crit-bg);border-color:#ff4a4a;color:#ffd0d0;animation:pulse 1.6s infinite}
.alert.HIGH{background:var(--warn-bg);border-color:var(--warn-border);color:#ffe79a}
@keyframes pulse{50%{box-shadow:0 0 0 3px rgba(255,74,74,.25)}}
main{padding:14px;max-width:1500px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.card h2{font-size:calc(14px * var(--fs));margin:0 0 10px;color:var(--text-strong);display:flex;align-items:center;gap:8px}
.card h2 .spacer{flex:1}
.card h3{font-size:calc(13px * var(--fs));margin:12px 0 6px;color:var(--text-strong)}
table{width:100%;border-collapse:collapse;font-size:calc(14px * var(--fs))}
th,td{border-bottom:1px solid var(--border);padding:5px 6px;text-align:left;vertical-align:middle}
th{background:var(--card-alt);color:var(--muted);font-size:calc(12.5px * var(--fs));font-weight:600;position:sticky;top:0}
tr.dim td{opacity:.5}
.gsw{display:inline-block;width:12px;height:12px;flex:none;vertical-align:-1px;position:relative}
.gsw.pt{border-radius:50%;background:var(--c);border:1px solid #000}
.gsw.ar{border-radius:2px;background:color-mix(in srgb,var(--c) 45%,transparent);border:1.5px solid var(--c)}
.gsw.ln::after{content:"";position:absolute;left:0;right:0;top:5px;height:3px;border-radius:2px;background:var(--c)}
.gsw.bd{border:2px dashed var(--c);border-radius:2px}
table.geo-layers tr.grp td{background:var(--card-alt);border-top:1px solid var(--border-soft)}
.steps{border:1px solid var(--border-soft);border-radius:8px;padding:8px 10px}
.steps.done{border-color:var(--ok-border)}
.step-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.step-list li{display:flex;gap:8px;align-items:center;background:var(--card-alt);border:1px solid var(--border);border-radius:6px;padding:6px 8px}
.step-list li > div{flex:1;min-width:0}
.step-ico{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:calc(12px * var(--fs));flex:none;border:2px solid var(--border-soft);color:var(--muted)}
.step-list li.ok .step-ico{border-color:var(--ok-border);color:var(--ok);background:var(--ok-bg)}
.step-list li.warn .step-ico{border-color:var(--warn-border);color:var(--warn);background:var(--warn-bg)}
.step-list li.todo .step-ico{border-color:var(--accent-border);color:var(--accent)}
.gsw.lnd::after{content:"";position:absolute;left:0;right:0;top:5px;height:0;border-top:3px dashed var(--c)}
.gsw.ring{border-radius:50%;border:2.5px solid var(--c)}
.gsw.pt.dash{border:1.5px dashed #fff}
.gsw.pt.ring2{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--c)}
.gsw.pt.strike::after{content:"";position:absolute;left:-1px;right:-1px;top:5px;height:2px;background:#fff;transform:rotate(-45deg)}
.mc-btn:focus-visible,.pchip:focus-visible,.search-res .res:focus-visible,.map-info .x:focus-visible,.btn:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pop-row .n,.geo-layers .mono.muted{color:var(--muted)}
.map-ctl,.map-wrap .maplibregl-ctrl{transition:opacity .4s}
.wall.idle,.wall.idle *{cursor:none !important}
.wall.idle .map-ctl,.wall.idle .map-wrap .maplibregl-ctrl,.wall.idle .map-info{opacity:0;pointer-events:none}
.wall{font-size:calc(16px * var(--fs))}
.wall .mc-btn,.wall .map-ctl-bar select{font-size:calc(15px * var(--fs));padding:5px 12px}
.wall .map-pop{font-size:calc(14px * var(--fs));width:340px}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto !important;transition:none !important;animation:none !important}}
.box-sel{position:absolute;border:2px dashed #fb923c;background:rgba(251,146,60,.12);pointer-events:none;z-index:2}
.geo-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
@media (max-width:1100px){.geo-layout{grid-template-columns:1fr}}
tr.hl td{background:rgba(240,124,124,.08)}
.tbl-wrap{overflow:auto;max-height:520px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 11px;border-left:4px solid var(--border-soft)}
.kpi .l{font-size:calc(11.5px * var(--fs));text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kpi .v{font-size:calc(22px * var(--fs));font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.kpi .s{font-size:calc(12px * var(--fs));color:var(--muted);margin-top:1px}
.kpi.good{border-left-color:var(--viz-good)} .kpi.warning{border-left-color:var(--viz-warning)} .kpi.critical{border-left-color:var(--viz-critical)}
.kpi.critical .v{color:#ff8a8a}
.layout-map{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:12px;align-items:start}
@media (max-width:1100px){.layout-map{grid-template-columns:1fr}}
.map-wrap{position:relative;background:#0b0c0b;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.map-wrap svg{display:block;width:100%;height:auto}
.map-wrap.geo .ml-map{position:absolute;inset:0}
.map-wrap.geo svg.geo-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.map-wrap.geo .map-hint{z-index:3;left:50px}
.map-ctl{position:absolute;left:8px;bottom:8px;z-index:3;max-width:calc(100% - 60px)}
.map-ctl-bar{display:flex;gap:4px;align-items:center;background:rgba(10,10,9,.85);border:1px solid var(--border);border-radius:7px;padding:4px}
.mc-btn{background:transparent;border:1px solid var(--border-soft);color:var(--text);border-radius:5px;padding:3px 9px;font-size:calc(12px * var(--fs));cursor:pointer;white-space:nowrap}
.mc-btn:hover,.mc-btn[aria-expanded="true"]{background:var(--accent-bg);border-color:var(--accent-border)}
.mc-btn.on{color:var(--accent);border-color:var(--accent-border)}
.map-ctl-bar select{padding:2px 4px;font-size:calc(12px * var(--fs));max-width:170px}
.map-pop{position:absolute;left:0;bottom:calc(100% + 6px);width:290px;max-width:calc(100vw - 40px);max-height:min(380px,70vh);overflow:auto;background:rgba(14,14,13,.97);border:1px solid var(--border-soft);border-radius:8px;padding:8px 10px;font-size:calc(12px * var(--fs));color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.pop-h{display:flex;gap:6px;align-items:center;margin-bottom:4px;font-size:calc(13px * var(--fs))}
.pop-sec{font-size:calc(10.5px * var(--fs));text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:8px 0 3px}
.pop-row{display:flex;align-items:center;gap:7px;padding:3px 0;cursor:pointer;white-space:nowrap}
.pop-row .n{margin-left:auto;padding-left:10px;color:var(--faint);font-family:var(--mono);font-size:calc(11px * var(--fs))}
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.lg{display:flex;align-items:center;gap:6px;font-size:calc(11.5px * var(--fs))}
.gsw.sq{background:var(--c);border-radius:2px}
.gsw.pill{background:var(--c);border-radius:6px;width:16px;border:1px solid #fbbf24}
.gsw.hatch{background:repeating-linear-gradient(45deg,var(--c) 0 3px,rgba(239,68,68,.3) 3px 6px);border-radius:2px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.pchip{background:var(--card-alt);border:1px solid var(--border-soft);color:var(--text);border-radius:12px;padding:2px 9px;font-size:calc(11.5px * var(--fs));cursor:pointer}
.pchip:hover{border-color:var(--accent-border);color:var(--accent)}
.search-res{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.search-res .res{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;color:var(--text);text-align:left;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:calc(12px * var(--fs))}
.search-res .res:hover,.search-res .res:focus{background:var(--accent-bg);border-color:var(--accent-border);outline:none}
.search-res .res-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-info{position:absolute;top:8px;left:8px;z-index:4;width:260px;background:rgba(14,14,13,.97);border:1px solid var(--accent-border);border-radius:8px;padding:8px 10px;font-size:calc(12px * var(--fs));box-shadow:0 6px 20px rgba(0,0,0,.5)}
.map-info .x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:calc(13px * var(--fs))}
.swatch{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}

.map-hint{position:absolute;top:8px;left:8px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border);padding:4px 9px;border-radius:5px;font-size:calc(12px * var(--fs))}
.bar{height:10px;background:var(--viz-track);border-radius:5px;overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;border-radius:5px}
.status{display:inline-block;padding:1px 7px;border-radius:4px;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.02em;white-space:nowrap}
.st-OPEN,.st-READY,.st-AT_STAND,.st-DEPARTED,.st-LANDED,.st-MET{background:var(--ok-bg);color:var(--ok)}
.st-CLOSED,.st-DIVERTED,.st-CANCELLED,.st-ACCIDENT,.st-OOS,.st-EVACUATED,.st-MISSED,.st-ACTIVE{background:var(--bad-bg);color:var(--bad)}
.st-INSPECTION,.st-CLEARING,.st-HOLDING,.st-HELD,.st-DISPATCHED,.st-RETURNING,.st-REPLENISH,.st-SETTING_UP,.st-LATE,.st-CONTROLLED,.st-STANDBY_MOVING{background:var(--warn-bg);color:var(--warn)}
.st-INBOUND,.st-BOARDING,.st-SCHEDULED,.st-STANDBY,.st-ON_SCENE,.st-PENDING{background:var(--accent-bg);color:var(--accent)}
.st-CLEARED,.st-INACTIVE,.st-NOT_APPLICABLE{background:var(--card-hi);color:var(--muted)}
.prio-CRITICAL{border-left:4px solid #ff4a4a !important} .prio-HIGH{border-left:4px solid var(--warn) !important}
.msg{background:var(--card-alt);border:1px solid var(--border);border-radius:7px;padding:9px 11px;margin-bottom:8px;border-left:4px solid var(--border-soft)}
.msg.unread{box-shadow:inset 0 0 0 1px var(--accent-border)}
.msg .hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:calc(13px * var(--fs));color:var(--muted);margin-bottom:4px}
.msg .hd b{color:var(--text-strong);font-size:calc(14px * var(--fs))}
.msg .tx{white-space:pre-wrap;line-height:1.4}
.msg .resp{margin-top:6px;font-size:calc(13px * var(--fs));color:var(--ok);background:rgba(124,240,124,.06);padding:4px 7px;border-radius:5px}
.msg .opts{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.log{font-size:calc(13.5px * var(--fs))}
.log .e{display:grid;grid-template-columns:66px 130px 1fr;gap:8px;padding:4px 0;border-bottom:1px solid var(--border)}
.log .e .t{font-family:var(--mono);color:var(--muted)}
.log .e .w{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .e.SYSTEM .x{color:#c9c9c4} .log .e.SCENARIO .x,.log .e.CONTROL .x{color:#e3c585}
.log .e.REJECTED .x{color:var(--bad)}
.unit{display:inline-flex;align-items:center;gap:4px}
.toast-wrap{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:var(--card-hi);border:1px solid var(--border-soft);border-left:4px solid var(--accent);padding:9px 13px;border-radius:6px;max-width:400px;box-shadow:0 6px 18px rgba(0,0,0,.4);font-size:calc(14px * var(--fs))}
.toast.err{border-left-color:var(--bad)} .toast.ok{border-left-color:var(--ok)} .toast.info{border-left-color:var(--warn)}
.login-box{max-width:420px;margin:60px auto;background:var(--card);padding:22px;border-radius:10px;border:1px solid var(--border)}
.login-box h1{margin:0 0 2px;font-size:calc(24px * var(--fs));letter-spacing:.1em}
.seg{display:flex;border:1px solid var(--border-soft);border-radius:7px;overflow:hidden;margin:14px 0}
.seg button{flex:1;padding:8px;border:none;background:var(--card-alt);color:var(--muted);cursor:pointer}
.seg button.active{background:var(--accent-bg);color:var(--accent);font-weight:700}
.error{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-border);padding:8px 12px;border-radius:6px;margin:8px 0}
.note{background:var(--accent-bg);border:1px solid var(--accent-border);color:#cfe8f7;padding:8px 12px;border-radius:6px;margin:8px 0;font-size:calc(14px * var(--fs))}
.sess-list .s{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--card-alt)}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.role-card{border:1px solid var(--border-soft);border-radius:8px;padding:10px;cursor:pointer;background:var(--card-alt)}
.role-card:hover,.role-card.sel{border-color:var(--accent);background:var(--accent-bg)}
.role-card b{display:block;color:var(--text-strong);margin-bottom:3px}
.rw-card{border:1px solid var(--border);border-radius:8px;padding:9px 10px;background:var(--card-alt);margin-bottom:8px}
.rw-card .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rw-card .nm{font-family:var(--mono);font-weight:800;font-size:calc(16px * var(--fs));color:var(--text-strong);min-width:74px}
.gauge{position:relative;height:14px;background:var(--viz-track);border-radius:7px;overflow:hidden}
.gauge>i{position:absolute;left:0;top:0;bottom:0;border-radius:7px}
.spark{width:100%;height:60px;display:block}
.chart{width:100%;height:150px;display:block}
.slider-row{display:flex;gap:10px;align-items:center}
.slider-row input[type=range]{flex:1}
details.fold summary{cursor:pointer;color:var(--accent);font-size:calc(13px * var(--fs));margin:4px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:calc(13px * var(--fs))}
.kv .k{color:var(--muted)}
.wall header,.wall nav#tabs{display:none}
.wall main{max-width:none;padding:10px}
.wall .kpi .v{font-size:calc(30px * var(--fs))}
.qr{background:#fff;padding:8px;border-radius:6px;display:inline-block}
.pill-sel{display:inline-flex;gap:0;border:1px solid var(--border-soft);border-radius:6px;overflow:hidden}
.pill-sel button{border:none;background:var(--card-alt);color:var(--muted);padding:6px 10px;cursor:pointer}
.pill-sel button.on{background:var(--accent-bg);color:var(--accent);font-weight:700}
@media print{header,nav,#alertbar,#discussionBar,.toast-wrap{display:none}}
.wz-steps{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.wz-step{display:inline-flex;align-items:center;gap:8px;background:var(--card-alt);color:var(--muted);border:1px solid var(--border-soft);border-radius:999px;padding:6px 14px 6px 6px;cursor:pointer;font-size:calc(13px * var(--fs))}
.wz-step span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--border-soft);color:var(--text);font-weight:700;font-size:calc(12px * var(--fs))}
.wz-step.on{color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)} .wz-step.on span{background:var(--accent);color:#000}
.wz-step.done span{background:var(--ok-border)}
.wz-form{align-items:end} .wz-wide{grid-column:1/-1}
.wz-base{border:1px solid var(--border-soft);border-radius:8px;padding:10px 12px;cursor:pointer;background:var(--card-alt)} .wz-base:hover{border-color:var(--accent-border);background:var(--accent-bg)}
.wz-mk{display:flex;align-items:center;gap:6px;cursor:pointer;transform:translateY(-2px)}
.wz-mk b{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid #fff;font-size:calc(12px * var(--fs));box-shadow:0 0 0 4px rgba(239,68,68,.3)}
.wz-mk span{background:rgba(10,10,9,.85);color:#f4f4f0;font-size:calc(11px * var(--fs));padding:2px 6px;border-radius:4px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.wz-mk.on b{background:#f59e0b} .wz-mk.draft b{background:#f472b6}
.rem-item{border:1px solid var(--warn-border);background:var(--warn-bg);border-radius:6px;padding:8px 10px;margin-bottom:8px}
.wz-explan{border:1px solid var(--accent-border);background:var(--accent-bg);border-radius:8px;padding:10px 12px;margin:6px 0 10px}
.wz-evcard{border-color:var(--accent-border);margin-top:12px}

/* Estetty toiminto (X.gate): näyttää estetyltä, mutta napautus kertoo syyn. */
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn[aria-disabled="true"]:hover{background:var(--card-alt)}
.view-note{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.w100{width:100%}
.invalid{border-color:var(--bad) !important;outline:1px solid var(--bad)}
.btn.danger-solid{background:#8c2a2a;color:#fff;border-color:#b83a3a} .btn.danger-solid:hover{background:#a83232}
.pill-sel button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
nav#tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Vahvistusdialogi (X.dialog) */
dialog.dlg{background:var(--card);color:var(--text);border:1px solid var(--border-soft);border-radius:10px;padding:18px 20px;width:min(480px,calc(100vw - 32px));box-shadow:0 12px 40px rgba(0,0,0,.6)}
dialog.dlg::backdrop{background:rgba(0,0,0,.6)}
dialog.dlg h2{margin:0 0 10px;font-size:calc(17px * var(--fs));color:var(--text-strong)}
.dlg-body{white-space:pre-wrap;line-height:1.5;color:var(--text);margin-bottom:6px}
.dlg-btns{margin-top:16px}
/* Kapea näyttö: yläpalkki tiiviimmäksi. */
@media (max-width:700px){
  header{gap:8px;padding:6px 10px}
  #hdrUser,.brand small,label[for="roleSel"]{display:none}
  .sess-name{max-width:160px}
  .clock{font-size:calc(18px * var(--fs))}
  main{padding:10px}
}
/* U2: välilehtiryhmät */
nav#tabs .tab-sep{align-self:center;margin:0 4px 0 14px;padding-left:12px;border-left:1px solid var(--border-soft);font-size:calc(11.5px * var(--fs));color:var(--faint);white-space:nowrap}
nav#tabs button.other{color:var(--faint)}
nav#tabs button.other.active{color:var(--accent)}
/* U2: hälytyspalkin painikkeet */
button.alert{cursor:pointer;font-family:inherit}
button.alert:hover{filter:brightness(1.25)}
button.alert:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* U2: toimenpidejono */
#taskbar:empty,#msgStrip:empty{display:none}
#taskbar{padding:8px 14px 0;max-width:1500px;margin:0 auto}
.tq{background:var(--card);border:1px solid var(--accent-border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.tq-h{display:flex;gap:8px;align-items:center}
.tq-n{background:var(--accent-border);color:#fff;border-radius:9px;padding:0 7px;font-size:calc(12px * var(--fs));font-weight:800}
.tq-row{display:flex;gap:10px;align-items:center;background:var(--card-alt);border:1px solid var(--border);border-left:4px solid var(--border-soft);border-radius:6px;padding:6px 8px}
.tq-row.prio-CRITICAL{border-left-color:#ff4a4a}
.tq-row.prio-HIGH{border-left-color:var(--warn)}
.tq-p{font-size:calc(11px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);min-width:84px}
.tq-row.prio-CRITICAL .tq-p{color:#ff8a8a}
.tq-row.prio-HIGH .tq-p{color:var(--warn)}
.tq-t{flex:1;min-width:0}
.tq-done{font-size:calc(13px * var(--fs));color:var(--ok);padding:2px 8px}
@media (max-width:700px){.tq-p{display:none}.tq-row{flex-wrap:wrap}}
/* U2: kiireelliset viestit */
#msgStrip{padding:8px 14px 0;max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.ms-row{display:flex;gap:10px;align-items:center;background:#231a10;border:1px solid var(--warn-border);border-radius:7px;padding:7px 10px}
.ms-row.prio-CRITICAL{background:var(--crit-bg);border-color:#ff4a4a}
.ms-p{font-size:calc(11px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--warn);white-space:nowrap}
.ms-row.prio-CRITICAL .ms-p{color:#ffb0b0}
.ms-t{flex:1;min-width:0}
@media (max-width:700px){.ms-row{flex-wrap:wrap}.ms-t{flex-basis:100%}}
/* U2: korostus, kun jono vie kohteeseen */
.flash{animation:flash 1.5s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
/* U2: dialogin lisäsisältö ja vaikutus */
dialog.dlg.wide{width:min(720px,calc(100vw - 32px))}
.dlg-impact:empty{display:none}
.dlg-impact{margin-top:10px}
.impact{background:var(--card-alt);border:1px solid var(--border-soft);border-radius:7px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.dsp-wrap{max-height:320px;margin-top:8px}
table.dsp label{cursor:pointer}
/* U2: viestit */
.msg-tools{margin:-4px 0 8px}
.msg-thread h3{margin:10px 0 6px}
#msgGroup{margin-left:6px}
/* U3: apuluokat (uusi tyyli luokkana, ei style-määritteenä) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt6{margin-top:6px} .mt8{margin-top:8px} .mt10{margin-top:10px} .w80{width:80px} .flex1{flex:1}
/* U3: pelinjohdon kellopalkki ja alivälilehdet */
.ct-bar{position:sticky;top:var(--topbar-h,0px);z-index:15;box-shadow:0 4px 12px rgba(0,0,0,.35);padding:8px 12px}
.ct-bar-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ct-bar-row + .ct-bar-row{margin-top:6px}
.ct-clock{display:flex;gap:8px;align-items:center;font-size:calc(14px * var(--fs))}
.ct-sep{width:1px;height:22px;background:var(--border-soft);margin:0 4px}
.ct-disc summary{margin:0}
.ct-disc[open]{flex-basis:100%}
.ct-disc-body{max-width:520px}
.ct-main{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:900px){.ct-main{grid-template-columns:1fr}}
.danger-zone{border-color:var(--bad-border)}
.danger-zone h2{color:var(--bad)}
.subtabs .badge{background:var(--bad);color:#fff;border-color:var(--bad)}
table.players td{vertical-align:top}
table.tl td:first-child{white-space:nowrap}
.tl-wrap{max-height:300px}
.steps .step-list li button{flex:none}
.impact-t{margin-top:4px}
/* U3: perehdytys */
.term{background:none;border:0;color:var(--accent);cursor:pointer;font-size:calc(14px * var(--fs));padding:0 2px;line-height:1;vertical-align:1px}
.term:hover{color:#fff}
.term:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:50%}
.intro h3{margin:14px 0 4px}
.intro ol,.intro ul{margin:4px 0 8px 20px;padding:0;line-height:1.5}
.gloss dt{font-weight:700;color:var(--text-strong);margin-top:10px}
.gloss dd{margin:2px 0 0;line-height:1.5}
/* U3: aula */
.sess-h{margin:14px 0 6px;font-size:calc(13px * var(--fs));color:var(--muted);text-transform:none}
details.adv{margin-top:10px;border:1px solid var(--border);border-radius:7px;padding:6px 10px}
details.adv[open]{padding-bottom:10px}
/* U4: päätösmerkinnät jälkipuinnissa */
.dec-wrap{max-height:300px;margin-top:6px}
.chart .dmark{cursor:help}

/* U5: tekstikoko (A−/A+) skaalaa kaikki fonttikoot --fs-kertoimella */
.w70{width:70px} .w90{width:90px}
.fs-ctl{display:inline-flex;gap:2px;align-items:center}
.fs-ctl .btn{min-width:32px}
/* U5: kumoa-painike ilmoituksessa, kumotut lokissa */
.toast{display:flex;gap:10px;align-items:center}
.toast span{flex:1}
.toast-act{flex:none}
.log .e.undo .x{color:var(--warn);font-style:italic}
/* U5: tiivis taulukkonäkymä ja kiinnitetyt kiireelliset */
.dense .cx{display:none}
tr.grp td{background:var(--card-alt);color:var(--muted);font-size:calc(12px * var(--fs));font-weight:700;padding:4px 6px}
tr.crit-h td{color:#ff8a8a}
#trDense.on{color:var(--accent);border-color:var(--accent-border)}
/* U5: vierityksen vihje leveissä taulukoissa */
.tbl-wrap{background:linear-gradient(to right,var(--card) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(to left,var(--card) 30%,transparent) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),transparent) right center/14px 100% no-repeat scroll}
/* U5: ikonit */
.ico{width:1em;height:1em;vertical-align:-.12em;fill:currentColor;flex:none}
/* U5: kapea näyttö – valikko yläpalkissa, välilehdet alapalkissa, taulukot vierivät */
#btnMenu{display:none}
/* Keskikokoisella näytöllä harvemmin tarvittavat yläpalkin toiminnot valikon taakse. */
@media (max-width:1100px){
  #btnMenu{display:inline-flex}
  header .hdr-more{display:none}
  header.menu-open .hdr-more{display:inline-flex}
  header.menu-open #hdrUser{display:inline;flex-basis:100%;text-align:right}
}
@media (max-width:700px){
  header .spacer{display:none}
  header.menu-open #hdrUser{text-align:left}
  #roleSel{max-width:150px}
  .toast-wrap .toast:nth-last-child(n+3){display:none}
  nav#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;border-top:1px solid var(--border-soft);border-bottom:0;padding:0 4px;background:#0e0e0c}
  nav#tabs button{padding:12px 10px;border-bottom:0;border-top:3px solid transparent}
  nav#tabs button.active{border-top-color:var(--accent)}
  nav#tabs .tab-sep{display:none}
  body{padding-bottom:56px}
  .toast-wrap{bottom:66px;left:10px;right:10px}
  .toast{max-width:none}
  .card{overflow-x:auto}
  .card h2{flex-wrap:wrap}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
/* U5: apuluokat inline-tyylien tilalle (tietoturva A6: CSP ilman 'unsafe-inline') */
.mt4{margin-top:4px} .mt12{margin-top:12px} .mt14{margin-top:14px}
.w56{width:56px} .w60{width:60px}
.lh14{line-height:1.4} .lh15{line-height:1.5} .prewrap{white-space:pre-wrap}
/* U5: grid-sarake ei veny sisällön (esim. leveän taulukon) mukaan, vaan taulukko vierii kortissa. */
.grid2 > *,.grid3 > *,.layout-map > *,.geo-layout > *{min-width:0}

/* Harjoittelun tuki (docs/EXAPT_HARJOITTELU_EHDOTUS.md) */
/* Sparkline-trendit tunnuslukulaatoissa */
.kpi .v{display:flex;align-items:center;gap:8px}
.kpi .vv{white-space:nowrap}
.kpi-spark{width:64px;height:18px;margin-left:auto;align-self:center;flex:none}
.kpi-spark polyline{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.kpi.good .kpi-spark polyline{stroke:var(--viz-good)} .kpi.warning .kpi-spark polyline{stroke:var(--viz-warning)} .kpi.critical .kpi-spark polyline{stroke:var(--viz-critical)}
/* Kytkentäkartta */
.cm-wrap{overflow-x:auto;padding-bottom:6px}
.cm-svg{display:block;max-width:none}
.cm-edge{fill:none;stroke:#5a5a55;stroke-width:1.5}
.cm-edge.hl{stroke:var(--accent);stroke-width:2.4}
.cm-edge.dim{opacity:.2}
.cm-node{cursor:pointer}
.cm-node rect{fill:var(--card-alt);stroke:var(--border-soft);stroke-width:1.5}
.cm-node.open rect{stroke:var(--viz-warning)}
.cm-node.k-MAYDAY.open rect,.cm-node.k-FUEL.open rect,.cm-node.k-STRANDED.open rect{stroke:var(--viz-critical);fill:#2c1c1c}
.cm-node.k-DECISION rect{stroke:var(--accent);fill:var(--accent-bg)}
.cm-node.k-EVENT rect{stroke:#a78bfa;fill:#241f3a}
.cm-node.closed{opacity:.62}
.cm-node.closed rect{stroke:var(--border)}
.cm-node.undone .cm-t{text-decoration:line-through}
.cm-node.sel rect{stroke:#fff;stroke-width:2.5}
.cm-node.rel rect{stroke:var(--accent)}
.cm-node.dim{opacity:.25}
.cm-node:focus-visible rect{stroke:#fff;stroke-width:3}
.cm-k{font-size:calc(9.5px * var(--fs));fill:var(--muted);letter-spacing:.04em}
.cm-t{font-size:calc(11.5px * var(--fs));fill:var(--text-strong)}
.cm-legend{margin-top:4px}
.cm-sw{display:inline-block;width:11px;height:11px;border-radius:3px;border:2px solid var(--border-soft);vertical-align:-1px;margin:0 3px 0 8px}
.cm-sw.k-DECISION{border-color:var(--accent);background:var(--accent-bg)} .cm-sw.k-EVENT{border-color:#a78bfa;background:#241f3a}
.cm-sw.open{border-color:var(--viz-warning)} .cm-sw.closed{border-color:var(--border)}
.cm-detail{margin-top:8px}
.cm-detail h3{margin:0 0 2px}
.cm-ul{margin:4px 0 4px 18px;padding:0;line-height:1.45}
/* Lämpökartta */
.hm{width:100%;height:auto;display:block}
.hm-l,.hm-a{font-size:11px;fill:var(--muted)}
.hm-0{fill:#26302b;background:#26302b} .hm-1{fill:#38452e;background:#38452e} .hm-2{fill:#5b5b25;background:#5b5b25}
.hm-3{fill:#8a6a1c;background:#8a6a1c} .hm-4{fill:#b3501c;background:#b3501c} .hm-5{fill:#d03b3b;background:#d03b3b}
.hm-sw{display:inline-block;width:14px;height:10px;border-radius:2px;margin:0 3px 0 6px;vertical-align:-1px}
.hm-mk{stroke:#000;stroke-width:.5}
.hm-legend{margin-top:4px}
/* Tavoitteet ja palaute */
.obj-list{margin:6px 0 0 20px;padding:0;line-height:1.5}
.obj-row{padding:8px 0;border-bottom:1px solid var(--border)} .obj-row:last-child{border-bottom:0}
.fb-row{padding:8px 10px;margin-top:8px;background:var(--card-alt);border:1px solid var(--border);border-left:4px solid var(--border-soft);border-radius:6px}
.fb-row.v-GOOD{border-left-color:var(--viz-good)} .fb-row.v-LATE,.fb-row.v-CHECK{border-left-color:var(--viz-warning)} .fb-row.v-MISSED{border-left-color:var(--viz-critical)} .fb-row.v-UNDONE{border-left-color:var(--muted)}
.sus-q{border:0;border-top:1px solid var(--border);margin:0;padding:8px 0}
.sus-q legend{padding:0;font-size:calc(14px * var(--fs))}
.sus-opts{display:flex;gap:16px;margin-top:4px} .sus-opts label{cursor:pointer}
/* Opastettu kierros */
#tour{position:sticky;bottom:0;z-index:15}
.tour-card{margin:8px 14px;padding:10px 14px;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:8px;box-shadow:0 2px 14px rgba(0,0,0,.5);max-width:620px}
.tour-h{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:4px}
@media (max-width:700px){#tour{bottom:56px}.tour-card{margin:6px}}
/* Ohjaajan paneeli */
.co-item{padding:8px 0;border-bottom:1px solid var(--border)} .co-item:last-child{border-bottom:0}
.co-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
/* Leveät taulukot korteiksi kapealla näytöllä (X.cardify) */
@media (max-width:700px){
  table.cards,table.cards tbody{display:block;width:100%}
  table.cards tr.card-hd{display:none}
  table.cards tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin:6px 0;background:var(--card-alt)}
  table.cards tr.grp{display:block}
  table.cards td{display:block;border:0;padding:1px 0;min-width:0}
  table.cards td:empty{display:none}
  table.cards td[data-label]::before{content:attr(data-label);display:block;font-size:calc(11px * var(--fs));color:var(--muted);text-transform:none}
  .dense table.cards .cx{display:block}
  .dense table.cards .cx:empty{display:none}
  .cm-detail .grid2{grid-template-columns:1fr}
}