/* Milo Check-in — one warm light system across every screen.
   Palette and type scale come from
   docs/design_handoff_exercise_analysis_and_adherence/README.md, which
   supersedes the original check-in handoff. The older variable names below are
   kept as aliases so the components written against them inherit the unified
   palette rather than each screen carrying its own near-miss of the same warm
   beige. */

:root {
  /* ---- surfaces ---- */
  --bg: #faf6f0;              /* page ground */
  --surface: #fffdfb;         /* cards */
  --surface-sunken: #f7f1ea;  /* table headers, hover rows */
  --surface-muted: #f2ebe2;   /* tab track, neutral pills */

  /* ---- lines ---- */
  --border: #f0e7db;          /* card borders, gridlines */
  --border-soft: #f4ede5;     /* row dividers inside a card */
  --border-hover: #e8cbb0;    /* card border on hover */

  /* ---- ink ---- */
  --ink: #2c2724;
  --ink-2: #6f635b;
  --ink-3: #8a7d74;
  --ink-4: #a89e94;
  --ink-5: #c0b5aa;

  /* ---- accent ---- */
  --accent: #d9722f;
  --accent-hover: #b8571d;
  --accent-tint: #fbe6d4;
  --accent-tint-border: #f7d9bd;
  --accent-mid: #eab68d;

  /* ---- data marks ---- */
  --neutral-bar: #e6d8c9;
  --volume-bar: #ecdfd0;
  --photo-placeholder: #ece3d9;
  --target-line: #e0b48c;

  /* ---- semantics ---- */
  --positive: #2f7d4f;        /* weight down, PR up, at or above target */
  --negative: #c0563a;
  --on-dark-positive: #8fc7a4;
  --on-dark-negative: #f0a06a;
  --on-dark-label: #a89e94;
  --on-dark-body: #d6cbc1;

  /* ---- aliases kept for the components written before the restructure ---- */
  --chip: var(--surface-muted);
  --panel: var(--surface-sunken);
  --link: var(--accent);
  --link-hover: var(--accent-hover);
  --badge-bg: var(--accent-tint);
  --badge-text: var(--accent-hover);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --muted: var(--ink-3);
  --muted-2: var(--ink-4);
  --muted-3: var(--ink-4);
  --faint: var(--ink-5);
  --thumb-caption: var(--ink-3);
  --border-input: #e4d8c9;    /* one step darker than --border: a control has
                                 to read as an edge you can click */
  --border-tile: var(--border);
  --green: var(--positive);
  --video-bg: var(--ink);
  --video-label: var(--on-dark-body);

  /* ---- geometry ---- */
  --radius-card: 18px;
  --radius-stat: 16px;
  --radius-tile: 14px;
  --radius-small: 10px;
  --radius-pill: 999px;
  /* The only shadow in the system: an active tab or segment. Cards are flat. */
  --shadow-active: 0 1px 3px rgba(44, 39, 36, 0.10);
  --ease: 140ms ease;

  /* Two families, and the contrast between them is load-bearing: all numbers
     and all small-caps labels are mono, all prose is the sans. */
  --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: var(--font-data);
  --type-display: 700 2.125rem/1.1 var(--font-ui);   /* 34px screen title */
  --type-title: 700 1.625rem/1.15 var(--font-ui);    /* 26px section title */
  --type-section: 700 1.1875rem/1.25 var(--font-ui); /* 19px card heading */
  --type-body: 400 1rem/1.55 var(--font-ui);
  --type-name: 600 0.9375rem/1.35 var(--font-ui);
  --type-data: 400 0.9375rem/1.35 var(--font-data);  /* 15px data cell */
  --type-label: 400 0.6875rem/1.2 var(--font-data);  /* 11px micro-label */
}

::selection { background: #fbe0cb; }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--type-body);
  font-kerning: normal;
  font-synthesis: none;
}
/* Numeric information is deliberately set in a tabular face: daily values,
   progress metrics, dates, and training prescriptions scan as one system. */
.num, .stat, .trend-weight, .trend-unit, .trend-delta, .week-iso,
.day-date, .workout-meta, .workout-date, .meal-count, .training-table,
.nav-pill, .latest, .chip, .badge, .rest-label, .section-label, .eyebrow,
.field-label, .pose-pill, .video-label, .lb-caption, .compare-photo figcaption {
  font-variant-numeric: tabular-nums slashed-zero;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
.mono { font-family: var(--mono); }

main { max-width: 1280px; margin: 0 auto; padding: 26px 40px 72px; }

/* ---- top nav ---- */
.topnav {
  display: flex; align-items: center; gap: 24px; justify-content: space-between;
  position: sticky; top: 0; z-index: 9;
  padding: 16px 40px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand-mark, .logo-mark { display: block; object-fit: cover; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; }
.brand-name { font: 700 1.1875rem/1.15 var(--font-ui); letter-spacing: -0.01em; }
.nav-right { display: flex; align-items: center; gap: 20px; font-size: 14px; }
/* History stays active on the week detail and photo compare: those are
   drill-downs of History, not siblings of it. */
.nav-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-muted);
}
.nav-tab {
  padding: 9px 14px; border-radius: var(--radius-pill);
  color: var(--ink-3); font: 600 0.875rem/1 var(--font-ui); white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}
.nav-tab:hover { color: var(--accent); }
.nav-tab.is-active {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-active);
}
.nav-tab.is-active:hover { color: var(--ink); }
.nav-pill {
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  background: var(--chip); padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.nav-right form { display: inline; }
/* ---- NSFW blur ----
   A per-device viewing preference for reading the site in public. It blurs what
   is already on the page and stores nothing about the media itself. */
.nsfw-toggle {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-4); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.nsfw-toggle:hover { background: var(--surface-muted); color: var(--ink-2); }
.nsfw-toggle[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
body.is-nsfw .thumb img,
body.is-nsfw .photo-tile img,
body.is-nsfw .video-tile video,
body.is-nsfw .compare-photo img,
body.is-nsfw .compare-canvas-image,
body.is-nsfw .media-viewer-media img,
body.is-nsfw .media-viewer-media video {
  /* Scaled up because a blur samples past the element's edges and would
     otherwise leave a soft transparent rim inside the tile. */
  filter: blur(var(--nsfw-blur, 18px));
  transform: scale(var(--nsfw-scale, 1.08));
  cursor: pointer;
}
/* Revealing one item overrides the values rather than the declarations. A
   plain `body.is-nsfw .is-revealed { filter: none }` loses on specificity to
   the two-class-plus-two-element selectors above; a custom property set on the
   element itself always beats the inherited one, whatever the selector. */
body.is-nsfw .is-revealed { --nsfw-blur: 0px; --nsfw-scale: 1; }
/* The first click on a blurred item reveals it, so give it a visible focus
   path too rather than making reveal mouse-only. */
body.is-nsfw .media-launcher:focus-visible img,
body.is-nsfw .media-launcher:focus-visible video { outline: 2px solid var(--accent); }
.signout {
  font-family: var(--mono); font-size: 12px; color: var(--muted-3);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.signout:hover { color: var(--link); }

/* ---- login ---- */
.login-wrap { display: flex; justify-content: center; padding: 90px 0 40px; }
.login-card { width: 380px; text-align: center; }
.logo-mark { width: 56px; height: 56px; border-radius: 15px; font-size: 24px; margin: 0 auto 24px; }
.login-title { font: var(--type-display); letter-spacing: -0.02em; margin: 0; }
.login-sub { font: var(--type-body); color: var(--muted); margin: 8px 0 34px; }
.login-form { text-align: left; display: flex; flex-direction: column; gap: 16px; }
.field-label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 6px;
}
.login-form input {
  width: 100%; height: 48px; border: 1px solid var(--border-input); border-radius: 10px;
  background: var(--surface); padding: 0 14px; font: inherit; font-size: 15px; color: var(--text);
}
.btn-primary {
  height: 50px; border: none; border-radius: 10px; background: var(--accent);
  color: #fff; font: 700 1rem/1 var(--font-ui); letter-spacing: -0.01em;
  cursor: pointer; margin-top: 6px;
}
.btn-primary:hover { background: var(--accent-hover); }
.login-foot { font-size: 12px; color: var(--muted-3); margin-top: 24px; font-family: var(--mono); }
.error { color: var(--badge-text); font-size: 14px; margin: 0 0 16px; }

/* ---- history ---- */
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head-stack { align-items: flex-start; flex-direction: column; gap: 6px; }
.page-head h1 { font: var(--type-display); margin: 0; letter-spacing: -0.02em; }
.page-count { font: 400 0.9375rem/1.45 var(--font-ui); color: var(--ink-2); }
.page-sub { font: 400 1rem/1.5 var(--font-ui); color: var(--ink-2); margin: 0; max-width: 72ch; }
.page-span { font-family: var(--mono); font-size: 12px; color: var(--ink-4); margin-top: 6px; }

.trend-card { padding: 26px 28px; margin-bottom: 24px; }
.trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
/* Every card's small-caps mono label. `.eyebrow` is the pre-restructure name,
   kept so older markup picks up the same treatment. */
.kicker, .eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4);
}
.trend-sub { font: 400 1.0625rem/1.4 var(--font-ui); color: var(--ink-2); margin-top: 4px; }
.trend-now { text-align: right; }
.trend-weight { font-family: var(--mono); font-size: 38px; font-weight: 700; line-height: 1; }
.trend-unit { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--ink-3); }
/* Losing weight is the good direction here, so a negative delta reads green. */
.trend-delta { font-family: var(--mono); font-size: 15px; color: var(--negative); margin-top: 6px; }
.trend-delta.down { color: var(--positive); }
/* Shared by every chart's control row: the weight trend's line toggle and the
   photo comparison's view modes are the same control. */
.chart-tools {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  min-height: 34px; margin-bottom: 4px;
  color: var(--ink-4); font: 400 10px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
/* Segmented control: a pill track holding one raised active segment. This box
   shadow is the only one in the system — cards are flat. */
.segmented {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-muted);
}
.segment {
  flex: 1; min-height: 32px; padding: 9px 14px; border: 0;
  border-radius: var(--radius-pill); background: transparent; color: var(--ink-3);
  cursor: pointer; font: 600 0.875rem/1 var(--font-ui); text-align: center;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}
.segment:hover { color: var(--accent); }
.segment.is-active {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-active);
}
.segment.is-active:hover { color: var(--ink); }
.segment:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- charts ----
   The <svg> carries shapes only. Every label is an HTML element absolutely
   positioned over it using percentages derived from the viewBox, which keeps
   the text crisp, in the real font, selectable and translatable. The svg's
   aspect-ratio matches its viewBox so the two spaces stay proportional. */
.plot { position: relative; }
.plot svg { width: 100%; height: auto; display: block; }
.gridline { stroke: var(--border); stroke-width: 1; }
.target-line {
  stroke: var(--target-line); stroke-width: 1.5; stroke-dasharray: 6 5;
}
/* Slightly transparent so the volume bars behind the line still read. */
.chart-area { fill: var(--accent-tint); fill-opacity: .9; }
.chart-line {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart-line-thick { stroke-width: 3; }
.chart-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart-dot-lg { stroke-width: 3; }
.bar { transition: fill var(--ease); }
.bar-positive { fill: var(--accent); }
.bar-accent { fill: var(--accent-mid); }
.bar-negative { fill: var(--neutral-bar); }
.bar-none { fill: var(--neutral-bar); }
.bar-volume { fill: var(--volume-bar); }
.plot a { cursor: pointer; }
.plot a:hover .bar { fill: var(--accent-hover); }
.plot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.axis-x, .axis-y, .bar-value, .dot-label {
  position: absolute; pointer-events: none;
  font-family: var(--mono); white-space: nowrap;
}
.axis-x { font-size: 12px; color: var(--ink-4); transform: translateX(-50%); }
.axis-y {
  left: 0; font-size: 11px; color: var(--ink-5); transform: translateY(-50%);
}
.axis-y-right { left: auto; right: 0; color: #c9bcb0; }
.bar-value {
  font-size: 12px; font-weight: 700; color: var(--ink);
  transform: translate(-50%, -100%);
}
.dot-label {
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  transform: translate(-50%, -100%);
}
.dot-weight { font-size: 12px; font-weight: 700; color: var(--ink); }
.dot-reps { font-size: 10px; color: var(--ink-4); }

.chart-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 8px;
}
.legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
.legend-line { width: 18px; height: 3px; border-radius: 2px; background: var(--accent); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--volume-bar); }
.legend-note { font: 400 0.8125rem/1.3 var(--font-ui); color: var(--ink-4); }
.trend-dot-target { fill: transparent; cursor: pointer; }
.trend-point .chart-dot {
  pointer-events: none;
  transform-box: fill-box; transform-origin: center;
  transition: transform .14s ease, fill .14s ease;
}
.trend-point:hover .chart-dot,
.trend-dot-target:focus-visible + .chart-dot,
.trend-dot-target[aria-expanded="true"] + .chart-dot {
  fill: var(--accent); transform: scale(1.5);
}
.trend-dot-target:focus-visible { outline: none; }
.trend-tooltip {
  position: absolute; z-index: 2; display: grid; gap: 2px;
  min-width: 116px; padding: 9px 11px; border-radius: 8px;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--text); color: var(--surface);
  box-shadow: 0 4px 14px rgba(43, 38, 34, .2);
  pointer-events: none;
}
.trend-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  border: 5px solid transparent; border-top-color: var(--text);
  transform: translateX(-50%);
}
.trend-tooltip.is-below { transform: translate(-50%, 10px); }
.trend-tooltip.is-below::after {
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text);
}
.trend-tooltip[hidden] { display: none; }
.trend-tooltip span { font: 500 10px/1.3 var(--mono); color: var(--faint); }
.trend-tooltip strong { font: 600 15px/1.25 var(--mono); color: var(--surface); }
.trend-tooltip strong span { color: inherit; font: inherit; }

.week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.week-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; gap: 16px; color: var(--text);
  transition: border-color 0.12s, transform 0.12s;
}
.week-card:hover { border-color: var(--border-hover); color: var(--text); }
.thumb {
  width: 74px; height: 92px; flex: none; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-tile); position: relative;
  background-image: repeating-linear-gradient(135deg, #EFE3D4 0 8px, #F6EEE3 8px 16px);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-count {
  position: absolute; left: 6px; bottom: 6px; font-family: var(--mono);
  font-size: 9px; line-height: 1.2; color: var(--thumb-caption);
}
.thumb img + .thumb-count { color: #fff; text-shadow: 0 1px 3px rgba(20, 16, 12, 0.8); }
.week-info { flex: 1; min-width: 0; }
.week-top { display: flex; align-items: center; justify-content: space-between; }
.week-iso { font: 600 1.0625rem/1.2 var(--font-ui); color: var(--accent); }
.latest {
  font-family: var(--mono); font-size: 10px; background: var(--accent);
  color: #fff; padding: 3px 7px; border-radius: 999px;
}
.week-range { font: 700 1.1875rem/1.3 var(--font-ui); margin: 3px 0 14px; }
.week-stats { display: flex; gap: 24px; }
.stat { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.stat-unit { font-size: 12px; font-weight: 400; color: var(--ink-4); margin-left: 2px; }
.stat-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-3);
}
.week-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font-family: var(--mono); font-size: 11px; background: var(--chip);
  color: var(--text-2); padding: 4px 9px; border-radius: 999px;
}
.empty { text-align: center; color: var(--muted); padding: 48px 0; font: var(--type-body); }

/* ---- week detail ---- */
.back { font-family: var(--mono); font-size: 13px; color: var(--ink-4); }
.back:hover { color: var(--link); }
.week-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin: 8px 0 22px; }
.week-title { font: var(--type-display); letter-spacing: -0.02em; }
.week-meta { font: 400 1.0625rem/1.4 var(--font-ui); color: var(--ink-2); }
.fidelity-chip {
  padding: 5px 14px; border-radius: var(--radius-pill); background: var(--accent-tint);
  font: 700 13px/1.2 var(--mono);
}

.day-table { overflow: hidden; padding: 0; }
.day-header, .day-row {
  display: grid;
  grid-template-columns: 92px repeat(5, minmax(0, 1fr)) 84px 96px minmax(0, 2.2fr);
  gap: 8px; padding: 14px 22px;
}
.day-header {
  background: var(--surface-sunken); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
}
.day-row { padding: 15px 22px; border-top: 1px solid var(--border-soft); align-items: center; }
.dow { font: 700 0.875rem/1.25 var(--font-ui); }
.day-date { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.num { font-family: var(--mono); font-size: 15px; }
.num.water { color: var(--text-2); }
.num.sleep { color: var(--text-2); }
.badge {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--badge-bg); color: var(--badge-text); padding: 4px 9px; border-radius: 999px;
}
.rest-label { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.day-notes {
  font: 400 0.8125rem/1.45 var(--font-ui); color: var(--text-2);
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  /* It's a button (opens the day popup) but must read as a table cell. */
  width: 100%; text-align: left; background: none; border: 0; padding: 4px 6px;
  margin: -4px -6px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.day-notes:hover { background: var(--panel); }
.day-notes:hover .note-more { background: var(--accent); color: #fff; }
.no-note { color: var(--faint); }
.comment-badge {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Clamp to one line so every row keeps the same height; the "More" button
   sits after the cut and opens the full text. */
.day-notes-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cardio-prefix { font-family: var(--mono); color: var(--link); }
.cardio-notes { color: var(--muted-2); }
.note-more {
  flex: none; font-family: var(--mono); font-size: 11px;
  color: var(--badge-text); background: var(--badge-bg);
  padding: 3px 8px; border-radius: 6px;
}

/* ---- note popup ---- */
.note-modal {
  border: 1px solid var(--border); border-radius: 14px; padding: 0;
  background: var(--surface); color: var(--text);
  width: min(560px, calc(100vw - 32px));
}
.note-modal::backdrop { background: rgba(43, 38, 34, 0.45); }
/* The dialog takes focus when opened; the ring belongs on the textarea, not
   around the whole panel. */
.note-modal:focus, .note-modal:focus-visible, .media-viewer:focus, .media-viewer:focus-visible {
  outline: none;
}
.note-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.note-modal-day {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
}
.note-close, .lb-close {
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 22px; color: var(--muted); padding: 0 2px;
}
.note-close:hover { color: var(--text); }
.note-modal-body {
  margin: 0; padding: 18px; font: var(--type-body);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---- coach comments ---- */
.comment-list {
  border-top: 1px solid var(--border); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 40vh; overflow-y: auto;
}
.comment {
  background: var(--panel); border-radius: 10px; padding: 10px 12px;
}
.comment-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px;
}
.comment-author { color: var(--link); font-weight: 700; }
.comment-body {
  font: 400 0.875rem/1.55 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere;
}
.comment-empty {
  margin: 0; padding: 14px 18px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.comment-form {
  border-top: 1px solid var(--border); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.comment-form textarea {
  width: 100%; resize: vertical; font: inherit; font-size: 14px; color: var(--text);
  padding: 10px 12px; border: 1px solid var(--border-input); border-radius: 10px;
  background: var(--bg);
}
.comment-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.comment-submit {
  border: 0; cursor: pointer; font-weight: 600; font-size: 13px;
  background: var(--accent); color: #fff; padding: 9px 16px; border-radius: 9px;
}
.comment-submit:hover { background: var(--accent-hover); }

/* ---- unified media viewer ---- */
.media-viewer {
  width: min(1180px, calc(100vw - 48px)); height: min(780px, calc(100vh - 48px));
  padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text);
}
.media-viewer::backdrop { background: rgba(43, 38, 34, .66); }
.media-viewer-head {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.media-viewer-label { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.media-viewer-close { border: 0; padding: 0 2px; cursor: pointer; background: none; color: var(--muted); font-size: 24px; line-height: 1; }
.media-viewer-close:hover { color: var(--text); }
.media-viewer-layout { height: calc(100% - 52px); display: grid; grid-template-columns: minmax(300px, 38%) 1fr; }
.media-viewer-comments { order: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.media-chat-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  color: var(--text); font: var(--type-name);
}
.media-chat-participants {
  color: var(--muted-2); font: 500 10px/1.2 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.media-viewer-comments .comment-list {
  flex: 1; max-height: none; min-height: 0; padding: 16px;
  border-top: 0; gap: 10px; background: #FCF9F5;
}
.media-viewer-comments .comment-empty { flex: 1; }
.media-viewer-comments .media-message {
  align-self: flex-start; width: fit-content; max-width: 88%;
  padding: 9px 12px 10px; border-radius: 4px 14px 14px;
  background: var(--panel);
}
.media-viewer-comments .media-message.is-own {
  align-self: flex-end; border-radius: 14px 4px 14px 14px;
  background: var(--badge-bg);
}
.media-message.is-own .comment-author { color: var(--badge-text); }
.media-message .comment-meta { margin-bottom: 3px; }
.media-viewer-media { order: 2; position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--video-bg); }
.media-viewer-media img, .media-viewer-media video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.media-viewer-media video { width: 100%; }
.media-viewer-nav { position: absolute; inset: auto 16px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
.media-viewer-nav button { pointer-events: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(27, 23, 20, .7); color: #fff; font-size: 27px; line-height: 1; }
.media-viewer-nav button:hover { background: var(--accent); }
.media-viewer-count { padding: 6px 9px; border-radius: 999px; background: rgba(27, 23, 20, .7); color: #fff; font: 500 11px/1 var(--mono); }
.media-comment-body {
  font: 400 0.875rem/1.55 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere;
}
.comment-edited { color: var(--muted); font-style: italic; }
.comment-actions { display: flex; gap: 10px; margin-top: 8px; }
.media-message .comment-actions {
  opacity: 0; transition: opacity .12s ease;
}
.media-message:hover .comment-actions,
.media-message:focus-within .comment-actions { opacity: 1; }
.comment-edit-toggle, .comment-inline-delete button {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.comment-edit-toggle:hover { color: var(--link); }
.comment-inline-delete { display: inline; }
.comment-inline-delete button:hover { color: var(--accent); }
/* Hidden until the message author taps Edit (JS toggles .is-open). */
.comment-edit-form { display: none; margin-top: 10px; }
.comment-edit-form.is-open { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.comment-edit-form textarea, .media-comment-form textarea {
  width: 100%; resize: vertical; font: inherit; font-size: 14px; color: var(--text);
  padding: 10px 12px; border: 1px solid var(--border-input); border-radius: 10px;
  background: var(--bg);
}
.comment-edit-form textarea:focus, .media-comment-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.media-comment-form {
  border-top: 1px solid var(--border); padding: 12px 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end;
}
.media-comment-form textarea { min-height: 42px; max-height: 120px; resize: vertical; }
.media-comment-form .comment-submit { min-height: 42px; padding-inline: 14px; }
@media (hover: none) {
  .media-message .comment-actions { opacity: 1; }
}
/* Top-right action stack. Owner: delete on top, comment underneath. Coach: no
   delete renders, so the comment button falls into the delete's top slot. */
.media-actions {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.media-edit-menu { position: relative; }
.media-edit-menu summary { display: inline-flex; align-items: center; justify-content: center; min-width: 47px; min-height: 32px; list-style: none; border-radius: 999px; padding: 7px 11px; cursor: pointer; background: rgba(27, 23, 20, .7); color: #fff; font: 600 12px var(--mono); }
.media-edit-menu summary::-webkit-details-marker { display: none; }
.media-edit-menu summary svg { width: 15px; height: 15px; }
.media-edit-menu summary:hover, .media-edit-menu[open] summary { background: var(--accent); }
.media-edit-options { position: absolute; top: calc(100% + 5px); right: 0; z-index: 3; min-width: 104px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 20px rgba(43,38,34,.16); }
.media-edit-options button { display: block; width: 100%; border: 0; padding: 9px 11px; cursor: pointer; background: transparent; color: var(--text); font: 600 11px var(--mono); text-align: left; white-space: nowrap; }
.media-edit-options button:hover { background: var(--panel); }
.media-edit-options form { margin: 0; }
.media-edit-options .media-menu-delete { color: #a23a26; }
.media-tag-modal { width: min(390px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.media-tag-modal::backdrop { background: rgba(43, 38, 34, .45); }
.media-tag-form { display: grid; gap: 8px; padding: 18px; }
.media-tag-form .field-label { margin-bottom: 0; }
.media-tag-form select, .media-tag-form input { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg); color: var(--text); font: var(--type-name); }
.media-tag-form select:focus, .media-tag-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.media-tag-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.media-tag-cancel { border: 0; padding: 9px 12px; cursor: pointer; background: transparent; color: var(--text-2); font: var(--type-name); }
.media-comment-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 47px; min-height: 32px; padding: 7px 11px; border-radius: 999px;
  font: 600 12px/1 var(--mono);
  background: rgba(27, 23, 20, 0.6); color: #fff; text-decoration: none;
}
.media-comment-btn:hover { background: rgba(27, 23, 20, 0.8); }
.media-comment-count { color: inherit; font: inherit; }

.section-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4); margin: 32px 0 12px;
}
.card-title { font: var(--type-title); letter-spacing: -0.01em; margin: 0 0 14px; }
.card-sub { font: 400 0.875rem/1.45 var(--font-ui); color: var(--ink-4); margin: 6px 0 16px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile-wrap { position: relative; }
/* Owner-only delete. Deliberately understated and corner-tucked: it destroys
   the only copy, so it must never be the thing your thumb finds by accident. */
.media-delete { margin: 0; }
.media-delete button {
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: #fff; background: rgba(27, 23, 20, 0.55);
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.media-delete .trash-icon { width: 1em; height: 1em; }
.tile-wrap:hover .media-delete button,
.video-tile:hover .media-delete button,
.media-delete button:focus-visible { opacity: 1; }
.media-delete button:hover { background: #B4231C; }
.video-tile { position: relative; }
@media (hover: none) {
  /* No hover on touch — keep it visible or it's unreachable. */
  .media-delete button { opacity: 0.85; }
}
.photo-tile {
  aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; position: relative;
  border: 1px solid var(--border-tile); display: block;
  background-image: repeating-linear-gradient(135deg, #EFE3D4 0 10px, #F6EEE3 10px 20px);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pose-pill {
  position: absolute; left: 12px; bottom: 12px; font-family: var(--mono);
  font-size: 11px; color: #fff; background: var(--link); padding: 4px 8px; border-radius: 6px;
}
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.video-tile { border-radius: 12px; overflow: hidden; background: var(--video-bg); }
.video-launcher { display: block; color: inherit; }
.video-tile video { width: 100%; aspect-ratio: 16 / 10; display: block; }
.video-label {
  font-family: var(--mono); font-size: 12px; color: var(--video-label);
  padding: 10px 12px;
}

/* ---- progress photo comparison ---- */
.compare-controls {
  display: flex; flex-wrap: wrap; align-items: end; gap: 14px;
  margin: 0 0 20px; padding: 20px 24px;
}
.compare-controls .field { display: grid; gap: 6px; }
.compare-controls select {
  min-width: 190px; height: 42px; padding: 0 10px;
  border: 1px solid var(--border-input); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font: var(--type-name);
}
.compare-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-comparison { margin-top: 24px; padding: 20px 24px; }
.chart-tools + [data-compare-panel] { margin-top: 16px; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare-photo { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.compare-photo img { width: 100%; max-height: 75vh; object-fit: contain; display: block; background: var(--surface); }
.compare-photo figcaption { padding: 10px 12px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.compare-layered {
  width: min(100%, 680px); margin: 16px auto 0;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface);
}
.compare-canvas {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #211D19;
}
.compare-canvas-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.compare-overlay { opacity: .5; }
.compare-image-tag {
  position: absolute; z-index: 3; top: 12px; max-width: calc(50% - 20px);
  padding: 6px 9px; border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(33, 29, 25, .72); color: #FFF9F1;
  font: 500 10px/1.2 var(--mono); letter-spacing: .03em;
  backdrop-filter: blur(5px);
}
.compare-image-tag-left { left: 12px; }
.compare-image-tag-right { right: 12px; }
.compare-adjustment { padding: 14px 16px 16px; }
.compare-adjustment-label {
  display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px;
  color: var(--text-2); font: 500 11px/1.3 var(--mono);
}
.compare-adjustment-label output { color: var(--text); }
.compare-range {
  width: 100%; height: 22px; margin: 0; appearance: none;
  background: transparent; cursor: pointer;
}
.compare-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--chip), var(--accent));
}
.compare-range::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--chip), var(--accent));
}
.compare-range::-webkit-slider-thumb {
  width: 20px; height: 20px; margin-top: -8px; appearance: none;
  border: 3px solid var(--surface); border-radius: 50%;
  background: var(--accent); box-shadow: 0 1px 5px rgba(67, 48, 33, .28);
}
.compare-range::-moz-range-thumb {
  width: 14px; height: 14px; border: 3px solid var(--surface); border-radius: 50%;
  background: var(--accent); box-shadow: 0 1px 5px rgba(67, 48, 33, .28);
}
.compare-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.compare-split-canvas { --split-position: 50%; }
.compare-split-image { clip-path: inset(0 0 0 var(--split-position)); }
.compare-divider {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--split-position);
  width: 2px; background: #FFF9F1;
  box-shadow: 0 0 0 1px rgba(33, 29, 25, .28);
  transform: translateX(-1px); pointer-events: none;
}
.compare-divider-handle {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 38px; height: 38px; border: 2px solid #FFF9F1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent); color: #FFF9F1;
  font: 700 16px/1 var(--font-ui); box-shadow: 0 2px 8px rgba(33, 29, 25, .35);
}
.compare-split-range {
  position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.compare-split-canvas:focus-within .compare-divider-handle {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.compare-split-caption {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  padding: 12px 14px; color: var(--muted-2); font: 500 10px/1.35 var(--mono);
}
.compare-split-caption span:nth-child(2) { color: var(--text-2); text-align: center; }
.compare-split-caption span:last-child { text-align: right; }

/* ================= shared card system =================
   Card border, radius 18, no shadow. The only shadow in the system is on an
   active tab or segment. */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 22px 24px;
  transition: border-color var(--ease);
}
a.card { display: block; color: inherit; }
a.card:hover, .card.is-interactive:hover { border-color: var(--border-hover); }

/* ---- stat cards ---- */
.stat-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.stat-card { border-radius: var(--radius-stat); padding: 18px 20px; }
.stat-card .kicker { font-size: 10px; letter-spacing: 0.12em; }
.stat-value {
  font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1.1;
  margin-top: 8px;
}
.stat-value.accent { color: var(--accent); }
.stat-sub { font: 400 0.8125rem/1.4 var(--font-ui); color: var(--ink-4); margin-top: 6px; }

/* ---- a main card beside a fixed side card ---- */
.split-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px; align-items: start;
}
.split-grid-wide { grid-template-columns: minmax(0, 1fr) 320px; }
.side-card { min-width: 0; }

/* ---- selection pills ---- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font: 600 0.875rem/1.2 var(--font-ui); cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.pill:hover { background: var(--surface-muted); color: var(--ink-2); }
.pill.is-selected {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.pill.is-selected:hover { background: var(--accent); color: #fff; }
/* A count rides inside the pill: with 20–40 logged exercises, how much history
   a lift has is what tells you whether it is worth opening. */
.pill-badge { font-family: var(--mono); font-size: 11px; font-weight: 400; color: #b5a99e; }
.pill.is-selected .pill-badge { color: #f8d7bf; }

/* ---- two-level exercise picker ---- */
.picker { display: grid; gap: 14px; padding: 18px 20px; margin-bottom: 20px; }
.picker-block { display: grid; gap: 10px; }
.picker-divided { border-top: 1px solid var(--border-soft); padding-top: 14px; }

/* ---- plan fidelity: where it breaks ---- */
.slot-rows { display: grid; gap: 16px; }
.slot-row-head { display: flex; align-items: baseline; justify-content: space-between; }
.slot-name { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.slot-pct { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.track {
  height: 8px; margin: 7px 0 5px; border-radius: var(--radius-pill);
  background: var(--border); overflow: hidden;
}
.track-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.track-hit { background: var(--accent); }
.track-mid { background: var(--accent-mid); }
.slot-note { font: 400 0.8125rem/1.4 var(--font-ui); color: var(--ink-4); }

/* ---- plan fidelity: day x slot heatmap ---- */
.heatmap-card { margin-top: 20px; }
.heatmap-scroll { overflow-x: auto; margin-top: 14px; }
.heatmap { display: flex; gap: 14px; min-width: max-content; }
.heatmap-gutter {
  flex: none; width: 64px; display: grid; gap: 3px;
  /* Offset down to clear the week headers above the first row of cells. */
  padding-top: 26px;
}
.heat-slot-label {
  height: 22px; display: flex; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}
.heat-week {
  flex: 1; min-width: 112px; display: grid; gap: 3px; color: inherit;
  border-radius: var(--radius-small); padding: 2px;
  transition: background-color var(--ease);
}
.heat-week:hover { background: var(--surface-sunken); color: inherit; }
.heat-head { display: flex; justify-content: space-between; align-items: baseline; height: 24px; }
.heat-week-label { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.heat-week-pct { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.heat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.heat-cell { height: 22px; border-radius: 5px; background: var(--surface-muted); }
.heat-cell.is-hit { background: var(--accent); }
.heat-cell.is-lost { background: var(--negative); }

/* ---- exercise: every-session list ---- */
.session-rows { display: grid; gap: 2px; margin-top: 12px; }
.session-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: 8px; color: inherit;
  transition: background-color var(--ease);
}
a.session-row:hover { background: var(--surface-sunken); color: inherit; }
.session-row.is-static { cursor: default; }
.session-week { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.session-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.session-top { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.session-detail { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.session-delta { font-family: var(--mono); font-size: 12px; font-weight: 700; }

/* ---- A/B compare: panel, dark delta, panel ----
   Shared by the exercise range comparison and the photo comparison so the two
   screens read as one pattern. */
.ab-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  gap: 16px; align-items: stretch; margin-bottom: 20px;
}
.ab-panel { min-width: 0; display: flex; flex-direction: column; }
/* Only the exercise screen puts a pill row above this kicker; on the photo
   screen the kicker is the panel's first element, and a blanket top margin
   there dropped both week labels 16px below the delta panel's heading. */
.pill-row + .ab-kicker { margin-top: 16px; }
/* ---- photo compare summary ----
   One card in place of the A / delta / B band. Each metric prints both weeks
   and the change, which is more information in a third of the height — the
   photos below are this screen's subject, and these numbers are their caption.
   The exercise screen keeps its three panels: those carry charts and lists. */
.compare-summary { margin-bottom: 20px; }
.compare-summary-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.week-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
}
/* B in accent, the same signal the exercise comparison uses for the later block. */
.week-tag.is-b { color: var(--accent); }
.week-arrow { color: var(--ink-5); font-size: 13px; }
.compare-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin: 0;
}
.compare-metric { min-width: 0; }
.metric-pair {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
  margin: 8px 0 0; font-family: var(--mono);
}
.metric-from { font-size: 20px; font-weight: 700; color: var(--ink-3); }
.metric-arrow { font-size: 13px; color: var(--ink-5); }
.metric-to { font-size: 20px; font-weight: 700; color: var(--ink); }
.metric-unit { font-size: 13px; color: var(--ink-4); }
.metric-delta {
  margin: 5px 0 0; font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.ab-hero { font-family: var(--mono); font-size: 40px; font-weight: 700; line-height: 1; margin-top: 8px; }
/* B is the later block, and reading it in accent is what makes the pair
   directional at a glance. */
.ab-hero.accent { color: var(--accent); }
.ab-caption { font: 400 0.875rem/1.4 var(--font-ui); color: var(--ink-2); margin-top: 6px; }
.plot-mini { margin-top: 16px; }
.plot-tall { margin-top: 10px; }

.delta-panel {
  display: flex; flex-direction: column;
  background: var(--ink); border-radius: var(--radius-card);
  padding: 22px 20px; color: var(--bg);
}
.delta-panel .kicker { color: var(--on-dark-label); }
.delta-list { display: grid; gap: 18px; margin-top: 16px; }
.delta-value { font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1.1; }
.delta-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-dark-label); margin-top: 4px;
}
.delta-verdict {
  font: 400 0.8125rem/1.5 var(--font-ui); color: var(--on-dark-body);
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(214, 203, 193, .18);
}
.delta-list + .delta-verdict { margin-top: auto; }
.delta-panel .tone-positive { color: var(--on-dark-positive); }
.delta-panel .tone-negative { color: var(--on-dark-negative); }
/* Exactly zero reads as neutral, not as a win. */
.delta-panel .tone-zero { color: var(--bg); }
.delta-panel .tone-none { color: var(--on-dark-label); }

/* ---- semantic colour, one rule for every percentage in the app ---- */
.tier-positive, .tone-positive { color: var(--positive); }
.tier-accent { color: var(--accent); }
.tier-negative, .tone-negative { color: var(--negative); }
.tier-none, .tone-none, .tone-zero { color: var(--ink-4); }

/* ---- 7-day fidelity strip on a week card ---- */
.strip { display: flex; gap: 5px; margin-top: 14px; }
.strip-seg { flex: 1; height: 6px; border-radius: var(--radius-pill); }
.strip-hit { background: var(--accent); }
.strip-mid { background: var(--accent-mid); }
.strip-none { background: var(--photo-placeholder); }

/* ---- misc ---- */
.day-cell-slots { font-weight: 700; }
.btn {
  align-self: end; min-height: 42px; padding: 0 18px; border: 0;
  border-radius: var(--radius-small); background: var(--accent); color: #fff;
  cursor: pointer; font: 600 0.9375rem/1 var(--font-ui);
  transition: background-color var(--ease);
}
.btn:hover { background: var(--accent-hover); }

/* Focus is never the browser default. */
a:focus-visible, button:focus-visible, select:focus-visible,
[tabindex]:focus-visible, .heat-week:focus-visible, .pill:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- responsive ----
   Below ~1100px every "main + side card" grid collapses to one column, the
   week grid goes single-column, and the A/B compares stack A → delta → B. */
@media (max-width: 1100px) {
  main { padding: 24px 20px 56px; }
  .topnav { flex-wrap: wrap; padding: 14px 20px; gap: 12px; }
  .nav-tabs { order: 3; width: 100%; overflow-x: auto; }
  .split-grid, .split-grid-wide { grid-template-columns: minmax(0, 1fr); }
  .week-grid { grid-template-columns: 1fr; }
  .ab-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .stat-cards { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .compare-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .compare-controls label:first-child { grid-column: 1 / -1; }
  .compare-controls select { width: 100%; min-width: 0; }
  .compare-controls .comment-submit { grid-column: 1 / -1; min-height: 44px; }
  .compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .chart-tools { align-items: stretch; flex-direction: column; gap: 8px; }
  .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
  .segment { padding: 9px 8px; }
  .compare-split-caption { grid-template-columns: 1fr 1fr; }
  .compare-split-caption span:nth-child(2) { display: none; }
}

/* ---- training ---- */
.workout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.workout-session { min-width: 0; padding: 20px 22px; }
.workout-session-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 14px; }
/* Content names are Hanken: exercise and meal names remain readable, while
   the prescribed sets/reps/load beside them stay unambiguously data-like. */
.workout-name { margin: 0; color: var(--text); font: var(--type-section); letter-spacing: -.015em; }
.workout-meta { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.workout-date { flex: none; font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.training-table { display: flex; flex-direction: column; gap: 8px; }
.training-row { display: grid; gap: 4px; }
.training-row-head { display: flex; align-items: baseline; gap: 10px; }
.exercise-name {
  min-width: 0; overflow: hidden; color: var(--ink); font: 600 0.9375rem/1.35 var(--font-ui);
  text-overflow: ellipsis; white-space: nowrap;
}
.exercise-name:hover { color: var(--accent); }
/* Affordances are text, not icons — the app uses no icon set. Kept visible
   rather than revealed on hover: a hover-only affordance is invisible on touch
   and undiscoverable everywhere else. */
.analyse-link {
  flex: none; font-family: var(--mono); font-size: 11px; color: var(--accent);
  opacity: .65; transition: opacity var(--ease);
}
.training-row:hover .analyse-link,
.analyse-link:hover,
.analyse-link:focus-visible { opacity: 1; }
.exercise-delta { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.exercise-sets { display: flex; flex-wrap: wrap; align-items: baseline; color: var(--text-2); font: var(--type-data); }
.exercise-set { white-space: nowrap; }
.exercise-set.is-warmup { color: var(--muted-3); }
.exercise-set-divider { color: var(--faint); padding: 0 5px; }
.exercise-set.is-empty { color: var(--faint); }

/* ---- meals ---- */
.meals-card { padding: 4px 24px; }
.meal-day { padding: 20px 0; }
.meal-day + .meal-day { border-top: 1px solid var(--border-soft); }
.meal-day-head { display: flex; justify-content: space-between; align-items: baseline; }
.meal-date { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.meal-day-right { display: flex; align-items: baseline; gap: 12px; }
.meal-count { font-family: var(--mono); font-size: 13px; color: var(--ink-4); }
.meal-pct { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.meal-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* Status pill. Colour is never the only signal: a hit names its variant,
   a miss carries an em dash. */
.meal-chip {
  display: inline-block; font: 600 0.875rem/1.2 var(--font-ui);
  background: var(--accent-tint); color: var(--accent-hover);
  border: 1px solid var(--accent-tint-border);
  border-radius: var(--radius-pill); padding: 7px 16px; white-space: nowrap;
}
.meal-chip.skip { background: var(--surface); color: #bdb0a5; border: 1px solid var(--border); }
.meal-chip.lost { background: #fdf0ef; color: var(--negative); border-color: #f2c5c0; }
.meal-details { font: 400 0.875rem/1.5 var(--font-ui); color: var(--ink-3); margin-top: 10px; }

/* ---- mobile ---- */
@media (max-width: 720px) {
  main { padding: 18px 20px 26px; }
  .topnav { padding: 12px 20px; }
  .nav-right { gap: 12px; }
  .signout { white-space: nowrap; }
  .brand-name { font-size: 16px; }
  .week-grid { grid-template-columns: 1fr; }
  .day-header { display: none; }
  .day-table { border: none; background: transparent; border-radius: 0; overflow: visible; }
  .day-row {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas: "day day train" "weight sleep steps" "kcal water slots" "notes notes notes";
    gap: 8px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 14px; margin-bottom: 10px;
  }
  .day-cell-day { grid-area: day; display: flex; align-items: baseline; gap: 8px; }
  .day-cell-train { grid-area: train; text-align: right; }
  .day-cell-weight { grid-area: weight; }
  .day-cell-sleep { grid-area: sleep; }
  .day-cell-steps { grid-area: steps; }
  .day-cell-kcal { grid-area: kcal; }
  .day-cell-water { grid-area: water; }
  .day-cell-slots { grid-area: slots; text-align: right; }
  /* Out of the table, a bare column of numbers loses its heading — so each
     value carries its own micro-label on the card. */
  .day-row > .num::before {
    display: block; margin-bottom: 1px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-4);
  }
  .day-cell-weight::before { content: "Weight"; }
  .day-cell-sleep::before { content: "Sleep"; }
  .day-cell-steps::before { content: "Steps"; }
  .day-cell-kcal::before { content: "Kcal"; }
  .day-cell-water::before { content: "Water"; }
  .day-cell-slots::before { content: "Meals"; }
  .day-notes { grid-area: notes; font-size: 12.5px; }
  .photo-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .video-grid { grid-template-columns: 1fr; }
  .media-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .media-viewer-layout {
    height: calc(100dvh - 52px); min-height: 0; display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .media-viewer-media { order: 1; flex: none; min-height: 0; max-height: 62dvh; aspect-ratio: 4 / 3; }
  .media-viewer-media video { max-height: 62dvh; }
  .media-viewer-comments { order: 2; flex: 1; min-height: 0; border-top: 1px solid var(--border); border-right: 0; }
  .media-viewer-comments .comment-list { flex: none; max-height: none; overflow: visible; }
  .media-viewer-comments .comment-empty { flex: none; }
  .media-comment-form { position: sticky; bottom: 0; z-index: 2; background: var(--surface); }
  .media-viewer-nav { inset: auto 10px 10px; }
  .workout-grid { grid-template-columns: 1fr; }
  .meals-card { padding: 4px 16px; }
  .meal-chips { gap: 8px; }
  .meal-chip { padding: 6px 12px; font-size: 0.8125rem; }
  .picker { padding: 16px; }
  .delta-panel { padding: 18px 16px; }
  .ab-hero { font-size: 34px; }
  .compare-metrics { grid-template-columns: 1fr; gap: 14px; }
  .week-head { gap: 10px; }
  .workout-session { padding: 16px; }
  .video-tile video { aspect-ratio: 16 / 9; }
  .login-wrap { padding-top: 60px; }
  .login-card { width: 100%; max-width: 380px; }
  .login-form input { height: 50px; border-radius: 12px; }
  .btn-primary { height: 52px; border-radius: 12px; }
}