/* ============================================================================
   IRON FORGED — client PWA (Phase 3): Today, workout player, progress.
   Player mechanics mirror Ethan's PersonalOS workout app.
   ============================================================================ */

/* ---------- Today ---------- */
.today-date { font-size: var(--t-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-1); }

.daynext { padding: var(--s-6) var(--s-5); text-align: center; }
.daynext__label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-display); font-size: var(--t-lg); margin-bottom: var(--s-1); }
.daynext__meta { font-size: var(--t-sm); color: var(--text-muted); margin-bottom: var(--s-5); }
.daynext__list { text-align: left; margin: 0 auto var(--s-5); max-width: 340px; }
.daynext__row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.daynext__row:last-child { border-bottom: 0; }
.daynext__row .rx { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.startbtn { width: 100%; max-width: 340px; height: 64px; font-size: var(--t-md); letter-spacing: 0.1em; }

.daypick { display: flex; gap: var(--s-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-4) 0 var(--s-2); }
.daypick button { flex: none; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--steel-100); border: 1px solid var(--line); color: var(--text-secondary);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; }
.daypick button.sel { color: var(--ember); border-color: var(--ember-deep); background: var(--ember-glow-soft); }

.resume-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); cursor: pointer;
  border: 1px solid rgba(217,164,65,0.4); box-shadow: 0 0 30px -12px var(--ember-glow); }
.resume-card b { color: var(--ember); }

/* weigh-in quick add */
.weighrow { display: flex; gap: var(--s-2); align-items: stretch; }
.weighrow .input { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Player ---------- */
.wk-top { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: var(--s-3);
  padding: calc(var(--s-3) + var(--safe-t)) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, rgba(11,11,15,0.96), rgba(11,11,15,0.8));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft); }
.wk-timer { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.wk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); padding: var(--s-4) var(--s-4) 0; }
.wk-stat { text-align: center; padding: var(--s-3); background: var(--steel-100);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.wk-stat b { display: block; font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.wk-stat span { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.wk-body { padding: var(--s-4) var(--s-4) 140px; max-width: 560px; margin: 0 auto; }

.excard { margin-top: var(--s-4); padding: var(--s-4); }
.excard__head { display: flex; align-items: center; gap: var(--s-2); }
.excard__name { font-weight: 800; font-size: var(--t-md); flex: 1; min-width: 0; }
.excard__video { flex: none; }
.excard__note { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.4; padding: 2px 0 0; }

.set-table { margin-top: var(--s-3); }
.set-row { display: grid; grid-template-columns: 34px 1fr 1fr 52px; gap: var(--s-2); align-items: center; padding: 4px 0; }
.set-row.header span { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.set-row .col-set { text-align: center; color: var(--text-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.set-row input { width: 100%; height: 44px; text-align: center; font-variant-numeric: tabular-nums; }
/* done = golden wash across the whole row bar; text stays normal ink (Ethan's call) */
.set-row { position: relative; padding-left: 6px; padding-right: 6px; margin: 0 -6px; border-radius: var(--r-xs); }
.set-row.done { background: linear-gradient(90deg, rgba(217,164,65,0.16), rgba(217,164,65,0.05)); }
.set-row.done input { color: var(--text-primary); border-color: rgba(217,164,65,0.3); background: transparent; }
.tickbtn { height: 44px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--steel-400); border: 1px solid var(--line); color: var(--text-faint);
  font-size: 18px; transition: all var(--dur-fast) var(--ease); }
.tickbtn.done { background: var(--ember-fill); border-color: transparent; color: var(--ember-ink);
  box-shadow: 0 4px 18px -6px var(--ember-glow); }
.tickbtn:active { transform: scale(0.94); }
.set-row .pr-flag { position: absolute; }
.prbadge { display: inline-block; margin-left: 6px; font-size: 0.7rem; }

/* rest timer pill */
.restpill { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b)); z-index: 60;
  display: flex; align-items: center; gap: var(--s-3); padding: 12px 22px;
  border-radius: var(--r-pill); background: var(--steel-300); border: 1px solid var(--ember-deep);
  box-shadow: var(--shadow-lg), 0 0 40px -10px var(--ember-glow); cursor: pointer;
  animation: rise var(--dur) var(--ease-out); }
.restpill b { font-variant-numeric: tabular-nums; font-size: var(--t-lg); color: var(--ember); }
.restpill span { font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.restpill.flash { animation: restflash 600ms var(--ease) 3; }
@keyframes restflash { 50% { background: var(--ember-deep); } }

/* finish + celebration */
.wk-finishbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
  background: linear-gradient(0deg, rgba(11,11,15,0.98), rgba(11,11,15,0.85));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft); display: flex; gap: var(--s-3); }
.wk-finishbar .btn { flex: 1; }

.celebrate { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6); text-align: center; }
.celebrate__inner { max-width: 380px; }
.celebrate h1 { font-size: var(--t-2xl); margin: var(--s-4) 0 var(--s-2); }
.celebrate .crest { width: 110px; height: 110px; margin-bottom: var(--s-2); }
.celebrate__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-6) 0; }
.prline { color: var(--ember); font-weight: 700; margin-top: var(--s-2); }

/* PR toast moment */
.prtoast { position: fixed; top: 18%; left: 50%; transform: translate(-50%, 0) scale(0.9);
  z-index: 70; padding: var(--s-4) var(--s-6); border-radius: var(--r-md); text-align: center;
  background: var(--ember-fill); color: var(--ember-ink); font-weight: 800;
  box-shadow: 0 0 80px var(--ember-glow), var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all 300ms var(--ease-out); }
.prtoast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.prtoast .big { font-size: var(--t-lg); display: block; }

.restpill__skip { padding: 7px 14px; border-radius: var(--r-pill); background: var(--steel-400);
  border: 1px solid var(--line-strong); color: var(--text-secondary); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- keypad (mirrors the PersonalOS workout keypad, forged skin) ---------- */
.kpad-scrim { position: fixed; inset: 0; z-index: 88; background: rgba(8,8,11,0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.kpad-scrim.open { opacity: 1; pointer-events: auto; }
.kpad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 89;
  background: var(--steel-200); border-top: 1px solid var(--line-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--s-4) calc(var(--s-4) + var(--safe-b));
  transform: translateY(105%); transition: transform 260ms var(--ease-out); }
.kpad.open { transform: translateY(0); }
@media (min-width: 861px) { .kpad { left: 50%; right: auto; transform: translate(-50%, 105%); width: 420px; }
  .kpad.open { transform: translate(-50%, 0); } }
.kpad__head { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-1) var(--s-3); }
.kpad__label { flex: 1; font-size: var(--t-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpad__val { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ember); }
.kpad__chips { display: flex; gap: var(--s-2); padding-bottom: var(--s-3); }
.kpad__chips button { flex: 1; height: 38px; border-radius: var(--r-xs); background: var(--steel-300);
  border: 1px solid var(--line); color: var(--text-secondary); font-weight: 700;
  font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.kpad__chips button:active { background: var(--steel-400); color: var(--ember); }
.kpad__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.kp-btn { height: 52px; border-radius: var(--r-sm); background: var(--steel-300);
  border: 1px solid var(--line); color: var(--text-primary); font-size: var(--t-md);
  font-weight: 700; font-variant-numeric: tabular-nums; transition: background var(--dur-fast) var(--ease); }
.kp-btn:active { background: var(--steel-400); }
.kp-btn.action { color: var(--ember); font-size: var(--t-sm); }
.kp-btn.done { background: var(--ember-fill); border-color: transparent; color: var(--ember-ink);
  letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-sm); }
input.kpad-focus { border-color: var(--ember) !important; box-shadow: 0 0 0 2px var(--ember-glow-soft); }

/* ---------- voice note (debrief mic, OS pattern) ---------- */
.notewrap { position: relative; }
.micbtn { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--steel-300); border: 1px solid var(--line); color: var(--text-secondary); }
.micbtn svg { width: 18px; height: 18px; }
.micbtn.rec { background: var(--ember-fill); border-color: transparent; color: var(--ember-ink);
  animation: micpulse 1.4s var(--ease) infinite; }
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ember-glow); }
  50%      { box-shadow: 0 0 0 9px rgba(217,164,65,0); }
}
.micstatus { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-muted); min-height: 1.1em; }

/* ---------- Progress ---------- */
.sesscard { margin-bottom: var(--s-4); }
.offline-note { font-size: var(--t-xs); color: var(--warn); }

/* sync banner */
.syncbar { position: fixed; top: calc(var(--safe-t)); left: 50%; transform: translateX(-50%);
  z-index: 65; margin-top: 8px; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--steel-300); border: 1px solid var(--line-strong); font-size: var(--t-xs);
  color: var(--text-secondary); box-shadow: var(--shadow-md); }