:root {
  --bg: #10131a;
  --card: #1a1f2b;
  --text: #e8ebf2;
  --muted: #8a93a6;
  --accent: #4f8cff;
  --good: #3ecf8e;
  --warn: #f5a623;
  --bad: #ef5b6b;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 -apple-system, "SF Pro Text", system-ui, sans-serif;
  padding-bottom: 40px;
}
header {
  position: sticky; top: 0; background: var(--bg); z-index: 5;
  padding: max(env(safe-area-inset-top), 10px) 16px 8px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #232a3a;
}
h1 { font-size: 20px; }
h2 { font-size: 17px; margin: 14px 0 6px; }
nav { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
nav button {
  background: none; border: none; color: var(--muted);
  font-size: 15px; padding: 8px 10px;
}
nav button.active { color: var(--text); font-weight: 600; }
/* Narrow phones: tighten the nav instead of wrapping the logout icon. */
@media (max-width: 430px) {
  header { padding-left: 12px; padding-right: 12px; }
  header h1 { font-size: 17px; }
  nav button { font-size: 14px; padding: 8px 6px; }
  #logout-btn { padding: 8px 4px; }
}
.view { padding: 12px 16px; max-width: 560px; margin: 0 auto; }
.hidden { display: none !important; }
label { display: block; margin: 18px 0 8px; color: var(--muted); font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; }
/* Breathing room where a text box and a chip row sit directly together
   (soreness -> pain flags, location chips -> extras box, flags -> notes). */
.chips + input[type=text], input[type=text] + .chips,
.chips + input[type=number], .chips + .chips { margin-top: 12px; }
input[type=text], input[type=number], input[type=password] {
  width: 100%; background: var(--card); border: 1px solid #2a3145;
  color: var(--text); border-radius: 10px; padding: 12px; font-size: 16px;
}
.row { display: flex; gap: 10px; align-items: center; }
/* Log tab set builder: on a phone the exercise takes its own line and
   reps/kg/Add share the next one - three boxes side by side would squeeze
   the name box to nothing. */
.log-set-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.log-set-row input[type=text] { flex: 1 1 100%; min-width: 0; }
.log-set-row input[type=number] { flex: 1 1 0; width: auto; min-width: 0; }
.log-set-row button { flex: 0 0 auto; margin: 0; padding: 12px 20px; }
.row input[type=number] { width: 84px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  background: var(--card); color: var(--text); border: 1px solid #2a3145;
  border-radius: 999px; padding: 10px 14px; font-size: 15px;
}
.chips.small button { padding: 8px 12px; font-size: 14px; }
.chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary {
  width: 100%; margin-top: 18px; background: var(--accent); color: #fff;
  border: none; border-radius: 12px; padding: 15px; font-size: 17px; font-weight: 600;
}
button:active { opacity: .8; }
.card {
  background: var(--card); border: 1px solid #2a3145; border-radius: 14px;
  padding: 14px; margin: 10px 0;
}
.card.rest { border-color: var(--good); }
.card.redflag { border-color: var(--bad); }
.headline { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.verdict-tag {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: #2a3145; color: var(--muted); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .05em;
}
.block { padding: 10px 0; border-top: 1px solid #232a3a; }
.block:first-of-type { border-top: none; }
.block .name { font-weight: 600; }
.block .detail { color: var(--muted); font-size: 14px; }
.block .alt { color: var(--warn); font-size: 13px; margin-top: 2px; }
.log-controls { display: flex; gap: 10px; margin-top: 8px; }
.log-controls button { flex: 1; border-radius: 10px; border: 1px solid #2a3145;
  background: var(--card); color: var(--text); padding: 12px; font-size: 15px; }
.log-controls button.done { background: var(--good); border-color: var(--good); color: #08110c; font-weight: 700; }
#chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 50vh; padding-bottom: 12px; }
.msg { padding: 10px 14px; border-radius: 14px; max-width: 85%; white-space: pre-wrap; }
.msg.user { background: var(--accent); align-self: flex-end; color: #fff; }
.msg.coach { background: var(--card); align-self: flex-start; }
.chat-input { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; }
.chat-input input { flex: 1; }
.chat-input button { width: 90px; margin-top: 0; padding: 12px; }
.hist-item { display: flex; justify-content: space-between; padding: 10px 4px;
  border-bottom: 1px solid #232a3a; font-size: 15px; }
.hist-item .m { color: var(--muted); font-size: 13px; }
.spinner { text-align: center; color: var(--muted); padding: 24px; }
.hm { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.hm-row { display: flex; gap: 3px; }
.hm-cell {
  width: 11px; height: 11px; min-width: 11px; border-radius: 3px;
  background: #232a3a;
}
#auth-screen {
  position: fixed; inset: 0; background: var(--bg); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-box { width: 100%; max-width: 360px; }
.auth-box h1 { font-size: 32px; text-align: center; }
.auth-sub { color: var(--muted); text-align: center; margin: 6px 0 18px; }
.auth-error {
  background: rgba(239, 91, 107, .12); border: 1px solid var(--bad);
  color: var(--bad); border-radius: 10px; padding: 10px; font-size: 14px;
  margin-bottom: 8px;
}
.auth-toggle { text-align: center; margin-top: 16px; color: var(--muted); }
.auth-toggle a { color: var(--accent); text-decoration: none; }
#logout-btn { font-size: 17px; }
.block-actions { display: flex; gap: 6px; margin-top: 6px; }
.block-actions button {
  background: none; border: 1px solid #2a3145; color: var(--muted);
  border-radius: 8px; padding: 4px 9px; font-size: 12px;
}
.block-panel button {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 14px; font-size: 14px;
}
.thread-msg { font-size: 13px; margin-top: 6px; padding: 8px 10px;
  border-radius: 10px; background: #202636; }
#ob-screen {
  position: fixed; inset: 0; background: var(--bg); z-index: 40;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.ob-box { width: 100%; max-width: 400px; padding-bottom: 40px; }
.ob-box h1 { font-size: 26px; text-align: center;
  margin-top: max(env(safe-area-inset-top), 10px); }
.ob-nav { flex: 0 0 90px; background: var(--card); color: var(--text);
  border: 1px solid #2a3145; border-radius: 12px; padding: 15px; font-size: 16px; }
.ob-section { border-top: 1px solid #232a3a; padding-top: 4px; margin-top: 18px; }
.ob-section h2 { font-size: 15px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin: 10px 0 2px; }
.ob-injury { border: 1px solid #2a3145; border-radius: 12px; padding: 12px;
  margin-top: 10px; }
.ob-injury .name { font-weight: 600; text-transform: capitalize; }
.daily-quote { color: var(--muted); font-size: 14px; font-style: italic;
  text-align: center; margin: 10px 0 2px; }
/* energy slider: tired face -> lightning */
.energy-row { display: flex; align-items: center; gap: 10px; }
.energy-face { font-size: 22px; }
.energy-now { font-size: 18px; min-width: 56px; text-align: right; }
.energy-now b { color: var(--accent); }
input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
/* workout mode */
#workout-screen { position: fixed; inset: 0; background: var(--bg); z-index: 45;
  overflow-y: auto; }
.wk-box { max-width: 640px; margin: 0 auto;
  padding: max(env(safe-area-inset-top), 14px) 16px 40px; }
.wk-top { display: flex; align-items: center; gap: 12px; }
#wk-timer { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 52px; }
#wk-exit { background: none; border: 1px solid #2a3145; color: var(--muted);
  border-radius: 8px; padding: 6px 10px; font-size: 14px; }
#wk-progress { flex: 1; }
#wk-bar { height: 10px; border-radius: 999px; background: #232a3a;
  transition: background .4s; }
.wk-layout { display: flex; gap: 14px; align-items: center;
  min-height: calc(100dvh - 180px); }
.wk-layout .wk-exercise { flex: 1; min-width: 0; }
.wk-list { list-style: none; margin: 0; padding: 8px 0 8px 10px;
  width: 34%; max-width: 176px; border-left: 1px solid #232a3a; }
.wk-item { display: flex; align-items: baseline; gap: 6px; font-size: 12px;
  color: var(--muted); padding: 7px 0; min-width: 0; }
.wk-item[data-jump] { cursor: pointer; }
.wk-item[data-jump] .wk-item-name { text-decoration: underline;
  text-decoration-color: #2a3145; text-underline-offset: 3px; }
.wk-item .wk-count { flex: 0 0 auto; font-size: 10px; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.wk-hint { font-size: 10px; color: var(--muted); opacity: .65;
  padding-top: 8px; font-style: italic; }
.wk-sec { font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); opacity: .7; padding: 8px 0 2px; }
.wk-tag { display: inline-block; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--good); border: 1px solid #234036;
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
/* warm-up / stretches bookends on the plan card */
.bookend { border: 1px dashed #2a3145; border-radius: 10px;
  padding: 8px 12px; margin: 10px 0; }
.bookend-title { font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--good); margin-bottom: 4px; }
.bookend-item { font-size: 13px; color: var(--text); padding: 2px 0;
  display: flex; justify-content: space-between; gap: 10px; }
.bookend-reps { color: var(--muted); font-size: 12px; white-space: nowrap; }
.wk-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-item .wk-ico { flex: 0 0 12px; text-align: center; }
.wk-item.current { color: var(--text); font-size: 12px; font-weight: 600; }
.wk-item.current .wk-ico { color: var(--accent); }
.wk-item.done .wk-ico { color: var(--good); }
.wk-item.skipped .wk-ico { color: var(--muted); }
.wk-item.done .wk-item-name, .wk-item.skipped .wk-item-name { opacity: .6; }
.wk-exercise { text-align: center; margin-top: 0; }
.wk-exercise .wk-name { font-size: 30px; font-weight: 700; line-height: 1.15; }
@media (min-width: 480px) { .wk-exercise .wk-name { font-size: 34px; } }
.wk-exercise .wk-set { color: var(--muted); font-size: 16px; margin-top: 8px; }
.wk-stepper { display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 26px 0; }
.wk-stepper button { width: 56px; height: 56px; border-radius: 50%;
  font-size: 26px; background: var(--card); color: var(--text);
  border: 1px solid #2a3145; }
.wk-stepper .wk-reps { font-size: 46px; font-weight: 700; min-width: 92px;
  font-variant-numeric: tabular-nums; }
.wk-stepper .wk-reps small { display: block; font-size: 12px; font-weight: 400;
  color: var(--muted); }
.wk-weight { display: flex; align-items: flex-start; justify-content: center;
  gap: 18px; margin: 0 0 18px; }
.wk-weight button { width: 40px; height: 40px; border-radius: 50%;
  font-size: 20px; background: var(--card); color: var(--text);
  border: 1px solid #2a3145; }
.wk-w-box input { width: 96px; text-align: center; font-size: 24px;
  font-weight: 700; background: transparent; color: var(--text);
  border: none; border-bottom: 1px solid #2a3145; border-radius: 0;
  padding: 2px 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.wk-w-box input::-webkit-outer-spin-button,
.wk-w-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wk-w-box small { display: block; font-size: 11px; color: var(--muted);
  margin-top: 4px; }
.wk-var { display: block; margin: 0 auto 6px; width: min(260px, 90%);
  background: transparent; color: var(--text); border: none;
  border-bottom: 1px dashed #2a3145; border-radius: 0; text-align: center;
  font-size: 13px; padding: 4px 0; }
.wk-var::placeholder { color: var(--muted); opacity: .7; }
.wk-done-btn { width: 100%; padding: 20px; font-size: 20px; font-weight: 700;
  border: none; border-radius: 16px; background: var(--accent); color: #fff; }
.wk-sub { color: var(--muted); font-size: 13px; margin-top: 14px; }
.wk-sub a { color: var(--muted); }
.wk-sub a#wk-swap { color: var(--accent); }
.wk-exercise .howto { color: var(--accent); font-size: 13px; font-weight: 400;
  text-decoration: none; margin-left: 8px; vertical-align: middle; }
.wk-rest { color: var(--good); font-size: 15px; margin-top: 12px;
  font-variant-numeric: tabular-nums; }
.wk-congrats { text-align: center; margin-top: 10vh; }
.wk-congrats .big { font-size: 46px; }
.wk-congrats h2 { font-size: 24px; margin: 10px 0; }
.wk-congrats .stat-line { color: var(--muted); margin: 6px 0; font-size: 15px; }
.wk-congrats .benefit { background: var(--card); border: 1px solid #2a3145;
  border-radius: 14px; padding: 14px; margin: 16px 0; font-size: 15px; }
/* RPE picker: plain-language effort slider */
.rpe-picker { margin: 4px 0 10px; }
.rpe-picker .rpe-row { display: flex; align-items: center; gap: 14px; }
.rpe-picker .rpe-num { font-size: 26px; font-weight: 700; min-width: 34px;
  text-align: center; font-variant-numeric: tabular-nums; color: var(--accent); }
.rpe-picker .rpe-word { font-size: 14px; margin-top: 6px; color: var(--text); }
.rpe-picker .rpe-help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.wk-congrats .rpe-picker { max-width: 340px; margin: 8px auto 0; text-align: left; }

/* collapsible secondary cards on Today */
.fold-toggle { width: 100%; display: flex; justify-content: space-between;
  align-items: center; background: none; border: 1px solid #232a3a;
  border-radius: 12px; color: var(--muted); padding: 13px 16px;
  font-size: 14px; margin-top: 10px; }
.fold-toggle .fold-arrow { transition: transform .2s; }
.fold-toggle.open { color: var(--text); border-color: #2a3145; }
.fold-toggle.open .fold-arrow { transform: rotate(180deg); }

/* toast: the unmissable "it worked" pop-up */
#toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px); background: #14251b; color: var(--text);
  border: 1px solid var(--good); border-radius: 999px; padding: 13px 22px;
  font-size: 15px; font-weight: 600; z-index: 60; opacity: 0;
  pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5); max-width: 92vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast .toast-ico { color: var(--good); font-weight: 700; margin-right: 8px; }

.consent-box { border: 1px solid #2a3145; border-radius: 10px; padding: 12px;
  margin-top: 12px; font-size: 13px; color: var(--muted); }
.consent-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 0;
  text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.consent-row input { width: 18px; height: 18px; }
.block .howto { color: var(--accent); font-size: 12px; text-decoration: none;
  margin-left: 8px; }
.thread-msg.coach { border-left: 2px solid var(--accent); }
.thread-msg.user { border-left: 2px solid var(--muted); }
.hm-months { margin-bottom: 2px; }
.hm-mo { width: 11px; min-width: 11px; font-size: 9px; color: var(--muted);
  overflow: visible; white-space: nowrap; }
#level-ring { background: none; border: none; padding: 3px 4px 0; }

/* ---------- motion polish (v0.15.0): smooth, light, state-change only ----- */

/* soft rise-in for cards and secondary rows as views render */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.view .card, .fold-toggle { animation: rise .35s cubic-bezier(.22, 1, .36, 1) backwards; }
/* staggered entrance for list-y content: plan blocks, bookends, stats rows */
.block, .bookend, .hist-item { animation: rise .4s cubic-bezier(.22, 1, .36, 1) backwards; }
.block:nth-of-type(1), .hist-item:nth-of-type(1) { animation-delay: .04s; }
.block:nth-of-type(2), .hist-item:nth-of-type(2) { animation-delay: .08s; }
.block:nth-of-type(3), .hist-item:nth-of-type(3) { animation-delay: .12s; }
.block:nth-of-type(4), .hist-item:nth-of-type(4) { animation-delay: .16s; }
.block:nth-of-type(5), .hist-item:nth-of-type(5) { animation-delay: .20s; }
.block:nth-of-type(6), .hist-item:nth-of-type(6) { animation-delay: .24s; }
.block:nth-of-type(n+7), .hist-item:nth-of-type(n+7) { animation-delay: .28s; }

/* the level ring sweeps to its new fill instead of snapping */
#level-arc { transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); }

/* tactile tap ripple on primary actions */
.primary, .wk-done-btn, .log-controls button { position: relative; overflow: hidden; }
.tap-ripple { position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .25); transform: scale(0);
  animation: tapripple .5s ease-out forwards; pointer-events: none; }
@keyframes tapripple { to { transform: scale(1); opacity: 0; } }

/* one special surface a day: a slow sheen over the completed-today card */
.trophy-shine { position: relative; overflow: hidden; }
.trophy-shine::before { content: ""; position: absolute; top: 0; bottom: 0;
  width: 60%; left: -80%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { left: -80%; } 100% { left: 130%; } }

/* celebration canvas (achievements, level-ups, workout logged) */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 70; }

/* accessibility: no motion for people who asked for none */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* detailed stats screen + charts */
#history-screen { position: fixed; inset: 0; background: var(--bg); z-index: 45;
  overflow-y: auto; }
#history-exit { background: none; border: 1px solid #2a3145; color: var(--muted);
  border-radius: 8px; padding: 6px 12px; font-size: 16px; }
.chart { width: 100%; height: auto; display: block; margin-top: 4px; }
.chart .axis { stroke: #2a3145; stroke-width: 1; }
.chart .guide { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 4 4;
  opacity: .6; }
.chart .ylab, .chart .xlab { fill: var(--muted); font-size: 10px; }
.chart .ylab { text-anchor: end; }
.chart-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
.legend { font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }

/* weekly coverage widget */
.cov-card { padding: 12px 14px; }
.cov-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.cov-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.cov-name { flex: 0 0 52px; font-size: 13px; }
.cov-bar { flex: 1; height: 7px; border-radius: 999px; background: #232a3a;
  overflow: hidden; }
.cov-bar i { display: block; height: 100%; border-radius: 999px;
  transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.cov-count { flex: 0 0 44px; text-align: right; font-size: 12px;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.cov-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* big fold buttons: action + one-line explanation (Train page umbrella) */
.fold-big { display: block; text-align: left; padding: 14px 16px; }
.fold-big .fold-title { display: flex; justify-content: space-between;
  align-items: center; font-size: 16px; font-weight: 600; color: var(--text); }
.fold-big .fold-desc { display: block; color: var(--muted); font-size: 13px;
  margin-top: 3px; }
#basics-card label { margin-top: 12px; }

/* muscle heatmap body figure */
.body-figure { width: 100%; max-width: 340px; height: auto; display: block;
  margin: 0 auto; }
.body-figure .fig-label { fill: var(--muted); font-size: 11px;
  text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; }
.fig-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center;
  font-size: 11px; color: var(--muted); margin-top: 8px; align-items: center; }
.fig-legend i { display: inline-block; width: 11px; height: 11px;
  border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.fig-tap { cursor: pointer; }
.fig-tap:active { stroke: var(--accent); stroke-width: 1.5; }