/* SAAM Treasury. The system font stack is deliberate: nothing to download, and
   nothing requested from a font host. Add a font file under static/ if a brand
   face is ever needed - never a link to one. */
:root {
  --ink: #1d2433;
  --muted: #5d6677;
  --line: #d9dee7;
  --ground: #f5f7fa;
  --card: #ffffff;
  --accent: #1f5f8b;
  --danger: #b3261e;
  --success: #1e7d45;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e6e9ef; --muted: #a3abba; --line: #333b4a; --ground: #12161e; --card: #1b212c; --accent: #7fb6de; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); }
/* Links. Without this they fall back to the browser's own #0000EE and the
   purple :visited, both of which are close to unreadable on the dark card -
   and a table of account codes is almost entirely links, so the default
   underline turns every row into a ruled line and buries the figures beside
   it. The accent carries "this is a link" instead; the underline comes back on
   hover and on keyboard focus, where it is the clearest affordance there is.
   :visited is pinned to the same colour on purpose - which accounts somebody
   has already opened is not information this page should be publishing. */
a { color: var(--accent); text-decoration: none; }
a:visited { color: var(--accent); }
a:hover { text-decoration: underline; }
a:focus-visible { text-decoration: underline; outline: 2px solid var(--accent); outline-offset: 2px; }
.bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: 0.7rem 1rem;
       background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; color: var(--ink); text-decoration: none; }
.who { margin-left: auto; color: var(--muted); font-size: 0.9rem; }
.page { max-width: 64rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0; }
.narrow { max-width: 26rem; margin: 2rem auto; }
h1 { font-size: 1.4rem; margin: 0.3rem 0 0.8rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.6rem; }
label { display: block; margin: 0.8rem 0 0.3rem; font-weight: 500; }
input { width: 100%; padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 6px;
        font: inherit; background: var(--ground); color: var(--ink); }
button { margin-top: 1rem; padding: 0.55rem 1.1rem; border: 0; border-radius: 6px; background: var(--accent);
         color: #fff; font: inherit; cursor: pointer; }
button.link { margin: 0; padding: 0; background: none; color: var(--accent); }
form.inline { display: inline; }
.hint { color: var(--muted); font-size: 0.9rem; }
.notice { padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid var(--line); background: var(--card); }
.notice.error { border-color: var(--danger); color: var(--danger); }
.notice.success { border-color: var(--success); color: var(--success); }
.steps li { margin: 0.5rem 0; }
code.secret { display: block; margin: 0.4rem 0; font-size: 1.15rem; letter-spacing: 0.08em; word-break: break-all; }
code.uri { display: block; word-break: break-all; font-size: 0.8rem; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr.muted td { color: var(--muted); }
/* The enrolment QR is drawn into the page itself - never fetched.
   No width here on purpose: the SVG is drawn at a whole number of pixels per
   module, and forcing it to a size that is not a multiple of that (11rem was
   3.3px per module) leaves every module blurred across a pixel boundary.
   Phone cameras give up on it. `crisp-edges` stops the browser softening the
   module edges on top of that. */
.qr { margin: 0.6rem 0; }
.qr svg { height: auto; max-width: 100%; background: #fff; padding: 0.5rem;
          border-radius: 6px; shape-rendering: crispEdges; }
.nav { display: flex; gap: 0.9rem; }
.nav a { color: var(--accent); text-decoration: none; }
.state { font-weight: 600; }
.state.open { color: var(--muted); }
.state.closed { color: var(--success); }
.state.unlocked { color: var(--danger); }
.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { border-top: 2px solid var(--line); font-weight: 600; }
tr.section td { padding-top: 0.9rem; font-weight: 600; }
.picker { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0; }
.picker select { padding: 0.4rem; border: 1px solid var(--line); border-radius: 6px;
                 background: var(--card); color: var(--ink); font: inherit; }
.picker button { margin: 0; }
.warn { color: var(--danger); font-weight: 600; }
/* The confirmation step in front of anything that cannot be undone. `dialog` is
   native, so the browser owns the modality, the backdrop, Esc and the focus
   trap - no library, which is just as well under a self-only script policy. */
dialog.confirm { max-width: 30rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line);
                 border-radius: 8px; background: var(--card); color: var(--ink); }
dialog.confirm::backdrop { background: rgb(0 0 0 / 0.55); }
dialog.confirm h2 { margin-bottom: 0.5rem; }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem; }
.confirm-actions button { margin: 0; }
/* Cancel comes FIRST in the markup so it takes focus when the dialog opens:
   a stray Return on an irreversible action should back out, not go through. */
button.cancel { background: none; color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--danger); }