:root {
  color-scheme: dark;
  --paper: #0b1114;
  --cream: #141e22;
  --ink: #d9e1db;
  --muted: #93a7aa;
  --line: #35474c;
  --orange: #c4a26e;
  --orange-light: #302a20;
  --green: #a3bf9d;
  --sage: #21332c;
  --yellow: #c4a26e;
  --sea: #0d1517;
  --cyan: #8bb9bd;
  --danger: #cb7770;
  --inset: #10181c;
  --display: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', 'Courier New', monospace;
  --panel-shadow: inset 0 1px 0 #ffffff06, 0 3px 10px #00000030;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scrollbar-color: #4c6062 #10181c; }
body {
  margin: 0; min-width: 320px; min-height: 100vh;
  background: radial-gradient(ellipse at 52% 0, #24303766, transparent 65%), var(--paper);
  color: var(--ink); font-family: var(--body); font-size: 13px; line-height: 1.55;
}
#content { overflow-anchor:none; }
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  opacity: .035; background: repeating-linear-gradient(0deg, transparent 0 2px, #000 2px 3px);
}
button, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button {
  cursor: pointer; border: 1px solid #506266; border-radius: 2px;
  background: linear-gradient(#253137, #1b272c); padding: 10px 14px; line-height: 1.25;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .25px;
  box-shadow: inset 0 1px 0 #ffffff09, 0 1px 2px #00000040;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
button:hover:enabled { background: #2c3c41; border-color: #829594; }
button:active:enabled { background: #162125; box-shadow: inset 0 1px 4px #0008; }
button:disabled { cursor: not-allowed; opacity: .43; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
canvas:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button.primary, button.green {
  background: linear-gradient(#30443a, #27372f); border-color: #78977b; color: #e1ecd9;
  box-shadow: inset 0 1px 0 #b5d0a416, 0 2px 3px #0005;
}
button.primary:hover:enabled, button.green:hover:enabled { background: #3d5546; border-color: #b0c3a3; }
button.small { font-size: 10px; padding: 7px 10px; }
button.quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
button.quiet:hover:enabled { color: var(--ink); background: #243137; }
button.danger { border-color: #875b57; color: #e39b94; background: #2b2223; }
button.danger:hover:enabled { background: #3b2929; border-color: var(--danger); }
input, select {
  width: 100%; min-width: 0; min-height: 42px; padding: 10px 11px;
  border: 1px solid #53666a; border-radius: 2px; background: var(--inset);
  box-shadow: inset 0 2px 4px #0004; font-size: 13px; accent-color: var(--green);
}
input::placeholder { color: #84989b; opacity: 1; }
option { background: var(--inset); }
label { display: block; font: 600 10px/1.4 var(--mono); letter-spacing: .45px; margin-bottom: 6px; color: #a6b7b8; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.18; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: 1.15px; text-transform: uppercase; }
h2 { font-size: 19px; font-weight: 650; letter-spacing: .6px; }
h3 { font-size: 15px; font-weight: 650; letter-spacing: .2px; }
p { color: var(--muted); }
a { color: var(--cyan); text-underline-offset: 3px; }
svg { display: inline-block; vertical-align: middle; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; flex-shrink: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.eyebrow { color: var(--muted); font: 500 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 1.25px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 11px; }
.positive { color: var(--green); }
.negative { color: var(--danger); }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 14px; min-width: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px;
  border: 1px solid #54715c; border-radius: 1px; background: #1c2b24; color: #b4cba9;
  font: 500 9px/1.45 var(--mono); letter-spacing: .6px; text-transform: uppercase;
}
.badge.orange { background: #2c2821; color: #d3b88d; border-color: #766244; }
.badge::before { content: ''; width: 4px; height: 4px; background: currentColor; flex-shrink: 0; }
.empty { border: 1px dashed #46595d; padding: 23px 16px; text-align: center; color: var(--muted); background: #10181c; }
.note { font-size: 12px; line-height: 1.6; background: #1a2a27; padding: 12px 14px; border-left: 2px solid #7c9b81; color: #b0c2b8; }
.error { color: #e2a49d; background: #302225; padding: 11px 13px; border: 1px solid #74504f; border-radius: 2px; }
.skip-link { position: absolute; left: 12px; top: -70px; z-index: 110; background: var(--cream); padding: 10px; }
.skip-link:focus { top: 10px; }
.loading { min-height: 90vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.noscript { padding: 24px; }

/* The shell is a console frame; readouts are inset into it. */
.classification-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 25px; padding: 4px 26px; color: #abbba9; background: #1e2b24;
  border-bottom: 1px solid #425948; font: 500 9px/1.4 var(--mono); letter-spacing: 2px; text-transform: uppercase;
}
.topbar {
  min-height: 80px; display: flex; align-items: center; gap: 24px; padding: 13px 26px;
  border-bottom: 1px solid #4a5b60; background: linear-gradient(180deg, #202a30, #151e23);
  box-shadow: inset 0 1px 0 #ffffff09, 0 5px 12px #0004;
}
.wordmark { color: #dbe3dc; font: 700 24px/1.1 var(--display); letter-spacing: 2.2px; white-space: nowrap; text-transform: uppercase; }
.wordmark span { color: var(--green); font-family: var(--mono); font-size: 17px; margin-left: 7px; }
.command-brand { display: block; flex-shrink: 0; }
.command-code { padding: 6px; color: #a8bdaa; border: 1px solid #5b6c63; font: 600 11px/1.15 var(--mono); letter-spacing: 1px; }
.brand-sub { color: #9cafb1; font: 500 8px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 1.8px; margin-top: 6px; }
.topbar .polity, .command-identity { border-left: 1px solid var(--line); padding-left: 23px; min-width: 0; }
.polity .name { font-weight: 600; font-size: 14px; max-width: 225px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-controls { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-shrink: 0; }
.icon-button { padding: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-color: #495b60; background: #172126; }
.operations-clock { font: 10px/1.6 var(--mono); min-width: 134px; border-left: 1px solid var(--line); padding-left: 13px; }
.operations-clock strong { font-size: 16px; color: #bdd0b3; font-weight: 500; letter-spacing: .5px; }
.status-dot { display: inline-block; width: 5px; height: 5px; background: var(--green); margin-right: 6px; box-shadow: 0 0 5px #9cb49b22; }
.system-line { display: flex; align-items: center; gap: 14px; font: 9px/1.5 var(--mono); color: var(--muted); letter-spacing: 1px; }
.system-status { color: var(--green); white-space: nowrap; font: 9px/1.5 var(--mono); letter-spacing: .6px; }
.system-status.offline { color: var(--orange); }
.system-status.offline .status-dot { background: var(--orange); }
.command-readout { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 79px; padding: 8px 11px; border: 1px solid #4a6155; background: #18261f; font: 9px/1.5 var(--mono); color: #a5b9a2; letter-spacing: .7px; }
.command-readout b { color: #d0e0c3; font: 500 24px/1.1 var(--mono); }
.command-readout strong { color: var(--ink); font-weight: 500; }
.shell { display: grid; grid-template-columns: 186px minmax(0, 1fr); min-height: calc(100vh - 105px); max-width: 1800px; margin: auto; }
.sidebar { display: flex; flex-direction: column; gap: 4px; padding: 22px 12px 20px; border-right: 1px solid #34474c; background: linear-gradient(90deg, #162025, #121b1f); }
.nav-title { padding: 0 9px 12px; font-size: 8px; letter-spacing: 1.5px; }
.nav-button { position: relative; display: flex; align-items: center; gap: 9px; padding: 12px 9px; background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: 1px; color: #a9b9ba; text-align: left; font-size: 11px; font-weight: 400; letter-spacing: .25px; }
.nav-button:hover:enabled { background: #202e32; border-color: #35474c; }
.nav-button.active { background: linear-gradient(90deg, #293e32, #1e2d26); border-color: #4c6652; color: #d1e2c5; box-shadow: inset 2px 0 0 var(--green); }
.nav-button.active::after { content: ''; width: 4px; height: 4px; background: var(--green); margin-left: auto; }
.nav-index { font: 9px/1 var(--mono); color: #839998; min-width: 16px; }
.nav-button .icon { width: 16px; height: 16px; }
.nav-button .nav-count { margin-left: auto; min-width: 17px; height: 17px; background: #544431; color: #e5cea7; font: 10px/17px var(--mono); text-align: center; border: 1px solid #8d7653; }
.sidebar-footer { margin-top: auto; padding: 26px 9px 0; }
.edition, .desk-telemetry { border-top: 1px solid var(--line); padding-top: 13px; font: 9px/1.9 var(--mono); color: var(--muted); letter-spacing: .35px; }
.desk-telemetry { padding-bottom: 13px; }
.desk-telemetry div { display: flex; flex-direction: column; margin-bottom: 9px; }
.desk-telemetry b { color: #c4d4bf; font-weight: 400; }
.main { min-width: 0; padding: 22px 24px 36px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.page-heading .eyebrow { margin-bottom: 6px; font-size: 9px; letter-spacing: 1.6px; }
.page-heading p { font-size: 12px; max-width: 74ch; margin-top: 9px; }
.heading-stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 75px; padding: 7px 10px; border: 1px solid #52615a; background: #192721; color: #adc3a4; font: 9px/1.5 var(--mono); letter-spacing: 1px; box-shadow: inset 0 0 0 3px #111d17; }
.heading-stamp b { font-size: 23px; font-weight: 500; letter-spacing: 1px; }
.resources-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid #46575b; border-radius: 2px; background: linear-gradient(#1c282d, #152025); box-shadow: var(--panel-shadow); }
.resource { padding: 12px 13px; border-right: 1px solid var(--line); min-width: 0; }
.resource:last-child { border-right: 0; }
.resource-label { display: flex; align-items: center; gap: 6px; color: #a5b8b9; font: 9px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.resource-label .icon { width: 13px; height: 13px; }
.resource-value { margin-top: 7px; color: #d1e3c9; font: 500 25px/1.1 var(--mono); letter-spacing: -.8px; }
.resource-flow { margin-left: 6px; font: 400 9px/1.5 var(--mono); white-space: nowrap; letter-spacing: 0; }

/* Tactical displays use physical bezels around clean, responsive vector charts. */
.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 17px; align-items: start; }
.atlas { position: relative; background: var(--sea); border: 1px solid #586b6b; border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 4px #1a252b, 0 4px 16px #0005; }
.atlas-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: linear-gradient(#223035, #1b262b); border-bottom: 1px solid #465957; }
.atlas-header h2 { font: 600 13px/1.4 var(--mono); color: #c0d2c2; text-transform: uppercase; letter-spacing: 1px; }
.atlas-header .eyebrow { margin-top: 4px; font-size: 8px; letter-spacing: 1.2px; color: #a6b8af; }
.map-wrap { position: relative; margin: 6px; border: 1px solid #293d38; box-shadow: inset 0 0 16px #0006; }
.map-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1.5; min-height: 340px; max-height: 610px; cursor: grab; touch-action: none; background: var(--sea); }
.map-canvas:active { cursor: grabbing; }
.map-controls { position: absolute; right: 11px; bottom: 11px; display: flex; gap: 4px; }
.map-controls button { padding: 5px 9px; min-width: 32px; min-height: 32px; font-size: 15px; background: #1a2b24ed; border-color: #5a7260; color: #c0d2b9; }
.atlas-footer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid #40554c; background: #18241f; color: #a7b8a7; font: 8px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 6px; height: 6px; border: 1px solid #a3bf9d; background: #8aa986; }
.legend .rival { background: #ac9467; border-color: #c4a26e; }
.legend .neutral { background: #7b8580; border-color: #949f99; }
.island-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.island-tabs button { padding: 7px 9px; border-color: #435a50; font-size: 10px; background: #121d18; color: #b6c8b4; }
.island-tabs button.selected { border-color: #8baa87; background: #293c2b; color: #d0dfc7; }
.island-panel { overflow: hidden; background: var(--cream); border: 1px solid #4a5d61; border-radius: 2px; box-shadow: var(--panel-shadow); }
.island-panel .panel-cover { position: relative; height: 100px; overflow: hidden; border-bottom: 1px solid #415650; background: #12201b; }
.panel-cover svg { width: 100%; height: 100%; }
.tactical-cover { background: #11201b; }
.tactical-island { opacity: .9; color: #9ab491; }
.target-label { position: absolute; top: 9px; left: 12px; right: 12px; display: flex; justify-content: space-between; font: 9px/1.4 var(--mono); color: #b0c6ab; letter-spacing: 1.2px; }
.target-meta { position: absolute; bottom: 9px; left: 12px; right: 12px; display: flex; justify-content: space-between; color: #91aa95; font: 8px/1.5 var(--mono); letter-spacing: .6px; }
.panel-content { padding: 16px; }
.selection-label { color: var(--cyan); }
.panel-content h2 { font-size: 23px; text-transform: uppercase; letter-spacing: .8px; margin: 8px 0 6px; }
.panel-content .description { font-size: 12px; margin-bottom: 14px; }
.island-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.island-stats strong { display: block; font: 500 19px/1.2 var(--mono); color: #d1e0d3; }
.island-stats span { font: 9px/1.5 var(--mono); color: #9eb0b0; text-transform: uppercase; letter-spacing: .2px; }
.panel-content .primary, .panel-content .green { width: 100%; margin-top: 9px; padding: 11px; }
.building-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { padding: 4px 6px; border: 1px solid #465951; background: #1a2923; color: #b8c9b2; font: 9px/1.4 var(--mono); border-radius: 1px; }
.dispatch { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 18px; }
.overview-grid > .dispatch { grid-column: 1; margin-top: 0; }
.paper-card { min-width: 0; padding: 17px; background: linear-gradient(150deg, #182329, #131d21); border: 1px solid #3c5056; border-radius: 2px; box-shadow: var(--panel-shadow); }
.paper-card h2 { font-size: 17px; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-heading .eyebrow { font-size: 8px; }
.paper-card .card-copy { font-size: 12px; margin-top: 7px; }
.dispatch .eyebrow { font-size: 8px; }
.step-list { display: grid; gap: 10px; margin-top: 14px; }
.step { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.step-number { display: grid; place-items: center; width: 21px; height: 21px; flex-shrink: 0; border: 1px solid #526958; background: #15201a; font: 10px/1 var(--mono); color: #adc3a4; }
.step.done { color: #abc3a4; }
.step.done .step-number { color: #d7e7ca; background: #344931; border-color: #6f8b65; }
.dispatch-list { display: grid; gap: 10px; font-size: 12px; }
.dispatch-item { display: flex; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.dispatch-item:last-child { border: 0; padding-bottom: 0; }
.dispatch-time { min-width: 36px; padding-top: 2px; font: 9px/1.5 var(--mono); color: #9aadad; }
.dispatch-item strong { display: block; font-size: 12px; margin-bottom: 3px; font-weight: 500; }
.dispatch-item p { font-size: 11px; }

/* Orders, reports, and command systems share the same instrument hierarchy. */
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.build-card { position: relative; display: flex; flex-direction: column; min-height: 232px; padding: 18px; }
.build-card .building-icon { width: 66px; height: 56px; margin-bottom: 13px; color: var(--cyan); }
.building-blueprint { color: #9fb8b2; }
.blueprint-code { font-family: var(--mono); letter-spacing: .7px; }
.build-card h3 { font-size: 16px; }
.build-card p { font-size: 12px; margin-top: 8px; }
.build-card .cost { display: flex; flex-wrap: wrap; gap: 9px; font: 9px/1.5 var(--mono); color: #b5c2bb; margin: 14px 0; }
.build-card button { margin-top: auto; width: 100%; }
.duration { position: absolute; right: 15px; top: 17px; color: #a6b7b8; font: 9px/1.4 var(--mono); }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.filters .filter { font-size: 10px; padding: 8px 11px; background: #142025; border-color: #40555a; color: #b1c0c0; }
.filters .active { background: #2a3d32; border-color: #739079; color: #d0e0c8; }
.filters select { width: auto; max-width: 100%; min-width: 140px; margin-left: auto; min-height: 34px; font-size: 11px; padding: 6px 9px; }
.queue { padding: 14px 16px; margin-bottom: 18px; border: 1px solid #536b5a; background: #1a2a22; border-radius: 2px; }
.queue h3 { font: 500 11px/1.5 var(--mono); color: #c3d2b9; text-transform: uppercase; letter-spacing: .6px; }
.queue-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.queue-item { padding: 8px 10px; border: 1px solid #49624d; background: #142019; font-size: 11px; }
.queue-item b { margin-left: 8px; font: 10px/1.4 var(--mono); color: #b4cca8; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(265px, 1fr); gap: 17px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid button { margin-top: 3px; }
.stock-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
.stock-item { padding: 15px; border: 1px solid var(--line); background: #131f23; border-radius: 2px; }
.stock-item strong { display: block; font: 500 23px/1.3 var(--mono); color: #cadcc3; }
.stock-item span { font: 9px/1.5 var(--mono); color: #a2b4b5; text-transform: uppercase; }
.table-wrap { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { padding: 10px 9px; border-bottom: 1px solid #506366; color: #a4b7b7; font: 500 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .7px; }
td { padding: 12px 9px; border-bottom: 1px solid #2e4248; white-space: nowrap; font-size: 11px; }
tbody tr:hover { background: #1d2c30; }
tr:last-child td { border-bottom: 0; }
td .small { font-size: 10px; }
.economy-warning { color: var(--orange); }
.research-card { display: flex; flex-direction: column; min-height: 202px; padding: 18px; }
.research-card.locked { background: #111a1e; border-style: dashed; }
.research-card.completed { background: linear-gradient(130deg, #203025, #15241e); border-color: #587451; }
.research-card p { font-size: 12px; margin: 9px 0 14px; }
.research-card .icon { width: 25px; height: 25px; color: var(--cyan); margin-bottom: 13px; }
.research-card button { margin-top: auto; }
.research-card .mono { font-size: 10px; }
.progress { height: 5px; background: #293a3e; overflow: hidden; margin: 11px 0; }
.progress > i { display: block; height: 100%; background: #a0b795; }
.progress.orange > i { background: var(--orange); }
.unit-group { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.unit-group .icon { width: 25px; height: 25px; color: #a5bfb3; }
.unit-group strong { font-size: 13px; font-weight: 550; }
.unit-group small { display: block; margin-top: 4px; color: #a0b3b3; font: 9px/1.5 var(--mono); }
.fleet-card { padding: 14px; border: 1px solid #456057; background: #15201d; margin-top: 12px; }
.fleet-card strong { font-size: 13px; font-weight: 550; }
.fleet-card p { font-size: 11px; margin: 5px 0 10px; }
.unit-select { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.unit-select label { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid #4b6059; background: #1d2b24; font-family: var(--body); font-size: 12px; font-weight: 400; }
.unit-select input { width: 15px; min-height: auto; box-shadow: none; }
.diplomat-card { padding: 19px; }
.diplomat-card .avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #62776c; background: #20302a; color: #c3d3b8; font: 500 19px/1 var(--mono); margin-bottom: 13px; }
.diplomat-card h3 { font-size: 16px; }
.diplomat-card .badge { margin-top: 10px; }
.diplomat-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 17px; }
.diplomat-actions button { font-size: 10px; padding: 8px 9px; }
.treaty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.treaty-row:first-child { padding-top: 0; }
.government-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.government-card { display: flex; flex-direction: column; min-width: 0; padding: 13px; border: 1px solid var(--line); background: #111c20; }
.government-card h3 { font-size: 13px; }
.government-card p { font-size: 11px; margin: 8px 0; }
.government-card button { font-size: 10px; padding: 8px; margin-top: auto; }
.victory-card { position: relative; display: flex; flex-direction: column; min-height: 247px; padding: 21px; }
.victory-card .medal { color: #b8c7b0; font: 500 19px/1 var(--mono); margin-bottom: 17px; }
.objective-code { font: 500 10px/1.4 var(--mono); color: #9eb5a1; letter-spacing: 1px; margin-bottom: 15px; }
.victory-card p { font-size: 12px; margin: 11px 0; }
.victory-card strong.score { font: 500 28px/1.35 var(--mono); color: #d4e3c9; margin-top: auto; }
.victory-card .score small { font: 400 10px/1.5 var(--mono); color: var(--muted); }
.victory-card button { font-size: 11px; margin-top: 12px; }
.victory-banner { padding: 28px; border: 1px solid #8da07b; background: linear-gradient(120deg, #2b3c2b, #182b20); box-shadow: inset 0 0 0 4px #14221a, 0 4px 16px #0004; margin-bottom: 20px; text-align: center; }
.victory-banner h2 { color: #c8dcb7; font-size: 28px; text-transform: uppercase; letter-spacing: 1px; }
.victory-banner p { margin-top: 9px; color: #b5c5af; }
.notice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid #76664a; border-left: 3px solid #b69a6d; background: #2b2820; font-size: 12px; }
.notice p { color: #d1bb96; font-size: 12px; }
.notice button { margin-left: auto; flex-shrink: 0; }
.orders-bar { padding: 12px 14px; margin-bottom: 17px; border: 1px solid #5d7860; background: #1d2d23; font: 11px/1.6 var(--mono); color: #c1d2b8; }
.readiness-caption { color: #abc1a6; font: 9px/1.5 var(--mono); }
.journal-list { display: grid; gap: 0; }
.intel-report { padding-top: 12px; margin-top: 13px; border-top: 1px solid var(--line); }
.intel-report h3 { font-size: 13px; }
.observations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; font: 10px/1.7 var(--mono); color: #a0b3b4; }
.observations strong { display: block; color: var(--ink); font-weight: 500; }

/* Modal controls keep native keyboard navigation and readable plain language. */
dialog { padding: 26px; max-width: 620px; width: calc(100% - 32px); max-height: 88vh; overflow: auto; border: 1px solid #708580; border-radius: 2px; background: #172227; color: var(--ink); box-shadow: inset 0 0 0 4px #0e191d, 0 18px 60px #000b; }
dialog::backdrop { background: #020708cf; backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #4b5f61; padding-bottom: 15px; margin-bottom: 18px; }
.dialog-head h2 { font-size: 21px; text-transform: uppercase; letter-spacing: .8px; }
.dialog-head button { font: 24px/1 var(--mono); padding: 4px 7px; background: #202f33; border-color: #4c6265; }
.dialog-content p { font-size: 13px; line-height: 1.65; margin-bottom: 13px; }
.dialog-content form { margin-top: 18px; }
.help { max-width: 620px; }
.help h3 { margin: 20px 0 9px; }
.help p, .help li { font-size: 13px; line-height: 1.65; }
.help ol { color: var(--muted); padding-left: 20px; }
.recovery-code { display: block; font: 14px/1.6 var(--mono); user-select: all; overflow-wrap: anywhere; padding: 14px; border: 1px dashed #6c896d; background: #101c15; color: #c7dfb9; margin: 15px 0; }
.compact-form { display: grid; gap: 10px; }
.settings-buttons { display: flex; flex-wrap: wrap; gap: 9px; }
.report-hashes { margin-top: 8px; overflow-wrap: anywhere; font: 10px/1.6 var(--mono); color: var(--muted); }
.toast { position: fixed; bottom: 22px; left: 50%; z-index: 150; transform: translate(-50%, 12px); padding: 13px 19px; max-width: min(92vw, 650px); border: 1px solid #7e9b77; background: #22372a; box-shadow: 0 5px 20px #0008; border-radius: 2px; color: #d1e5c4; font: 11px/1.6 var(--mono); opacity: 0; pointer-events: none; }
.toast.error { background: #352527; border-color: #a66b66; color: #edb3aa; }

/* Access station: the radar and authentication panel form one operations desk. */
.lobby { max-width: 1480px; margin: auto; padding: 0 34px 25px; }
.lobby-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0 21px; border-bottom: 1px solid #43575a; }
.lobby-header .eyebrow { font-size: 9px; }
.lobby-hero { display: grid; grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); align-items: center; gap: 29px; min-height: 615px; padding: 31px 0; }
.hero-copy { min-width: 0; }
.hero-copy > .eyebrow { color: #adc2ac; margin-bottom: 18px; font-size: 10px; letter-spacing: 1.8px; }
.hero-copy h1 { font-size: clamp(35px, 3.5vw, 52px); line-height: 1.05; letter-spacing: 2px; max-width: 650px; }
.hero-copy h1 em { color: #a5c09c; font-style: normal; }
.hero-copy > p { font-size: 13px; line-height: 1.8; max-width: 48ch; margin-top: 17px; color: #a9bcba; }
.lobby-access { margin-top: 23px; padding: 20px; border: 1px solid #53685e; border-top: 2px solid #85997d; background: linear-gradient(135deg, #202c2a, #15201f); box-shadow: inset 0 0 0 4px #15201e, 0 6px 20px #0003; }
.access-label { font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 1.5px; color: #a6bfa2; }
.access-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.access-heading h2 { font: 600 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.access-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 14px; margin-top: 11px; padding: 11px 12px; border: 1px solid #42594c; background: #14201a; font: 8px/1.5 var(--mono); color: #b4cba9; letter-spacing: .6px; }
.join-form { max-width: 480px; margin-top: 22px; }
.lobby-access .join-form { margin-top: 0; }
.join-form .fields { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-bottom: 14px; }
.join-form button.primary { width: 100%; padding: 14px; font-size: 11px; letter-spacing: .6px; }
.join-form .form-caption { font: 9px/1.7 var(--mono); margin-top: 12px; color: #9fb4aa; letter-spacing: .2px; }
.join-error { margin-top: 12px; font-size: 12px; }
.access-recovery { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #3b5148; color: #a4b7ac; font: 9px/1.6 var(--mono); }
.access-recovery button { font-size: 10px; }
.hero-map { position: relative; min-width: 0; }
.hero-map .atlas { border-color: #5c7167; box-shadow: inset 0 0 0 5px #1b2823, 0 6px 25px #0005; }
.hero-map .map-canvas { min-height: 385px; }
.hero-map .atlas-header { padding: 14px 16px; }
.hero-map .atlas-header h2 { font-size: 13px; }
.hero-stamp { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 12px; padding: 11px 14px; border: 1px solid #435b4d; background: #17231d; color: #b3c5ab; font: 9px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
.hero-stamp strong { font: 500 15px/1.5 var(--mono); color: #d1dfc6; }
.access-briefing, .lobby-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid #3f555b; background: #131e22; }
.briefing-item, .feature { min-width: 0; padding: 22px 25px; border-right: 1px solid #3b5157; }
.briefing-item:last-child, .feature:last-child { border-right: 0; }
.feature-number { color: #a8bea1; font: 500 10px/1.5 var(--mono); letter-spacing: 1.3px; margin-bottom: 12px; }
.feature h3, .briefing-item h3 { font-size: 14px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 9px; }
.feature p, .briefing-item p { font-size: 12px; line-height: 1.7; max-width: 40ch; }
.lobby-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 0; color: #93a9a9; font: 9px/1.6 var(--mono); letter-spacing: .5px; }
.mobile-menu { display: none; }
.motion-target { will-change: transform, opacity; }

@media (min-width: 1600px) {
  .main { padding-left: 30px; padding-right: 30px; }
  .map-canvas { aspect-ratio: 1.65; }
}
@media (max-width: 1180px) {
  .shell { grid-template-columns: 170px minmax(0, 1fr); }
  .topbar { padding: 13px 20px; gap: 19px; }
  .topbar .polity { padding-left: 18px; }
  .main { padding: 20px 18px 30px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr) 252px; gap: 14px; }
  .resource { padding: 11px 9px; }
  .resource-value { font-size: 22px; }
  .resource-flow { margin-left: 4px; font-size: 8px; }
  .resource-label { font-size: 8px; letter-spacing: .3px; }
  .map-canvas { min-height: 380px; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .government-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-grid { grid-template-columns: minmax(0, 1.3fr) minmax(250px, 1fr); }
  .lobby { padding-left: 25px; padding-right: 25px; }
  .lobby-hero { gap: 24px; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
  .hero-copy h1 { font-size: 39px; }
  .hero-map .map-canvas { min-height: 410px; }
  .lobby-access { padding: 17px; }
}
@media (max-width: 960px) {
  .topbar { gap: 16px; }
  .wordmark { font-size: 21px; letter-spacing: 1.4px; }
  .brand-sub { font-size: 7px; letter-spacing: 1.1px; }
  .topbar .polity { display: none; }
  .shell { grid-template-columns: 150px minmax(0, 1fr); }
  .sidebar { padding-left: 8px; padding-right: 8px; }
  .nav-button { font-size: 10px; gap: 6px; }
  .nav-index { min-width: 12px; font-size: 8px; }
  .nav-button .icon { width: 14px; height: 14px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .island-panel { display: grid; grid-template-columns: 155px minmax(0, 1fr); }
  .island-panel .panel-cover { height: 100%; min-height: 160px; border-bottom: 0; border-right: 1px solid var(--line); }
  .island-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
  .panel-content h2 { font-size: 21px; }
  .panel-content .description { margin-bottom: 9px; }
  .panel-content .primary, .panel-content .green { margin-top: 6px; }
  .resources-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resource:nth-child(3) { border-right: 0; }
  .resource:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .resource-label { font-size: 9px; }
  .resource-flow { font-size: 9px; }
  .dispatch, .section-grid { grid-template-columns: minmax(0, 1fr); }
  .stock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lobby-hero { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); min-height: auto; padding: 28px 0; gap: 20px; }
  .hero-copy h1 { font-size: 34px; }
  .join-form .fields { grid-template-columns: 1fr; gap: 11px; }
  .hero-map .map-canvas { min-height: 455px; }
  .lobby-features .feature, .briefing-item { padding: 18px; }
  .atlas-footer { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .classification-bar { padding: 5px 14px; font-size: 8px; letter-spacing: 1px; }
  .topbar { padding: 12px 14px; gap: 12px; flex-wrap: wrap; min-height: 76px; }
  .wordmark { font-size: 19px; letter-spacing: 1.4px; }
  .command-code { font-size: 9px; padding: 5px; }
  .command-brand { gap: 8px; }
  .brand-sub { font-size: 7px; }
  .top-controls { gap: 7px; }
  .operations-clock { min-width: 112px; font-size: 9px; padding-left: 9px; }
  .operations-clock strong { font-size: 14px; }
  .icon-button { width: 40px; height: 40px; }
  .shell { display: block; }
  .sidebar { display: flex; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 9px 12px; border-right: 0; border-bottom: 1px solid #41585d; background: #121d22; }
  .sidebar .nav-title, .sidebar-footer { display: none; }
  .nav-button { min-height: 42px; padding: 10px 11px; font-size: 10px; flex-shrink: 0; white-space: nowrap; }
  .nav-index { display: none; }
  .nav-button.active { box-shadow: inset 0 -2px 0 var(--green); }
  .nav-button.active::after { display: none; }
  .main { padding: 18px 14px 28px; }
  .page-heading { gap: 12px; margin-bottom: 16px; align-items: flex-start; }
  h1 { font-size: 24px; }
  .page-heading .eyebrow { font-size: 8px; }
  .page-heading p { margin-top: 7px; font-size: 12px; }
  .heading-stamp { min-width: 61px; font-size: 8px; padding: 6px; }
  .heading-stamp b { font-size: 20px; }
  .resource { padding: 11px 12px; }
  .resource-value { font-size: 22px; }
  .map-canvas { min-height: 350px; aspect-ratio: 1.25; }
  .map-controls button { min-width: 40px; min-height: 40px; }
  .atlas-header { padding: 11px 12px; }
  .atlas-header h2 { font-size: 11px; }
  .atlas-footer { padding: 10px 11px; font-size: 8px; gap: 7px; }
  .legend { gap: 10px; }
  .island-tabs button { min-height: 40px; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .build-card, .research-card, .victory-card { padding: 16px; }
  .filters { margin-bottom: 15px; }
  .filters .filter { min-height: 40px; }
  .filters select { min-height: 40px; margin-left: 0; }
  .table-wrap { max-width: 100%; }
  .diplomat-actions button, .government-card button { min-height: 40px; }
  .lobby { padding: 0 18px 22px; }
  .lobby-header { padding: 20px 0 17px; gap: 12px; }
  .lobby-header { flex-wrap: wrap; }
  .lobby-header .system-status { margin-left: auto; font-size: 8px; }
  .lobby-header > button { margin-left: auto; font-size: 9px; }
  .lobby-header .eyebrow { max-width: 24ch; text-align: right; font-size: 8px; }
  .lobby-hero { grid-template-columns: minmax(0, 1fr); gap: 23px; padding-top: 25px; }
  .hero-copy h1 { font-size: 38px; max-width: 16ch; }
  .hero-copy > p { max-width: 60ch; }
  .lobby-access { margin-top: 20px; }
  .join-form { max-width: none; }
  .join-form .fields { grid-template-columns: 1.1fr 1fr; }
  .hero-map .map-canvas { min-height: 350px; }
  .access-briefing, .lobby-features { grid-template-columns: minmax(0, 1fr); }
  .briefing-item, .feature { border-right: 0; border-bottom: 1px solid #3b5157; padding: 19px; }
  .briefing-item:last-child, .feature:last-child { border-bottom: 0; }
  .feature p, .briefing-item p { max-width: 65ch; }
  .lobby-footer { font-size: 8px; flex-wrap: wrap; gap: 9px; }
  .notice { align-items: flex-start; }
  .orders-bar .row { flex-wrap: wrap; }
  .orders-bar button { width: 100%; min-height: 42px; }
  .toast { bottom: 14px; padding: 12px 16px; }
}
@media (max-width: 480px) {
  .topbar { gap: 10px; }
  .command-code { display: none; }
  .classification-bar { flex-wrap: wrap; gap: 2px 12px; }
  .top-controls { gap: 5px; }
  .top-controls .icon-button[data-action="help"], .top-controls .icon-button[data-action="sound"] { display: none; }
  .operations-clock { min-width: 100px; font-size: 8px; }
  .top-controls .icon-button { width: 38px; height: 38px; }
  .top-controls > .green, .top-controls > .primary { min-width: 44px; min-height: 38px; padding: 9px; font-size: 9px; }
  .resources-strip { margin-bottom: 15px; }
  .resource { padding: 10px 9px; }
  .resource-label { font-size: 8px; gap: 4px; letter-spacing: .2px; }
  .resource-label .icon { width: 11px; height: 11px; }
  .resource-value { font-size: 21px; }
  .resource-flow { display: block; margin: 4px 0 0; font-size: 9px; }
  .island-panel { display: block; }
  .island-panel .panel-cover { min-height: 0; height: 100px; border-right: 0; border-bottom: 1px solid var(--line); }
  .island-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .build-card { min-height: 217px; }
  .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .government-grid { grid-template-columns: minmax(0, 1fr); }
  .notice { flex-wrap: wrap; gap: 10px; }
  .notice button { margin-left: 0; min-height: 40px; }
  .help p, .help li { font-size: 12px; }
  dialog { padding: 20px; width: calc(100% - 24px); }
  .dialog-head h2 { font-size: 18px; }
  .dialog-head button { min-width: 40px; min-height: 40px; }
  .hero-copy h1 { font-size: 35px; }
  .hero-copy > .eyebrow { font-size: 9px; }
  .join-form .fields { grid-template-columns: minmax(0, 1fr); }
  .access-recovery { align-items: flex-start; flex-wrap: wrap; }
  .hero-map .map-canvas { min-height: 330px; }
  .hero-stamp { gap: 12px; font-size: 8px; }
  .hero-stamp strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion-target { will-change: auto; }
}

/* Continuous operations and combined-force procurement instruments. */
.operations-clock { white-space: nowrap; }
.clock-zone { margin-left: 5px; color: var(--muted); font: 8px/1 var(--mono); }
.dispatch-time { min-width: 45px; max-width: 52px; overflow-wrap: normal; color: var(--muted); font: 9px/1.5 var(--mono); }
.force-heading { margin-top: 25px; }
.force-heading h2 { text-transform: uppercase; font-size: 21px; }
.force-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,250px) minmax(130px,180px); gap: 14px; align-items: end; margin-bottom: 18px; }
.force-tools .filters { margin: 0; }
.force-tools .filter span { color: var(--muted); margin-left: 4px; font-size: 9px; }
.force-tools input, .force-tools select { min-height: 38px; font: 11px/1.5 var(--mono); }
.force-card { display: flex; flex-direction: column; padding: 17px; min-width: 0; }
.force-ident { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--cyan); }
.force-ident .eyebrow { font-size: 8px; letter-spacing: .7px; }
.force-ident .icon { width: 28px; height: 28px; }
.force-card h3 { font-size: 17px; line-height: 1.3; }
.force-description { font-size: 11px; line-height: 1.7; margin-top: 8px; }
.force-kv { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; padding: 13px 0; margin: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.force-kv div { min-width: 0; }
.force-kv dt { color: #95aaab; text-transform: uppercase; font: 8px/1.6 var(--mono); letter-spacing: .4px; }
.force-kv dd { margin: 3px 0 0; color: #d1dfd2; font: 500 12px/1.45 var(--mono); overflow-wrap: anywhere; }
.force-strength, .force-weakness { font-size: 11px; line-height: 1.6; margin: 3px 0; }
.force-strength span, .force-weakness span { font: 8px/1.7 var(--mono); letter-spacing: .4px; margin-right: 4px; }
.force-strength span { color: var(--green); }
.force-weakness span { color: var(--orange); }
.force-details { margin: 8px -6px 0; align-self: flex-start; }
.force-card .cost { display: flex; flex-wrap: wrap; gap: 5px 11px; font: 9px/1.6 var(--mono); color: #b9c9be; margin-top: auto; padding-top: 14px; margin-bottom: 12px; }
.recruit-form { display: grid; grid-template-columns: 69px minmax(0,1fr); gap: 6px 9px; align-items: end; border-top: 1px solid var(--line); padding-top: 12px; }
.recruit-form label { grid-column: 1 / -1; margin: 0; font-size: 8px; }
.recruit-form input { padding: 8px; min-height: 36px; font: 11px/1.3 var(--mono); }
.recruit-form button { min-height: 36px; padding: 8px; font-size: 9px; }
.recruit-base { grid-column: 1 / -1; color: var(--muted); font-size: 9px; margin-top: 2px; }
.unit-group > div { min-width: 0; }
.unit-group > button { margin-left: auto; }
.unit-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.unit-fieldset legend { color: #a6b7b8; font: 600 10px/1.4 var(--mono); letter-spacing: .45px; }
.unit-select { max-height: 245px; overflow-y: auto; scrollbar-width: thin; }
.unit-select label { width: 100%; margin: 0; min-width: 0; }
.unit-select label span { min-width: 0; }
.unit-select small { display: block; color: var(--muted); font: 9px/1.5 var(--mono); }
.unit-select input { flex-shrink: 0; }
.unit-select.division-unit-choices { display: block; max-height: 340px; }
.division-model { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.division-model:first-child { padding-top: 0; }
.division-model-name { min-width: 0; font: 12px/1.5 var(--body); }
.division-model-name strong { overflow-wrap: anywhere; }
.division-model-name small { display: block; }
.division-quantity { display: grid; grid-template-columns: 34px 34px 34px; align-items: center; gap: 3px; }
.division-quantity button { min-width: 0; min-height: 34px; padding: 3px; font: 18px/1 var(--mono); }
.division-quantity output { text-align: center; padding: 7px 0; color: var(--ink); background: #14221b; border: 1px solid #41584b; box-shadow: inset 0 2px 4px #0f1915; }
.division-selection-total { margin: 10px 0 0; color: var(--muted); font-size: 10px; }
.recruit-status { grid-column: 1 / -1; margin: 3px 0 0; min-height: 28px; font-size: 9px; line-height: 1.5; }
.treaty-choices { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.treaty-choices legend { margin-bottom: 9px; font: 9px var(--mono); letter-spacing: .05em; color: var(--muted); }
.treaty-choice { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px; margin: 0; background: #1b2a22; border: 1px solid #42594b; font: 12px/1.5 var(--body); cursor: pointer; }
.treaty-choice input { width: 16px; min-height: 16px; margin: 2px 0 0; accent-color: var(--green); box-shadow: none; }
.treaty-choice small { display: block; margin-top: 3px; font: 10px/1.5 var(--mono); color: var(--muted); }
.treaty-choice:has(input:checked) { border-color: var(--green); background: #253b2e; }
.treaty-choice:has(input:disabled) { cursor: default; opacity: .65; }
.treaty-choice .negative { color: var(--danger); }
.deployment-preview { padding: 12px; border: 1px solid #466154; background: #13211a; font-size: 12px; }
.deployment-preview .force-kv { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 9px/1.5 var(--mono); color: var(--muted); }
.operation-progress { margin: 12px 0; }
.operation-progress .progress { margin-bottom: 7px; }
.geospatial-deployment .operation-progress > .mono { display: block; margin-top: 4px; }
.unit-detail > .badge { margin-bottom: 10px; }
.unit-detail h3 { margin: 18px 0 8px; color: #c9d9ca; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.detail-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.unit-detail ul { padding-left: 15px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.specification-kv { background: #111e21; padding: 12px; }
.attack-ratings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.attack-ratings div { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 9px 13px; border: 1px solid #3f5851; background: #121e18; font: 9px/1.5 var(--mono); text-transform: uppercase; color: #b4c8b4; }
.attack-ratings strong { color: #d2e4c7; }
.attack-ratings i { position: absolute; left: 0; bottom: 0; width: var(--rating); height: 2px; background: #99b18f; }
.unit-detail .cost { font: 10px/1.7 var(--mono); color: #c0cebf; display: flex; flex-wrap: wrap; gap: 5px 13px; margin: 14px 0; }

/* A radar return and its assessment share the same persistent track ID. */
.radar-offline { min-height: 400px; }
.sensor-commission { display: grid; gap: 15px; justify-items: center; align-content: center; padding: 38px; text-align: center; min-height: 320px; }
.sensor-commission p { max-width: 43ch; font-size: 12px; }
.sensor-offline-icon .icon { width: 50px; height: 50px; color: #718a78; }
.radar-tracks { margin-top: 12px; padding: 13px 14px; border: 1px solid #40554d; background: #121f19; }
.radar-track-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.radar-track-header h3 { font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .6px; color: #bfceb8; }
.radar-track-header > span { font-size: 8px; }
.contact-register { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 12px; max-height: 240px; overflow-y: auto; }
.contact-row { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; padding: 10px; background: #19291f; border-color: #435e48; }
.contact-row.selected { border-color: #a7c19b; background: #2a3d2a; }
.contact-row > span { min-width: 0; flex: 1; }
.contact-row strong { display: block; color: #c7d9be; overflow: hidden; text-overflow: ellipsis; font: 10px/1.5 var(--mono); }
.contact-row small { display: block; font: 8px/1.6 var(--mono); color: #9db19f; }
.contact-row b { font: 8px/1.5 var(--mono); color: #b9cdaa; }
.contact-row .icon { color: #9db491; flex-shrink: 0; }
.radar-empty { padding: 14px 0 2px; font-size: 10px; }
.radar-contact-panel .contact-profile { position: relative; min-height: 140px; display: grid; place-items: center; padding: 12px; border-bottom: 1px solid #4a6250; background: repeating-linear-gradient(0deg,transparent 0 19px,#6d946b12 19px 20px),repeating-linear-gradient(90deg,transparent 0 19px,#6d946b12 19px 20px),#132018; }
.contact-profile .eyebrow { align-self: start; font-size: 8px; color: #aac2a2; }
.contact-emblem { width: 42px; height: 42px; color: #b2cda3; }
.contact-grid-position { font: 9px/1.5 var(--mono); color: #9fb494; }
.radar-contact-panel .panel-content h2 { font-size: 17px; overflow-wrap: anywhere; }
.radar-contact-panel .island-stats strong { font-size: 17px; }
.contact-assessment h3 { margin: 18px 0 8px; font: 500 11px/1.5 var(--mono); color: #c4d4c0; text-transform: uppercase; letter-spacing: .4px; }
.contact-assessment p { font-size: 11px; line-height: 1.75; margin-top: 7px; }
.contact-composition, .destination-estimates { margin: 0; padding: 0; list-style: none; }
.contact-composition li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: #b5c6b5; }
.contact-composition strong, .destination-estimates strong { font: 11px/1.5 var(--mono); color: #cfdfc6; }
.contact-composition small { grid-column: 1 / -1; font: 9px/1.5 var(--mono); color: var(--muted); }
.destination-estimates li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: #b4c6b4; }
.track-history { margin-top: 18px; font: 10px/1.8 var(--mono); color: #acbea7; }
.track-history ol { padding: 0; list-style: none; }
.track-history li { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #354a3b; padding: 5px 0; }
@media (max-width:1180px) {
  .force-tools { grid-template-columns: minmax(0,1fr) minmax(140px,190px); }
  .force-tools .filters { grid-column: 1 / -1; }
}
@media (max-width:960px) {
  .radar-contact-panel { display: block; }
  .radar-contact-panel .island-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .radar-contact-panel .contact-profile { min-height: 110px; }
  .contact-assessment { display: grid; grid-template-columns: minmax(0,1fr); }
}
@media (max-width:760px) {
  .force-heading { flex-wrap: wrap; }
  .force-card { padding: 16px; }
  .force-card h3 { font-size: 16px; }
  .recruit-form button, .recruit-form input { min-height: 42px; }
  .force-kv dt { font-size: 8px; }
  .force-kv dd { font-size: 11px; }
  .force-description { font-size: 11px; }
  .force-ident .eyebrow { letter-spacing: .3px; }
  .contact-row { min-height: 48px; }
  .radar-contact-panel .panel-content { padding: 17px; }
}
@media (max-width:480px) {
  .force-tools { grid-template-columns: minmax(0,1fr); }
  .force-tools .filters { grid-column: auto; }
  .contact-register { grid-template-columns: minmax(0,1fr); }
  .detail-columns { grid-template-columns: minmax(0,1fr); gap: 0; }
  .attack-ratings { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .radar-contact-panel .island-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sensor-commission { padding: 25px; }
}
.combat-report > .row { flex-wrap: wrap; }
.combat-assessment h3 { margin: 17px 0 8px; font: 500 11px/1.5 var(--mono); text-transform: uppercase; color: #c3d3be; }
.combat-assessment .force-kv { margin-top: 12px; }
.combat-assessment .table-wrap { margin: 9px 0; }
.combat-assessment th { padding-left: 7px; padding-right: 7px; font-size: 8px; }
.combat-assessment td { padding-left: 7px; padding-right: 7px; font-size: 10px; }
.combat-report details summary { color: #b9ceae; cursor: pointer; }
.combat-conditions { color: #abbfba; }

/* Engraved command instruments, formation registers, and national standards. */
.identity-line { display:flex; align-items:center; gap:9px; min-width:0; }
.nation-flag { width:39px; height:26px; display:block; flex-shrink:0; border:1px solid #5c7166; }
.identity-line .name { max-width:205px; }
.identity-line button { padding:3px; }
.icon.profile-icon { width:48px; height:48px; }
.card-heading h2 { display:flex; align-items:center; gap:9px; }
.stock-item > span:first-child { display:flex; align-items:center; gap:7px; }
.stock-item .icon { width:14px; height:14px; }
.island-tabs { margin:0 0 13px; }
.island-command { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(295px,.8fr); gap:0; margin-bottom:20px; border:1px solid #586d62; box-shadow:0 5px 18px #0005,inset 0 0 0 4px #1b2825; background:#111c18; overflow:hidden; border-radius:2px; }
.model-visual { min-width:0; display:flex; flex-direction:column; background:#0e1915; }
.model-visual .atlas-header { min-height:70px; background:linear-gradient(#25392e,#1b2a22); }
.model-visual .atlas-header .eyebrow { color:#9eb79c; }
.model-visual .atlas-header h2 { color:#d1e4c7; font-size:16px; overflow-wrap:anywhere; }
.model-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-bottom:1px solid #39513c; background:#14211c; }
.model-zoom-controls,.model-view-actions { display:flex; gap:5px; }
.model-controls .model-control { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:0; border-color:#4c6254; color:#c2d0b8; background:#1a2a21; }
.model-control-icon { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.island-model-canvas { display:block; width:100%; height:360px; min-width:0; flex:none; min-height:360px; background:#0e1915; }
.model-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; padding:10px 13px; color:#9eb89b; background:#18291e; border-top:1px solid #39513c; font:8px/1.6 var(--mono); letter-spacing:.7px; }
.model-footer > span { display:flex; align-items:center; gap:6px; }
.model-footer .icon { width:12px; height:12px; }
.deposit-strip { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:11px 13px; border-top:1px solid #354c3b; }
.deposit-strip > .eyebrow { font-size:8px; margin-right:4px; }
.deposit-chip { display:flex; align-items:center; gap:5px; font:9px/1.6 var(--mono); color:#c2d0b8; background:#1a2b20; border:1px solid #455e46; padding:3px 6px; }
.deposit-chip .icon { width:13px; height:13px; }
.defense-brief { min-width:0; padding:18px; border-left:1px solid #52644f; background:linear-gradient(135deg,#1b2922,#121f19); }
.defense-brief .card-heading { align-items:flex-start; }
.defense-brief h2 { font-size:17px; }
.defense-brief .badge { font-size:8px; flex-shrink:0; }
.defense-readouts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:17px 0 14px; }
.defense-readouts > div > span { display:block; color:#a1b49e; font:8px/1.5 var(--mono); letter-spacing:.7px; }
.defense-readouts strong { display:block; color:#d1e4c7; font:500 24px/1.4 var(--mono); }
.defense-readouts strong small { font:10px/1.4 var(--mono); color:#adc1a4; }
.island-alerts { border-top:1px solid #40543c; padding-top:14px; margin-top:15px; }
.island-alerts h3 { display:flex; gap:7px; align-items:center; font:11px/1.5 var(--mono); text-transform:uppercase; margin-bottom:10px; color:#c0d2b6; }
.approach-warning { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:10px; margin-bottom:6px; color:#d8c19a; background:#302b20; border-color:#827049; }
.approach-warning > span:nth-child(2) { flex:1; min-width:0; }
.approach-warning strong { font:600 10px/1.6 var(--mono); }
.approach-warning small { display:block; color:#c7b68f; font:9px/1.6 var(--mono); }
.warning-indicator { width:5px; height:5px; flex-shrink:0; background:#d5b06c; }
.radar-caution { margin-top:9px; font-size:8px; color:#94ab93; }
.defense-brief details { border-top:1px solid #3c513c; padding:10px 0; }
.defense-brief summary { color:#c1d2b6; font:10px/1.5 var(--mono); cursor:pointer; }
.defense-brief .unit-group { padding:10px 0; }
.defense-brief .unit-group strong { font-size:11px; }
.installation-row { display:flex; align-items:center; gap:9px; margin:10px 0; font:10px/1.5 var(--mono); }
.installation-row strong { font-weight:500; }
.installation-row small { display:block; color:#9eb298; font-size:9px; }
.island-governor { display:flex; align-items:center; gap:7px; border-top:1px solid #3c513c; padding:9px 0; font:9px/1.5 var(--mono); color:#aebfa8; }
.island-governor .icon { width:15px; height:15px; }
.island-governor button { margin-left:auto; }
.briefing-band { display:flex; align-items:center; gap:7px; padding:12px 15px; background:#1a2b20; border-bottom:1px solid #3f5740; font:9px/1.5 var(--mono); color:#aebfa9; }
.island-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.island-title h2 { overflow-wrap:anywhere; }
.island-panel details { margin:13px 0; }
.island-panel summary { font:10px/1.6 var(--mono); color:#bed0b7; cursor:pointer; }
.island-panel details .building-chips { margin-top:10px; }
.facility-ident { display:flex; align-items:flex-end; gap:12px; height:65px; margin-top:9px; }
.facility-ident .facility-glyph { width:25px; height:25px; color:#abc4b6; margin-bottom:19px; }
.build-card .eyebrow { margin:4px 0 7px; font-size:8px; }
.build-card .force-kv { margin:12px 0; }
.build-card .building-inputs { font-size:9px; line-height:1.7; }
.build-card .duration { max-width:65%; text-align:right; font-size:8px; }
.engineering-readout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:13px 15px; margin-bottom:18px; border:1px solid #41574b; background:#18261e; }
.engineering-readout > div { display:flex; align-items:center; gap:10px; }
.engineering-readout .icon { width:24px; height:24px; color:#b3c8ab; }
.engineering-readout span { color:#a3b69e; font:8px/1.5 var(--mono); letter-spacing:.7px; }
.engineering-readout strong { display:block; color:#d0dfc5; margin-top:3px; font:10px/1.6 var(--mono); }
.unit-fire-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#111d16; border:1px solid #39543e; margin:2px 0 10px; }
.unit-fire-stats > span { padding:7px 8px; border-right:1px solid #39543e; text-align:center; color:#bed4b2; }
.unit-fire-stats > span:last-child { border-right:0; }
.unit-fire-stats small { display:block; font:8px/1.5 var(--mono); text-transform:uppercase; color:#9eb897; }
.unit-fire-stats strong { font:500 15px/1.5 var(--mono); }
.energy-grid { margin-bottom:19px; }
.grid-island { border-top:1px solid #40564c; margin-top:18px; padding-top:18px; }
.grid-island h3 { font-size:16px; }
.grid-readouts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:14px 0; padding:14px; border:1px solid #41594a; background:#142219; }
.grid-readouts span { display:block; color:#9fb29a; font:8px/1.6 var(--mono); }
.grid-readouts strong { display:block; color:#cbdfbd; font:500 21px/1.6 var(--mono); }
.grid-readouts small { color:#a9c19f; font:8px/1.5 var(--mono); }
.morale-card .force-kv { margin:15px 0; }
.morale-card .cost { margin:14px 0; }
.organization-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr); gap:18px; align-items:start; }
.division-card { border-top:1px solid #445c4b; padding:18px 0 5px; margin-top:14px; }
.division-card:first-of-type { border-top:0; padding-top:0; }
.division-card > .mono { margin:8px 0; }
.division-composition { display:flex; flex-wrap:wrap; gap:5px; margin:11px 0; }
.division-leader { display:flex; align-items:center; gap:6px; font:10px/1.5 var(--mono); color:#aabfa2; margin:13px 0; }
.division-leader .icon { width:15px; height:15px; }
.organization-form .note { font-size:11px; }
.officer-top-grid { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:18px; margin-bottom:18px; }
.officer-register { display:grid; gap:7px; max-height:390px; overflow:auto; }
.officer-choice { display:flex; align-items:center; text-align:left; gap:11px; background:#17271e; border-color:#3e5942; min-height:66px; }
.officer-choice.selected { border-color:#9eb88f; background:#293c2a; }
.officer-choice > span:nth-child(2) { min-width:0; flex:1; }
.officer-choice strong { display:block; font:500 12px/1.6 var(--mono); color:#d4e4c8; }
.officer-choice small { display:block; font:9px/1.7 var(--mono); color:#a6bd9b; }
.officer-rank { text-align:right; font:12px/1.5 var(--mono); color:#c8dbbd; }
.academy-empty { display:grid; justify-items:start; gap:12px; }
.academy-emblem { width:44px; height:44px; color:#aac49e; }
.academy-empty p { font-size:12px; }
.officer-brief { margin-bottom:22px; }
.officer-emblem { width:41px; height:41px; color:#bad4ac; }
.officer-progress { padding:15px; margin:17px 0; border:1px solid #445c44; background:#122116; }
.officer-progress .progress { margin-top:8px; }
.officer-assignment-form { display:flex; gap:12px; align-items:flex-end; margin-bottom:15px; }
.officer-assignment-form > div { flex:1; min-width:0; }
.officer-assignment-form button { min-height:42px; }
.skill-tree-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:25px 0 15px; }
.officer-skill-tree { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; align-items:start; }
.skill-branch { padding:13px; border:1px solid #3a5147; background:#132018; min-width:0; }
.skill-branch-title { display:flex; align-items:center; gap:8px; color:#b9cea9; padding:0 2px 13px; }
.skill-branch-title h3 { text-transform:uppercase; font:600 11px/1.5 var(--mono); letter-spacing:.7px; }
.skill-node { position:relative; border:1px solid #405447; background:#18251d; padding:12px; margin:14px 0 0; }
.skill-node::before { content:''; position:absolute; width:1px; height:15px; background:#50664e; left:50%; top:-16px; }
.skill-node.learned { border-color:#8fa881; background:#273829; }
.skill-node.available { border-color:#829478; background:#1c2c1e; }
.skill-node.locked { background:#141e19; }
.skill-node h4 { color:#c7d9be; font:600 11px/1.6 var(--mono); margin:0; }
.skill-node-status { flex-shrink:0; color:#9ab58d; font:9px/1.5 var(--mono); }
.skill-node-status .icon { width:13px; height:13px; }
.skill-effects { display:grid; gap:5px; margin:10px 0; }
.bonus-chip { font:9px/1.6 var(--mono); color:#b7d0a9; border-left:2px solid #78966c; padding-left:7px; }
.skill-role { display:block; font-size:8px; color:#aab79e; margin-top:11px; }
.skill-requires { font:8px/1.8 var(--mono); color:#9eb49b; margin:7px 0; }
.skill-node button { width:100%; padding:8px 5px; font-size:8px; margin-top:10px; }
.officer-bonuses { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.queue-item small { display:block; color:#9eb197; font:8px/1.7 var(--mono); }
.flag-designer-layout { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.4fr); gap:18px; align-items:start; }
.flag-preview-panel { position:sticky; top:17px; }
.designer-flag { display:block; width:100%; height:auto; border:1px solid #52634e; box-shadow:0 4px 10px #0006; }
.flag-readout { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:10px 0; color:#9fb099; font:8px/1.6 var(--mono); border-bottom:1px solid var(--line); }
.flag-published { padding-top:20px; }
.flag-published h3 { font:11px/1.6 var(--mono); color:#bbcfb1; margin-bottom:12px; }
.published-flag { width:90px; height:60px; border:1px solid #50634b; margin-bottom:11px; }
.flag-published p { font-size:9px; }
.flag-form { display:grid; gap:19px; }
.flag-pattern-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.pattern-choice { padding:6px; color:#afc4a6; background:#16231b; border-color:#3e5541; display:grid; gap:6px; }
.pattern-flag { width:100%; height:auto; }
.pattern-choice span { font:8px/1.5 var(--mono); min-height:24px; }
.pattern-choice.selected,.emblem-choice.selected { border-color:#b5caa1; background:#314431; box-shadow:inset 0 0 0 1px #8fa67b; }
.flag-colors { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.flag-colors input[type=color] { width:100%; height:43px; padding:3px; background:#142018; }
.color-palette { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:7px; }
.color-swatch { width:100%; min-width:0; height:18px; padding:0; border:1px solid #708070; background:var(--swatch); box-shadow:none; }
.color-swatch:hover:enabled { background:var(--swatch); border-color:#dde7d5; }
.flag-placement { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.flag-placement > div:last-child { grid-column:1 / -1; }
input[type=range] { padding:6px 0; box-shadow:none; }
.emblem-fieldset { padding:13px; margin:0; min-width:0; border:1px solid #415947; }
.emblem-fieldset legend { padding:0 7px; color:#b0c3a8; font:9px/1.5 var(--mono); letter-spacing:1px; }
.flag-emblem-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.emblem-choice { display:grid; justify-items:center; align-content:start; gap:7px; padding:9px 5px; min-width:0; color:#bccfb1; background:#142219; border-color:#415443; }
.emblem-glyph { width:31px; height:31px; }
.emblem-choice span { font:8px/1.5 var(--mono); color:#b0c4a6; min-height:24px; }
.flag-save { display:flex; flex-wrap:wrap; gap:11px; }
.diplomatic-flag { width:66px; height:44px; border:1px solid #5b6b50; }
@media (max-width:1180px) {
  .island-command { grid-template-columns:minmax(0,1.1fr) minmax(270px,.8fr); }
  .island-model-canvas { height:340px; min-height:340px; }
  .defense-brief { padding:15px; }
  .defense-brief .card-heading { flex-wrap:wrap; }
  .officer-skill-tree { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flag-designer-layout { grid-template-columns:minmax(210px,.75fr) minmax(0,1.3fr); }
  .flag-pattern-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .flag-emblem-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .flag-colors { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .island-command { grid-template-columns:minmax(0,1fr); }
  .island-model-canvas { height:330px; min-height:330px; }
  .defense-brief { border-left:0; border-top:1px solid #52644f; }
  .defense-readouts { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .defense-brief .card-heading { flex-wrap:nowrap; }
  .island-panel { display:block; }
  .organization-layout,.officer-top-grid,.flag-designer-layout { grid-template-columns:minmax(0,1fr); }
  .flag-preview-panel { position:static; }
  .designer-flag { max-width:420px; margin:auto; }
  .flag-published { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px 16px; align-items:center; }
  .flag-published h3 { grid-column:1 / -1; margin:0; }
  .flag-published .published-flag { margin:0; }
  .flag-pattern-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .flag-emblem-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .island-command { margin-bottom:17px; }
  .island-model-canvas { height:290px; min-height:290px; }
  .model-controls button,.defense-brief button,.skill-node button { min-height:40px; }
  .defense-readouts strong { font-size:21px; }
  .defense-readouts strong small { display:block; font-size:8px; }
  .grid-readouts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .engineering-readout { grid-template-columns:minmax(0,1fr); }
  .officer-brief > .row { flex-wrap:wrap; }
  .officer-assignment-form { flex-wrap:wrap; }
  .officer-assignment-form button { flex-shrink:0; }
  .flag-pattern-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .flag-emblem-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .color-swatch { height:26px; }
  .unit-fire-stats > span { padding:7px 4px; }
}
@media (max-width:480px) {
  .island-model-canvas { height:260px; min-height:260px; }
  .model-visual .atlas-header { min-height:68px; padding:11px; }
  .model-visual .atlas-header h2 { font-size:14px; }
  .defense-brief .card-heading { flex-wrap:wrap; }
  .defense-readouts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .defense-readouts strong small { display:inline; }
  .model-footer { font-size:7px; letter-spacing:.3px; }
  .model-footer .icon { width:10px; height:10px; }
  .deposit-strip { gap:6px; }
  .deposit-strip > .eyebrow { flex-basis:100%; }
  .officer-skill-tree { grid-template-columns:minmax(0,1fr); }
  .skill-tree-heading { flex-wrap:wrap; }
  .officer-brief .row > .row { gap:8px; }
  .officer-assignment-form > div { flex-basis:100%; }
  .officer-assignment-form button { width:100%; }
  .officer-progress { padding:11px; }
  .officer-progress .row { flex-wrap:wrap; gap:6px; }
  .flag-pattern-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .flag-emblem-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .flag-placement { grid-template-columns:minmax(0,1fr); }
  .flag-save button { width:100%; }
  .color-swatch { height:30px; }
  .grid-readouts { padding:11px; }
  .grid-readouts strong { font-size:19px; }
}
.officer-choice strong,.officer-brief h2,.division-card h3 { min-width:0; overflow-wrap:anywhere; }
.division-card > .row { align-items:flex-start; }
.defense-register-list { max-height:160px; overflow-y:auto; scrollbar-width:thin; margin-top:7px; }

/* Generated instrument artwork and sustained radar observation. */
.generated-art { display:inline-block; background-repeat:no-repeat; vertical-align:middle; flex-shrink:0; }
.icon.generated-art { width:22px; height:22px; }
.nav-button .icon.generated-art { width:22px; height:22px; }
.resource-label .icon.generated-art { width:19px; height:19px; }
.facility-art { width:130px; height:116px; }
.build-card .facility-art.building-icon { width:132px; height:116px; margin:0; }
.facility-ident { align-items:center; min-height:126px; }
.facility-glyph { align-self:center; }
.facility-detail > .facility-art { display:block; margin:0 auto 18px; width:180px; height:158px; }
.emblem-art { width:44px; height:44px; min-height:44px; }
.emblem-choice span.emblem-art { min-height:44px; }
.empty-emblem { border:1px dashed #637361; border-radius:50%; transform:scale(.6); }
.overview-grid.radar-workbench { grid-template-columns:minmax(0,1fr) 310px; margin:0 0 25px; gap:16px; }
.radar-workbench > aside { position:sticky; top:18px; max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin; }
.radar-station .map-canvas { height:clamp(560px,70vh,860px); min-height:560px; max-height:none; aspect-ratio:auto; }
.radar-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 5px; }
.radar-filters { display:flex; flex-wrap:wrap; gap:6px; }
.radar-toolbar button { display:flex; align-items:center; gap:7px; color:#cad8bd; background:#17261d; border-color:#53694d; }
.radar-toolbar button.active { background:#354d30; border-color:#a5be8e; }
.radar-budget { padding:13px 15px; border-top:1px solid #3d573e; background:#17251b; }
.radar-budget > .row > strong { font:10px/1.5 var(--mono); color:#c5d4b9; }
.radar-budget-domains { display:flex; flex-wrap:wrap; gap:15px; margin:8px 0 10px; }
.radar-budget-domains > span { display:flex; align-items:center; gap:7px; font:10px/1.5 var(--mono); color:#bfd0b5; }
.radar-budget-domains b { font-size:19px; }
.radar-budget-domains small { color:#8da084; }
.radar-budget .mono { font-size:9px; line-height:1.7; margin:9px 0 0; }
.radar-budget-domains .sensor-sea { color:#d9c6a0; }
.radar-budget-domains small { font-size:9px; line-height:1.6; }
.sensor-channel-label { display:flex; justify-content:space-between; gap:10px; margin:12px 0 8px; font:9px/1.5 var(--mono); color:#cbd8bd; }
.sensor-channels { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; padding:7px; border:1px solid #5c7056; background:#0d1b16; }
.sensor-channels i { display:grid; place-items:center; height:26px; border:1px solid #3d5348; font:normal 9px/1 var(--mono); color:#8da297; background:#15221b; transition:background-color .4s,border-color .4s,color .4s; transform-origin:bottom; }
.sensor-channels .channel-air { background:#345037; border-color:#8fba88; color:#e1edcc; box-shadow:inset 0 0 8px #b4e49212; }
.sensor-channels .channel-sea { background:#55472e; border-color:#bea26b; color:#f4e4c5; box-shadow:inset 0 0 8px #e4c39212; }
.sensor-faders { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:13px 0; }
.sensor-fader label { display:flex; align-items:center; gap:7px; color:#d6e2c7; font:10px/1.5 var(--mono); text-transform:uppercase; }
.sensor-fader label .icon { width:19px; height:19px; }
.sensor-fader label output { margin-left:auto; font-size:18px; }
.sensor-fader input[type=range] { display:block; width:100%; min-width:0; height:32px; padding:0; margin:4px 0; accent-color:#adcc94; cursor:ew-resize; }
.sensor-fader.sensor-sea input[type=range] { accent-color:#d4b679; }
.sensor-fader input[type=range]:disabled { opacity:.4; cursor:default; }
.sensor-fader .mono { display:block; font-size:8px; color:#bacbb2; }
.sensor-presets { display:flex; flex-wrap:wrap; gap:6px; }
.sensor-presets button { background:#19271e; border-color:#617452; color:#d4dfc5; font-size:10px; }
.sensor-command-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px; margin-top:13px; }
.sensor-command-row .mono { color:#c9d5bc; margin:0; }
@media (max-width:520px) { .sensor-faders { grid-template-columns:1fr; gap:8px; } .sensor-channels { gap:3px; padding:5px; } }
@media (prefers-reduced-motion:reduce) { .sensor-channels i { transition:none; } }
.locked-reading { margin-left:6px; background:#34472b; color:#d3e4ba; }
.acquisition-progress { margin:12px 0 8px; }
.dossier-register { margin-top:13px; border-top:1px solid #465b43; padding-top:10px; }
.dossier-register .contact-row { width:100%; margin-top:6px; opacity:.85; }
.island-tabs button.island-own { background:#233a29; color:#b7d6af; border-color:#60875c; }
.island-tabs button.island-enemy { background:#352725; color:#e1b2a9; border-color:#865e55; }
.island-tabs button.island-neutral { background:#292d2d; color:#b7beb9; border-color:#626b67; }
.island-tabs button.selected { box-shadow:inset 0 -3px 0 currentColor; }
.island-model-canvas { height:360px; min-height:360px; flex:none; cursor:pointer; }
.tier-tools { display:grid; grid-template-columns:minmax(0,1fr) 140px minmax(180px,260px); gap:15px; align-items:end; margin:15px 0 22px; }
.testing-status { font-size:9px; color:#bbcf9d; letter-spacing:.5px; }
.force-family { margin-bottom:25px; }
.family-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 0; border-top:1px solid #617256; margin-bottom:13px; }
.family-heading > div { display:flex; align-items:center; gap:9px; }
.family-heading h3 { font:14px/1.5 var(--mono); color:#cbd9bd; text-transform:uppercase; }
.family-heading > span { font-size:9px; text-align:right; }
.tier-badge { font:9px/1.6 var(--mono); color:#c2d3a7; background:#263424; border:1px solid #4c6541; padding:3px 6px; margin:8px 0 0; align-self:flex-start; }
.intelligence-operations { margin-top:23px; }
.hostile-operation { padding:15px 0; border-bottom:1px solid #405840; }
.hostile-operation p { margin:8px 0; }
.intel-archive { margin:24px 0; }
.intel-report { padding:15px; border:1px solid #45583f; background:#16211a; min-width:0; }
.intel-report h3 { font-size:14px; }
.intel-report .mono { margin:8px 0; font-size:9px; }
.intel-report .small { margin-top:13px; }
.intel-market-row { display:flex; justify-content:space-between; align-items:flex-start; gap:17px; padding:16px 0; border-bottom:1px solid #42553e; }
.intel-market-row > div:first-child { min-width:0; }
.intel-market-row strong { font-size:12px; overflow-wrap:anywhere; }
.intel-market-row p { margin:5px 0; font-size:11px; }
.intel-market-row .mono { font-size:8px; }
.intel-market-actions { display:flex; flex-direction:column; gap:8px; flex-shrink:0; align-items:flex-end; }
.intel-record { font:10px/1.8 var(--mono); padding:12px; overflow:auto; max-height:350px; background:#111a15; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (min-width:1600px) { .overview-grid.radar-workbench { grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:1100px) { .overview-grid.radar-workbench { grid-template-columns:minmax(0,1fr) 260px; } .radar-station .map-canvas { height:580px; } }
@media (max-width:960px) { .overview-grid.radar-workbench { grid-template-columns:minmax(0,1fr); } .radar-workbench > aside { position:static; max-height:none; } .radar-station .map-canvas { height:60vh; min-height:480px; } }
@media (max-width:600px) { .radar-station .map-canvas { min-height:450px; height:65vh; } .radar-toolbar { padding:10px 8px 5px; } .radar-toolbar button { padding:7px; font-size:9px; } .radar-toolbar button .icon { width:19px; height:19px; } .island-model-canvas { height:290px; min-height:290px; } .tier-tools { grid-template-columns:1fr 1fr; gap:10px; } .tier-tools > p { grid-column:1 / -1; } .family-heading h3 { font-size:11px; } .intel-market-row { gap:8px; } .intel-market-actions { max-width:120px; } .contact-register { grid-template-columns:1fr; } .emblem-art,.emblem-choice span.emblem-art { width:36px; height:36px; min-height:36px; } }

.contact-row > .icon.generated-art { flex:0 0 22px; }

/* Shared radar and priority command workflow. */
.radar-workbench { min-width:0; width:100%; margin-bottom:24px; }
.radar-island-actions { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.priority-dispatches { margin-bottom:20px; }
.pinned-proposal { display:flex; align-items:center; gap:16px; margin-bottom:10px; padding:11px; border:1px solid #8b7855; background:linear-gradient(110deg,#302a20,#1b2823); }
.proposal-open { display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-align:left; padding:4px; background:transparent; border:0; box-shadow:none; }
.proposal-open > .icon { width:29px; height:29px; }
.proposal-open > span { min-width:0; display:grid; gap:4px; }
.proposal-open strong { color:#e0d0af; font:600 12px/1.5 var(--mono); overflow-wrap:anywhere; }
.proposal-open small { color:#bca67b; font:8px/1.5 var(--mono); letter-spacing:1px; }
.proposal-open > span > span { color:#aab9ac; font:9px/1.6 var(--mono); }
.proposal-actions { display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.priority-notices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.priority-notices .dispatch-item { display:block; border-bottom:0; margin:0; padding:9px 0 0; }
.priority-notices .dispatch-time { display:block; margin-bottom:4px; }
.priority-notices strong { font-size:11px; }
.priority-notices p { font-size:11px; }
.command-readiness .step-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.intelligence-control { align-items:start; margin-bottom:22px; }
.sensor-control-panel .radar-budget { border:0; margin:0; padding:0; }
.geospatial-readout { display:flex; gap:24px; padding:14px 0; color:#acbdad; font:10px/1.5 var(--mono); }
.geospatial-readout > span { display:flex; align-items:center; gap:7px; }
.geospatial-readout strong { color:#d4e4c7; font-size:15px; }
.geospatial-flight-register { margin-top:16px; }
.geospatial-flight { padding:11px 0; border-top:1px solid var(--line); }
.geospatial-flight strong { font:600 11px/1.6 var(--mono); }
.geospatial-flight p { font-size:10px; margin-top:5px; }
.drone-select input[type=radio] { width:16px; min-height:16px; height:16px; padding:0; margin-top:4px; }
.drone-select label { align-items:flex-start; }
.drone-select strong { display:block; font:600 11px/1.6 var(--mono); }
.drone-select small { margin-top:4px; line-height:1.7; }
.production-queue { margin-bottom:22px; }
.production-queue-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-bottom:12px; }
.production-queue-item { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #425549; background:#13211b; }
.production-queue-item > div { min-width:0; flex:1; }
.production-queue-item strong { font:500 11px/1.5 var(--mono); }
.production-queue-item small { display:block; margin:4px 0; color:#a2b49e; font:9px/1.6 var(--mono); }
.production-queue-item .progress { margin-top:8px; }
.production-queue-item > b { font:10px/1.6 var(--mono); white-space:nowrap; }
.organization-layout { margin-bottom:22px; }
.flag-designer-shell { zoom:.8; }
.flag-designer-shell > .flag-colors { padding:17px; border:1px solid #52644f; background:#19271f; }
.flag-design-controls { display:grid; gap:19px; }
.flag-designer-shell .flag-colors { grid-template-columns:repeat(4,minmax(0,1fr)); }
.proposal-detail > p { margin-bottom:14px; }
@media (max-width:1100px) {
  .priority-notices { grid-template-columns:minmax(0,1fr); gap:0; }
  .command-readiness .step-list { grid-template-columns:minmax(0,1fr); gap:0; }
}
@media (max-width:700px) {
  .pinned-proposal { align-items:flex-start; flex-direction:column; gap:9px; }
  .proposal-actions { margin-left:41px; }
  .production-queue-items { grid-template-columns:minmax(0,1fr); }
  .flag-designer-shell .flag-colors { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .radar-island-actions { margin-left:0; }
  .model-visual .atlas-header { gap:8px; }
}

/* Field instruments retain native controls and their keyboard behavior. */
.resource-label { white-space:normal; min-height:26px; align-items:flex-start; }
.resource-label > span { overflow-wrap:normal; }
.resource-label .icon { margin-top:1px; }
input[type="number"] { font-family:var(--mono); font-variant-numeric:tabular-nums; color:#d2dcc1; background:linear-gradient(#081013,#162128); border-color:#56675f; box-shadow:inset 0 2px 5px #000b,inset 0 -1px #a6b3971c,0 1px #ffffff0c; }
select { border-color:#56696b; background:linear-gradient(#26363b,#162329); box-shadow:inset 0 1px #b8c9bc15,inset 0 -2px #0005,0 1px #0004; }
button[aria-pressed="true"],button[aria-selected="true"],.island-model-toolbar button[aria-pressed="true"] { background:linear-gradient(#15241d,#273b2b); border-color:#91a87f; box-shadow:inset 0 2px 4px #0008,inset 0 -1px #a2bc7c25; }
input[type="range"] { accent-color:#acb791; }
.instrument-toggle { position:relative; display:grid; grid-template-columns:1fr 46px; align-items:center; gap:6px 12px; padding:12px; margin:0; border:1px solid #516359; border-radius:2px; background:linear-gradient(#25332c,#17261f); box-shadow:inset 0 1px #c7d4b414,0 2px 3px #0006; cursor:pointer; min-height:76px; }
.instrument-toggle-label { font-size:10px; line-height:1.5; color:#c5d0b9; }
.instrument-toggle-label small { display:block; font:9px/1.5 var(--mono); color:#99aea2; margin-top:4px; letter-spacing:0; }
.instrument-toggle input { position:absolute; right:8px; top:8px; width:52px; height:60px; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; }
.instrument-lever { position:relative; grid-column:2; grid-row:1; width:42px; height:38px; border-radius:3px; border:1px solid #758276; background:linear-gradient(90deg,#29382d,#101a14 45%,#29382d); box-shadow:inset 0 2px 5px #000d,0 1px #9aa98235; }
.instrument-lever::before { content:""; position:absolute; width:10px; height:24px; left:15px; top:5px; border:1px solid #9ba28e; border-radius:3px; background:linear-gradient(90deg,#50564a,#c0c3ae 45%,#666d60); box-shadow:0 3px 4px #000b; transform:perspective(60px) rotateX(-25deg); transform-origin:50% 85%; transition:transform 160ms; }
.instrument-lever::after { content:""; position:absolute; width:6px; height:3px; left:17px; bottom:2px; background:#627265; box-shadow:0 0 2px #000; }
.instrument-toggle input:checked + .instrument-lever::before { transform:perspective(60px) rotateX(25deg); }
.instrument-toggle input:checked + .instrument-lever::after { background:#c6e3a1; box-shadow:0 0 5px #a9d97866; }
.instrument-toggle b { grid-column:2; text-align:center; font:8px/1 var(--mono); letter-spacing:.25px; color:#c4d0b6; }
.instrument-toggle:focus-within { outline:2px solid var(--cyan); outline-offset:3px; }
.instrument-toggle input:disabled { cursor:not-allowed; }
.troop-morale { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:24px; margin-bottom:18px; background:linear-gradient(#24312b,#15221d); border-color:#506154; }
.morale-instrument { position:relative; border:2px solid #617064; border-radius:4px; background:radial-gradient(ellipse at 50% 90%,#2c3d2c,#0c170f 80%); box-shadow:inset 0 2px 10px #000c,0 1px #9dab8725; padding:7px 8px 25px; }
.morale-instrument svg { display:block; width:100%; height:auto; }
.morale-scale { fill:none; stroke:#91a881; stroke-width:2; }
.morale-ticks { stroke:#b5c59c; stroke-width:1; }
.morale-needle { fill:#d4b782; }
.morale-pivot { fill:#959a7d; stroke:#1b2619; stroke-width:2; }
.morale-instrument text { fill:#9eaf8f; font:10px var(--mono); text-anchor:middle; }
.morale-instrument > strong { position:absolute; bottom:7px; left:0; right:0; text-align:center; color:#d1ddbf; font:20px/1 var(--mono); font-variant-numeric:tabular-nums; }
.morale-instrument strong small { font-size:11px; margin-left:2px; }
.morale-readouts { display:flex; flex-wrap:wrap; gap:14px 28px; margin:12px 0; }
.morale-readouts > span { color:#99aea0; font:9px/1.5 var(--mono); text-transform:uppercase; }
.morale-readouts b { display:block; color:#d4ddc9; font-size:16px; font-weight:500; }
.morale-status p { font-size:11px; line-height:1.6; max-width:580px; }
.morale-status > small { display:block; margin-top:8px; }
.polity-header { display:grid; grid-template-columns:100px minmax(150px,1fr) minmax(240px,1.7fr); align-items:center; gap:20px; border:1px solid #556257; padding:20px; margin-bottom:14px; background:linear-gradient(#28362d,#18241e); box-shadow:inset 0 1px #bccdaa16,0 3px 5px #0005; }
.polity-header-flag { width:100px; height:auto; border:1px solid #68725a; box-shadow:0 2px 4px #0008; }
.polity-header-name h2 { margin:6px 0; overflow-wrap:anywhere; }
.polity-commitments { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.polity-commitments > div { display:flex; flex-direction:column; gap:6px; padding-left:14px; border-left:1px solid #4c5e4c; min-width:0; }
.commitment { color:#bdcdb3; font:10px/1.45 var(--mono); overflow-wrap:anywhere; }
.commitment.negative { color:#dda396; }
.scan-supplies { display:flex; gap:7px; flex-wrap:wrap; }
@media (max-width:720px) {
  .polity-header { grid-template-columns:70px 1fr; gap:14px; padding:15px; }
  .polity-header-flag { width:70px; }
  .polity-commitments { grid-column:1 / -1; }
  .troop-morale { grid-template-columns:135px 1fr; gap:14px; }
  .morale-readouts { gap:7px 12px; }
}
@media (max-width:420px) {
  .troop-morale { grid-template-columns:1fr; }
  .morale-instrument { width:155px; margin:0 auto; }
}
@media (prefers-reduced-motion:reduce) { .instrument-lever::before { transition:none; } }

.legend .friendly { background:#83c7ef; border-color:#83c7ef; }
.legend .unit-neutral { background:#a5d596; border-color:#a5d596; }
.legend .enemy { background:#f58e80; border-color:#f58e80; }
.sweep-opacity-control{padding:12px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sweep-opacity-control label{display:flex;justify-content:space-between;gap:16px;font-size:12px}
.sweep-opacity-control output{font-variant-numeric:tabular-nums}
.sweep-opacity-control input{width:100%;min-height:32px;margin:6px 0;accent-color:#a6c994;cursor:ew-resize}
.sweep-opacity-control small{display:block;font-size:10px;opacity:.7}