/* Shared by index.html (the app) and stats.html.
   Direction (impeccable "Operate" + taste redesign audit): a working app first; the club's world on
   the fjord lends palette, density and one signature move: crowds read like a tide table.
   Shell: a fjord-blue band holds the status and room switch. Ground: sea mist, greys tinted blue.
   Type: the platform sans (product UI), fixed scale ~1.2. Colour jobs: shell, accent (data), quiet, busy.
   One left edge: everything outside a list is indented by --inset to line up with row text. */
:root {
  color-scheme: light;
  --shell: #0f3d4c;            /* fjord band */
  --shell-ink: #f2f8f9;
  --shell-ink-2: rgba(242, 248, 249, .74);
  --shell-fill: rgba(255, 255, 255, .14);
  --ground: #edf2f3;           /* sea mist */
  --group: #ffffff;
  --label: #10232a;
  --label-2: #56676d;
  --label-3: #93a1a6;
  --separator: #dbe3e5;
  --fill: #e3eaec;
  --accent: #127386;           /* water: expected crowd, controls */
  --accent-fill: rgba(18, 115, 134, .15);
  --quiet: #1d7a43;
  --quiet-fill: rgba(29, 122, 67, .12);
  --busy: #b8371f;
  --busy-fill: rgba(184, 55, 31, .1);
  --closed: #d3dcde;
  --press: rgba(16, 35, 42, .05);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px;
  --inset: 16px;
  --radius: 14px;
  --t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-b: 17px; --t-l: 20px; --t-xl: 24px; --t-xxl: 30px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --shell: #0c2f3a; --shell-ink: #eaf4f6; --shell-ink-2: rgba(234, 244, 246, .7); --shell-fill: rgba(255, 255, 255, .1);
    --ground: #0a171c; --group: #12232a; --label: #e6eff1; --label-2: #9cb0b6; --label-3: #627a81; --separator: #1f363e; --fill: #1b3139;
    --accent: #5cb8c9; --accent-fill: rgba(92, 184, 201, .2); --quiet: #4fcf83; --quiet-fill: rgba(79, 207, 131, .14);
    --busy: #f07a5f; --busy-fill: rgba(240, 122, 95, .14); --closed: #1f363e; --press: rgba(230, 239, 241, .06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --shell: #0c2f3a; --shell-ink: #eaf4f6; --shell-ink-2: rgba(234, 244, 246, .7); --shell-fill: rgba(255, 255, 255, .1);
  --ground: #0a171c; --group: #12232a; --label: #e6eff1; --label-2: #9cb0b6; --label-3: #627a81; --separator: #1f363e; --fill: #1b3139;
  --accent: #5cb8c9; --accent-fill: rgba(92, 184, 201, .2); --quiet: #4fcf83; --quiet-fill: rgba(79, 207, 131, .14);
  --busy: #f07a5f; --busy-fill: rgba(240, 122, 95, .14); --closed: #1f363e; --press: rgba(230, 239, 241, .06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--label-3) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--label); font: var(--t-b)/1.4 var(--font); -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px); caret-color: var(--accent); }
::selection { background: var(--accent-fill); color: var(--label); }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
svg text { fill: var(--label-2); font: var(--t-xs) var(--font); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  button, .row, .tide-row { transition: background-color .18s ease-out, color .18s ease-out, transform .12s ease-out; }
}

/* ---------- shell band ---------- */
.shell { background: var(--shell); color: var(--shell-ink); padding-top: env(safe-area-inset-top, 0px); }
.shell-in { max-width: 560px; margin: 0 auto; padding: var(--sp4) var(--sp4) var(--sp5); display: grid; gap: var(--sp5); }
.shell-in.wide { max-width: 760px; }
.shell-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); padding-inline: var(--inset); }
.app-name { margin: 0; font-size: var(--t-m); font-weight: 600; color: var(--shell-ink-2); }
.app-name a, .shell a { color: var(--shell-ink); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--shell-fill); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--shell-ink-2); padding: 8px 12px; border-radius: 8px; font-size: var(--t-m); font-weight: 500; cursor: pointer; min-height: 36px; }
.seg button:hover { color: var(--shell-ink); }
.seg button:active { transform: scale(.98); }
.seg button[aria-pressed="true"] { background: var(--shell-ink); color: var(--shell); font-weight: 600; }

.status { display: grid; gap: var(--sp1); padding-inline: var(--inset); }
.status h1 { margin: 0 0 var(--sp1); font-size: var(--t-xxl); line-height: 1.15; font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
.status p { margin: 0; color: var(--shell-ink-2); text-wrap: pretty; }
.status p b { color: var(--shell-ink); font-weight: 600; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 600; padding: 3px 9px; border-radius: 6px; width: max-content; margin-bottom: var(--sp1); }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state.quiet { color: #8ff0b4; background: rgba(143, 240, 180, .14); }
.state.normal { color: var(--shell-ink); background: var(--shell-fill); }
.state.busy { color: #ffb4a3; background: rgba(255, 180, 163, .16); }
.warn { display: flex; gap: var(--sp2); align-items: flex-start; margin-top: var(--sp2); padding: var(--sp3); border-radius: 10px; background: rgba(255, 180, 163, .14); font-size: var(--t-m); color: var(--shell-ink-2); }
.warn svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #ffb4a3; }
.warn > div { flex: 1; min-width: 0; }
.warn b { color: var(--shell-ink); font-weight: 600; }

/* ---------- page column ---------- */
main { max-width: 560px; margin: 0 auto; padding-inline: var(--sp4); padding-block: var(--sp5) var(--sp7);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp6); }
main.wide { max-width: 760px; }
main > *, section > * { min-width: 0; }
section { display: grid; gap: var(--sp2); }
.h-title { margin: 0; padding-inline: var(--inset); font-size: var(--t-l); line-height: 1.25; font-weight: 700; text-wrap: balance; }
.note { margin: 0; padding-inline: var(--inset); font-size: var(--t-s); line-height: 1.45; color: var(--label-2); text-wrap: pretty; }

/* ---------- inset grouped list ---------- */
.list { background: var(--group); border-radius: var(--radius); overflow: hidden; }
.row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; align-items: center; gap: var(--sp3);
  padding: var(--sp3) var(--inset); min-height: 58px; }
.row + .row::before, .tide-row + .tide-row::before, .kv + .kv::before { content: ""; position: absolute; top: 0; left: var(--inset); right: 0; border-top: 1px solid var(--separator); }
.row .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.row .mid { display: grid; gap: 6px; }
.row .n { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; font-weight: 500; }
.row .n small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--label-2); }
.row .sub { font-size: var(--t-s); line-height: 1.2; color: var(--label-2); }
.row .tag { font-size: var(--t-s); line-height: 1.2; font-weight: 600; color: var(--quiet); }
.bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.row.best { background: var(--quiet-fill); }
.row.best .t, .row.best .n { color: var(--quiet); }
.row.best .bar i { background: var(--quiet); }
.row.closed .t, .row.closed .n { color: var(--label-3); }
.row.closed .bar i { background: var(--label-3); }

/* ---------- tide table (this week) ---------- */
.tide { background: var(--group); border-radius: var(--radius); overflow: hidden; }
.tide-head, .tide-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) 92px; gap: var(--sp3); align-items: baseline; padding: 0 var(--inset); }
.tide-head { padding-block: var(--sp3) var(--sp2); font-size: var(--t-xs); color: var(--label-2); font-weight: 600; border-bottom: 1px solid var(--separator); }
.tide-row { position: relative; padding-block: var(--sp3); min-height: 52px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.tide-row:hover { background: var(--press); }
.tide-row:active { transform: scale(.995); }
.tide-row[aria-current="true"] { background: var(--accent-fill); }
.tide-row .d { font-weight: 600; }
.tide-row .q { display: flex; flex-wrap: wrap; gap: 2px var(--sp3); color: var(--quiet); font-weight: 600; font-variant-numeric: tabular-nums; }
.tide-row .q span { white-space: nowrap; }
.tide-row .q em { font-style: normal; font-weight: 400; color: var(--label-2); font-size: var(--t-s); }
.tide-row .b { text-align: right; color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tide-row .b b { color: var(--busy); font-weight: 600; }
.tide-row .none { color: var(--label-3); font-weight: 400; }

/* ---------- day tabs ---------- */
.tabs { display: flex; gap: var(--sp5); overflow-x: auto; scrollbar-width: none; padding-inline: var(--inset); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 0; background: none; padding: var(--sp2) 0; font-size: var(--t-m); color: var(--label-2); cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button:hover { color: var(--label); }
.tabs button[aria-pressed="true"] { color: var(--label); font-weight: 600; border-bottom-color: var(--accent); }

/* ---------- panels ---------- */
.panel { background: var(--group); border-radius: var(--radius); padding: var(--sp4); display: grid; gap: var(--sp3); }
.panel > * { min-width: 0; }
.info { font-size: var(--t-m); color: var(--label-2); min-height: 42px; text-wrap: pretty; }
.info b { color: var(--label); font-weight: 600; }
.key { display: flex; flex-wrap: wrap; gap: var(--sp1) var(--sp4); font-size: var(--t-s); color: var(--label-2); }
.key i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* key/value rows (stats) */
.kv { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp4); padding: var(--sp3) var(--inset); min-height: 50px; }
.kv span { color: var(--label-2); min-width: 0; text-wrap: pretty; }
.kv b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- loading / error ---------- */
.skel { border-radius: 6px; background: var(--fill); }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel 1.4s ease-in-out infinite; }
  @keyframes skel { 50% { opacity: .55; } }
}
.error { padding: var(--sp4) var(--inset); color: var(--label-2); }
.error b { color: var(--label); }

footer { display: grid; gap: var(--sp3); justify-items: center; font-size: var(--t-s); color: var(--label-2); text-align: center; padding-inline: var(--inset); }
#install { width: 100%; border: 0; background: var(--accent); color: var(--group); font-weight: 600; padding: 14px; border-radius: var(--radius); cursor: pointer; }
#install:active { transform: scale(.98); }