/* ===== Design tokens ===== */
:root {
  --bg: #15141A;
  --bg-card: #1D1B23;
  --bg-card-hover: #262330;
  --bg-input: #18161D;
  --border: rgba(244, 240, 233, 0.08);
  --text: #F4F0E9;
  --text-dim: #B8B3AE;
  --text-faint: #8B8791;
  --accent: #C89B5C;
  --accent-hover: #E3B863;
  --accent-dim: rgba(200, 155, 92, 0.14);
  --accent-deep: #8B6A3A;
  --danger: #D1495B;
  --danger-dim: rgba(209, 73, 91, 0.14);
  --radius: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-display: 'Archivo Expanded', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.32s;
}

/* All themes share the same background/card/text palette — only the accent color changes */

/* Color schemes — sub-options of the Iron theme specifically. The other structural themes
   (Terminal, Stat Card, Vinyl, Arcade) each have their own fixed identity palette baked in, so
   these are deliberately scoped to only take effect when data-theme="iron". */

/* Crimson — red accent */
html[data-theme="iron"][data-color-scheme="crimson"] {
  --accent: #E63946;
  --accent-hover: #F0525E;
  --accent-dim: rgba(230, 57, 70, 0.14);
  --danger: #FF9F5A;
  --danger-dim: rgba(255, 159, 90, 0.14);
}

/* Cobalt — blue accent */
html[data-theme="iron"][data-color-scheme="cobalt"] {
  --accent: #4A9EFF;
  --accent-hover: #6DB2FF;
  --accent-dim: rgba(74, 158, 255, 0.14);
}

/* Terminal — a full alternate visual language, not just a recolor. Deliberately uses THREE
   distinct hues (white, green, amber) rather than one green at varying opacity, since a single
   monochrome color read as flat and low-contrast in real app use — actual terminal dashboards
   worth looking at (lazygit, htop) use a base color plus real secondary hues for hierarchy. White
   carries the most important content (mirroring --text's usual role as the brightest tone), green
   is the "phosphor" body-text identity, dim green is supporting/meta text, and amber is reserved
   for anything interactive, so actions have a hue of their own instead of blending into the data. */
html[data-theme="terminal"] {
  --bg: #001005;
  --bg-card: #001F09;
  --bg-card-hover: #002A0C;
  --bg-input: #001A07;
  --border: rgba(76, 255, 107, 0.22);
  --text: #EAFFF0;
  --text-dim: #4CFF6B;
  /* was #1F8A38 — 3.96:1 on card, 4.41:1 on page: both under the AA floor */
  --text-faint: #2FBF50;
  --accent: #FFB020;
  --accent-hover: #FFC454;
  --accent-dim: rgba(255, 176, 32, 0.14);
  --accent-deep: #B37A12;
  --danger: #FF5C5C;
  --danger-dim: rgba(255, 92, 92, 0.14);
  --radius: 4px;
  --font-display: 'Space Mono', ui-monospace, monospace;
  --font-body: 'Space Mono', ui-monospace, monospace;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* Terminal structural overrides — beyond swapping colors/fonts, the whole visual language reads
   as command-line output: sharp corners, ASCII-style brackets, no gradients or soft shadows. */
html[data-theme="terminal"] .home-upnext-card,
html[data-theme="terminal"] .home-cta-card {
  background: var(--bg-card);
  border: 1px solid var(--text-faint);
  box-shadow: none;
}
html[data-theme="terminal"] .home-upnext-card::before { display: none; }
html[data-theme="terminal"] .home-upnext-eyebrow { color: var(--accent); }
html[data-theme="terminal"] .home-upnext-btn {
  border-radius: 2px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
/* Every list row in the app shares one shape per theme, so Sessions/Programs/History read as
   the same product as Home instead of falling back to the generic card. */
html[data-theme="terminal"] .home-recent-row,
html[data-theme="terminal"] .workout-card,
html[data-theme="terminal"] .program-card,
html[data-theme="terminal"] .progress-history-row {
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
html[data-theme="terminal"] .home-recent-date,
html[data-theme="terminal"] .workout-card-meta,
html[data-theme="terminal"] .program-card-meta { color: var(--accent); }

/* Terminal renders list rows as command output: a dim prompt glyph replaces the leading edge. */
html[data-theme="terminal"] .workout-card-name::before,
html[data-theme="terminal"] .program-card-name::before {
  content: '> ';
  color: var(--accent);
}
html[data-theme="terminal"] .view-eyebrow,
html[data-theme="terminal"] .home-section-eyebrow { color: var(--accent); }
html[data-theme="terminal"] .view-eyebrow::before { content: '// '; }

.terminal-hero { padding: 4px 0; }
.terminal-box {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre;
  color: var(--text);
  line-height: 1.6;
}
.terminal-dim { color: var(--text-faint); }
.terminal-prompt {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 14px;
}
.terminal-bigstat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 44px;
  color: var(--text);
  margin-top: 4px;
}
.terminal-cursor {
  display: inline-block;
  width: 10px; height: 18px;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: -2px;
  animation: terminalBlink 1s steps(1) infinite;
}
@keyframes terminalBlink { 50% { opacity: 0; } }

/* Stat Card — you as a player card: charcoal and gold, a stat-block hero instead of a ring. */
html[data-theme="statcard"] {
  --bg: #10131A;
  --bg-card: #171B24;
  --bg-card-hover: #1D2230;
  --bg-input: #14171F;
  --border: rgba(237, 234, 226, 0.08);
  --text: #EDEAE2;
  --text-dim: #A8A5AE;
  /* was #7A7E8C — 4.26:1 on card, under the AA floor */
  --text-faint: #8B90A0;
  --accent: #C9A15C;
  --accent-hover: #DBB578;
  --accent-dim: rgba(201, 161, 92, 0.14);
  --accent-deep: #8A6E3E;
  --danger: #D1495B;
  --danger-dim: rgba(209, 73, 91, 0.14);
  --radius: 14px;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

html[data-theme="statcard"] .home-upnext-card {
  background: linear-gradient(160deg, var(--bg-card-hover), var(--bg-card));
  border: 1px solid var(--accent);
}
html[data-theme="statcard"] .home-upnext-card::before { display: none; }
html[data-theme="statcard"] .home-recent-row,
html[data-theme="statcard"] .workout-card,
html[data-theme="statcard"] .program-card,
html[data-theme="statcard"] .progress-history-row { border-radius: 10px; }

/* Stat Card treats each row like a trading-card stat line: a gold rule under the name and
   condensed display type, matching the hero widget on Home. */
html[data-theme="statcard"] .workout-card-name,
html[data-theme="statcard"] .program-card-name {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
html[data-theme="statcard"] .view-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
}

.statcard-hero {
  background: linear-gradient(160deg, #1D2230, var(--bg-card));
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 20px;
}
.statcard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.statcard-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text); letter-spacing: 0.02em; }
.statcard-role { font-family: var(--font-body); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }
.statcard-stars { font-size: 13px; letter-spacing: 3px; color: var(--accent); }
.statcard-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.statcard-stat-box { background: rgba(201, 161, 92, 0.08); border-radius: 10px; padding: 12px 14px; }
.statcard-stat-label { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.statcard-stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--text); }
.statcard-stat-value.accent { color: var(--accent); }

/* Vinyl — a spinning record as the hero; warm walnut, burgundy, gold label. */
html[data-theme="vinyl"] {
  /* Vinyl deliberately inverts elevation: a lighter wood-grain page with dark inset "label"
     cards. The per-element overrides below already forced #16110F for that effect, but
     --bg-card was left at #2A1810 (1.17:1 against the page — effectively edgeless) so every
     surface those overrides didn't reach lost its boundary. Promoted to the token so the whole
     app gets the intended look, with the hairline border carrying the edge. */
  --bg: #3A2418;
  --bg-card: #16110F;
  --bg-card-hover: #241A14;
  --bg-input: #16110F;
  --border: rgba(240, 230, 210, 0.18);
  --text: #F0E6D2;
  --text-dim: #C9BBA0;
  --text-faint: #9C8E80;
  --accent: #E8C468;
  --accent-hover: #F0D488;
  --accent-dim: rgba(232, 196, 104, 0.14);
  --accent-deep: #8C6A2A;
  --danger: #D1495B;
  --danger-dim: rgba(209, 73, 91, 0.14);
  --radius: 16px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

html[data-theme="vinyl"] .home-upnext-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
html[data-theme="vinyl"] .home-upnext-card::before { display: none; }
html[data-theme="vinyl"] .home-upnext-title { font-family: var(--font-display); }
/* Card background now comes from the --bg-card token, so these only set the softer radius. */
html[data-theme="vinyl"] .home-recent-row,
html[data-theme="vinyl"] .workout-card,
html[data-theme="vinyl"] .program-card,
html[data-theme="vinyl"] .progress-history-row { border-radius: 12px; }

.vinyl-hero { display: flex; flex-direction: column; align-items: center; }
.vinyl-disc-wrap { position: relative; width: 200px; height: 200px; margin-bottom: 14px; }
.vinyl-disc { animation: vinylSpin 20s linear infinite; }
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.vinyl-tonearm { position: absolute; top: -6px; right: 2px; width: 82px; height: 82px; }

/* Arcade — leveling up: XP bar instead of a percentage, synthwave magenta/cyan on near-black. */
html[data-theme="arcade"] {
  --bg: #0A0812;
  --bg-card: #150F24;
  --bg-card-hover: #1B1430;
  --bg-input: #150F24;
  /* Arcade's card bg sits only 1.07:1 against the page bg, so the border is the ONLY thing that
     can define a card edge here. It used to be #150F24 — the exact same hex as --bg-card, a
     1.00:1 ratio — which made every bordered surface in the app edgeless. This neon purple
     clears 3:1 against both the card (3.36:1) and the page (3.58:1). */
  --border: #6B5AB8;
  --text: #EDE8F5;
  --text-dim: #A8A0C0;
  /* was #7A72A0 (4.21:1 on card) — below the 4.5:1 AA floor for the hint/meta text it's used for */
  --text-faint: #8F87B8;
  --accent: #F63A9C;
  --accent-hover: #FF6BB8;
  --accent-dim: rgba(246, 58, 156, 0.14);
  --accent-deep: #A02268;
  --danger: #FF5C5C;
  --danger-dim: rgba(255, 92, 92, 0.14);
  --radius: 2px;
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Work Sans', -apple-system, sans-serif;
  --font-mono: 'Press Start 2P', monospace;
}

html[data-theme="arcade"] .home-upnext-card {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  box-shadow: none;
}
html[data-theme="arcade"] .home-upnext-card::before { display: none; }
html[data-theme="arcade"] .home-upnext-btn { border-radius: 2px; }
html[data-theme="arcade"] .home-recent-row,
html[data-theme="arcade"] .workout-card,
html[data-theme="arcade"] .program-card,
html[data-theme="arcade"] .progress-history-row { border-radius: 2px; border: 2px solid var(--border); }

/* Press Start 2P has no real weight range and huge glyphs, so display type is capped small
   wherever it lands on body-adjacent text. */
html[data-theme="arcade"] .home-section-eyebrow,
html[data-theme="arcade"] .view-eyebrow { font-family: var(--font-display); font-size: 9px; }
html[data-theme="arcade"] .workout-card-name,
html[data-theme="arcade"] .program-card-name {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.5;
}
html[data-theme="arcade"] .workout-card-meta,
html[data-theme="arcade"] .program-card-meta { font-family: var(--font-body); }
html[data-theme="arcade"] .workout-card-count { font-size: 14px; }

/* --font-mono is Press Start 2P in this theme, and at 13px its glyphs are wide enough that the
   header summary wrapped onto a second line and ran into the count beside it. Body font keeps
   the line intact; only the numeral stays pixel-type for flavour. */
html[data-theme="arcade"] .view-summary {
  font-family: var(--font-body);
  font-size: 12px;
}
html[data-theme="arcade"] .view-summary strong { font-family: var(--font-display); font-size: 10px; }
html[data-theme="arcade"] .view-header-count span,
html[data-theme="arcade"] .workout-card-count span { font-size: 8px; letter-spacing: 0.04em; }

.arcade-hero { margin-bottom: 4px; }
.arcade-level-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.arcade-level-badge { font-family: var(--font-display); font-size: 10px; color: #3AE8E0; background: var(--bg-card); padding: 6px 10px; border: 2px solid #3AE8E0; }
.arcade-xp-count { font-family: var(--font-display); font-size: 10px; color: var(--text-faint); }
.arcade-xp-outer { height: 22px; background: var(--bg-card); border: 2px solid var(--text-faint); position: relative; overflow: hidden; }
.arcade-xp-inner { height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0px, var(--accent) 8px, var(--accent-hover) 8px, var(--accent-hover) 10px); transition: width 0.4s var(--ease-out); }

/* Emerald — green accent */
html[data-theme="iron"][data-color-scheme="emerald"] {
  --accent: #4CAF7D;
  --accent-hover: #66C494;
  --accent-dim: rgba(76, 175, 125, 0.14);
}

/* Violet — violet accent */
html[data-theme="iron"][data-color-scheme="violet"] {
  --accent: #9B7EDE;
  --accent-hover: #B096E8;
  --accent-dim: rgba(155, 126, 222, 0.14);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  height: 100%;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

#app { height: 100%; overflow-x: hidden; }

.hidden { display: none !important; }

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea {
  font-family: inherit;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
  width: 100%;
  min-width: 0; /* flex/grid children default to min-width:auto, which lets them overflow their row instead of shrinking */
  height: 48px; /* forces text/date/number inputs to an identical height — iOS renders native date pickers with their own internal sizing otherwise, which looks misaligned next to plain text fields */
  -webkit-appearance: none;
  appearance: none;
}

textarea { height: auto; }

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

input:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

label input, label textarea { margin-top: 6px; }

textarea { min-height: 70px; resize: vertical; }

.btn {
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 100%;
}

.btn-primary { background: var(--accent); color: #1A1200; }
.btn-primary:active { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.btn-danger { background: var(--danger-dim); color: var(--danger); }

.editor-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* ===== Screens ===== */
.screen {
  height: 100%;
  animation: screenIn 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(24px + var(--safe-top));
}

#screen-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  padding-top: 0;
}

@keyframes screenIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

button { transition: transform var(--dur-fast) ease; }
button:active { transform: scale(0.95); }
.tab-fab:active { transform: scale(0.88); }

/* ---- Auth ---- */
.auth-wrap { width: 100%; max-width: 400px; }

.brand { text-align: center; margin-bottom: 32px; }

.logo-dumbbell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
}
.logo-dumbbell .db-weight {
  width: 15px;
  height: 40px;
  border-radius: 5px;
  background: radial-gradient(circle at 35% 30%, #2E333F, #14161C 70%);
  border: 2.5px solid var(--accent);
  flex-shrink: 0;
}
.logo-dumbbell .db-bar {
  width: 22px;
  height: 8px;
  background: var(--accent);
  margin: 0 -3px;
  flex-shrink: 0;
}
.logo-dumbbell.small {
  width: 40px;
  height: 40px;
}
.logo-dumbbell.small .db-weight { width: 11px; height: 28px; border-width: 2px; }
.logo-dumbbell.small .db-bar { width: 15px; height: 6px; margin: 0 -2px; }

.brand h1 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.12em;
  margin: 0;
  font-weight: 800;
}

.tagline {
  color: var(--text-dim);
  font-size: 13px;
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.auth-tabs {
  display: flex;
  background: var(--bg-input);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}

.auth-tab.active { background: var(--accent); color: #1A1200; }

.form-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin: -4px 0 12px;
  font-weight: 600;
}

.form-success {
  color: var(--accent);
  font-size: 13px;
  margin: -4px 0 12px;
  font-weight: 600;
  line-height: 1.4;
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  padding: 12px 0 0;
  width: 100%;
  text-align: center;
}

.hint {
  color: var(--text-faint);
  font-size: 12px;
  margin: -8px 0 14px;
}

/* ---- Main app ---- */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  padding-top: calc(14px + var(--safe-top));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}

.view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  padding-bottom: calc(120px + var(--safe-bottom));
  max-width: 100vw;
  animation: viewIn var(--dur-med) var(--ease-out);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Shared view primitives ----------
   Home originally owned the only real layout language in the app (.home-header, eyebrows,
   sectioning), so every other tab dropped straight into an unlabelled list and read as a
   different, older product. These are the generalized versions: any tab can open with an
   eyebrow + summary line, and the per-theme overrides above hook onto .view-eyebrow once
   rather than being rewritten per tab. */
.view-header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.view-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.view-summary {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}

/* The one number worth emphasising in a view header, in the accent. */
.view-summary strong {
  color: var(--accent);
  font-weight: 700;
}

.view-header-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
}

.view-header-count span {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
  text-align: right;
}

/* Workout list */
.workout-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  animation: cardIn 0.36s var(--ease-out) both;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.workout-card:active { transform: scale(0.97); opacity: 0.85; }

.workout-card-main { flex: 1; min-width: 0; }

/* Realistic session names ("Lower Body — Squat Focus") are longer than one line of a 390px
   card once the exercise count claims the right edge, and a single-line ellipsis was cutting
   them at the most meaningful word. Two lines, then clamp. */
.workout-card-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.workout-card-meta {
  color: var(--text-dim);
  font-size: 13px;
  font-family: var(--font-mono);
}

.workout-card-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 22px;
  text-align: right;
  line-height: 1;
}

.workout-card-count span {
  display: block;
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}

/* Home dashboard */

/* Home's content is capped (ring + streak + one up-next card + max 2 recent sessions), so it
   never needs the generic .view scroll-clearance padding sized for longer lists on other tabs.
   Deliberately NOT using justify-content:center to vertically center this — combining that with
   overflow-y:auto (inherited from .view) produces inconsistent, browser-dependent extra space
   above the content instead of splitting evenly, so plain top-down flow with a modest bottom
   padding is more predictable here. */
#view-home {
  padding-bottom: calc(32px + var(--safe-bottom));
}

.home-header {
  margin-bottom: 16px;
}

.home-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.home-greeting {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
}

.home-ring-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}

.home-ring-wrap {
  position: relative;
  width: 144px;
  height: 144px;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 35%, transparent));
  animation: ringIn 0.5s var(--ease-out);
}

/* Terminal/Stat Card/Vinyl/Arcade hero widgets are cards or discs, not a small ring — the fixed
   144x144 box above was sized specifically for the ring and clips/misplaces anything wider. */
html[data-theme="terminal"] .home-ring-wrap,
html[data-theme="statcard"] .home-ring-wrap,
html[data-theme="vinyl"] .home-ring-wrap,
html[data-theme="arcade"] .home-ring-wrap {
  width: 100%;
  height: auto;
  filter: none;
}

@keyframes ringIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.home-ring-svg { width: 100%; height: 100%; }
.home-ring-svg circle { transition: stroke-dashoffset 0.9s var(--ease-out); }

.home-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-ring-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 34px;
  color: var(--text);
  line-height: 1;
  /* Signature move: numerals engraved into metal — a light highlight above, a dark shadow
     below, giving the digit a debossed, stamped-plate quality. Kept to just this one number
     app-wide, so it stays a genuine signature rather than a repeated gimmick. */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 -1.5px 1px rgba(0,0,0,0.5),
    0 2px 3px rgba(0,0,0,0.3);
}

.home-ring-label {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 3px;
  text-transform: uppercase;
}

.home-streak {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  animation: cardIn 0.4s var(--ease-out) both;
  animation-delay: 0.3s;
}

.home-section { margin-bottom: 18px; }

.home-section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.home-cta-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  animation: cardIn 0.36s var(--ease-out) both;
}

.home-cta-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.home-cta-sub { font-size: 13px; color: var(--text-dim); }

.home-upnext-card {
  background: linear-gradient(155deg, var(--bg-card-hover), var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
  animation: cardIn 0.36s var(--ease-out) both;
}

.home-upnext-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.home-upnext-title { font-family: var(--font-display); }

.home-upnext-info { flex: 1; min-width: 0; }

.home-upnext-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.home-upnext-title { font-weight: 800; font-size: 17px; margin-bottom: 4px; }

.home-upnext-sub {
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-upnext-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #1A1200;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: 800;
  font-size: 14px;
}

.home-upnext-btn:active { transform: scale(0.92); }

.home-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-recent-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: cardIn 0.36s var(--ease-out) both;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.home-recent-row:active { transform: scale(0.97); opacity: 0.85; }

.home-recent-name { font-weight: 700; font-size: 14px; }
.home-recent-date { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }

.home-empty-note {
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}

/* Progress tab */
.progress-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.progress-metric-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  animation: cardIn 0.36s var(--ease-out) both;
}

.progress-metric-label {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.progress-metric-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  line-height: 1.2;
}

.progress-metric-sub {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

.progress-metric-sub.up { color: var(--accent); }
.progress-metric-sub.down { color: var(--danger); }

.progress-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 8px 6px;
  margin-bottom: 16px;
  animation: cardIn 0.36s var(--ease-out) both;
}

.progress-chart-svg {
  width: 100%;
  height: 220px;
  display: block;
}

@keyframes dotIn {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

.progress-chart-dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: dotIn 0.25s var(--ease-out) both;
}

.progress-chart-note {
  color: var(--text-dim);
  font-size: 14px;
  padding: 20px 8px;
  text-align: center;
}

.progress-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-history-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: cardIn 0.36s var(--ease-out) both;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.progress-history-row:active { transform: scale(0.97); opacity: 0.85; }

.progress-row-date {
  font-size: 13px;
  color: var(--text-dim);
  flex: 1;
}

.progress-row-topset {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-row-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.progress-row-delta.up { color: var(--accent); }
.progress-row-delta.down { color: var(--danger); }

.progress-row-volume {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  text-align: right;
  min-width: 70px;
}

.empty-sub { font-size: 13px; color: var(--text-faint); }

/* Exercise editor */
.exercise-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.exercise-card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.exercise-card-header input {
  font-weight: 700;
  width: 100%;
}

.ex-card-toolbar {
  display: flex;
  gap: 8px;
}
.ex-card-toolbar .btn-choose { flex: 1; height: 40px; }
.ex-card-toolbar .btn-ex-info { flex-shrink: 0; height: 40px; }
.ex-card-toolbar .btn-remove { flex-shrink: 0; height: 40px; }

.btn-choose, .btn-ex-info, .btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-ex-info {
  background: var(--bg-card);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px;
  font-weight: 700;
  font-size: 15px;
}

.btn-remove {
  background: var(--danger-dim);
  color: var(--danger);
  border: none;
  border-radius: 8px;
  width: 40px;
  font-weight: 700;
  font-size: 18px;
}

.set-row {
  display: grid;
  grid-template-columns: 24px 1fr 1fr 32px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.set-row .set-num {
  font-family: var(--font-mono);
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
}

.set-row input {
  font-family: var(--font-mono);
  text-align: center;
  padding: 10px 6px;
}

.btn-add-set {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  width: 100%;
  margin-top: 4px;
}

.btn-save-exercise {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  margin-top: 10px;
}
.btn-save-exercise:disabled { opacity: 0.7; }

/* Detail view */
.detail-header { margin-bottom: 20px; }
.detail-header h2 { margin: 0 0 4px; font-size: 22px; }
.detail-header .meta { color: var(--text-dim); font-family: var(--font-mono); font-size: 14px; }
.detail-notes {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-dim);
  font-size: 14px;
  margin: 14px 0;
}

.detail-exercise {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.detail-exercise:last-child { border-bottom: none; }
.detail-exercise-name { font-weight: 700; margin-bottom: 8px; }

.detail-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.set-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}
.set-pill span { color: var(--text-faint); }

.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

/* Tab bar */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(27, 30, 38, 0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 8px 16px calc(8px + var(--safe-bottom));
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  flex: 1;
  padding: 4px;
}

.tab-btn.active { color: var(--accent); }
.tab-icon { font-size: 20px; }

.tab-fab {
  flex: 0 0 auto;
  background: var(--accent);
  color: #1A1200;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-top: -24px;
  box-shadow: 0 4px 14px rgba(232, 163, 61, 0.4);
}
.tab-fab .tab-icon { font-size: 26px; font-weight: 700; }

/* Toast */
.toast {
  position: fixed;
  bottom: calc(90px + var(--safe-bottom));
  left: 20px;
  right: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toastIn 0.3s var(--ease-out);
}
.toast.error { border-color: var(--danger); color: var(--danger); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

.toast.toast-out { animation: toastOut 0.22s ease forwards; }

/* Programs */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.checkbox-label input { width: auto; }

.program-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  animation: cardIn 0.36s var(--ease-out) both;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.program-card:active { transform: scale(0.97); opacity: 0.85; }
.program-card-name { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.program-card-meta { color: var(--text-dim); font-size: 13px; font-family: var(--font-mono); }

/* A program's whole point is a plan you work through, so the card shows how much of it is
   actually filled in. Uses the same accent + mono numeral language as Home's ring. */
.program-card-bar {
  margin-top: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-input);
  overflow: hidden;
}

.program-card-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s var(--ease-out);
}

.program-card-foot {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Arcade's border is 2px and its radius is 2px — a rounded fill inside reads as a mistake. */
html[data-theme="arcade"] .program-card-bar,
html[data-theme="arcade"] .program-card-bar-fill,
html[data-theme="terminal"] .program-card-bar,
html[data-theme="terminal"] .program-card-bar-fill { border-radius: 0; }
html[data-theme="arcade"] .program-card-foot { font-family: var(--font-body); }

.week-group { margin-bottom: 18px; }
.week-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.week-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.btn-dup-week {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}

.day-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.day-row-name { font-weight: 700; font-size: 14px; }
.day-row-meta { color: var(--text-faint); font-size: 12px; font-family: var(--font-mono); margin-top: 2px; }
.day-row-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.day-row-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.day-row-actions button {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
.day-row.is-rest { opacity: 0.6; }
.badge-rest {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  letter-spacing: 0.04em;
}

.badge-done {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  letter-spacing: 0.04em;
}

.week-group-title { display: flex; align-items: center; gap: 6px; }

#btn-toggle-completed-weeks { margin-bottom: 16px; }

.btn-view-history {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.pd-exercise-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.pd-exercise-card .ex-name-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.pd-exercise-card .ex-name-row input { flex: 1; font-weight: 700; }
.pd-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.pd-field-grid label {
  margin-bottom: 0;
  font-size: 11px;
}
.pd-field-grid input { font-family: var(--font-mono); font-size: 14px; padding: 8px 10px; }
.pd-notes-field { margin-top: 8px; }
.pd-notes-field textarea { min-height: 50px; font-size: 13px; }

.plan-target {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 4px;
  margin-bottom: 14px;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
}
.plan-target b { color: var(--accent); }

/* Exercise picker overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  animation: overlayFadeIn 0.25s ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes panelSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.overlay-panel {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px 20px calc(16px + var(--safe-bottom));
  animation: panelSlideUp 0.32s var(--ease-out);
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 12px;
}

#picker-search {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.picker-list {
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  margin-bottom: 12px;
}

.picker-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 14px 0 6px 2px;
}
.picker-group-title:first-child { margin-top: 0; }

.picker-item {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--dur-fast) ease;
}
.picker-item:active { background: var(--bg-card-hover); }
.picker-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-item .tag-custom {
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

.btn-exercise-info {
  flex-shrink: 0;
  margin-left: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}

.picker-empty {
  color: var(--text-faint);
  text-align: center;
  padding: 24px 0;
  font-size: 14px;
}

.picker-add {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  flex-shrink: 0;
}
.picker-add input, .picker-add select { margin-bottom: 8px; }
.picker-add select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  width: 100%;
}

/* Theme picker */
.theme-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}

#select-theme, #select-color-scheme {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.btn-choose {
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

/* File column mapping */
.map-intro {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.map-intro span { color: var(--accent); font-weight: 700; font-family: var(--font-mono); }

.map-field-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.map-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.map-field-group select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  width: 100%;
}
.map-field-group label { margin-bottom: 12px; }
.map-field-group label:last-child { margin-bottom: 0; }

.preview-summary {
  margin-top: 8px;
}
.preview-week-block {
  margin-bottom: 14px;
}
.preview-week-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.preview-day-row {
  display: flex;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 13px;
}
.preview-day-row .name { font-weight: 600; }
.preview-day-row .count { color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; }

@media (min-width: 480px) {
  .auth-wrap { max-width: 380px; }
}

/* Exercise info modal */
.exercises-list-chevron {
  flex-shrink: 0;
  margin-left: 10px;
  color: var(--text-faint);
  font-size: 18px;
  font-weight: 700;
}

.exercise-info-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.ei-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-faint);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 4px;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ei-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ei-panel { min-height: 80px; }

.exercise-info-loading, .exercise-info-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 40px 10px;
  font-size: 14px;
}

/* Live workout */
.live-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 60px;
}

.live-setup-intro {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 320px;
}

.live-rest-default-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.live-rest-presets {
  display: flex;
  gap: 8px;
}

.live-rest-preset {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.live-rest-preset.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.live-setup-question {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 16px;
}

.live-setup-list-item { cursor: pointer; }

.live-week-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.live-week-label {
  font-size: 15px;
  font-weight: 800;
  min-width: 80px;
  text-align: center;
}

.live-week-nav {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-week-nav:disabled {
  color: var(--text-faint);
  opacity: 0.4;
}

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.live-header-title {
  font-size: 20px;
  font-weight: 800;
}

.live-end-btn {
  background: var(--danger-dim);
  color: var(--danger);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
}

.live-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.live-current-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  width: 100%;
  text-align: center;
  animation: cardIn 0.36s var(--ease-out) both;
}

.live-current-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.live-current-name {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
}

.live-current-target {
  font-size: 14px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.live-current-lastsession {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 4px;
  font-family: var(--font-mono);
}

.live-plan-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.live-sets-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.live-sets-stepper-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.live-stepper-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-sets-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  min-width: 20px;
  text-align: center;
}

.live-remove-link {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  padding: 4px;
}

.view-fab-menu {
  position: fixed;
  bottom: calc(90px + var(--safe-bottom));
  right: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: #1A1200;
  border: none;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}

.program-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.program-detail-header .program-card-meta { margin-bottom: 0; }

.view-fab-inline {
  position: static;
  width: 36px;
  height: 36px;
  font-size: 18px;
  box-shadow: none;
  flex-shrink: 0;
}

.live-start-set-btn {
  width: 100%;
  padding: 18px;
  font-size: 17px;
  border-radius: 16px;
}

.live-log-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.live-log-fields input {
  text-align: center;
  font-size: 22px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.live-rest-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 10px;
}

.live-rest-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.live-rest-countdown {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 56px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 18px;
}

.live-rest-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-rest-adjust {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-mono);
}

.live-upnext-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  width: 100%;
  animation: cardIn 0.36s var(--ease-out) both;
}

.live-upnext-name {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 4px;
}

.live-upnext-target {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.live-upnext-last {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.live-then-card {
  margin-top: 10px;
  padding: 14px 18px;
  opacity: 0.8;
  animation-delay: 0.08s;
}

.live-then-card .live-upnext-name {
  font-size: 16px;
  margin-bottom: 2px;
}

.live-done-message {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  padding: 40px 0;
}

/* ===== Live view — per-theme structural overrides =====
   The base live classes above establish the Iron default. These overrides adapt the live
   workout screen to each alternate theme's visual language, mirroring the same pattern used
   for Home, Sessions, Programs, and Progress above. */

/* Terminal — sharp edges, phosphor green text, amber accent for interactive elements */
html[data-theme="terminal"] .live-current-card,
html[data-theme="terminal"] .live-upnext-card {
  border-radius: 2px;
  border: 1px solid var(--text-faint);
  background: var(--bg-card);
}
html[data-theme="terminal"] .live-current-name {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
}
html[data-theme="terminal"] .live-header-title {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-theme="terminal"] .live-header-title::before { content: '> '; color: var(--accent); }
html[data-theme="terminal"] .live-end-btn {
  border-radius: 2px;
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
}
html[data-theme="terminal"] .live-rest-countdown {
  font-size: 48px;
  letter-spacing: 0.06em;
}
html[data-theme="terminal"] .live-rest-preset {
  border-radius: 2px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
html[data-theme="terminal"] .live-rest-preset.active {
  background: var(--accent-dim);
}
html[data-theme="terminal"] .live-week-nav {
  border-radius: 2px;
  border: 1px solid var(--accent);
}
html[data-theme="terminal"] .live-week-switcher {
  border-bottom-color: var(--text-faint);
}
html[data-theme="terminal"] .live-done-message {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
html[data-theme="terminal"] .live-done-message::before { content: '// '; }

/* Stat Card — Oswald display type on current exercise name, gold borders on cards */
html[data-theme="statcard"] .live-current-card {
  background: linear-gradient(160deg, var(--bg-card-hover), var(--bg-card));
  border: 1px solid var(--accent);
  border-radius: 10px;
}
html[data-theme="statcard"] .live-upnext-card {
  border-radius: 10px;
}
html[data-theme="statcard"] .live-current-name {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
html[data-theme="statcard"] .live-header-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-theme="statcard"] .live-end-btn { border-radius: 6px; }
html[data-theme="statcard"] .live-rest-preset { border-radius: 6px; }
html[data-theme="statcard"] .live-week-nav { border-radius: 6px; }
html[data-theme="statcard"] .live-done-message {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Vinyl — Fraunces serif for current name, warm wood tones, rounded cards */
html[data-theme="vinyl"] .live-current-card,
html[data-theme="vinyl"] .live-upnext-card {
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
html[data-theme="vinyl"] .live-current-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
}
html[data-theme="vinyl"] .live-header-title {
  font-family: var(--font-display);
  font-style: italic;
}
html[data-theme="vinyl"] .live-end-btn { border-radius: 8px; }
html[data-theme="vinyl"] .live-rest-preset { border-radius: 12px; }
html[data-theme="vinyl"] .live-week-nav { border-radius: 50%; }
html[data-theme="vinyl"] .live-done-message {
  font-family: var(--font-display);
  font-style: italic;
}

/* Arcade — pixel type on title/done, neon magenta accent, sharp 2px borders */
html[data-theme="arcade"] .live-current-card,
html[data-theme="arcade"] .live-upnext-card {
  border-radius: 2px;
  border: 2px solid var(--border);
  background: var(--bg-card);
}
html[data-theme="arcade"] .live-current-name {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
html[data-theme="arcade"] .live-header-title {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.04em;
}
html[data-theme="arcade"] .live-end-btn {
  border-radius: 2px;
  border: 2px solid var(--danger);
  background: transparent;
  color: var(--danger);
}
html[data-theme="arcade"] .live-rest-countdown {
  font-size: 44px;
  color: #3AE8E0;
  letter-spacing: 0.04em;
}
html[data-theme="arcade"] .live-rest-preset {
  border-radius: 2px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 9px;
}
html[data-theme="arcade"] .live-rest-preset.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
html[data-theme="arcade"] .live-week-nav {
  border-radius: 2px;
  border: 2px solid var(--border);
  width: 32px;
  height: 32px;
}
html[data-theme="arcade"] .live-week-switcher {
  border-bottom: 2px solid var(--border);
}
html[data-theme="arcade"] .live-done-message {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.8;
  color: var(--accent);
}

/* Anyone with reduced-motion set gets all the same states instantly, no animated transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* Compact control-deck rest timer */
.live-rest-timer { width: 100%; max-width: 420px; }
.live-rest-progress { width: min(100%, 320px); height: 5px; margin: 0 auto 15px; overflow: hidden; border-radius: 999px; background: var(--bg-input); }
#live-rest-progress-fill { width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.2s linear; }
.live-rest-quick-adjust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; margin-bottom: 10px; }
.live-rest-adjust, .live-rest-duration { min-height: 38px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
.live-rest-duration { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.live-rest-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.live-rest-actions .btn { margin: 0; }
.live-rest-skip { width: 100%; margin-top: 10px; margin-bottom: 0; }
@media (max-width: 360px) { .live-rest-quick-adjust { gap: 4px; } .live-rest-adjust, .live-rest-duration { font-size: 10px; } }


/* B+ default-rest picker: segmented range with fine adjustment */
.live-rest-picker-bplus { width: 100%; max-width: 390px; align-items: stretch; gap: 0; text-align: left; }
.live-rest-picker-label, .live-rest-quick-label { color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.live-rest-picker-duration { color: var(--accent); font-family: var(--font-mono); font-size: 48px; font-weight: 700; letter-spacing: -0.08em; line-height: 1; margin: 9px 0 17px; text-align: center; }
.live-rest-picker-bplus .live-rest-fine-adjust {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
}
.live-rest-scrubber {
  position: relative;
  width: 100%;
  height: 28px;
  padding: 0;
  touch-action: none;
  cursor: ew-resize;
}
.live-rest-scrubber::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  transform: translateY(-50%);
}
.live-rest-scrubber-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%);
  width: 27.27%;
}
.live-rest-scrubber-thumb {
  position: absolute;
  top: 50%;
  left: 27.27%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
}
.live-rest-picker-bplus .live-rest-quick-label {
  margin-top: 4px;
  margin-bottom: 10px;
  text-align: center;
}
.live-rest-picker-bplus .live-rest-quick-picks {
  justify-content: center;
  margin-bottom: 22px;
}


/* Center the default-rest scrubber on the actual default value, and give the
   fine-adjust buttons and quick picks a more deliberate, consistent look.
   Placed at the end of the file so these rules win over earlier ones with
   the same selectors, regardless of source order elsewhere. */
.live-rest-picker-bplus .live-rest-quick-label {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 10px;
}
.live-rest-picker-bplus .live-rest-quick-picks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.live-rest-quick-picks button {
  min-width: 56px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.live-rest-quick-picks button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1A1200;
}
.live-rest-picker-bplus .live-rest-fine-adjust {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
}
.live-rest-fine-button {
  min-width: 54px;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}
.live-rest-fine-button:hover {
  background: var(--bg-card-hover);
}


/* Live workout: reorder / jump-to-exercise modal. */
.live-reorder-hint {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.live-reorder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.live-reorder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.live-reorder-row-current {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.live-reorder-arrows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-reorder-arrow {
  width: 30px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-reorder-arrow:disabled {
  opacity: 0.35;
}
.live-reorder-info {
  flex: 1;
  min-width: 0;
}
.live-reorder-name {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-reorder-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 6px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}
.live-reorder-meta {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.live-reorder-jump {
  flex-shrink: 0;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


/* Live workout reorder: "up next" indicator and one-tap swap-in shortcut. */
.live-reorder-badge-next {
  color: var(--text-dim);
  border-color: var(--border);
  background: var(--bg-input);
}
.live-reorder-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.live-reorder-swap {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #1A1200;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.live-reorder-jump {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


/* Live workout: remembered-substitution suggestion banner. */
.live-sub-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
}
.live-sub-suggestion-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.live-sub-suggestion-text strong {
  color: var(--accent);
}
.live-sub-suggestion-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.live-sub-suggestion-apply {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #1A1200;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.live-sub-suggestion-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}