/* Democracy war command centre.
   Layout: a command strip over an icon rail; the Theatre fills the workspace
   (fronts rail | holotable map | inspector, timeline under the map); every
   other area is a padded page of panels. Single dark theme by design: a
   darkened ops room where Super Earth yellow marks orders and alerts only.
   The console CSP forbids inline styles, so all geometry lives here, in SVG
   attributes, or is set through the CSSOM by the scripts. */

@font-face{font-family:"Saira Condensed";src:url("fonts/SairaCondensed-Medium-latin.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url("fonts/SairaCondensed-SemiBold-latin.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url("fonts/SairaCondensed-Bold-latin.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Variable-latin.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Medium-latin.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  color-scheme:dark;
  --ink-0:#090b0a;--ink-1:#0e1210;--ink-2:#141916;--ink-3:#1b211d;--ink-4:#232a25;
  --line:#242b27;--line-2:#343d37;
  --text:#e6e9e2;--text-2:#a3ab9f;--text-3:#727b6f;
  --se:#ffd62e;--se-ink:#1c1600;--se-dim:rgba(255,214,46,.11);--se-line:rgba(255,214,46,.38);
  --f1:#68b2ec;--f2:#f3a03a;--f3:#ec5b4e;--f4:#a68cf2;
  --ok:#8ccf78;--ok-dim:rgba(140,207,120,.12);--crit:#ff5c7a;--crit-dim:rgba(255,92,122,.12);
  --display:"Saira Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --rail:64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink-0);color:var(--text);font:13.5px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding-left:1.2em}
h1{font:600 30px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
h2{font:600 21px/1.15 var(--display);letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
h3{font:600 15px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase}
small{display:block;color:var(--text-3);font-size:12px}
kbd{font:500 11px var(--mono);border:1px solid var(--line-2);border-radius:2px;padding:0 5px;color:var(--text-3)}
:focus-visible{outline:2px solid var(--se);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:90;background:var(--se);color:var(--se-ink);padding:10px 14px;font-weight:600}
.skip:focus{top:12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.micro{font-size:12px;color:var(--text-3);line-height:1.5}
.eyebrow{font:600 11.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.pad{padding:14px 16px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.danger-text{color:var(--crit)}
.empty{border:1px dashed var(--line-2);padding:14px;margin:12px;color:var(--text-3);font-size:12.5px;text-align:center}

/* faction colour hooks */
.fac-1{--fc:var(--f1)}.fac-2{--fc:var(--f2)}.fac-3{--fc:var(--f3)}.fac-4{--fc:var(--f4)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fc,var(--text-3));flex:none;margin-right:7px;vertical-align:1px}

/* ---------- shell ---------- */
.app{min-height:100%;height:100%;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.strip{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:8px 18px;min-height:58px;border-bottom:1px solid var(--line);background:var(--ink-0)}
.hazard{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 18px;background:repeating-linear-gradient(-45deg,rgba(255,214,46,.15) 0 12px,transparent 12px 24px),var(--ink-1);border-bottom:1px solid var(--se-line);color:var(--se)}
.hazard.stale{grid-row:3;background:repeating-linear-gradient(-45deg,rgba(255,92,122,.14) 0 12px,transparent 12px 24px),var(--ink-1);border-bottom-color:rgba(255,92,122,.4);color:var(--crit)}
.hazard b{font:700 16px var(--display);letter-spacing:.2em;text-transform:uppercase}
.hazard span{color:var(--text);font-size:12.5px}
.hazard form{margin:0}
.rail{grid-column:1;grid-row:4;display:flex;flex-direction:column;gap:2px;padding:10px 0;border-right:1px solid var(--line);background:var(--ink-0)}
.rail a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;color:var(--text-3);text-decoration:none;border-left:2px solid transparent;font:600 10.5px var(--display);letter-spacing:.1em;text-transform:uppercase}
.rail a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail a:hover{color:var(--text)}
.rail a[aria-current=page]{color:var(--se);border-left-color:var(--se);background:linear-gradient(90deg,var(--se-dim),transparent)}
main{grid-column:2;grid-row:4;min-width:0;min-height:0;overflow:auto;outline:none}
main.page{padding:20px 24px 48px}
main.fill{overflow:hidden;display:flex;flex-direction:column}
main.fill > .notice{margin:10px 14px 0}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{width:22px;height:22px;fill:var(--se)}
.brand b{font:700 17px var(--display);letter-spacing:.2em}
.brand small{font:600 10px var(--display);letter-spacing:.22em;text-transform:uppercase;margin-top:-3px}
.sgroup{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sgroup .k{font:600 10.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.sgroup .v{font:400 13px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sgroup .v.big{font-size:17px;font-weight:500}
.alert-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--se-line);background:var(--se-dim);color:var(--se);font:400 12px var(--mono);text-decoration:none;border-radius:2px;white-space:nowrap}
.alert-chip.crit{border-color:rgba(255,92,122,.45);background:var(--crit-dim);color:var(--crit)}
.kbtn{display:inline-flex;align-items:center;gap:10px;background:var(--ink-2);border:1px solid var(--line-2);color:var(--text-2);padding:6px 10px;border-radius:2px;cursor:pointer;min-width:210px}
.kbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.kbtn kbd{margin-left:auto}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap}
.who form{margin:0}
.who small{font-size:11px}
@media (max-width:1560px){.strip{gap:18px}.kbtn{min-width:0}.kbtn .lbl,.who small{display:none}}

/* ---------- controls ---------- */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:6px 14px;background:var(--ink-3);border:1px solid var(--line-2);border-radius:2px;color:var(--text);font:600 13px var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--ink-4);border-color:#4a554d}
.btn.primary{background:var(--se);border-color:var(--se);color:var(--se-ink)}
.btn.primary:hover{background:#ffe066}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{color:var(--text);border-color:var(--line-2)}
.btn.small{min-height:28px;padding:3px 10px;font-size:12px}
.btn.danger{color:var(--crit);border-color:rgba(255,92,122,.4)}
.btn.primary.danger{background:var(--crit);border-color:var(--crit);color:#26050c}
.btn.full{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
form > div{margin:0 0 12px}
form > div:has(> input[type=hidden]:only-child){margin:0}
label{display:block;font-size:12px;color:var(--text-2);margin-bottom:5px}
label.f{margin-bottom:5px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{display:block;width:100%;background:var(--ink-0);border:1px solid var(--line-2);border-radius:2px;padding:7px 9px;min-height:34px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--se)}
textarea{resize:vertical;line-height:1.55}
input[type=checkbox],input[type=radio]{accent-color:var(--se);width:15px;height:15px;vertical-align:-2px;margin:0 7px 0 0}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){display:inline-flex;align-items:center;color:var(--text)}
.helptext{display:block;font-size:11.5px;color:var(--text-3);margin-top:4px;line-height:1.45}
.helptext ul{margin:4px 0;padding-left:16px}
.errorlist{list-style:none;padding:0;margin:4px 0;color:var(--crit);font-size:12px}
.errorlist.nonfield{border:1px solid rgba(255,92,122,.4);background:var(--crit-dim);padding:8px 10px}
.chip{display:inline-flex;align-items:center;gap:4px;font:400 11.5px var(--mono);padding:2px 7px;border:1px solid var(--line-2);border-radius:2px;color:var(--text-2);background:var(--ink-2);white-space:nowrap;text-decoration:none}
a.chip:hover{border-color:#4a554d;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.stamp{display:inline-block;font:700 11.5px/1.4 var(--display);letter-spacing:.18em;text-transform:uppercase;padding:1px 8px;border:2px solid currentColor;border-radius:2px;transform:rotate(-1.5deg);white-space:nowrap;color:var(--text-3)}
.stamp.ok,.stamp.status-active,.stamp.status-succeeded,.stamp.status-completed,.stamp.status-published{color:var(--ok)}
.stamp.warn,.stamp.status-scheduled,.stamp.status-draft{color:var(--se)}
.stamp.crit,.stamp.status-failed,.stamp.status-cancelled,.stamp.status-exhausted{color:var(--crit)}
.stamp.dim{color:var(--text-3)}
progress{appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;background:var(--ink-4);border-radius:1px;display:block}
progress::-webkit-progress-bar{background:var(--ink-4)}
progress::-webkit-progress-value{background:var(--f1)}
progress::-moz-progress-bar{background:var(--f1)}
progress.def::-webkit-progress-value,.bar.def progress::-webkit-progress-value{background:var(--se)}
progress.def::-moz-progress-bar,.bar.def progress::-moz-progress-bar{background:var(--se)}
.notice{padding:10px 14px;margin:0 0 16px;border:1px solid var(--se-line);background:var(--se-dim);color:#e9d98e;font-size:12.5px;border-radius:2px}
.notice.subtle{border-color:var(--line-2);background:var(--ink-1);color:var(--text-2)}
.notice.success{border-color:rgba(140,207,120,.4);background:var(--ok-dim);color:#c3e0b6}
.notice.error{border-color:rgba(255,92,122,.4);background:var(--crit-dim);color:#ffc0cb}
.back-link{display:inline-block;margin-bottom:12px;color:var(--text-3);text-decoration:none;font-size:12.5px}
.back-link:hover{color:var(--se)}

/* ---------- panels and pages ---------- */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-heading p.muted{margin-top:6px;max-width:65ch}
.panel{background:var(--ink-1);border:1px solid var(--line);min-width:0}
.panel.narrow{max-width:820px}
.spaced{margin-top:16px}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font:600 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.ph .mono{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--text-3);text-decoration:none}
.columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dl{display:grid;grid-template-columns:minmax(110px,auto) minmax(0,1fr);gap:6px 14px;font-size:12.5px}
.dl dt{color:var(--text-3)}
.dl dd{min-width:0;overflow-wrap:anywhere}
.dl.wide-dt{grid-template-columns:minmax(150px,auto) minmax(0,1fr)}
.pre{white-space:pre-wrap}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.5px}
.grid-table th{font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.grid-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.diff{min-width:440px}
table.diff th{font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-2)}
table.diff tbody th{font:400 12.5px var(--body);letter-spacing:0;text-transform:none;color:var(--text-2);width:32%;vertical-align:top}
table.diff td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere}
table.diff td.b{color:var(--text-3)}
table.diff td.a{color:var(--text);background:rgba(255,214,46,.05)}
.access-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.access-form select{width:auto;min-width:140px}
.access-form label{margin:0}
.cbx{display:inline-flex;align-items:center;margin:0}

/* ---------- theatre ---------- */
.theatre{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr) auto}
.fronts{grid-column:1;grid-row:1;border-right:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;background:var(--ink-0)}
.mapwrap{grid-column:2;grid-row:1;position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#121815 0,var(--ink-0) 70%)}
.inspector{grid-column:3;grid-row:1/3;border-left:1px solid var(--line);overflow:auto;background:var(--ink-1);outline:none}
.tlwrap{grid-column:1/3;grid-row:2;border-top:1px solid var(--line);background:var(--ink-1);position:relative;z-index:3}
.front{display:block;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none}
.front:hover{background:var(--ink-2)}
.front.sel{background:var(--ink-2);box-shadow:inset 2px 0 var(--se)}
.front .top{display:flex;align-items:center;gap:6px}
.front .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.front .t{font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.front .t.def{color:var(--se)}
.front .bar{display:block;margin-top:7px}
.front .meta{display:flex;justify-content:space-between;gap:6px;font:400 11.5px var(--mono);color:var(--text-3);margin-top:6px}
.front .meta .risk{color:var(--crit)}
.mo-mini{padding:12px 14px;border-top:1px solid var(--line)}
.mo-mini .mo-title{display:block;margin:4px 0 6px;font-weight:500;font-size:13.5px;text-decoration:none}
.mo-mini ol{font-size:12.5px;display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.finder{padding:12px 14px;border-top:1px solid var(--line)}
.planet-index{list-style:none;padding:0;margin:8px 0 0;max-height:240px;overflow:auto;border:1px solid var(--line)}
.planet-index a{display:flex;align-items:center;padding:5px 9px;font-size:12.5px;text-decoration:none}
.planet-index a:hover{background:var(--ink-2)}
.planet-index small{margin-left:auto;font-family:var(--mono)}

.map{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.map.dragging{cursor:grabbing}
.map .star{fill:#29312c}
.map .rings circle{fill:none;stroke:#1d2520;stroke-width:1}
.map .sectors text{fill:#3d4840;font:600 13px var(--display);letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
.map .supply{stroke:#2a332e;stroke-width:1;vector-effect:non-scaling-stroke}
.map .supply.contested{stroke:#5a4a25;stroke-dasharray:3 4}
.map:not(.show-lines) .supply-lines{display:none}
.map .attack{stroke:var(--fc);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;opacity:.9}
.pl{cursor:pointer;outline:none}
.pl .body{fill:var(--fc);stroke:#0b0d0c;stroke-width:2.5}
.pl.home .body{fill:#0e1a24;stroke:var(--f1);stroke-width:2.5}
.pl.disabled{opacity:.35}
.pl .halo{fill:var(--fc);opacity:.12}
.map:not(.show-players) .pl .halo{display:none}
.pl .track,.pl .arc,.pl .def-ring,.pl .fx,.pl .mo,.pl .cross{display:none}
.pl.front .track{display:inline;fill:none;stroke:rgba(255,255,255,.08);stroke-width:3.5}
.pl.front .arc{display:inline;fill:none;stroke:var(--f1);stroke-width:3.5}
.pl.defence .arc{stroke:var(--se)}
.pl.defence .def-ring{display:inline;fill:none;stroke:var(--se);stroke-width:1.2;stroke-dasharray:3 4;transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
.map.show-effects .pl.has-fx .fx{display:inline;fill:#0b0d0c;stroke:#c6f0ff;stroke-width:1.5}
.map.show-orders .pl.objective .mo{display:inline;fill:none;stroke:var(--se);stroke-width:2}
.pl.sel .cross{display:inline;stroke:var(--se);stroke-width:2}
.pl .pl-label{display:none;fill:var(--text-2);font:600 var(--label,13px) var(--display);letter-spacing:.06em;paint-order:stroke;stroke:#090b0a;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.pl.front .pl-label,.pl.home .pl-label,.pl.sel .pl-label,.map.zoomed .pl .pl-label{display:inline}
.pl.sel .pl-label{fill:var(--se)}
.pl:hover .body,.pl:focus-visible .body{stroke:var(--se);stroke-width:3}
.pl.dim{opacity:.18}
@keyframes spin{to{transform:rotate(360deg)}}
.maptools{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;pointer-events:none}
.maptools > *{pointer-events:auto}
.layers{display:flex;flex-wrap:wrap;gap:4px;background:rgba(9,11,10,.86);border:1px solid var(--line);padding:4px;border-radius:2px}
.layers button{background:none;border:1px solid transparent;border-radius:2px;padding:3px 9px;color:var(--text-3);cursor:pointer;font:600 12px var(--display);letter-spacing:.1em;text-transform:uppercase}
.layers button[aria-pressed=true]{color:var(--text);border-color:var(--line-2);background:var(--ink-3)}
.zoom{margin-left:auto;display:flex;flex-direction:column;background:rgba(9,11,10,.86);border:1px solid var(--line);border-radius:2px}
.zoom button{background:none;border:0;width:32px;height:30px;cursor:pointer;color:var(--text-2);font:400 15px var(--mono)}
.zoom button + button{border-top:1px solid var(--line)}
.legend{position:absolute;left:12px;bottom:10px;display:flex;gap:12px;flex-wrap:wrap;font:600 11.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);pointer-events:none}
.legend span{display:flex;align-items:center}
.tip{position:absolute;pointer-events:none;background:rgba(9,11,10,.95);border:1px solid var(--line-2);padding:7px 10px;font-size:12px;min-width:160px;z-index:5;border-radius:2px}
.tip b{display:block;font:600 14px var(--display);letter-spacing:.08em;text-transform:uppercase}

.insp .ph{position:sticky;top:0;background:var(--ink-1);z-index:1}
.insp-body{padding:14px 16px 20px;display:flex;flex-direction:column;gap:16px}
.insp-head{display:flex;gap:12px;align-items:flex-start;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.insp-head .crest{width:44px;height:44px;object-fit:contain;flex:none}
.insp-head h2{font-size:24px;margin:2px 0 6px}
.insp-head .who-is{min-width:0;flex:1}
.insp-head .x{color:var(--text-3);text-decoration:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:2px}
.insp-head .x:hover{border-color:var(--line-2);color:var(--text)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.stats > div{padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.stats > div:nth-child(3n){border-right:0}
.stats > div.wide{grid-column:1/-1;border-right:0;border-bottom:0}
.stats dt{font:600 10.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.stats dd{font:500 15px var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats dd.owner{color:var(--fc);font:600 15px var(--display);letter-spacing:.06em;text-transform:uppercase}
.stats dd.s{font:400 11px var(--mono);color:var(--text-3)}
.tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--ink-1);z-index:1}
.tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:9px 4px;cursor:pointer;color:var(--text-3);font:600 12.5px var(--display);letter-spacing:.12em;text-transform:uppercase}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--se)}
.tabpanel{padding:14px 16px 22px;display:flex;flex-direction:column;gap:14px}
.js .tabpanel:not(.active){display:none}
details.act{border:1px solid var(--line);background:var(--ink-2);border-radius:2px}
details.act[open]{border-color:var(--se-line);background:linear-gradient(var(--se-dim),transparent 70px),var(--ink-1)}
details.act summary{list-style:none;cursor:pointer;padding:10px 12px;display:flex;flex-direction:column}
details.act summary::-webkit-details-marker{display:none}
details.act summary b{font:600 14.5px var(--display);letter-spacing:.08em;text-transform:uppercase}
details.act form,details.act > p{padding:0 12px 12px}
.effect-options{max-height:280px;overflow:auto;border:1px solid var(--line);padding:6px 10px;margin:8px 0}
.effect-options div > div{margin:3px 0}
.effect-options label{font-size:12.5px;color:var(--text)}
.hist{list-style:none;padding:0;display:flex;flex-direction:column}
.hist li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.hist time{font:400 11px var(--mono);color:var(--text-3)}
.owner-bars{width:100%;height:10px;display:block}
.owner-bars rect{fill:var(--fc)}
.alert-list{display:flex;flex-direction:column}
.alert{display:block;padding:9px 12px;border-bottom:1px solid var(--line);border-left:3px solid var(--se);text-decoration:none}
.alert.crit{border-left-color:var(--crit)}
.alert.info{border-left-color:var(--line-2)}
.alert:hover{background:var(--ink-2)}
.alert b{display:block;font-weight:500}
.alert small{font-size:12px}
.spark{display:block;width:100%;height:60px}
.spark .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.spark .area{fill:var(--sc,var(--f1));opacity:.12}
.spark .line{fill:none;stroke:var(--sc,var(--f1));stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark .end{fill:var(--sc,var(--f1))}
.spark.def{--sc:var(--se)}

/* ---------- timeline ---------- */
.timeline{position:relative;padding:8px 14px 10px;overflow-x:auto}
.timeline.tall{padding-bottom:16px}
.tl-inner{position:relative;min-width:640px}
.tl-axis{position:relative;height:18px;margin-left:110px;font:400 10.5px var(--mono);color:var(--text-3)}
.tl-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.tl-lane{display:flex;align-items:center;height:22px}
.tl-lane .lb{width:110px;flex:none;font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.tl-track{position:relative;flex:1;height:100%;border-top:1px solid #19201c}
.timeline.tall .tl-lane{height:28px}
.tl-bar{position:absolute;top:5px;height:12px;border:1px solid var(--line-2);background:var(--ink-3);cursor:pointer;padding:0 6px;font:400 10.5px/10px var(--mono);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-2);border-radius:1px}
.tl-bar.active{border-color:var(--se-line);background:var(--se-dim);color:var(--se)}
.tl-bar.def{border-color:var(--se-line);background:repeating-linear-gradient(-45deg,rgba(255,214,46,.14) 0 4px,transparent 4px 8px)}
.tl-bar.done{opacity:.55}
.tl-pin{position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:var(--ink-0);border:2px solid var(--text-2);cursor:pointer;padding:0}
.tl-pin.scheduled{border-color:var(--se)}
.tl-pin.failed{border-color:var(--crit);background:var(--crit)}
.tl-pin.completed,.tl-pin.published,.tl-pin.active{border-color:var(--ok)}
.tl-pin.cancelled,.tl-pin.retired,.tl-pin.expired,.tl-pin.replaced{border-color:var(--text-3)}
.tl-overlay{position:absolute;top:0;bottom:0;left:110px;right:0;pointer-events:none}
.tl-now{position:absolute;top:0;bottom:0;border-left:1px solid var(--se)}
.tl-now span{position:absolute;top:-1px;left:4px;font:400 10.5px var(--mono);color:var(--se);white-space:nowrap}
.tl-pause{position:absolute;top:18px;bottom:0;background:repeating-linear-gradient(-45deg,rgba(255,214,46,.35) 0 2px,transparent 2px 6px);border-left:1px solid var(--se-line);border-right:1px solid var(--se-line)}
.tl-pop{position:absolute;z-index:6;bottom:calc(100% - 4px);left:50%;transform:translateX(-50%);width:320px;max-width:calc(100% - 20px);background:var(--ink-2);border:1px solid var(--line-2);padding:12px;display:flex;flex-direction:column;gap:6px;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.timeline.tall .tl-pop{bottom:auto;top:30px}
.tl-pop .x{position:absolute;right:6px;top:6px}
.tl-pop b{font-weight:500}

/* ---------- situation room ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.kpi{background:var(--ink-1);padding:12px 14px;min-width:0}
.kpi .k{font:600 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.kpi .v{font:500 25px/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v.text{font:600 21px/1.55 var(--display);letter-spacing:.06em;text-transform:uppercase}
.kpi .s{font-size:11.5px;color:var(--text-3)}
.kpi.warn .v{color:var(--se)}
.kpi.crit .v{color:var(--crit)}
.sit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.col{display:flex;flex-direction:column;gap:8px;min-width:0}
.col .ch{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);padding:2px 2px 6px;border-bottom:2px solid var(--line-2)}
.col .ch span{font:400 11.5px var(--mono);color:var(--text-3)}
.col.c-def .ch{border-bottom-color:var(--se)}
.col.c-adv .ch{border-bottom-color:var(--f1)}
.col.c-stall .ch{border-bottom-color:var(--crit)}
.col .empty{margin:0}
.card{display:block;background:var(--ink-1);border:1px solid var(--line);padding:10px 12px;text-decoration:none;border-radius:2px}
a.card:hover{border-color:var(--line-2);background:var(--ink-2)}
.card .top{display:flex;align-items:center;gap:4px}
.card .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.card .pct{display:block;font:500 22px var(--mono);font-variant-numeric:tabular-nums}
.card .mid{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:2px}
.card .spark{width:110px;height:34px;flex:none}
.card .ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font:400 11.5px var(--mono);color:var(--text-3);margin-top:6px}
.card .up{color:var(--ok)}.card .down,.card .risk{color:var(--crit)}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.feed{list-style:none;padding:0;max-height:420px;overflow:auto}
.feed li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:6px 14px;font-size:12.5px;border-bottom:1px solid #161c18}
.feed time{font:400 11px var(--mono);color:var(--text-3)}
.feed li.new{animation:flash 1.6s ease-out}
@keyframes flash{from{background:var(--se-dim)}to{background:transparent}}
.split-row{display:grid;grid-template-columns:110px minmax(0,1fr) 60px;gap:8px;align-items:center;font-size:12.5px;margin-top:6px}
.split-row progress::-webkit-progress-value{background:var(--fc)}
.split-row progress::-moz-progress-bar{background:var(--fc)}
.arch-item{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.arch-item .msg,.tx .msg{white-space:pre-wrap;font-size:12.5px;color:var(--text-2);overflow-wrap:anywhere}

/* ---------- orders ---------- */
.waiting{display:flex;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--se-line);background:var(--se-dim);margin-bottom:16px}
.order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;align-items:start}
.order-card.status-active{border-color:var(--se-line)}
.briefing{white-space:pre-wrap;color:var(--text-2);overflow-wrap:anywhere}
.objectives{display:flex;flex-direction:column;gap:6px}
.rewards{display:flex;flex-wrap:wrap;gap:6px}
.reward{border:1px solid var(--se-line);color:var(--se);padding:2px 8px;font:400 12px var(--mono)}
details.rule summary{cursor:pointer;color:var(--text-2)}
details.rule p{white-space:pre-wrap;font-size:12.5px;color:var(--text-2);margin-top:6px}
.gate{border-left:3px solid var(--se);padding:6px 12px;background:var(--se-dim)}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.order-editor{display:flex;flex-direction:column;gap:16px;margin:0}
.order-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.order-fields > div:nth-child(2){grid-column:1/-1;order:3}
.formset{display:flex;flex-direction:column;gap:10px}
.formset-row{border:1px solid var(--line);background:var(--ink-2);padding:10px 12px;margin:0;border-radius:2px;min-width:0}
.formset-row.picking{border-color:var(--se)}
.formset-row legend{font:600 11.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--se);padding:0 6px}
.objective-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.objective-fields > div,.formset-row > div{margin:0}
.formset-delete{margin-top:8px}
.branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.branch.win{border-top:3px solid var(--ok)}
.branch.lose{border-top:3px solid var(--crit)}
.branch > div{margin-bottom:10px}
.sticky-actions{position:sticky;bottom:0;padding:10px 0;background:linear-gradient(transparent,var(--ink-0) 30%)}
.editor-aside{position:sticky;top:0;display:flex;flex-direction:column;gap:10px}
.mo-card{border:1px solid var(--se-line);background:var(--ink-0)}
.mo-card .band{background:var(--se);color:var(--se-ink);padding:6px 12px;display:flex;justify-content:space-between;align-items:center;font:700 14px var(--display);letter-spacing:.2em;text-transform:uppercase}
.mo-card .band span{font:500 12px var(--mono);letter-spacing:0;text-transform:none}
.mo-card .bd{padding:14px;display:flex;flex-direction:column;gap:10px}
.mo-card .ttl{font:700 20px/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.mo-card .brief{white-space:pre-wrap;font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.mo-card ol{display:flex;flex-direction:column;gap:4px}
.bytes{font:400 11.5px var(--mono);color:var(--text-3);text-align:right;margin-top:4px}
.bytes.over{color:var(--crit)}
.minimap{width:100%;aspect-ratio:1/1;max-width:100%;border:1px solid var(--line);background:radial-gradient(circle,#111714,var(--ink-0) 70%);display:block}
.minimap .rings circle{fill:none;stroke:#1d2520;stroke-width:2}
.mm{cursor:pointer;outline:none}
.mm circle{fill:var(--fc);stroke:#0b0d0c;stroke-width:4}
.mm:hover circle,.mm:focus-visible circle{stroke:var(--se)}
.mm.picked circle{fill:var(--se);r:26px}
.mm .mm-n{fill:var(--se-ink);font:500 30px var(--mono);pointer-events:none}

/* ---------- comms ---------- */
.comms{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.tx{border:1px solid var(--line-2);background:var(--ink-0);padding:14px}
.tx.map{border-color:var(--f1);box-shadow:inset 0 0 0 1px rgba(104,178,236,.15)}
.tx .hdr{display:flex;justify-content:space-between;gap:10px;font:700 12.5px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--f1)}
.tx .hdr .mono{letter-spacing:0;font-weight:400}
.tx.dispatch .hdr{color:var(--se)}
.tx .ttl{font:700 19px var(--display);letter-spacing:.05em;text-transform:uppercase;margin-top:6px}
.tx .msg{margin-top:6px}

/* ---------- chronicle ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;border-bottom:1px solid var(--line)}
.filters .field{min-width:180px;flex:1}
.audit-row{border-bottom:1px solid var(--line)}
.audit-row summary{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;list-style:none}
.audit-row summary::-webkit-details-marker{display:none}
.audit-row summary:hover{background:var(--ink-2)}
.audit-row summary time{font-size:11.5px;color:var(--text-3)}
.audit-row summary b{font-weight:500}
.audit-row .table-wrap{padding:0 14px 14px}

/* ---------- staff ---------- */
.staff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.staff .wide{grid-column:1/-1}
.bigstate{display:flex;align-items:center;gap:14px}
.bigstate b{display:block;font:600 17px var(--display);letter-spacing:.08em;text-transform:uppercase}
.bigstate .lamp{width:14px;height:14px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px var(--ok-dim);flex:none}
.bigstate.paused .lamp{background:var(--se);box-shadow:0 0 0 5px var(--se-dim)}
.matrix{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:center;font-size:12.5px}
details.constants summary{cursor:pointer;color:var(--text-2)}
details.constants .dl{margin:8px 0}

/* ---------- authorization sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(3,4,4,.62);z-index:40;display:flex;justify-content:flex-end}
.sheet{width:min(600px,100%);height:100%;background:var(--ink-1);border-left:1px solid var(--se-line);overflow:auto;padding:22px 24px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:slide .22s ease-out}
@keyframes slide{from{transform:translateX(40px);opacity:.5}to{transform:none;opacity:1}}
.sheet .top{display:flex;justify-content:space-between;align-items:center}
.sheet .note{border-left:3px solid var(--se);padding:8px 12px;background:var(--se-dim);font-size:12.5px}
.sheet .problem{border:1px solid rgba(255,92,122,.45);background:var(--crit-dim);padding:12px;display:flex;flex-direction:column;gap:8px;border-radius:2px}
.sheet .problem b{color:var(--crit)}
.sheet .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:400 12px var(--mono);color:var(--text-3);border-top:1px solid var(--line);padding-top:10px}
.sheet .meta b{color:var(--text);font-weight:500}
.sheet details summary{cursor:pointer;color:var(--text-2)}
.hold{position:relative;overflow:hidden;min-width:230px;user-select:none;-webkit-user-select:none;touch-action:none}
.hold.haz{background:repeating-linear-gradient(-45deg,var(--se) 0 10px,#ffe25c 10px 20px)}
.hold .fill{position:absolute;inset:0;background:rgba(28,22,0,.3);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hold span{position:relative}

/* ---------- palette and toasts ---------- */
.pal-scrim{position:fixed;inset:0;background:rgba(3,4,4,.6);z-index:50;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.pal{width:min(620px,100%);background:var(--ink-1);border:1px solid var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,.6);border-radius:2px}
.pal input{border:0!important;border-bottom:1px solid var(--line-2)!important;min-height:50px!important;padding:12px 16px!important;font-size:16px;background:transparent!important}
.pal ul{list-style:none;margin:0;padding:6px 0;max-height:52vh;overflow:auto}
.pal li{display:flex;align-items:center;gap:6px;padding:8px 16px;cursor:pointer;font-size:13.5px}
.pal li[aria-selected=true]{background:var(--ink-3);box-shadow:inset 2px 0 var(--se)}
.pal li .kind{margin-left:auto;font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pal .foot{display:flex;gap:14px;padding:8px 16px;border-top:1px solid var(--line);font:400 11px var(--mono);color:var(--text-3)}
.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:var(--ink-2);border:1px solid var(--line-2);border-left:3px solid var(--ok);padding:10px 14px;min-width:240px;max-width:380px;font-size:13px;animation:slide .2s ease-out;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.toast.warn{border-left-color:var(--se)}
.toast.crit{border-left-color:var(--crit)}
.toast b{display:block;font:600 13px var(--display);letter-spacing:.12em;text-transform:uppercase}

/* ---------- login ---------- */
.login-page{display:grid;place-items:center;min-height:100%;padding:24px 16px;background:radial-gradient(ellipse at 50% 25%,rgba(255,214,46,.06),transparent 60%),var(--ink-0)}
.login-panel{width:min(100%,420px);padding:32px;border:1px solid var(--line-2);background:var(--ink-1);display:flex;flex-direction:column;gap:14px}
.login-emblem{width:44px;height:44px;fill:var(--se)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .theatre{grid-template-columns:220px minmax(0,1fr) 330px}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editor-layout{grid-template-columns:minmax(0,1fr) 290px}
}
@media (max-width:1060px){
  main.fill{overflow:auto;display:block}
  .theatre{height:auto;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(460px,62vh) auto auto}
  .mapwrap{grid-column:1;grid-row:1}
  .inspector{grid-column:2;grid-row:1}
  .tlwrap{grid-column:1/-1;grid-row:2}
  .fronts{grid-column:1/-1;grid-row:3;border-right:0;border-top:1px solid var(--line)}
  .sit,.comms,.editor-layout{grid-template-columns:minmax(0,1fr)}
  .editor-aside{position:static}
  .kbtn{min-width:0}.kbtn .lbl{display:none}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr)}
  .rail{grid-row:4;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0}
  .rail a{flex:1;min-width:64px;border-left:0;border-bottom:2px solid transparent}
  .rail a[aria-current=page]{border-bottom-color:var(--se);background:linear-gradient(0deg,var(--se-dim),transparent)}
  main{grid-column:1;grid-row:5}
  main.page{padding:16px 16px 40px}
  .strip{gap:10px 16px;padding:8px 16px}
  .strip .opt,.who span{display:none}
  .theatre{grid-template-columns:minmax(0,1fr);grid-template-rows:380px auto auto auto}
  .mapwrap{grid-row:1}
  .inspector{grid-column:1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  .tlwrap{grid-row:3}.fronts{grid-row:4}
  .columns,.staff,.branches,.order-fields{grid-template-columns:minmax(0,1fr)}
  .order-grid{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board{grid-template-columns:minmax(0,1fr)}
  .audit-row summary{grid-template-columns:minmax(0,1fr) auto}
  .audit-row summary time{grid-column:1/-1}
  .hist li,.feed li{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}