/* Ordinal web admin panel: Cold Civic Minimalism (docs/design/design-bible.md).
   Charcoal, grey and off-white; the vertical rule marks what is current; rows,
   not buttons; desaturated accents that each mean one thing. */

@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 {
    --canvas: #0e1012;
    --surface: rgba(16, 18, 20, .58);
    --text: #e3e6e6;
    --info: #cdd2d3;
    --label: #8e969a;
    --dim: #6c7478;
    --rule: rgba(214, 220, 223, .72);
    --rule-faint: rgba(205, 212, 216, .16);
    --normal: #86a08a;
    --attention: #b99c62;
    --danger: #a8665f;
    --structure: #8795a1;
    --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;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: var(--canvas);
    color: var(--info);
    font: 400 17px/1.45 var(--sans);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--rule-faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--rule); }
[hidden] { display: none !important; }

.label {
    font: 500 13px/1.3 var(--caps);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--label);
    margin: 0 0 8px;
}
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.dim { color: var(--dim); }
.text { color: var(--text); }
.normal { color: var(--normal); }
.attention { color: var(--attention); }
.danger { color: var(--danger); }

/* The vertical rule: 1.5 px, text 12 px to its right, in the block's state. */
.ruled { border-left: 1.5px solid var(--rule); padding-left: 12px; }
.ruled.normal { border-left-color: var(--normal); }
.ruled.attention { border-left-color: var(--attention); }
.ruled.danger { border-left-color: var(--danger); }
.ruled.faint { border-left-color: var(--rule-faint); }
/* The rule carries the state; the text in the block stays neutral. */
.ruled.normal, .ruled.attention, .ruled.danger { color: var(--info); }

/* Layout ------------------------------------------------------------------- */

.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.top {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 32px; border-bottom: 1px solid var(--rule-faint);
}
.brand { font: 500 14px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.brand b { color: var(--text); font-weight: 500; }
.who { display: flex; align-items: baseline; gap: 14px; color: var(--info); }
.who .mono { color: var(--dim); font-size: 13px; }

nav { padding: 28px 0 28px 32px; border-right: 1px solid var(--rule-faint); }
nav button {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; border-left: 1.5px solid transparent;
    padding: 7px 12px; margin: 2px 0;
    font: 500 15px/1.3 var(--caps); letter-spacing: .16em; text-transform: uppercase;
    color: var(--dim); cursor: pointer;
}
nav button:hover { color: var(--info); }
nav button[aria-current="page"] { color: var(--text); border-left-color: var(--rule); }
nav .state { margin-top: 28px; padding: 7px 12px; font-size: 15px; }

main { padding: 28px 40px 80px; max-width: 1180px; min-width: 0; }
section h1 { font: 500 30px/1.1 var(--sans); color: var(--text); margin: 0 0 24px; }
.block { margin: 0 0 34px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 30px 40px; }

.big { font: 500 26px/1.2 var(--sans); color: var(--text); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 0; }
.facts dt { font: 500 13px/1.7 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.facts dd { margin: 0; color: var(--info); min-width: 0; overflow-wrap: anywhere; }

/* Rows instead of buttons: an action is a line of text that takes the rule. */
.rows { display: flex; flex-direction: column; gap: 2px; }
.row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; width: 100%;
    background: none; border: 0; border-left: 1.5px solid var(--rule-faint);
    padding: 8px 12px; text-align: left; cursor: pointer;
    font: 500 17px/1.3 var(--sans); color: var(--text);
}
.row small { font: 400 15px/1.3 var(--sans); color: var(--dim); }
.row:hover, .row:focus-visible { border-left-color: var(--rule); background: var(--surface); outline: none; }
.row.danger:hover, .row.danger:focus-visible { border-left-color: var(--danger); }
.row:disabled { color: var(--dim); cursor: default; border-left-color: transparent; background: none; }
.spaced { margin-top: 22px; }
.spaced-sm { margin-top: 10px; }
.inline-rows { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.inline-rows .row { width: auto; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--label); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule-faint); text-underline-offset: 3px; }
.link:hover { color: var(--text); }

.confirm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 8px 12px; border-left: 1.5px solid var(--attention); background: var(--surface); }
.confirm.danger { border-left-color: var(--danger); }
.confirm p { margin: 0; color: var(--text); flex: 1 1 260px; }

/* Lists ---------------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 500 13px/1.3 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--label); padding: 0 16px 8px 0; }
td { padding: 9px 16px 9px 0; border-top: 1px solid var(--rule-faint); vertical-align: baseline; color: var(--info); }
td.num { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* Forms ---------------------------------------------------------------------- */

input {
    width: 100%; max-width: 420px;
    background: var(--surface); color: var(--text);
    border: 0; border-bottom: 1px solid var(--rule-faint);
    padding: 8px 10px; font: 400 17px/1.3 var(--sans);
}
input:focus { outline: none; border-bottom-color: var(--rule); }
input.mono { font: 400 15px/1.3 var(--mono); }
.field { margin: 0 0 18px; }
.field .hint { color: var(--dim); font-size: 15px; margin-top: 4px; }
.with-action { display: flex; gap: 14px; align-items: baseline; max-width: 560px; }

/* Console -------------------------------------------------------------------- */

.console {
    height: calc(100vh - 330px); min-height: 280px; overflow: auto;
    margin: 0; padding: 12px 14px; background: var(--surface);
    border-left: 1.5px solid var(--rule-faint);
    font: 400 13px/1.55 var(--mono); color: var(--info); white-space: pre-wrap; overflow-wrap: anywhere;
}
.console .warn { color: var(--attention); }
.console .err { color: var(--danger); }
.console .mine { color: var(--text); }
.prompt { display: flex; align-items: center; gap: 10px; margin-top: 10px; border-left: 1.5px solid var(--rule); padding-left: 12px; }
.prompt span { font: 400 16px var(--mono); color: var(--label); }
.prompt input { max-width: none; }
.output { margin: 8px 0 0; padding: 10px 12px; background: var(--surface); font: 400 13px/1.5 var(--mono); white-space: pre-wrap; max-height: 260px; overflow: auto; }

/* Messages ------------------------------------------------------------------- */

.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    max-width: min(640px, calc(100vw - 32px));
    padding: 10px 14px; background: #15181b; color: var(--text);
    border-left: 1.5px solid var(--normal);
}
.toast.danger { border-left-color: var(--danger); }

/* Sign-in and notice pages ------------------------------------------------- */

.notice main, .signin {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    max-width: 560px; margin: 0 auto; padding: 32px 16px;
}
.notice h1, .signin h1 { font: 500 34px/1.15 var(--sans); color: var(--text); margin: 0 0 14px; }
.notice p { margin: 0 0 10px; }
.notice .label { margin-top: 18px; }

/* Narrow screens ------------------------------------------------------------- */

@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .top { padding: 14px 16px; flex-wrap: wrap; }
    nav { display: flex; overflow-x: auto; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--rule-faint); }
    nav button { width: auto; white-space: nowrap; border-left: 0; border-bottom: 1.5px solid transparent; }
    nav button[aria-current="page"] { border-bottom-color: var(--rule); }
    nav .state { display: none; }
    main { padding: 20px 16px 80px; }
    .console { height: 55vh; }
}