/* ============================================================
   SkateLog — design system
   Ice-rink palette: frost blues + silver, coral accent.
   Charts use the validated categorical palette (blue → red)
   and the fixed status palette for jump outcomes.
   ============================================================ */

/* ---------- Fonts ----------
   Served from this folder rather than a CDN. The app has to open on rink wifi
   that is not there, and inside the iOS wrapper there is no network origin to
   fetch from at all — a webfont link would simply never resolve and every
   screen would fall back mid-session. Both families are variable, so one file
   per subset covers every weight the design uses. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
/* Inline glyphs carry no intrinsic size; charts always set width/height, so
   this default only ever applies to icons. */
svg:not([width]) { width: 1.2em; height: 1.2em; flex: none; }
[hidden] { display: none !important; }

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;

  --font-display: "Manrope", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --page:        #eaf1f9;
  --page-2:      #dce8f5;
  --surface:     #ffffff;
  --surface-2:   #f4f8fd;
  --surface-3:   #e9f1fa;
  --ink:         #0b1220;
  --ink-2:       #45566c;
  --muted:       #78899e;
  --line:        #e0e9f3;
  --line-strong: #c8d7e7;
  --edge:        rgba(11, 18, 32, 0.08);

  --brand:       #2a78d6;
  --brand-ink:   #1c5cab;
  --brand-wash:  #e8f1fc;
  --accent:      #eb6834;
  --accent-ink:  #bf4a1d;
  --accent-wash: #fdeee7;

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-ink: #006300;

  /* chart roles */
  --c-surface: #ffffff;
  --c-grid:    #e1e7f0;
  --c-axis:    #c3cedd;
  --c-label:   #78899e;
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;
  --s5: #e87ba4;  --s6: #008300;  --s7: #4a3aa7;  --s8: #e34948;

  --shadow-1: 0 1px 2px rgba(13, 33, 58, 0.06), 0 1px 3px rgba(13, 33, 58, 0.05);
  --shadow-2: 0 4px 12px rgba(13, 33, 58, 0.08), 0 1px 3px rgba(13, 33, 58, 0.06);
  --shadow-3: 0 18px 48px rgba(9, 24, 45, 0.18);

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --rail-w: 240px;
  --tap: 48px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:        #080c12;
    --page-2:      #0d141d;
    --surface:     #141c27;
    --surface-2:   #1a2431;
    --surface-3:   #22303f;
    --ink:         #f1f6fc;
    --ink-2:       #b6c5d7;
    --muted:       #8496aa;
    --line:        #24303f;
    --line-strong: #33445a;
    --edge:        rgba(255, 255, 255, 0.10);

    --brand:       #3987e5;
    --brand-ink:   #8dbcf3;
    --brand-wash:  #17273b;
    --accent:      #ff7a4d;
    --accent-ink:  #ffa585;
    --accent-wash: #2c1a13;

    --good-ink:    #0ca30c;

    --c-surface: #141c27;
    --c-grid:    #232f3e;
    --c-axis:    #33445a;
    --c-label:   #8496aa;
    --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
    --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #080c12;
  --page-2:      #0d141d;
  --surface:     #141c27;
  --surface-2:   #1a2431;
  --surface-3:   #22303f;
  --ink:         #f1f6fc;
  --ink-2:       #b6c5d7;
  --muted:       #8496aa;
  --line:        #24303f;
  --line-strong: #33445a;
  --edge:        rgba(255, 255, 255, 0.10);

  --brand:       #3987e5;
  --brand-ink:   #8dbcf3;
  --brand-wash:  #17273b;
  --accent:      #ff7a4d;
  --accent-ink:  #ffa585;
  --accent-wash: #2c1a13;

  --good-ink:    #0ca30c;

  --c-surface: #141c27;
  --c-grid:    #232f3e;
  --c-axis:    #33445a;
  --c-label:   #8496aa;
  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
  --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ---------- Page frame ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--page-2), transparent 62%),
    radial-gradient(760px 420px at 100% 0%, var(--brand-wash), transparent 58%);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
.app {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

/* ---------- Rail (desktop nav) ---------- */
.rail { display: none; }
.rail__brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 18px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.rail__logo, .topbar__logo, .lock__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--brand), #6fb3f5 55%, var(--accent));
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.45);
  position: relative;
}
.rail__logo::after, .topbar__logo::after, .lock__mark::after {
  content: "";
  position: absolute; inset: 0;
  background: center / 66% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v9.5'/%3E%3Cpath d='M8 12.5c2.6 0 4.2 1.3 4.2 3.1S10.6 19 8.6 19H4'/%3E%3Cpath d='M4 21h15a2 2 0 0 0 2-2'/%3E%3C/svg%3E");
}
.rail__nav { display: grid; gap: 4px; padding: 6px 12px; }
.rail__link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.rail__link svg { width: 20px; height: 20px; }
.rail__link:hover { background: var(--surface-2); color: var(--ink); }
.rail__link.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); font-weight: 600; }
.rail__link.is-active svg { color: var(--brand); }
.rail__foot { margin-top: auto; padding: 16px; }

/* ---------- Top bar ---------- */
.main { min-width: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top)) 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--edge);
}
.topbar__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}
.topbar__title { font-size: 20px; line-height: 1.2; }
.topbar__actions { display: flex; gap: 8px; flex: none; }

.iconbtn {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: transform .12s var(--ease), color .18s, background .18s;
}
.iconbtn--sm { width: 40px; height: 40px; }
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn:hover { color: var(--ink); }
.iconbtn:active { transform: scale(.94); }

/* ---------- Bottom tabs (mobile nav) ---------- */
.tabs {
  position: fixed; z-index: 45;
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-2);
}
.tabs__link {
  display: grid; justify-items: center; gap: 3px;
  padding: 8px 2px 7px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--muted);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.tabs__link svg { width: 21px; height: 21px; }
.tabs__link.is-active { color: var(--brand-ink); background: var(--brand-wash); }
.tabs__link:active { transform: scale(.96); }

/* ---------- View shell ---------- */
.view { padding: 16px 16px 24px; max-width: 1180px; margin: 0 auto; }
.view > * + * { margin-top: 16px; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view > * { animation: view-in .34s var(--ease) both; }
.view > *:nth-child(2) { animation-delay: .03s; }
.view > *:nth-child(3) { animation-delay: .06s; }
.view > *:nth-child(4) { animation-delay: .09s; }
.view > *:nth-child(n+5) { animation-delay: .12s; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-head h2 { font-size: 17px; }
.section-head .link { font-size: 13px; font-weight: 600; color: var(--brand-ink); text-decoration: none; }

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px;
}
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__title { font-size: 15px; font-weight: 700; font-family: var(--font-display); }
.card__sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600; font-size: 14.5px;
  box-shadow: var(--shadow-1);
  transition: transform .12s var(--ease), background .18s, box-shadow .18s, border-color .18s;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }
.btn--primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-ink));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent);
}
.btn--primary:hover { background: linear-gradient(180deg, var(--brand), var(--brand)); }
.btn--accent {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
}
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 30%, transparent); background: transparent; box-shadow: none; }
.btn--sm { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 11px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.iconbtn:focus-visible, .btn:focus-visible, .rail__link:focus-visible, .tabs__link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible,
.jumpkey:focus-visible, .segmented button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Chips & segmented ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px; font-weight: 500;
  transition: transform .12s var(--ease), background .16s, color .16s, border-color .16s;
}
.chip:active { transform: scale(.96); }
.chip.is-on {
  background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand-ink); font-weight: 600;
}
.chip__dot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; flex: none; }

.segmented {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 3px; padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: 13px;
  width: 100%;
}
.segmented button {
  min-height: 38px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  transition: background .16s var(--ease), color .16s;
}
.segmented button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.segmented button svg { width: 17px; height: 17px; }
.empty__art svg { width: 100%; height: 100%; }
.chip svg { width: 15px; height: 15px; }
.tag svg { width: 12px; height: 12px; }
.check-box svg { width: 15px; height: 15px; }
.tally__btn svg { width: 20px; height: 20px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field > label, .label {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.input, select.input, textarea.input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .16s, box-shadow .16s;
}
textarea.input { min-height: 84px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); outline: none; }
.input::placeholder { color: var(--muted); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378899e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 36px;
}
.form-grid { display: grid; gap: 12px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.hint { font-size: 12.5px; color: var(--muted); }

/* ---------- Quick log ---------- */
.quick__stage {
  border-radius: var(--r-xl);
  padding: 16px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface) 58%),
    var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-2);
}
.quick__label { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.quick__row + .quick__row { margin-top: 16px; }

.jumpgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jumpkey {
  position: relative;
  display: grid; place-content: center; gap: 2px;
  min-height: 62px;
  padding: 6px 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  transition: transform .12s var(--ease), background .16s, border-color .16s, box-shadow .16s;
}
.jumpkey__abbr { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.jumpkey__name { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.jumpkey:active { transform: scale(.95); }
.jumpkey.is-on {
  background: linear-gradient(180deg, var(--brand), var(--brand-ink));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 30%, transparent);
}
.jumpkey.is-on .jumpkey__name { color: rgba(255,255,255,.82); }

.rotrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rotkey {
  min-height: 52px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: grid; place-content: center; gap: 1px;
  transition: transform .12s var(--ease), background .16s, border-color .16s;
}
.rotkey small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 500; color: var(--muted); }
.rotkey:active { transform: scale(.95); }
.rotkey.is-on { background: var(--surface-3); border-color: var(--brand); color: var(--brand-ink); }
.rotkey.is-on small { color: var(--brand-ink); }
.rotkey[disabled] { opacity: .35; pointer-events: none; }

.resultrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.resultkey {
  display: flex; align-items: center; gap: 9px;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-weight: 600; font-size: 14px;
  text-align: left;
  transition: transform .12s var(--ease), box-shadow .16s, border-color .16s, background .16s;
}
.resultkey svg { width: 20px; height: 20px; flex: none; }
.resultkey:active { transform: scale(.97); }
.resultkey[data-result="clean"]   { color: var(--good-ink);  border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.resultkey[data-result="error"]   { color: var(--ink);       border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.resultkey[data-result="popped"]  { color: var(--ink);       border-color: color-mix(in srgb, var(--serious) 55%, transparent); }
.resultkey[data-result="fall"]    { color: var(--critical);  border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.resultkey[data-result="clean"]:hover  { background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.resultkey[data-result="error"]:hover  { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.resultkey[data-result="popped"]:hover { background: color-mix(in srgb, var(--serious) 12%, var(--surface)); }
.resultkey[data-result="fall"]:hover   { background: color-mix(in srgb, var(--critical) 8%, var(--surface)); }
.resultkey[disabled] { opacity: .4; pointer-events: none; }

.pill-preview {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink);
  font-family: var(--font-display); font-weight: 700;
}

.tally { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.tally__btn {
  width: 52px; height: 52px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 22px; font-weight: 700; display: grid; place-content: center;
}
.tally__btn:active { transform: scale(.94); }
.tally__val { text-align: center; font-family: var(--font-display); font-size: 26px; font-weight: 800; }
.tally__cap { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Stat tiles ---------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--shadow-1);
  display: grid; gap: 4px; align-content: start;
}
.stat__label { font-size: 12px; color: var(--muted); font-weight: 500; }
.stat__value { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat__value sup { font-size: 14px; font-weight: 700; margin-left: 1px; }
.stat__delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.stat__delta--up { color: var(--good-ink); }
.stat__delta--down { color: var(--critical); }
.stat__delta--flat { color: var(--muted); }
.stat__spark { margin-top: 4px; }
.hero {
  font-family: var(--font-display); font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
}

/* ---------- Charts ---------- */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.legend__key { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.legend__key--sq { width: 11px; height: 11px; border-radius: 3px; }
.legend__item[data-dim="1"] { opacity: .38; }
.chart__tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 128px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-2);
  font-size: 12.5px;
  transform: translate(-50%, -112%);
  transition: opacity .12s;
}
.chart__tip h4 { font-size: 12px; margin-bottom: 5px; color: var(--muted); font-family: var(--font-body); font-weight: 600; }
.chart__tip .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart__tip .row b { font-variant-numeric: tabular-nums; }
.chart__tip .k { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.chart-toggle { display: flex; gap: 6px; }
.chart-toggle button {
  border: 1px solid var(--edge); background: var(--surface-2); color: var(--ink-2);
  border-radius: 9px; min-height: 30px; padding: 0 9px; font-size: 12px; font-weight: 600;
}
.chart-toggle button.is-on { background: var(--surface-3); color: var(--ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tbl th:first-child, .tbl td:first-child { text-align: left; font-variant-numeric: normal; }
.tbl thead th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap { overflow-x: auto; }

/* ---------- Meter ---------- */
.meter { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #6fb3f5); transition: width .7s var(--ease); }
.meter__fill--accent { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #ffd0a0)); }

/* ---------- Lists / rows ---------- */
.rows { display: grid; }
.row-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .16s;
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
}
.rows > *:last-child { border-bottom: 0; }
.row-item:hover { background: var(--surface-2); }
.row-item__icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-ink);
}
.row-item__icon--dry { background: var(--accent-wash); color: var(--accent-ink); }
.row-item__icon svg { width: 20px; height: 20px; }
.row-item__body { min-width: 0; flex: 1; }
.row-item__title { font-weight: 600; font-size: 14.5px; }
.row-item__meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.row-item__end { font-size: 13px; color: var(--muted); text-align: right; flex: none; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600;
}
.tag--good { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good-ink); }
.tag--warn { background: color-mix(in srgb, var(--warning) 20%, var(--surface)); color: var(--ink); }
.tag--serious { background: color-mix(in srgb, var(--serious) 18%, var(--surface)); color: var(--ink); }
.tag--crit { background: color-mix(in srgb, var(--critical) 14%, var(--surface)); color: var(--critical); }
.tag svg { width: 12px; height: 12px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 30px 18px; display: grid; gap: 10px; justify-items: center; }
.empty__art { width: 74px; height: 74px; color: var(--brand); opacity: .8; }
.empty h3 { font-size: 16px; }
.empty p { font-size: 13.5px; color: var(--muted); max-width: 38ch; }

/* ---------- Media ---------- */
.media-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.media-thumb {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--edge);
  background: var(--surface-2);
  padding: 0;
  flex: none;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45));
  color: #fff;
}
.media-thumb__play svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.media-thumb__flag { position: absolute; top: 3px; right: 4px; font-size: 11px; }
.media-add {
  width: 68px; height: 68px; border-radius: 12px; flex: none;
  border: 1px dashed var(--line-strong); background: var(--surface-2);
  display: grid; place-items: center; gap: 2px; color: var(--muted);
  font-size: 10px; font-weight: 600;
}
.media-add svg { width: 20px; height: 20px; }
.media-add:active { transform: scale(.95); }

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 9, 16, .88);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; gap: 12px;
  padding: 18px;
  animation: fade .18s var(--ease);
}
.lightbox img, .lightbox video { max-width: min(100%, 900px); max-height: 74vh; border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.lightbox__bar { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.lightbox__cap { color: #dfe8f3; font-size: 13.5px; text-align: center; max-width: 60ch; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.cam { display: grid; gap: 12px; }
.cam__stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: #05080d; aspect-ratio: 4 / 3; }
.cam__stage video { width: 100%; height: 100%; object-fit: cover; }
.cam__rec {
  position: absolute; top: 10px; left: 10px;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(6,10,16,.66); color: #fff; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cam__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--critical); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- Sheet / modal ---------- */
.sheet-root { position: fixed; inset: 0; z-index: 80; display: grid; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(6, 14, 26, .5); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.sheet {
  position: relative;
  align-self: end;
  width: 100%;
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  animation: sheet-up .34s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes sheet-up { from { transform: translateY(14%); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.sheet__head h2 { font-size: 17px; }
.sheet__grip { width: 38px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 8px auto 0; }
.sheet__body { padding: 16px; overflow-y: auto; display: grid; gap: 14px; }
.sheet__foot { padding: 12px 16px 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.sheet__foot .btn { flex: 1; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed; z-index: 95;
  left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; justify-items: center;
  pointer-events: none;
  width: min(92vw, 420px);
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--page);
  box-shadow: var(--shadow-3);
  font-size: 13.5px; font-weight: 500;
  animation: toast-in .28s var(--ease);
  pointer-events: auto;
}
.toast svg { width: 17px; height: 17px; flex: none; }
.toast button { background: none; border: 0; color: inherit; font-weight: 700; text-decoration: underline; padding: 0 0 0 4px; }
.toast--out { animation: toast-out .22s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ---------- Landed-clean celebration ---------- */
.cheer { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; pointer-events: none; }
.cheer__ring {
  width: 116px; height: 116px; border-radius: 999px;
  background: color-mix(in srgb, var(--good) 16%, var(--surface));
  border: 2px solid color-mix(in srgb, var(--good) 55%, transparent);
  display: grid; place-items: center;
  box-shadow: var(--shadow-3);
  animation: cheer-pop .52s var(--ease);
}
.cheer__ring svg { width: 58px; height: 58px; color: var(--good-ink); }
.cheer__ring path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .42s .1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes cheer-pop {
  0% { transform: scale(.6); opacity: 0; }
  55% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.cheer--out { animation: fade .26s var(--ease) reverse forwards; }
.sparkle { position: absolute; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); animation: sparkle .7s var(--ease) forwards; }
@keyframes sparkle { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

/* ---------- Calendar ---------- */
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.cal__day {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--surface-2);
  display: grid; place-content: start center; gap: 3px;
  padding: 5px 2px;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  transition: background .16s, border-color .16s, transform .12s var(--ease);
}
.cal__day:active { transform: scale(.95); }
.cal__day.is-out { opacity: .32; }
.cal__day.is-today { border-color: var(--brand); font-weight: 700; }
.cal__day.is-sel { background: var(--brand-wash); border-color: var(--brand); }
.cal__dots { display: flex; gap: 3px; justify-content: center; }
.cal__dot { width: 6px; height: 6px; border-radius: 999px; }
.cal__dot--ice { background: var(--s1); }
.cal__dot--dry { background: var(--s2); }
.cal__legend { display: flex; gap: 14px; margin-top: 12px; }

/* ---------- Checklist ---------- */
.check-item { display: flex; align-items: center; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-box {
  width: 26px; height: 26px; flex: none;
  border-radius: 9px; border: 2px solid var(--line-strong);
  background: var(--surface);
  display: grid; place-items: center;
  transition: background .18s var(--ease), border-color .18s;
}
.check-box svg { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .22s var(--ease); }
.check-box.is-on { background: var(--good); border-color: var(--good); }
.check-box.is-on svg { opacity: 1; transform: none; }
.check-item__text { flex: 1; font-size: 14.5px; }
.check-item.is-done .check-item__text { color: var(--muted); text-decoration: line-through; }

/* ---------- Timeline ---------- */
.tl { display: grid; gap: 0; }
.tl__item { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; position: relative; }
.tl__item::before {
  content: ""; position: absolute; left: 104px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.tl__item:first-child::before { top: 50%; }
.tl__item:last-child::before { bottom: 50%; }
.tl__date { font-size: 12.5px; color: var(--muted); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl__body { padding-left: 16px; position: relative; }
.tl__body::before {
  content: ""; position: absolute; left: -3.5px; top: 7px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--brand); box-shadow: 0 0 0 2px var(--surface);
}
.tl__title { font-weight: 600; font-size: 14.5px; }
.tl__meta { font-size: 12.5px; color: var(--muted); }

/* ---------- PIN lock ---------- */
.lock {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--page);
  padding: 20px;
}
.lock__card { display: grid; justify-items: center; gap: 10px; width: min(320px, 100%); }
.lock__title { font-size: 24px; }
.lock__sub { color: var(--muted); font-size: 13.5px; }
.pin { display: flex; gap: 12px; margin: 10px 0 6px; }
.pin i { width: 13px; height: 13px; border-radius: 999px; border: 2px solid var(--line-strong); }
.pin i.is-on { background: var(--brand); border-color: var(--brand); }
.pin__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.pin__pad button {
  min-height: 62px; border-radius: var(--r-md);
  border: 1px solid var(--edge); background: var(--surface);
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  box-shadow: var(--shadow-1);
}
.pin__pad button:active { transform: scale(.95); }
.lock__err { color: var(--critical); font-size: 13px; min-height: 18px; }

/* ---------- Misc ---------- */
.stack { display: grid; gap: 10px; }
.rowline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--line); margin: 4px 0; }
.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  font-size: 13px;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.notice--info { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jumpgrid { grid-template-columns: repeat(7, 1fr); }
  .resultrow { grid-template-columns: repeat(4, 1fr); }
  .view { padding: 22px 24px 30px; }
  .sheet {
    align-self: center; justify-self: center;
    width: min(560px, 94vw);
    border-radius: var(--r-xl);
    max-height: 88vh;
  }
  .sheet__grip { display: none; }
}
@media (min-width: 980px) {
  .app { grid-template-columns: var(--rail-w) 1fr; }
  .rail {
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh;
    height: 100dvh;
    border-right: 1px solid var(--edge);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    backdrop-filter: blur(10px);
  }
  .tabs { display: none; }
  .main { padding-bottom: 30px; }
  .topbar__logo, #theme-toggle-m { display: none; }
  .toasts { bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   iPhone
   Rules that only matter on a touch screen, an iOS home-screen
   install, or inside the native wrapper in ios/. Nothing here
   changes the design — it removes the browser behaviours that
   get in the way of logging a jump between reps.
   ============================================================ */

/* Safari zooms the page in whenever a field under 16px takes focus, and does
   not zoom back out afterwards. Bumping fields to 16px on touch keeps the
   layout still instead of disabling zoom, which would fail WCAG 1.4.4. */
@media (pointer: coarse) {
  .input, select.input, textarea.input { font-size: 16px; }
}

/* Removes the double-tap-to-zoom wait on every control, and stops a long
   press raising the callout menu. Rapid tapping is the whole interaction
   model here, so this is the difference between crisp and laggy. */
button, a, label, .chip, .jumpkey, .rotkey, .resultkey, .tabs__link, .rail__link,
.media-thumb, .media-add, .tally__btn, .segmented button, .pin__pad button {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* App chrome should not be selectable: a long press on a tab or a jump key
   should do nothing, not pop a text-selection loupe over the log. */
.rail, .tabs, .topbar, .pin__pad, .segmented, .chip, .jumpkey, .rotkey,
.resultkey, .tally__btn, .sheet__grip, .lightbox__bar {
  -webkit-user-select: none;
  user-select: none;
}

/* A touch tap leaves :hover stuck on the element it hit until you tap
   somewhere else, so a logged jump would stay lit. Pointer-accurate devices
   keep their hover feedback. */
@media (hover: none) {
  .btn:hover { background: var(--surface); }
  .btn--primary:hover { background: linear-gradient(180deg, #4c95e8, var(--brand)); }
  .btn--ghost:hover { background: transparent; }
  .rail__link:hover { background: transparent; color: var(--ink-2); }
  .iconbtn:hover { color: var(--ink-2); }
  .row-item:hover { background: transparent; }
  .resultkey[data-result="clean"]:hover,
  .resultkey[data-result="error"]:hover,
  .resultkey[data-result="popped"]:hover,
  .resultkey[data-result="fall"]:hover { background: var(--surface); }
}

/* Pull-to-refresh would throw away an in-progress session; `contain` stops
   the gesture reaching the browser without affecting normal scrolling. In a
   home-screen app or the wrapper there is no chrome to reveal at all, so the
   rubber band is pure noise. */
html { overscroll-behavior-y: contain; }
html.no-bounce, html.no-bounce body { overscroll-behavior: none; }

/* Viewport units on iOS measure the tallest possible viewport, so a sheet
   sized in vh sits partly under the Safari toolbar. dvh tracks the visible
   height; the vh line stays as the fallback for older engines. */
.sheet { max-height: 92vh; max-height: 92dvh; }
.lightbox img, .lightbox video { max-height: 74vh; max-height: 74dvh; }
@media (min-width: 720px) {
  .sheet { max-height: 88vh; max-height: 88dvh; }
}

/* Keep the lightbox controls clear of the notch and the home indicator. */
.lightbox {
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-left))
           max(18px, calc(10px + env(safe-area-inset-bottom))) max(18px, env(safe-area-inset-right));
}

/* Momentum scrolling inside the app's own scrollers. */
.sheet__body, .tbl-wrap, .chips { -webkit-overflow-scrolling: touch; }

/* Text rendered by iOS at these weights is noticeably heavy without this. */
body { -webkit-font-smoothing: antialiased; }

@media print {
  .rail, .tabs, .topbar__actions { display: none; }
  body::before { display: none; }
  .card { break-inside: avoid; box-shadow: none; }
}