/* AESOP Tactical — dark design system (standalone, no aesop_ui dependency). Same tokens as the AESOP family (aesop_arena, aesop_wargame), amber-keyed: the arena is blue because it builds, this is amber because it fights. THE TOKENS — every stylesheet of this service (ops.css, plan.css, lobby.css, a page's own) reads these; a colour or a font size written as a literal is a defect waiting to drift. surfaces --bg the page --bg-secondary cards, panels, the rows of a list --bg-elevated what sits on a card: inputs' fill, chips, the explainer, a raised button --surface-tooltip floating things: the (i) bubble, toasts, the map's tooltips --map-bg behind a map while its cells draw lines --border hairlines between everything --border-strong a bubble's or a key cap's outline --border-input the edge of a field, a select or a switch's track: 3:1 against the page and a card text --text-bright titles and values · --text-primary body · --text-secondary labels, table heads --text-muted meta and hints (4.5:1 on every surface, the amber-tinted cards included) --on-accent text drawn on the amber fill accent --accent · --accent-highlight · --accent-soft selection, the primary action, the focus ring states --success · --warning · --danger · --danger-text (red that reads as text on the dark surfaces) --info the sensor cyan (a band, a sensor envelope) --path a planned route (lime) rows --row-highlight the row that matters (the weakest link, the relevant track) --row-good the best row (the recommended COA) type --font (the page, and every control) · --mono (code, key caps, seat codes) --fs-2xs .7rem · --fs-xs .72rem · --fs-sm .76rem · --fs-md .85rem the body is 14px; nothing in px; nothing is written under .7rem, the floor of a text that carries information (ui-static-33) shape --radius (cards) · --radius-sm (buttons, inputs, alerts) · --focus (the keyboard ring) layout --navbar-height zero when the top line is folded away; every layout reads it THE SHARED COMPONENTS (defined below, for every page — do not redefine them in a page's stylesheet): .btn (-primary, -ghost, -lg, [disabled]) .badge (-ok, -warn, -no, -level) — a status word, never a button .alert (-danger, -warn, -ok) — .refuse-card and .warn-card are its two historical names .messages / .message-{success,info,warning,error} Django's messages, announced and dismissable .section-title (an h2 that opens a section) · .block-title (an h3 that heads a panel or a block) .data-table (every table of figures) · .kv (a key/value table) · .table-wrap (a wide table scrolls in it) .card · .panel (folds) · .explainer · .field / .field-row / .segmented / .switch · progress utilities: .inline · .mt-s · .mt-1 · .sr-only — a field's width is its page's (gm.css: .w-5, .w-6, .w-full) */ :root { color-scheme: dark; /* the browser's own controls (spinners, pickers, scrollbars) are dark too */ --bg: #0f1117; --bg-secondary: #171a23; --bg-elevated: #1e222d; --surface-tooltip: #262b38; --map-bg: #0b0e14; --border: #2a2f3d; --border-strong: #3a4152; --border-input: #636a7d; /* 3.5:1 on --bg, 3.2:1 on --bg-secondary (browser_admin-15) */ --text-primary: #e6e8ef; --text-secondary: #b8bccb; --text-muted: #979daf; /* ≥ 4.5:1 on --bg-elevated, --surface-tooltip and an --accent-soft card */ --text-bright: #ffffff; --on-accent: #101010; --accent: #f59e0b; --accent-highlight: #fbbf24; --accent-soft: rgba(245, 158, 11, 0.14); --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --danger-text: #fca5a5; --info: #22d3ee; --path: #a3e635; --row-highlight: #2a1f14; --row-good: #14211a; --fs-2xs: .7rem; --fs-xs: .72rem; --fs-sm: .76rem; --fs-md: .85rem; --navbar-height: 52px; --radius: 8px; --radius-sm: 6px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; accent-color: var(--accent); /* checkboxes, radios and range thumbs the page does not draw itself */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font); font-size: 14px; line-height: 1.55; } /* The browser draws controls in its own font (Arial) unless told otherwise: one typeface for a