/* web/styles.css — same warm base as str-tracker, slate-blue accent so the two apps are easy to tell apart.
   Follows the OS light/dark setting. */
:root {
  color-scheme: light;
  --bg:#f6f1e8; --card:#fffaf2; --line:#e7dccb; --fg:#2b2621; --muted:#6f6457;
  --accent:#2f5d9e; --accent-fg:#ffffff; --bad:#a4402c; --good:#1a7d5a; --warn-bg:#fbefd5; --warn-fg:#7a4b00;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --radius:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#1d1a16; --card:#262220; --line:#3a342e; --fg:#f3ede4; --muted:#b5a998;
    --accent:#8fb0ea; --accent-fg:#14161a; --bad:#e08a74; --good:#36a27a; --warn-bg:#3a2f1a; --warn-fg:#f1cf8a;
  }
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,system-ui,sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
h1, h2, h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.01em; }
h2 { font-size:19px; margin:0 0 12px; }
h3 { font-size:16px; margin:16px 0 8px; }
a { color:var(--accent); }

header { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
nav { display:flex; gap:4px; align-items:center; padding:10px 16px; max-width:1100px; margin:0 auto; overflow-x:auto; }
nav .brand { font-family:var(--serif); font-weight:600; font-size:17px; margin-right:10px; white-space:nowrap; }
nav a { padding:6px 12px; border-radius:999px; color:var(--muted); text-decoration:none; white-space:nowrap; }
nav a.active { background:var(--card); color:var(--fg); font-weight:600; box-shadow:0 0 0 1px var(--line); }
#who { font-size:13px; }
@media (max-width:640px) { #who, nav .brand { display:none; } }

main { padding:16px; max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
main > h2 { margin:4px 0 0; font-size:24px; }
main > p, main > h3 { margin:0; }
.spacer { flex:1; } .muted { color:var(--muted); } .error { color:var(--bad); } .good { color:var(--good); } .bad { color:var(--bad); }
.error:empty { display:none; }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hero-num { font-family:var(--serif); font-size:44px; font-weight:600; letter-spacing:-.02em; line-height:1.1;
  margin:4px 0 2px; font-variant-numeric:tabular-nums; }
.people { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:16px; }
.notice { background:var(--warn-bg); color:var(--warn-fg); border-radius:12px; padding:10px 14px; }

.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:14px; }
th { font-weight:500; color:var(--muted); font-size:12px; }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child, td:first-child { text-align:left; white-space:normal; }
tbody tr:last-child td { border-bottom:none; }
tr.total td { font-weight:600; border-top:2px solid var(--line); }
tr.sub td { color:var(--muted); font-size:13px; }
tr.sub td:first-child { padding-left:22px; }
tr.result td { font-weight:600; }
tr.clickable { cursor:pointer; }
tr.clickable:hover td { background:color-mix(in srgb, var(--accent) 6%, transparent); }
tr.off td { color:var(--muted); }
td .tag { margin-left:6px; }

.tag { display:inline-block; font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line);
  color:var(--muted); font-weight:500; vertical-align:1px; white-space:nowrap; }
.tag.strong { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

button { font:inherit; padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:600; }
button.link { border:none; background:none; color:var(--accent); padding:6px 8px; }
button:disabled { opacity:.6; cursor:default; }
input, select, textarea { font:inherit; font-size:16px; padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); width:100%; }
input[type=checkbox] { width:auto; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }

dialog { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--fg);
  padding:0; width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); }
dialog::backdrop { background:rgb(0 0 0 / .35); }
dialog form { padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
dialog form h2 { grid-column:1 / -1; margin:0 0 4px; }
dialog label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
dialog label.wide, dialog .actions, dialog .error, dialog .hint { grid-column:1 / -1; }
dialog label.check { flex-direction:row; align-items:center; gap:8px; color:var(--fg); font-size:15px; }
dialog .field-error { color:var(--bad); font-size:12px; }
dialog .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
@media (max-width:480px) { dialog form { grid-template-columns:1fr; } }

.toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--fg); color:var(--bg);
  padding:10px 16px; border-radius:12px; font-size:14px; box-shadow:0 6px 20px rgb(0 0 0 / .2); z-index:20; max-width:calc(100vw - 32px); }

.signin { width:100%; max-width:360px; margin:15vh auto 0; text-align:center; }
.signin h1 { margin:0 0 4px; font-size:28px; }
.signin form { margin-top:16px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.signin input { width:auto; }
[hidden] { display:none !important; }
@media (max-width:640px) { .hero-num { font-size:38px; } }