@font-face {
    font-family: Rajdhani;
    font-weight: 600;
    font-display: swap;
    src: url(rajdhani-600.woff2) format("woff2");
}
@font-face {
    font-family: Rajdhani;
    font-weight: 700;
    font-display: swap;
    src: url(rajdhani-700.woff2) format("woff2");
}
@font-face {
    font-family: JetBrains;
    font-weight: 100 800;
    font-display: swap;
    src: url(jetbrains-mono.woff2) format("woff2");
}
:root {
    color-scheme: dark;
    --bg: #0D0F10;
    --surface: #17191B;
    --alt: #1F2224;
    --border: #33373A;
    --subtle: #24272A;
    --strong: #4A4F53;
    --grid: #1B1E20;
    --text: #EDEAE4;
    --muted: #9AA0A6;
    --disabled: #7A8085;
    --accent: #F2650C;
    --accent-hover: #FF7A1F;
    --accent-active: #C94F00;
    --focus: #FF9142;
    --on-accent: #1A1200;
    --success: #4CAF6D;
    --warning: #E8B23A;
    --error: #E5484D;
    --error-hover: #F2686C;
    --mono: JetBrains, ui-monospace, Consolas, monospace;
    --heading: Rajdhani, "Segoe UI", sans-serif;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    color: var(--text);
    font: 13px/1.5 system-ui, "Segoe UI", sans-serif;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at top right, #f2650c24, transparent 44%),
        repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 60px),
        repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 52px),
        var(--bg);
}
header, main {
    max-width: 1100px;
    margin: auto;
    padding: 22px;
}
header, .row, .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
header {
    border-bottom: 1px solid var(--border);
}
.brand {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
.wordmark {
    font: 700 30px/1 var(--heading);
    letter-spacing: .16em;
}
.bar {
    width: 36px;
    height: 3px;
    background: var(--accent);
    margin-top: 4px;
}
.who {
    display: flex;
    align-items: center;
    gap: 12px;
}
h1, h2, h3, button {
    font-family: var(--heading);
}
h1 {
    font-size: 30px;
    margin: 0 0 4px;
}
h2 {
    font-size: 22px;
    margin: 0;
}
h3 {
    font-size: 18px;
    margin: 18px 0 0;
}
p {
    margin: 8px 0;
}
.muted, small {
    color: var(--muted);
}
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
article nav, main > nav {
    margin: 12px 0;
}
.eyebrow, .chip, time, .number, pre {
    font-family: var(--mono);
}
.eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 8px;
}
.brand .eyebrow {
    margin: 0 0 1px;
}

/* One look for every control the pilot can press: a link or a button, same states. */
nav a, a.button, button, summary {
    display: inline-block;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--strong);
    background: var(--alt);
    border-radius: 6px;
    padding: 8px 13px;
    font: 600 15px var(--heading);
    cursor: pointer;
}
nav a:hover, a.button:hover, button:hover, summary:hover {
    border-color: var(--muted);
    background: var(--border);
}
nav a:active, a.button:active, button:active {
    background: var(--subtle);
}
a.primary, button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
a.primary:hover, button.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
a.primary:active, button.primary:active {
    background: var(--accent-active);
    border-color: var(--accent-active);
}
button.danger {
    background: transparent;
    border-color: var(--error);
    color: var(--error);
}
button.danger:hover {
    background: #e5484d24;
    border-color: var(--error-hover);
    color: var(--error-hover);
}
button.link {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    padding: 4px 8px;
}
button.link:hover {
    color: var(--text);
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
}
button:disabled {
    cursor: progress;
    opacity: .6;
}
form[aria-busy] {
    cursor: progress;
}
nav a[aria-current] {
    border-color: var(--accent);
    background: #f2650c29;
    color: var(--focus);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
p a, .card > a:not(.choice):not(.button) {
    color: var(--focus);
}

.grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.65fr);
    gap: 14px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
}
.card.ok {
    border-left-color: var(--success);
}
.card.caution {
    border-left-color: var(--warning);
}
.card.error {
    border-left-color: var(--error);
}
.login .card {
    border-top: 3px solid var(--accent);
}
.chip {
    display: inline-block;
    border: 1px solid var(--strong);
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 11px;
    white-space: nowrap;
}
.chip.ok {
    color: var(--success);
    border-color: var(--success);
}
.chip.bad {
    color: var(--error);
    border-color: var(--error);
}
.row {
    padding: 10px 0;
    border-bottom: 1px solid var(--subtle);
}
.row span {
    color: var(--muted);
}
.row strong {
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}
.choice {
    display: block;
    margin-top: 8px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--alt);
    color: var(--text);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.choice:hover {
    border-color: var(--strong);
}
.choice[aria-current] {
    border-color: var(--accent);
    background: #f2650c29;
    color: var(--focus);
}
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.stat {
    background: var(--alt);
    border-radius: 8px;
    padding: 10px;
}
.number {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}
.unit {
    font-size: 11px;
    color: var(--muted);
}
label {
    display: block;
    margin: 12px 0;
}
input, select {
    display: block;
    margin-top: 6px;
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
input[type=checkbox] {
    display: inline;
    width: auto;
    min-height: auto;
    margin: 0 6px 0 0;
    accent-color: var(--accent);
}
details {
    margin-top: 12px;
}
details.confirm {
    border-left: 3px solid var(--error);
    padding-left: 12px;
}
form button {
    margin-top: 6px;
}
pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.login main {
    max-width: 440px;
    margin-top: 10vh;
}
.tagline {
    color: var(--muted);
    font-size: 12px;
}
@media (max-width: 660px) {
    .grid, .stats {
        grid-template-columns: 1fr;
    }
}
.notice {
    margin: 12px 0;
    padding: 10px 16px;
}
.who form button {
    margin: 0;
}
.brand > div + .eyebrow {
    margin-bottom: 4px;
}