/* gym.css — consumer-first redesign stylesheet, scoped to gym mode */

/* Self-hosted display + data type system — CSP font-src 'self', no CDN, font-display:swap (no FOIT) */
@font-face{font-family:'Space Grotesk';font-weight:500 700;font-display:swap;src:url('./fonts/space-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:400 700;font-display:swap;src:url('./fonts/jetbrains-mono-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('./fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('./fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('./fonts/inter-700.woff2') format('woff2');}

:root{
  --bg: #030407; --bg-2: #0a0b10;
  --card: rgba(20, 22, 32, 0.5);
  --panel: rgba(15, 18, 25, 0.6);
  --elev: rgba(25, 28, 40, 0.7);
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
  --ink: #F0F4F8; --dim: #94A3B8; --faint: #475569;
  --cy:#e0b271; --cy-deep:#c9974f; --cy-soft:rgba(224,178,113,.15);
  --good: #0d9488; --green: #0d9488; --green-light: #0d9488; --warn: #2563eb;
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,"SFMono-Regular","Segoe UI Mono",monospace;
  --pad:16px;
  --atk-primary:#e0b271; --atk-secondary:#c97a5b; --atk-effort:#e0b271; --atk-gravity:#ff5d73; --atk-bg:#0d0e12; --atk-bone:#5b6472;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
*:focus-visible{outline:2px solid var(--warn, #2563eb);outline-offset:2px;border-radius:2px;}

html,body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.45 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* phone frame so the mobile-first intent is obvious on desktop */
.phone{max-width:440px;margin:0 auto;min-height:100vh;padding-bottom:56px;
  background:
    radial-gradient(125% 80% at 50% -8%, rgba(224,178,113,.07), transparent 58%),
    radial-gradient(100% 55% at 50% 112%, rgba(224,178,113,.045), transparent 55%),
    linear-gradient(180deg,#090b0f 0%,var(--bg) 42%,#070809 100%);
  background-attachment: fixed;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;overflow:hidden;}

/* engineering-grid wallpaper — top-masked so it fades into the floor view; static (motion-safe) */
.phone::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:34px 34px,34px 34px;
  -webkit-mask-image:radial-gradient(135% 100% at 50% 0%,#000 55%,transparent 88%);
          mask-image:radial-gradient(135% 100% at 50% 0%,#000 55%,transparent 88%);}

/* sticky top: only what matters at a glance */
.top{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#0b0d11,rgba(11,13,17,.86));
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.03);
  padding:16px 20px;display:flex;align-items:center;gap:12px;}
.readiness-hud{display:flex;align-items:center;gap:6px;margin-right:auto;cursor:pointer;}
.r-ring{width:20px;height:20px;transform:rotate(-90deg);}
.r-val{transition:stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1);}
.r-text{font:700 11px var(--font-mono);color:var(--cy);letter-spacing:0.04em;}
.top .live{display:flex;align-items:center;gap:7px;font:600 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--good);white-space:nowrap;}

/* Responsive HUD for narrow mobile viewports */
@media (max-width: 390px) {
  .top { padding: 12px 14px; gap: 8px; }
  .top .live .live-text { display: none; }
  .top .live { gap: 0; }
  .readiness-hud { gap: 4px; }
  .r-text { font-size: 10px; }
  .top .t { font-size: 14px; }
  .top .planbtn { padding: 6px 8px; font-size: 10px; }
}
@media (max-width: 350px) {
  .readiness-hud .r-text { display: none; }
}

/* Universal Motion Silencer */
@media (prefers-reduced-motion: reduce) {
  .top .live .dot, .kinematic-vis::before, .mrv-event-horizon { animation: none !important; }
  .top .live .dot { opacity: 1; }
}
.top .live .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:p 1.6s infinite;}
@keyframes p{0%,100%{opacity:1}50%{opacity:.4}}
.top .t{font:700 16px var(--font-display);letter-spacing:.06em;margin-left:auto;}
.top .planbtn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(224,178,113,.08);
  color:var(--cy);border-radius:12px;padding:7px 11px;font:700 11px/1 var(--font-mono);letter-spacing:.08em;cursor:pointer;}
.top .planbtn:active{transform:scale(.96);}
.top .x{color:var(--dim);font-size:20px;text-decoration:none;line-height:1;}
.body{flex:1;padding:var(--pad);display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;}

/* progress */
.prog{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 10px;}
.prog .bar{grid-column:1/-1;height:6px;border-radius:12px;background:rgba(255,255,255,.07);overflow:hidden;}
.prog .bar i{display:block;height:100%;width:20%;background:var(--cy);border-radius:12px;transition:width .4s;position:relative;overflow:hidden;}
@media (prefers-reduced-motion:no-preference){.prog .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);will-change:transform;animation:progSheen 2.4s linear infinite;}
  .prog.near-complete .bar i::before { content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(224,178,113,.38); opacity:.35; will-change:opacity,transform; animation:auraPulse 2s infinite alternate; }
}
@keyframes progSheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes auraPulse{from{opacity:.35;transform:scaleX(.98)}to{opacity:.86;transform:scaleX(1)}}
.prog.near-complete .bar i { box-shadow: 0 0 12px var(--cy); }
.prog .n{font:600 12px var(--font-mono);color:var(--dim);}
/* earned streak chip — derived from the real sessions store, hidden under 2 days
   (honest, never fabricated); static, no motion */
.prog .streak{justify-self:end;font:700 11px var(--font-mono);color:var(--cy);letter-spacing:.04em;
  border:1px solid rgba(224,178,113,.3);border-radius:999px;padding:3px 10px;background:rgba(224,178,113,.08);}
.prog .streak[hidden]{display:none;}
/* offline-trust indicator (blueprint 1.8): once the first set persists, confirm the
   no-account consumer their data is safe locally. Static, muted, spans the row. */
.prog .saved-note{grid-column:1/-1;font:600 11px var(--font-mono);color:var(--dim);letter-spacing:.02em;display:flex;align-items:center;gap:6px;}
.prog .saved-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;}
.prog .saved-note[hidden]{display:none;}
.prog .segments{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;min-height:5px;}
.prog .seg{height:5px;border-radius:999px;background:rgba(255,255,255,.08);}
.prog .seg.done,.prog .seg.current{background:linear-gradient(90deg,var(--cy),#78d6a3);}
.prog .seg.current{outline:1px solid rgba(255,255,255,.18);outline-offset:1px;}
/* Glassmorphism card system - unified styling tokens across cockpit cards */
.now, .loop-card, .next-action-card, .autoreg-card, .swipe-scrubber, .load-entry, .rpe-slider, .stat, details, .radar, .avatar-container, .restcd {
  background: var(--card);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* autoregulation suggestion (blueprint 1.5): propose, never command. Static, hot-surface. */
.autoreg-card{border-color:rgba(224,178,113,.28);padding:14px;display:grid;gap:6px;}
.autoreg-card[hidden]{display:none;}
.swipe-scrubber[hidden]{display:none;} /* anti-cheat slice 2b: load is prescribed, no swipe-to-adjust */
.autoreg-kicker{font:800 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);}
.autoreg-main{font:800 15px/1.2 var(--font-display);color:var(--ink);}
.autoreg-why{font:600 12px/1.35 var(--font-body);color:var(--dim);}
.autoreg-actions{display:flex;gap:8px;margin-top:4px;}
.autoreg-actions button{min-height:44px;flex:1;border-radius:10px;font:700 13px var(--font-body);cursor:pointer;}
.autoreg-apply{background:var(--cy);color:#0a0b10;border:none;}
.autoreg-keep{background:transparent;color:var(--ink);border:1px solid var(--line);}
.next-action-card{background:linear-gradient(135deg,rgba(224,178,113,.12),rgba(13,148,136,.08)),var(--card);border-color:rgba(224,178,113,.28);display:grid;gap:5px;min-height:86px;padding:14px;position:relative;overflow:hidden;}
.next-action-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(224,178,113,.16),transparent 42%,rgba(13,148,136,.12));opacity:.26;pointer-events:none;}
.next-action-kicker{font:800 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);}
.next-action-main{font:800 18px/1.18 var(--font-display);letter-spacing:-.01em;color:var(--ink);}
.next-action-sub{font:600 12px/1.35 var(--font-body);color:var(--dim);max-width:52ch;}
.next-action-card[data-state="rest"]{border-color:rgba(34,211,238,.36);}
.next-action-card[data-state="complete"]{border-color:rgba(52,211,153,.38);}
.loop-card{padding:13px;display:grid;gap:10px;}
.loop-h{font:800 10px var(--font-mono);letter-spacing:.14em;color:var(--cy);text-transform:uppercase;}
.loop-summary{font:600 13px/1.35 var(--font-body);color:var(--ink);}
.loop-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;}
.loop-row label{font:700 10px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;}
.loop-row output{font:800 16px var(--font-mono);color:var(--cy);}
.loop-card input[type=range]{width:100%;appearance:none;background:rgba(255,255,255,.07);height:8px;border-radius:12px;outline:none;}
.loop-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:12px;background:var(--cy);cursor:pointer;}
.loop-card input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:12px;background:var(--cy);cursor:pointer;border:0;}
.loop-call{font:600 12px/1.35 var(--font-body);color:var(--dim);border-top:1px solid var(--line);padding-top:9px;}

.program-mode-card{padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;border-color:rgba(224,178,113,.28);}
.program-mode-kicker{font:800 9px var(--font-mono);letter-spacing:.14em;color:var(--cy);text-transform:uppercase;}
.program-mode-card h2{margin:4px 0;font:800 18px/1.1 var(--font-display);}
.program-mode-card p{margin:0;color:var(--dim);font:600 12px/1.4 var(--font-body);}
.program-mode-privacy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:9px;}
.program-mode-switch{display:grid;grid-template-columns:auto auto;gap:5px 8px;align-items:center;cursor:pointer;min-height:44px;}
.program-mode-switch input{position:absolute;opacity:0;pointer-events:none;}
.program-mode-switch span{width:48px;height:26px;border:1px solid var(--line-2);border-radius:99px;background:rgba(255,255,255,.07);position:relative;transition:background .18s,border-color .18s;}
.program-mode-switch span::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:var(--dim);transition:transform .18s,background .18s;}
.program-mode-switch b{grid-column:1/-1;text-align:center;font:800 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.program-mode-switch input:checked + span{background:rgba(224,178,113,.2);border-color:var(--cy);}
.program-mode-switch input:checked + span::after{transform:translateX(22px);background:var(--cy);}
.program-mode-switch input:focus-visible + span{outline:2px solid var(--cy);outline-offset:3px;}
.program-mode-card[data-enabled="true"]{border-color:rgba(224,178,113,.56);box-shadow:inset 0 0 0 1px rgba(224,178,113,.08);}
body.program-mode-on #nReps{cursor:default;}
/* undo stays visible in Program Mode — a skip is undoable (hRaw/sRaw snapshot) */
body.program-mode-on .voice-preview{display:none;}

/* Biokinetic Test UI */
.bio-test-btn { width: 100%; padding: 14px; background: rgba(13, 148, 136, 0.1); border: 1px solid var(--cy); border-radius: 12px; font: 800 14px var(--font-mono); color: var(--cy); cursor: pointer; text-transform: uppercase; letter-spacing: 0.1em; transition: 0.2s; outline: none; }
.bio-test-btn:active { transform: scale(0.96); background: rgba(13, 148, 136, 0.3); }
.bio-test-btn.testing { background: var(--cy); color: #000; animation: pulseBio 0.5s infinite alternate; }
.bio-test-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; display: none; }
.bio-test-bar.show { display: block; }
.bio-fill { height: 100%; width: 0%; background: var(--cy); transition: width 0.1s linear; }
@keyframes pulseBio { from { opacity:.82; transform:scale(1); } to { opacity:1; transform:scale(.99); } }

/* THE hero: current exercise — one job */
.now{padding:18px;}
.now .eyebrow{font:700 10px var(--font-mono);letter-spacing:.18em;color:var(--cy);text-transform:uppercase;}
.now h1{margin:5px 0 2px;font:800 28px/1.04 var(--font-display);letter-spacing:-.015em;}
.now .set{color:var(--dim);font-size:13px;}
.now .last{margin-top:7px;font:600 12px var(--font-mono);color:var(--dim);}
.now .last b{color:var(--cy);}
.now .last.pr b{color:var(--good);}
.now details.avatar-cue { margin-top:16px; font-size:13px; color:var(--ink); background:rgba(224,178,113,0.04); border-left:2px solid var(--cy); border-radius:12px; cursor:pointer; overflow:hidden; border:none; border-left:2px solid var(--cy); box-shadow:none; }
.now details.avatar-cue summary { display:flex; gap:12px; align-items:center; padding:12px; outline:none; }
.now details.avatar-cue summary::-webkit-details-marker { display:none; }
.now details.avatar-cue .av-icon{width:24px;height:24px;border-radius:12px;background:var(--cy);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.now details.avatar-cue b{color:var(--cy);display:block;font-size:11px;letter-spacing:0.05em;text-transform:uppercase;}
.now details.avatar-cue .cue-content { padding: 0 12px 12px 48px; }

/* MRV Saturation Bar (Phase 28) */
.mrv-bar{margin-top:12px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px;}
.mrv-bar .mrv-h{font:700 10px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;display:flex;justify-content:space-between;}
.mrv-bar .mrv-track{height:4px;border-radius:12px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;}
.mrv-bar .mrv-fill{height:100%;width:0%;background:var(--cy);transition:width 0.4s, background 0.4s;}

/* Phase 32: Local kinematic viewport */
.kinematic-vis {
  margin-top: 16px;
  background: radial-gradient(circle at 50% 50%, #14130f 0%, #050608 100%);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 4px 20px rgba(224,178,113,0.05);
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.kinematic-vis::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.kinematic-vis::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(224,178,113,0.08), transparent);
  animation: kvscan 3s infinite linear; pointer-events: none; z-index: 2;
}
/* Kinematic HTML Overlays */
.kv-angle-label {
  position: absolute; font: 700 10px var(--font-mono); color: var(--cy);
  background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(224,178,113, 0.3); box-shadow: 0 0 10px rgba(224,178,113, 0.2);
  backdrop-filter: blur(4px); transform: translate(-50%, -50%); pointer-events: none; z-index: 10;
}
@keyframes kvscan { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }

.mrv-event-horizon {
  border-color: rgba(37,99,235,.5) !important;
  box-shadow: 0 0 20px rgba(37,99,235,.2) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .mrv-event-horizon { animation: eventHorizonPulse 1.5s infinite; }
}
@keyframes eventHorizonPulse {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: .94; transform: translateY(-1px); }
}
.mrv-event-horizon .mrv-fill {
  background: linear-gradient(90deg, #2563eb, #2563eb) !important;
}
.mrv-event-horizon .mrv-h b { color: var(--warn); }

/* up-next: the immediate next lift, always visible, one tap to the full plan */
.upnext{display:flex;align-items:center;gap:10px;background:transparent;border:1px dashed var(--line);
  border-radius:12px;padding:11px 13px;cursor:pointer;}
.upnext:active{background:rgba(255,255,255,.03);}
.upnext .lab{font:700 10px var(--font-mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase;}
.upnext .nm{font-weight:600;font-size:14px;}
.upnext .sch{color:var(--dim);font-size:12px;}
.upnext .go{margin-left:auto;color:var(--cy);font:700 11px var(--font-mono);}

/* the three numbers — big, thumb-friendly */
.nums{display:flex;gap:7px;margin-bottom:15px;}
.num{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);}
.num label{display:block;font:700 9px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-bottom:6px;}
.num .v{font:800 24px/1 var(--font-mono);color:var(--ink);margin-bottom:4px;}
.num .u{font-size:11px;color:var(--dim);}
.num.on{border-color:var(--cy);box-shadow:none;}

/* Phase 40: Glycolytic Tachometer */
.tachometer-wrap { position: relative; overflow: hidden; cursor: ew-resize; }
.tachometer-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transform: rotate(-90deg); pointer-events: none; }
.tacho-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 6; }
.tacho-fill { fill: none; stroke: var(--cy); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276; stroke-dashoffset: 276; transition: stroke-dashoffset 0.2s cubic-bezier(0.2,0.8,0.2,1), stroke 0.3s; }
.tacho-fill.hypertrophy { stroke: #e0b271; filter: drop-shadow(0 0 8px #e0b271); }

/* Kinetic Swipe Scrubber */
.swipe-scrubber { padding: 14px; margin-bottom: 10px; position: relative; touch-action: none; overflow: hidden; }
.swipe-scrubber .lab { font: 700 10px var(--font-mono); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; margin-bottom: 10px; pointer-events: none; }
.scrub-track { height: 44px; background: rgba(0,0,0,0.3); border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
.scrub-knob { width: 50px; height: 36px; background: var(--cy); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #000; font-weight: 900; font-size: 14px; letter-spacing: 2px; cursor: grab; box-shadow: 0 0 10px rgba(13, 148, 136, 0.5); transition: transform 0.1s; position: absolute; left: calc(50% - 25px); }
.scrub-knob:active { cursor: grabbing; background: #fff; box-shadow: 0 0 20px #fff; }

/* Holographic Share Modal */
.share-preview-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.share-preview-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); }
.share-preview-content { position: relative; z-index: 1001; width: 100%; max-width: 400px; display: flex; flex-direction: column; perspective: 1000px; margin: auto 0; padding: 8px 0 24px; }
.holographic-wrapper { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); transform-style: preserve-3d; transition: transform 0.1s ease-out; }
.holographic-wrapper canvas { width: 100%; height: 100%; border-radius: 20px; display: block; }
.holo-sheen { position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.4) 25%, transparent 30%); pointer-events: none; mix-blend-mode: color-dodge; z-index: 2; transform: translateZ(1px); background-size: 200% 200%; background-position: -50% 0; transition: background-position 0.1s ease-out; }
.download-holo-btn { width: 100%; padding: 16px; margin-top: 30px; background: var(--cy); color: #000; font: 800 16px var(--font-mono); border-radius: 12px; border: none; cursor: pointer; box-shadow: 0 0 20px rgba(13,148,136,0.4); text-transform: uppercase; }

.load-entry{padding:12px;margin-top:10px;}
.load-entry label{display:block;font:700 10px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-bottom:8px;}
.load-entry input{width:100%;appearance:textfield;background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:12px;color:var(--ink);font:800 20px/1 var(--font-mono);padding:12px;outline:none;}
.load-entry input:focus{border-color:var(--cy);}
.load-entry input[readonly]{cursor:default;opacity:.9;border-style:dashed;background:rgba(255,255,255,.03);}
.rpe-slider input:disabled{cursor:default;opacity:.75;}
.load-target-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:8px;}
.load-target-row span{color:var(--dim);font:600 11px/1.35 var(--font-body);}
.load-target-row button{min-height:44px;border:1px solid rgba(224,178,113,.36);background:rgba(224,178,113,.10);color:var(--ink);border-radius:12px;padding:8px 10px;font:800 11px var(--font-mono);cursor:pointer;white-space:nowrap;}
.load-target-row button:active{transform:scale(.98);}

/* RPE Slider */
.rpe-slider{padding:14px;margin-bottom:14px;}
.rpe-slider .lab{font:700 10px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin-bottom:12px;}
.rpe-track{position:relative;}
.rpe-track input{width:100%;appearance:none;background:rgba(255,255,255,.07);height:8px;border-radius:12px;outline:none;}
.rpe-track input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:12px;background:var(--cy);cursor:pointer;box-shadow:none;}
.rpe-track input::-moz-range-thumb{width:24px;height:24px;border-radius:12px;background:var(--cy);cursor:pointer;border:0;box-shadow:none;}
.effort-guide{margin-top:10px;color:var(--ink);font:700 12px/1.35 var(--font-body);}
.rpe-ticks{display:flex;justify-content:space-between;margin-top:8px;padding:0 8px;font:600 10px var(--font-mono);color:var(--dim);}
.rpe-warn{font-size:12px;color:var(--warn);margin-top:10px;font-weight:700;display:none;align-items:center;gap:6px;}
.rpe-warn.show{display:flex;}

/* THE PREMIUM ACTION BUTTON */
.log{width:100%;border:none;border-radius:16px;padding:18px;font:800 20px/1 var(--font-display);
  letter-spacing:0.04em;cursor:pointer;color:#000;
  background: linear-gradient(135deg, var(--cy), var(--cy-deep));
  box-shadow: 0 4px 15px rgba(224,178,113,0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
  position: relative; overflow: hidden;
}
.log::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(rgba(255,255,255,0.2), transparent); transform: rotate(45deg); transition: 0.3s; pointer-events: none; opacity: 0; }
.log:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(224,178,113,0.5); filter: brightness(1.1); }
.log:hover::after { opacity: 1; top: -100%; left: -100%; }
.log:active{transform: translateY(2px); box-shadow: 0 2px 10px rgba(224,178,113,0.3);}
/* anti-cheat slice 3: honest "not completed" — muted secondary, never competes with LOG SET */
.miss{width:100%;margin-top:8px;border:1px solid var(--line-2);border-radius:14px;padding:13px;font:700 13px/1 var(--font-mono);letter-spacing:0.04em;cursor:pointer;background:transparent;color:var(--dim);}
.miss:hover{color:var(--ink);border-color:var(--dim);}
.miss:active{transform:translateY(1px);}

/* Skip button — first-class logged event, honest and neutral (not punishing).
   Equal visual weight to LOG SET but neutral accent: skipping a set you can't do
   is the correct, respected move — same status as logging one you completed.
   (The old .program-mode-bar toggle is gone — the Program Mode card is the one switch.) */
.skip{width:100%;margin-top:8px;border:1px solid var(--line-2);border-radius:16px;padding:16px;font:800 14px/1 var(--font-mono);letter-spacing:0.06em;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--ink);display:none;transition:border-color .18s ease,background .18s ease;}
.skip:hover{border-color:var(--dim);background:rgba(255,255,255,.07);}
.skip:active{transform:translateY(1px);}
.skip:focus-visible{outline:2px solid var(--cy);outline-offset:3px;}

/* one-level undo — always visible after a log (free-mode pattern), ghost weight so
   LOG SET stays the System-1 primary; >=44px hit area per tap-sovereignty */
.undo-set{width:100%;min-height:44px;margin-top:8px;background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:12px;font:700 13px/1 var(--font-mono);
  letter-spacing:0.06em;cursor:pointer;transition:border-color .18s ease,color .18s ease;}
.undo-set:hover:not(:disabled){border-color:var(--cy);color:var(--cy);}
.undo-set:disabled{opacity:.35;cursor:not-allowed;}
.undo-set:focus-visible{outline:2px solid var(--cy);outline-offset:3px;}

/* Program Mode visual language — sealed prescribed values vs alive RPE input */
/* pm-locked: prescribed weight/reps read as sealed, not merely disabled-gray.
   Solid border (not dashed), muted background, and a "LOCKED" micro-stamp via ::after
   so a glance mid-set immediately knows the value can't be fudged. */
.num.pm-locked{border:1px solid var(--line-2);background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);}
.num.pm-locked .v{color:var(--dim);}
.num.pm-locked::after{content:"LOCKED";display:block;font:700 7px/1 var(--font-mono);letter-spacing:.12em;color:var(--faint);margin-top:4px;}
.load-entry.pm-locked input[readonly]{border-style:solid;border-color:var(--line-2);background:rgba(255,255,255,.02);opacity:.85;}
.load-entry.pm-locked label::after{content:" · sealed";color:var(--faint);font-weight:400;letter-spacing:.04em;}

/* pm-alive: RPE is the one editable input — visually obvious by contrast.
   Brighter accent border, subtle inner glow, and "your call" micro-label. */
.num.pm-alive{border:1px solid var(--cy);box-shadow:0 0 12px rgba(224,178,113,.15);}
.rpe-slider.pm-alive{border:1px solid rgba(224,178,113,.3);box-shadow:0 0 16px rgba(224,178,113,.08);}
.rpe-slider.pm-alive .slider input{background:rgba(224,178,113,.15);}
.rpe-slider.pm-alive .slider input::-webkit-slider-thumb{box-shadow:0 0 8px rgba(224,178,113,.4);}
.rpe-slider.pm-alive .slider input::-moz-range-thumb{box-shadow:0 0 8px rgba(224,178,113,.4);}

/* Skip-rate readout chip — System 1 glance in summary, System 2 detail on expand.
   Follows the streak chip pattern: earned, static, no animation. */
.prog .skip-rate{justify-self:end;}
.prog .skip-rate-summary{font:700 11px var(--font-mono);color:var(--dim);letter-spacing:.04em;
  border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;background:rgba(255,255,255,.03);
  cursor:pointer;list-style:none;display:inline-block;}
.prog .skip-rate-summary::-webkit-details-marker{display:none;}
.prog .skip-rate[open] .skip-rate-summary{border-color:var(--cy);color:var(--cy);}
.prog .skip-rate-detail{font:600 10px/1.4 var(--font-body);color:var(--dim);padding:6px 10px 2px 0;text-align:right;}
.prog .skip-rate[hidden]{display:none;}

/* Phase 37 & 38: Dual-Process UX & Cognitive Friction */
body.focus-trap-active .blur-target {
  filter: blur(8px) brightness(0.6);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}
/* System 2 Analytical Drawer */
.system-2-drawer {
  display: none;
  background: rgba(5, 10, 16, 0.95);
  border: 1px solid var(--cy);
  border-radius:12px;
  padding: 12px;
  margin: 12px var(--pad) 0;
  box-shadow: none;
  font: 600 11px ui-monospace, monospace;
  color: var(--dim);
}
.system-2-drawer.show {
  display: block;
  animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.force-read-card { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.force-read-h { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-bottom: 8px; }
.force-read-h span { color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 600; }
.force-vis { position: relative; height: 150px; background: rgba(8,12,18,0.5); border: 1px solid var(--line); border-radius: 8px; }
.system-2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.s2-metric { display: flex; flex-direction: column; margin-bottom: 6px; }
.s2-metric .val { font-size: 14px; color: var(--cy); font-weight: 800; }
.s2-metric .val.warn { color: var(--warn); text-shadow: 0 0 8px rgba(239,68,68,0.5); }
.rest{display:flex;gap:8px;}
.rest button{flex:1;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:13px 0;font:700 14px/1 inherit;cursor:pointer;}
.rest button:active{transform:scale(.96);background:rgba(224,178,113,.08);}

/* rest countdown — auto-starts after a logged set so log -> rest -> next set is unbroken */
.restcd{display:none;align-items:center;gap:12px;position:relative;overflow:hidden;border-color:rgba(224,178,113,.4);
  padding:14px 16px;box-shadow:none;}
.restcd.show{display:flex;}
/* Temperature doctrine (REDESIGN_PLAN principle 5): rest is literal cooldown —
   the hot gold surface crossfades toward teal as the timer runs. Driven by the
   --cooldown custom property (0 at rest start -> 1 at done); opacity-only =
   compositor-safe; digits warm gold -> teal via color-mix (gold fallback kept). */
.restcd::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(13,148,136,.10));opacity:var(--cooldown,0);transition:opacity .9s linear;}
.restcd>*{position:relative;z-index:1;}
.restcd .t{font:800 30px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--cy);color:color-mix(in srgb, #2dd4bf calc(var(--cooldown,0)*100%), var(--cy));min-width:92px;letter-spacing:.02em;}
.restcd .mid{flex:1;min-width:0;}
.restcd .lab{font:700 10px var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;}
.restcd .next{margin-top:3px;font:700 13px/1.25 var(--font-body);color:var(--ink);}
.restcd .barwrap{height:6px;border-radius:12px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:7px;}
.restcd .barwrap i{display:block;height:100%;width:100%;background:var(--cy);transform-origin:left;transform:scaleX(1);transition:transform 1s linear;}
@media (prefers-reduced-motion: reduce){
  .restcd::before{transition:none;}
  .restcd .barwrap i{transition:none;}
}
.restcd .skip{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:9px 14px;font:700 12px inherit;cursor:pointer;}

/* compact session strip — was a whole column, now one line */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.stat{padding:10px;text-align:center;}
.stat .v{font:800 18px/1;}
.stat .k{font:600 9px var(--font-mono);letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin-top:4px;}

/* everything else: collapsed, deferred, out of the way */
details{overflow:hidden;}
details summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
  font-weight:600;font-size:14px;}
details summary::-webkit-details-marker{display:none;}
details summary .c{color:var(--dim);font-size:13px;transition:.2s;}
details[open] summary .c{transform:rotate(180deg);}
details .inner{padding:0 16px 16px;color:var(--dim);font-size:13.5px;}
details .inner .swap-hint{font-weight:700;color:var(--ink);line-height:1.35;}
details .inner .swap{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
details .inner .swap button{min-height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:10px;font:600 13px inherit;cursor:pointer;text-align:left;}
.swap-card{border-color:rgba(224,178,113,.30);background:linear-gradient(135deg,rgba(224,178,113,.08),rgba(13,148,136,.05)),var(--card);}
.swap-card summary span:first-child{color:var(--ink);}
.swap-card .swap button:active{transform:scale(.98);}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--good);color:#04140a;font-weight:700;padding:12px 20px;border-radius:12px;transition:.3s;pointer-events:none;z-index:30;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* PLAN reference — a bottom sheet that OVERLAYS the log (never navigates away).
   Logging state lives in JS module vars and is untouched while the sheet is open,
   so dismissing returns the user to the exact set they were mid-logging. */
.backdrop{position:absolute;inset:0;background:rgba(2,4,8,.6);opacity:0;visibility:hidden;
  transition:.25s;z-index:20;pointer-events:none;}
.backdrop.show{opacity:1;visibility:visible;pointer-events:auto;}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:25;background:#0f1116;border:1px solid var(--line);
  border-bottom:0;border-radius:12px;transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  max-height:82%;display:flex;flex-direction:column;box-shadow:none;}
.sheet.show{transform:translateY(0);}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);margin:10px auto 4px;}
.sheet .head{padding:6px 18px 12px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);}
.sheet .head h2{margin:0;font:700 18px var(--font-display);letter-spacing:-.01em;}
.sheet .head .day{font:700 11px var(--font-mono);letter-spacing:.1em;color:var(--cy);text-transform:uppercase;}
.sheet .head .close{background:none;border:0;color:var(--dim);font-size:20px;cursor:pointer;line-height:1;}
.sheet .list{overflow-y:auto;padding:8px 12px 18px;}
.plan-row{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:12px;cursor:pointer;border:1px solid transparent;}
.plan-row:active{background:rgba(255,255,255,.03);}
.plan-row .idx{width:24px;height:24px;flex:0 0 24px;border-radius:12px;border:1px solid var(--line);display:flex;margin-right:12px;
  align-items:center;justify-content:center;font:700 11px var(--font-mono);color:var(--dim);}
.plan-row .meta{flex:1;min-width:0;}
.plan-row .meta .nm{font-weight:600;font-size:15px;}
.plan-row .meta .sch{color:var(--dim);font-size:12.5px;margin-top:1px;}
.plan-row.done .idx{background:var(--good);border-color:var(--good);color:#04140a;}
.plan-row.done .meta .nm{color:var(--dim);text-decoration:line-through;}
.plan-row.cur{background:rgba(224,178,113,.08);border-color:var(--cy);}
.plan-row.cur .idx{background:var(--cy);border-color:var(--cy);color:#000;}
.plan-row.cur .meta .nm{color:var(--ink);}
.plan-row .tag{font:700 9px var(--font-mono);letter-spacing:.1em;color:var(--cy);text-transform:uppercase;}
.plan-thumb{width:40px;height:40px;margin-right:12px;background:var(--glass-bg);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sfr-tag{color:var(--good);font-size:11px;}
.sheet .foot{padding:10px 18px 16px;color:var(--dim);font-size:12px;border-top:1px solid var(--line);text-align:center;}

/* ---- weakness radar (additive panel) — persisted-set balance vs today's
   targets; weakest pattern called out. Draw-in is motion-gated. */
.radar{margin:12px var(--pad) 4px;padding:14px;}
.radar .radar-h{margin:0 0 2px;font:700 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--dim);}
.radar .lagline{font-size:12px;color:var(--warn);margin:2px 0 8px;}
.radar svg{width:100%;height:auto;display:block;}
.radar .axis{stroke:var(--line);stroke-width:1;}
.radar .ring{fill:none;stroke:var(--line);}
.radar .poly{fill:rgba(54,224,127,.14);stroke:var(--good);stroke-width:2;}
.radar .lbl{font:600 9px var(--font-mono);fill:var(--dim);letter-spacing:.06em;}
.radar .lbl.lag{fill:var(--warn);}
.radar .dot{fill:var(--good);}
.radar .dot.lag{fill:var(--warn);}
@media (prefers-reduced-motion: no-preference){
  .radar .poly{transform-origin:110px 100px;transition:transform .8s cubic-bezier(.34,1.56,.64,1);}
  .radar .poly.draw0{transform:scale(.12);}
}
.lagcard{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);}
.lagcard .lc-h{font:700 10px/1 var(--font-mono);letter-spacing:.14em;color:var(--dim);margin-bottom:6px;}
.lagcard .lc-empty{font-size:12px;color:var(--dim);}
.lagcard .lc-line{font-size:13px;color:var(--ink);font-weight:700;}
.lagcard .lc-act{font-size:12px;color:var(--cy);margin-top:2px;}
.radar .sharebtn{margin-top:10px;width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:12px;
  background:rgba(54,224,127,.08);color:var(--ink);font:700 12px/1 var(--font-mono);letter-spacing:.12em;cursor:pointer;}

/* session end: the share loop offers itself. Static accent is the base;
   the pulse only runs for motion-tolerant users. */
.radar .sharebtn.session-end{border-color:#e0b271;background:rgba(224,178,113,.14);}
@media (prefers-reduced-motion: no-preference){
  .radar .sharebtn.session-end{animation:shareNudge 1.6s ease-in-out 3;}
  @keyframes shareNudge{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
}

/* Avatar Container (Phase 29) */
.avatar-container{margin-top:10px;padding:14px;border-color:var(--cy);display:flex;flex-direction:column;align-items:center;gap:10px;display:none;backdrop-filter:blur(8px);box-shadow:none;}
.avatar-container.show{display:flex;animation:avFadeIn 0.6s ease-out;}
@keyframes avFadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.avatar-container .av-h{font:800 12px/1 ui-sans-serif;letter-spacing:.08em;color:var(--cy);text-transform:uppercase;text-shadow:none;}
.avatar-container svg{max-height:220px;width:auto;filter:none;}
.avatar-cues{font-size:12px;color:var(--dim);text-align:center;width:100%;border-top:1px solid var(--line);padding-top:10px;margin-top:4px;}
.avatar-cues .av-cue{margin-bottom:6px;line-height:1.4;}
.avatar-cues b{color:var(--ink);}



/* Scoped highlight motion cards styling */
.now, .num, .loop-card, .next-action-card, .radar, .load-entry, .rpe-slider {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --gym-motion-x: 0;
  --gym-motion-y: 0;
  transition: border-color .18s ease, transform .18s ease;
}
.now > *, .num > *, .loop-card > *, .next-action-card > *, .radar > *, .load-entry > *, .rpe-slider > * {
  position: relative;
  z-index: 1;
}
.now::after, .num::after, .loop-card::after, .next-action-card::after, .radar::after, .load-entry::after, .rpe-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(50% + (var(--gym-motion-x) * 18%)) calc(50% + (var(--gym-motion-y) * 18%)), rgba(224,178,113,.12), transparent 58%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  border-radius: inherit;
  transition: opacity .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .now[data-gym-motion-active="true"], .num[data-gym-motion-active="true"], .loop-card[data-gym-motion-active="true"], .next-action-card[data-gym-motion-active="true"], .radar[data-gym-motion-active="true"], .load-entry[data-gym-motion-active="true"], .rpe-slider[data-gym-motion-active="true"],
  .load-entry:focus-within, .rpe-slider:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,.38), 0 0 0 1px rgba(224,178,113,.16);
  }
  .now[data-gym-motion-active="true"]::after, .num[data-gym-motion-active="true"]::after, .loop-card[data-gym-motion-active="true"]::after, .next-action-card[data-gym-motion-active="true"]::after, .radar[data-gym-motion-active="true"]::after, .load-entry[data-gym-motion-active="true"]::after, .rpe-slider[data-gym-motion-active="true"]::after,
  .load-entry:focus-within::after, .rpe-slider:focus-within::after {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .now, .num, .loop-card, .next-action-card, .radar, .load-entry, .rpe-slider {
    transform: none !important;
    transition: none !important;
  }
  .now::after, .num::after, .loop-card::after, .next-action-card::after, .radar::after, .load-entry::after, .rpe-slider::after {
    display: none !important;
  }
}

/* Locked voice-logging paid preview (monetization surface; twin of free_mode's).
   Inert by contract: gym_voice_preview_contract_test.js. Muted/dim keeps it
   outside the hot-gold state vocabulary (it is a non-choice, not chrome). */
.voice-preview{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.voice-preview-btn{border:1px dashed var(--line-2);background:transparent;color:var(--dim);padding:10px 16px;font:700 13px var(--font-display);border-radius:10px;cursor:not-allowed;opacity:.75;}
.voice-preview-tag{font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.voice-preview-info{flex-basis:100%;color:var(--dim);font-size:12.5px;}
.voice-preview-info summary{cursor:pointer;min-height:34px;display:inline-flex;align-items:center;}

/* Tomorrow preview — the session-end return hook (blueprint 1.7 Zeigarnik).
   Rendered into the share moment; honest fallback when no plan is loaded. */
.tomorrow-preview{margin:10px 0 0;font:700 12px var(--font-mono);letter-spacing:.06em;color:var(--cy);text-align:center;}

/* === NEW COCKPIT GRID AND SLICE COMPONENTS === */

@media (min-width: 1024px) {
  .phone {
    max-width: none;
    width: 100vw;
    padding: 24px;
  }
  
  .body {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(340px, 1.2fr) minmax(300px, 1fr);
    grid-template-rows: repeat(12, max-content) 1fr;
    grid-template-areas:
      "prog  prog  prog"
      "hero  nxtc  rest"
      "hero  auto  recd"
      "now   loop  strp"
      "now   pmode radr"
      "upnx  nums  radr"
      "slog  swip  radr"
      "swap  load  radr"
      "vis   rpes  radr"
      "vis   logb  radr"
      "vis   miss  radr"
      ".     undo  radr"
      ".     voic  radr";
    align-items: start;
    gap: 14px 24px;
    max-width: 1440px;
    margin: 0 auto;
  }

  .prog { grid-area: prog; }
  .hero-block { grid-area: hero; }
  .now { grid-area: now; }
  .upnext { grid-area: upnx; }
  #swapDetails { grid-area: swap; }
  #vision-matrix-hud { grid-area: vis; }

  .next-action-card { grid-area: nxtc; }
  .autoreg-card { grid-area: auto; }
  .loop-card { grid-area: loop; }
  .program-mode-card { grid-area: pmode; }
  .nums { grid-area: nums; }
  .swipe-scrubber { grid-area: swip; }
  .load-entry { grid-area: load; }
  .rpe-slider { grid-area: rpes; }
  .log { grid-area: logb; }
  .miss { grid-area: miss; }
  .undo-set { grid-area: undo; }
  .voice-preview { grid-area: voic; }

  .rest { grid-area: rest; }
  .restcd { grid-area: recd; }
  .strip { grid-area: strp; }
  .radar { grid-area: radr; }
  #sessionLogDetails { grid-area: slog; }
  .medical-disclaimer { grid-column: 1 / -1; grid-row: 14; }
}

.hero-block {
  margin-top: 10px;
  margin-bottom: 20px;
}
.hero-block h1 {
  margin: 0 0 12px;
  font: 800 24px/1.1 var(--font-display);
  color: var(--ink);
  letter-spacing: -0.015em;
}

.next-target-display {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.next-target-display .eyebrow {
  font: 700 12px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.next-target-display .value {
  font: 800 64px/1 var(--font-display);
  color: #2563eb;
  letter-spacing: -0.03em;
}
.next-target-display .value .u {
  font-size: 28px;
  color: rgba(37, 99, 235, 0.7);
  font-weight: 700;
}

.medical-disclaimer {
  font: 500 11px/1.4 var(--font-body);
  color: var(--dim);
  text-align: center;
  padding: 16px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  opacity: 0.7;
}


/* Contrast fix for next target */
.next-target-color { color: #2563eb !important; }

/* Miss Path (Option C - Warning Tint) */
.miss {
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  background: transparent !important;
  color: rgba(239, 68, 68, 0.8) !important;
}

/* ── externalized style= attrs from gym_mode_redesign.html ── */
.gym-matrix-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.3;}
.exit-app{color:#fff;text-decoration:none;font-size:11px;letter-spacing:.5px;opacity:.85;margin-right:8px;align-self:center;white-space:nowrap;}
.readiness-hud[hidden]{display:none;}
.now .eyebrow.now-eyebrow-flex{display:flex;justify-content:space-between;}
.live-atlas-hud{position:absolute;inset:0;z-index:15;display:none;opacity:0;transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1);flex-direction:column;padding:18px;}
.atlas-hud-header{display:flex;justify-content:space-between;align-items:baseline;}
.atlas-hud-title{margin:0;font:800 16px var(--font-display);color:var(--cy);letter-spacing:-0.015em;}
.atlas-hud-close{background:none;border:none;color:var(--dim);cursor:pointer;font-size:16px;}
.vis-inline{flex:1;margin-top:10px;display:flex;height:100%;border:none;}
.avatar-cue summary{display:flex;justify-content:space-between;align-items:center;width:100%;outline:none;}
.avatar-cue-header{display:flex;gap:12px;align-items:center;}
.avatar-cue-label{font-size:11px;letter-spacing:0.05em;text-transform:uppercase;}
.cue-content{padding:12px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);}
.cue-section-label{color:var(--cy);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;}
.cue-text{margin-top:4px;font-size:13px;color:var(--ink);}
.cue-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;}
.metabolic-tag{font-weight:700;font-size:12px;}
.mrv-bar.mrv-bar-flush{margin-top:0;border-top:1px solid var(--line);padding-top:12px;}
.mrv-pattern{color:var(--cy);}
.force-read-card.force-read-flush{margin-top:0;border-top:1px solid var(--line);padding-top:12px;}
.system-2-drawer.s2-drawer-inline{display:block;margin:0;border:none;padding:12px 0 0;background:transparent;border-top:1px solid var(--line);}
.data-stream{display:flex;flex-wrap:wrap;gap:6px;}
.data-stream-chip{background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:16px;padding:4px 10px;font-size:10px;font-family:var(--font-mono);text-transform:uppercase;color:var(--dim);}
.s2-chip-num{opacity:0.5;margin-right:4px;}
.s2-metric-val{color:var(--atk-effort,#e0b271);font-weight:bold;}
.num-rpe{background:var(--ink);}
.num-rpe label{color:var(--bg);}
.num-rpe .v{color:var(--bg);}
.num-rpe .u{color:var(--bg);opacity:0.8;}
.plate-math{margin-top:8px;font:700 12px var(--font-mono);color:var(--cy);letter-spacing:0.05em;text-align:center;}
.vision-matrix-hud{margin-top:20px;background:var(--panel);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:12px;}
.vision-matrix-header{display:flex;justify-content:space-between;align-items:center;}
.vision-matrix-label{font-weight:700;font-size:12px;letter-spacing:0.1em;color:var(--dim);text-transform:uppercase;}
.vision-cam{display:none;}
.vision-canvas{width:100%;height:160px;background:#000;border-radius:12px;box-shadow:none;}
.vision-activate-btn{background:transparent;border:1px solid var(--line);color:var(--ink);padding:8px;border-radius:12px;font-weight:600;cursor:pointer;}
.share-preview-modal[hidden]{display:none;}
.share-card-title{font:800 18px var(--font-display);color:#fff;text-align:center;margin-bottom:20px;}
.share-close-btn{background:none;border:none;color:var(--dim);font:800 14px var(--font-mono);margin-top:15px;cursor:pointer;display:block;width:100%;}
.gym-footer-disclaimer{font-size:10px;color:var(--dim);text-align:center;margin-top:2rem;}