/* Gainzz Tracker — stylesheet
 * Single global stylesheet, organized by feature area with `── Section ──`
 * comments matching the js/ file layout where it lines up 1:1 (rest timer,
 * history, exercise library, routine editor, etc). No CSS framework/build step —
 * plain custom properties (:root) for the color system, everything else is
 * hand-written utility-ish classes scoped per component. */

* { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --chest: #ff4757; --pull: #2e86ff; --arms: #a855f7;
    --legs: #22c55e; --rest: #7f8c8d; --bg: #08090b;
    /* Day-type tags added for body-part / full-body splits — chest, pull, legs, arms
       (above) already covered the original PPL-ish default and keep their colors. */
    --push: #fb923c; --back: #06b6d4; --shoulders: #eab308;
    --core: #14b8a6; --fullbody: #ec4899;
    --card: #16171c; --card2: #202127; --border: #2a2b32;
    /* --muted2 was #52535c = 2.3:1 on --card — below the 3:1 WCAG minimum for
       UI components, and it colors the destructive set/exercise remove buttons.
       #6b6c78 measures 3.4:1 and stays visibly dimmer than --muted (4.8:1), so
       the hierarchy survives. Re-check both if --card ever changes. */
    --text: #f5f6f8; --muted: #82838d; --muted2: #6b6c78;
    /* Generic semantic tokens (the Coach tab's budget bar / error text use these;
       they alias the established palette rather than introducing new colors). */
    --red: #ff4757; --accent: #2e86ff;
    /* Round 46 §1: --danger was referenced (Merge button, Delete button) but
       NEVER DEFINED — invalid at computed-value time, so the backgrounds fell
       back to transparent and the destructive controls lost their warning
       colour entirely. #ff4757 on --card (#16171c) measures 5.36:1 — above the
       3:1 UI-component minimum and the 4.5:1 text bar; --bg text on the red
       fill measures 5.97:1. It aliases --red/--chest rather than adding a new
       red. Re-check if --card ever changes. */
    --danger: #ff4757;
    /* Round 46 §6 guard findings — three more referenced-but-undefined tokens,
       aliased to the nearest established colour instead of inventing new ones:
       --text-dim → --muted (4.76:1 on --card, safe for the update-badge ×),
       --primary → --accent (5.09:1), --card-alt → --card2 (elevated surface). */
    --text-dim: #82838d; --primary: #2e86ff; --card-alt: #202127;
    --glow-fire: linear-gradient(135deg, #ff4757 0%, #ff9f43 100%);
    --glow-cool: linear-gradient(135deg, #2e86ff 0%, #a855f7 100%);
    --glow-gold: linear-gradient(135deg, #ffb703 0%, #ff4757 100%);
    --shadow-card: 0 2px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset;
    --shadow-pop:  0 10px 30px rgba(0,0,0,.5);
  }
  * { -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; }
  body {
    font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
    background:
      radial-gradient(760px 420px at 12% -8%, rgba(255,71,87,.10), transparent 60%),
      radial-gradient(700px 460px at 108% 0%, rgba(46,134,255,.10), transparent 55%),
      var(--bg);
    background-attachment: fixed;
    color:var(--text); min-height:100vh; padding:16px; max-width:620px; margin:0 auto;
    animation: app-fade-in .4s ease both;
  }
  /* Opacity-only ON PURPOSE: a transform here (even one that settles to none)
     makes body the containing block for position:fixed on iOS WebKit — every
     fullscreen overlay (rest timer, summary) then positions against
     the scrolled DOCUMENT instead of the viewport and lands off-center. Never
     add transform/filter/will-change to body or any overlay ancestor. */
  @keyframes app-fade-in { from { opacity:0; } to { opacity:1; } }
  ::selection { background: rgba(255,71,87,.35); color:#fff; }
  button, .nav-btn, .start-btn, .save-btn, .settings-save-btn { -webkit-tap-highlight-color: transparent; }
  button:active, .nav-btn:active, [class*="-btn"]:active { transform: scale(.96); }
  .app-header { margin-bottom:18px; display:flex; align-items:center; gap:10px; }
  .app-header .app-mark {
    width:30px; height:30px; border-radius:9px; flex-shrink:0;
    background: var(--glow-fire);
    box-shadow: 0 0 18px rgba(255,71,87,.5), 0 2px 6px rgba(0,0,0,.4);
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .app-header h1 {
    font-size:19px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
    color: var(--text); /* fallback if gradient-text clipping isn't supported — never invisible */
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .app-header h1 {
      background: linear-gradient(90deg, #ffffff 0%, #c9cbd3 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
  }
  .nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 620px;
    display: flex;
    background: rgba(22, 23, 28, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
    justify-content: space-around;
    gap: 2px;
  }
  .nav-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    border-radius: 8px;
    transition: all .15s ease;
    min-height: 48px;
    position: relative;
  }
  .nav-btn .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
  }
  .nav-btn .nav-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }
  .nav-btn .nav-label {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-btn:hover { color: var(--text); }
  .nav-btn.active {
    color: var(--accent);
    background: rgba(46, 134, 255, .1);
    box-shadow: none;
  }
  /* The Coach's push surface: one dot on the icon */
  .nav-dot {
    position: absolute;
    top: -1px;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }
  .nav-btn.active .nav-dot { background: var(--accent); }
  .view { display: none; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .view.active { display: block; animation: view-in .28s cubic-bezier(.16,1,.3,1) both; }
  @keyframes view-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  /* Round 45 §3: the Training sub-views nest inside #view-training, which already
     carries the bottom padding for the fixed nav — children must not double it. */
  #view-training .view { padding-bottom: 0; }

  /* ── Accessibility baselines ────────────────────────────────────────────── */
  /* Keyboard users need to SEE focus. :focus-visible only paints for keyboard/
     AT navigation, so taps never show a lingering ring. */
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .day-card:focus-visible { outline-offset:-2px; }

  /* Respect the OS "reduce motion" setting — vestibular disorders, and it also
     makes the app feel snappier on old hardware. Transitions collapse to
     near-zero rather than 0 so :active feedback still registers as a state
     change. NOTE: the app deliberately animates opacity only on body/overlay
     ancestors (see the iOS containing-block rule) — nothing here re-introduces
     transforms on those. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
    .view.active { animation:none; }
  }

  /* ── Block bar ── */
  .block-bar { display:flex; align-items:center; justify-content:space-between; background:var(--card); border-radius:12px; padding:12px 16px; margin-bottom:12px; cursor:pointer; border:1px solid var(--border); user-select:none; gap:12px; box-shadow:var(--shadow-card); transition:border-color .2s, transform .15s; }
  .block-bar:hover { border-color:var(--muted2); }
  .block-bar:active { transform:scale(.995); }
  .block-bar-info { flex:1; min-width:0; }
  .block-bar-top-row { display:flex; align-items:center; gap:8px; }
  .block-bar-name { font-size:13px; font-weight:800; }
  .block-bar-badge { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:#27ae60; color:white; border-radius:4px; padding:2px 6px; flex-shrink:0; }
  .block-bar-badge.final { background:#e67e22; animation:pulse-badge 1.4s ease-in-out infinite; }
  @keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.55} }
  .block-bar-sub { font-size:11px; color:var(--muted); margin-top:3px; }
  .block-progress-track { height:3px; background:var(--border); border-radius:2px; margin-top:7px; overflow:hidden; }
  .block-progress-fill { height:100%; background:#27ae60; border-radius:2px; transition:width .5s ease; }
  .block-bar-caret { font-size:20px; color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .block-bar-caret.open { transform:rotate(90deg); }

  .bw-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:14px; box-shadow:var(--shadow-card); }
  .bw-input-row { display:flex; gap:8px; margin-bottom:8px; }
  .bw-input { flex:1; background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:var(--text); font-size:16px; min-width:0; }
  .bw-log-btn { background:var(--accent, #2e86ff); border:none; color:#fff; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:800; cursor:pointer; flex-shrink:0; }
  .bw-trend { font-size:12px; color:var(--muted); margin-bottom:6px; }
  .bw-spark { margin-bottom:8px; }
  .bw-list { display:flex; flex-direction:column; gap:4px; }
  .bw-list-item { display:grid; grid-template-columns:1fr 1fr 24px; align-items:center; gap:8px; font-size:12px; color:var(--muted2); padding:3px 0; }
  .bw-list-item span:first-child { color:var(--muted); }
  .bw-list-del { background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; padding:0; line-height:1; justify-self:end; }
  .bw-list-del:hover { color:#ff4757; }
  .bw-list-empty { font-size:12px; color:var(--muted); }

  /* ── Block settings panel ── */
  .block-settings-panel { background:var(--card); border-radius:10px; padding:16px; margin-bottom:14px; border:1px solid var(--border); display:none; }
  .block-settings-panel.open { display:block; }
  .settings-field { margin-bottom:14px; }
  .settings-field label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:block; margin-bottom:6px; }
  .settings-field input { width:100%; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:9px 12px; font-size:16px; }
  .settings-field input:focus { outline:none; border-color:var(--muted); }
  .settings-name-error { font-size:11px; color:var(--chest); margin-top:5px; display:none; }
  .settings-name-error.visible { display:block; }
  .settings-save-btn { width:100%; padding:10px; background:var(--text); color:var(--bg); border:none; border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; text-transform:uppercase; }
  .settings-divider { height:1px; background:var(--border); margin:18px 0 14px; }
  .complete-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
  .finish-block-btn { width:100%; padding:11px 14px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:border-color .2s, color .2s; }
  .finish-block-btn:hover { border-color:#ff475766; color:var(--chest); }
  .finish-block-btn.final-week { border-color:#27ae60; color:#27ae60; animation:pulse-finish .9s ease-in-out infinite; }
  @keyframes pulse-finish { 0%,100%{box-shadow:0 0 0 0 #27ae6033} 50%{box-shadow:0 0 0 5px #27ae6000} }

  /* ── Backup / restore ── */
  .backup-row { display:flex; flex-wrap:wrap; gap:8px; }
  .backup-btn { flex:1 1 calc(50% - 4px); min-width:0; padding:11px 10px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; text-transform:uppercase; transition:border-color .2s, color .2s; }
  .backup-btn:hover { border-color:var(--muted2); color:var(--text); }
  .backup-btn.danger:hover { border-color:#ff475766; color:var(--chest); }
  .backup-hint { font-size:10px; color:var(--muted2); margin-top:8px; line-height:1.5; }

  /* ── Block completion flow ── */
  .completion-trophy-box { display:flex; align-items:center; gap:14px; background:#0b1e0b; border:1px solid #27ae60; border-radius:8px; padding:14px; }
  .completion-trophy-icon { font-size:28px; flex-shrink:0; line-height:1; }
  .completion-trophy-title { font-size:14px; font-weight:800; color:#27ae60; }
  .completion-trophy-sub { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; }
  .confirm-new-block-btn { width:100%; padding:12px; background:linear-gradient(135deg,#27ae60,#1abc9c); color:white; border:none; border-radius:8px; font-size:13px; font-weight:800; cursor:pointer; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; box-shadow:0 6px 20px rgba(39,174,96,.35); transition:transform .15s; }
  .confirm-new-block-btn:hover { transform:translateY(-1px); }
  .confirm-new-block-btn:active { transform:translateY(0) scale(.98); }
  .cancel-completion-link { display:block; text-align:center; margin-top:10px; font-size:11px; color:var(--muted); cursor:pointer; background:none; border:none; width:100%; padding:4px; }
  .cancel-completion-link:hover { color:var(--text); }

  /* ── Week selector ── */
  .week-selector { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:10px; padding:12px 16px; margin-bottom:16px; border:1px solid var(--border); }
  .week-selector label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); flex-shrink:0; }
  .week-arrow { background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; width:32px; height:32px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .week-arrow:disabled { opacity:.3; cursor:default; }
  .week-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:16px; font-weight:800; }
  .week-progress { font-size:11px; color:var(--muted); flex-shrink:0; }
  .week-dots { display:flex; gap:5px; align-items:center; flex-shrink:0; }
  .week-dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .2s; }
  .week-dot.done { background:#27ae60; }

  /* ── Day grid ── */
  .day-grid { display:flex; flex-direction:column; gap:10px; }
  .day-card { background:var(--card); border-radius:12px; padding:16px; border-left:4px solid var(--border); cursor:pointer; display:flex; align-items:center; gap:10px; transition:background .15s, box-shadow .2s, transform .15s; box-shadow:var(--shadow-card); animation:card-rise .35s cubic-bezier(.16,1,.3,1) both; }
  .day-card:hover:not(.rest) { background:var(--card2); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.4); }
  .day-card:active:not(.rest) { transform:translateY(0) scale(.99); }
  @keyframes card-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .day-card.chest { border-color:var(--chest); } .day-card.pull { border-color:var(--pull); }
  .day-card.arms  { border-color:var(--arms);  } .day-card.legs { border-color:var(--legs); }
  .day-card.push  { border-color:var(--push);  } .day-card.back { border-color:var(--back); }
  .day-card.shoulders { border-color:var(--shoulders); } .day-card.core { border-color:var(--core); }
  .day-card.fullbody  { border-color:var(--fullbody); }
  .day-card.rest  { border-color:var(--rest); opacity:.45; cursor:default; }
  .day-card.dragging  { opacity:.3; }
  .drag-handle { color:var(--muted2); font-size:20px; line-height:1; cursor:grab; flex-shrink:0; touch-action:none; user-select:none; padding:12px 10px; margin:-12px -6px -12px -10px; border-radius:8px; }
  .drag-handle:active { cursor:grabbing; color:var(--text); background:var(--card2); }
  .day-card-info { flex:1; min-width:0; }
  .day-card-info .day-num    { font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
  .day-card-info .day-name   { font-size:15px; font-weight:800; margin-top:2px; }
  .day-card-info .day-meta   { font-size:11px; color:var(--muted); margin-top:2px; }
  .day-card-info .day-logged { font-size:11px; color:#27ae60; margin-top:2px; font-weight:600; }
  .start-btn { background:var(--text); color:var(--bg); border:none; border-radius:6px; padding:8px 14px; font-size:11px; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
  .start-btn.logged { background:none; color:var(--muted); border:1px solid var(--border); }
  .start-btn.logged:hover { color:var(--text); border-color:var(--muted); }
  /* View-mode indicator in workout header */
  .view-mode-banner { font-size:11px; font-weight:700; color:#2e86ff; background:#0a1820; border:1px solid #2e86ff44; border-radius:6px; padding:5px 10px; margin-top:8px; display:none; }
  .view-mode-banner.visible { display:block; }
  .drag-ghost { position:fixed; pointer-events:none; z-index:500; opacity:.95; border-radius:10px; box-shadow:0 16px 48px rgba(0,0,0,.8); transform:rotate(1.5deg) scale(1.03); }

  /* (draft-banner removed — resume state is now inline on the day card) */

  /* ── Workout view ── */
  .workout-header { margin-bottom:12px; }
  .workout-top-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .back-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 10px; font-size:11px; cursor:pointer; font-weight:700; text-transform:uppercase; flex-shrink:0; }
  .back-btn:hover { color:var(--text); border-color:var(--muted); }
  .workout-title { font-size:18px; font-weight:800; flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .workout-progress { font-size:11px; color:var(--muted); font-weight:600; flex-shrink:0; text-align:right; white-space:nowrap; }
  .workout-progress .done-count  { color:#27ae60; font-weight:800; font-size:13px; }
  .workout-progress .total-count { font-weight:700; }
  .workout-meta-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .workout-meta { font-size:11px; color:var(--muted); }
  .autosave-indicator { font-size:10px; color:var(--muted2); font-style:italic; }
  .exercise-block { background:var(--card); border-radius:12px; padding:14px; margin-bottom:12px; border:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s; box-shadow:var(--shadow-card); }
  .exercise-block.all-done { border-color:#27ae60; background:#0b1e0b; box-shadow:0 0 0 1px #27ae6033, 0 0 20px rgba(39,174,96,.15); }
  .exercise-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .exercise-drag-handle { color:var(--muted2); font-size:20px; cursor:grab; flex-shrink:0; touch-action:none; user-select:none; padding:10px 8px; margin:-10px -4px -10px -8px; line-height:1; border-radius:8px; }
  .exercise-drag-handle:active { cursor:grabbing; color:var(--text); background:var(--card2); }
  .exercise-block.ex-dragging  { opacity:.3; }
  .exercise-block.ex-drop-above { box-shadow:0 -3px 0 0 var(--text); }
  .exercise-block.ex-drop-below { box-shadow:0  3px 0 0 var(--text); }
  /* min-width:0 is LOAD-BEARING: a flex child defaults to min-width:auto, so this
     <select> refused to shrink below its longest option and pushed the How-to
     button + "×" out past the card's right edge into the gutter (overflow:visible).
     Without it the whole header spills outside the grey card. */
  .exercise-select { flex:1; min-width:0; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:8px 10px; font-size:16px; font-weight:700; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
  .exercise-select:focus { outline:none; border-color:var(--muted); }
  /* 40x40 real target (was ~28x20) — destructive, and the fat-finger cost here
     is deleting a whole exercise mid-workout. */
  .remove-exercise-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:20px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; line-height:1; }
  .remove-exercise-btn:hover { color:var(--chest); }
  /* Icon-only tutorial button. 40px tap target (icon is smaller, centered) so it
     meets touch guidance without widening the header. */
  .ex-tutorial-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; text-decoration:none; border-radius:8px; opacity:.92; }
  .ex-tutorial-btn:active { background:var(--card2); }
  .ex-tutorial-btn svg { display:block; }
  .prev-best { font-size:11px; color:var(--muted); font-style:italic; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .overload-hint { font-size:10px; color:#e67e22; font-weight:700; font-style:normal; white-space:nowrap; flex-shrink:0; }
  .sets-header { display:grid; grid-template-columns:24px 1fr 1fr 38px 32px 24px; gap:5px; margin-bottom:6px; }
  .sets-header span { font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; text-align:center; }
  .sets-header span:first-child { text-align:left; }
  /* Last column widened 24px -> 32px: the remove-set button is a DESTRUCTIVE
     target pressed with sweaty, shaky, post-set hands, and it sits next to the
     done toggle. Bigger + more separation = fewer deleted sets. */
  .set-row { display:grid; grid-template-columns:24px 1fr 1fr 38px 32px 32px; gap:6px; margin-bottom:6px; align-items:center; }
  .cardio-sets-header { grid-template-columns:24px 1fr 2fr 32px 24px; }
  .cardio-set-row { grid-template-columns:24px 1fr 2fr 32px 32px; }
  .cardio-effort { display:flex; align-items:center; gap:8px; min-width:0; }
  .cardio-effort-slider { flex:1; min-width:0; accent-color:var(--accent); }
  .cardio-effort-word { font-size:12px; font-weight:700; color:var(--accent); min-width:54px; text-align:right; font-variant-numeric:tabular-nums; }
  .set-num { font-size:12px; color:var(--muted); }
  /* ── THE 16px FLOOR (2026-07-30) ─────────────────────────────────────────────
     iOS Safari ZOOMS the page whenever a focused form control's font-size is
     below 16px. The viewport deliberately omits maximum-scale (blocking pinch is
     an accessibility failure), so the only way to stop the zoom is to clear the
     threshold. Every input/select/textarea in this app was 12–14px, which meant
     tapping a weight field zoomed and mis-scrolled the page — dozens of times per
     workout, on the app's single most-repeated interaction.
     RULE: no form control in this file may declare font-size below 16px.
     Enforced by "css: no form control sits under the iOS 16px zoom floor" in
     tests/run-tests.js. If a layout is too tight at 16px, shrink PADDING, not the
     font — the columns here are 1fr and have room to spare. */
  .set-input { background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 4px; font-size:16px; width:100%; text-align:center; }
  .set-input:focus { outline:none; border-color:var(--muted2); }
  .set-input.prefilled { color:#aaa; border-color:#333; }
  .set-rir { width:100%; height:32px; border-radius:6px; border:1px solid var(--border); background:var(--card2); cursor:pointer; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; color:var(--muted2); padding:0; }
  .set-rir.set { border-color:#a855f766; color:#a855f7; background:#1a1024; }
  /* 32x40, not 32x32: this is the most-pressed control in the app, hit with chalky,
     fatigued hands mid-set. Width is genuinely constrained (six-column row), height
     is not — so it takes the same 40px floor .set-remove already has. */
  .set-done { width:32px; height:40px; border-radius:6px; border:1px solid var(--border); background:var(--card2); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
  .set-done.checked { background:#0d2b0d; border-color:#27ae60; color:#27ae60; }
  .set-remove { width:32px; height:40px; border-radius:4px; border:none; background:none; color:var(--muted2); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
  .set-remove:hover { color:var(--chest); }
  .set-controls { display:flex; justify-content:flex-end; margin-top:8px; }
  .add-set-btn { background:none; border:1px dashed var(--border); color:var(--muted); border-radius:6px; padding:5px 12px; font-size:11px; cursor:pointer; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
  .add-set-btn:hover { border-color:var(--muted2); color:var(--text); }
  .add-exercise-btn { width:100%; padding:12px; background:none; border:1px dashed var(--border); color:var(--muted); border-radius:10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; margin-bottom:12px; }
  .add-exercise-btn:hover { border-color:var(--muted2); color:var(--text); }
  .save-btn { width:100%; padding:15px; background:var(--glow-fire); color:white; border:none; border-radius:10px; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; margin-top:6px; box-shadow:0 6px 22px rgba(255,71,87,.35); transition:transform .15s, box-shadow .15s; }
  .save-btn:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(255,71,87,.45); }
  .save-btn:active { transform:translateY(0) scale(.98); }
  .save-btn:disabled { opacity:.4; cursor:default; box-shadow:none; transform:none; }
  .save-btn.update { background:var(--glow-cool); box-shadow:0 6px 22px rgba(46,134,255,.35); }

  /* ── Modal ── */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:100; align-items:center; justify-content:center; padding:20px; }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--card); border-radius:12px; padding:24px; width:100%; max-width:360px; border:1px solid var(--border); }
  .modal h3 { font-size:16px; font-weight:800; margin-bottom:16px; }
  .modal input { width:100%; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:10px 12px; font-size:16px; margin-bottom:12px; }
  .modal input:focus { outline:none; border-color:var(--muted); }
  .modal-btns { display:flex; gap:8px; }
  .modal-confirm { flex:1; padding:10px; background:var(--text); color:var(--bg); border:none; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; }
  .modal-cancel  { flex:1; padding:10px; background:none; color:var(--muted); border:1px solid var(--border); border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; }

  /* ── History ── */
  .history-filter { margin-bottom:16px; }
  .history-filter select { width:100%; background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:9px 12px; font-size:16px; }
  .history-list { display:flex; flex-direction:column; gap:12px; }
  .history-card { background:var(--card); border-radius:12px; padding:16px; border-left:4px solid var(--border); box-shadow:var(--shadow-card); }
  .history-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
  .history-card-title { font-size:15px; font-weight:800; }
  .history-card-meta  { font-size:11px; color:var(--muted); margin-top:2px; }
  .history-exercise { margin-bottom:10px; }
  .history-ex-name { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:5px; }
  .history-sets { display:flex; flex-wrap:wrap; gap:5px; }
  .history-set-pill { background:var(--card2); border-radius:4px; padding:3px 8px; font-size:11px; color:var(--text); cursor:pointer; border:1px solid transparent; transition:border-color .15s; }
  .history-set-pill:hover { border-color:var(--muted2); }
  .history-inline-wrap  { display:flex; align-items:center; gap:4px; background:var(--card2); border-radius:4px; padding:2px 4px; border:1px solid var(--muted); }
  .history-inline-input { background:var(--bg); border:1px solid var(--muted); color:var(--text); border-radius:4px; padding:3px 5px; font-size:16px; width:62px; text-align:center; }
  .history-inline-input:focus { outline:none; border-color:var(--text); }
  .history-inline-sep  { font-size:11px; color:var(--muted); }
  .history-inline-save { background:var(--chest); border:none; color:white; border-radius:4px; padding:3px 8px; font-size:11px; font-weight:700; cursor:pointer; }
  .history-inline-x    { background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:0 2px; line-height:1; }
  .history-add-set { background:none; border:1px dashed var(--border); color:var(--muted); border-radius:4px; padding:3px 8px; font-size:11px; cursor:pointer; margin-top:4px; display:block; }
  .history-add-set:hover { border-color:var(--muted2); color:var(--text); }
  .history-hint { font-size:10px; color:var(--muted2); font-style:italic; margin-top:4px; }
  .empty-state { text-align:center; color:var(--muted); padding:60px 0; font-size:13px; line-height:1.8; }
  .loading { text-align:center; color:var(--muted); padding:40px 0; font-size:13px; }
  /* New-build chip. Top-center: the bottom edge is already taken by .rest-badge
     (right) and .sync-badge (left), and this must never sit on top of a running
     rest timer. z-index below .modal-overlay so it can't cover a dialog. */
  .update-badge { display:none; position:fixed; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:90; align-items:center; gap:10px; background:#0d1b2b; border:1px solid var(--accent); color:var(--accent); border-radius:24px; padding:8px 10px 8px 16px; font-size:13px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:calc(100vw - 32px); }
  .update-badge-btn { background:var(--accent); color:#06121f; border:none; border-radius:16px; padding:6px 14px; font-size:13px; font-weight:800; cursor:pointer; min-height:32px; }
  .update-badge-x { background:none; border:none; color:var(--text-dim); font-size:20px; line-height:1; cursor:pointer; padding:0 6px; min-width:32px; min-height:32px; }

  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#27ae60; color:white; padding:10px 24px; border-radius:8px; font-size:13px; font-weight:700; opacity:0; transition:opacity .3s; pointer-events:none; z-index:999; white-space:nowrap; }
  .toast.show { opacity:1; }
  .toast.error { background:var(--chest); }

  /* ── Confetti ── */
  .confetti-piece { position:fixed; top:-12px; z-index:1000; pointer-events:none; opacity:.95; animation-name:confetti-fall; animation-timing-function:cubic-bezier(.25,.46,.45,.94); animation-fill-mode:forwards; }
  @keyframes confetti-fall { to { transform: translateY(112vh) rotate(600deg); opacity:0; } }

  /* ── Day slot layout ── */
  .week-slot { margin-bottom:14px; }
  .week-slot-header { display:flex; align-items:center; gap:8px; padding:4px 0 6px; }
  .week-slot-date { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); flex:1; }
  .week-slot-date.today { color:var(--text); }
  .week-slot-add { background:none; border:1px dashed var(--border); color:var(--muted); border-radius:5px; padding:3px 10px; font-size:11px; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s; }
  .week-slot-add:hover { border-color:var(--muted); color:var(--text); }
  .week-slot-cards { display:flex; flex-direction:column; gap:6px; }
  .week-slot.drop-target { outline:2px dashed var(--muted); outline-offset:3px; border-radius:10px; }
  .delete-schedule-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:20px; padding:0 4px; flex-shrink:0; line-height:1; transition:color .15s; }
  .delete-schedule-btn:hover { color:var(--chest); }
  .delete-schedule-btn.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; padding:0 6px; }
  /* Round 24: the five newly-armed buttons — one way to delete things */
  .nut-food-del-btn.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }
  .nut-bw-del.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }
  .bw-list-del.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }
  .remove-exercise-btn.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }
  .set-remove.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }
  .discard-draft-btn.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }
  .portion-delete-btn.confirm-pending { color:var(--chest); }
  .ex-lib-row-delete.confirm-pending { color:var(--chest); font-size:10px; font-weight:700; }

  /* ── History block delete button ── */
  .block-delete-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; transition:color .15s; }
  .block-delete-btn:hover { color:var(--chest); }
  .block-delete-btn.confirm-pending { color:var(--chest); }

  /* ── Archived blocks list (in settings panel) ── */
  .archived-block-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
  .archived-block-item:last-child { border-bottom:none; }
  .archived-block-name { font-size:13px; font-weight:700; }
  .archived-block-meta { font-size:11px; color:var(--muted); margin-top:2px; }
  .archived-block-delete { background:none; border:1px solid var(--border); color:var(--muted); border-radius:5px; padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0; transition:color .15s, border-color .15s; }
  .archived-block-delete:hover { color:var(--chest); border-color:var(--chest); }
  .archived-block-delete.confirm-pending { color:var(--chest); border-color:var(--chest); }

  /* ── Rest timer ── */
  .rest-timer { display:none; align-items:center; gap:12px; background:#111f11; border:1px solid #27ae60; border-radius:8px; padding:8px 12px; margin-bottom:8px; }
  .rest-timer.active { display:flex; }
  .rest-timer-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#27ae60; flex-shrink:0; }
  .rest-timer-count { font-size:20px; font-weight:800; color:#27ae60; flex:1; text-align:center; font-variant-numeric:tabular-nums; background:none; border:none; font-family:inherit; cursor:pointer; padding:2px; border-radius:6px; }
  .rest-timer-count:hover { background:#0d2b0d; }
  .rest-timer-skip { background:none; border:1px solid #27ae6066; color:#27ae60; border-radius:5px; padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0; }
  .rest-timer-skip:hover { border-color:#27ae60; }
  .rest-timer-adjust { background:none; border:1px solid #27ae6066; color:#27ae60; border-radius:5px; padding:4px 8px; font-size:11px; font-weight:800; cursor:pointer; flex-shrink:0; }
  .rest-timer-adjust:hover { border-color:#27ae60; }

  .rest-settings-bar { margin-bottom:6px; }
  .rest-settings-summary-btn { background:none; border:none; color:var(--muted2); font-size:11px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:2px 0; }
  .rest-settings-summary-btn:hover { color:var(--muted); }
  .rest-summary-caret { font-size:9px; transition:transform .15s; }
  .rest-settings-summary-btn[aria-expanded="true"] .rest-summary-caret { transform:rotate(180deg); }
  .rest-controls-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; flex-wrap:wrap; padding:6px 8px; background:var(--card); border-radius:8px; border:1px solid var(--border); }
  .rest-duration-picker { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .rest-duration-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-right:2px; }
  .rest-duration-pill { background:none; border:1px solid var(--border); color:var(--muted); border-radius:16px; padding:3px 9px; font-size:11px; font-weight:700; cursor:pointer; transition:.15s; }
  .rest-duration-pill:hover { border-color:#27ae6066; color:#27ae60; }
  .rest-duration-pill.active { background:#27ae60; border-color:#27ae60; color:#08090b; }
  .rest-autostart-toggle { background:none; border:1px solid var(--border); color:var(--muted); border-radius:16px; padding:3px 10px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; transition:.15s; }
  .rest-autostart-toggle.on { border-color:#27ae6066; color:#27ae60; }
  .rest-autostart-toggle:hover { border-color:var(--muted2); }

  /* ── Rest timer: fullscreen overlay ──
     height uses 100dvh (with 100vh as the fallback for browsers that don't support it)
     so the overlay sizes itself to the actually-visible viewport on mobile, not the
     larger layout viewport that includes space the address bar can cover — that
     mismatch was what made the timer look "scrolled down" instead of centered. The
     JS lock body scroll for the same reason (see openRestOverlay/hideRestOverlay):
     with nothing to scroll while the overlay is open, there's nothing to throw off
     the centering. overflow-y:auto is a safety net, not the fix — it only kicks in
     if the content genuinely can't fit a very small screen. */
  .rest-overlay { display:none; position:fixed; inset:0; background:#050a05; z-index:400; align-items:center; justify-content:center; padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); overflow:hidden; overscroll-behavior:contain; touch-action:none; }
  .rest-overlay.open { display:flex; }
  .rest-overlay-inner { text-align:center; width:100%; margin:auto; }
  .rest-overlay-label { font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:#27ae60; margin-bottom:8px; }
  .rest-overlay-count { font-size:22vw; line-height:1; font-weight:900; color:#27ae60; font-variant-numeric:tabular-nums; text-shadow:0 0 50px rgba(39,174,96,.4); }
  .rest-overlay-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
  .rest-overlay-adjust { background:none; border:2px solid #27ae6066; color:#27ae60; border-radius:12px; padding:14px 22px; font-size:19px; font-weight:800; cursor:pointer; }
  .rest-overlay-adjust:hover { border-color:#27ae60; }
  .rest-overlay-skip { background:#27ae60; border:none; color:#08090b; border-radius:12px; padding:14px 28px; font-size:15px; font-weight:800; cursor:pointer; text-transform:uppercase; letter-spacing:.05em; }
  .rest-overlay-hint { margin-top:20px; font-size:11px; color:#3d4d3d; text-transform:uppercase; letter-spacing:.08em; }
  @media (orientation: landscape) {
    .rest-overlay-count { font-size:26vh; }
    .rest-overlay-controls { margin-top:18px; }
    .rest-overlay-hint { margin-top:12px; }
  }

  /* ── Rest timer: persistent badge (visible on any tab while resting) ── */
  .rest-badge { display:none; position:fixed; bottom:20px; right:16px; z-index:90; align-items:center; gap:8px; background:#0d2b0d; border:1px solid #27ae60; color:#27ae60; border-radius:24px; padding:10px 16px; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.5); }
  .rest-badge.visible { display:flex; }
  .rest-badge-dot { width:7px; height:7px; border-radius:50%; background:#27ae60; animation:pulse-badge 1.4s ease-in-out infinite; flex-shrink:0; }

  /* ── Offline write queue: persistent badge (visible whenever a save is waiting) ── */
  .sync-badge { display:none; position:fixed; bottom:20px; left:16px; z-index:90; align-items:center; gap:8px; background:#1a1205; border:1px solid #e67e22; color:#e67e22; border-radius:24px; padding:10px 16px; font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:calc(100vw - 32px); }
  .sync-badge.visible { display:flex; }
  .sync-badge-dot { width:7px; height:7px; border-radius:50%; background:#e67e22; animation:pulse-badge 1.4s ease-in-out infinite; flex-shrink:0; }

  /* ── PR badge ── */
  .pr-badge { display:inline-block; background:var(--glow-gold); color:white; border-radius:4px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 5px; margin-left:5px; vertical-align:middle; animation:pr-pop .4s cubic-bezier(.17,.67,.47,1.4); box-shadow:0 0 10px rgba(255,183,3,.5); }
  @keyframes pr-pop { 0%{transform:scale(0)} 100%{transform:scale(1)} }


  /* ── Workout summary overlay ── */
  .summary-overlay { display:none; position:fixed; inset:0; background:var(--bg); z-index:200; overflow-y:auto; padding:24px 16px; max-width:620px; left:50%; transform:translateX(-50%); }
  .summary-overlay.open { display:block; }
  .summary-hero { text-align:center; padding:28px 0 18px; }
  .summary-hero-icon { font-size:52px; line-height:1; margin-bottom:10px; }
  .summary-hero-title { font-size:24px; font-weight:800; }
  .summary-hero-sub { font-size:13px; color:var(--muted); margin-top:6px; }
  .summary-stat-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:18px 0; }
  .summary-stat { background:var(--card); border-radius:8px; padding:12px; text-align:center; border:1px solid var(--border); }
  .summary-stat-val { font-size:20px; font-weight:800; }
  .summary-stat-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
  .summary-pr-list { margin-bottom:18px; }
  .summary-pr-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--card); border-radius:6px; margin-bottom:6px; font-size:13px; font-weight:700; }
  /* Deliberately quieter than .summary-pr-item — a first log is a baseline worth
     acknowledging, not a record. Muted text, no medal, no confetti. */
  .summary-first-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--card); border-radius:6px; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--muted); }
  .summary-section-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
  .summary-done-btn { width:100%; padding:14px; background:var(--text); color:var(--bg); border:none; border-radius:8px; font-size:14px; font-weight:800; cursor:pointer; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }

  /* ── Onboarding overlay — DELETED Round 73. The replacement first-run flow
     (docs/ONBOARDING-ROUND73-2026-09-08.md) runs only after a session exists
     and brings its own styles. */

  /* ── Notes textarea ── */
  .notes-field { margin-bottom:12px; }
  .notes-field label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:block; margin-bottom:6px; }
  .notes-field textarea { width:100%; background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:16px; line-height:1.5; min-height:58px; resize:vertical; font-family:inherit; }
  .notes-field textarea:focus { outline:none; border-color:var(--muted); }
  .notes-field textarea::placeholder { color:var(--muted2); }

  /* ── History view toggle ── */
  .history-toggle { display:flex; gap:6px; margin-bottom:14px; }
  .history-toggle-btn { flex:1; padding:7px; border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }
  .history-toggle-btn.active { background:var(--text); color:var(--bg); border-color:var(--text); }

  /* ── In-progress day card ── */
  .day-card.in-progress { border-color:#e67e22; background:#1a1205; }
  .day-card.in-progress:hover { background:#201506; }
  .in-progress-badge { display:inline-block; background:#e67e22; color:white; border-radius:3px; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:1px 5px; vertical-align:middle; margin-left:5px; }
  .in-progress-meta { color:#e67e22; font-weight:600; }
  .resume-btn { background:#e67e22; color:white; border:none; border-radius:6px; padding:8px 14px; font-size:11px; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
  .resume-btn:hover { opacity:.9; }
  .rename-btn { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.8); font-size:11px; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:5px; flex-shrink:0; text-transform:uppercase; letter-spacing:.04em; }
  .rename-btn:hover { background:rgba(255,255,255,.25); color:#fff; }
  .rename-input { font-size:16px; font-weight:600; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); border-radius:5px; color:#fff; padding:3px 7px; width:100%; max-width:180px; outline:none; }
  .discard-draft-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:20px; padding:0 4px; flex-shrink:0; line-height:1; transition:color .15s; }
  .discard-draft-btn:hover { color:var(--chest); }

  /* ── Cross-week draft hint ── */
  .draft-week-hint { display:none; align-items:center; justify-content:space-between; gap:10px; background:#1a1205; border:1px solid #e67e2244; border-radius:8px; padding:9px 14px; margin-bottom:12px; }
  .draft-week-hint.visible { display:flex; }
  .draft-week-hint-text { font-size:12px; color:var(--muted); line-height:1.5; }
  .draft-week-hint-go { background:none; border:1px solid #e67e2266; color:#e67e22; border-radius:5px; padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap; }
  .draft-week-hint-go:hover { border-color:#e67e22; }

  /* ── Deload nudge ── */
  .deload-nudge { background:#171405; border:1px solid #e67e2244; border-radius:8px; padding:12px 14px; margin-bottom:14px; display:flex; align-items:flex-start; gap:10px; }
  .deload-nudge-icon { font-size:20px; flex-shrink:0; line-height:1.2; }
  .deload-nudge-text { flex:1; min-width:0; font-size:12px; color:var(--muted); line-height:1.6; }
  .deload-nudge-text strong { color:var(--text); font-size:13px; display:block; margin-bottom:2px; }
  .deload-nudge-dismiss { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:18px; flex-shrink:0; padding:0 2px; line-height:1; }
  .deload-nudge-dismiss:hover { color:var(--muted); }

  /* ── History exercise trend card ── */
  .ex-history-trend { font-size:11px; color:var(--muted); margin-top:4px; font-style:italic; }
  .spark-wrap { margin:10px 0 4px; }
  .spark-svg { display:block; }

  /* Progress view (History → third toggle) */
  .prog-summary { font-size:12px; color:var(--muted); font-weight:700; margin-bottom:10px; }
  .prog-svg { display:block; color:var(--text); margin-top:8px; }
  .prog-axis { font-size:9px; fill:var(--muted); font-weight:600; }
  .prog-pct { font-size:13px; font-weight:800; flex-shrink:0; }
  .prog-pct.up { color:#2ecc71; }
  .prog-pct.down { color:#ff4757; }
  .prog-pct.flat { color:var(--muted); }
  .prog-flag { display:inline-block; margin-left:8px; font-size:10px; font-weight:700; color:#e67e22; border:1px solid #e67e2255; border-radius:4px; padding:1px 6px; vertical-align:1px; }
  .prog-legend { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:8px; }
  .prog-chip { font-size:10px; color:var(--muted); font-weight:700; display:inline-flex; align-items:center; gap:4px; text-transform:capitalize; }
  .prog-swatch { width:8px; height:8px; border-radius:2px; display:inline-block; }
  /* Coach "wins" (positive floor) — green edge so a glance separates earned
     wins from radar flags without reading a word. */
  .coach-win { border-left:3px solid #27ae60; padding-left:10px; }
  .error-log-dump { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:10px; line-height:1.6; color:var(--muted); white-space:pre-wrap; word-break:break-word; max-height:260px; overflow-y:auto; }

  /* ── Finish Week button ── */
  .finish-week-btn { width:100%; padding:11px 14px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; margin-top:10px; transition:border-color .2s, color .2s; }
  .finish-week-btn:hover { border-color:var(--muted); color:var(--text); }
  .finish-week-btn.final-week { border-color:#27ae60; color:#27ae60; animation:pulse-finish .9s ease-in-out infinite; }

  /* ── History hierarchy ── */
  .hist-block-section { margin-bottom:6px; }
  .hist-block-hdr { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--card); border-radius:8px; border:1px solid var(--border); cursor:pointer; user-select:none; }
  .hist-block-hdr.current { border-color:#27ae6044; background:#080f08; }
  .hist-block-caret { font-size:16px; color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .hist-block-caret.open { transform:rotate(90deg); }
  .hist-block-info { flex:1; min-width:0; }
  .hist-block-name { font-size:13px; font-weight:800; }
  .hist-block-progress { height:3px; background:var(--border); border-radius:2px; margin-top:5px; overflow:hidden; }
  .hist-block-fill { height:100%; background:#27ae60; border-radius:2px; }
  .hist-block-stats { font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; }
  .hist-block-body { padding:6px 0 4px; display:flex; flex-direction:column; gap:3px; }
  .hist-week-hdr { display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--card2); border-radius:6px; cursor:pointer; user-select:none; margin-left:8px; }
  .hist-week-caret { font-size:14px; color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .hist-week-caret.open { transform:rotate(90deg); }
  .hist-week-label { font-size:12px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hist-week-stats { font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; }
  .hist-week-stats.complete { color:#27ae60; }
  .hist-week-body { padding:5px 0 3px 12px; display:flex; flex-direction:column; gap:4px; }
  .hist-day-row { background:var(--card); border-radius:8px; border-left:3px solid var(--border); overflow:hidden; }
  .hist-day-row.chest { border-left-color:var(--chest); } .hist-day-row.pull { border-left-color:var(--pull); }
  .hist-day-row.arms { border-left-color:var(--arms); } .hist-day-row.legs { border-left-color:var(--legs); }
  .hist-day-row.push { border-left-color:var(--push); } .hist-day-row.back { border-left-color:var(--back); }
  .hist-day-row.shoulders { border-left-color:var(--shoulders); } .hist-day-row.core { border-left-color:var(--core); }
  .hist-day-row.fullbody { border-left-color:var(--fullbody); }
  .hist-day-row-hdr { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; }
  .hist-day-name { font-size:12px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hist-day-meta { font-size:10px; color:var(--muted); white-space:nowrap; }
  .hist-day-sets-badge { font-size:11px; color:var(--muted); white-space:nowrap; }
  .hist-day-caret { font-size:14px; color:var(--muted2); transition:transform .2s; }
  .hist-day-caret.open { transform:rotate(90deg); }
  .hist-day-detail { padding:4px 12px 10px; }
  .hist-day-delete { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:15px; padding:0 0 0 6px; transition:color .15s; flex-shrink:0; }
  .hist-day-delete:hover { color:var(--chest); }
  .hist-day-delete.confirm-pending { color:var(--chest); font-size:11px; font-weight:700; }

  /* ── Exercise Library ── */
  /* flex-wrap + min-width:0: `flex:1` is `flex:1 1 0%` but min-width defaults to
     auto, so the search input refused to shrink below its placeholder width and
     pushed the Merge button off the right edge. Same defect the nav bar had. */
  .ex-lib-toolbar { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
  .ex-lib-toolbar input { flex:1; min-width:0; background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:9px 12px; font-size:16px; }
  .ex-lib-toolbar input:focus { outline:none; border-color:var(--muted); }
  .ex-lib-add-btn { background:none; border:1px dashed var(--border); color:var(--muted); border-radius:6px; padding:0 16px; font-size:11px; font-weight:700; cursor:pointer; text-transform:uppercase; white-space:nowrap; }
  .ex-lib-add-btn:hover { border-color:var(--muted2); color:var(--text); }
  .ex-lib-add-form { display:flex; gap:6px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:14px; }
  .ex-lib-add-form input, .ex-lib-add-form select { background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:8px 6px; font-size:16px; }
  .ex-lib-add-form input { flex:1; min-width:0; }
  .ex-lib-count { font-size:11px; color:var(--muted2); margin-bottom:10px; }
  .ex-lib-group { margin-bottom:16px; }
  .ex-lib-group-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted2); padding:0 2px 8px; }
  .ex-lib-row { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:8px; padding:9px 12px; margin-bottom:6px; border-left:3px solid var(--border); }
  .ex-lib-row-name { flex:1; font-size:13px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ex-lib-row-tag { background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:5px; padding:5px 8px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; }
  .ex-lib-row-delete { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:16px; padding:0 2px; flex-shrink:0; transition:color .15s; }
  .ex-lib-row-delete:hover { color:var(--chest); }
  .ex-lib-row-delete.confirm-pending { color:var(--chest); font-size:10px; font-weight:700; }
  .ex-lib-row-rename { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:14px; padding:0 2px; flex-shrink:0; transition:color .15s; }
  .ex-lib-row-rename:hover { color:var(--text); }
  .ex-lib-import-btn { width:100%; padding:11px; background:none; border:1px dashed var(--border); color:var(--muted); border-radius:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; margin-top:6px; }
  .ex-lib-import-btn:hover { border-color:var(--muted2); color:var(--text); }
  .ex-lib-tools-bar { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .ex-lib-tool-btn { background:var(--card2); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 10px; font-size:11px; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; transition:all .15s; }
  .ex-lib-tool-btn:hover { border-color:var(--muted2); color:var(--text); }
  .ex-lib-select-check { width:16px; height:16px; margin:0 2px 0 0; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
  .ex-lib-bulk-bar { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--accent); border-radius:8px; padding:8px 12px; margin-bottom:12px; position:sticky; top:54px; z-index:10; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
  .ex-admin-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:14px; }
  .ex-admin-head { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text); margin-bottom:8px; }
  .ex-dup-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
  .ex-dup-row:last-child { border-bottom:none; }
  .ex-dup-names { flex:1; min-width:0; font-size:13px; display:flex; flex-direction:column; gap:4px; }
  /* Round 41: two stacked candidates, each with its own usage line — the
     "which name do I keep?" picker, not a direction choice. */
  .ex-dup-candidate { line-height:1.35; }
  .ex-dup-usage { font-size:11px; color:var(--muted2); font-weight:400; }
  .ex-dup-actions { display:flex; gap:6px; flex-shrink:0; align-items:center; }
  .ex-dup-btn { background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:5px; padding:4px 8px; font-size:10px; font-weight:700; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
  .ex-dup-btn:hover { border-color:var(--muted); }

  /* ── Routine editor ── */
  .routine-picker-row { display:flex; gap:8px; margin-bottom:14px; align-items:center; }
  .routine-picker-row select { flex:1; min-width:0; background:var(--card); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:9px 12px; font-size:16px; font-weight:700; }
  .routine-new-btn { background:none; border:1px dashed var(--border); color:var(--muted); border-radius:6px; padding:0 14px; font-size:11px; font-weight:700; cursor:pointer; text-transform:uppercase; white-space:nowrap; }
  .routine-new-btn:hover { border-color:var(--muted2); color:var(--text); }
  .routine-meta-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .routine-active-badge { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:#27ae60; color:white; border-radius:4px; padding:2px 6px; }
  .routine-active-badge.inactive { background:var(--card2); color:var(--muted); border:1px solid var(--border); }
  .routine-set-active-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:5px; padding:5px 10px; font-size:11px; font-weight:700; cursor:pointer; }
  .routine-set-active-btn:hover { border-color:var(--muted2); color:var(--text); }
  .routine-delete-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:11px; font-weight:700; padding:2px 6px; }
  .routine-delete-btn:hover { color:var(--chest); }
  .routine-delete-btn.confirm-pending { color:var(--chest); }
  .rday-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
  .rday-card { background:var(--card); border-radius:10px; border-left:4px solid var(--border); overflow:hidden; }
  .rday-card.chest { border-left-color:var(--chest); } .rday-card.pull { border-left-color:var(--pull); }
  .rday-card.arms  { border-left-color:var(--arms);  } .rday-card.legs { border-left-color:var(--legs); }
  .rday-card.push  { border-left-color:var(--push);  } .rday-card.back { border-left-color:var(--back); }
  .rday-card.shoulders { border-left-color:var(--shoulders); } .rday-card.core { border-left-color:var(--core); }
  .rday-card.fullbody  { border-left-color:var(--fullbody); }
  .rday-hdr { display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; }
  .rday-drag-handle { color:var(--muted2); font-size:20px; cursor:grab; flex-shrink:0; touch-action:none; user-select:none; padding:10px 8px; margin:-10px -4px -10px -10px; border-radius:8px; }
  .rday-drag-handle:active { cursor:grabbing; color:var(--text); background:var(--card2); }
  .rday-card.rday-dragging { opacity:.3; }
  .rday-card.rday-drop-above { box-shadow:0 -3px 0 0 var(--text); }
  .rday-card.rday-drop-below { box-shadow:0  3px 0 0 var(--text); }
  .rday-name-input { flex:1; min-width:0; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 8px; font-size:16px; font-weight:700; }
  .rday-type-select { background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 4px; font-size:16px; font-weight:600; flex-shrink:0; }
  .rday-caret { font-size:16px; color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .rday-caret.open { transform:rotate(90deg); }
  .rday-delete { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:18px; padding:0 2px; flex-shrink:0; }
  .rday-delete:hover { color:var(--chest); }
  .rday-body { padding:0 14px 14px; display:none; }
  .rday-body.open { display:block; }
  .rday-ex-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .rday-ex-select { flex:1; min-width:0; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 6px; font-size:16px; }
  .rday-ex-sets { width:44px; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 4px; font-size:12px; text-align:center; flex-shrink:0; }
  .rday-ex-col-hint { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
  .rday-ex-col-hint span { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); text-align:center; }
  .rday-ex-col-hint span:first-child { flex:1; }
  .rday-ex-col-hint span:nth-child(2) { width:44px; flex-shrink:0; }
  .rday-ex-col-hint span:nth-child(3) { width:44px; flex-shrink:0; }
  .rday-ex-col-hint span:last-child { width:21px; flex-shrink:0; }
  .rday-ex-remove { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:17px; padding:0 2px; flex-shrink:0; }
  .rday-ex-remove:hover { color:var(--chest); }
  /* Exercise reorder within a day — same affordance as the three drags already in
     the app. touch-action:none is what stops the browser scrolling instead of
     dragging on a touch device. */
  .rday-ex-drag-handle { color:var(--muted2); cursor:grab; font-size:13px; padding:0 2px; flex-shrink:0; touch-action:none; user-select:none; }
  .rday-ex-drag-handle:active { cursor:grabbing; }
  .rday-ex-row.rday-ex-dragging { opacity:.35; }
  .rday-ex-row.rday-ex-drop-above { box-shadow:inset 0 2px 0 var(--accent); }
  .rday-ex-row.rday-ex-drop-below { box-shadow:inset 0 -2px 0 var(--accent); }
  .rday-add-ex-btn { width:100%; padding:8px; background:none; border:1px dashed var(--border); color:var(--muted); border-radius:6px; font-size:11px; cursor:pointer; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
  .rday-add-ex-btn:hover { border-color:var(--muted2); color:var(--text); }
  .rday-add-day-btn { width:100%; padding:12px; background:none; border:1px dashed var(--border); color:var(--muted); border-radius:10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }
  .rday-add-day-btn:hover { border-color:var(--muted2); color:var(--text); }
  .routine-editor-hint { font-size:11px; color:var(--muted2); line-height:1.6; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }

  /* ── AI (BYO key): settings section + proposal modal ── */
  .ai-hint { font-size:10px; color:var(--muted2); margin-top:8px; line-height:1.5; }
  /* Coach chat empty state. Deliberately NOT styled as a chat bubble — it is the
     app talking about the Coach, not the Coach talking. A bubble here is what made
     the old hardcoded greeting read as a real message the model had sent. */
  /* Progressive-disclosure toggle on the profile form. Reads as a link, not a
     button, so it never competes with the real Save action beneath it. */
  /* Round 54: .profile-more-btn removed with the Profile disclosure — nothing collapses now. */
  /* One-time swipe coach-mark. Dashed + muted so it reads as a tip rather than a
     warning, and it removes itself for good on dismiss (wt_swipe_hint_seen). */
  .swipe-hint { display:flex; align-items:center; gap:8px; border:1px dashed var(--border); color:var(--muted); border-radius:8px; padding:8px 10px; margin-bottom:10px; font-size:12px; line-height:1.4; }
  .swipe-hint span { flex:1; }
  .swipe-hint-x { background:none; border:none; color:var(--muted2); font-size:18px; line-height:1; cursor:pointer; padding:4px 6px; }
  /* Template browser. Cards, not a table — the whole point is that picking one is
     a single tap with no reading required. */
  .tpl-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .tpl-filter { flex:1; min-width:100px; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 6px; font-size:16px; }
  .tpl-card { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
  .tpl-card:hover { border-color:var(--muted2); }
  .tpl-card-body { flex:1; min-width:0; }
  .tpl-days { flex:none; font-size:15px; font-weight:800; color:var(--muted); }
  /* Why this ranked where it did. A ranked list with invisible ordering reads as
     arbitrary, and arbitrary is untrustworthy. */
  .tpl-why { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
  .tpl-why span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--legs); border:1px solid var(--border); border-radius:10px; padding:2px 7px; }
  .coach-chat-empty { align-self:stretch; color:var(--muted); font-size:13px; line-height:1.5; text-align:center; padding:8px 4px; }
  /* Coach notes. Left border carries the kind, so wins read as wins at a glance
     without an all-problems dashboard (docs/COACH-UX.md positive floor). */
  .coach-note { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--muted2); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
  .coach-note-body { flex:1; min-width:0; }
  .coach-note-win { border-left-color:var(--legs); }
  .coach-note-flag { border-left-color:#e67e22; }
  .coach-note-cycle { border-left-color:var(--accent); }
  /* Questions read as the Coach's voice, not as an alert — it wants an answer,
     it is not reporting a fault. */
  .coach-note-question { border-left-color:var(--arms); }
  .ai-add-form { display:flex; flex-direction:column; gap:8px; }
  .ai-input { width:100%; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:10px 12px; font-size:16px; }
  .ai-input:focus { outline:none; border-color:var(--muted); }
  .ai-key-row { display:flex; align-items:center; gap:8px; }
  .ai-key-row .backup-btn { flex:none; padding:9px 14px; }
  .ai-key-summary { flex:1; min-width:0; }
  .ai-key-provider { display:block; font-size:13px; font-weight:700; color:var(--text); }
  .ai-key-meta { display:block; font-size:10px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .modal.ai-proposal { max-width:420px; max-height:80vh; display:flex; flex-direction:column; }
  .ai-proposal-summary { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
  .ai-proposal-items { overflow-y:auto; margin-bottom:16px; display:flex; flex-direction:column; gap:8px; }
  .ai-proposal-item { display:flex; align-items:flex-start; gap:10px; background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; }
  .ai-proposal-item input[type="checkbox"] { width:auto; margin:3px 0 0; accent-color:#27ae60; flex-shrink:0; }
  .ai-proposal-item-body { flex:1; min-width:0; }
  .ai-proposal-item-label { font-size:12px; font-weight:700; color:var(--text); line-height:1.4; }
  .ai-proposal-item-detail { font-size:11px; color:var(--muted); line-height:1.5; margin-top:3px; }

  /* ── AI feature buttons + quick log ── */
  .ai-checkin-btn { width:100%; padding:11px 14px; background:none; border:1px solid #a855f766; color:#a855f7; border-radius:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; margin-top:8px; transition:border-color .2s; }
  .ai-checkin-btn:hover { border-color:#a855f7; }
  .ai-checkin-btn:disabled { opacity:.6; cursor:default; }
  .ai-quicklog { display:flex; gap:8px; margin-bottom:12px; }
  .ai-quicklog input { flex:1; background:var(--card2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:16px; min-width:0; }
  .ai-quicklog input:focus { outline:none; border-color:#a855f7; }
  .ai-quicklog button { flex:none; padding:10px 16px; background:#a855f7; color:white; border:none; border-radius:8px; font-size:12px; font-weight:800; cursor:pointer; text-transform:uppercase; }
  .ai-quicklog button:disabled { opacity:.6; cursor:default; }
  .routine-new-btn.ai { border-color:#a855f766; color:#a855f7; }
  .routine-new-btn.ai:hover { border-color:#a855f7; }
  .routine-notes { font-size:11px; color:var(--muted); line-height:1.6; background:var(--card); border:1px solid var(--border); border-left:3px solid #a855f7; border-radius:8px; padding:10px 12px; margin-bottom:12px; }

  /* ── AI chat (History tab) + quick-log mic ── */
  .ai-proposal-item.advisory { opacity:.75; cursor:default; }
  .ai-proposal-item-info { flex-shrink:0; width:16px; text-align:center; color:var(--muted); font-size:12px; margin-top:2px; }
  .ai-checkin-btn.attention { animation:pulse-badge 1s infinite; border-color:#a855f7; }

  /* ── iOS/Android PWA safe areas (notch, home indicator) ─────────────────────
     viewport-fit=cover + black-translucent status bar means content extends under
     the notch and home indicator in standalone mode — inset the shell and every
     fixed-position element. @supports-gated so browsers without env() keep the
     plain values above untouched. */
  @supports (padding: env(safe-area-inset-top)) {
    body {
      padding-top:    calc(16px + env(safe-area-inset-top));
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
      padding-left:   calc(16px + env(safe-area-inset-left));
      padding-right:  calc(16px + env(safe-area-inset-right));
    }
    .rest-badge { bottom: calc(20px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); }
    .sync-badge { bottom: calc(20px + env(safe-area-inset-bottom)); left:  calc(16px + env(safe-area-inset-left)); }
    .toast      { bottom: calc(24px + env(safe-area-inset-bottom)); }
    .rest-overlay    { padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
    .summary-overlay { padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  }

  /* ── Delegated-click support for iOS Safari ──────────────────────────────────
     WebKit only dispatches click events from "clickable" elements to document-
     level listeners — interactive tags, or anything styled cursor:pointer. With
     every handler delegated (js/actions.js) and zero inline onclick attributes,
     any action-bearing div/span WITHOUT this would tap dead on iPhone (the modal
     backdrop and rest overlay were affected). Blanket rule covers all current and
     future action elements; "none" markers (drag handles, guarded inputs) keep
     their own cursors. */
  [data-action]:not([data-action="none"]) { cursor: pointer; }

  /* Swipe feedback: brief highlight when a set is completed/un-completed by swipe */
  .set-row.swipe-flash { animation: swipe-flash .35s ease; }
  @keyframes swipe-flash { 0% { background: rgba(39,174,96,.25); } 100% { background: transparent; } }

  /* Week-swipe feedback (transform on the grid only — never on overlay ancestors) */
  .week-slide-left  { animation: week-slide-l .28s ease; }
  .week-slide-right { animation: week-slide-r .28s ease; }
  @keyframes week-slide-l { from { opacity:.4; transform:translateX(24px); } to { opacity:1; transform:none; } }
  @keyframes week-slide-r { from { opacity:.4; transform:translateX(-24px); } to { opacity:1; transform:none; } }

  /* ── Docs page ── */
  .app-header { position: relative; }
  /* Round 46 §4: the auto margin lives on the GROUP, not on each button — two
     auto margins split the free space between the buttons and floated the ? */
  .app-header-actions { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0; }
  /* Round 46 §5: text labels (Matt's pick) — pills instead of icon discs.
     Docs/Data at 12px keep the longest h1 (YOUR DATA) inside 320pt. */
  .docs-help-btn { height:30px; flex-shrink:0; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:12px; font-weight:700; padding:0 12px; cursor:pointer; line-height:1; white-space:nowrap; }
  .docs-help-btn:hover { color:var(--text); border-color:var(--accent); }
  .docs-back-btn { width:32px; height:32px; flex-shrink:0; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:18px; font-weight:800; cursor:pointer; line-height:1; }
  .docs-body { line-height:1.6; }
  .docs-body p { color:var(--text); font-size:14px; margin:0 0 10px; }
  .docs-toc { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .docs-toc-link { font-size:11px; font-weight:700; color:var(--accent); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:5px 11px; cursor:pointer; text-decoration:none; }
  .docs-toc-link:hover { border-color:var(--accent); }
  .docs-section { padding:16px 0; border-top:1px solid var(--border); }
  .docs-section:first-of-type { border-top:none; }
  .docs-h { font-size:16px; font-weight:800; color:var(--text); margin-bottom:10px; letter-spacing:.01em; }
  .docs-term { font-weight:800; color:var(--text); }
  .docs-tip { font-size:13px; color:var(--muted); background:var(--card); border-left:3px solid var(--accent); border-radius:6px; padding:9px 12px; margin-top:6px; }
  .docs-code, .docs-body code { font-family:ui-monospace, 'SF Mono', Menlo, monospace; }
  .docs-body code { background:var(--card); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:12px; color:var(--accent); }
  .docs-code { display:block; white-space:pre; overflow-x:auto; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; font-size:12px; color:var(--text); margin:6px 0 4px; line-height:1.5; }
  .docs-footer { text-align:center; color:var(--muted); font-size:13px; font-weight:600; padding:24px 0 8px; }

  /* ── Docs assistant (per-section robot chat) ── */
  .docs-h { display:flex; align-items:center; gap:8px; }
  .docs-robot { margin-left:auto; flex-shrink:0; height:26px; border-radius:13px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:11px; font-weight:700; line-height:1; cursor:pointer; padding:0 10px; }
  .docs-robot:hover { color:var(--text); border-color:var(--accent); }
  .docs-chat { display:none; position:sticky; top:8px; z-index:5; margin-bottom:16px; background:var(--card); border:1px solid var(--accent); border-radius:12px; padding:12px; box-shadow:var(--shadow-card); }
  .docs-chat.open { display:block; }
  .docs-chat-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .docs-chat-topic { font-size:12px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .docs-chat-close { width:26px; height:26px; border:none; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; flex-shrink:0; }
  .docs-chat-log { max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
  .docs-chat-hint { font-size:12px; color:var(--muted); line-height:1.5; }
  .docs-chat-msg { font-size:13px; line-height:1.5; padding:8px 11px; border-radius:10px; max-width:92%; word-wrap:break-word; }
  .docs-chat-msg.user { align-self:flex-end; background:var(--text); color:var(--bg); border-radius:10px 10px 2px 10px; }
  .docs-chat-msg.bot { align-self:flex-start; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:10px 10px 10px 2px; }
  .docs-chat-msg.err { color:var(--red); }
  .docs-chat-input-row { display:flex; gap:8px; }
  .docs-chat-input-row .ai-input { flex:1; min-width:0; }
  .docs-chat-send { flex-shrink:0; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:0 16px; font-size:13px; font-weight:800; cursor:pointer; }

#coach-chat-history {
  max-height: 50vh;
  overscroll-behavior: contain;
}

/* ── Type-ahead exercise picker ──────────────────────────────────────────────── */
.exercise-picker-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
}
.exercise-picker-input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: border-color .15s;
}
.exercise-picker-input:focus {
  border-color: var(--accent);
}
.exercise-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .7);
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
  -webkit-overflow-scrolling: touch;
}
.exercise-picker-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 10px 12px 4px 12px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.exercise-picker-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  user-select: none;
  transition: background .1s;
}
.exercise-picker-option:hover,
.exercise-picker-option.highlighted {
  background: rgba(46, 134, 255, .15);
  color: var(--text);
}
.exercise-picker-option[aria-selected="true"] {
  font-weight: 800;
  color: var(--accent);
}
.exercise-picker-option-pinned {
  font-weight: 800;
  color: var(--accent);
  border-top: 1px solid var(--border);
  background: var(--card2);
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.exercise-picker-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 12px;
  text-align: center;
  font-style: italic;
  background: var(--card);
}

/* ── NUTRITION & FOOD SEARCH ────────────────────────────────────────── */
.nut-date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 12px;
  margin-bottom: 8px;
}
.nut-date-arrow {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nut-date-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nut-date-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.nut-today-btn {
  background: rgba(46, 134, 255, .15);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
}

/* Metric Card */
.nut-metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.nut-calories-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nut-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nut-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.nut-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-top: 2px;
}
.nut-remaining-block .nut-stat-num {
  font-size: 28px;
}
.nut-stat-pos {
  color: var(--accent);
}
.nut-stat-neg {
  color: #ef4444 !important;
}

/* Macros Grid */
.nut-macros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.nut-macro-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nut-macro-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.nut-macro-label span:last-child {
  font-weight: 700;
  color: var(--text);
}
.nut-macro-track {
  background: var(--bg);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  position: relative;
}
.nut-macro-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.nut-protein-fill { background: #3b82f6; }
.nut-fat-fill     { background: #f59e0b; }
.nut-carbs-fill   { background: #10b981; }

/* Weigh-in Bar */
.nut-weighin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.nut-weighin-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nut-trend-badge {
  font-size: 13px;
  font-weight: 700;
  color: #22c55e;
}
.nut-scale-text {
  font-size: 11px;
  color: var(--muted);
}
.nut-weighin-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Round 53 §4: the weigh-in input carries its own visible name — one editor,
   one label, and the Profile's readout links here instead of duplicating. */
.nut-bw-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
/* Round 53 §4: the Profile's weight readout links to the one weigh-in editor. */
.profile-weighin-link { background:none; border:none; padding:0; color:var(--accent); font-size:inherit; font-weight:700; cursor:pointer; text-decoration:underline; }
.profile-weighin-link:hover { color:var(--text); }
.nut-bw-input {
  width: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  padding: 8px 10px;
  min-height: 44px;
  text-align: right;
}
.nut-bw-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 44px;
  cursor: pointer;
}

/* Notes callout */
.nut-notes-box {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 8px;
}
.nut-note-item {
  font-size: 12px;
  line-height: 1.4;
  color: #fbbf24;
}
.nut-note-item + .nut-note-item {
  margin-top: 6px;
}

/* Meal Sections */
.nut-meals-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.nut-meal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.nut-meal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.nut-meal-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nut-meal-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.nut-meal-subtotal {
  font-size: 12px;
  color: var(--muted);
}
.nut-add-btn {
  background: rgba(46, 134, 255, .12);
  border: 1px solid rgba(46, 134, 255, .3);
  color: var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.nut-meal-empty {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 8px 0;
}
/* ── Nutrition Log Header & Controls ── */
.nut-log-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 16px 0;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.nut-mode-toggle {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 3px;
  margin: 0;
}
.nut-mode-btn {
  flex: 1;
  text-align: center;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.nut-mode-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* Round 49 §0: .nut-primary-add-btn deleted — food logging happens in Timeline / By Meal. */
/* Round 46 §3: .nut-data-btn deleted with the Nutrition-side "Your data" door —
   the header ⚙ (Round 45) is Your Data's one home; the block-complete door in
   Training stays as a contextual shortcut. */
.nut-timeline-card {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.nut-timeline-row {
  cursor: pointer;
}
.nut-food-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  width: 58px;
  flex-shrink: 0;
  padding-right: 6px;
}
.nut-food-meal-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  vertical-align: middle;
  margin-left: 4px;
}
.portion-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.portion-time-input {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  font-family: inherit;
}
.food-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 10px 12px 4px 12px;
  background: rgba(0, 0, 0, .2);
}
.nut-food-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.nut-food-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.nut-food-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.nut-food-time {
  width: 50px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.nut-food-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.nut-food-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.nut-food-edit-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.nut-food-edit-btn:hover {
  color: var(--accent);
  background: rgba(46, 134, 255, .1);
}
.nut-food-row-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.nut-food-spacer {
  width: 50px;
  flex-shrink: 0;
}
.nut-food-details {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}
.nut-food-del-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.nut-food-del-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, .1);
}

/* ── FOOD SEARCH MODAL ──────────────────────────────────────────────── */
.food-search-card {
  max-height: 85vh;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.food-search-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.food-search-header-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.food-search-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.food-search-input-wrap {
  flex: 1;
  min-width: 0;
}
.food-search-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  min-height: 44px;
}
.food-barcode-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.food-modal-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 26px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.food-search-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.food-tab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 36px;
}
.food-tab-btn.active {
  background: rgba(46, 134, 255, .15);
  color: var(--accent);
}
.food-search-body {
  flex: 1;
  min-height: 0;   /* without this a flex child will not shrink below its
                      content, and overflow-y:auto never gets a scrollbar */
  overflow-y: auto;
}
.food-results-container {
  display: flex;
  flex-direction: column;
}
.food-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 6px 0 8px;
}
.food-search-source-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: -4px 0 8px;
  padding: 0 4px;
}
.food-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  cursor: pointer;
  min-height: 44px;
  border-radius: 6px;
}
.food-item-row:hover,
.food-item-row:focus {
  background: rgba(46, 134, 255, .08);
}
.food-item-left {
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}
.food-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;
}
.food-item-sub {
  font-size: 12px;
  color: var(--muted);
}
.food-item-right {
  text-align: right;
  white-space: nowrap;
}
.food-item-cals {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.food-item-macros {
  font-size: 11px;
  color: var(--muted);
}
.food-search-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
  padding: 24px 16px;
}
.food-search-loading {
  font-size: 14px;
  color: var(--accent);
  text-align: center;
  padding: 24px;
}

/* Portion Adjustment Sheet */
.food-portion-sheet {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.portion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.portion-header-edit {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.portion-edit-title-wrap {
  flex: 1;
  min-width: 0;
}
.portion-edit-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.portion-back-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  flex-shrink: 0;
}
.portion-title-wrap {
  flex: 1;
  min-width: 0;
}
.portion-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.3;
}
.portion-brand {
  font-size: 12px;
  color: var(--muted);
}
.portion-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.portion-unit-toggle {
  display: flex;
  background: rgba(255, 255, 255, .06);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
  margin-bottom: 4px;
}
.portion-unit-btn {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 38px;
  transition: all .15s ease;
}
.portion-unit-btn.active {
  background: var(--accent);
  color: #fff;
}
.portion-unit-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.portion-conv-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.portion-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}
.portion-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portion-time-row,
.portion-meal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.portion-time-row .portion-label,
.portion-meal-row .portion-label {
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.portion-time-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  min-height: 44px;
}
.portion-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portion-step-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.portion-qty-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  min-height: 44px;
}
.portion-serving-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.portion-meal-select {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  min-height: 44px;
}
.portion-preview-card {
  background: rgba(46, 134, 255, .08);
  border: 1px solid rgba(46, 134, 255, .2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  margin: 4px 0;
}
.portion-preview-cals {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
}
.portion-preview-macros {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.portion-btn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
.portion-confirm-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
}
.portion-edit-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.portion-cancel-btn {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
  transition: all .15s ease;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
}
.portion-cancel-btn:hover,
.portion-cancel-btn:focus {
  background: var(--card);
}
.portion-delete-btn {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
  transition: all .15s ease;
  background: transparent;
  border: 1px solid rgba(255, 69, 58, .3);
  color: #ff453a;
}
.portion-delete-btn:hover,
.portion-delete-btn:focus {
  background: rgba(255, 69, 58, .1);
  border-color: #ff453a;
}
.food-edit-card {
  max-height: 85vh;
}

/* Quick Add Form */
.quick-add-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}
.quick-add-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qa-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  min-height: 44px;
}
.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.qa-col {
  display: flex;
  flex-direction: column;
}

/* ── Round 40: Custom foods tab ───────────────────────────────────────────── */
.custom-food-form,
.custom-import-box {
  border-top: 1px solid rgba(255, 255, 255, .07);
  margin-top: 10px;
  padding-top: 12px;
}
.custom-import-box {
  gap: 8px;
}
.custom-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.food-secondary-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
}
.custom-food-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.custom-food-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.custom-food-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 6px 4px;
  cursor: pointer;
}
.custom-food-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.custom-food-brand {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}
.custom-food-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.custom-food-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.food-mini-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  min-height: 30px;
}
.food-mini-btn.food-mini-danger {
  color: #e74c3c;
  border-color: rgba(231, 76, 60, .35);
}
.custom-food-empty {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.custom-import-error {
  color: #e74c3c;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 2px;
}
.custom-import-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* nutrition — recent weigh-ins (restored; see js/nutrition-ui.js) */
.nut-weighin-history {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.nut-weighin-history > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.nut-weighin-history > summary::-webkit-details-marker {
  display: none;
}
.nut-weighin-history > summary::after {
  content: '▾';
  font-size: 12px;
  color: var(--muted);
  transition: transform .15s ease;
}
.nut-weighin-history[open] > summary::after {
  transform: rotate(180deg);
}
.nut-bw-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}
.nut-bw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 4px 8px;
  font-size: 13px;
  color: var(--text);
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.nut-bw-del {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.nut-bw-del:hover,
.nut-bw-del:focus-visible {
  color: #ef4444;
  background: var(--card2); /* Round 46: was var(--card-2, rgba(0,0,0,.04)) — a typo'd token whose light-theme fallback is near-invisible on the dark card */
}

/* ── FOOD SEARCH PLATE UI ───────────────────────────────────────────── */
.food-plate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(46, 134, 255, .12);
  border: 1px solid rgba(46, 134, 255, .3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.food-plate-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.food-plate-count,
.food-plate-cals {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.food-plate-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.food-plate-cals {
  font-size: 12px;
  color: var(--muted);
}
.food-plate-commit-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  min-height: 38px;
  flex-shrink: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.food-plate-commit-btn:hover {
  filter: brightness(1.1);
}
.food-plate-section {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
.food-plate-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.food-plate-section-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.food-plate-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.food-plate-section-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.food-plate-clear-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.food-plate-clear-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, .1);
}
.food-plate-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.food-plate-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.food-plate-item-row:last-child {
  border-bottom: none;
}
.food-plate-item-info {
  flex: 1;
  min-width: 0;
}
.food-plate-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
}
.food-plate-item-sub {
  font-size: 11px;
  color: var(--muted);
}
.food-plate-item-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.food-plate-step-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.food-plate-qty-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  min-width: 28px;
  text-align: center;
}
.food-plate-del-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.food-plate-del-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, .1);
}
.portion-btn-group {
  display: flex;
  gap: 10px;
}
.portion-plate-btn {
  flex: 1;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
}
.portion-secondary-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  padding: 10px 14px;
}

/* ── VERTICAL HOUR RAIL (TIMELINE) ─────────────────────────────────── */
.nut-hour-rail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.nut-hour-rail {
  display: flex;
  flex-direction: column;
}
.nut-hour-row {
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  padding: 8px 12px;
  transition: background .15s ease;
}
.nut-hour-row:last-child {
  border-bottom: none;
}
.nut-hour-row.is-current-hour {
  background: rgba(46, 134, 255, .05);
  border-left: 3px solid var(--accent);
}
.nut-hour-row.has-entries {
  background: rgba(255, 255, 255, .02);
}
.nut-hour-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
}
.nut-hour-label-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.nut-hour-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  min-width: 55px;
}
.nut-current-hour-pill {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.nut-hour-macros {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-left: 4px;
}
.nut-hour-add-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s ease;
}
.nut-hour-add-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.nut-hour-food-list {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, .06);
}

/* ── NUTRITION DASHBOARD & GOAL FORM ────────────────────────────────── */
.nut-dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nut-dash-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.nut-dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.nut-dash-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
}
.nut-dash-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
}
.nut-badge-estimate {
  background: rgba(34, 197, 94, .15);
  color: #22c55e;
}
.nut-badge-baseline {
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}
.nut-badge-manual {
  background: rgba(46, 134, 255, .15);
  color: var(--accent);
}
.nut-mode-flip-btn {
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.nut-dash-metric-row {
  margin-bottom: 12px;
}
.nut-dash-big-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.nut-dash-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}
/* Round 44: the error band beside the estimate — smaller and muted so the
   number stays the headline and the band reads as its precision, not a second
   number. Same treatment everywhere a TDEE value is shown. */
.nut-dash-band {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted2);
}
.nut-dash-muted {
  font-size: 22px;
  color: var(--muted);
}
.nut-dash-sub-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.nut-dash-macros {
  margin-bottom: 12px;
}
.nut-dash-sub-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.nut-dash-sentence {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.nut-weight-dual-row {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}
.nut-weight-dual-block {
  flex: 1;
}
.nut-weight-dual-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.nut-weight-dual-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.nut-sparkline-wrap {
  background: rgba(0, 0, 0, .2);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
}
.nut-sparkline {
  width: 100%;
  height: 50px;
  display: block;
}
.nut-sparkline-empty {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 16px;
}
.nut-weekly-table-wrap {
  overflow-x: auto;
  margin-bottom: 10px;
}
.nut-weekly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}
.nut-week-th, .nut-week-td {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.nut-week-th {
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.nut-week-metric-th, .nut-week-metric-lbl {
  text-align: left;
  font-weight: 700;
  color: var(--muted);
  padding-right: 8px;
}
.nut-week-th.is-today, .nut-week-td.is-today {
  background: rgba(46, 134, 255, .1);
  color: var(--accent);
  font-weight: 700;
  border-radius: 4px;
}
.nut-habits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.nut-habit-block {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.nut-habit-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.nut-habit-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.nut-goal-card {
  border-color: rgba(46, 134, 255, .25);
}
/* Round 23: phase picker (Cut / Maintain / Bulk) — the phase owns the rate */
.nut-phase-pills {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
}
.nut-phase-pill {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  min-height: 40px;
  transition: all .15s;
}
.nut-phase-pill.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* Cut is the deficit phase — tint it so the active state reads at a glance */
.nut-phase-pill[data-phase="cut"].active {
  background: rgba(59, 130, 246, .25);
  color: #93c5fd;
}
.nut-phase-pill[data-phase="bulk"].active {
  background: rgba(245, 158, 11, .25);
  color: #fcd34d;
}
.nut-goal-field-wide {
  grid-column: 1 / -1;
}
/* Round 24: By-rate / By-date driver switch — exactly one input owns the plan */
.nut-driver-pills {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 12px;
}
.nut-driver-pill {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  min-height: 34px;
  transition: all .15s;
}
.nut-driver-pill.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* Round 23: the manual-TDEE door lives beside the number it overrides */
.nut-tdee-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
  flex-wrap: wrap;
}
.nut-tdee-pin-note {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.4;
  min-width: 0;
}
.nut-tdee-pin-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, .15));
  color: var(--accent, #f59e0b);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  min-height: 36px;
  flex: 0 0 auto;
}
.nut-tdee-pin-btn:active {
  background: rgba(255, 255, 255, .08);
}
/* Round 24: the typed manual-expenditure field (primary control) */
.nut-tdee-input {
  flex: 1 1 110px;
  min-width: 0;
  max-width: 140px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
  min-height: 36px;
}
/* Round 24: the shadow nudge — "your logged data currently suggests N" */
.nut-tdee-nudge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(255, 255, 255, .12));
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.nut-tdee-nudge-row b {
  color: var(--text);
}
.nut-goal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.nut-goal-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.nut-goal-field {
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width:auto, so a child that cannot shrink below
     its intrinsic width pushes the column past its 1fr share. <input type=date>
     has a wide intrinsic minimum on iOS (the mm/dd/yyyy picker), which is what
     pushed the Target Date field off the right edge. */
  min-width: 0;
}
.nut-goal-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
  min-height: 44px;
}
.nut-goal-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
}
.nut-goal-summary {
  background: rgba(255, 255, 255, .03);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.nut-goal-cap-alert {
  background: rgba(245, 158, 11, .15);
  border: 1px solid rgba(245, 158, 11, .3);
  color: #f59e0b;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
}
.nut-goal-summary-line {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.food-source-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
}
.nut-dash-sub-stat {
  font-size: 12px;
  color: var(--muted);
}
.nut-stat-accent {
  color: var(--accent);
}

/* ── METRIC DETAIL VIEW (ROUND 17) ────────────────────────────────────────── */
.nut-dash-detail-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, .15));
  color: var(--accent, #f59e0b);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 8px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nut-dash-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-detail-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 24px;
  max-width: 600px;
  margin: 0 auto;
  min-width: 0;
}

.metric-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card, #1e1e1e);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
  padding: 14px;
}
.metric-back-btn {
  align-self: flex-start;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  color: var(--text, #fff);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 12px;
  min-height: 44px;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.metric-header-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.metric-header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #fff);
  letter-spacing: -.01em;
}
.metric-header-range-dates {
  font-size: 12px;
  color: var(--muted, #888);
  font-weight: 500;
}
.metric-header-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.metric-header-stat {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border, rgba(255, 255, 255, .06));
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.metric-header-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #888);
  font-weight: 600;
}
.metric-header-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #fff);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-chart-container {
  background: var(--card, #1e1e1e);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
  padding: 12px 10px 10px;
  overflow: hidden;
  min-width: 0;
}
.metric-series-chart {
  width: 100%;
  height: 180px;
  display: block;
}

.metric-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.metric-range-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .04);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  flex-wrap: wrap;
}
.metric-range-pill {
  background: transparent;
  border: none;
  color: var(--muted, #888);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  min-height: 36px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.metric-range-pill.active {
  background: var(--accent, #f59e0b);
  color: #000;
  font-weight: 700;
}
.metric-gran-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, .04);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.metric-gran-btn {
  background: transparent;
  border: none;
  color: var(--muted, #888);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  min-height: 36px;
  min-width: 36px;
  border-radius: 6px;
  cursor: pointer;
}
.metric-gran-btn.active {
  background: rgba(255, 255, 255, .15);
  color: var(--text, #fff);
  font-weight: 700;
}

.metric-legend-wrap {
  display: flex;
  justify-content: center;
  margin-top: -6px;
}
.metric-legend-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--muted, #888);
  flex-wrap: wrap;
  justify-content: center;
}
.metric-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.metric-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot-trend {
  background: var(--accent, #f59e0b);
}
.dot-scale {
  background: #3b82f6;
}
.metric-legend-band {
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .15);
  display: inline-block;
}
.metric-legend-dash {
  width: 14px;
  height: 2px;
  border-top: 2px dashed #94a3b8;
  display: inline-block;
}

.metric-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.metric-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #fff);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.metric-change-table {
  background: var(--card, #1e1e1e);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.metric-change-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .06));
  gap: 8px;
  min-width: 0;
}
.metric-change-row:last-child {
  border-bottom: none;
}
.metric-change-window {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #fff);
  flex-shrink: 0;
}
.metric-change-honest-note {
  font-size: 12px;
  color: var(--muted, #777);
  font-style: italic;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-change-val-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.metric-change-delta {
  font-size: 13px;
  font-weight: 700;
  font-family: monospace;
}
.dir-up {
  color: #10b981;
}
.dir-down {
  color: #f59e0b;
}
.dir-flat {
  color: var(--muted, #888);
}
.metric-change-detail {
  font-size: 11px;
  color: var(--muted, #777);
}

.metric-explainer-card {
  background: var(--card, #1e1e1e);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.metric-explainer-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent, #f59e0b);
  font-family: monospace;
}
.metric-explainer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #fff);
}
.metric-explainer-text {
  font-size: 13px;
  color: var(--muted, #888);
  line-height: 1.45;
}

.metric-entry-list {
  background: var(--card, #1e1e1e);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.metric-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .06));
  gap: 8px;
  min-width: 0;
}
.metric-entry-row:last-child {
  border-bottom: none;
}
.metric-entry-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.metric-entry-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #fff);
}
.metric-entry-sub {
  font-size: 11px;
  color: var(--muted, #777);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-entry-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.metric-entry-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #fff);
  font-family: monospace;
}
.metric-entry-diff {
  font-size: 11px;
  font-weight: 600;
  font-family: monospace;
}
.metric-entry-empty {
  font-size: 13px;
  color: var(--muted, #777);
  text-align: center;
  padding: 16px 0;
}
.metric-del-btn {
  background: transparent;
  border: none;
  color: var(--muted, #777);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.metric-del-btn:hover,
.metric-del-btn:active {
  color: #ef4444;
  background: rgba(239, 68, 68, .1);
}



/* ── YOUR DATA VIEW (ROUND 23) ─────────────────────────────────────────────── */
/* One home for exports, imports and the reset ladder — reachable from both the
   training and nutrition sides. The danger zone is visually separated and sits
   below everything else; each destructive rung has a download offered above it. */
.data-section-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 18px 0 8px 0;
}
.data-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.data-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.data-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.data-danger-zone {
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 12px;
  padding: 12px;
  margin-top: 22px;
  background: rgba(239, 68, 68, .04);
}
.data-danger-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ff6b6b;
  margin-bottom: 10px;
}

/* ── ROUND 25 ───────────────────────────────────────────────────────────────── */
/* Round 45 §3: the Training destination's Schedule | History | Exercises
   segmented control (reuses .nut-mode-toggle/.nut-mode-btn from Nutrition —
   one segmented-control style in the app). */
.split-mode-toggle {
  margin: 12px 0 16px 0;
  width: 100%;
  box-sizing: border-box;
}
.split-mode-toggle .nut-mode-btn {
  flex: 1;
}
/* §1: the re-anchor line — "Picked up where you left off…" */
.reanchor-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(46, 134, 255, .12);
  border: 1px solid rgba(46, 134, 255, .35);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.reanchor-banner.visible {
  display: flex;
}
.reanchor-banner b {
  color: #93c5fd;
}
.reanchor-dismiss {
  background: none;
  border: none;
  color: var(--muted2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
  padding: 2px 4px;
  min-width: 32px;
  min-height: 32px;
}
/* §3: a scheduled day whose exercises were customised (Coach edits) */
.customized-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent, #f59e0b);
  background: rgba(245, 158, 11, .12);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.reset-ex-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
  min-height: 28px;
}
.reset-ex-btn:active {
  color: var(--text);
  border-color: var(--muted2);
}