/* Upstate Upward dashboard — brand tokens from artifacts/website/index.html (2026-09-16). */
:root {
  --ground:#F4F6F1; --ink:#12211A; --line:#DBE1D5;
  --pine:#12673E; --summit:#C9971C; --base:#B4623A;
  --surface:#FFFFFF; --muted:#4F5E55; --soft:#EDF1EA;
  --font-display:"Hoefler Text","Iowan Old Style",Charter,"Palatino Linotype",Georgia,serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"Cascadia Code",monospace;
  --maxw:1080px; --r:6px; --focus:0 0 0 3px color-mix(in srgb, var(--pine) 45%, transparent);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground:#0C130F; --ink:#EAF0E9; --line:#253328;
  --pine:#38AB6B; --summit:#E7BE4A; --base:#D07E52;
  --surface:#121B15; --muted:#A9B5AC; --soft:#182219;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/1.5 var(--font-body); min-height:100dvh; display:flex; flex-direction:column; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }
a { color:var(--pine); text-underline-offset:2px; }
a.plain { color:inherit; }
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--r); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; background:var(--surface); padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); z-index:10; }
.skip:focus { left:16px; }
.num { font-family:var(--font-mono); font-variant-numeric: tabular-nums; }
.mono { font-family:var(--font-mono); }
.muted { color:var(--muted); }
.small { font-size:.875rem; }
.strong { font-weight:600; }
.inline { display:inline; }

/* header */
.top { border-bottom:1px solid var(--line); background:var(--ground); }
.top-row { display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.mark { width:28px; height:28px; flex:none; }
.wordmark { font-family:var(--font-display); font-size:1.15rem; letter-spacing:.01em; white-space:nowrap; }
.wordmark-lg { font-size:1.6rem; }
.top-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.top-nav a { color:var(--ink); text-decoration:none; padding:10px 8px; min-height:44px; display:inline-flex; align-items:center; }
.who { color:var(--muted); font-size:.875rem; padding:0 4px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:520px) { .who { display:none; } .top-nav a { padding:10px 6px; } .btn-ghost { padding:0 12px; } }
.foot { margin-top:auto; padding:32px 16px; color:var(--muted); font-size:.8125rem; border-top:1px solid var(--line); }

/* buttons + chips */
.btn, .btn-ghost, .chip { font:inherit; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:var(--r); text-decoration:none; }
.btn { background:var(--pine); color:#fff; border:1px solid var(--pine); font-weight:600; }
:root[data-theme="dark"] .btn { color:#0C130F; }
.btn:hover { filter:brightness(1.07); }
.btn-sm { min-height:40px; padding:0 14px; }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { background:var(--soft); }
.btn-ghost.danger { color:var(--base); border-color:color-mix(in srgb, var(--base) 45%, var(--line)); }
.chip { border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.9375rem; }
.chip-on, details.chip-on > summary { background:var(--ink); color:var(--ground); border-color:var(--ink); }
details.custom > summary { list-style:none; }
details.custom > summary::-webkit-details-marker { display:none; }
details.custom { position:relative; }
.custom-form { position:absolute; top:calc(100% + 6px); left:0; z-index:5; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px; display:grid; gap:8px; min-width:240px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.custom-form label { display:grid; gap:4px; font-size:.875rem; }
.range { display:flex; gap:8px; flex-wrap:wrap; }
.range-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:8px 0 20px; }
.range-label { margin:0; }

/* page head */
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:28px 0 8px; }
.eyebrow { margin:0 0 4px; color:var(--muted); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; }
.page-title { margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height:1.1; }
.page-head p { margin:6px 0 0; }
.live { white-space:nowrap; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pine); margin-right:6px; vertical-align:middle; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.switcher select { font:inherit; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); max-width:100%; }

/* sections + cards */
.section-title, .card-title { font-family:var(--font-display); font-weight:400; margin:0 0 12px; font-size:1.25rem; }
.section-title { margin-top:28px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-top:20px; }
.card-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.hero { margin-top:12px; padding:20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.hero-head h2 { font-family:var(--font-display); font-weight:400; margin:0; font-size:1.5rem; }
.hero-head p { margin:2px 0 14px; }
.tiles { display:grid; gap:12px; }
.tiles-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.tiles-5 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.tiles-5 > .tile:last-child { grid-column: 1 / -1; }
@media (min-width:640px) { .tiles-4 { grid-template-columns:repeat(4, minmax(0,1fr)); } .tiles-5 { grid-template-columns:repeat(3, minmax(0,1fr)); } .tiles-5 > .tile:last-child { grid-column:auto; } }
@media (min-width:900px) { .tiles-5 { grid-template-columns:repeat(5, minmax(0,1fr)); } }
.tile { padding:14px 14px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--ground); min-width:0; }
.hero .tile { background:var(--soft); border-color:transparent; }
.tile-label { font-size:.875rem; color:var(--muted); display:flex; flex-direction:column; }
.tile-label .hint { font-size:.75rem; color:var(--muted); opacity:.85; }
.tile-value { font-size:1.75rem; line-height:1.15; margin:6px 0 4px; font-weight:500; overflow-wrap:anywhere; }
.tile-big .tile-value { font-size:2.5rem; }
.tile-delta { display:flex; align-items:center; gap:8px; font-size:.8125rem; flex-wrap:wrap; }
.tile-prev { color:var(--muted); }
.delta { display:inline-flex; align-items:center; gap:2px; padding:2px 6px; border-radius:4px; font-family:var(--font-mono); font-size:.8125rem; }
.delta-good { color:var(--pine); background:color-mix(in srgb, var(--pine) 12%, transparent); }
.delta-bad { color:var(--base); background:color-mix(in srgb, var(--base) 14%, transparent); }
.delta-flat, .delta-new { color:var(--muted); background:var(--soft); }

/* chart */
.chart-wrap { position:relative; height:260px; }
.legend { list-style:none; margin:0; padding:0; display:flex; gap:14px; font-size:.875rem; color:var(--muted); }
.sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.sw-pine { background:var(--pine); } .sw-summit { background:var(--summit); }
.table-toggle { margin-top:10px; }
.table-toggle summary { cursor:pointer; color:var(--muted); font-size:.875rem; min-height:44px; display:flex; align-items:center; }

/* tables */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data { width:100%; border-collapse:collapse; font-size:.9375rem; }
table.data th, table.data td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.data thead th { color:var(--muted); font-weight:500; font-size:.8125rem; }
table.data tbody th { font-weight:500; }
.num-col { text-align:right !important; }
table.admin td.actions { white-space:nowrap; }
table.admin input { font:inherit; min-height:40px; padding:0 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--ground); color:var(--ink); width:150px; }

/* lists */
.grid-4 { display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px) { .grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px) { .grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.list-card { margin-top:20px; }
.list { list-style:none; margin:0; padding:0; }
.list li { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label val" "bar bar"; gap:2px 10px; padding:6px 0; }
.list-label { grid-area:label; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9375rem; }
.list-val { grid-area:val; font-size:.9375rem; }
.list-bar { grid-area:bar; height:4px; background:var(--soft); border-radius:2px; overflow:hidden; }
.list-bar > span { display:block; height:100%; background:var(--pine); border-radius:2px; }

/* upward score */
.score-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.score-head p { margin:0; }
.score-total { font-size:2.25rem; line-height:1; font-weight:500; white-space:nowrap; }
.score-of { color:var(--muted); font-size:.6em; }
.score-cats { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.score-cats li { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label val" "bar bar"; gap:4px 10px; font-size:.9375rem; }
.score-label { grid-area:label; } .score-val { grid-area:val; }
.score-bar { grid-area:bar; height:8px; background:var(--soft); border-radius:4px; overflow:hidden; }
.score-bar > span { display:block; height:100%; background:var(--summit); border-radius:4px; }
@media (min-width:640px) { .score-cats li { grid-template-columns:220px minmax(0,1fr) 72px; grid-template-areas:"label bar val"; align-items:center; } .score-val { text-align:right; } }

/* login */
.login { max-width:380px; margin:8vh auto 0; padding:32px 0; }
.login-mark { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:16px; }
.login-mark .mark { width:36px; height:36px; }
.login-title { font-family:var(--font-display); font-weight:400; text-align:center; margin:0 0 24px; font-size:1.5rem; }
.login-form { display:grid; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.login-form label { font-size:.875rem; color:var(--muted); margin-top:8px; }
.login-form input, .admin-form input, .admin-form select { font:inherit; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--ground); color:var(--ink); width:100%; }
.login-form .btn { margin-top:16px; }
.form-error { color:var(--base); margin:0 0 8px; font-size:.9375rem; }
.flash { background:var(--soft); border:1px solid var(--line); padding:10px 14px; border-radius:var(--r); margin:12px 0 0; }

/* admin */
.admin-add { margin-top:14px; }
.admin-add > summary { list-style:none; width:max-content; }
.admin-add > summary::-webkit-details-marker { display:none; }
.admin-form { display:grid; gap:12px; margin-top:12px; max-width:560px; }
.admin-form label, .custom-form label { display:grid; gap:4px; font-size:.875rem; color:var(--muted); }
.admin-form fieldset { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; }
.admin-form legend { padding:0 6px; color:var(--muted); font-size:.875rem; }
.score-grid { display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:640px) { .score-grid { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.plain-list { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.danger-zone { margin-top:20px; }

@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } * { transition:none !important; } }
@media print { .top-nav, .range-row, .foot { display:none; } .card, .hero { break-inside:avoid; } }