/* web/styles.css: "warm cabin" theme; follows the OS light/dark setting (spec §3).
   Series and heat colours were validated with the dataviz palette validator; re-validate before changing them. */
:root {
  color-scheme: light;
  --bg:#f6f1e8; --card:#fffaf2; --line:#e7dccb; --fg:#2b2621; --muted:#7a6e60;
  --accent:#1a7d5a; --bad:#a4402c; --good:#1a7d5a;
  --series-1:#1a7d5a; --series-2:#3a63b8; --series-3:#b8740f; --series-avg:#b9ab96;
  --heat-1:#eef4ef; --heat-2:#cfe3d6; --heat-3:#9fc8b2; --heat-4:#5fa585; --heat-5:#1a7d5a;
  --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:#36a27a; --bad:#e08a74; --good:#36a27a;
    --series-1:#36a27a; --series-2:#6f8fe0; --series-3:#c08520; --series-avg:#6f665b;
    --heat-1:#24302a; --heat-2:#2c4a3c; --heat-3:#33664f; --heat-4:#3a8564; --heat-5:#36a27a;
  }
}
* { 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; }
.spacer { flex:1; } .muted { color:var(--muted); } .error { color:var(--bad); } .good { color:var(--good); } .bad { color:var(--bad); }

.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; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap:10px; margin-top:16px; }
.tile { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.tile .v { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.meter { height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:6px; }
.meter > i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.chartbox { position:relative; height:260px; }

.tablewrap { overflow-x:auto; }
main > .tablewrap { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
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; position:sticky; left:0; background:var(--card); }
tbody tr:last-child td { border-bottom:none; }
tr.year { cursor:pointer; }
tr.year td:first-child { font-weight:600; }
tr.month td { color:var(--muted); font-size:13px; }
tr.month td:first-child { padding-left:22px; }

details.card > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary h2 { margin:0; }
details.card > summary::after { content:"▸"; color:var(--muted); }
details.card[open] > summary::after { content:"▾"; }
details.card[open] > summary { margin-bottom:12px; }

.heat { display:grid; grid-template-columns:40px repeat(12, minmax(0, 1fr)); gap:3px; font-size:11px; font-variant-numeric:tabular-nums; }
.heat .hl { color:var(--muted); text-align:center; }
.heat .hy { color:var(--muted); align-self:center; }
.heat .hc { border-radius:5px; text-align:center; padding:6px 0; cursor:pointer; border:0; font:inherit; color:var(--fg); }
.hc.s0 { background:var(--heat-1); } .hc.s1 { background:var(--heat-2); } .hc.s2 { background:var(--heat-3); }
.hc.s3 { background:var(--heat-4); color:var(--card); } .hc.s4 { background:var(--heat-5); color:var(--card); }
.hc.empty { background:transparent; cursor:default; }
.heat-legend { display:flex; align-items:center; gap:4px; margin-top:10px; font-size:12px; color:var(--muted); }
.heat-legend i { width:18px; height:10px; border-radius:3px; display:inline-block; }

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(--card); font-weight:600; }
button.link { border:none; background:none; color:var(--accent); padding:6px 8px; }
button:disabled { opacity:.6; cursor:default; }
input, select { font:inherit; font-size:16px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--fg); }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--accent); color:var(--card); font-weight:600; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.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; }

[hidden] { display:none !important; }

/* Phone: keep the three tiles on one row; heat cells show colour only (tap for the value — the Full totals table has every number). */
@media (max-width:640px) {
  .hero-num { font-size:38px; }
  .tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  .tile { padding:8px; }
  .tile .v { font-size:16px; }
  .tile .eyebrow { font-size:9.5px; letter-spacing:.05em; }
  .heat { gap:2px; grid-template-columns:34px repeat(12, minmax(0, 1fr)); }
  .heat .hc { font-size:0; padding:9px 0; }
}

/* Empty inline-error slots (bookings/import) take no space until they show a message. */
.error:empty { display:none; }
main > p, main > h3 { margin:0; }