/*
 * THE ADMIN'S ONE STYLESHEET, LIGHT ONLY (owner, 22 Sep 2026: "admin must be
 * light mode"). The site's paper (#F8E2D4, the app's theme/palette.ts light
 * palette) and its type: Instrument Sans for the interface, Commissioner for
 * reading (quotes, notes), Inter with tabular figures for every figure.
 *
 * There is NO dark style anywhere in admin/, no media rule for the system scheme and
 * no toggle: color-scheme is light here and in each page's
 * <meta name="color-scheme" content="light">, so the browser never darkens
 * form controls or scrollbars either. tests/admin-light.test.ts pins it.
 */
:root {
  color-scheme: light;
  --bg: #F8E2D4; --surface: #FAEBE1; --surface2: #F1D7C6; --border: #E7CEBE; --line: #DCC0AE;
  --ink: #141010; --sec: #554842; --ter: #6C5B50;
  --brand: #3D34B0; --brandTint: rgba(61, 52, 176, 0.10);
  --pos: #016A3B; --posTint: rgba(1, 106, 59, 0.12);
  --neg: #BA232F; --negTint: rgba(186, 35, 47, 0.10);
  --warn: #8B5009; --warnTint: rgba(171, 106, 3, 0.16);
  --grey: #6C5B50; --greyTint: rgba(108, 91, 80, 0.10);
  --ui: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --prose: "Commissioner", Georgia, serif;
  --figure: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  margin: 0 auto; background: var(--bg); color: var(--ink);
  font: 400 14.5px/21px var(--ui);
  padding: max(14px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
a { color: var(--brand); text-underline-offset: 2px; }
.fig, .num { font-family: var(--figure); font-variant-numeric: tabular-nums; }

/* The masthead: title, the three pages, who is signed in. */
.mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px;
        padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.mast h1 { font: 700 24px/30px var(--ui); letter-spacing: -0.4px; margin: 0; }
.mast nav { display: flex; gap: 4px; flex-wrap: wrap; }
.mast nav a { font: 600 13px/18px var(--ui); color: var(--sec); text-decoration: none; padding: 5px 10px; border-radius: 999px; }
.mast nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.who { font: 400 12.5px/17px var(--ui); color: var(--ter); }
.who a { color: inherit; }

.hint { font: 400 13px/19px var(--prose); color: var(--ter); }
.label { font: 600 10.5px/14px var(--ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ter); }
.msg { font: 500 13px/19px var(--ui); margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.msg.ok { color: var(--pos); } .msg.err { color: var(--neg); } .msg.info { color: var(--sec); }

button { font: 500 14px/20px var(--ui); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
         background: var(--surface2); color: var(--ink); cursor: pointer; }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
button.primary.armed { background: var(--warn); border-color: var(--warn); }
button.quiet { background: transparent; }
button.danger { background: transparent; color: var(--neg); border-color: var(--negTint); }
button:disabled { opacity: 0.45; cursor: default; }
input, select, textarea { font: 400 15px/21px var(--ui); color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; padding: 0; }

.signin { max-width: 380px; margin: 12vh auto 0; }
.signin .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 16px; }
.signin input { width: 100%; margin: 6px 0 10px; }

/* The hidden attribute always wins over a display rule. */
[hidden] { display: none !important; }