/* The UCA's CAD (docs/project/website.md), drawn from the canvas "Ordinal
   website & UCA CAD": the tablet's terminal language at desk size. Teal-black
   glass, faint scanlines and grid; the selected row carries a pale field
   between two rules; restricted is red, caution amber, and nothing else
   is coloured. */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; src: url("fonts/barlowcondensed_medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400; src: url("fonts/barlowsemicondensed_regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; src: url("fonts/barlowsemicondensed_medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Space Mono"; font-weight: 400; src: url("fonts/space_mono_regular.ttf") format("truetype"); font-display: swap; }

:root {
    --glass: #091519;
    --text: #b7c9cd;
    --strong: #d3e2e5;
    --bright: #e2eef0;
    --label: #71888e;
    --sub: #9db2b7;
    --select: #b8dce4;
    --field: rgba(184, 220, 228, .13);
    --edge: rgba(184, 220, 228, .35);
    --rule: rgba(183, 201, 205, .14);
    --rule-2: rgba(183, 201, 205, .12);
    --rule-3: rgba(183, 201, 205, .1);
    --rule-4: rgba(183, 201, 205, .08);
    --restricted: #b95c59;
    --caution: #c99b45;
    --marked: #63aab5;
    --sans: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
    --caps: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --mono: "Space Mono", ui-monospace, Consolas, monospace;
    --edge-x: clamp(16px, 2.4vw, 32px);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.terminal { margin: 0; background: var(--glass); color: var(--text); font: 400 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--text); }
a:hover { color: var(--bright); }
button, input, select { font: inherit; color: inherit; }
input::placeholder { color: var(--label); }
:focus-visible { outline: 1px solid var(--select); outline-offset: 2px; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
form.inline { display: inline; margin: 0; }

.cad {
    min-height: 100vh; display: flex; flex-direction: column;
    background-color: var(--glass);
    background-image:
        repeating-linear-gradient(0deg, rgba(183, 201, 205, .022) 0px, rgba(183, 201, 205, .022) 1px, transparent 1px, transparent 3px),
        linear-gradient(rgba(99, 170, 181, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 170, 181, .03) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    box-shadow: inset 0 0 180px rgba(99, 170, 181, .06);
}

.cad-caps, .caps {
    font-family: var(--caps); font-weight: 500; font-size: 13px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--label);
}
.cad-mono, .mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.strong { color: var(--strong); }
.bright { color: var(--bright); }
.dim { color: var(--label); }
.sub { color: var(--sub); }
.danger, .restricted { color: var(--restricted); }
.caution { color: var(--caution); }
.marked { color: var(--marked); }
.system { color: var(--select); }

/* Frame ------------------------------------------------------------------------------------ */

.cad-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
    padding: 10px var(--edge-x); border-bottom: 1px solid var(--rule);
}
.cad-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cad-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.cad-nav a {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
    border-top: 1px solid transparent; border-bottom: 1px solid transparent; text-decoration: none;
    font: 500 15px/1 var(--caps); letter-spacing: .16em; color: var(--text);
}
.cad-nav a .n { color: var(--label); }
.cad-nav a:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.cad-nav a[aria-current="page"] { background: var(--field); border-color: var(--edge); color: var(--bright); }
.cad-nav a[aria-current="page"] .n { color: var(--select); }
.cad-time { display: flex; align-items: baseline; gap: 16px; }
.cad-day { font: 500 13px var(--caps); letter-spacing: .2em; color: var(--label); }
.cad-clock { font: 500 22px var(--caps); letter-spacing: .04em; color: var(--strong); }
.cad-signout {
    margin-left: 8px; padding: 0; min-height: 32px; background: none; border: 0; cursor: pointer;
    font: 500 13px var(--caps); letter-spacing: .2em; color: var(--label); text-decoration: underline; text-underline-offset: 3px;
}
.cad-signout:hover { color: var(--bright); }

.cad-strip {
    display: flex; flex-wrap: wrap; gap: 6px 32px; padding: 9px var(--edge-x); border-bottom: 1px solid var(--rule);
    font: 500 13px var(--caps); letter-spacing: .18em; color: var(--label);
}
.cad-strip .v { color: var(--text); }
.cad-strip .v.strong { color: var(--strong); }
.cad-strip .v.caution { color: var(--caution); }
.cad-strip .v.danger { color: var(--restricted); }

.cad-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px;
    padding: 10px var(--edge-x); border-top: 1px solid var(--rule);
    font: 500 13px var(--caps); letter-spacing: .18em; color: var(--label);
}
.cad-foot a { color: var(--label); text-decoration: none; }
.cad-foot a:hover { color: var(--bright); }
.cad-foot .caution { color: var(--caution); }

.cad-notice {
    position: sticky; top: 0; z-index: 5;
    padding: 10px var(--edge-x); border-bottom: 1px solid var(--rule);
    font-size: 17px; color: var(--strong); background: #0f2227;
    box-shadow: inset 1.5px 0 0 var(--select);
}
.cad-notice.refused { color: var(--bright); background: #2a1c1d; box-shadow: inset 1.5px 0 0 var(--restricted); }
.cad-wait { padding: 28px var(--edge-x); color: var(--sub); }

/* Sign-in and refusal ---------------------------------------------------------------------- */

.cad-gate { flex: 1; display: flex; align-items: center; justify-content: center; padding: 72px clamp(16px, 4vw, 48px); font-size: 17px; line-height: 1.5; }
.gate { width: 100%; max-width: 640px; }
.gate h1 { margin: 10px 0 18px; font: 500 clamp(36px, 5vw, 52px)/1 var(--caps); letter-spacing: .06em; color: var(--strong); }
.gate h1.danger { margin-bottom: 32px; color: var(--restricted); }
.gate-lede { margin-bottom: 40px; font-size: 19px; }
.gate-lede.danger { margin: 0; color: var(--restricted); }
.gate-facts { margin-top: 40px; border-bottom: 1px solid var(--rule-2); }
.gate-facts.first { margin: 0 0 32px; }
.gate-facts > div { display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--rule-2); }
.gate-facts dt { width: 150px; flex: none; font: 500 13px var(--caps); letter-spacing: .18em; color: var(--label); }
.gate-facts dd { flex: 1 1 260px; }
.gate-back { margin-top: 24px; font-size: 16px; }
.cad-problem { margin: -20px 0 28px; padding: 8px 0 8px 12px; border-left: 1.5px solid var(--caution); color: var(--strong); }

/* Choices: the tablet's numbered rows ------------------------------------------------------ */

.choice {
    display: flex; gap: 20px; align-items: flex-start; width: 100%; min-height: 58px; padding: 12px 16px;
    text-align: left; text-decoration: none; color: var(--text); cursor: pointer;
    background: transparent; border: 0; border-bottom: 1px solid var(--rule-4);
}
.choice:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.choice.selected { background: var(--field); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.choice.first { border-top: 1px solid var(--rule-4); }
.choice.backup { border-top: 1px solid rgba(185, 92, 89, .45); border-bottom: 1px solid rgba(185, 92, 89, .45); padding: 10px 12px; gap: 16px; }
.choice .n { width: 18px; flex: none; font: 500 18px/1.4 var(--caps); color: var(--label); }
.choice.selected .n { color: var(--select); }
.choice.backup .n, .choice.backup .choice-title { color: var(--restricted); }
.choice-body { display: flex; flex-direction: column; gap: 2px; }
.choice-title { font: 500 20px var(--caps); letter-spacing: .12em; color: var(--strong); text-transform: uppercase; }
.choice.selected .choice-title { color: var(--bright); }
.choice-sub { font-size: 15px; color: var(--sub); }
.gate .choice { gap: 24px; padding: 18px 20px; }
.gate .choice .n { color: var(--select); }
.gate .choice-title { font-size: 22px; }
.gate .choice-sub { font-size: 16px; }
.choices { display: flex; flex-direction: column; max-width: 640px; }
.reasons { padding: 4px 0 8px 54px; border-bottom: 1px solid var(--rule-4); }
.reasons.narrow { padding-left: 30px; }
.reason {
    display: flex; gap: 16px; align-items: center; width: 100%; min-height: 44px; padding: 0 12px;
    background: transparent; border: 0; text-align: left; cursor: pointer;
}
.reason:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.reason .n { width: 14px; flex: none; font: 500 16px var(--caps); color: var(--label); }
.reason span:last-child { font-size: 17px; color: var(--strong); }

/* Shared pieces ---------------------------------------------------------------------------- */

.cad-main { flex: 1; display: flex; flex-direction: column; }
.cols { flex: 1; display: flex; flex-wrap: wrap; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
h2.caps, h3.caps { font-size: 13px; }
.eyebrow { font: 500 13px var(--caps); letter-spacing: .2em; color: var(--label); }
.field-label { display: block; font: 500 12px var(--caps); letter-spacing: .2em; color: var(--label); }
.field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--edge); }
.field input {
    flex: 1; min-width: 0; min-height: 44px; padding: 0; background: transparent; border: 0;
    outline-offset: 4px; font-size: 18px; color: var(--bright);
}
.field input::-webkit-search-cancel-button { display: none; }
.link-button {
    flex: none; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    font: 500 13px var(--caps); letter-spacing: .18em; color: var(--label);
}
.link-button:hover { color: var(--bright); }
.link-button.text { color: var(--text); }
.facts { display: flex; flex-wrap: wrap; column-gap: 40px; border-bottom: 1px solid var(--rule-2); }
.facts > div { flex: 1 1 300px; display: flex; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.facts dt { width: 130px; flex: none; font: 500 13px var(--caps); letter-spacing: .18em; color: var(--label); }
.facts.short dt { width: 104px; }
.facts.short > div { flex-basis: 280px; }
.facts dd { min-width: 0; }
.facts dd.word { font: 500 15px var(--caps); letter-spacing: .12em; }
.scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th {
    text-align: left; padding: 0 16px 8px 0; font: 500 12px var(--caps); letter-spacing: .18em; color: var(--label);
}
table.grid td { padding: 9px 16px 9px 0; border-top: 1px solid var(--rule-3); vertical-align: top; }
table.grid th:last-child, table.grid td:last-child { padding-right: 0; }
table.grid td.when { font: 500 15px var(--caps); color: var(--sub); white-space: nowrap; }
table.grid td.what { font: 500 15px var(--caps); letter-spacing: .08em; }
table.grid td.by { font: 12px var(--mono); color: var(--sub); }
table.grid tr.open { cursor: pointer; }
table.grid tr.open:hover td { background: rgba(184, 220, 228, .06); }
.empty { padding: 14px 0; border-top: 1px solid var(--rule-4); color: var(--sub); }
.note { font-size: 15px; color: var(--sub); }
.spaced-note { margin-top: 14px; max-width: 640px; }
.lede-small { margin-top: 8px; font-size: 18px; }
.callout { padding-left: 12px; border-left: 1.5px solid var(--caution); }
.callout .caps { letter-spacing: .18em; color: var(--caution); }

/* Citizen -------------------------------------------------------------------------------- */

.list { flex: 1 1 380px; max-width: 500px; min-width: 0; border-right: 1px solid var(--rule); padding: 22px 0 28px; }
.list-head { padding: 0 clamp(16px, 2vw, 24px); }
.list-head h2 { margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 12px; }
.filter {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; cursor: pointer;
    background: transparent; border: 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent;
    font: 500 14px var(--caps); letter-spacing: .14em; color: var(--text);
}
.filter .count { color: var(--label); }
.filter:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.filter[aria-pressed="true"] { background: var(--field); border-color: var(--edge); color: var(--bright); }
.row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 60px;
    padding: 8px clamp(16px, 2vw, 24px); margin-top: -1px; text-align: left; cursor: pointer;
    background: transparent; border: 0; border-top: 1px solid var(--rule-4); border-bottom: 1px solid var(--rule-4);
}
.row:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.row[aria-pressed="true"] { position: relative; background: var(--field); border-color: var(--edge); }
.row .who { display: flex; flex-direction: column; min-width: 0; }
.row .code { font: 13px var(--mono); color: var(--sub); }
.row .name { font-size: 18px; color: var(--strong); }
.row[aria-pressed="true"] .name { color: var(--bright); }
.row .state { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.row .standing { font: 500 14px var(--caps); letter-spacing: .14em; color: var(--sub); }
.row .where { font: 500 12px var(--caps); letter-spacing: .16em; color: var(--label); }
.list .empty { padding: 14px clamp(16px, 2vw, 24px); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px clamp(16px, 2vw, 24px) 0; }
.pager .caps { letter-spacing: .18em; }

.detail { flex: 999 1 560px; min-width: 0; padding: 22px clamp(16px, 3vw, 48px) 40px; }
.record-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin: 8px 0 24px; }
.record-head h2 { font: 500 clamp(32px, 3.2vw, 42px)/1.1 var(--sans); color: var(--bright); }
.record-head .code { margin-top: 4px; font: 15px var(--mono); color: var(--text); }
.standing-block { padding-left: 12px; border-left: 1.5px solid var(--sub); }
.standing-block.danger { border-left-color: var(--restricted); }
.standing-block.caution { border-left-color: var(--caution); }
.standing-block.marked { border-left-color: var(--marked); }
.standing-block .word { font: 500 26px var(--caps); letter-spacing: .1em; }
.flags { margin-top: 20px; }
.flags div:last-child { margin-top: 2px; }
.detail h3 { margin: 32px 0 8px; }
.lines table { min-width: 620px; }

/* Handbook ------------------------------------------------------------------------------- */

.handbook { flex: 1; padding: 28px clamp(16px, 3vw, 48px) 48px; }
.handbook h1 { margin: 8px 0 24px; font: 500 clamp(34px, 3.6vw, 46px)/1 var(--caps); letter-spacing: .06em; color: var(--strong); }
.handbook-cols { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.chapter-nav { flex: 1 1 230px; max-width: 270px; min-width: 0; }
.chapter-nav .field-label { margin-bottom: 8px; }
.chapter-button {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; margin-top: -1px;
    text-align: left; cursor: pointer; background: transparent; border: 0;
    border-top: 1px solid transparent; border-bottom: 1px solid transparent;
}
.chapter-button:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.chapter-button[aria-pressed="true"] { background: var(--field); border-color: var(--edge); }
.chapter-button .n { width: 22px; flex: none; font: 12px var(--mono); color: var(--label); }
.chapter-button[aria-pressed="true"] .n { color: var(--select); }
.chapter-button .label { flex: 1; min-width: 0; font: 500 16px var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.chapter-button[aria-pressed="true"] .label { color: var(--bright); }
.chapter-button .count { flex: none; font: 500 12px var(--caps); color: var(--label); }
.source { margin-top: 28px; padding-left: 12px; border-left: 1.5px solid rgba(184, 220, 228, .55); }
.source p { margin-top: 4px; font-size: 15px; }
.source-facts { margin-top: 16px; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.source-facts > div { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule-2); }
.source-facts dt { width: 82px; flex: none; font: 500 12px var(--caps); letter-spacing: .18em; color: var(--label); }
.chapter-body { flex: 999 1 600px; min-width: 0; max-width: 1000px; }
.chapter-body .field { max-width: 560px; }
.chapter-body .eyebrow { margin: 28px 0 10px; }
.chapter-body h2.title { margin: 0 0 16px; font: 500 30px var(--caps); letter-spacing: .1em; color: var(--strong); }
.blocks { border-bottom: 1px solid var(--rule-2); }
.blocks > div { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 13px 0; border-top: 1px solid var(--rule-2); }
.blocks > div.repeat { border-top-color: rgba(183, 201, 205, .05); }
.blocks dt { flex: 0 1 270px; min-width: 0; font: 500 16px/1.35 var(--caps); letter-spacing: .1em; color: var(--strong); text-transform: uppercase; }
.blocks dt .where { display: block; font-size: 12px; letter-spacing: .18em; color: var(--label); }
.blocks dd { flex: 1 1 360px; min-width: 0; font-size: 16.5px; line-height: 1.55; }
.blocks mark { background: rgba(184, 220, 228, .18); color: var(--bright); }
.steps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; }
.step {
    min-height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer;
    font: 500 14px var(--caps); letter-spacing: .16em; color: var(--text);
}
.step:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }

/* Dispatch ------------------------------------------------------------------------------- */

.requests { flex: 1 1 340px; max-width: 420px; min-width: 0; border-right: 1px solid var(--rule); padding: 22px 0 28px; }
.requests .section-head { padding: 0 clamp(16px, 2vw, 24px) 12px; }
.request {
    display: flex; gap: 16px; width: 100%; padding: 14px clamp(16px, 2vw, 24px); margin-top: -1px; text-align: left; cursor: pointer;
    background: transparent; border: 0; border-top: 1px solid var(--rule-4); border-bottom: 1px solid var(--rule-4); color: var(--text);
}
.request:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.request[aria-pressed="true"] { background: var(--field); border-color: var(--edge); }
.request .n { width: 22px; flex: none; font: 500 16px/1.6 var(--caps); color: var(--label); }
.request .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.request .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.request .title { font: 500 19px var(--caps); letter-spacing: .1em; color: var(--strong); }
.request .age { flex: none; font: 500 15px var(--caps); color: var(--label); }
.request .place { font-size: 15px; }
.request .resp { font: 500 12px var(--caps); letter-spacing: .16em; color: var(--sub); }
.requests .empty { padding: 14px clamp(16px, 2vw, 24px); }
.request-detail { flex: 999 1 480px; min-width: 0; padding: 22px clamp(16px, 3vw, 48px) 36px; }
.request-detail h2.title { margin: 8px 0 4px; font: 500 clamp(32px, 3.4vw, 44px)/1.05 var(--caps); letter-spacing: .06em; color: var(--strong); }
.request-detail .lede { margin-bottom: 24px; font-size: 20px; color: var(--strong); }
.request-detail h3 { margin: 28px 0 8px; }
.answer { display: flex; flex-wrap: wrap; gap: 2px 20px; align-items: baseline; padding: 8px 0 8px 12px; border-left: 1.5px solid var(--rule); }
.answer.accepted { border-left-color: rgba(183, 201, 205, .55); }
.answer.mine { border-left-color: var(--select); }
.answer .unit { font: 13px var(--mono); color: var(--text); }
.answer.mine .unit { color: var(--bright); }
.answer .you { font: 500 12px var(--caps); letter-spacing: .18em; color: var(--select); }
.answer.none { color: var(--sub); }
.squad { flex: 1 1 320px; max-width: 400px; min-width: 0; border-left: 1px solid var(--rule); padding: 22px clamp(16px, 2vw, 24px) 32px; }
.squad h2 { margin: 0 0 10px; }
.squad h2.spaced { margin: 28px 0 8px; }
.roster { border-bottom: 1px solid var(--rule-3); }
.roster li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 10px; border-top: 1px solid var(--rule-3); border-left: 1.5px solid var(--rule); }
.roster li.you { border-left-color: var(--select); }
.roster li.down { border-left-color: var(--restricted); }
.roster .unit { display: flex; flex-direction: column; min-width: 0; }
.roster .d { font: 13px var(--mono); color: var(--text); }
.roster li.you .d { color: var(--bright); }
.roster .place { font-size: 14px; color: var(--sub); }
.roster .status { flex: none; text-align: right; font: 500 13px var(--caps); letter-spacing: .14em; color: var(--text); }
.statuses { display: flex; flex-direction: column; }
.status-button {
    display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; margin-top: -1px;
    text-align: left; cursor: pointer; background: transparent; border: 0; border-top: 1px solid var(--rule-4); border-bottom: 1px solid var(--rule-4);
}
.status-button:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.status-button[aria-pressed="true"] { background: var(--field); border-color: var(--edge); }
.status-button span:first-child { font-size: 17px; color: var(--text); }
.status-button[aria-pressed="true"] span:first-child { color: var(--bright); }
.status-button .hint { font: 500 12px var(--caps); letter-spacing: .18em; color: var(--label); }
.called { padding: 8px 0 8px 12px; border-left: 1.5px solid var(--restricted); font-size: 15px; }
.codes { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule-3); }
.code-row, .code-button {
    display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px;
    border-top: 1px solid var(--rule-3);
}
.code-row { border-left: 1.5px solid var(--strong); }
.code-row.caution { border-left-color: var(--caution); }
.code-row.danger { border-left-color: var(--restricted); }
.code-row span:first-child { font-size: 17px; }
.code-button { width: 100%; text-align: left; cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; }
.code-button:hover { box-shadow: inset 1.5px 0 0 rgba(184, 220, 228, .7); }
.code-button.armed { background: rgba(201, 155, 69, .10); }
.code-button span:first-child { font-size: 17px; color: var(--strong); }
.code-row .hint, .code-button .hint { font: 500 12px var(--caps); letter-spacing: .18em; color: var(--label); }
.code-button.armed .hint { color: var(--caution); }
.target { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.target select {
    flex: 1; min-height: 40px; padding: 0 8px; background: var(--glass); border: 1px solid var(--rule);
    font: 500 14px var(--caps); letter-spacing: .12em; color: var(--text);
}
.alerts { border-top: 1px solid var(--rule); padding: 20px var(--edge-x) 28px; }
.alerts h2 { margin: 0 0 10px; }
.alerts table { min-width: 760px; }
.alerts td.ago { width: 80px; font: 500 15px var(--caps); color: var(--label); }

@media (max-width: 720px) {
    .list, .requests, .squad { max-width: none; border-left: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
    .reasons { padding-left: 24px; }
}

/* Tones win over the colour a piece has at rest. */
body.terminal .danger, body.terminal .restricted { color: var(--restricted); }
body.terminal .caution { color: var(--caution); }
body.terminal .marked { color: var(--marked); }
body.terminal .system { color: var(--select); }
body.terminal .sub { color: var(--sub); }
body.terminal .dim { color: var(--label); }