/* Design language — BUILD_SPEC §2. Fraunces (headings), Inter (body),
   IBM Plex Mono (numbers). paper #EEF1F4, ink #14171C, red #DD3B2C,
   sage #2C7A57, amber #BC7A12. Mobile-first, big tap targets. */
:root {
  --paper: #eef1f4;
  --ink: #14171c;
  --ink-soft: #3a4049;
  --red: #dd3b2c;
  --good: #1a9e5f;
  --sage: #2c7a57;
  --amber: #bc7a12;
  --blue: #1666d6;
  --card: #fff;
  --line: #dce2e8;
  --line-soft: #e8ecf0;
  --muted: #697079;
  --radius: 14px;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --body: "Inter", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; }

.disclaimer {
  background: var(--ink); color: var(--paper);
  font-size: 0.72rem; line-height: 1.3; text-align: center;
  padding: 0.5rem 1rem; position: sticky; top: 0; z-index: 20;
}
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }

.view { max-width: 560px; margin: 0 auto; padding: 1rem 0.9rem; }
/* Clear the fixed two-row bottom nav (+ the phone's home-indicator safe area) so
   the last card is never hidden behind it or trapped under an un-tappable strip. */
.tab-view { padding-bottom: calc(8.5rem + env(safe-area-inset-bottom)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 0.85rem;
}
.cardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.grid2 .card { margin-bottom: 0; }

/* ---- Auth ---- */
.auth { max-width: 460px; }
.brand { text-align: center; margin: 1.4rem 0 0.6rem; }
.brand h1 { font-size: 2rem; }
.tabs { display: flex; gap: 0.25rem; background: var(--paper); border-radius: 12px; padding: 0.25rem; margin-bottom: 1rem; }
.tab { flex: 1; border: 0; background: transparent; padding: 0.6rem; border-radius: 10px; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; }
.tab.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(20,23,28,0.08); }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
.field span { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.field input { font: inherit; font-size: 1rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); min-height: 48px; }
.field input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Show/hide password eyeball toggle */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 3rem; }
.pw-toggle { position: absolute; right: 0; top: 0; height: 100%; width: 3rem; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 12px; }
.pw-toggle svg { width: 22px; height: 22px; display: block; }
.error { color: var(--red); font-size: 0.85rem; margin-bottom: 0.75rem; }

/* ---- Buttons ---- */
.btn-primary { width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: var(--ink); color: var(--paper); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; margin-top: 0.2rem; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.6; }
.btn-ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 500; padding: 0.6rem 0.9rem; border-radius: 10px; cursor: pointer; min-height: 44px; }
.btn-ghost.full { width: 100%; margin-top: 0.5rem; }
.btn-ghost.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.btn-ghost.danger:hover { background: #fceeec; }
.btn-dashed { width: 100%; margin-top: 0.6rem; padding: 0.7rem; border: 1px dashed var(--line); border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }

/* ---- Topbar ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.topbar h2 { font-size: 1.5rem; }
.date-input, .text-input { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-height: 44px; width: 100%; }
.text-input { margin-bottom: 0.6rem; }

/* ---- Heart hero ---- */
.hero { border-color: color-mix(in srgb, var(--red) 25%, var(--line)); }
.hero-label { color: var(--red); }
.vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin: 0.4rem 0; }
.vital { text-align: center; background: var(--paper); border-radius: 12px; padding: 0.7rem 0.3rem; }
.vital-num { display: block; font-family: var(--mono); font-size: 1.35rem; font-weight: 600; }
.vital-cap { display: block; font-size: 0.65rem; color: var(--muted); margin-top: 0.2rem; }
.vital-date { display: block; font-size: 0.58rem; color: var(--muted); margin-top: 0.15rem; }

/* ---- Patterns tiles ---- */
.patterns { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 0.5rem; }
.ptile { text-align: center; background: var(--paper); border-radius: 10px; padding: 0.6rem 0.3rem; }
.pval { display: block; font-family: var(--mono); font-weight: 600; font-size: 1.05rem; }
.pval.good { color: var(--sage); }
.pval.warn { color: var(--amber); }
.pcap { display: block; font-size: 0.6rem; color: var(--muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- ECG trace + rhythm tag ---- */
.ecg { width: 100%; height: 52px; margin: 0.3rem 0 0.6rem; }
.ecg path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ecg .lead { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: ecgtrace 4.5s linear infinite; }
@keyframes ecgtrace { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ecg .lead { animation: none; stroke-dashoffset: 0; } }
.rhythm-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, var(--line)); border-radius: 999px; padding: 2px 8px; }
.rhythm-tag.ok { color: var(--sage); border-color: color-mix(in srgb, var(--sage) 30%, var(--line)); }
.vbadge { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; }
.vbadge.warn { background: #f3eee3; color: var(--amber); }
.vbadge.flag { background: #fceeec; color: var(--red); }

/* ---- Numbers / totals ---- */
.cal-line { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.7rem; }
.big-num { font-family: var(--mono); font-weight: 600; font-size: 2rem; letter-spacing: -0.02em; }
.chip-static { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage); background: #e7f1ec; padding: 0.2rem 0.55rem; border-radius: 999px; }

/* ---- Progress bars ---- */
.bar { margin: 0.45rem 0; }
.bar .bl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.track { height: 7px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.fill { height: 100%; width: 0; border-radius: 4px; background: var(--sage); transition: width 0.35s ease; }
.fill.over { background: var(--amber); }

/* ---- Chips ---- */
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.chip { font: inherit; font-size: 0.85rem; padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft); cursor: pointer; min-height: 40px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Numeric field grids ---- */
.fields4, .fields3, .fields2 { display: grid; gap: 0.5rem; margin-bottom: 0.7rem; }
.fields4 { grid-template-columns: repeat(5, 1fr); }
.fields3 { grid-template-columns: repeat(3, 1fr); }
.fields2 { grid-template-columns: 1fr 1fr; }
.nfield { display: flex; flex-direction: column; gap: 0.25rem; }
.nfield span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nfield input, .nfield select { font: inherit; font-family: var(--mono); font-weight: 500; font-size: 1.05rem; padding: 0.6rem 0.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-height: 46px; min-width: 0; width: 100%; }
.nfield input:focus, .nfield select:focus { outline: none; border-color: var(--ink); background: #fff; }
@media (max-width: 420px) { .fields4 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Entry lists ---- */
.loghead { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0.5rem; }
.entry-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.entry-list li { display: flex; align-items: center; gap: 0.7rem; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 0.7rem 0.85rem; }
.entry-list li.empty { background: transparent; border-style: dashed; justify-content: center; }
.entry-list .ei { flex: 1; min-width: 0; }
.entry-list .ei .t { font-size: 0.95rem; font-weight: 500; }
.entry-list .ev { font-family: var(--mono); font-weight: 600; }
.entry-list .ev small { color: var(--muted); font-weight: 500; }
.del { border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.4rem; min-height: 40px; }

/* ---- Quit card ---- */
.quit .big-streak { font-family: var(--mono); font-weight: 600; font-size: 2.4rem; line-height: 1; margin: 0.2rem 0; }
.quit .big-streak small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; }

/* ---- Flags ---- */
.flag-high { color: var(--amber); }
.flag-low { color: var(--red); }
.flag-normal { color: var(--sage); }
.mini-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }

/* ---- Today checklist (§7.4) ---- */
.today-checklist { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.chk-row {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); border-radius: 10px; background: transparent;
  font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left;
}
.chk-row .chk-ic { font-size: 1.1rem; line-height: 1; }
.chk-row .chk-label { flex: 1 1 auto; }
.chk-row .chk-state { font-family: var(--mono); font-size: 0.95rem; }
.chk-row.done .chk-state { color: var(--sage); }
.chk-row.todo .chk-state { color: var(--muted); }
.chk-row.rest { color: var(--muted); font-style: italic; }
.chk-row.rest .chk-state { color: var(--muted); }

/* ---- Program week ---- */
.week { display: flex; flex-direction: column; gap: 0.4rem; }
.weekrow { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 0.6rem; }
.weekrow .dow { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.weekrow select { font: inherit; padding: 0.5rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); min-height: 42px; text-transform: capitalize; }

/* ---- Set logger ---- */
.setrow { display: grid; grid-template-columns: 1fr 2.8rem 3.6rem 3.4rem; align-items: center; gap: 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); }
.setrow:last-of-type { border-bottom: 0; }
.setrow { align-items: start; }
.setrow .exn { font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.1rem; }
.setrow input { font: inherit; font-family: var(--mono); padding: 0.45rem 0.4rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); min-width: 0; min-height: 42px; text-align: center; }
.setrow .exname-input { font-family: var(--body); text-align: left; width: 100%; }
/* Column headers (Sets · Lbs · Reps) aligned above the inputs. */
.setrow-head { align-items: end; padding: 0.1rem 0 0.25rem; border-bottom: 0; }
.setrow-head span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: center; }
/* Per-row auto-save status — always visible so it's clear what is logged. */
.saved { font-size: 0.7rem; color: var(--sage); font-weight: 600; display: inline-block; }
.saved.flash { animation: savedflash 1.1s ease; }
.saved.status-unsaved { color: var(--amber); }
.saved.status-saving { color: var(--muted); }
.saved.status-saved { color: var(--sage); }
@keyframes savedflash { 0% { opacity: 0; transform: translateY(2px); } 18% { opacity: 1; transform: none; } 100% { opacity: 1; } }
.last-hint { font-size: 0.72rem; line-height: 1.2; }
.last-hint .try { color: var(--sage); font-weight: 600; }
.last-hint .exp { color: var(--amber); font-weight: 600; }
/* Collapsible "previous readings" disclosure: a ▾ chevron that flips to ▴ when
   open. Collapsed by default so the list barely uses screen space. */
.more-toggle > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); user-select: none; }
.more-toggle > summary::-webkit-details-marker { display: none; }
.more-toggle > summary::after { content: "▾"; font-size: 0.7rem; line-height: 1; transition: transform 0.15s ease; }
.more-toggle[open] > summary::after { transform: rotate(180deg); }
/* Food-database search (Fuel tab). */
.food-results:empty { display: none; }
.food-results { margin-top: 0.5rem; max-height: 17rem; overflow-y: auto; }
.food-res { cursor: pointer; }
.food-res:active { border-color: var(--ink); }
.food-pick { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line-soft); }
.food-pick-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.6rem; }
.food-macros { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); margin: 0.2rem 0 0.7rem; }
.size-chips { flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.size-chips .chip { font-size: 0.8rem; padding: 0.4rem 0.7rem; }
.tut { display: inline-block; margin-top: 0.15rem; font-size: 0.68rem; font-weight: 600; color: var(--blue); text-decoration: none; border: 1px solid var(--blue); border-radius: 6px; padding: 1px 7px; white-space: nowrap; line-height: 1.5; }
.tut:active { opacity: 0.6; }
.cal-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.6rem; font-size: 0.85rem; cursor: pointer; }
.cal-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--blue); flex-shrink: 0; }
.vers { margin-top: 0.2rem; }
.vers summary { font-size: 0.72rem; color: var(--blue); cursor: pointer; list-style: none; padding: 0.1rem 0; }
.vers summary::-webkit-details-marker { display: none; }
.vers summary::before { content: "▾ "; }
.vers[open] summary::before { content: "▴ "; }
.vers-list { list-style: none; margin: 0.15rem 0 0.2rem; padding-left: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.vers-list li { font-size: 0.78rem; display: flex; align-items: center; gap: 0.4rem; }
.mini-tut { padding: 0 6px; }
.mk-def { border: 0; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; -webkit-tap-highlight-color: transparent; }
.mk-def.on { color: #e8a72e; } /* gold = this version is the default */
.mk-def:active { opacity: 0.5; }
.ver-name { flex: 1; }
.ver-name em { font-style: normal; color: var(--muted); font-size: 0.88em; }
.tut-pref { border-style: solid; } /* the chosen machine/cable version, shown by name */
.ver-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gym-hint { color: var(--muted); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.gym-photo { text-decoration: none; font-size: 0.95em; }

/* Settings → My Gym machine library */
.gym-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; }
.gym-file { text-align: center; cursor: pointer; }
#gym-file-name { word-break: break-all; }
.gym-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.gym-item { display: flex; align-items: center; gap: 0.7rem; }
.gym-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--line-soft); flex-shrink: 0; }
.gym-meta { flex: 1; min-width: 0; }
.gym-lbl { font-weight: 600; font-size: 0.9rem; }
.add-gym-photo { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 6px; font-size: 0.7rem; padding: 0 5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.add-gym-photo:active { opacity: 0.5; }
.gym-instr { margin-top: 0.2rem; white-space: normal; }
.gym-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.admin-machine-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.35rem; align-items: center; }
.mg-replace { cursor: pointer; }
.gym-item-edit { flex-direction: column; align-items: stretch; }

/* Machine guide — photo FIRST, shown at the top of an exercise entry (before videos) */
.mguide-lead { display: block; margin: 0.4rem 0 0.5rem; }
.mguide-lead-photo { display: block; }
.mguide-lead-photo img { display: block; width: 100%; max-width: 280px; max-height: 300px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--line-soft); }
.mguide-lead-meta { margin-top: 0.3rem; }
.mguide-lbl { font-size: 0.82rem; font-weight: 600; }
.mguide-lead-how > summary { cursor: pointer; font-size: 0.78rem; color: var(--muted); list-style: none; margin-top: 0.15rem; }
.mguide-lead-how > summary::-webkit-details-marker { display: none; }
.mguide-instr { font-size: 0.82rem; line-height: 1.4; white-space: normal; margin-top: 0.25rem; }
.ex-tut { margin: 0.1rem 0 0.2rem; }
/* Small machine thumbnail(s) next to an exercise name in the set logger — quick
   "which machine do I go to" glance. Tap to open the full photo. */
.machine-thumbs { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 5px; }
.machine-thumb { display: inline-flex; line-height: 0; }
.machine-thumb img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: var(--line-soft); }
.machine-thumb:active { opacity: 0.6; }
.img-box img { display: block; width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px; background: var(--line-soft); }

/* Generic Self-esteem card (Routine tab, shown instead of Walk Tall). */
.se-text { font-size: 1.05rem; font-weight: 600; line-height: 1.5; margin: 0.4rem 0; }
.se-actions { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
#pdm-se-fav { font-size: 1.05rem; line-height: 1; }

/* Typed how-to shown in the photo lightbox (travel/bodyweight & dumbbell versions). */
.img-text { font-size: 0.92rem; line-height: 1.5; padding: 0.2rem 0.1rem 0.4rem; white-space: pre-wrap; }
/* Travel version rows inside "Other versions" (admin-gated). */
.vers-list .alt-row { background: var(--line-soft); border-radius: 8px; }
.train-more-hint { text-align: center; margin: 0.6rem 0 0.2rem; opacity: 0.85; }
/* Today tab "Today's workout" glance list (taps through to Train to log). */
.today-exlist { list-style: none; margin: 0.2rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.today-exlist li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 8px; background: var(--line-soft); cursor: pointer; }
.today-exlist li.rest { background: transparent; cursor: default; }
.today-exlist li:not(.rest):active { opacity: 0.6; }
.today-exlist .tw-n { font-weight: 600; font-size: 0.88rem; }
.body-links { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.body-links .btn-ghost { flex: 1; }
.subtab-back { border: 0; background: transparent; color: var(--blue); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0.2rem 0.5rem 0.2rem 0; -webkit-tap-highlight-color: transparent; }
.subtab-back:active { opacity: 0.5; }
.ex-list .tut { margin-left: 0.1rem; }

/* ---- Exercise lists ---- */
.ex-list { list-style: none; margin: 0.4rem 0 0.2rem; display: flex; flex-direction: column; gap: 0.2rem; }
.ex-list li { padding: 0.25rem 0; border-bottom: 1px solid var(--line-soft); }
.ex-list li:last-child { border-bottom: 0; }
.exhead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.exn { font-size: 0.85rem; }
.exr { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.ex-list li .exn { flex: 1 1 auto; min-width: 0; }
.ss { font-family: var(--mono); font-size: 0.6rem; color: var(--amber); border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; vertical-align: middle; }
.weekday { padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.weekday:last-child { border-bottom: 0; }
.weekday.is-today { background: #eef4f1; border-radius: 10px; padding: 0.5rem 0.6rem; margin: 0.2rem 0; border-bottom: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 35%, var(--line)); }
.today-tag { font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage); background: #d8efe3; border-radius: 999px; padding: 1px 6px; margin-left: 0.4rem; vertical-align: middle; }
.load-row { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.load-row select { flex: 1; font: inherit; padding: 0.55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); min-height: 44px; }
/* The select flexes to fill; the button sizes to its label. Without width:auto a
   .btn-primary "Load program" (width:100% default) runs off the right edge. */
.load-row .btn-primary, .load-row .btn-ghost { flex: 0 0 auto; width: auto; min-height: 44px; padding: 0.6rem 0.9rem; }

/* ---- Weight import row ---- */
.import-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
.file-btn { cursor: pointer; margin-top: 0; flex: 1; text-align: center; }
.units-toggle { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.3rem; }
.units-toggle select { font: inherit; padding: 0.3rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }

/* ---- Review queue ---- */
.badge { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.badge.ok { background: #e7f1ec; color: var(--sage); }
.badge.warn { background: #f3eee3; color: var(--amber); }
.mini { border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 0.78rem; font-weight: 500; padding: 0.4rem 0.6rem; border-radius: 9px; cursor: pointer; min-height: 38px; }
.mini.ok { border-color: var(--sage); color: var(--sage); }
.mini.danger { border-color: var(--red); color: var(--red); }
.range-row { margin: 0.6rem 0; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); }
.range-row > .muted { display: block; margin-bottom: 0.4rem; }

/* ---- AI insight ---- */
.insight p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.5; }
.insight p:last-child { margin-bottom: 0; }
.insight b { font-weight: 600; }
.insight-time { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--line-soft); }

/* ---- Warm-up / cool-down stretch lists (Train) ---- */
.move-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.move { padding: 0.55rem 0; border-top: 1px solid var(--line-soft); }
.move:first-child { border-top: 0; }
.move-n { font-weight: 600; font-size: 0.95rem; }
.move-cue { margin-top: 0.15rem; line-height: 1.4; }
.move .soon { white-space: nowrap; }

/* Yoga "play full class" sequence controls (inside the video modal) */
.yseq-row { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 0.5rem; flex-wrap: wrap; }
.yseq-row #yseq-count { min-width: 3rem; text-align: center; }

/* ---- Devices ---- */
.dev-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); }
.dev-row .dn { flex: 1; min-width: 0; }
.dev-row .dn .t { font-weight: 500; }
.dev-row a.mini { text-decoration: none; display: inline-block; }
/* The `hidden` attribute must win over class `display` rules (e.g. .oura-token below),
   otherwise toggling el.hidden has no visual effect. */
[hidden] { display: none !important; }
.oura-token { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.oura-token .text-input { margin-bottom: 0; }
.oura-token .btn-ghost { min-height: 44px; }

/* ---- Bottom nav ---- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 15;
  display: flex; flex-wrap: wrap;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav::-webkit-scrollbar { display: none; }
/* flex-basis 14% → exactly 7 tabs per row (7×14%=98% fits, an 8th wraps); with 14
   tabs the bar is two tidy rows (was three). flex-grow 1 closes the leftover gap
   evenly so the tabs aren't spread far apart. */
.navbtn { flex: 1 0 14%; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.5rem; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 0.12rem; padding: 0.4rem 0.05rem 0.35rem; min-height: 44px; white-space: nowrap; }
.navbtn[hidden] { display: none; }
.navbtn .ic { font-size: 1rem; line-height: 1; }
.navbtn.is-active { color: var(--ink); font-weight: 600; }
.navbtn.is-active .ic { filter: none; }

/* ---- Spelling lock (kids' spelling app) ----
   While the spelling app is open the bottom nav is hidden so an accidental tap (common on
   Android tablets) can't navigate the child out of the app. A fixed "Show menu" button at the
   top reveals it on demand; revealing it again lets them pick a tab intentionally. */
body.spelling-lock:not(.nav-revealed) #bottomnav { display: none; }
/* The toggle lives in the Brain header (right side via .topbar's space-between); shown only while
   the spelling app holds the lock so it never crowds the header on other Brain sub-tabs. */
#spelling-navtoggle {
  display: none;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  padding: 0.5rem 0.85rem; min-height: 44px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
body.spelling-lock #spelling-navtoggle { display: inline-flex; align-items: center; }
body.spelling-lock.nav-revealed #spelling-navtoggle { background: var(--ink); color: #fff; border-color: var(--ink); }
/* With the nav hidden the iframe can use the reclaimed vertical space. */
body.spelling-lock:not(.nav-revealed) #spelling-host iframe { height: calc(100dvh - 150px); }

/* ---- Chat (in-app AI) ---- */
.chat-list { display: flex; flex-direction: column; gap: 0.5rem; min-height: 40vh; max-height: 62vh; overflow-y: auto; padding: 0.2rem; margin-bottom: 0.6rem; }
.chat-list .empty { margin: auto; text-align: center; padding: 1.5rem 1rem; }
.cbubble { max-width: 85%; padding: 0.6rem 0.8rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; }
.cbubble p { margin: 0 0 0.4rem; }
.cbubble p:last-child { margin-bottom: 0; }
.cbubble.me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.cbubble.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cbubble.typing { color: var(--muted); font-style: italic; }
.chat-input-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.chat-input-row textarea { flex: 1; resize: none; margin-bottom: 0; max-height: 30vh; }
.chat-send { width: auto; min-width: 4.5rem; margin-top: 0; }

/* ---- Toast ---- */
.toast { position: fixed; left: 50%; bottom: 5rem; transform: translateX(-50%) translateY(60px); background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 500; padding: 0.7rem 1.1rem; border-radius: 999px; opacity: 0; transition: 0.3s; z-index: 30; pointer-events: none; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---- Fuel: recent-foods quick-add dropdown ---- */
.recent-foods > summary { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; list-style: none; }
.recent-foods > summary::-webkit-details-marker { display: none; }
.recent-foods > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.recent-foods[open] > summary::after { transform: rotate(180deg); }
.recent-foods .recent-title { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.recent-foods .entry-list { margin-top: 0.6rem; }
.recent-item { cursor: pointer; }
.recent-item .add-recent { font-size: 1.2rem; line-height: 1; color: var(--sage); }

/* ---- Progress: body-photo timeline ---- */
.prog-capture { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.prog-capture .file-btn { justify-content: center; text-align: center; }
.prog-stage { position: relative; margin: 0.2rem 0 0.7rem; background: var(--paper); border-radius: 12px; min-height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#prog-img { width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.prog-stage .empty { padding: 2.5rem 1rem; text-align: center; }
#prog-scrub { width: 100%; margin: 0.2rem 0 0.6rem; accent-color: var(--ink); }
.prog-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.prog-controls .btn-ghost { min-width: 44px; }
.prog-date-label { font-family: var(--mono); font-size: 0.85rem; min-width: 9rem; text-align: center; }
.btn-ghost.danger { color: var(--red); margin-top: 0.7rem; }

/* ---- Admin dashboard ---- */
.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.admin-stats .stat { background: var(--paper); border-radius: 12px; padding: 0.7rem 0.8rem; }
.stat-num { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.stat-cap { font-size: 0.75rem; color: var(--muted); }
.auser { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); }
.auser:last-child { border-bottom: 0; }
.auser-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.auser-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.btn-ghost.mini { min-height: 36px; padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.abadge { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--line); color: var(--ink-soft); }
.abadge.active { background: #d8efe3; color: var(--sage); }
.abadge.paused { background: #f7e7c8; color: var(--amber); }
.abadge.archived { background: var(--line); color: var(--muted); }
.abadge.warn { background: #fbe0dc; color: var(--red); }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.temp-box { margin-top: 0.7rem; padding: 0.7rem; background: var(--paper); border-radius: 12px; }
.temp-box .import-row { margin-top: 0.4rem; }
.temp-box .text-input { font-family: var(--mono); margin-bottom: 0; }

/* Feature-adoption bars (fleet) */
.adoption { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.adopt-row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 0.5rem; }
.adopt-label { font-size: 0.82rem; color: var(--ink-soft); }
.adopt-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.adopt-fill { display: block; height: 100%; border-radius: 999px; background: var(--sage); }
.adopt-val { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

/* Issues — quit-vaping daily log */
.quit-log-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.quit-log-row .date-input { flex: 1 1 8rem; }
.quit-log-row .chip { margin: 0; }
.qbadge { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.12rem 0.5rem; border-radius: 999px; }
.qbadge.clean { background: #d8efe3; color: var(--sage); }
.qbadge.slip { background: #fbe0dc; color: var(--red); }

/* Per-user tab access toggles (admin grants/revokes optional tabs) */
.ttoggles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.3rem; }
.ttoggle { font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; cursor: pointer; min-height: 32px; border: 1px solid var(--line); }
.ttoggle.on { background: #d8efe3; color: var(--sage); border-color: #bfe3d2; }
.ttoggle.on::before { content: "✓ "; }
.ttoggle.off { background: var(--paper); color: var(--muted); }
.ttoggle.off::before { content: "✕ "; }

/* Per-user feature chips (used vs. ignored) */
.fchips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fchip { font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.fchip.on { background: #d8efe3; color: var(--sage); font-family: var(--mono); }
.fchip.off { background: var(--line); color: var(--muted); }
.dim { color: var(--muted); }

/* ---- Language toggle (EN / ES) ---- */
.langtoggle { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.auth .langtoggle { display: flex; width: max-content; margin: 0.2rem 0 0 auto; }
.langbtn { border: 0; background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; min-height: 32px; }
.langbtn.on { background: var(--ink); color: var(--paper); }
.cardhead .langtoggle { margin-bottom: 0; }

/* ---- Help / how-to accordion ---- */
.help-list { display: flex; flex-direction: column; gap: 0.55rem; }
.help-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.help-item > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0.95rem; cursor: pointer; list-style: none; }
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.help-item[open] > summary::after { transform: rotate(180deg); }
.help-item .hi { font-size: 1.25rem; line-height: 1; }
.help-item .ht { font-weight: 600; }
.help-item .htab { flex-basis: 100%; order: 3; margin-left: 2rem; font-size: 0.72rem; color: var(--muted); }
.help-body { padding: 0 0.95rem 0.95rem; }
.help-body ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.help-body li { line-height: 1.45; }
.help-tip { margin: 0.7rem 0 0; padding: 0.55rem 0.7rem; background: var(--paper); border-radius: 10px; font-size: 0.85rem; color: var(--ink-soft); }

/* Labs — grouped marker rows with trend sparkline */
.marker-list { display: flex; flex-direction: column; gap: 0.45rem; }
.marker { background: var(--card); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.marker > summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; }
.marker > summary::-webkit-details-marker { display: none; }
.marker .mk { flex: 1; min-width: 0; font-weight: 500; }
.marker .mspark { flex: 0 0 auto; line-height: 0; }
.spark { display: block; }
.spark polyline { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Per-marker trend chart (Labs → expand a marker) */
.lab-chart { display: block; margin: 0.4rem 0 0.2rem; max-width: 360px; }
.lab-band { fill: var(--sage); opacity: 0.13; }
.lab-line { fill: none; stroke: var(--ink-soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lab-dot { stroke: var(--card); stroke-width: 1; }
.lab-dot.flag-high { fill: var(--amber); }
.lab-dot.flag-low { fill: var(--red); }
.lab-dot.flag-normal { fill: var(--sage); }
.lab-axis { fill: var(--muted); font-size: 10px; font-family: var(--body); }
.lab-legend { margin-top: 0; }
.marker-body { padding: 0 0.85rem 0.8rem; }
.marker-hist { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; margin: 0.3rem 0 0; }
.marker-hist li { display: flex; align-items: center; gap: 0.7rem; }
.marker-hist li .ev { flex: 1; font-family: var(--mono); font-weight: 600; }
.mk-table { width: 100%; border-collapse: collapse; }
.mk-table td { padding: 0.45rem 0.3rem; border-bottom: 1px solid var(--line-soft); }
.mk-table td:nth-child(2) { font-family: var(--mono); font-weight: 600; text-align: right; white-space: nowrap; }
.mk-table td:nth-child(3) { text-align: right; white-space: nowrap; }

/* In-app document viewer (PDF via pdf.js / images) */
body.viewer-open { overflow: hidden; }
.viewer-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20,23,28,0.55); display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0.5rem 0.5rem; }
.viewer-overlay[hidden] { display: none; }
.viewer-modal { background: var(--card); border-radius: 14px; width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.viewer-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.viewer-tabs { flex: 1; display: flex; gap: 0.3rem; min-width: 0; align-items: center; }
.viewer-title { font-weight: 600; padding: 0.3rem 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtab { border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 0.82rem; font-weight: 500; color: var(--muted); padding: 0.4rem 0.75rem; border-radius: 9px; cursor: pointer; }
.vtab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.viewer-close { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.4rem 0.55rem; min-height: 40px; }
.viewer-body { overflow: auto; padding: 0.7rem; -webkit-overflow-scrolling: touch; background: var(--paper); }
.viewer-page { display: block; width: 100%; height: auto; margin: 0 auto 0.7rem; box-shadow: 0 1px 4px rgba(20,23,28,0.15); background: #fff; }
.viewer-img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; }
.viewer-status { text-align: center; color: var(--muted); padding: 1.5rem 0.5rem; display: block; }
.viewer-markers { background: var(--card); border-radius: 10px; padding: 0.4rem 0.7rem; }
#help-search { margin-bottom: 0; }

/* Brain BioHack — Father Framework / Daily Routine / Articulate */
.subpanel { animation: fadein 0.15s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.ff-cover { width: 100%; max-width: 240px; display: block; margin: 0 auto 0.8rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(20,23,28,0.15); }
.ff-audio { width: 100%; margin: 0.6rem 0; }
.routine-form { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line-soft); }
.art-list { display: flex; flex-direction: column; gap: 0.5rem; }
.art-note { font-size: 0.85rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--sage); border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0; }
.art-item { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 0.6rem 2.7rem 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.art-heart { position: absolute; top: 0.4rem; right: 0.4rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--muted); -webkit-tap-highlight-color: transparent; }
.art-heart.on { color: var(--red); }
.art-heart:hover { color: var(--red); }
.art-heart:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.chip.heart.on { background: var(--red); border-color: var(--red); }
.chip.claude.on { background: var(--sage); border-color: var(--sage); }
/* Claude's one-line "why this phrase" under an AI-suggested phrase */
.art-ainote { font-size: 0.8rem; color: var(--muted); font-style: italic; }
.art-weak, .art-strong { display: flex; align-items: center; gap: 0.6rem; }
.art-weak span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.art-strong span { font-weight: 600; }
.art-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.art-play.ok { border-color: var(--sage); color: var(--sage); }
.art-noaudio { flex: 0 0 auto; width: 34px; text-align: center; color: var(--line); }
.art-allplay { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0 0.4rem; }
.art-allplay .btn-ghost { min-height: 40px; padding: 0.45rem 0.8rem; }
.art-allplay .btn-ghost.on { border-color: var(--sage); color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, transparent); }
#art2-playstatus { margin-left: auto; }

.art-voicepick { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.art-voicepick .chips { margin-bottom: 0; }

/* Articulate — daily lesson coach */
.ar-header { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; min-height: 1.2rem; }
.ar-mode { animation: fadein 0.15s ease; }
.ar-lesson-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.7rem; }
.ar-focus { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage); }
.ar-dots { display: flex; gap: 0.35rem; justify-content: center; margin-bottom: 0.9rem; }
.ar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ar-dot.on { background: var(--ink); transform: scale(1.25); }
.ar-dot.done { background: var(--sage); }
.ar-card { background: var(--paper); border-radius: 12px; padding: 1.1rem 1rem; min-height: 9rem; display: flex; flex-direction: column; gap: 0.5rem; border-left: 3px solid var(--line); }
.ar-card.ar-learn { border-left-color: var(--ink); }
.ar-card.ar-drill { border-left-color: var(--sage); }
.ar-card.ar-challenge { border-left-color: var(--red); }
.ar-card-type { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ar-card h3 { font-size: 1.05rem; margin: 0; }
.ar-card p { margin: 0; line-height: 1.5; font-size: 0.98rem; }
.ar-nav { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.ar-nav .btn-ghost { flex: 0 0 33%; }
.ar-nav .btn-primary { flex: 1; margin-top: 0; }
.ar-done { text-align: center; padding: 1.5rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ar-done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--sage); color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }
.ar-done h3 { margin: 0; }
.ar-streak { font-weight: 700; color: var(--red); margin: 0.3rem 0 0; }

/* Quit-nicotine reset cards */
.qn-card { background: var(--paper); border-radius: 10px; margin-bottom: 0.45rem; overflow: hidden; }
.qn-card > summary { padding: 0.7rem 0.85rem; cursor: pointer; font-weight: 600; list-style: none; }
.qn-card > summary::-webkit-details-marker { display: none; }
.qn-card > summary::before { content: "+ "; color: var(--sage); font-weight: 700; }
.qn-card[open] > summary::before { content: "− "; }
.qn-card p { margin: 0; padding: 0 0.85rem 0.8rem; line-height: 1.5; }
#qn-intro { margin-bottom: 0.7rem; }
#qn-disclaimer { margin-top: 0.7rem; font-style: italic; }

/* ===== Activity calendar (Train + Progress tabs) ===== */
.cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.cal-nav .mini { min-width: 32px; }
#train-cal-title, #prog-cal-title { min-width: 7.5rem; text-align: center; }
.cal-dows, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dows { margin-bottom: 4px; }
.cal-dow { text-align: center; font-size: 0.7rem; color: var(--muted); font-weight: 600; }
.cal-cell { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.cal-cell.empty { border: 0; background: transparent; cursor: default; }
.cal-cell.today { border-color: var(--sage); border-width: 2px; }
.cal-cell.sel { background: var(--sage); color: #fff; }
.cal-cell.future { opacity: 0.45; }
.cal-num { font-size: 0.85rem; line-height: 1; }
.cal-dots { display: flex; gap: 2px; min-height: 6px; flex-wrap: wrap; justify-content: center; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.actcal-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.7rem; }
.actcal-legend .leg { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--muted); }
.actcal-legend .leg i { width: 9px; height: 9px; border-radius: 50%; }

/* Day detail panel under a calendar */
.day-detail { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.day-detail .dd-head { font-weight: 700; margin-bottom: 0.5rem; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.dd-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding: 0.25rem 0.55rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.dd-chip i { width: 8px; height: 8px; border-radius: 50%; }
.dd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.dd-list li { font-size: 0.9rem; }
.dd-sets { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.8rem; color: var(--muted); }

/* Inline mini "Edit" button (next to delete on entry rows) */
.mini { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); cursor: pointer; }

/* ===== Modal overlay (edit forms + video player) ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,23,28,0.55); display: flex;
  align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.modal-overlay[hidden] { display: none; }
.modal-box { background: var(--card); border-radius: 16px; padding: 1.1rem; width: 100%; max-width: 460px;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(20,23,28,0.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.modal-head h3 { margin: 0; }
.modal-x { border: 0; background: transparent; font-size: 1.2rem; color: var(--muted); cursor: pointer; line-height: 1; }
.modal-box .nfield { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; }
.modal-box .nfield > span { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.modal-box .nfield input, .modal-box .nfield select { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); min-height: 46px; }
.modal-box .btn-primary.full, .modal-actions .btn-ghost.full { width: 100%; }
/* Scale identity ("is this you?") review rows */
.scale-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.6rem 0; border-top: 1px solid var(--line); }
.scale-confirm-row:first-child { border-top: 0; }
.scale-confirm-row .t { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; }
.scale-confirm-btns { display: flex; gap: 0.4rem; flex-shrink: 0; }
/* Chat memory ("Notes Claude remembers") */
.chat-memory { margin-top: 0.6rem; }
.chat-memory summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 0.3rem 0; }
.chat-memory .entry-list { margin-top: 0.5rem; }
.video-box video { width: 100%; border-radius: 12px; background: #000; }
.modal-actions { margin-top: 0.8rem; }

/* §7.6: first-ever embed player (YouTube-nocookie clips) */
#yt-embed-host iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
#yt-embed-host .btn-ghost { margin-top: 0.6rem; }

/* §7.6: per-exercise "My clips" (member-owned + promoted YouTube segments) */
.myclips { margin-top: 0.25rem; }
.myclips summary { font-size: 0.72rem; color: var(--blue); cursor: pointer; list-style: none; padding: 0.1rem 0; }
.myclips summary::-webkit-details-marker { display: none; }
.myclips summary::before { content: "▾ "; }
.myclips[open] summary::before { content: "▴ "; }
.clip-list { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.clip-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.clip-play { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--blue); color: var(--blue);
  background: transparent; font-size: 0.65rem; line-height: 1; cursor: pointer; }
.clip-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-star { color: var(--amber); }
.clip-people { color: var(--muted); }
.clip-time { white-space: nowrap; }
.clip-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 0.85rem; cursor: pointer; padding: 0 0.2rem; }
.clip-del.armed { color: var(--red); font-weight: 700; }
.clip-add-title { color: var(--muted); margin: 0.3rem 0 0.15rem; }
.clip-add .import-row { flex-wrap: wrap; }
.clip-add .clip-url { margin-bottom: 0.4rem; }
.clip-add .clip-start, .clip-add .clip-end { width: 4.5rem; flex: 0 0 auto; margin-bottom: 0.4rem; }
.clip-add .clip-label { width: auto; flex: 1 1 140px; margin-bottom: 0.4rem; }
.clip-add .btn { min-height: 40px; padding: 0.4rem 0.8rem; border: 0; border-radius: 10px; background: var(--ink);
  color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; flex: 1 1 100%; }
.clip-cap { margin-top: 0.3rem; }

/* Program label next to the "Train" header */
/* The program tag is a BUTTON on Train/Workouts — tap → How-to → Program setup. */
.topbar-tag-btn { font-family: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topbar-tag-btn:active { opacity: 0.6; }
.topbar-tag { font-size: 0.8rem; font-weight: 600; color: var(--sage); background: #e7f1ec;
  padding: 0.3rem 0.65rem; border-radius: 999px; text-align: right; max-width: 60%; line-height: 1.2; }
.topbar-tag:empty { display: none; }

/* Settings → Tutorial videos: per-set download rows */
.vid-dl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0; border-top: 1px solid var(--line-soft); }
.vid-dl-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vid-dl-info b { font-size: 0.95rem; }
/* Buttons in these rows must size to their label, not the full-width default
   (.btn-primary is width:100%), or the primary "Download" balloons and squashes
   the info text. width:auto + real padding keeps it compact and right-aligned. */
.vid-dl-row .btn-primary, .vid-dl-row .btn-ghost { margin-top: 0; flex: 0 0 auto; width: auto; min-width: 96px; padding: 0.6rem 0.9rem; min-height: 44px; }

/* Recent workouts — collapsible dropdown rows */
.wk-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  cursor: pointer; list-style: none; padding: 0.2rem 0; }
.wk-item > summary::-webkit-details-marker { display: none; }
.wk-item > summary::after { content: "⌄"; color: var(--muted); font-size: 1.1rem; line-height: 1;
  transition: transform 0.15s; flex: 0 0 auto; }
.wk-item[open] > summary::after { transform: rotate(180deg); }
.wk-item .wk-body { padding: 0.4rem 0 0.2rem; }
.wk-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.wk-actions .del { color: var(--red); border: 1px solid var(--line); background: var(--paper);
  border-radius: 8px; padding: 0.3rem 0.6rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; width: auto; }

/* Admin header: change-password + logout buttons grouped on the right */
.admin-hdr-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#cp-cancel { margin-top: 0.5rem; }

/* Today: one-tap device Sync button (above the greeting) */
.today-sync-row { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.4rem; }
#intro-replay-top { order: -1; margin-right: auto; } /* intro on the left, sync stays right */
.sync-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.sync-last { font-size: 0.8rem; }
.sync-btn { font-weight: 600; }
.sync-btn:disabled { opacity: 0.6; }

/* ===== Yoga tab ===== */
#yoga-class-pick { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); width: 100%; min-height: 46px; margin-bottom: 0.5rem; }
#yoga-class-poses { margin: 0.3rem 0 0.8rem; }
.yoga-pose { background: var(--paper); border-radius: 10px; margin-bottom: 0.4rem; overflow: hidden; }
.yoga-pose > summary { padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.yoga-pose > summary::-webkit-details-marker { display: none; }
.yoga-pose > summary::before { content: "+ "; color: var(--sage); font-weight: 700; }
.yoga-pose[open] > summary::before { content: "− "; }
.yp-name { font-weight: 600; }
.yp-sans { font-style: italic; }
.yp-body { padding: 0 0.85rem 0.8rem; }
.yp-body p { margin: 0.3rem 0 0.5rem; line-height: 1.45; }

/* Articulate — timed spoken workout runner */
#art2-runner { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); animation: fadein 0.15s ease; }
.art2-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
.art2-cat { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage); text-align: center; margin-bottom: 0.4rem; }
.art2-say { font-size: 1.4rem; font-weight: 600; line-height: 1.3; text-align: center; margin: 0.3rem 0 0.6rem; }
.art2-note { text-align: center; margin: 0.2rem 0; }
.art2-weak { text-align: center; margin: 0.2rem 0 0.6rem; }
.art2-instead { font-style: italic; }
.art2-bar { height: 7px; background: var(--line-soft); border-radius: 4px; overflow: hidden; margin: 0.5rem 0 0.9rem; }
.art2-fill { height: 100%; background: var(--sage); border-radius: 4px; transition: width 0.25s linear; }
.art2-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.art2-controls .btn-ghost { flex: 1 1 auto; margin-top: 0; }
.art2-done { text-align: center; padding: 0.6rem 0; }
.art2-done h3 { margin: 0 0 0.4rem; }
.art2-done-streak { color: var(--sage); font-weight: 600; margin: 0.3rem 0 0.8rem; }

/* ---- Daily Routine — Bob Proctor paradigm practice ---- */
.pdm-quote-card { border-left: 4px solid var(--sage); background: linear-gradient(180deg, #f3f8f5, var(--card)); }
.pdm-quote { font-family: var(--display); font-size: 1.15rem; line-height: 1.45; margin: 0.35rem 0 0.5rem; color: var(--ink); }
.pdm-block { margin: 0.7rem 0; }
.pdm-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.2rem; }
.pdm-text { line-height: 1.5; white-space: pre-wrap; }
.pdm-goal-statement { font-family: var(--display); font-size: 1.05rem; line-height: 1.45; color: var(--sage); white-space: pre-wrap; margin: 0.2rem 0; }
.pdm-goal-prompt { background: #f3f8f5; border-radius: var(--radius); padding: 0.6rem 0.8rem; margin: 0.4rem 0 0.6rem; }
.pdm-goal-prompt .pdm-goal-statement { margin: 0; }
.pdm-example { font-style: italic; margin-top: 0.4rem; }
/* Bloodwork compare */
.labcmp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.4rem 0; }
.labcmp-table th { text-align: left; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.25rem 0.3rem; border-bottom: 1px solid var(--line-soft); }
.labcmp-table td { padding: 0.3rem 0.3rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.labcmp-table .lc-m { font-weight: 600; }
.labcmp-table .lc-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.labcmp-table .lc-d { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.lc-arrow.good, .lc-d.good { color: var(--sage); }
.lc-arrow.bad, .lc-d.bad { color: var(--red); }
.lc-arrow.warn, .lc-d.warn { color: var(--amber, #c08a00); }
.lc-flag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; padding: 0.05rem 0.3rem; border-radius: 6px; }
.lc-flag.high { background: #fde8e8; color: var(--red); }
.lc-flag.low { background: #e8eefd; color: var(--blue); }
.labcmp-ctx { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line-soft); }
.labcmp-ctx ul { margin: 0.3rem 0 0; padding-left: 1.1rem; line-height: 1.5; }
.labcmp-ai { margin-top: 0.7rem; padding: 0.6rem 0.8rem; background: #f3f8f5; border-radius: var(--radius); border-left: 4px solid var(--sage); }
.labcmp-ai p { margin: 0.3rem 0; line-height: 1.5; }
/* Walk Tall — head-high posture & eye-contact practice */
.pdm-walktall-card { border-left: 4px solid var(--sage); background: linear-gradient(180deg, #f3f8f5, var(--card)); }
.pdm-walktall-card h3 { font-family: var(--display); margin: 0.2rem 0 0.3rem; }
.pdm-wt-head { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sage); margin: 0.8rem 0 0.3rem; }
.pdm-wt-list { margin: 0; padding-left: 1.1rem; line-height: 1.5; }
.pdm-wt-list li { margin-bottom: 0.35rem; }
.pdm-wt-why { margin-top: 0.7rem; font-style: italic; }
.pdm-walktall-card .btn-primary { margin-top: 0.8rem; }
.pdm-speak-card { border-left: 4px solid var(--sage); }
.pdm-speak { margin: 0.7rem 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); }
.pdm-speak:last-child { border-bottom: 0; padding-bottom: 0; }
.pdm-speak .btn-ghost { margin-top: 0.3rem; margin-right: 0.4rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; }
/* Goal/gratitude history dropdown (native <details>) */
.pdm-history { margin-top: 0.6rem; border-top: 1px solid var(--line-soft); padding-top: 0.5rem; }
.pdm-history > summary { cursor: pointer; font-size: 0.8rem; color: var(--sage); font-weight: 600; list-style: none; padding: 0.2rem 0; }
.pdm-history > summary::-webkit-details-marker { display: none; }
.pdm-history[open] > summary { margin-bottom: 0.4rem; }
.pdm-history-body { max-height: 18rem; overflow-y: auto; }
.pdm-hist-day { margin-bottom: 0.5rem; }
.pdm-hist-date { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.3rem 0 0.15rem; }
.pdm-hist-day .entry-list { margin: 0; }

/* ---- Oura Ring tab ---- */
.ring-counts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ring-latest-date { margin: 0.2rem 0 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.ring-group h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.rm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem 0.5rem; }
.rm { display: flex; flex-direction: column; gap: 0.1rem; }
.rm-v { font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.rm-u { font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.rm-l { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ring-reality { border-left: 4px solid var(--amber); background: #fdf6ea; }
.ring-reality p { margin: 0.3rem 0 0.4rem; line-height: 1.45; }
.ring-flags { margin: 0; padding-left: 1.1rem; }
.ring-flags li { margin: 0.15rem 0; line-height: 1.4; }
.ring-history { display: flex; flex-direction: column; }
.ring-hrow { padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.ring-hrow:last-child { border-bottom: 0; }
.sync-freq { margin-top: 0.8rem; }
.warn-text { color: var(--amber); font-weight: 600; }

/* Ring heart-rate card */
.ring-hr-now { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.2rem 0 0.5rem; }
.ring-hr-bpm { font-size: 2.4rem; font-weight: 700; color: var(--red); line-height: 1; }
.ring-hr-unit { font-size: 0.9rem; color: var(--muted); }
.ring-hr-at { margin-left: auto; }
.ring-spark { width: 100%; height: 48px; display: block; margin: 0.3rem 0 0.7rem; }

/* Per-metric trend sparklines + verdict (Scale/Ring tabs). A metric cell shows
   its latest value, a mini line of recent history, and a direction-aware chip
   ("Improving / Slipping / Stable"). Tappable cells open the full history. */
.rm-trend { gap: 0.15rem; }
.rm.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rm.tappable:active { opacity: 0.6; }
.rm-spark { width: 100%; height: 20px; display: block; margin: 0.1rem 0; }
.rm-spark polyline { fill: none; stroke-width: 1.6; }
.spark-good polyline { stroke: var(--good); }
.spark-bad polyline { stroke: var(--red); }
.spark-flat polyline { stroke: var(--muted); }
.rm-chip { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.15rem; }
.trend-good { color: var(--good); }
.trend-bad { color: var(--red); }
.trend-flat { color: var(--muted); }
.rm-sub { font-size: 0.62rem; color: var(--muted); }

/* Progress report card (headline + recommendations above the trend groups) */
.prog-headline { margin: 0.3rem 0 0.4rem; font-weight: 600; line-height: 1.4; }
.prog-recs { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.prog-recs li { margin: 0.25rem 0; line-height: 1.4; font-size: 0.85rem; }

/* Segmental zone chips under the Scale body figure */
.zone-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0 0.2rem; }
.zone-chips:empty { display: none; }
.zone-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; padding: 0.16rem 0.55rem; border-radius: 999px; background: var(--card2, rgba(127, 127, 127, 0.1)); border: 1px solid var(--line, rgba(127, 127, 127, 0.25)); }
.zone-chip i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--zc, var(--muted)); flex: none; }

/* Metric history detail (tap a metric → full graph you can scrub through) */
.mdetail-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.2rem; }
.mdetail-val { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.mdetail-unit { font-size: 0.9rem; color: var(--muted); font-weight: 400; }
.mdetail-sub { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.6rem; }
.mdetail-chartwrap { position: relative; touch-action: pan-y; user-select: none; }
.mdetail-chart { width: 100%; height: 150px; display: block; overflow: visible; }
.mdetail-chart polyline { fill: none; stroke: var(--red); stroke-width: 2; }
.mdetail-chart .md-area { fill: color-mix(in srgb, var(--red) 10%, transparent); stroke: none; }
.mdetail-chart .md-cursor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.mdetail-chart .md-dot { fill: var(--red); }
.mdetail-scrub { display: flex; justify-content: space-between; font-size: 0.8rem; margin-top: 0.4rem; min-height: 1.2rem; }
.mdetail-scrub b { color: var(--ink); }
.mdetail-range { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
.mdetail-hint { font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; text-align: center; }

/* Metric "what is this + healthy range" guide (Scale/Ring detail + BP/HR) */
.rg { margin-top: 0.9rem; border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }
.rg > summary { font-size: 0.85rem; font-weight: 600; color: var(--blue); cursor: pointer; list-style: none; }
.rg > summary::-webkit-details-marker { display: none; }
.rg-body { margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.45; }
.rg-body > p { margin: 0 0 0.5rem; }
.rg-scale { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; }
.rg-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.25rem 0.4rem; border-radius: 8px; }
.rg-row.on { background: var(--line-soft); font-weight: 600; }
.rg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rg-lbl { flex-shrink: 0; min-width: 6.5rem; }
.rg-rng { color: var(--muted); margin-left: auto; text-align: right; }
.rg-exceptional .rg-dot { background: #1a9e5f; } .rg-exceptional.rg-you, .rg-you.rg-exceptional { color: #1a9e5f; }
.rg-good .rg-dot { background: #62b64d; } .rg-you.rg-good { color: #3f9a2e; }
.rg-ok .rg-dot { background: #e8a72e; } .rg-you.rg-ok { color: #b9820f; }
.rg-needsWork .rg-dot { background: #f0783c; } .rg-you.rg-needsWork { color: #d75f24; }
.rg-poor .rg-dot { background: var(--red); } .rg-you.rg-poor { color: var(--red); }
.rg-you { font-weight: 700; margin: 0.5rem 0 0.4rem; font-size: 0.92rem; }
.rg-src { font-size: 0.72rem; margin: 0.3rem 0 0; }
.rg-disc { font-size: 0.72rem; margin-top: 0.5rem; }

/* Interactive body figure (Train muscle map + Scale composition) */
.bodyfig { width: 100%; max-width: 360px; height: auto; display: block; margin: 0.5rem auto 0.2rem; }
.bp-skin { fill: var(--line-soft); }
.bp { fill: color-mix(in srgb, var(--muted) 20%, var(--card)); stroke: var(--card); stroke-width: 0.6; transition: fill 0.15s; }
.bp-p { fill: var(--red); }
.bp-s { fill: color-mix(in srgb, var(--red) 45%, var(--card)); }
.bodyfig [data-muscle] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bodyfig [data-muscle]:hover, .bodyfig [data-muscle]:focus { stroke: var(--ink); stroke-width: 1.2; outline: none; }
.bp-label { fill: var(--muted); font-size: 8px; font-weight: 600; }
.bodymap-card .cardhead { align-items: center; }
.bodymap-toggle { display: flex; gap: 0.3rem; }
#scale-bodymap-note { margin-top: 0.2rem; }
.muscle-panel { margin-top: 0.6rem; border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.mp-head b { font-size: 0.95rem; }
.mp-list { display: flex; flex-direction: column; gap: 0.3rem; }
.mp-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 0.55rem 0.7rem;
  font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.mp-item:active { opacity: 0.6; }
.mp-ex { font-size: 0.9rem; color: var(--ink); }
.mp-day { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* Ring live heart-rate mode */
.ring-hr-btns { display: flex; gap: 0.4rem; }
.mini.on { background: var(--red); color: #fff; border-color: var(--red); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; margin-right: 0.4rem; animation: livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }

/* Jiu-Jitsu calendar */
.jj-month { margin-bottom: 1rem; }
.jj-mname { font-weight: 600; margin: 0.3rem 0; }
.jj-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jj-dow { text-align: center; font-size: 0.7rem; color: var(--muted); padding: 2px 0; }
.jj-cell { min-height: 44px; border-radius: 8px; background: var(--card2, rgba(127,127,127,0.06)); display: flex; flex-direction: column; align-items: flex-start; padding: 3px 5px; border: none; }
.jj-cell.empty { background: transparent; }
.jj-cell .jj-d { font-size: 0.7rem; color: var(--muted); }
.jj-cell.has-class { background: var(--accent, #2b6cb0); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.jj-cell.has-class .jj-d { color: rgba(255,255,255,0.8); align-self: flex-start; }
.jj-cell.has-class .jj-c { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.jj-tech { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border, rgba(127,127,127,0.18)); }
.jj-tech:last-child { border-bottom: none; }
.jj-tech-actions { display: flex; gap: 0.35rem; flex-shrink: 0; align-items: center; }

/* Tennis: students score card + per-drill star rating */
.tn-summary { margin: 0.2rem 0 0.6rem; }
.tn-redo { background: #fdeaea; color: var(--red); }
.tn-skill-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.tn-skill-row:last-child { border-bottom: none; }
.tn-skill-row.dim { opacity: 0.55; }
.tn-skill-name { flex: 1; min-width: 0; }
.tn-stars { font-size: 0.95rem; letter-spacing: 0.05em; color: var(--sage); }
.tn-stars.dim { color: var(--muted); font-size: 0.8rem; letter-spacing: 0; }
.tn-student-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.tn-pick-row { display: flex; gap: 0.5rem; align-items: center; }
.tn-pick-row select { flex: 1; min-width: 0; }
.tn-student-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; padding: 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2, rgba(127,127,127,0.06)); }
.tn-sf-actions { display: flex; gap: 0.5rem; align-items: center; }
.tn-profile { display: flex; gap: 0.75rem; align-items: center; margin: 0.2rem 0 0.7rem; }
.tn-avatar-wrap { position: relative; flex-shrink: 0; width: 72px; height: 72px; }
.tn-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; background: var(--card-2, rgba(127,127,127,0.12)); }
.tn-avatar-ph { display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 700; color: #fff; background: var(--sage); }
.tn-avatar-x { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg, #fff); background: rgba(0,0,0,0.55); color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; padding: 0; }
.tn-avatar-x.armed { background: var(--red); }
.tn-profile-info { flex: 1; min-width: 0; }
.tn-profile-name { font-weight: 700; font-size: 1.05rem; }
.tn-profile-btns { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.tn-rate { display: flex; align-items: center; gap: 0.15rem; margin: 0.3rem 0 0.2rem; }
.tn-star { font: inherit; font-size: 1.3rem; line-height: 1; padding: 0.2rem 0.35rem; min-width: 40px; min-height: 40px; border: none; background: none; color: var(--sage); cursor: pointer; }
.tn-redo-hint { color: var(--red); font-size: 0.8rem; margin-left: 0.4rem; }

/* ===== Jiu-Jitsu move browser ===== */
.jj-search{width:100%;padding:.6rem .7rem;border:1px solid var(--line,#d8d2c7);border-radius:10px;font-size:1rem;margin:.1rem 0 .6rem;background:var(--card,#fff)}
.jj-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.jj-chip{border:1px solid var(--line,#d8d2c7);background:var(--card,#fff);color:var(--ink,#2b2b2b);border-radius:999px;padding:.28rem .6rem;font-size:.82rem;cursor:pointer}
.jj-chip.on{background:var(--accent,#b4532a);border-color:var(--accent,#b4532a);color:#fff}
.jj-chip.sm{padding:.2rem .5rem;font-size:.78rem}
.jj-flows{margin:.2rem 0 .7rem}
.jj-flows-head{font-weight:600;font-size:.9rem;margin:.2rem 0 .35rem}
.jj-flow{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .55rem;border:1px solid var(--line,#e4ded3);border-radius:10px;margin-bottom:.35rem;background:var(--soft,#faf8f3)}
.jj-flow-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.jj-flow-txt b{font-size:.9rem}
.jj-group{border-top:1px solid var(--line,#ece7dd)}
.jj-group:first-child{border-top:none}
.jj-group-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.55rem .1rem;cursor:pointer}
.jj-group-title{font-weight:600;font-size:.95rem}
.jj-group-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.jj-caret{color:var(--muted,#8a8272);font-size:.9rem;width:1rem;text-align:center}
.jj-group-body{padding-bottom:.3rem}
.jj-move{display:flex;align-items:center;gap:.5rem;padding:.4rem .2rem;border-top:1px dashed var(--line,#efeae0)}
.jj-move.novideo{opacity:.55}
.jj-move-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.jj-move-name{font-size:.92rem}
.jj-cue{font-size:.76rem;color:var(--muted,#8a8272)}
.jj-fav{background:none;border:none;font-size:1.05rem;cursor:pointer;padding:.1rem;line-height:1;color:var(--muted,#b3ab99)}
.jj-fav.on{color:#e0a325}
.jj-play{min-width:2.2rem}
.jj-pbar{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;justify-content:center}
.jj-speedchips{display:inline-flex;gap:.25rem;margin-left:.3rem}

/* ===== Admin video manager ===== */
#admin-videos-search{width:100%;margin:.3rem 0 .5rem}
.admin-vid-tab{margin-bottom:.4rem}
.admin-vid{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.4rem .2rem;border-top:1px dashed var(--line,#efeae0)}
.admin-vid-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.admin-vid-txt span:first-child{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-vid-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.admin-vid-actions .mini{cursor:pointer}
.admin-clips-sub{margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--line,#efeae0)}
.admin-clips-sub h4{margin:0;font-size:.95rem}
.admin-clip{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.4rem .2rem;border-top:1px dashed var(--line,#efeae0)}
.admin-clip-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.admin-clip-txt span:first-child{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-clip-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.clip-promote-btn[data-on="1"]{color:var(--amber);border-color:var(--amber)}

/* ===== Embedded spelling app (Brain → Spelling) ===== */
#spelling-host{width:100%}
#spelling-host iframe{width:100%;height:calc(100dvh - 190px);min-height:420px;border:0;border-radius:12px;background:var(--card,#fff)}
#spelling-status{padding:1.2rem;text-align:center}

/* ===== Admin: app-feedback banner + inbox ===== */
.admin-banner{background:var(--amber,#bc7a12);color:#fff;border-radius:var(--radius,14px);padding:0.7rem 0.9rem;margin-bottom:0.85rem;font-size:0.9rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.admin-banner .btn-ghost{margin-left:auto;color:#fff;border-color:rgba(255,255,255,0.6)}
#admin-feedback-list li.fb-new{border-left:3px solid var(--blue,#1666d6);padding-left:0.55rem}
#admin-feedback-list .fb-read{margin-left:0.4rem;padding:0.1rem 0.5rem;font-size:0.72rem}

/* ===== First-run walkthrough (get-started wizard) ===== */
.onboard{position:fixed;inset:0;z-index:120;background:rgba(20,24,28,0.55);display:flex;align-items:center;justify-content:center;padding:1rem}
.onboard[hidden]{display:none}
.onboard-card{background:var(--card,#fff);border-radius:16px;max-width:430px;width:100%;max-height:88dvh;overflow-y:auto;padding:1.1rem 1.2rem 1rem;box-shadow:0 12px 40px rgba(0,0,0,0.28);display:flex;flex-direction:column;gap:0.7rem}
.onboard-top{display:flex;justify-content:space-between;align-items:center}
.onboard-top .btn-ghost{padding:0.3rem 0.7rem}
.onboard-card h2{margin:0 0 0.3rem;font-size:1.25rem}
.onboard-card .nfield{margin:0.35rem 0}
.onboard-nav{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;margin-top:0.4rem}
.onboard-dots{display:flex;gap:0.35rem}
.onboard-dots i{width:8px;height:8px;border-radius:50%;background:var(--line,#d8dde2);display:inline-block}
.onboard-dots i.on{background:var(--sage,#5b8266)}
.ob-radio{display:flex;align-items:center;gap:0.55rem;padding:0.5rem 0.6rem;border:1px solid var(--line,#d8dde2);border-radius:10px;margin:0.35rem 0;cursor:pointer}
.ob-radio input{accent-color:var(--sage,#5b8266)}
.ob-tour{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.55rem}
.ob-tour li{background:var(--bg,#f4f5f6);border-radius:10px;padding:0.55rem 0.7rem;font-size:0.92rem}