/* Mainframe, CITADL's design language, from the vendored tokens.css (copied
 * from Deckard's site; never edit tokens.css by hand). Dark ground, a panel
 * one step lighter, one-pixel hairlines, 2px corners, no shadows or
 * gradients. CITADL orange is only a marker: the selected tab, the primary
 * button, labels, focus. Plex Sans for reading, Plex Mono for numbers and
 * dates, Rajdhani in spaced capitals for headings. */
:root {
  --bg: hsl(0 0% 10%);
  --panel: hsl(0 0% 13%);
  --ink: hsl(0 0% 91%);
  --muted: hsl(0 0% 71%);
  --line: hsl(0 0% 19%);
  --accent: hsl(var(--citadl-accent));
  --warn: hsl(0 84% 72%);
  --ok: hsl(142 50% 55%);
  --r: var(--citadl-radius-control);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--citadl-font-size-body-large)/1.5 var(--citadl-font-sans); }
header { display: flex; gap: var(--citadl-space-section); align-items: center; flex-wrap: wrap; padding: var(--citadl-space-panel) var(--citadl-space-section); border-bottom: var(--citadl-hairline) solid var(--line); background: var(--panel); }
.mark { font-family: var(--citadl-font-mono); font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; font-size: var(--citadl-font-size-body-large); }
nav { display: flex; gap: var(--citadl-space-panel); }
nav a { color: var(--muted); text-decoration: none; padding: var(--citadl-space-tight) 0; border-bottom: 2px solid transparent; font-size: var(--citadl-font-size-label); letter-spacing: var(--citadl-letter-spacing-label); text-transform: uppercase; }
nav a.on { color: var(--ink); border-color: var(--accent); }
#account { margin-left: auto; display: flex; gap: var(--citadl-space-stack); align-items: center; flex-wrap: wrap; }
.who { color: var(--muted); font-family: var(--citadl-font-mono); font-size: var(--citadl-font-size-body); }
body.signed-out nav, body.signed-out #account { display: none; }
main { max-width: 880px; margin: 0 auto; padding: var(--citadl-space-page) 16px; }
h1 { font: 600 var(--citadl-font-size-display)/1.2 var(--citadl-font-display); letter-spacing: var(--citadl-letter-spacing-display); text-transform: uppercase; margin: 0 0 var(--citadl-space-tight); }
h2, h3 { font-family: var(--citadl-font-display); letter-spacing: var(--citadl-letter-spacing-display); text-transform: uppercase; font-weight: 600; }
.sub { color: var(--muted); margin: 0 0 var(--citadl-space-section); }
.card { background: var(--panel); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); padding: var(--citadl-space-panel); margin-bottom: var(--citadl-space-panel); }
.card.login { max-width: 420px; display: grid; gap: var(--citadl-space-cell); }
.row { display: flex; gap: var(--citadl-space-cell); align-items: baseline; flex-wrap: wrap; }
.name { font-weight: 600; color: inherit; text-decoration: none; }
.name:hover { color: var(--accent); }
.why { color: var(--muted); font-size: var(--citadl-font-size-body); }
.money, .when { font-family: var(--citadl-font-mono); font-variant-numeric: tabular-nums; }
.money { margin-left: auto; }
.tag { font-size: var(--citadl-font-size-label); letter-spacing: var(--citadl-letter-spacing-label); text-transform: uppercase; color: var(--accent); }
textarea, input, select { width: 100%; font: inherit; color: inherit; background: var(--bg); border: var(--citadl-hairline) solid var(--line); border-radius: var(--r); padding: var(--citadl-space-cell); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 84px; margin: var(--citadl-space-cell) 0; }
.actions { display: flex; gap: var(--citadl-space-cell); justify-content: flex-end; flex-wrap: wrap; }
.actions select { width: auto; margin-right: auto; }
button, a.button { font: 500 var(--citadl-font-size-label)/1 var(--citadl-font-sans); letter-spacing: var(--citadl-letter-spacing-label); text-transform: uppercase; border: var(--citadl-hairline) solid var(--line); background: transparent; color: var(--ink); border-radius: var(--r); padding: 9px 14px; cursor: pointer; text-decoration: none; transition: border-color var(--citadl-duration-fast); }
button:hover, a.button:hover { border-color: var(--muted); }
button.primary, a.button { background: var(--accent); border-color: var(--accent); color: hsl(0 0% 8%); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: var(--citadl-space-cell) 0; border-top: var(--citadl-hairline) solid var(--line); display: grid; grid-template-columns: 96px 1fr; gap: var(--citadl-space-cell); }
.when { color: var(--muted); font-size: var(--citadl-font-size-body); }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--citadl-space-panel); }
.empty { color: var(--muted); padding: var(--citadl-space-page) 0; text-align: center; }
.failed { color: var(--warn); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel); color: var(--ink); border: var(--citadl-hairline) solid var(--accent); padding: 10px 16px; border-radius: var(--r); display: flex; gap: 12px; align-items: center; }
#toast[hidden] { display: none; }
#toast button { background: transparent; color: inherit; }