/* The war room: the POLIS UI kit's dark field on a web page. Colours are the
   kit's Palette, spacing its Ui scale doubled; system fonts only, nothing
   fetched from anywhere else. */
:root {
  --field: #121211;
  --rail: #0d0d0c;
  --header: #191917;
  --card: #1d1d1b;
  --well: #0a0a09;
  --slot: #070707;
  --edge-lit: #5e5c54;
  --edge-frame: #3a3935;
  --edge-shade: #0b0b0b;
  --edge-deep: #050505;
  --bone: #f2efe6;
  --bone-2: #cfcabd;
  --bone-3: #9a958a;
  --etched: #6c6a62;
  --dawn: #e0842a;
  --dawn-text: #f6b45c;
  --dawn-fill: #4a3014;
  --broken: #b9483a;
  --broken-text: #d4644f;
  --good: #5ed3ae;
  --aqua: #7cc7ef;
  --sulphur: #e2c955;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 24px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--field); color: var(--bone); font: 14px/1.45 var(--body); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; }
a { color: var(--dawn-text); }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* raised and sunk, lit from the top left */
.raise { background: var(--card); border-style: solid; border-width: 1px;
  border-color: var(--edge-lit) var(--edge-shade) var(--edge-deep) var(--edge-frame); }
.well { background: var(--well); border-style: solid; border-width: 1px;
  border-color: var(--edge-deep) #2a2926 #2a2926 var(--edge-deep); }

.hq { display: grid; grid-template-columns: 210px 1fr; grid-template-rows: auto 1fr; height: 100vh; }
.hq-top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--md); flex-wrap: wrap;
  padding: var(--sm) var(--md); background: var(--header); border-bottom: 1px solid var(--edge-deep); }
.hq-title { font: 600 16px var(--display); letter-spacing: 0.04em; display: flex; align-items: center; gap: var(--sm); }
.hq-stat { display: inline-flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--bone-3); }
.hq-stat b { color: var(--bone); font: 600 14px var(--display); font-variant-numeric: tabular-nums; }
.hq-stat.bad b, .bad { color: var(--broken-text); }
.spacer { flex: 1; }
.seg { display: inline-flex; }
.seg button { cursor: pointer; padding: var(--xs) 10px; background: var(--well); color: var(--bone-2);
  border: 1px solid var(--edge-frame); margin-left: -1px; }
.seg button[aria-pressed="true"] { background: var(--dawn-fill); color: var(--bone); border-color: #8a5a22; }

.hq-rail { background: var(--rail); border-right: 1px solid var(--edge-deep); padding: var(--sm) 6px;
  display: grid; align-content: start; gap: 2px; overflow-y: auto; }
.hq-rail .grp { font: 600 11px var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--etched); padding: 10px var(--sm) var(--xs); }
.hq-rail button { all: unset; cursor: pointer; display: grid; grid-template-columns: 20px 1fr auto; gap: var(--sm);
  align-items: center; padding: 7px var(--sm); color: var(--bone-2); border: 1px solid transparent; }
.hq-rail button:hover { color: var(--bone); background: #151514; }
.hq-rail button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--dawn-text); outline-offset: -2px; }
.hq-rail button[aria-current="page"] { color: var(--bone); background: var(--card);
  border-color: var(--edge-lit) var(--edge-shade) var(--edge-deep) var(--dawn); }
.hq-rail svg { width: 18px; height: 18px; }
.hq-rail .count { font: 600 11px var(--display); color: var(--dawn-text); }

.hq-main { overflow: auto; padding: var(--lg); display: grid; gap: var(--lg); align-content: start; }
.screen-title { font-size: 22px; }
.screen-sub { color: var(--bone-3); font-size: 13px; margin-top: 2px; max-width: 80ch; }
.tiles { display: grid; gap: var(--md); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { padding: var(--md); display: grid; gap: var(--xs); }
.tile .l { font: 600 11px var(--display); letter-spacing: 0.09em; text-transform: uppercase; color: var(--bone-3); }
.tile .v { font: 600 28px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.tile .d { font-size: 12px; color: var(--bone-3); }
.two { display: grid; gap: var(--lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.panel { padding: var(--md); display: grid; gap: var(--md); align-content: start; }
.panel > h4 { font-size: 14px; display: flex; justify-content: space-between; gap: var(--sm); align-items: center; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sm); align-items: baseline; font-size: 13px;
  padding: 6px var(--sm); background: var(--well); }
.when { font: 600 12px var(--display); color: var(--bone-3); font-variant-numeric: tabular-nums; }
.muted { color: var(--bone-3); }
.note { padding: var(--sm) var(--md); border-left: 3px solid var(--dawn); background: rgba(224, 132, 42, 0.08); font-size: 13px; }
.note.bad { border-left-color: var(--broken-text); background: rgba(212, 100, 79, 0.08); color: var(--bone); }
.bar-track { height: 8px; background: var(--slot); border-top: 1px solid var(--edge-deep); border-bottom: 1px solid #2a2926; position: relative; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--dawn); }
.bar-fill.good { background: var(--good); }
.goal { padding: var(--md); display: grid; gap: var(--sm); }
.goal .row1 { display: flex; justify-content: space-between; gap: var(--sm); flex-wrap: wrap; align-items: baseline; }
.goal .row1 b { font: 600 15px var(--display); }
.meta { font-size: 12.5px; color: var(--bone-3); display: flex; gap: var(--md); flex-wrap: wrap; }
.tag { font: 600 10.5px var(--display); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--edge-frame); color: var(--bone-3); }
.tag.live { color: var(--good); border-color: #2f6b58; }
.tag.warn { color: var(--dawn-text); border-color: #8a5a22; }
.tag.bad { color: var(--broken-text); border-color: #7a3328; }

.toggles { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.toggles label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.map-wrap { overflow-x: auto; }
.map-wrap svg { display: block; min-width: 860px; width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sm) var(--lg); font-size: 12.5px; color: var(--bone-3); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }

.form-grid { display: grid; gap: var(--md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.field { display: grid; gap: var(--xs); font-size: 12.5px; color: var(--bone-3); }
.field input, .field select, .field textarea { background: var(--slot); color: var(--bone); border: 1px solid var(--edge-frame);
  padding: 6px var(--sm); font-size: 14px; }
.field input:disabled, .field select:disabled { color: var(--etched); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sm); align-items: center; }
.btn { cursor: pointer; padding: 6px 14px; background: var(--card); color: var(--bone);
  border: 1px solid; border-color: var(--edge-lit) var(--edge-shade) var(--edge-deep) var(--edge-frame); }
.btn:hover { background: #262624; }
.btn.go { background: var(--dawn-fill); border-color: #b06a24 #2a1a0a #1a1006 #8a5a22; }
.btn.danger { background: #3a1712; border-color: #a5483a #200a07 #150605 #7a3328; }
.btn.ghost { background: transparent; border-color: var(--edge-frame); color: var(--bone-2); }
.btn:disabled { cursor: not-allowed; color: var(--etched); background: var(--well); border-color: var(--edge-frame); }
.reply { font: 12.5px/1.5 var(--mono); white-space: pre-wrap; padding: var(--sm) var(--md); max-height: 220px; overflow: auto; }
.chat { padding: 10px var(--md); font: 13.5px/1.5 var(--mono); background: rgba(0, 0, 0, 0.55); border-left: 2px solid var(--dawn); }
.chat .lang { font: 600 11px var(--display); letter-spacing: 0.08em; color: var(--bone-3); display: block; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { text-align: left; font: 600 11px var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone-3); padding: 6px var(--sm); border-bottom: 1px solid var(--edge-frame); }
table.grid td { padding: 6px var(--sm); border-bottom: 1px solid #1c1c1a; vertical-align: top; }
table.grid td.n { font-variant-numeric: tabular-nums; text-align: right; }

.gantt { display: grid; grid-template-columns: 150px 1fr; gap: 2px 0; font-size: 12.5px; }
.gantt .days { display: grid; grid-template-columns: repeat(7, 1fr); color: var(--bone-3); font: 600 11px var(--display); }
.gantt .lane { position: relative; height: 26px; background: var(--well); }
.gantt .lane .cell { position: absolute; top: 3px; bottom: 3px; min-width: 3px; padding: 0 var(--xs); overflow: hidden;
  white-space: nowrap; font-size: 11.5px; line-height: 20px; }
.gantt .lane .seeded { background: #3a3530; color: var(--bone-2); }
.gantt .lane .gm { background: var(--dawn-fill); color: var(--bone); border: 1px solid #8a5a22; }
.gantt .lane .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--good); }
.gantt .rowname { padding: 3px var(--sm); color: var(--bone-2); }

.dial { display: grid; grid-template-columns: 1fr auto; gap: var(--sm); align-items: center; padding: 6px var(--sm); background: var(--well); }
.dial .name { font-family: var(--mono); font-size: 12.5px; }
.dial .range { font-size: 12px; color: var(--bone-3); }

.toast-zone { position: fixed; right: var(--lg); bottom: var(--lg); display: grid; gap: var(--sm); z-index: 10; }
.toast { padding: 10px 14px; max-width: 420px; font-size: 13px; }
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; z-index: 20; }
.modal { padding: var(--lg); width: min(94vw, 460px); display: grid; gap: var(--md); }

.signin { display: grid; place-items: center; min-height: 100vh; }
.signin .panel { width: min(94vw, 420px); }

@media (max-width: 720px) {
  .hq { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; height: auto; min-height: 100vh; }
  .hq-rail { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--edge-deep); }
  .hq-rail .grp { display: none; }
  .gantt { grid-template-columns: 96px 1fr; }
}

.pad { padding: var(--md); }
.toast.bad { border-left: 3px solid var(--broken-text); }
.legend .key-strong { background: #d4644f; }
.legend .key-seep { background: #a88e2c; border: 1px solid #e2c955; }
.legend .key-archive { border: 1px dashed #e2c955; }
.legend .key-outpost { background: #7cc7ef; }
.legend .key-front { background: #8a8170; }
.legend .key-herd { background: #3fa886; }
tr[aria-current="true"] td { background: rgba(224, 132, 42, 0.08); }