/* ============================================================================
   IRON FORGED - coach dashboard components (Phase 2)
   ============================================================================ */

/* mobile nav (sidenav hides <=860px; coach must be fully usable on a phone) */
.mobilenav { display: none; }
/* inside a client, drop the app-level nav - it's all about that client (back btn returns) */
.viewing-client .mobilenav { display: none !important; }
@media (max-width: 860px) {
  .mobilenav {
    display: flex; gap: var(--s-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-soft);
    position: sticky; top: 0; z-index: 39; background: rgba(11,11,15,0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .mobilenav a { flex: none; padding: 8px 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line); color: var(--text-secondary);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .mobilenav a.active { color: var(--ember); border-color: var(--ember-deep); background: var(--ember-glow-soft); }
}

/* ---------- roster ---------- */
/* min(100%, Npx) so a fixed minimum can never force sideways overflow on phones */
.roster { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.rcard { display: block; cursor: pointer; }
/* form clips waiting on review: warm ember rim (reference needs-attention card) */
.rcard--attn { border-color: rgba(201,154,78,0.4); box-shadow: var(--shadow-sm), var(--inset-top), var(--ember-rim); }
.rcard__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.rcard__top .chip { margin-left: auto; flex: none; }
/* metallic coin avatar (reference roster: dark steel coin, top light) */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: 0.05em; color: var(--text-secondary);
  background: radial-gradient(circle at 34% 28%, #3D3D4A, #22222B 68%, #17171E 100%);
  border: 1px solid #4A4A57;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 8px rgba(0,0,0,0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.rcard__who { min-width: 0; }
.rcard__name { font-weight: 700; font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard__meta { font-size: var(--t-xs); color: var(--text-muted); }
.rcard__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.rcard__weight { line-height: 1; }
.rcard__weight .num { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rcard__weight .unit { font-size: var(--t-xs); color: var(--text-muted); }
.rcard__trend { font-size: var(--t-xs); color: var(--text-secondary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rcard__chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.spark { display: block; }
.spark polyline { fill: none; stroke: var(--ember); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.spark .dot { fill: var(--ember); }
.spark .base { stroke: var(--line); stroke-width: 1; }

/* status chips: outlined pills on their own steel background, soft glow per state
   (reference roster ON TRACK / NEEDS ATTENTION treatment, our semantics) */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.04em; border: 1px solid var(--line); color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
  box-shadow: var(--inset-top);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.chip--ok    { color: var(--ok);     border-color: rgba(127,169,138,0.4);  box-shadow: var(--inset-top), 0 0 14px -6px rgba(127,169,138,0.5); } .chip--ok i    { background: var(--ok); box-shadow: 0 0 6px rgba(127,169,138,0.8); }
.chip--warn  { color: var(--warn);   border-color: rgba(201,154,78,0.45);  box-shadow: var(--inset-top), 0 0 14px -6px rgba(201,154,78,0.55); } .chip--warn i  { background: var(--warn); box-shadow: 0 0 6px rgba(201,154,78,0.8); }
.chip--danger{ color: var(--danger); border-color: rgba(195,106,80,0.45);  box-shadow: var(--inset-top), 0 0 14px -6px rgba(195,106,80,0.55); } .chip--danger i{ background: var(--danger); box-shadow: 0 0 6px rgba(195,106,80,0.8); }
.chip--muted { color: var(--text-muted); }
.chip--loom  { color: var(--loom); border-color: rgba(91,141,239,0.5); box-shadow: var(--inset-top), 0 0 14px -6px var(--loom-glow); } .chip--loom i { background: var(--loom); box-shadow: 0 0 6px rgba(91,141,239,0.85); }

/* ---------- client detail ---------- */
.detailhead { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.backbtn { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--steel-100); border: 1px solid var(--line); color: var(--text-secondary); flex: none; }
.backbtn:hover { color: var(--text-primary); border-color: var(--line-strong); }
.detailhead .avatar { width: 54px; height: 54px; }
.detailhead h1 { font-size: var(--t-lg); }
.detailhead .sub { font-size: var(--t-xs); color: var(--text-muted); }
.detailhead .nudgebtn { margin-left: auto; }
.detailhead__acts { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.detailhead__acts .nudgebtn { margin-left: 0; }

/* quiet sign-out text link (replaces the top-right icon button, 4 Aug) */
.navout { background: none; border: 0; color: var(--text-muted); font: inherit;
  font-size: var(--t-xs); cursor: pointer; padding: 6px 8px; }
.navout:hover { color: var(--text-secondary); }
/* pre-call push opt-in bell (jono_29): quiet until on, then ember */
.coachbell { background: none; border: 0; color: var(--text-muted); cursor: pointer;
  padding: 4px; display: inline-flex; align-items: center; border-radius: var(--r-sm); }
.coachbell svg { width: 20px; height: 20px; }
.coachbell:hover { color: var(--text-secondary); }
.coachbell.on { color: var(--ember); text-shadow: 0 0 14px rgba(217,164,65,0.4); }

/* Phase 7.6 program blocks: schedule head controls + ended cells */
.blocksel { max-width: 120px; height: 34px; font-size: var(--t-xs); }
.blockline { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-secondary); white-space: nowrap; }
.blockline--over { color: var(--danger); }
.cyrow--ended { opacity: 0.4; cursor: default; }
.cyrow--ended .cyrow__day { color: var(--text-muted); }

/* Phase 7.5 item 2: Your Plan editor + live preview */
.plangrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .plangrid { grid-template-columns: 1fr; } }
/* IF.md maps # -> h2, ## -> h3, ### -> h4 (h1 never occurs) */
.planprev h2, .planprev h3, .planprev h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--s-4) 0 var(--s-2); }
.planprev h2 { font-size: var(--t-lg); }
.planprev h3 { font-size: var(--t-md); }
.planprev h4 { font-size: var(--t-sm); }
.planprev h2:first-child, .planprev h3:first-child, .planprev h4:first-child { margin-top: 0; }
/* previous-plans list (Phase 7.6): native details rows, date summary */
.planhist { border-top: 1px solid var(--line-soft); padding: var(--s-1) 0; }
.planhist summary { cursor: pointer; font-size: var(--t-xs); color: var(--text-secondary);
  font-weight: 600; padding: var(--s-2) 0; }
.planhist[open] summary { color: var(--ember); }
.planhist .planprev { padding: var(--s-1) 0 var(--s-2); }
.planprev p { margin: 0 0 var(--s-3); color: var(--text-secondary); font-size: var(--t-sm); }
.planprev ul { margin: 0 0 var(--s-3); padding-left: 1.2em; color: var(--text-secondary); font-size: var(--t-sm); }
.planprev li { margin-bottom: var(--s-1); }

/* letterspaced caps tab strip with gold underline (reference client-detail nav) */
.tabs { display: flex; gap: var(--s-1); overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s-6); }
.tabs a { flex: none; padding: 10px 14px; font-size: var(--t-xs); font-weight: 700;
  color: var(--text-muted); border-bottom: 2px solid transparent;
  letter-spacing: 0.12em; text-transform: uppercase; }
.tabs a:hover { color: var(--text-secondary); }
.tabs a.active { color: var(--ember); border-image: var(--gold-metal) 1;
  text-shadow: 0 0 12px rgba(217,164,65,0.35); }
.tabs.has-slide a.active { border-image: none; }   /* the .tabslide bar owns the underline */

/* weight chart CSS moved to app.css (shared with the client, Phase 2 round 2) */

/* overview: laptop-first two-column (chart + activity left, form clips + goals
   right); goals textarea fills its card (Ethan, 23 Jul) */
.ovgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-5); align-items: stretch; }
@media (max-width: 900px) { .ovgrid { grid-template-columns: 1fr; } }
.ovcol { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.ovgoals { display: flex; flex-direction: column; flex: 1; }
.ovgoals__ta { flex: 1; min-height: 150px; padding: var(--s-3); resize: vertical; }

/* activity feed */
.activity { display: flex; flex-direction: column; }
.activity li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft); list-style: none; font-size: var(--t-sm); }
.activity li:last-child { border-bottom: 0; }
.activity .when { color: var(--text-muted); font-size: var(--t-xs); flex: none; width: 64px; font-variant-numeric: tabular-nums; }

/* ---------- program builder ---------- */
.progbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); }
.progbar select { height: 40px; }
.daycard { padding: var(--s-4); }
.daycard__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.daycard__head .input--inline { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; font-size: var(--t-base); }

.exrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft); }
.exrow__main { min-width: 0; }
.exrow__nums { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; align-items: center; }
.exrow__nums .nfield { display: flex; flex-direction: column; gap: 2px; }
.exrow__nums .nfield span { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.exrow__side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.input--sm { height: 34px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--t-sm);
  background: var(--steel-400); border: 1px solid var(--line); color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.input--sm:focus { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-glow-soft); }
.input--sm.w-sets { width: 52px; } .input--sm.w-reps { width: 64px; }
.input--sm.w-kg { width: 70px; } .input--sm.w-rest { width: 60px; }
.input--note { width: 100%; margin-top: var(--s-2); }

.input--inline { background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  color: var(--text-primary); padding: 4px 6px; width: 100%; min-width: 0; font-size: var(--t-sm); }
.input--inline:hover { border-color: var(--line); }
.input--inline:focus { background: var(--steel-400); border-color: var(--ember); }

select.input--sm, select.input { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239C9CA8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px; }

.rowbtn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-xs);
  background: transparent; border: 1px solid transparent; color: var(--text-faint); font-size: 13px; line-height: 1; }
.rowbtn:hover { color: var(--text-secondary); border-color: var(--line); background: var(--steel-300); }
.rowbtn--del:hover { color: var(--danger); border-color: rgba(195,106,80,0.4); }

.dayfoot { display: flex; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.dayfoot select { flex: 1; min-width: 0; }

.btn--sm { height: 36px; padding: 0 var(--s-4); font-size: var(--t-xs); }

/* ---------- The Barn (exercise library): shared card/pill CSS lives in
   app.css; here is only the coach editor's two-column modal ---------- */
/* PersonalOS-style side-by-side selects in the exercise editor */
.selrow { display: flex; gap: var(--s-2); }
.selrow select { flex: 1; min-width: 0; }
/* editor sizing + border per Ethan (23 Jul): covers more screen, bolder gold frame */
.modal__card.exmodal { max-width: 940px; min-height: min(640px, 86dvh); position: relative;
  display: flex; flex-direction: column;
  border: 2px solid rgba(217,164,65,0.5);
  box-shadow: var(--shadow-lg), 0 0 90px -18px var(--ember-glow), var(--plate-bevel); }
.exmodal .exmodal__grid { flex: 1; }
.exmodal .modal__foot { margin-top: auto; }   /* footer pins to the bottom of the taller card */
.exmodal__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-5); }
@media (max-width: 720px) { .exmodal__grid { grid-template-columns: 1fr; } }
.exvid__ph { border: 1px dashed var(--line-strong); border-radius: var(--r-md); cursor: pointer; }

/* ---------- logs ---------- */
.sess { margin-bottom: var(--s-4); }
.sess__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); flex-wrap: wrap; }
.sess__date { font-weight: 700; font-variant-numeric: tabular-nums; }
/* prescribed-RIR label riding on a logged exercise line, quiet mono */
.exrir { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--text-faint); white-space: nowrap; }
.setline { display: flex; gap: var(--s-3); font-size: var(--t-sm); padding: 6px 0;
  border-top: 1px solid var(--line-soft); align-items: baseline; }
.setline .ex { flex: 1; min-width: 0; }
.setline .nums { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- add client ---------- */
.addwrap { max-width: 480px; margin: 0 auto; }   /* centred (Ethan, 23 Jul) */
.pagehead--center { text-align: center; }
.pwrow { display: flex; gap: var(--s-2); }
.pwrow .input { flex: 1; }
.credbox { padding: var(--s-4); border-radius: var(--r-sm); background: var(--steel-400);
  border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); line-height: 1.9; user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---------- builder: sessions with per-set tables (Ethan's reference, 23 Jul) ----------
   One session (day) at a time, full width; each exercise = engraved name + a
   bordered SET / REPS / RIR table (no weight, that's the client's) + a boxed note. */
.dayedit { display: flex; flex-direction: column; gap: var(--s-5); }
.bex { padding: var(--s-4) 0; border-top: 1px solid var(--line-soft); }
.bex:first-child { border-top: 0; padding-top: var(--s-2); }
.bex__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.bex__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; flex: 0 1 auto; min-width: 0; font-size: var(--t-base); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bex__head > .rowbtn--del { margin-left: auto; }
.settable { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--steel-200); }
/* long rows across the full width (Ethan's reference): SET | REPS (fills) | RIR chip | remove */
.setrow { display: grid; grid-template-columns: 120px 1fr 180px 64px; gap: var(--s-4);
  align-items: center; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line-soft); }
.setrow:first-child { border-top: 0; }
.setrow input, .setrow select { width: 100%; min-width: 0; text-align: center; }
.setrow input { font-size: var(--t-base); font-weight: 600; }
.setrow__n { color: var(--text-secondary); font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  text-align: left; font-family: var(--font-mono); }
.settable .setrow:not(.setrow--head):nth-child(odd) { background: rgba(255,255,255,0.022); }
.setrow--head { background-image: var(--plate-sheen), var(--steel-lines), var(--plate-fill); }
.setrow--head span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); }
.setrow--head span:not(.setrow__n) { text-align: center; }
.addset { display: block; width: 100%; padding: var(--s-2); border: 0; border-top: 1px solid var(--line-soft);
  background: transparent; color: var(--ember); font-family: var(--font-mono); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.addset:hover { background: rgba(217,164,65,0.08); }
.bex__meta { display: flex; gap: var(--s-2); margin-top: var(--s-3); align-items: flex-end; }
/* boxed note under the table (reference "Note:" block); still the client-visible note */
.bexnote { display: block; margin-top: var(--s-3); background: var(--steel-300);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
.bexnote__lab { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ember); margin-bottom: 2px; }
.bexnote__in { width: 100%; background: transparent; border: none; outline: none;
  color: var(--text-secondary); font-size: var(--t-sm); line-height: 1.4; padding: 0; }
.bexnote__in::placeholder { color: var(--text-faint); }
/* rest selector sits inline next to the exercise name (Ethan, 23 Jul) */
.bexrest { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.bexrest__lab { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); }
.bexrest select { max-width: 132px; }
.bexrest .w-rest { width: 64px; }
/* narrow screens: compact the set row so it never overflows (coach is laptop-first) */
@media (max-width: 560px) {
  .setrow { grid-template-columns: 56px 1fr 84px 36px; gap: var(--s-2); padding: var(--s-2); }
  .bexrest__lab { display: none; }
}

/* ---------- exercise picker sheet (mirrors PersonalOS "Add exercise") ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(8,8,11,0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein var(--dur) var(--ease); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-height: 84dvh;
  display: flex; flex-direction: column; background: var(--steel-100);
  border-top: 1px solid var(--line-strong); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-bottom: var(--safe-b); box-shadow: var(--shadow-lg); animation: sheetup 320ms var(--ease-out); }
@media (min-width: 861px) { .sheet { left: 50%; right: auto; transform: translateX(-50%); width: 520px; } }
@keyframes sheetup { from { transform: translateY(30%); opacity: 0.3; } }
.sheet__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); }
.sheet__title { flex: 1; font-weight: 800; font-size: var(--t-lg); }
.sheet__search { padding: 0 var(--s-5) var(--s-3); }
.sheet__search .input { width: 100%; }
.sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--s-5) var(--s-6); }
.pcat { display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: var(--s-4) 0 var(--s-2); background: none; border: 0; cursor: pointer;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); }
.prow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.prow:active { background: var(--steel-200); }
.prow__name { font-size: var(--t-md); min-width: 0; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(8,8,11,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: var(--s-5); animation: fadein var(--dur) var(--ease); }
.modal__card { width: 100%; max-width: 440px; padding: var(--s-6) var(--s-5) var(--s-5);
  animation: rise var(--dur) var(--ease-out); max-height: 88dvh; overflow-y: auto; }
.modal__title { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-display); font-size: var(--t-md); margin-bottom: var(--s-5); }
.modal__foot { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.modal__foot .btn { flex: 1; }
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- phone pass ---------- */
@media (max-width: 860px) {
  /* iOS Safari zooms the whole page when focusing any form control under 16px,
     and never zooms back out - the "have to zoom out" bug. 16px kills it. */
  .input, .input--sm, .input--inline, .bexnote__in, select, textarea { font-size: 16px !important; }
  .input--sm { height: 40px; }
  .input--sm.w-sets { width: 58px; } .input--sm.w-reps { width: 72px; }
  .input--sm.w-kg { width: 76px; } .input--sm.w-rest { width: 66px; }
  /* fingers, not cursors */
  .rowbtn { width: 34px; height: 34px; font-size: 15px; }
  .tabs a { padding: 12px 14px; }
  /* program bar: controls go full-width rows instead of cramping */
  .progbar select, .progbar .input--inline { max-width: none !important; flex: 1 1 100%; }
}

/* ---------- toast ---------- */
.toast { position: fixed; bottom: calc(var(--s-5) + var(--safe-b)); left: 50%; transform: translateX(-50%) translateY(20px);
  padding: 10px 18px; border-radius: var(--r-pill); background: var(--steel-300);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); font-size: var(--t-sm);
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index: 90; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .tick { color: var(--ember); }

/* ============================ Phase 4 - tracking ============================ */

/* ---------- weigh-ins tab ---------- */
.wrow { display: grid; grid-template-columns: 90px 100px 80px 1fr; gap: var(--s-3);
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm); }
.wrow:last-child { border-bottom: 0; }
.wrow--head { font-size: var(--t-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.wrow__date { color: var(--text-muted); }
.wrow__kg { font-weight: 700; font-variant-numeric: tabular-nums; }
.wrow__delta { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.wrow__note { color: var(--text-secondary); font-size: var(--t-xs); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- meal plan editor ---------- */
.mealed { height: 420px; padding: var(--s-3); resize: vertical; line-height: 1.6;
  font-variant-ligatures: none; }

/* ---------- private notes ---------- */
.noteadd { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-end; }
.noteadd textarea { height: 84px; padding: var(--s-3); resize: vertical; width: 100%; }
.notecard { margin-bottom: var(--s-3); }
.notecard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.notecard__head .when { font-size: var(--t-xs); color: var(--text-muted); }
.notecard p { font-size: var(--t-sm); color: var(--text-secondary); white-space: pre-wrap; }

/* ---------- macro coaching (targets + structured plan builder) ---------- */
.tgt { padding: var(--s-4) var(--s-5); }
.tgtgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: var(--s-3); }
.tgtfield { display: flex; flex-direction: column; gap: 6px; }
.tgtfield span { font-size: var(--t-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.tgtfield input { width: 100%; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }

.mpslot { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
/* slot header rides a plated steel bar like the program day cards (forged system) */
.mpslot__head { display: flex; align-items: center; justify-content: space-between;
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-5)) var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--plate-line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background-image: var(--plate-sheen), var(--steel-lines), var(--plate-fill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5); }
.mpslot__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-display); font-size: var(--t-base); color: #EDEAE1;
  text-shadow: 0 2px 5px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05); }
.mpihead, .mpirow { display: grid; grid-template-columns: minmax(140px, 1fr) 64px 52px 52px 52px 34px;
  gap: var(--s-2); align-items: center; }
.mpihead { padding: var(--s-2); background-image: var(--plate-sheen), var(--steel-lines), var(--plate-fill);
  border: 1px solid var(--line-soft); border-radius: var(--r-xs); }
.mpihead span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); }
.mpirow { padding: var(--s-2); }
.mpirow input { height: 40px; }
.mpiname { background: var(--steel-400); border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--text-primary); padding: 0 10px; min-width: 0; }
.mpiname:focus { border-color: var(--ember); outline: none; }
.mpinum { width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.mptot { padding: var(--s-4) var(--s-5); margin-top: var(--s-2); }
.mptot .eyebrow { margin-bottom: var(--s-2); }
.mptot__item { margin-right: var(--s-4); font-size: var(--t-sm); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.mptot__item b { color: var(--text-primary); }
.mptot__item small { color: var(--text-faint); }
.diarytot { font-size: var(--t-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.diarytot b { color: var(--ember); }
@media (max-width: 640px) {
  .mpihead, .mpirow { grid-template-columns: minmax(90px, 1fr) 54px 44px 44px 44px 30px; gap: 5px; }
}

/* diary: collapsible busy slots + shared bits */
.lab-note { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 500; }
.dslot { border-top: 1px solid var(--line-soft); padding: 8px 0; }
.dslot:first-of-type { border-top: 0; }
.dslot__head, .dslot summary { display: flex; align-items: baseline; gap: var(--s-3); cursor: pointer; }
.dslot summary { list-style: none; }
.dslot summary::-webkit-details-marker { display: none; }
.dslot__name { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; flex: none; }
.dslot__count { font-size: var(--t-xs); color: var(--text-faint); flex: 1; }
.dslot__kcal { font-size: var(--t-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dslot__chev { color: var(--text-faint); font-size: var(--t-xs); transition: transform var(--dur-fast) var(--ease); }
.dslot[open] .dslot__chev { transform: rotate(180deg); }
.dline { display: flex; justify-content: space-between; gap: var(--s-3); padding: 5px 0 0;
  font-size: var(--t-sm); color: var(--text-secondary); }
.dline span:last-child { flex: none; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--t-xs); }
.dplan { color: var(--ember); font-weight: 600; font-size: var(--t-xs); }

/* ============================ Phase 5 - readout layer ============================
   Mono for every numeral + micro-label on the coach side, same rule as the client. */
.rcard__weight .num, .rcard__trend, .stat, .wrow__kg, .wrow__delta, .wrow__date,
.diarytot, .dslot__kcal, .dline span:last-child, .setline .nums, .sess__date,
.mpinum, .tgtgrid input,
.mptot__item, .libcard__cues, .kpi {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.rcard__meta, .wrow--head span, .mpihead span, .dslot__count {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* macro entry grid: 2x2 labelled, never clips on a narrow sheet */
.macrogrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
.macrogrid .input { min-width: 0; }

/* ============================ Phase 3 - forged re-skin ============================ */

/* workout box heads: the day name rides a steel header bar inside the panel */
.daycard__head { margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-3);
  padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--plate-line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background-image: var(--plate-sheen), var(--steel-lines), var(--plate-fill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.5); }
.daycard__head .rowbtn { color: var(--text-secondary); }
/* RIR select: gold-outlined chip; "F" reads as the failure state (reference builder) */
.setrow__rir { border-color: rgba(217,164,65,0.4) !important; color: var(--ember); font-weight: 700; }
.setrow__rir:has(option[value="F"]:checked) { border-color: rgba(195,106,80,0.55) !important;
  color: var(--danger); box-shadow: 0 0 12px -4px rgba(195,106,80,0.5); }

/* modals + sheets: plated card with a gold hairline + soft bloom (reference editor) */
.modal__card, .sheet {
  background-image: var(--plate-sheen), var(--texture-forge), var(--steel-lines), var(--plate-fill);
  background-blend-mode: normal, overlay, normal, normal;
  background-size: auto, 420px 420px, auto, auto;
  border: 1px solid rgba(217,164,65,0.32);
  box-shadow: var(--shadow-lg), 0 0 70px -20px var(--ember-glow), var(--plate-bevel);
}
.sheet { border-bottom: 0; }
.modal__title {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(217,164,65,0.22));
}

/* weigh-ins: hero readout (same numbers as row 1 of the weekly table) + striped rows */
.wihero { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }
.wihero__row { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.wihero__kg { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -0.03em; color: #EDEAE1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.wihero__delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-md); font-weight: 700; }
.wihero__delta small { display: block; font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.wrow:not(.wrow--head):nth-child(even) { background: rgba(255,255,255,0.022); }
.wrow { border-radius: var(--r-xs); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
/* weigh-ins tables side by side on a laptop (Ethan, 23 Jul); stack on phones */
.wigrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-5); margin-top: var(--s-5); align-items: start; }
@media (max-width: 860px) { .wigrid { grid-template-columns: 1fr; } }
.wipanel { padding: var(--s-4) var(--s-5); }

/* ---- dashboard home (Ethan's laptop reference, 23 Jul): greeting + needs
   attention queue + recent activity feed. Attention panel gets a soft ember
   bloom behind it like the reference. ---- */
.pagehead--row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; }
.addbtn { flex: none; }
.dashdate { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--s-2); }
.dashgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s-5); align-items: start; }
@media (max-width: 900px) { .dashgrid { grid-template-columns: 1fr; } }
.attnpanel, .actpanel { padding: var(--s-4) var(--s-5); }
.attnpanel { box-shadow: var(--shadow-sm), var(--inset-top), 0 0 70px -22px rgba(217,122,42,0.4); }
/* Form clips to review checklist (Jono's ask) */
.fcpanel { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); box-shadow: var(--shadow-sm), var(--inset-top), 0 0 70px -22px rgba(217,122,42,0.4); }
.fccount { display: inline-block; margin-left: var(--s-2); padding: 1px 9px; border-radius: 999px;
  background: var(--ember); color: #1a1205; font-size: var(--t-xs); font-weight: 700; font-family: var(--font-mono); }
.fctodolist { display: flex; flex-direction: column; }
.fctodo { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.fctodo:first-child { border-top: 0; }
/* Request rows glow in their type colour (Ethan's ask): Loom blue, Call gold.
   inset bar + faint wash + soft glow, so the two read as an even pair. */
.fctodo--loom { border-top-color: transparent; border-radius: var(--r-sm); padding-left: var(--s-3);
  background: linear-gradient(90deg, rgba(91,141,239,0.12), transparent 62%);
  box-shadow: inset 3px 0 0 var(--loom), 0 0 26px -12px var(--loom-glow); }
.fctodo--call { border-top-color: transparent; border-radius: var(--r-sm); padding-left: var(--s-3);
  background: linear-gradient(90deg, var(--ember-glow-soft), transparent 62%);
  box-shadow: inset 3px 0 0 var(--ember), 0 0 26px -12px var(--ember-glow); }
.fctodo--loom + .fctodo, .fctodo--call + .fctodo { border-top-color: transparent; }
/* undo affordance after Mark handled/reviewed: curly arrow + live countdown */
.undobtn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  cursor: pointer; background: none; border: 0; color: var(--ember); padding: 2px 4px; }
.undobtn__i { width: 22px; height: 22px; }
.undobtn__n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums; line-height: 1; }
.undobtn:hover { color: var(--ember-hot); }
.fctodo--undone { opacity: 0.85; }
.fctodo__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fctodo__who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fctodo__when { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--text-muted); }
.attnhead { display: block; margin-bottom: var(--s-3); }
.attnrow { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft); }
.attnrow:first-child { border-top: 0; }
.attnrow__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.attnrow__who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attnrow__why { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; }
.attnrow__why--bad  { color: var(--danger); }
.attnrow__why--warn { color: var(--warn); }
.attnrow__why--gold { color: var(--ember); }
.attnrow__why--dim  { color: var(--text-muted); }
.attnrow__btn { flex: none; }
.attnmore { display: block; padding-top: var(--s-3); border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em;
  color: var(--text-muted); }
.attnmore:hover { color: var(--ember); }
.avatar--sm { width: 36px; height: 36px; font-size: 0.72rem; }
@media (max-width: 560px) {
  .attnrow { flex-wrap: wrap; }
  .attnrow__btn { margin-left: calc(36px + var(--s-4)); }
}

/* ============================ Phase 4 - schedule painter ============================ */

/* The scheduler (redesign): one cycle, two modes. Fixed week = a Mon-Sun row of real
   dates; rolling = N "Day n" cells that drift across weekdays. Tap a cell to paint it a
   training day (ember fill, shows the workout that lands there); unpainted = rest. */
.cyclepv { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5) var(--s-5); }
.cyclepv__head { display: flex; align-items: center; justify-content: flex-start;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.cyclepv__head .eyebrow { margin-right: auto; }
.cyclepv__note { font-size: var(--t-xs); color: var(--text-muted); font-style: italic;
  flex-basis: 100%; }
.cyclepv__grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(7, minmax(0, 1fr)); }
/* mode toggle: Fixed week | Rolling cycle */
.segmode { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px; background: var(--steel-100); }
.segmode__opt { font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
  padding: 5px 12px; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--text-secondary); transition: background 140ms var(--ease), color 140ms var(--ease); }
.segmode__opt.is-on { background: var(--ember-fill); color: var(--ember-ink); }
/* rolling controls: cycle length + start date */
.rollctl { display: inline-flex; gap: var(--s-3); align-items: flex-end; }
.rollctl__lab { display: inline-flex; flex-direction: column; gap: 3px;
  font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--font-mono); }
.rolllen { max-width: 68px; height: 34px; }
.rollstart { max-width: 150px; height: 34px; }
.cyrow { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3);
  min-width: 0; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--steel-100);
  color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.cyrow:hover { border-color: var(--line-strong); }
.cyrow__date { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cyrow__day { font-weight: 600; font-size: var(--t-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cyrow--rest .cyrow__day { color: var(--text-muted); font-weight: 500; }
/* painted = a training day: ember-gold fill, dark ink, the landing workout's name */
.cyrow--on { background: var(--ember-fill); border-color: var(--gold-edge);
  box-shadow: 0 0 22px -8px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,0.25); }
.cyrow--on .cyrow__date { color: var(--ember-ink); opacity: 0.75; }
.cyrow--on .cyrow__day { color: var(--ember-ink); }
/* phone: 7 columns must not overflow (coach is laptop-first but stays decent) */
@media (max-width: 700px) {
  .cyclepv__grid { gap: var(--s-1); }
  .cyrow { padding: var(--s-2) var(--s-1); border-radius: var(--r-sm); }
  .cyrow__date { font-size: 0.5rem; }
  .cyrow__day { font-size: 0.62rem; }
}

/* Phase 4 round 3: the workout box's date chip (the day it lands, from its slot) */
.daychip { flex: none; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ember); padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid rgba(217,164,65,0.35); background: rgba(217,164,65,0.08); white-space: nowrap; }

/* client-picked profile icon (client.js AV_PRESETS) - same coin, filters mirrored
   from client.css, used app-wide (dashboard, roster, client header, form-clips). */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.av1 { background: #2A1E08; } .av1 img, img.av1 { filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(-10deg) brightness(1.12); }
.avatar.av2 { background: #1C1C24; } .av2 img, img.av2 { filter: grayscale(1) brightness(0.95) contrast(1.15); }
.avatar.av3 { background: #52545C; }
.avatar.av4 { background: #141419; }
.avatar.av5 { background: #141419; }

/* ============ daily tracking panel (Phase 7.5 item 3) ============ */
.dtcard { margin-bottom: var(--s-4); }
.dthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.dttog { width: 46px; height: 28px; border-radius: 14px; background: var(--steel-400);
  border: 1px solid var(--line-strong); position: relative; cursor: pointer; flex: none;
  transition: background var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.dttog i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-muted); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.dttog.on { background: var(--ember); border-color: var(--ember-deep); }
.dttog.on i { transform: translateX(18px); background: #FFF8E8; }
.dtdots { display: flex; gap: 6px; }
.dtdot { flex: 1; display: grid; justify-items: center; gap: 5px; padding: 7px 0 8px;
  background: none; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button.dtdot { cursor: pointer; }
button.dtdot:hover { border-color: var(--line-strong); }
.dtdot__d { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase; }
.dtdot__i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-faint); }
.dtdot.filled .dtdot__i { background: var(--ember); border-color: var(--ember); }
.dtdot.noted .dtdot__i { box-shadow: 0 0 0 2px var(--ember-glow-soft); }
.dtdot.today { border-color: var(--line-strong); background: var(--steel-100); }
.dtavg { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-secondary);
  margin-top: var(--s-3); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dtavg__lab { color: var(--text-faint); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; }
.dtavg--empty { color: var(--text-muted); }
.dthint { font-size: var(--t-xs); color: var(--text-faint); margin-top: var(--s-2); }
.dtauto { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-secondary);
  margin-bottom: var(--s-3); }
.dlvcard { max-width: 480px; }
.dlvrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.dlvrow__l { font-size: var(--t-sm); color: var(--text-secondary); }
.dlvrow__v { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text-primary);
  font-variant-numeric: tabular-nums; text-align: right; }
/* blank answer: quiet the whole row so filled-in questions stand out */
.dlvrow--empty .dlvrow__l { color: var(--text-faint); }
.dlvrow--empty .dlvrow__v { color: var(--text-faint); }
.dlnotein { min-height: 74px; resize: vertical; padding: var(--s-3); }

/* ============ Workout logs: Review by workout + per-workout history table ============ */
.tabh { font-family: var(--font-display, 'Cinzel', serif); font-size: var(--t-md); color: var(--text-primary); margin: 0; letter-spacing: 0.01em; }
.loghead { margin-bottom: var(--s-4); }
.loghead__sub { color: var(--text-secondary); font-size: var(--t-xs); margin-top: var(--s-1); }

.loglist { display: flex; flex-direction: column; gap: var(--s-2); }
.logrow {
  display: grid; grid-template-columns: 76px 1fr auto 14px; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left; padding: var(--s-3) var(--s-4);
  background: var(--steel-200); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text-primary); cursor: pointer; transition: background .12s, border-color .12s;
}
.logrow:hover { background: var(--steel-300); border-color: var(--line-strong); }
.logrow__date { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-secondary); }
.logrow__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logrow__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); }
.logrow__chev { color: var(--text-muted); font-size: var(--t-md); }

.logdrill { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.loglink { background: none; border: none; color: var(--ember); font-size: var(--t-sm); cursor: pointer; padding: 0; }
.loglink:hover { color: var(--ember-hot); }
.logdrill__title { margin: 0; }

.logtbl-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 10px; background: var(--steel-100);
}
.logtbl { border-collapse: separate; border-spacing: 0; font-size: var(--t-xs); min-width: 100%; }
.logtbl th, .logtbl td { padding: var(--s-2) var(--s-3); white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.logtbl__date { font-family: var(--font-mono); color: var(--text-secondary); text-align: center; background: var(--steel-200); }
.logtbl__cell { font-family: var(--font-mono); color: var(--text-primary); text-align: center; }
.lognote-btn { background: none; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ember); font-family: var(--font-mono); font-size: 0.68rem; padding: 2px 8px; cursor: pointer; }
.lognote-btn:hover { color: var(--ember-hot); border-color: var(--ember-deep); background: var(--ember-glow-soft); }
.lognote__body { white-space: normal; color: var(--text-primary); line-height: 1.55; font-size: var(--t-sm); max-height: 60vh; overflow-y: auto; }

/* frozen exercise / label column: opaque bg + right edge so cells scroll under it */
.logtbl__stick { position: sticky; left: 0; z-index: 2; background: var(--steel-200); border-right: 1px solid var(--line-strong); text-align: left; }
.logtbl__corner { z-index: 3; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); font-size: 0.68rem; }
.logtbl__exname { font-weight: 700; color: var(--text-primary); background: var(--steel-300); }
.logtbl__exrow .logtbl__exgap { background: var(--steel-100); }
.logtbl__setlbl { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.03em; }
.logtbl__setrow td.logtbl__cell { color: var(--text-primary); }
.logtbl tbody tr:last-child th, .logtbl tbody tr:last-child td { border-bottom: none; }

/* ============ Program builder: spreadsheet rows (8 Aug) ============ */
.sswrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ssgrid { display: grid; grid-template-columns: minmax(140px, 1.7fr) 54px 74px minmax(94px, 120px) 60px minmax(140px, 2fr) 26px; gap: var(--s-2); align-items: center; min-width: 660px; }
.ssgrid--head { padding: var(--s-2) 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.ssrow { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); }
.ssrow__ex { display: flex; align-items: center; gap: var(--s-2); background: none; border: none; color: var(--text-primary); font-weight: 600; font-size: var(--t-sm); text-align: left; cursor: pointer; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssrow__ex:hover { color: var(--ember); }
.ssrow__ch { color: var(--text-muted); font-size: 0.7rem; flex: none; }
.sscell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ssrestcell { flex-wrap: wrap; }
.ssnum { width: 100%; text-align: center; min-width: 0; }
.ssnote { width: 100%; min-width: 0; }
.ssvaries { color: var(--ember); font-style: normal; font-size: 1.05rem; line-height: 1; flex: none; }
.sspanel { min-width: 660px; padding: var(--s-2) 0 var(--s-3) 26px; }

/* Coach pickers (meal / exercise): centered modal on laptop, not a bottom-docked
   sheet (Jono, 8 Aug: "the box shows at the bottom, make it central"). Phone (<861px)
   keeps the bottom sheet. Appended last so it wins the .sheet border-bottom reset. */
@media (min-width: 861px) {
  .sheet { top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%);
    width: 520px; max-height: 80dvh; border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); padding-bottom: var(--s-4); animation: sheetpop 220ms var(--ease-out); }
}
@keyframes sheetpop { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.35; } }

/* Log week boxes (8 Aug): Week N | date range | session count | workouts done */
.logweek { grid-template-columns: 74px 134px auto minmax(0, 1fr) 14px; }
.logweek__num { font-family: var(--font-display, 'Cinzel', serif); font-weight: 700; color: var(--ember); font-size: var(--t-sm); }
.logweek .logrow__date { color: var(--text-secondary); }
.logweek__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-primary); white-space: nowrap; }
.logweek .logrow__meta { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Photo poses (jono_27): weekly folders + pose grid (coach, read-only) ============ */
.phweek { display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); background: var(--steel-200); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text-primary); cursor: pointer; }
.phweek:hover { background: var(--steel-300); border-color: var(--line-strong); }
.phweek__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--steel-300); font-size: 1.1rem; flex: none; }
.phweek__ico--done { background: var(--ember-glow-soft); color: var(--ember); }
.phweek__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.phweek__sub { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-secondary); }
.phweek__chev { color: var(--text-muted); font-size: var(--t-lg); }
.phdrill { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.phdrill__title { margin: 0; }
.phposegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.phslot { display: flex; flex-direction: column; gap: var(--s-2); }
.phslot__img, .phslot__ph { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.phslot__img { border: 1px solid var(--line); cursor: pointer; }
.phslot__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phslot__ph { display: grid; place-items: center; font-size: 1.6rem; color: var(--text-faint);
  background: var(--steel-100); border: 1.5px dashed var(--line); }
.phslot__label { font-size: var(--t-xs); color: var(--text-secondary); text-align: center; }
.phslot--done .phslot__label { color: var(--text-primary); }