/*
services/webapp/static/assets/app.css — the one token set and the handful of rules that
were already byte-for-byte identical across every page before this existed.

G1.9: there was no `.css` file in the repo. Five pages each hand-copied the same `:root`
block, so a palette change was a five-file edit with nothing preventing drift — and
`index.html`/`admin.html`'s `.hint`/`.note`/`.warn`/`.err`/`.ok` rules already *were*
byte-for-byte identical, proof the drift risk was real rather than theoretical.

Scoped deliberately narrow. Button base styles are NOT here: `quiz.html` uses an unstyled
`button` plus explicit `.primary`/`.ghost` classes, while `index.html`/`admin.html` make a
bare `button` accent-colored by default — two real, intentional designs, not copy-paste
drift, and forcing them into one shared rule would visibly break one of them. Same reason
`signup.html`/`quiz.html` keep their own `.hint` overrides after this file loads: the
cascade lets a page's own `<style>` win over what's linked before it, so this is a shared
default, not a mandate.

This file lives in the one directory `/assets` mounts — see the comment above that mount
in `app.py` for why the rest of `static/` stays unmounted.
*/

* { box-sizing: border-box; }

:root {
  --bg: #fbfbfa; --fg: #1a1a18; --muted: #6b6b66; --line: #e3e3df;
  --card: #ffffff; --accent: #1f6f5c; --accent-fg: #ffffff; --accent-soft: #e8f1ee;
  --field: #ffffff; --track: #ebebe7;
  --warn-bg: #fdf6e3; --warn-line: #e8d9a8; --warn-fg: #6b5518;
  --err-bg: #fdf1f0; --err-line: #f0cfcc; --err-fg: #8a2d24;
  --ok-bg: #f0f7f4; --ok-line: #c9e2d8;
  /* A review measured `.danger` against `--err-fg` at about 1.6:1 in dark mode — that
     token is tuned to sit *on* `--err-bg` as text, which in dark mode means light, and a
     light fill under white button text is nearly no contrast at all. `--danger` is its
     own token for exactly that reason: a filled background a light foreground has to
     read against, which needs to stay dark-and-saturated in both themes rather than
     inverting with the rest of the palette. */
  --danger: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a; --fg: #e8e8e4; --muted: #9a9a94; --line: #2c2c32;
    --card: #1d1d22; --accent: #4ea88d; --accent-fg: #10231d; --accent-soft: #17302a;
    --field: #14141a; --track: #26262c;
    --warn-bg: #2a2415; --warn-line: #4a4028; --warn-fg: #e0cd9a;
    --err-bg: #2a1a18; --err-line: #4d2b26; --err-fg: #f0b5ae;
    --ok-bg: #17241f; --ok-line: #2c4239;
    --danger: #c94339;
  }
}

.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }
.note, .warn, .err, .ok {
  border-radius: 8px; padding: 12px 14px; margin-top: 14px; font-size: 14px;
}
.note { background: var(--bg); border: 1px solid var(--line); }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-fg); }
.err  { background: var(--err-bg);  border: 1px solid var(--err-line);  color: var(--err-fg); }
.ok   { background: var(--ok-bg);   border: 1px solid var(--ok-line); }
/* Links inside a message or a key/value row: the browser's default blue is unreadable on dark. */
.ok a, .warn a, .err a, .kv dd a { color: var(--accent); }

/* A real spinner, not a rotated "◐" glyph standing in for one. */
.spin {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A styled stand-in for `window.confirm()` — see `/assets/confirm.js`. */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 1000;
}
.confirm-box {
  background: var(--card); color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px; max-width: 380px; width: 100%;
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
.confirm-box p { margin: 0; }
.confirm-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
}
.confirm-actions button {
  margin: 0; padding: 8px 16px; border-radius: 7px; border: 0;
  font: inherit; font-weight: 600; cursor: pointer;
}
.confirm-actions .cancel { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.confirm-actions .danger { background: var(--danger); color: #fff; }