/* =========================================================================
   Workout tracker
   Dark, gym-legible, mobile-first. Designed against a 380px viewport held in
   one hand, in bad lighting, mid-set.

   Since 2026-08-22 this wears OS SYSTEM's skin, so the tracker looks like one
   app whether it is opened on the laptop (built into OS System) or here in a
   phone browser. That means FATHOM's tokens and FATHOM's colour law:

     greys and whites plus --glow. No chromatic accents.

   The old palette drew the app's central distinction — a SUGGESTED weight
   versus a LOGGED one — in blue versus orange. That distinction is still the
   whole point of the app, so it did not go away; it is now carried by weight,
   italics and the glow ring instead of by hue. Anything that reintroduces a
   colour accent here breaks the match with the laptop app.

   The one sanctioned chromatic pixel is --error, used where a plan's flag says
   stop and read this.

   There is no exercise, weight or schedule information in this file, and there
   must never be. All of that lives in /plans/*.md — which, since the same date,
   are served out of OS System's own config/workout-plans so both copies of the
   tracker read one file.
   ========================================================================= */

/* ---------- fonts -------------------------------------------------------
   Self-hosted, copied from OS System's renderer/assets/fonts. The app still
   makes no external request and still works offline; it simply carries its own
   two faces now instead of hoping the OS ships something condensed. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/roboto-condensed-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/roboto-condensed-latin-500-normal.woff2') format('woff2');
  font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */

:root {
  /* depth — FATHOM's pure-black floor, so everything above it lifts */
  --void: #000000;
  --abyss: #030408;
  --current: #0a0e16;

  --bg: #030408;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-2: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.09);
  --edge: rgba(255, 255, 255, 0.14);
  --spec: rgba(255, 255, 255, 0.30);

  --ink: #edf2f7;
  --muted: #8a98a8;
  --faint: #55606e;

  --glow: rgba(200, 225, 255, 0.55);
  --error: #ff3b47;

  /* The old accent tokens are kept as NAMES so nothing downstream breaks, but
     every one of them now resolves to the same cool white light. If you find
     yourself wanting to give one of these a hue again, read the header. */
  --accent: rgba(200, 225, 255, 0.85);
  --blue: rgba(200, 225, 255, 0.55);
  --green: rgba(150, 225, 180, 0.85);
  --amber: rgba(255, 190, 120, 0.75);

  --accent-rgb: 200, 225, 255;
  --blue-rgb: 200, 225, 255;
  --green-rgb: 150, 225, 180;
  --amber-rgb: 255, 190, 120;

  /* type — Inter throughout, the way FATHOM does it. Its headings are not a
     condensed display face; they are Inter, uppercase, widely letterspaced. */
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --t-xs: 0.6875rem;   /* 11 */
  --t-sm: 0.8125rem;   /* 13 */
  --t-md: 0.9375rem;   /* 15 — base */
  --t-lg: 1.125rem;    /* 18 */
  --t-xl: 1.375rem;    /* 22 */
  --t-2xl: 1.75rem;    /* 28 */
  --t-3xl: 2.25rem;    /* 36 */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;

  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;

  --tap: 44px;
  --bar: 58px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 140ms;
  --med: 220ms;

  color-scheme: dark;
}

/* ---------- reset ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

code, pre { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: var(--s-2);
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--accent); color: #1a0d05; padding: 0 var(--s-3);
  border-radius: var(--r-1); font-weight: 700; z-index: 100;
}
.skip:focus { left: var(--s-2); }

/* numbers stack in columns all over this app */
.tile-value, .winput, .numbox, .loglist-value, .effort-step, .chart text,
.dayhead-meta, .weekhead-meta, .daycard-date, .chip { font-variant-numeric: tabular-nums; }

/* ---------- shell ------------------------------------------------------- */

.app {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom) + var(--s-5));
}

.boot {
  padding: var(--s-6) var(--s-4);
  color: var(--muted);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.tb-main { min-width: 0; flex: 1; }

.tb-eyebrow {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.tb-title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planpick, .picker {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 0 var(--s-2);
  min-height: var(--tap);
  max-width: 46%;
  font-size: var(--t-sm);
  color: var(--ink);
}

.offline-note {
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  color: var(--amber);
  background: rgba(var(--amber-rgb), 0.08);
  border-bottom: 1px solid var(--line);
}

.main { padding: var(--s-4); }
.main:focus { outline: none; }

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 560px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  min-height: var(--bar);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 140ms var(--ease);
}
.tab.is-active {
  color: var(--accent);
  box-shadow: inset 0 2px 0 0 var(--accent);
}

/* ---------- cards and banners ------------------------------------------ */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card-tag {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.card-note {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-top: var(--s-2);
}

.card-note code {
  font-size: 0.9em;
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 5px;
}

.banner {
  border-radius: var(--r-2);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.banner-notice {
  background: rgba(var(--blue-rgb), 0.08);
  border: 1px solid rgba(var(--blue-rgb), 0.28);
  color: var(--ink);
}
.banner-warn {
  background: rgba(var(--amber-rgb), 0.08);
  border: 1px solid rgba(var(--amber-rgb), 0.3);
  color: var(--ink);
}
.banner-warn ul { margin-top: var(--s-1); padding-left: var(--s-4); list-style: disc; }
.banner-warn li { margin-top: var(--s-1); color: var(--muted); }

/* ---------- Today ------------------------------------------------------- */

.dayhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.dayhead-date {
  flex: 1 1 100%;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.dayhead-meta {
  font-size: var(--t-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
}

.progress-chip {
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.progress-chip.is-live { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }

.card-rest { text-align: left; }
.rest-title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
}
.rest-body { color: var(--muted); margin-top: var(--s-1); }
.rest-blurb { color: var(--muted); margin-top: var(--s-2); font-size: var(--t-sm); }
.rest-next { margin-top: var(--s-3); font-size: var(--t-sm); }
.rest-next strong { color: var(--ink); font-family: var(--font-display); font-size: var(--t-md); }

.card-empty .empty-title {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
}
.card-empty .empty-body { color: var(--muted); margin-top: var(--s-2); font-size: var(--t-sm); }
.card-empty .btn { margin-top: var(--s-3); }

.empty-note {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.5;
  padding: var(--s-2) 0;
}

/* ---------- cardio card ------------------------------------------------- */

.protocol {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.2;
}

.coach {
  color: var(--muted);
  font-size: var(--t-sm);
  margin-top: var(--s-1);
}

.cardio-fields {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-3);
}

.field-label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.effort {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.effort-step {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.effort-step[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: var(--accent);
  color: var(--ink);
}

.numbox {
  width: 96px;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: var(--panel-2);
  border: 2px solid var(--line);
  border-radius: var(--r-1);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  text-align: right;
}
.numbox:not(:placeholder-shown) { border-color: var(--accent); color: var(--ink); }

/* ---------- exercise rows ---------------------------------------------- */

.ex-list { margin-top: var(--s-2); }

.ex {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.ex:first-child { border-top: 0; }

.tick {
  width: var(--tap);
  height: var(--tap);
  border: 2px solid var(--line);
  border-radius: var(--r-2);
  background: transparent;
  display: grid;
  place-items: center;
  color: transparent;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.tick svg { width: 22px; height: 22px; }
.tick[aria-pressed="true"] {
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.14);
  color: var(--green);
}

.ex-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.ex-name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.15;
}
.ex-note { font-size: var(--t-xs); color: var(--muted); }
.ex-rx { font-size: var(--t-sm); color: var(--muted); }

.ex.is-done .ex-name { color: var(--muted); }

/* ---------- THE WEIGHT BOX ---------------------------------------------
   Suggested reads as provisional. Logged reads as fact. The change between
   them is the one moment in this app worth animating.
   ---------------------------------------------------------------------- */

.wcell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  width: 92px;
}

.wbox {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  width: 100%;
  height: 48px;
  padding: 0 var(--s-2) 0 var(--s-2);
  border: 2px solid var(--line);
  border-radius: var(--r-2);
  background: transparent;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}

.winput {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: color 200ms var(--ease);
}
.winput::placeholder { color: var(--muted); opacity: 0.55; font-weight: 500; }
.winput:focus { outline: none; }
.wbox:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

.wunit {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: lowercase;
}

/* provisional */
.wbox[data-state="suggested"] {
  border-color: rgba(var(--blue-rgb), 0.32);
  background: rgba(var(--blue-rgb), 0.06);
}
.wbox[data-state="suggested"] .winput {
  color: var(--blue);
  font-style: italic;
  font-weight: 500;
  opacity: 0.9;
}

/* fact */
.wbox[data-state="logged"] {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10);
}
.wbox[data-state="logged"] .winput {
  color: var(--ink);
  font-style: normal;
  font-weight: 800;
  opacity: 1;
}

.wbox[data-state="empty"] { border-color: var(--line); }
.wbox[data-state="empty"] .winput { color: var(--ink); font-weight: 700; }

.wstatus {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  font-size: var(--t-xs);
  line-height: 1;
}

.wtag-suggested { color: var(--blue); font-style: italic; opacity: 0.8; }
.wtag-logged {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Big touch target, no extra row height: padding out, margin back in. */
.wrevert {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 17px var(--s-2);
  margin: -17px calc(var(--s-2) * -1);
}
.wrevert:hover { color: var(--ink); }

@keyframes pop {
  0% { transform: scale(1); }
  38% { transform: scale(1.055); }
  100% { transform: scale(1); }
}
.pop { animation: pop 280ms var(--ease); }

/* ---------- flags ------------------------------------------------------- */

.card-flag.is-warned { border-color: rgba(var(--amber-rgb), 0.45); }

.flag-prompt {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
}

.yesno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.yn {
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.yn[aria-pressed="true"] { background: rgba(var(--ink-rgb, 230, 237, 243), 0.06); border-color: var(--muted); color: var(--ink); }
.yesno .yn:last-child[aria-pressed="true"] {
  background: rgba(var(--amber-rgb), 0.16);
  border-color: var(--amber);
  color: var(--ink);
}

.flag-warn {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-1);
  background: rgba(var(--amber-rgb), 0.1);
  border-left: 3px solid var(--amber);
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* ---------- session complete ------------------------------------------- */

.complete {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 2px solid var(--line);
  border-radius: var(--r-2);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}
.complete svg { width: 20px; height: 20px; }
.complete.is-done {
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.14);
  color: var(--green);
}

/* ---------- Week -------------------------------------------------------- */

.weekhead {
  display: grid;
  grid-template-columns: var(--tap) 1fr var(--tap);
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.weekhead-mid { text-align: center; min-width: 0; }

.weekhead-title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.1;
}

.weekhead-meta { font-size: var(--t-sm); color: var(--muted); }

.weeknav {
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--t-xl);
  line-height: 1;
}
.weeknav:disabled { opacity: 0.3; cursor: default; }

.btn-jump { width: 100%; margin-bottom: var(--s-3); }

.week-note {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.daycards { display: grid; gap: var(--s-2); }

.daycard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.daycard.is-today { border-color: rgba(var(--accent-rgb), 0.5); }
.daycard.is-complete { border-color: rgba(var(--green-rgb), 0.35); }

.daycard-summary {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  min-height: 56px;
  list-style: none;
  cursor: pointer;
}
.daycard-summary::-webkit-details-marker { display: none; }
.daycard-summary::marker { content: ''; }

.daycard-day { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.daycard-weekday {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.daycard-date { font-size: var(--t-xs); color: var(--muted); }
.daycard-today {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.daycard-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.daycard-block {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.daycard-cardio {
  font-size: var(--t-xs);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.daycard-rest { font-size: var(--t-sm); color: var(--muted); }

.daycard-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.chip {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.chip-done { color: var(--green); border-color: rgba(var(--green-rgb), 0.45); }
.chip-live { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); }

.daycard-body { padding: 0 var(--s-3) var(--s-3); border-top: 1px solid var(--line); }
.daycard-body .session { padding-top: var(--s-3); }
.daycard-body .card { background: var(--panel-2); }
.daycard-restbody { padding-top: var(--s-3); color: var(--muted); font-size: var(--t-sm); }

/* ---------- Progress ---------------------------------------------------- */

.viewhead { margin-bottom: var(--s-4); }
.viewhead-title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.1;
}
.viewhead-meta { font-size: var(--t-sm); color: var(--muted); }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-value {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.tile-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.25;
}

.chart-wrap { margin-top: var(--s-3); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-family: var(--font-body); font-size: 9px; }
.chart .axis-y { text-anchor: end; }
.chart .axis-x { text-anchor: middle; }
.chart .series-suggested {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  opacity: 0.7;
}
.chart .series-logged {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .dot-logged { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.chart .bar { fill: var(--accent); opacity: 0.85; }

.chart-axis-label {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: var(--s-2);
}
.swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.swatch-accent { background: var(--accent); }
.swatch-blue { background: var(--blue); opacity: 0.75; }
.chart-legend .swatch + .swatch { margin-left: var(--s-2); }

.loglist { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.loglist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.loglist-date { color: var(--muted); }
.loglist-value { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: var(--accent); }

.flagrow { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.flagrow:first-of-type { border-top: 0; padding-top: var(--s-1); }
.flagrow-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.flagrow-name { font-size: var(--t-md); }
.flagrow-count {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.flagrow-count.is-hot { color: var(--amber); }
.flagrow-dates { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-1); }
.flagrow-pattern {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--amber);
  background: rgba(var(--amber-rgb), 0.08);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--t-sm);
}

.data-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.data-actions .btn-danger { grid-column: 1 / -1; }
.data-status { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); min-height: 1.2em; }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a0d05; font-weight: 700; }
.btn-quiet { background: var(--panel-2); color: var(--ink); }
.btn-danger { background: transparent; border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }

/* ---------- dialog ------------------------------------------------------ */

.dialog {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--panel);
  color: var(--ink);
  padding: var(--s-4);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog-title { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; }
.dialog-body { margin-top: var(--s-2); display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); }
.dialog-body p { line-height: 1.5; }
.dialog-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-4); flex-wrap: wrap; }
.dialog-actions .btn { flex: 1 1 auto; }

/* ---------- fatal ------------------------------------------------------- */

.fatal {
  padding: var(--s-6) var(--s-4);
  max-width: 560px;
  margin: 0 auto;
}
.fatal-kicker {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.fatal.is-calm .fatal-kicker { color: var(--muted); }
.fatal-title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.15;
  margin-top: var(--s-1);
}
.fatal-where {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  overflow-x: auto;
}
.fatal-line { margin-top: var(--s-3); color: var(--ink); line-height: 1.55; }
.fatal-hint { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-sm); line-height: 1.55; white-space: pre-wrap; }
.fatal-code {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  overflow-x: auto;
  white-space: pre;
}
.fatal .btn { margin-top: var(--s-4); }

.card-error { border-color: rgba(var(--accent-rgb), 0.5); }

/* ---------- narrow phones ----------------------------------------------- */

@media (max-width: 390px) {
  .main { padding: var(--s-3); }
  .card { padding: var(--s-3); }
  .ex { gap: var(--s-2); }
  .wcell { width: 86px; }
  .dayhead-date { font-size: var(--t-xl); }
  .daycard-summary { grid-template-columns: 78px minmax(0, 1fr) auto; gap: var(--s-2); padding: var(--s-3) var(--s-2); }
  .tile-value { font-size: var(--t-2xl); }
  .effort { gap: 5px; }
}

/* ---------- motion ------------------------------------------------------ */

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

/* =========================================================================
   THE FATHOM SKIN
   =========================================================================
   Everything above this line is the tracker's original layout, which was good
   and is untouched. This section is the surface treatment that makes the phone
   copy read as the same app as the OS System page on the laptop:

     · glass rather than flat panels — a translucent white wash over black,
       with a blurred backdrop and a specular top edge
     · headings in Inter, uppercase, widely letterspaced, never a display face
     · pills instead of rectangles for anything you press
     · light instead of colour: state is shown by a glow ring, not by a hue

   Layout, spacing and tap targets are deliberately NOT changed. This is a phone
   app used mid-set in bad lighting; 44px targets and a thumb-reachable tab bar
   are why it works, and a laptop's mouse-sized affordances would ruin it.
   ========================================================================= */

body {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(30, 48, 74, 0.35) 0%, transparent 60%),
    var(--void);
  background-attachment: fixed;
}

/* ---------- glass ---------- */

.card,
.topbar,
.tabbar,
.tile,
.daycard,
.dialog {
  background: var(--panel);
  border-color: var(--line);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--spec);
}

.topbar {
  background: rgba(6, 9, 15, 0.72);
  border-bottom: 1px solid var(--line);
}

.tabbar {
  background: rgba(6, 9, 15, 0.82);
  border-top: 1px solid var(--line);
}

/* ---------- type ---------- */

.tb-title,
.card-title,
.rest-title,
.empty-title,
.weekhead-title,
.viewhead-title,
.dialog-title,
.fatal-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tb-title { font-size: var(--t-md); }
.card-title,
.weekhead-title,
.viewhead-title { font-size: var(--t-sm); }
.fatal-title,
.dialog-title { font-size: var(--t-md); letter-spacing: 0.1em; }

.tb-eyebrow,
.card-tag,
.field-label,
.tile-label,
.chart-axis-label,
.flagrow-count,
.chip {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.dayhead-date { font-size: var(--t-xl); font-weight: 500; letter-spacing: 0; text-transform: none; }
.dayhead-meta, .weekhead-meta { color: var(--muted); }
.card-note, .coach, .ex-note, .rest-blurb, .empty-note { color: var(--faint); }

/* ---------- pills ---------- */

.btn,
.yn,
.wrevert,
.btn-jump,
.picker,
.planpick {
  border-radius: 999px;
}

.btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--edge);
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 24px;
  transition: color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { color: var(--ink); box-shadow: 0 0 18px -4px var(--glow); }

/* The primary button was a solid orange slab. Light, not paint. */
.btn-primary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(200, 225, 255, 0.42);
  color: var(--ink);
  box-shadow: 0 0 20px -6px var(--glow);
}
.btn-danger { color: var(--muted); border-color: var(--edge); }
.btn-danger:hover { color: var(--error); border-color: rgba(255, 59, 71, 0.5); box-shadow: 0 0 18px -6px rgba(255, 59, 71, 0.6); }

/* ---------- tabs ---------- */

.tab {
  color: var(--faint);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tab.is-active {
  color: var(--ink);
  box-shadow: inset 0 1px 0 0 rgba(200, 225, 255, 0.55);
  text-shadow: 0 0 14px var(--glow);
}

/* ---------- the tick ----------
   Kept as a 44px target with a check inside: this is the control used with a
   thumb, mid-set. Only its finish changes. */

.tick {
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
}
.tick[aria-pressed="true"] {
  border-color: rgba(200, 225, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  box-shadow: 0 0 16px -5px var(--glow);
}

/* ---------- effort ---------- */

.effort-step {
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: var(--muted);
  background: transparent;
}
.effort-step[aria-pressed="true"] {
  background: rgba(150, 215, 255, 0.20);
  border-color: rgba(150, 215, 255, 0.65);
  color: var(--ink);
  box-shadow: 0 0 14px -4px var(--glow);
}

.numbox {
  border-radius: var(--r-1);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
}
.numbox:focus { outline: none; border-color: rgba(200, 225, 255, 0.5); box-shadow: 0 0 16px -6px var(--glow); }

/* ---------- THE WEIGHT BOX ----------
   The app's whole idea, restated without hue. suggested = dim and italic and
   saved nowhere; logged = bright, heavier, and ringed in light. If you can no
   longer tell those two apart at a glance, the restyle has failed. */

.wbox {
  border-width: 1px;
  border-color: var(--line);
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, 0.03);
}

.wbox[data-state="suggested"] {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.wbox[data-state="suggested"] .winput {
  color: var(--faint);
  font-style: italic;
  font-weight: 400;
}

.wbox[data-state="logged"] {
  border-color: rgba(200, 225, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 18px -5px var(--glow);
}
.wbox[data-state="logged"] .winput {
  color: var(--ink);
  font-weight: 500;
  font-style: normal;
}

.wbox:focus-within { border-color: rgba(200, 225, 255, 0.6); box-shadow: 0 0 20px -5px var(--glow); }
.wunit { color: var(--faint); }

.wtag-suggested, .wtag-logged {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wtag-suggested { color: var(--faint); }
.wtag-logged { color: var(--muted); }
.wrevert { color: var(--faint); text-decoration: underline; padding: 0; border: none; background: none; }
.wrevert:hover { color: var(--muted); }

/* The commit "pop" was an orange flash. A breath of light instead. */
.pop { animation: fathom-pop 420ms var(--ease); }
@keyframes fathom-pop {
  0%   { box-shadow: 0 0 0 0 rgba(200, 225, 255, 0.45); }
  100% { box-shadow: 0 0 18px -5px var(--glow); }
}

/* ---------- flags: the one place colour is allowed ---------- */

.yn {
  color: var(--faint);
  border: 1px solid var(--edge);
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.yn[aria-pressed="true"] {
  color: var(--ink);
  border-color: rgba(200, 225, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 16px -6px var(--glow);
}
.card-flag.is-warned { border-color: rgba(255, 59, 71, 0.32); }
.flag-warn {
  color: var(--muted);
  border-left: 2px solid var(--error);
  padding-left: var(--s-3);
  background: none;
}

/* ---------- session complete ---------- */

.complete {
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.complete.is-done {
  color: var(--ink);
  background: rgba(150, 225, 180, 0.14);
  border-color: rgba(150, 225, 180, 0.4);
}

/* ---------- week ---------- */

.daycard { border-radius: var(--r-2); }
.daycard.is-today { border-color: rgba(200, 225, 255, 0.34); }
.daycard.is-complete { background: rgba(150, 225, 180, 0.05); }
.daycard-today {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid rgba(200, 225, 255, 0.32);
  border-radius: 999px;
  padding: 1px 7px;
}
.chip { border: 1px solid var(--line); border-radius: 999px; }
.chip-done { color: var(--ink); background: rgba(150, 225, 180, 0.14); border-color: rgba(150, 225, 180, 0.4); }
.chip-live { color: var(--muted); border-color: rgba(255, 255, 255, 0.2); }
.progress-chip { color: var(--faint); border-radius: 999px; }
.progress-chip.is-live { color: var(--muted); }

.weeknav {
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--muted);
}
.weeknav:hover:not(:disabled) { color: var(--ink); border-color: rgba(255, 255, 255, 0.4); }

/* ---------- charts ----------
   Dashed hairline = the plan's target. Solid glowing line = what was logged.
   Identical to the laptop app, on purpose: the two charts are the same chart. */

.chart .grid { stroke: rgba(255, 255, 255, 0.07); }
.chart .axis { fill: var(--faint); }
.chart .series-suggested { stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart .series-logged { stroke: rgba(200, 225, 255, 0.85); stroke-width: 2; }
.chart .dot-logged { fill: var(--ink); stroke: rgba(0, 0, 0, 0.5); stroke-width: 1; }
.chart .bar { fill: rgba(150, 215, 255, 0.34); }
.swatch-accent { background: rgba(200, 225, 255, 0.85); }
.swatch-blue { background: rgba(255, 255, 255, 0.32); }

.tile-value { font-weight: 500; }

/* ---------- banners, dialogs, fatal ---------- */

.banner {
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  color: var(--muted);
}
.banner-warn { border-left-color: rgba(255, 190, 120, 0.55); }
.banner-notice { border-left-color: rgba(255, 255, 255, 0.18); }

.dialog { border-radius: var(--r-3); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); }

.fatal-kicker {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.fatal-code {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--muted);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* The plan picker and any select: dark surface, or the OS paints it white. */
.planpick, .picker, select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--edge);
  color: var(--muted);
}
.planpick option, .picker option, select option { background: var(--current); color: var(--ink); }