:root {
  --bg: #14181C;
  --surface: #1E2429;
  --surface-raised: #262E35;
  --border: #2A3138;
  --text: #E8EDF0;
  --text-muted: #6B7680;
  --accent: #FF8A3D;
  --accent-dim: #4A3222;
  --success: #3DDC97;
  --success-dim: #1E3D30;

  --font-display: system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Color themes (Settings -> Theme). "ember" is the :root default above.
   Each only swaps the color tokens; the text on accent-colored buttons stays
   dark, which reads on every accent here. */
[data-theme="ocean"] {
  --bg: #111821; --surface: #19222E; --surface-raised: #212C3A; --border: #2A3646;
  --text: #E6EEF6; --text-muted: #7E8C9C; --accent: #5AAEFF; --accent-dim: #1D3452;
  --success: #3DDC97; --success-dim: #1E3D30;
}
[data-theme="forest"] {
  --bg: #111914; --surface: #18221C; --surface-raised: #202C25; --border: #2A382F;
  --text: #E6F0EA; --text-muted: #7D8C83; --accent: #5ACF8E; --accent-dim: #1C3B2B;
  --success: #8FD6FF; --success-dim: #1C3344;
}
[data-theme="berry"] {
  --bg: #171219; --surface: #201A24; --surface-raised: #29212F; --border: #372C3E;
  --text: #F1E8F3; --text-muted: #8F8094; --accent: #F07CCB; --accent-dim: #43223A;
  --success: #3DDC97; --success-dim: #1E3D30;
}
[data-theme="daylight"] {
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-raised: #ECEFF3; --border: #D5DAE1;
  --text: #161A1F; --text-muted: #5B6672; --accent: #D9601A; --accent-dim: #FBE2D1;
  --success: #17804F; --success-dim: #D8F1E4;
}
[data-theme="daylight"] .rest-overlay { background: rgba(244, 245, 247, 0.97); }
[data-theme="crimson"] {
  --bg: #0B0A0B; --surface: #171214; --surface-raised: #221A1D; --border: #36262B;
  --text: #F3ECEC; --text-muted: #93838A; --accent: #E5383B; --accent-dim: #3F1517;
  --success: #3DDC97; --success-dim: #143326; --danger: #FF7A59;
}
[data-theme="contrast"] {
  --bg: #000000; --surface: #0E0E0E; --surface-raised: #1B1B1B; --border: #6A6A6A;
  --text: #FFFFFF; --text-muted: #D0D0D0; --accent: #FFD400; --accent-dim: #3A3100;
  --success: #6CFFB0; --success-dim: #0F3322;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.label {
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.heading {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: inherit; }

/* ---------- Setup screen ---------- */

.setup {
  padding: 28px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.setup-title {
  font-size: 1.9rem;
  margin: 8px 0 0;
}

.setup-sub {
  color: var(--text-muted);
  margin: 4px 0 0;
  font-size: 0.95rem;
}

.field-group { display: flex; flex-direction: column; gap: 10px; }

.tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-row.thirds { grid-template-columns: repeat(3, 1fr); }

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: left;
  color: var(--text);
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tile input { display: none; }

.tile .tile-equip {
  display: block;
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: normal;
}

.tile.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.equip-tile:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ---------- Settings ---------- */

.settings-section { padding: 6px 20px 10px; }
.settings-section .heading { font-size: 1.2rem; margin-bottom: 10px; }

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.settings-row-info { display: flex; flex-direction: column; gap: 2px; }
.settings-row-title { font-family: var(--font-display); font-stretch: condensed; font-size: 1.05rem; }
.settings-row-sub { color: var(--text-muted); font-size: 0.8rem; }
.settings-row-actions { display: flex; gap: 10px; align-items: center; }
.settings-row-actions a, .settings-row-actions button {
  background: none; border: none; color: var(--accent);
  font-family: var(--font-display); font-stretch: condensed;
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em;
  text-decoration: none; padding: 4px;
}
.settings-row-actions .danger { color: var(--text-muted); }

.add-link {
  display: block;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.error-banner {
  margin: 12px 20px 0;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--text);
}

.form-page { padding: 20px 20px 100px; display: flex; flex-direction: column; gap: 22px; flex: 1; }

/* One-question-at-a-time wizard. JS (initWizards in base.html) owns
   show/hide via inline display -- CSS here is cosmetic only, so there's no
   specificity fight between "paginate" (onboarding) and "show all relevant,
   hide conditional ones the user doesn't need" (editing in Settings). Both
   modes share these same .wizard-step sections. .form-page/.wizard-step's
   flex:1 lets the active question actually fill the space between the
   top bar and the nav controls, instead of floating min-height-tall in an
   otherwise mostly-empty page. */
.wizard-step { display: none; flex-direction: column; gap: 22px; }
.wizard-step.active { animation: wizard-in 0.18s ease; }
form[data-wizard] .wizard-step.active { flex: 1; justify-content: center; }
@keyframes wizard-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.wizard-question {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
}

/* Back is a quiet link above a full-width, primary-styled Next -- matches
   the weight of the real submit button it hands off to on the last step,
   rather than two equally-weighted boxes competing for attention. */
.wizard-topnav { display: none; align-items: center; justify-content: space-between; }
form[data-wizard] .wizard-topnav { display: flex; }
.wizard-back {
  background: none;
  border: none;
  padding: 8px 2px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: 0.95rem;
}
.wizard-back:disabled { opacity: 0.3; }
.wizard-progress { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; }
button.wizard-next { display: none; }
form[data-wizard] button.wizard-next { display: block; }
.form-page select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
}
.checkbox-line { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.9rem; }

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 16px;
}

.stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.stepper-value .unit {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Compact variant -- a grid of these (e.g. one per movement pattern) reads
   as a set of interactive cards, not a form of stacked label/input rows. */
.stepper.compact { padding: 8px 10px; border-radius: 12px; }
.stepper.compact .stepper-btn { width: 32px; height: 32px; font-size: 1.1rem; border-radius: 8px; }
.stepper.compact .stepper-value { font-size: 1.15rem; }

.pattern-weight-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

textarea, input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  resize: none;
}

.btn-primary {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #1A1006;
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: none;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.btn-primary:active { opacity: 0.85; }

/* ---------- Execution screen ---------- */

.workout-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.progress-track {
  display: flex;
  gap: 6px;
  padding: 18px 20px 0;
}

.progress-segment {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-raised);
}

.progress-segment.done { background: var(--success); }
.progress-segment.current { background: var(--accent); }

.exercise-list {
  padding: 14px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exercise-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.exercise-row.current { color: var(--text); font-weight: 600; }
.exercise-row.done { color: var(--success); }

.focus-card {
  margin: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 22px;
  flex: 1;
}

.focus-setlabel { margin-bottom: 6px; }

.focus-name {
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 14px;
}

.focus-target {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  color: var(--accent);
  margin-bottom: 4px;
}

.focus-target .unit { font-size: 1rem; color: var(--text-muted); font-family: var(--font-body); }

.focus-notes {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 6px;
}

.input-row { display: flex; gap: 12px; margin-top: 22px; }

.input-block { flex: 1; }

.input-block .label { display: block; margin-bottom: 8px; }

.effort-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }

.effort-btn {
  padding: 12px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.effort-btn.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.action-bar {
  position: sticky;
  bottom: 0;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

.rest-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 28, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 50;
}

.rest-ring-wrap { position: relative; width: 200px; height: 200px; }

.rest-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 3rem;
  color: var(--text);
}

.rest-label { color: var(--text-muted); }

.skip-rest {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  padding: 10px;
}

.complete-card {
  margin: 40px 20px;
  text-align: center;
}

.complete-card .heading { font-size: 1.8rem; }

/* ---------- History ---------- */

.history-list { padding: 8px 20px 40px; display: flex; flex-direction: column; gap: 10px; }

.history-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-date { font-family: var(--font-mono); }

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 4px;
}

.top-bar a.label { text-decoration: none; }

/* ---- Barbell plates: shared colors (bumper-plate convention) ----
   Used by the plate-count cards in location settings and the "load the
   bar" diagram on the workout screen. --plate-ink is the label color that
   stays readable on that plate. */
.plate-55 { --plate: #D64545; --plate-ink: #FFF; }
.plate-45 { --plate: #3D7BD9; --plate-ink: #FFF; }
.plate-35 { --plate: #E3B53B; --plate-ink: #1A1406; }
.plate-25 { --plate: #3FA66B; --plate-ink: #FFF; }
.plate-10 { --plate: #E8EDF0; --plate-ink: #14181C; }
.plate-5 { --plate: #A7B0B8; --plate-ink: #14181C; }
.plate-2_5 { --plate: #7B8791; --plate-ink: #14181C; }
.plate-other { --plate: #8C6BD6; --plate-ink: #FFF; }

.plate-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--plate);
  flex-shrink: 0;
}

/* Location settings: one counter card per plate size */
.plate-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.plate-count-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plate-count-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.plate-count-card .stepper.compact { background: var(--surface-raised); padding: 6px 8px; }
.plate-count-card .stepper.compact .stepper-btn { background: var(--surface); }
.plate-count-summary { margin-top: -8px; line-height: 1.4; }

/* Workout screen: the weight number doubles as a "how do I load this" tap target */
.weight-tap {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  text-decoration: underline dotted var(--accent-dim);
  text-underline-offset: 6px;
}
.weight-tap .unit { font-size: 1rem; color: var(--text-muted); font-family: var(--font-body); }

.plate-open-btn {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--accent);
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
}
.plate-open-btn:active { background: var(--accent-dim); }

/* Bottom sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, 0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  animation: sheet-up 0.18s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 0 auto 14px;
}
.sheet-close {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 1rem;
}

/* "Load the bar" contents */
.plate-loader { min-height: 120px; }
.plate-loader-title {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  color: var(--accent);
  margin: 4px 0 6px;
}
.plate-loader-title .unit { font-size: 1rem; color: var(--text-muted); font-family: var(--font-body); }
.plate-loader-note { color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; margin: 6px 0 16px; }
.plate-loader-warn {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  margin: 6px 0 10px;
}
.plate-diagram { display: block; width: 100%; height: auto; max-height: 190px; margin: 10px 0 14px; }
.plate-diagram .bar-sleeve,
.plate-diagram .bar-collar { fill: #9AA5AE; }
.plate-diagram .bar-shaft { fill: #6B7680; }
.plate-diagram .plate-rect { fill: var(--plate); stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.75; }
.plate-diagram .plate-text {
  fill: var(--plate-ink);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
}
.plate-loader-sub { margin-bottom: 8px; }
.plate-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plate-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 1rem;
}
.plate-chip-count { color: var(--text-muted); font-size: 0.85rem; }
.plate-math { color: var(--text-muted); font-size: 0.85rem; margin-top: 12px; }
.plate-edit-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent);
  font-size: 0.85rem;
  text-decoration: none;
}

/* ---- Home: pre-filled "today" rows, each opens only if you tap Change ---- */
.pick-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.pick + .pick { border-top: 1px solid var(--border); }
.pick summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  cursor: pointer;
}
.pick summary::-webkit-details-marker { display: none; }
.pick-label {
  width: 60px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pick-value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-change { color: var(--accent); font-size: 0.85rem; flex-shrink: 0; }
.pick[open] .pick-change { color: var(--text-muted); }
.pick-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.pick-body .settings-row-sub a { color: var(--accent); }

.resume-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--text);
  text-decoration: none;
}
.resume-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

.btn-primary:disabled { opacity: 0.4; }

/* ---- Workout: what the engine changed for today ---- */
.adjustments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 20px 0;
}
.adjustments .label { width: 100%; }
.adjustment-chip {
  display: inline-block;
  max-width: 100%;
  line-height: 1.35;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
}

.flash {
  margin: 12px 20px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--success-dim);
  border: 1px solid var(--success);
  font-size: 0.9rem;
}

/* ---- Swap ---- */
.focus-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.swap-btn {
  flex-shrink: 0;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.swap-title { font-size: 1.5rem; margin: 4px 0 14px; }
.sheet-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
}
.sheet-option:active { border-color: var(--accent); }
.sheet-option-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.sheet-option-sub { color: var(--text-muted); font-size: 0.85rem; line-height: 1.35; }

.body-form { display: flex; flex-direction: column; gap: 10px; }

/* ---- Training style tiles (home picker, settings, onboarding) ---- */
.style-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.style-tile { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; }
.style-tile-label { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.style-tile .tile-equip { margin-top: 0; }
@media (min-width: 520px) { .style-options { grid-template-columns: 1fr 1fr; } }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tile.chip { padding: 8px 12px; font-size: 0.85rem; border-radius: 999px; }

/* ---- Timed sets and circuits ---- */
.timer-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.timer-btn.running { background: var(--accent); color: #1A1006; }
.next-up { margin-top: 10px; color: var(--text-muted); font-size: 0.85rem; }

/* ---- Focus areas ---- */
.care-note {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

/* ---- AI coach ---- */
.coach-open-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 12px 20px 0;
  width: calc(100% - 40px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.coach-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.coach-open-sub { width: 100%; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }

.coach-sheet { display: flex; flex-direction: column; height: 85vh; max-height: 85vh; }
.coach-head { display: flex; align-items: center; justify-content: space-between; }
.coach-head .heading { margin: 0; font-size: 1.4rem; }
.coach-close { background: none; border: none; color: var(--text-muted); font-size: 0.9rem; padding: 6px; }
.coach-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}
.chat-bubble {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: pre-wrap;
}
.chat-bubble.coach { align-self: flex-start; background: var(--surface-raised); border-bottom-left-radius: 4px; }
.chat-bubble.user { align-self: flex-end; background: var(--accent-dim); border: 1px solid var(--accent); border-bottom-right-radius: 4px; }
.chat-bubble.failed { opacity: 0.6; }
.chat-error { font-size: 0.85rem; color: var(--accent); padding: 4px 2px; }
.coach-form { display: flex; flex-direction: column; gap: 8px; }
.coach-form textarea { width: 100%; }
.coach-send { padding: 12px; font-size: 1rem; }
.coach-thinking { display: none; font-size: 0.85rem; color: var(--text-muted); }
.coach-thinking.htmx-request { display: block; }
.more-adjustments { display: flex; flex-wrap: wrap; gap: 6px; }
.more-adjustments[open] { width: 100%; }
.more-adjustments summary { list-style: none; cursor: pointer; color: var(--accent); }
.more-adjustments summary::-webkit-details-marker { display: none; }
.more-adjustments[open] summary { display: none; }

/* ---- Stats: summary + history ---- */
.summary-head { padding: 12px 20px 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 20px; }
@media (min-width: 520px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.history-section .stat-tiles { padding: 8px 0 0; }
.stat-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
}
.stat-label { font-size: 0.8rem; color: var(--text-muted); }
.stat-value { font-family: var(--font-body); font-weight: 600; font-size: 1.6rem; color: var(--text); }
.stat-unit { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); }
.summary-list { padding: 0 20px; }
.summary-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.summary-name { font-family: var(--font-display); font-weight: 700; margin-bottom: 4px; }
.summary-sets { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.text-danger-btn { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; text-decoration: underline; }
.end-btn {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 12px;
}
.history-section { padding: 10px 20px 6px; }
.history-link { text-decoration: none; }
.in-progress { color: var(--accent); }

/* Weekly volume: single-series column chart. Bars <=24px, 4px rounded top,
   square at the hairline baseline; per-bar tooltip on hover/focus. */
.week-chart {
  display: grid; grid-template-columns: repeat(8, 1fr); align-items: end;
  height: 150px; margin-top: 10px; padding-bottom: 20px;
  border-bottom: 1px solid var(--border); position: relative;
}
.week-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.week-bar { width: min(24px, 70%); min-height: 2px; background: var(--text-muted); opacity: 0.55; border-radius: 4px 4px 0 0; }
.week-bar.current { background: var(--accent); opacity: 1; }
.week-label { position: absolute; bottom: -20px; font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; }
.week-value { font-size: 0.75rem; color: var(--text); margin-bottom: 4px; font-weight: 600; }
.week-col:hover::after, .week-col:focus::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  font-size: 0.75rem; padding: 6px 8px; border-radius: 8px; white-space: nowrap; z-index: 5;
}
.week-col:first-child:hover::after, .week-col:first-child:focus::after { left: 0; transform: none; }
.week-col:last-child:hover::after, .week-col:last-child:focus::after { left: auto; right: 0; transform: none; }
.week-col:hover .week-bar { opacity: 1; }

/* ---- Pick-next, PRs, check-in, records ---- */
.list-hint { padding: 8px 20px 0; font-size: 0.75rem; color: var(--text-muted); }
.exercise-row.pickable { cursor: pointer; }
.exercise-row.pickable:hover, .exercise-row.pickable:focus { color: var(--text); outline: none; }
.row-right { display: inline-flex; align-items: center; gap: 10px; }
.add-set-btn {
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-raised); color: var(--accent); font-size: 0.75rem;
}
.focus-setlabel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-tip { margin-top: 8px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; border-left: 2px solid var(--accent-dim); padding-left: 10px; }
.effort-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.effort-hint { font-size: 0.68rem; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.feedback-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 14px;
  background: var(--surface-raised); border: 1px solid var(--border); font-size: 0.9rem; line-height: 1.4;
}
.feedback-card.in-overlay { max-width: 320px; margin: 0; text-align: left; }
.feedback-action {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent-dim); color: var(--accent); font-weight: 700; font-size: 0.85rem;
}
.rest-off { background: none; border: none; color: var(--text-muted); font-size: 0.8rem; text-decoration: underline; }
.pr-banner {
  margin: 12px 20px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--accent-dim); border: 1px solid var(--accent); font-weight: 600;
}
.complete-card .pr-banner { margin: 12px 0; }
.pr-badge { font-size: 0.65rem; font-weight: 700; color: #1A1006; background: var(--accent); border-radius: 4px; padding: 1px 4px; }
.checkin { margin: 4px 20px 8px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.checkin-q { font-size: 1.2rem; }
.checkin-options { display: flex; flex-wrap: wrap; gap: 8px; }
.checkin-btn { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); font-size: 0.9rem; }
.checkin-btn:active { border-color: var(--accent); }
.checkin-note summary { color: var(--accent); font-size: 0.85rem; cursor: pointer; }
.checkin-note textarea { width: 100%; margin-top: 8px; }
.checkin-done { margin: 4px 20px 8px; font-size: 0.9rem; color: var(--text-muted); }
.record-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.record-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.record-cols > div { display: flex; flex-direction: column; gap: 2px; }
.record-value { font-weight: 600; }
.record-date { font-size: 0.72rem; color: var(--text-muted); }

/* ---- WODs ---- */
.wod-card {
  margin: 12px 20px 0; padding: 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--accent);
  display: flex; flex-direction: column; gap: 10px;
}
.wod-head { display: flex; flex-direction: column; gap: 2px; }
.wod-name { margin: 0; font-size: 1.6rem; }
.wod-header { font-weight: 600; }
.wod-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; }
.wod-about summary { color: var(--accent); font-size: 0.85rem; cursor: pointer; }
.wod-about p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; margin: 6px 0 0; }
.wod-timer { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wod-timer[hidden], .wod-timer-off[hidden], .wod-settings[hidden] { display: none; }
.wod-clock { font-size: 3.2rem; font-weight: 600; color: var(--accent); line-height: 1; }
.wod-clock-sub { font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; }
.wod-timer-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wod-btn {
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-raised); color: var(--text); font-size: 0.85rem; font-weight: 600;
}
.wod-btn.primary { background: var(--accent); border-color: var(--accent); color: #1A1006; }
.wod-settings { display: flex; flex-direction: column; gap: 8px; width: 100%; font-size: 0.85rem; color: var(--text-muted); }
.wod-settings input[type=number] { width: 80px; margin-left: 6px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.wod-timer-off { font-size: 0.85rem; color: var(--text-muted); }
.link-btn { background: none; border: none; color: var(--accent); text-decoration: underline; font-size: inherit; padding: 0; }
.wod-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.wod-mode form { display: inline; }
.wod-done { border-top: 1px solid var(--border); padding-top: 10px; }
.wod-result-form { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 12px; }
.wod-result-form input[type=text], .wod-result-form input[type=number] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  padding: 12px 14px; font-size: 1.1rem; width: 100%;
}
.wod-result-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wod-summary { margin: 8px 20px 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--accent); }
.wod-summary-score { font-size: 2rem; font-weight: 600; margin-top: 2px; }
.wod-summary .pr-banner { margin: 10px 0 0; }
.history-score { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--accent); }
.wod-library { padding: 12px 20px 40px; display: flex; flex-direction: column; gap: 10px; }
.wod-lib-card { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wod-lib-head { display: flex; flex-direction: column; gap: 2px; }
.wod-lib-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.wod-best { font-size: 0.85rem; }

/* ---- Supersets ---- */
.ss-tag { font-size: 0.62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--accent); color: var(--accent); vertical-align: 1px; }
.sheet-group-label { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 8px; }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

/* ---- Accounts ---- */
.auth-form input[type=password], .body-form input[type=password] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  padding: 12px 14px; font-size: 1rem;
}
.auth-form { gap: 12px; }
.account-details { margin-top: 8px; }
.account-details summary { color: var(--accent); font-size: 0.85rem; cursor: pointer; }
.account-details form { margin-top: 8px; }

/* ---- Onboarding v2: styles, body, gym, import ---- */
.style-like { display: flex; align-items: stretch; gap: 8px; padding: 0; }
.style-like-main { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; cursor: pointer; }
.fav-toggle {
  display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-size: 0.78rem;
  color: var(--text-muted); border-left: 1px solid var(--border);
}
.fav-toggle span::before { content: "☆ "; font-size: 1rem; }
.fav-toggle:has(input:checked) { color: var(--accent); }
.fav-toggle:has(input:checked) span::before { content: "★ "; }
.style-like:not(.selected) .fav-toggle { opacity: 0.5; }
.style-divider { margin: 8px 0 2px; }
.body-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.body-tile { text-align: center; padding: 11px 8px; font-size: 0.88rem; }
.body-tile.wide { display: block; margin-top: 8px; }
.chip-input { display: flex; flex-direction: column; gap: 8px; }
.chip-input-row { display: flex; gap: 8px; }
.chip-input-row input[type=text] { flex: 1; min-width: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list:empty { display: none; }
.chip-item {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px;
  background: var(--accent-dim); border: 1px solid var(--accent); font-size: 0.85rem;
}
.chip-item button { background: none; border: none; color: var(--text); font-size: 1rem; line-height: 1; padding: 0 4px; cursor: pointer; }
.import-how { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.import-how p { margin: 6px 0 8px; line-height: 1.45; }
.import-how[hidden], .import-upload[hidden] { display: none; }
.import-upload { display: flex; flex-direction: column; gap: 10px; }
.btn-secondary-link { text-align: center; color: var(--accent); font-size: 0.9rem; text-decoration: none; padding: 8px; }

/* Number boxes in forms match the text boxes (were unstyled browser defaults). */
.form-page input[type=number] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  padding: 12px 10px; font-family: var(--font-body); font-size: 1rem; min-width: 0; width: 100%;
}
.form-page .tile-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* ---- Workout screen v2 ---- */
.workout-clock-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 20px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.workout-clock { font-size: 1.35rem; font-weight: 600; color: var(--accent); }
.clock-switches { display: flex; gap: 6px; }
.switch {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 0.75rem;
}
.switch::before { content: "Off · "; }
.switch.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.switch.on::before { content: "On · "; }

.logged-toast {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--success-dim); border: 1px solid var(--success); font-weight: 600; font-size: 0.9rem;
  animation: toast-in 0.35s ease-out;
}
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
#execution-panel.just-logged .focus-card { animation: card-next 0.4s ease-out; }
@keyframes card-next { from { transform: translateX(24px); opacity: 0.3; } to { transform: none; opacity: 1; } }

.feedback-card.above { margin: 12px 20px 0; }
.feedback-about { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.feedback-action.quiet { background: none; border-color: var(--border); color: var(--text-muted); font-weight: 400; }

.menu-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface-raised); color: var(--text);
}
.set-actions { display: inline-flex; gap: 6px; }

.stepper-input {
  width: 100%; min-width: 0; text-align: center; background: transparent; border: none; color: var(--text);
  font-size: inherit; -moz-appearance: textfield; appearance: textfield; padding: 0;
}
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.warmups { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.warmup-row { display: flex; flex-wrap: wrap; gap: 6px; }
.warmup-btn {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-raised); color: var(--text); font-family: var(--font-mono); font-size: 0.85rem;
}
.warmup-btn.quiet { font-family: var(--font-body); color: var(--text-muted); background: none; }
.timer-note { margin-top: 6px; }
.effort-question { margin-top: 18px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.effort-question + .effort-row { margin-top: 8px; }

.plate-diagram .plate-text.small { font-size: 6px; }

.checkin-btn { cursor: pointer; }
.checkin-btn input { display: none; }
.checkin-btn:has(input:checked), .checkin-btn.selected { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.checkin textarea { width: 100%; }
.set-edit { display: inline-block; margin: 0 8px 6px 0; }
.set-edit summary {
  list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.85rem;
}
.set-edit summary::-webkit-details-marker { display: none; }
.set-edit[open] summary { border-color: var(--accent); color: var(--text); }
.set-edit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: 0.85rem; color: var(--text-muted); }
.set-edit-form input { width: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 6px 8px; margin-left: 4px; }
.pattern-weight-card .reps-for { margin-top: 4px; }

/* ---- PT test prep ---- */
.pt-page { gap: 18px; }
.pt-card { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.pt-rows { display: flex; flex-direction: column; }
.pt-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pt-row:last-child { border-bottom: none; }
.pt-row-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pt-row-sub { display: flex; flex-direction: column; font-size: 0.75rem; color: var(--text-muted); }
.pt-row-sub strong { color: var(--text); font-weight: 600; }
.pt-row-sub strong.pt-fail { color: var(--accent); }
.pt-score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-score { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pt-score-num { font-size: 2.4rem; line-height: 1; color: var(--text); }
.pt-sex { grid-template-columns: 1fr 1fr; }
.pt-event { font-size: 0.9rem; }
.pt-points { font-size: 0.7rem; color: var(--text-muted); margin-left: 4px; }
.pt-values { text-align: right; white-space: nowrap; }
.pt-badge { font-family: var(--font-body); font-size: 0.7rem; padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.pt-badge.ok { background: var(--success-dim); color: var(--success); }
.pt-badge.warn { background: var(--accent-dim); color: var(--accent); }
.pt-fineprint a { color: var(--accent); }
.pt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--text-muted); }
.pt-card label.tile, .pt-card label.checkbox-line { flex-direction: row; }
.pt-card input[type=text], .pt-card input[type=number], .pt-card input[type=date] {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
  padding: 10px 12px; font-size: 1rem; width: 100%; min-width: 0;
}
.pt-history { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

/* ---- Theme picker ---- */
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-tile { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; }
.theme-swatch {
  width: 100%; height: 34px; border-radius: 10px; border: 2px solid; display: flex; align-items: center;
  justify-content: flex-end; padding-right: 8px;
}
.theme-swatch span { width: 16px; height: 16px; border-radius: 50%; }

/* several links on the right of a top bar */
.top-links { display: inline-flex; gap: 14px; }

/* ---- Tab bar: Home / History / Settings on every page ---- */
body.has-tabs .shell { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; gap: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tab-bar .tab {
  flex: 0 1 160px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted); text-decoration: none; font-size: 0.7rem; padding: 4px 0; min-height: 44px;
}
.tab-bar .tab.active { color: var(--accent); }

/* ---- Buttons: anything tappable looks tappable ----
   Primary = filled (.btn-primary). Secondary = outlined in the accent color.
   Compact = the same, smaller, for actions inside a row. Quiet = outlined in
   the border color (navigation). Danger = outlined red. */
:root { --danger: #E5534B; }
.btn-secondary, .add-link, .btn-secondary-link, .settings-row-actions a, .settings-row-actions button,
.account-details > summary, .pick-change, .link-btn, .plate-edit-link, .rest-off, .wizard-back,
.text-danger-btn, .skip-rest, .top-bar a.label, .top-links a.label {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 14px; border-radius: 10px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; font-stretch: normal;
  text-transform: none; letter-spacing: normal; text-decoration: none;
  cursor: pointer; white-space: nowrap; line-height: 1.2;
  transition: background 0.12s ease;
}
.btn-secondary:active, .add-link:active, .btn-secondary-link:active, .settings-row-actions a:active,
.settings-row-actions button:active, .account-details > summary:active, .pick-change:active, .link-btn:active,
.plate-edit-link:active, .rest-off:active, .wizard-back:active, .skip-rest:active { background: var(--accent-dim); }
/* full-width secondary actions ("+ Add location", "See your history") */
.add-link, .btn-secondary-link {
  display: flex; width: 100%; min-height: 46px; font-size: 0.95rem; white-space: normal; text-align: center;
  margin: 8px 0 20px; box-sizing: border-box;
}
/* navigation in the top bars: quieter, but still a button */
.top-bar a.label, .top-links a.label {
  min-height: 32px; padding: 5px 12px; font-size: 0.75rem; font-weight: 600;
  border-color: var(--border); background: var(--surface); color: var(--text);
}
/* disclosure toggles ("Change my password") read as buttons, not text */
.account-details > summary { list-style: none; display: inline-flex; margin-top: 4px; }
.account-details > summary::-webkit-details-marker { display: none; }
.account-details[open] > summary { border-color: var(--border); color: var(--text-muted); }
/* "Change" on the home rows */
.pick-change { min-height: 30px; padding: 4px 12px; font-size: 0.8rem; }
.pick[open] .pick-change { border-color: var(--border); color: var(--text-muted); }
.link-btn, .rest-off { min-height: 30px; padding: 4px 12px; font-size: 0.8rem; }
.rest-off, .wizard-back { border-color: var(--border); color: var(--text); }
.wizard-back:disabled { opacity: 0.3; }
.skip-rest { min-height: 44px; padding: 10px 22px; font-size: 0.95rem; }
/* destructive */
.text-danger-btn, .settings-row-actions .danger { border-color: var(--danger); color: var(--danger); }
.text-danger-btn:active, .settings-row-actions .danger:active { background: rgba(229, 83, 75, 0.12); }
/* links inside sentences: visibly links */
.settings-row-sub a:not([class]), .setup-sub a:not([class]), p a:not([class]) { color: var(--accent); text-decoration: underline; }
.pick-value.empty { color: var(--text-muted); font-family: var(--font-body); font-size: 0.95rem; }

/* "This costs the owner money" notice on AI features (AI_COST_NOTICE) */
.ai-cost {
  display: block; margin-top: 6px; padding: 6px 10px; border-radius: 8px;
  background: rgba(229, 83, 75, 0.12); border: 1px solid rgba(229, 83, 75, 0.35);
  color: var(--text); font-size: 0.75rem; line-height: 1.35; text-align: left; font-weight: 500;
}
.coach-open-btn .ai-cost { flex-basis: 100%; }

/* ---- Checkboxes are on/off switches everywhere ---- */
.checkbox-line { color: var(--text); line-height: 1.35; cursor: pointer; }
.checkbox-line input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: 999px; position: relative;
  background: var(--surface-raised); border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checkbox-line input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-muted); transition: transform 0.15s ease, background 0.15s ease;
}
.checkbox-line input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.checkbox-line input[type="checkbox"]:checked::after { transform: translateX(18px); background: #fff; }
.checkbox-line input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a switch with a title and details, as a card (the AI build option) */
.toggle-card {
  flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 14px 16px; margin: 4px 0 8px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
}
.toggle-card:has(input:checked) { border-color: var(--accent); }
.toggle-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.toggle-card-title { font-weight: 600; font-size: 1rem; }

/* native controls (scrollbars, date pickers) match the theme */
:root { color-scheme: dark; }
[data-theme="daylight"] { color-scheme: light; }

/* ---- Records: search, filters, trends, charts ---- */
.records-tools { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.records-search {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; font-size: 1rem;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.records-search:focus { outline: none; border-color: var(--accent); }
.records-areas { flex-wrap: wrap; gap: 6px; }
.records-areas .chip { flex-shrink: 0; }
.records-sort { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.records-sort select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 10px; font-size: 0.85rem;
}
.record-link { display: block; text-decoration: none; color: inherit; }
.record-link:active { background: var(--surface); }
.record-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.record-trend .sparkline { width: 90px; height: 28px; display: block; }
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sparkline circle { fill: var(--accent); }
.records-featured { margin: 4px 0 18px; }
.featured-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 440px) { .featured-grid { grid-template-columns: 1fr 1fr; } }
.featured-card {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit;
}
.featured-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.featured-name { font-weight: 600; }
.featured-change { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.featured-change.up { color: var(--success); }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { fill: var(--text-muted); font-size: 10px; font-family: var(--font-body); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.chart-dot.best { fill: var(--success); }
.chart-bar { fill: var(--accent); opacity: 0.85; }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -100%); margin-top: -8px;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text);
  font-size: 0.75rem; padding: 5px 8px; border-radius: 8px; white-space: nowrap;
}
.chart-card { padding: 14px; margin: 12px 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px; }
.range-chips { margin-top: 14px; }
.range-chips .chip { text-decoration: none; min-width: 56px; text-align: center; }
.record-session { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.record-detail .stat-tiles { margin-top: 4px; }

.form-result { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; }
.form-result.ok { background: var(--success-dim); color: var(--success); }
.form-result.bad { background: rgba(229, 83, 75, 0.12); color: var(--danger); border: 1px solid rgba(229, 83, 75, 0.35); }

/* ---- The set's numbers: big, and adjusted in place ---- */
.adjust-row { display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin: 12px -6px 8px; }
.adjust-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.adjust-controls { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; }
.adjust-row input.adjust-num {
  width: 100%; min-width: 0; max-width: 96px; padding: 2px 0; box-sizing: border-box;
  background: transparent; border: none; border-bottom: 2px solid var(--border); border-radius: 0;
  color: var(--accent); font-family: var(--font-mono); font-size: 2rem; font-weight: 600; text-align: center; letter-spacing: -0.03em;
}
.adjust-row input.adjust-num:focus { outline: none; border-bottom-color: var(--accent); background: var(--accent-dim); border-radius: 8px 8px 0 0; }
.adjust-row input.adjust-num::placeholder { color: var(--text-muted); opacity: 0.45; }
.adjust-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); font-size: 1.25rem; line-height: 1;
}
.adjust-btn:active { background: var(--accent-dim); border-color: var(--accent); }
.adjust-unit { font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.adjust-field.optional .adjust-unit { font-style: italic; }
.adjust-x { color: var(--accent); font-size: 1.3rem; padding-top: 12px; flex-shrink: 0; }
.adjust-row + .plate-open-btn { align-self: center; margin: 0 auto 6px; display: flex; }
.btn-primary.busy { opacity: 0.75; font-size: 0.95rem; }

/* ---- Reviewing a finished movement ---- */
.exercise-row.reviewable { cursor: pointer; }
.exercise-row.reviewable > span:first-child::after { content: " ›"; color: var(--text-muted); }
.review-back { margin: 4px 0 10px; }
.review-card { gap: 10px; }
.review-set { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }
.review-set-what { font-size: 0.9rem; }
.review-efforts .effort-btn { padding: 8px 4px; font-size: 0.85rem; }
.adjust-row input.adjust-num.long { font-size: 1.55rem; }
.adjust-field + .adjust-x + .adjust-field { flex-grow: 1.25; }

.list-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 20px 0; }
.list-tools .list-hint { padding: 0; }
.list-tool-btn { min-height: 32px; padding: 5px 12px; font-size: 0.8rem; flex-shrink: 0; }
.superset-picks { margin: 10px 0 14px; }

/* ---- ⓘ how-to on the movement card ---- */
/* The (i) and the menu sit on the exercise name's first line (1.7rem x 1.15
   = ~31px tall), centered on it, however many lines the name wraps to. */
.info-btn {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 5px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1.5px solid var(--text-muted); background: transparent; color: var(--text-muted);
  font: italic 700 0.75rem Georgia, serif; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.focus-name-row .menu-btn { width: 32px; height: 32px; margin-top: 0; border-radius: 10px; }
.focus-name-row .menu-btn svg { width: 18px; height: 18px; }
.info-btn.open, .info-btn:active { border-color: var(--accent); color: var(--accent); }
.focus-name-row { display: flex; align-items: flex-start; gap: 8px; }
.focus-name-row .focus-name { flex: 1; min-width: 0; }
/* The (i) panel opens smoothly: a 0fr -> 1fr grid row animates its height
   (no fixed max-height to guess), with a fade and a small slide. */
.move-info {
  display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-4px); margin: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.22s ease, transform 0.28s ease, margin 0.28s ease;
}
.move-info.open { grid-template-rows: 1fr; opacity: 1; transform: none; margin: 4px 0 8px; }
.move-info-clip { overflow: hidden; min-height: 0; }
.move-info-box {
  padding: 12px 14px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border);
  font-size: 0.88rem; line-height: 1.45; display: flex; flex-direction: column; gap: 8px;
}
.move-info-box p { margin: 0; }
.move-info-box .btn-secondary { align-self: flex-start; }
.info-btn { transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.info-btn.open { background: var(--accent-dim); }
@media (prefers-reduced-motion: reduce) {
  .move-info, .info-btn { transition: none; }
}

.rec-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--accent); color: #1A1006;
}
.rec-badge[hidden] { display: none; }

/* ---- Onboarding intro: what's coming ---- */
.intro-steps { list-style: none; counter-reset: step; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.intro-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: baseline; }
.intro-steps li::before {
  content: counter(step); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent); font-weight: 700; font-size: 0.85rem; align-self: start;
}
.intro-steps strong { font-weight: 600; }
.intro-steps span { font-size: 0.85rem; color: var(--text-muted); }
.setup.onboarding-intro { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 120px); box-sizing: border-box; }

/* ---- Build a Superset: picking in the list ---- */
.ss-check { display: none; }
.ss-picking .ss-check {
  display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; border-radius: 5px;
  border: 2px solid var(--text-muted); box-sizing: border-box;
}
.ss-picking .exercise-row.ss-selected .ss-check { background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--surface); }
.ss-picking .exercise-row.ss-eligible { cursor: pointer; }
.ss-picking .exercise-row:not(.ss-eligible) { opacity: 0.4; }
.ss-picking .exercise-row.ss-selected { color: var(--accent); }
.ss-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 4px; }
.ss-bar[hidden] { display: none; }

/* Coach: a message on its way shows straight away, marked as sending. */
.chat-bubble.user.pending { opacity: 0.75; }
.chat-bubble.user.pending::after { content: "Sending…"; display: block; margin-top: 4px; font-size: 0.7rem; opacity: 0.8; }
.chat-bubble.user.failed::after { content: "Didn't send. Your text is back in the box; tap Send to try again."; display: block; margin-top: 4px; font-size: 0.7rem; }

/* ---- How much a limitation limits you (1-5) ---- */
.sev-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.sev-row { background: var(--surface); border: 1px solid var(--accent); border-radius: 14px; padding: 12px;
           display: flex; flex-direction: column; gap: 8px; }
.sev-row[hidden] { display: none; }
.sev-name { font-weight: 600; font-size: 0.95rem; }
.sev-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sev-lvl { display: grid; place-items: center; padding: 9px 0; border-radius: 10px; cursor: pointer;
           font: 700 1.05rem var(--font-mono); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); }
.sev-lvl input { position: absolute; opacity: 0; pointer-events: none; }
.sev-lvl.on { background: var(--accent); border-color: var(--accent); color: #1A1006; }
.sev-lvl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sev-ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); }
.sev-meaning { font-weight: 600; font-size: 0.9rem; }
.sev-changes { display: flex; flex-direction: column; gap: 5px; font-size: 0.84rem; border-top: 1px solid var(--border); padding-top: 8px; }
.sev-change { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.sev-change b { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 2px; }
.sev-change.out b { color: var(--danger); } .sev-change.light b { color: #F2C14E; } .sev-change.in b { color: var(--success); }

/* the 3-2-1 before a timed set */
.adjust-row input.adjust-num.get-set { color: var(--text); }

/* the answered check-in, folded to one line */
.checkin[hidden], .checkin-compact[hidden] { display: none; }
.checkin-compact {
  margin: 4px 20px 8px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.checkin-compact-text { font-size: 0.9rem; min-width: 0; }
.checkin-compact-text strong { color: var(--success); margin-right: 6px; }
.checkin-compact-note { color: var(--text-muted); }
.checkin-edit { min-height: 32px; padding: 4px 12px; font-size: 0.8rem; flex-shrink: 0; }
.checkin-compact.just-saved { animation: checkin-fold 0.6s ease-out; }
@keyframes checkin-fold { from { transform: scaleY(1.6); opacity: 0.4; border-color: var(--success); } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .checkin-compact.just-saved { animation: none; } }
.ok-text { color: var(--success); }

/* ---- Sign in with Google / Apple / Facebook ---- */
.signin-providers { display: flex; flex-direction: column; gap: 8px; }
.signin-btn {
  display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid var(--border);
}
.signin-google { background: #ffffff; color: #1f1f1f; }
.signin-apple { background: #000000; color: #ffffff; border-color: #3a3a3a; }
.signin-facebook { background: #1877F2; color: #ffffff; border-color: #1877F2; }
.signin-or { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.78rem; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.danger-summary { border-color: var(--danger) !important; color: var(--danger) !important; }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { font-size: 1.05rem; margin: 0; }
.legal p { margin: 0; line-height: 1.55; color: var(--text); max-width: 62ch; }

/* ---- App usage (admin) ---- */
.deploy-banner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; margin-top: 6px; font-size: 0.9rem; }
.deploy-banner.ok { background: var(--success-dim); color: var(--success); }
.deploy-banner.wait { background: rgba(229, 83, 75, 0.12); border: 1px solid rgba(229, 83, 75, 0.4); color: var(--text); }
.deploy-banner.wait strong { color: var(--danger); }
.usage-table-wrap { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.usage-table th { text-align: left; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 6px 6px 8px; }
.usage-table td { padding: 9px 6px; border-top: 1px solid var(--border); vertical-align: top; }
.usage-table td.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the test copy of the app says so on every page */
.staging-banner {
  position: sticky; top: 0; z-index: 45; text-align: center; padding: 4px 8px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; background: repeating-linear-gradient(45deg, #F2C14E 0 12px, #E0A92E 12px 24px); color: #1A1006;
}

/* ---- PT mode (pt_home.html) ---- */
.saved-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--success-dim); color: var(--success); font-size: 0.85rem; }
.pt-hero { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.pt-days { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.pt-days small { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.pt-week-now { margin-top: 8px; font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.pt-ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.pt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-ring-track { fill: none; stroke: var(--surface-raised); stroke-width: 9; }
.pt-ring-fill { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.pt-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pt-ring-num b { font-size: 1.5rem; }
.pt-ring-empty { max-width: 130px; text-align: right; }
.pt-ev { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pt-ev:last-of-type { border-bottom: none; }
.pt-ev.focus .pt-ev-name { color: var(--accent); }
.pt-ev-name { font-size: 0.9rem; font-weight: 600; }
.pt-ev-val { font-size: 0.9rem; white-space: nowrap; }
.pt-ev-val b.pt-fail { color: var(--accent); }
.pt-ev-bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--surface-raised); }
.pt-ev-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.pt-ev-bar span { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-muted); }
.pt-ev-next { grid-column: 1 / -1; }
.pt-weekhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pt-list, .pt-days-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pt-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.pt-list li:last-child { border-bottom: none; }
.pt-start { display: flex; flex-direction: column; gap: 8px; }
.pt-start select { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: 0.9rem; }
.pt-weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.pt-wk { text-align: center; font: 600 0.72rem var(--font-mono); padding: 7px 0; border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); border: 1px solid transparent; }
.pt-wk.done { background: var(--accent-dim); color: var(--accent); }
.pt-wk.now { background: var(--accent); color: var(--bg); }
.pt-wk.mock:not(.now), .pt-wk.test:not(.now) { border-color: var(--accent); }
.pt-phases { display: grid; grid-template-columns: 1fr 2fr 1fr 3fr 1fr 3fr 1fr; gap: 3px; font-size: 0.62rem; color: var(--text-muted); text-align: center; }
.pt-legend { display: flex; gap: 14px; }
.pt-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pt-legend .l-done::before { background: var(--accent-dim); }
.pt-legend .l-now::before { background: var(--accent); }
.pt-legend .l-mock::before { border: 1px solid var(--accent); }
.pt-days-list li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; padding: 6px 0; font-size: 0.88rem; }
.pt-days-list li.done { opacity: 0.6; }
.pt-days-list li.next b { color: var(--accent); }
.pt-check { color: var(--accent); font-weight: 700; }
.pt-pass-line { stroke: var(--danger, #E5534B); stroke-dasharray: 4 4; }
.pt-goal-line { stroke: var(--success); stroke-dasharray: 4 4; }
.chart-label { fill: var(--text); font-size: 10px; }
.pt-log summary { list-style: none; cursor: pointer; text-align: center; }
.pt-log summary::-webkit-details-marker { display: none; }
.pt-log form { margin-top: 10px; }
.pt-tag { font: 700 0.62rem var(--font-body); letter-spacing: 0.06em; padding: 2px 6px; border-radius: 6px; background: var(--accent-dim); color: var(--accent); vertical-align: 2px; }
.history-filter { margin: 4px 0 10px; }
.pt-standards-link { text-align: center; }
.pt-std { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pt-std th, .pt-std td { text-align: left; padding: 8px 6px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.pt-std thead th { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pt-std tbody th { font-weight: 600; }
.pt-std tr:last-child th, .pt-std tr:last-child td { border-bottom: none; }
.pt-std td { white-space: nowrap; }
.pt-std tr.yours th { color: var(--accent); }
.pt-std { table-layout: fixed; }
.pt-std th:first-child { width: 44%; }