/* Training Log: black, grey and white only, with the glossy chrome-tile
   finish of his app. The one exception is the Calendar tab's green (went) and
   red (missed), his choice. Hierarchy runs on brightness. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0B0B0B; --surface: #171717; --rule: #2C2C2C;
  --text: #D2D2D2; --dim: #8A8A8A; --faint: #5C5C5C; --signal: #FFFFFF;
  --warn-bg: #1A1A1A; --warn-text: #E4E4E4; --warn-rule: #8A8A8A;
  --tile-grad: linear-gradient(155deg, #333333 0%, #1c1c1c 42%, #0d0d0d 100%);
  --tile-grad-hover: linear-gradient(155deg, #3c3c3c 0%, #222222 42%, #101010 100%);
  --tile-border: rgba(255,255,255,0.10);
  --tile-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(0,0,0,0.6) inset,
                 0 10px 18px -8px rgba(0,0,0,0.75), 0 1px 2px rgba(0,0,0,0.5);
  --tile-shadow-press: 0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(0,0,0,0.7) inset,
                 0 3px 8px -4px rgba(0,0,0,0.7);
  --tile-signal: linear-gradient(155deg, #FFFFFF 0%, #E4E4E4 55%, #C7C7C7 100%);
  --tile-signal-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -6px 10px -6px rgba(0,0,0,0.25) inset,
                 0 10px 18px -8px rgba(0,0,0,0.75);
  --card: linear-gradient(160deg, #161616 0%, #0f0f0f 100%);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --radius: 16px; --radius-sm: 11px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
body { color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
#app {
  background: radial-gradient(ellipse 900px 500px at 50% -8%, #232323 0%, #0B0B0B 55%), var(--bg);
  min-height: 100vh;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px));
}
#app.with-days { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
.wrap { max-width: 560px; margin: 0 auto; }

h1 {
  font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.05; margin-bottom: 4px; text-wrap: balance;
  background: linear-gradient(180deg, #FFFFFF 0%, #A9A9A9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-family: var(--display); font-weight: 600; font-size: 24px; margin: 30px 0 10px; text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 600; font-size: 20px; }
.sub { color: var(--dim); font-size: 14px; }
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.top .chip { flex: none; margin-top: 4px; }
p.lead { color: var(--dim); max-width: 60ch; }
.note { color: var(--dim); font-size: 13px; margin-top: 10px; min-height: 18px; }
.note.ok { color: var(--signal); }
.note.warn { color: var(--warn-text); }
.empty { color: var(--dim); font-size: 14px; padding: 12px 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.row > .act { flex: 1 1 auto; }

.banner {
  font-size: 13px; line-height: 1.45; padding: 10px 12px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: var(--warn-bg); color: var(--warn-text); border-left: 3px solid var(--warn-rule);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.banner b { color: var(--signal); }
.banner .chip { margin-top: 8px; }
.tag-line { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 9px; }

button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

button.act {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  border-radius: var(--radius-sm); padding: 12px 16px; cursor: pointer;
  border: 1px solid var(--tile-border); background: var(--tile-grad); color: var(--text);
  box-shadow: var(--tile-shadow); transition: box-shadow .12s ease, transform .12s ease;
}
button.act.primary { background: var(--tile-signal); border-color: rgba(255,255,255,0.6); color: #101010; box-shadow: var(--tile-signal-shadow); }
button.act.ghost { background: none; box-shadow: none; border-color: var(--rule); color: var(--dim); }
button.act.small { font-size: 15px; padding: 6px 11px; }
button.act:active { box-shadow: var(--tile-shadow-press); transform: translateY(1px); }
button.act[disabled] { opacity: 0.45; cursor: default; }
@media (hover: hover) {
  button.act:hover { background: var(--tile-grad-hover); }
  button.act.primary:hover { background: linear-gradient(155deg, #FFFFFF 0%, #EDEDED 55%, #D6D6D6 100%); }
  button.act.ghost:hover { background: none; color: var(--text); }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.chip {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  background: var(--tile-grad); color: var(--dim); border: 1px solid var(--tile-border);
  border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; box-shadow: var(--tile-shadow);
}
.chip[aria-pressed="true"] { color: #101010; background: var(--tile-signal); border-color: rgba(255,255,255,0.6); box-shadow: var(--tile-signal-shadow); }
@media (hover: hover) { .chip:hover { color: var(--text); } .chip[aria-pressed="true"]:hover { color: #101010; } }

.option {
  text-align: left; cursor: pointer; width: 100%; display: grid; gap: 3px;
  background: var(--card); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); padding: 14px;
}
.option b { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--signal); }
.option span { color: var(--dim); font-size: 14px; }
.option[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.steps { display: flex; gap: 6px; margin: 4px 0 10px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: #262626; }
.steps i.on { background: var(--signal); }

/* inputs */
input[type="text"], input[type="search"], input[type="date"], select, textarea {
  width: 100%; min-width: 0; background: #101010; color: var(--text);
  border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset, 0 1px 0 rgba(255,255,255,0.04);
}
input[type="text"], input[type="search"] {
  font-family: var(--display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; padding: 10px;
}
input::placeholder, textarea::placeholder { color: #5A5A5A; font-weight: 400; }
input:focus, select:focus, textarea:focus { border-color: var(--signal); }
input[type="date"] { font-family: var(--display); font-weight: 600; font-size: 18px; padding: 10px 12px; width: auto; min-width: 140px; flex: 0 1 auto; }
select { font-family: var(--body); font-size: 16px; padding: 10px; }
textarea { font-family: var(--mono); font-size: 12px; padding: 10px; margin: 10px 0; height: 130px; resize: vertical; }

/* exercise cards (Log tab) */
.ex {
  padding: 12px 12px 14px; margin-bottom: 12px; background: var(--card);
  border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 16px -10px rgba(0,0,0,0.7);
}
.ex.dragging { opacity: 0.9; border-color: var(--signal); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.9); position: relative; z-index: 5; }
.ex-head { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ex-title { min-width: 0; }
.ex-name { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.ex-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 3px; }
.ex-best { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--signal);
  padding: 2px 9px; border-radius: 999px; background: #1c1c1c; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset; }
.ex-best span { color: var(--dim); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; font-size: 11px; }
.tag { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.tag.on { color: #101010; background: var(--signal); border-color: var(--signal); }
.handle {
  width: 36px; height: 40px; display: grid; place-items: center; cursor: grab; touch-action: none;
  background: none; border: 1px solid var(--rule); border-radius: 9px; color: var(--dim);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.handle svg { width: 18px; height: 18px; }
.x { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--rule); background: none; color: var(--dim); cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.set { display: grid; grid-template-columns: 20px minmax(0,1fr) 12px minmax(0,1fr) minmax(52px, 0.8fr); align-items: center; gap: 7px; margin-bottom: 7px; }
.set-n { font-family: var(--display); color: var(--dim); text-align: center; }
.set input[type="text"] { text-align: center; }
.times { color: var(--dim); text-align: center; font-size: 14px; }
.prev { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set.flag input[type="text"] { border: 1px dashed #FFFFFF; }
.set-tools { display: flex; gap: 8px; margin-top: 4px; }
.taken { margin: 4px 0 14px; }

/* set check */
.check {
  padding: 14px; margin: 4px 0 16px; border-radius: var(--radius);
  background: linear-gradient(160deg, #1d1d1d 0%, #111111 100%);
  border: 1px solid rgba(255,255,255,0.14); border-left: 3px solid #FFFFFF;
}
.check h3 { color: var(--signal); margin-bottom: 4px; }
.check-item { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 10px; }
.check-item b { color: var(--signal); font-weight: 600; }
.check-why { color: var(--text); font-size: 14px; margin: 3px 0 8px; }
.check-row { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.check-row .chip { white-space: nowrap; }

/* history cards */
.hist {
  padding: 12px 14px; font-size: 14px; margin-bottom: 8px; background: var(--card);
  border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.hist-top { display: flex; justify-content: space-between; gap: 12px; }
.hist-day { font-family: var(--display); font-size: 18px; font-weight: 600; }
.hist-date { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-body { color: var(--dim); margin-top: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hist-changes { color: var(--text); margin-top: 6px; font-size: 13px; }
.hist-changes b { font-family: var(--display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 12px; color: var(--dim); font-weight: 700; margin-right: 4px; }
.hist-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hist-actions .chip { font-size: 14px; padding: 4px 10px; }
.hist-flag { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #5E5E5E; color: var(--text); font-size: 13px; }
.hist-flag b { color: var(--signal); font-weight: 600; }
.hist-flag .chip { font-size: 14px; padding: 4px 10px; margin: 6px 6px 0 0; }
.hist-flag .check-row { margin-top: 6px; }
/* gear (v12) */
.day-focus.with-gear { margin-bottom: 4px; }
.gear-line { color: var(--text); font-size: 14px; margin: 0 0 12px; }
.gear-line b { font-family: var(--display); letter-spacing: 0.05em; text-transform: uppercase; font-size: 12px; color: var(--dim); font-weight: 700; margin-right: 6px; }
.gear-item { padding: 12px; margin-bottom: 8px; background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); }
.gear-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.gear-head input[type="text"] { font-family: var(--display); font-weight: 600; font-size: 18px; }
.gear-days { color: var(--dim); font-size: 13px; margin: 6px 0 8px; }
.gear-item .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.gear-item .chip { font-size: 14px; padding: 4px 10px; }
/* editing a saved workout (v9) */
.hist.editing { border-color: rgba(255,255,255,0.45); padding-bottom: 14px; }
.ed-date { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ed-date > span { color: var(--dim); font-size: 13px; }
.ed-ex { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.ed-head { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.ed-head .chip { font-size: 14px; padding: 4px 10px; }
.ed-name { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; color: var(--signal); }
.set.ed-set { grid-template-columns: 18px minmax(0,1fr) 10px minmax(0,1fr) 36px; }
.set.ed-set .x { width: 36px; height: 36px; }
.hist.editing .check { margin: 14px 0 4px; }
.hist.editing .check .chip { margin-top: 2px; }
.hist.cal-went { border-left: 3px solid #1E9447; }
.hist.cal-missed { border-left: 3px solid #C0352C; }
.hist .act.small { margin-top: 10px; }

/* charts, tables, stats */
svg { width: 100%; height: auto; display: block; margin: 4px 0 6px; }
.metrics { display: flex; gap: 6px; margin-bottom: 14px; }
.metrics button {
  flex: 1; font-family: var(--display); font-weight: 600; font-size: 16px;
  background: var(--tile-grad); border: 1px solid var(--tile-border); border-radius: var(--radius-sm);
  color: var(--dim); padding: 8px 4px; cursor: pointer; box-shadow: var(--tile-shadow);
}
.metrics button[aria-pressed="true"] { color: #101010; background: var(--tile-signal); border-color: rgba(255,255,255,0.6); box-shadow: var(--tile-signal-shadow); }
.stats { display: flex; gap: 18px; margin: 14px 0 4px; flex-wrap: wrap; }
.stat-n { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; display: block; }
.stat-l { color: var(--dim); font-size: 12px; }
.up { color: var(--signal); }
.scroll-x { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12px; padding: 0 6px 7px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:last-child, td:last-child { text-align: right; padding-right: 0; }
td { padding: 9px 6px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td.date { color: var(--dim); white-space: nowrap; }
.bar-cell { width: 34%; }
.bar { height: 6px; background: linear-gradient(90deg, #6E6E6E, #FFFFFF); border-radius: 3px; min-width: 2px; margin-top: 6px; }
.pri { color: var(--signal); font-size: 11px; letter-spacing: 0.04em; }
.ex-chips .chip { font-size: 16px; padding: 8px 12px; }

/* muscle map */
.body-svg { max-width: 420px; margin: 6px auto 2px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55)); }
.body-svg [data-mus] { cursor: pointer; }
.legend { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 2px 0 4px; color: var(--dim); font-size: 12px; }
.legend i { flex: 0 1 160px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2B2B2B, #FFFFFF); }
.find {
  padding: 12px 14px; font-size: 14px; line-height: 1.45; margin-bottom: 8px; background: var(--card);
  border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius);
}
.find b { color: var(--signal); font-weight: 600; }

/* plan editor */
.plan-day { padding: 12px; margin-top: 12px; background: var(--card); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); }
.plan-day .name-row { display: flex; gap: 8px; align-items: center; }
.ex-line { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); background: transparent; }
.ex-line:first-child { border-top: none; }
.ex-line.dragging { background: #1b1b1b; border-radius: 9px; outline: 1px solid var(--signal); }
.ex-line .handle { width: 32px; height: 34px; }
.ex-line .x { width: 32px; height: 32px; }
.ex-line .ex-label { min-width: 0; overflow-wrap: anywhere; }
.ex-line select { width: auto; padding: 6px 4px; font-size: 14px; }
.weekdays { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.weekdays .chip { font-size: 13px; padding: 4px 8px; }

/* pinned bars */
.bar-dock, .dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(10,10,10,0.93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bar-dock .inner { max-width: 560px; margin: 0 auto; display: flex; gap: 8px; padding: 10px 16px; }
.bar-dock .act { flex: 1; }
.dock-days { display: flex; gap: 6px; padding: 8px 10px 4px; max-width: 560px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.dock-days::-webkit-scrollbar { display: none; }
.day {
  font-family: var(--display); font-weight: 600; font-size: 17px; white-space: nowrap;
  background: var(--tile-grad); color: var(--dim); border: 1px solid var(--tile-border);
  border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; flex: 1 0 auto;
  box-shadow: var(--tile-shadow);
}
.day[aria-pressed="true"] { background: var(--tile-signal); border-color: rgba(255,255,255,0.6); color: #101010; box-shadow: var(--tile-signal-shadow); }
.tabbar { display: flex; max-width: 560px; margin: 0 auto; }
.tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  background: none; border: none; cursor: pointer; color: #6E6E6E;
  font-family: var(--body); font-weight: 600; font-size: 11px; letter-spacing: 0.02em;
  padding: 8px 2px 9px; min-height: 54px;
}
.tabbar svg { width: 24px; height: 24px; margin: 0; flex: none; }
.tabbar button[aria-selected="true"] { color: #FFFFFF; }
.tabbar button[aria-selected="true"] svg { filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
.day-title { margin-top: 2px; }

/* add-exercise sheet, toast */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 30; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 85vh; display: flex; flex-direction: column;
  background: #121212; border-top: 1px solid rgba(255,255,255,0.12); border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.sheet .inner { max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sheet .head { display: flex; justify-content: space-between; align-items: center; }
.sheet .list { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.sheet .grp { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 12px 0 4px; }
.lib-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 10px 2px; background: none; border: none; border-bottom: 1px solid #222; cursor: pointer; }
.lib-item small { color: var(--faint); text-align: right; }
.lib-item[aria-disabled="true"] { color: var(--faint); }
.custom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custom label { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: 14px; }
.custom label input { width: 18px; height: 18px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  background: var(--signal); color: #101010; border-radius: 999px; padding: 8px 8px 8px 16px; display: flex; gap: 12px; align-items: center;
  font-weight: 600; font-size: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.6); max-width: calc(100% - 32px);
}
.toast.solo { padding: 9px 16px; }
.toast button { background: #101010; color: #fff; border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: var(--display); font-weight: 600; flex: none; }

/* AI prompt box */
pre.prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text);
  background: #0f0f0f; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px; max-height: 320px; overflow-y: auto; margin-top: 8px; }
details summary { cursor: pointer; color: var(--dim); font-size: 14px; margin-top: 12px; }

/* Calendar: the ONE place colour is allowed. Each state also has a mark. */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 12px; }
.cal-head h2 { margin: 0; }
.cal-head .chip { font-size: 18px; padding: 6px 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-dow { text-align: center; color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 2px; }
.cal-day {
  position: relative; aspect-ratio: 1 / 1.08; min-width: 0; border-radius: 10px; padding: 4px 3px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 600; cursor: pointer;
  background: #121212; border: 1px solid rgba(255,255,255,0.05); color: #5E5E5E;
}
.cal-day .n { font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
.cal-day .lab { font-size: 11px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: clip; }
.cal-day .mk { position: absolute; top: 3px; right: 4px; font-size: 10px; line-height: 1; }
.cal-day.blank { visibility: hidden; }
.cal-day.rest { background: var(--tile-grad); color: var(--dim); border-color: var(--tile-border); box-shadow: var(--tile-shadow); }
.cal-day.future, .cal-day.before { background: #0f0f0f; color: #4A4A4A; }
.cal-day.went {
  background: linear-gradient(155deg, #3FCB6E 0%, #1E9447 55%, #136B32 100%); color: #FFFFFF;
  border-color: rgba(160,255,190,0.35); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 8px 14px -8px rgba(0,0,0,0.8);
}
.cal-day.missed {
  background: linear-gradient(155deg, #F2665C 0%, #C0352C 55%, #8A1F19 100%); color: #FFFFFF;
  border-color: rgba(255,170,160,0.35); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 14px -8px rgba(0,0,0,0.8);
}
.cal-day.today { outline: 2px solid #FFFFFF; outline-offset: 1px; }
.cal-day.pick { box-shadow: 0 0 0 3px #0B0B0B, 0 0 0 5px rgba(255,255,255,0.75); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 2px; color: var(--dim); font-size: 12px; }
.cal-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cal-legend .lg-went { background: #1E9447; } .cal-legend .lg-missed { background: #C0352C; }
.cal-legend .lg-rest { background: #2A2A2A; } .cal-legend .lg-today { border: 2px solid #FFFFFF; }
.cal-detail { margin-top: 16px; }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper b { font-family: var(--display); font-size: 22px; color: var(--signal); min-width: 1.5ch; text-align: center; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- round 2 (9 Oct): setup fields, overview, goals, leaderboards ---------- */
.day-focus { color: var(--dim); font-size: 14px; margin: 2px 0 12px; }
.plan-day .day-focus { margin: 6px 0 0; font-size: 13px; }
h2 .sub { font-family: var(--body); font-size: 13px; font-weight: 500; margin-left: 6px; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 120px; min-width: 0; }
.field > span { color: var(--dim); font-size: 13px; }
.field input[type="text"] { font-size: 18px; text-align: left; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 8px; }
.check-line input { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.grp-head { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin: 14px 0 0; }
.grp-head + .chips { margin-top: 6px; margin-bottom: 4px; }
.pick-map .body-svg { max-width: 330px; margin-top: 12px; }
.hint { color: var(--text); font-size: 14px; min-height: 40px; margin: 6px 0 4px; text-align: center; }
.hint b { color: var(--signal); }
.option .tpl-days { display: grid; gap: 3px; margin: 6px 0 4px; color: var(--text); font-size: 15px; }
.option .tpl-days i { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--dim); display: inline-block; min-width: 0; margin-right: 6px; }
.option .tpl-days i::after { content: ':'; }
.option b { line-height: 1.15; }

/* workout overview (labelled rows, from his v28 design) */
.ov { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.ov-head { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--signal); margin-bottom: 6px; }
.ov-rows { display: flex; flex-direction: column; gap: 7px; }
.ov-row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: baseline; color: var(--text); font-size: 14px; line-height: 1.45; }
.ov-lab { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
  padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); color: var(--text); background: #1c1c1c; }
.ov-positive .ov-lab { color: #FFFFFF; border-color: rgba(255,255,255,0.45); }
.ov-focus .ov-lab { color: var(--dim); }
.ov-goal .ov-lab { color: #101010; background: var(--tile-signal); border-color: rgba(255,255,255,0.6); }
.done-head { margin-bottom: 4px; }

/* weekly goals */
.goals-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.goals { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.goal { padding: 10px 12px; background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); }
.goal.done { border-color: rgba(255,255,255,0.35); }
.goal-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.goal-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.goal-sub:has(> span:nth-child(3)) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto; }
.goal-sub .track { height: 7px; border-radius: 4px; background: #1f1f1f; overflow: hidden; display: block; }
.goal-sub .fill { display: block; height: 100%; background: linear-gradient(90deg, #6E6E6E, #FFFFFF); border-radius: 4px; }
.goal-sub .v { color: var(--dim); text-align: right; white-space: nowrap; }
.stepper.small { gap: 4px; }
.stepper.small .chip { padding: 3px 10px; font-size: 15px; }

/* leaderboards */
.board { display: flex; flex-direction: column; gap: 6px; }
.board-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px;
  background: var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.board-row.me { border-color: var(--signal); }
.board-rank { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--signal); }
.board-name { overflow-wrap: anywhere; }
.board-lift { color: var(--text); white-space: nowrap; font-size: 14px; }
.board-you { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: #141414; border: 1px dashed #5E5E5E; font-size: 14px; line-height: 1.55; }
.board-you b { color: var(--signal); }

/* after-workout activity */
.mind-card { padding: 14px; background: var(--card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); }
.mind-cat { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.mind-card h3 { margin: 2px 0 8px; color: var(--signal); }
.mind-steps { padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.timer { font-family: var(--display); font-weight: 700; font-size: 46px; text-align: center; color: var(--signal); font-variant-numeric: tabular-nums; margin: 12px 0 6px; }
.act[aria-pressed="true"] { background: var(--tile-signal); color: #101010; border-color: rgba(255,255,255,0.6); }
code.uid { font-family: var(--mono); font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
canvas.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
.ov-solo .ov { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- round 3 (9 Oct, his phone screenshot): roomier, fewer words ----------
   The status bar is translucent in the Home Screen app, so content scrolled
   up ran under the clock. A solid strip the height of the safe area keeps the
   clock readable. Everything else here only adds space and size. */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px);
  background: var(--bg); z-index: 45; pointer-events: none;
}
#app { padding-top: calc(26px + env(safe-area-inset-top, 0px)); padding-left: 18px; padding-right: 18px; }
h1 { font-size: 36px; margin-bottom: 6px; }
h1.big { font-size: 44px; line-height: 1; margin: 14px 0 10px; }
.hero { margin-top: 18vh; }
.hero h1.big { font-size: 52px; margin-top: 16px; }
p.lead { font-size: 19px; color: var(--text); line-height: 1.35; }
.hero .note { font-size: 15px; margin-top: 8px; }
h2 { font-size: 26px; margin: 36px 0 12px; }
.top { margin-bottom: 22px; }
.steps { margin: 2px 0 18px; }
.steps i { height: 5px; }
button.act.big { font-size: 22px; padding: 16px; }
.stack { gap: 12px; }
.option { padding: 18px 16px; gap: 4px; }
.option b { font-size: 23px; }
.option span { font-size: 15px; }
.field.big > span { font-size: 15px; }
.field.big input[type="text"] { font-size: 24px; padding: 14px; }
.chips { gap: 10px; }
.chip { padding: 8px 14px; font-size: 16px; }
.grp-head { margin-top: 20px; }

/* Log: bigger cards, taller inputs, more room between sets */
.day-title { font-size: 34px; margin-bottom: 2px; }
.day-focus { font-size: 15px; margin: 2px 0 18px; }
.ex { padding: 16px 14px 18px; margin-bottom: 18px; }
.ex-head { margin-bottom: 14px; gap: 10px; }
.ex-name { font-size: 24px; }
.ex-meta { margin-top: 5px; }
.set { gap: 9px; margin-bottom: 10px; }
.set input[type="text"] { padding: 13px 10px; font-size: 21px; }
.prev { font-size: 14px; }
.set-tools { margin-top: 10px; gap: 10px; }
.set-tools .act.small { padding: 8px 16px; font-size: 16px; }
.row { gap: 10px; margin-bottom: 12px; }
.hist { padding: 16px; margin-bottom: 14px; }
.hist-day { font-size: 20px; }
.note { font-size: 14px; }
.dock-days { padding: 10px 12px 6px; gap: 8px; }
.day { padding: 10px 12px; font-size: 18px; }
.plan-day { padding: 16px; margin-top: 16px; }
.ex-line { padding: 9px 0; }
.goal { padding: 14px; }
.goals { gap: 10px; }

/* ---------- injury mark (13 Oct): bandage button top right of each lift ---------- */
.ex-head.has-inj { grid-template-columns: auto 1fr auto auto; }
.x.inj { display: grid; place-items: center; padding: 0; }
.x.inj[aria-pressed="true"] { background: var(--signal); color: #101010; border-color: var(--signal); }
.x.inj[aria-expanded="true"] { border-color: var(--signal); color: var(--signal); }
.x.inj[aria-pressed="true"][aria-expanded="true"] { color: #101010; }
.inj-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 14px; color: var(--dim); font-size: 14px; }
.inj-pick .chips { margin: 0; }
.inj-edit { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.inj-line { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--rule); color: var(--text); }
.inj-line:first-of-type { border-top: none; }
.inj-line .chips { margin: 0; gap: 6px; }
.inj-line .chip { padding: 4px 10px; font-size: 14px; }
.ren { margin-top: 14px; }

/* ---------- 22 Oct 2026: rest timer, next-set suggestion, equipment ---------- */
.set.with-rest { grid-template-columns: 18px minmax(0,1fr) 10px minmax(0,1fr) minmax(46px, 0.75fr) 38px; gap: 7px; }
.rest-btn {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--tile-grad); color: var(--dim); border: 1px solid var(--tile-border); border-radius: 10px; box-shadow: var(--tile-shadow);
}
.rest-btn[aria-pressed="true"] { background: var(--tile-signal); color: #101010; border-color: rgba(255,255,255,0.6); box-shadow: var(--tile-signal-shadow); }
.sugg { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 2px 0 2px; color: var(--dim); font-size: 15px; min-height: 0; }
.sugg:empty { display: none; }
.sugg-lab { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.sugg-txt { flex: 1 1 auto; min-width: 0; }
.sugg-txt b { color: var(--signal); font-weight: 600; }
.sugg-txt small { display: block; color: var(--faint); font-size: 13px; }
.sugg .chip { padding: 5px 14px; font-size: 15px; }
.ex-swap { color: var(--dim); font-size: 13px; margin-top: 3px; }
.set-tools { flex-wrap: wrap; }
.eq-btn { margin-left: auto; }
.eq-btn[aria-pressed="true"] { background: var(--tile-signal); color: #101010; border-color: rgba(255,255,255,0.6); }
.eq-pick { margin: 12px 0 0; }
.rest-set { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.rest-set small { display: block; color: var(--dim); font-size: 13px; }
.rest-set .stepper b { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.restbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 25;
  bottom: calc(128px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 24px); max-width: 536px;
  background: rgba(22,22,22,0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; padding: 10px 12px; box-shadow: 0 12px 26px rgba(0,0,0,0.7);
}
.restbar.over { background: var(--tile-signal); color: #101010; border-color: rgba(255,255,255,0.7); }
.rest-main { display: flex; align-items: center; gap: 8px; }
.rest-lab { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.restbar.over .rest-lab { color: #3A3A3A; }
.rest-clock { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--signal); margin-right: auto; }
.restbar.over .rest-clock { color: #101010; }
.restbar .chip { padding: 6px 11px; font-size: 15px; }
.restbar.over .chip { background: #101010; color: #fff; border-color: #101010; }
.rest-next { color: var(--dim); font-size: 14px; margin-top: 5px; overflow-wrap: anywhere; }
.rest-next b { color: var(--signal); font-weight: 600; }
.restbar.over .rest-next, .restbar.over .rest-next b { color: #202020; }
body.resting #app.with-days { padding-bottom: calc(240px + env(safe-area-inset-bottom, 0px)); }
body.resting .toast { bottom: calc(232px + env(safe-area-inset-bottom, 0px)); }

/* ---------- v28 (1 Nov 2026, his notes): cleaner, calmer, easier ----------
   Lifts fold into one line each (the one he is on is open), extras live
   behind ⋯, plan days fold the same way, and the search sheet sits above the
   keyboard. Still black, grey and white only. */
:root { --line: rgba(255,255,255,0.07); --line-strong: rgba(255,255,255,0.16); }
.day-title { font-size: 36px; margin-bottom: 0; }
.day-focus { margin: 4px 0 10px; }
.gear-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text); font-size: 14px; margin: 0 0 14px; }
.gear-line b { margin-right: 2px; }
.day-progress { height: 3px; border-radius: 2px; background: #1f1f1f; margin: 2px 0 18px; overflow: hidden; }
.day-progress i { display: block; height: 100%; background: linear-gradient(90deg, #8a8a8a, #ffffff); border-radius: 2px; transition: width .3s ease; }

/* lift cards */
.ex { padding: 0; margin-bottom: 10px; background: #121212; border: 1px solid var(--line); border-radius: 18px; box-shadow: none; overflow: hidden; }
.ex.open { background: linear-gradient(180deg, #181818 0%, #111111 100%); border-color: var(--line-strong); margin: 14px 0; box-shadow: 0 14px 30px -18px rgba(0,0,0,0.9); }
.ex.complete:not(.open) { background: #0e0e0e; }
.ex.complete:not(.open) .ex-name { color: var(--dim); }
.ex-head, .ex-head.has-inj { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 10px 12px 10px 10px; }
.ex .handle { width: 30px; height: 40px; border: none; background: none; color: var(--faint); }
.ex-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; background: none; border: none; padding: 4px 0; cursor: pointer; color: inherit; }
.ex-name { font-size: 22px; line-height: 1.1; color: var(--signal); }
.ex-sub { color: var(--dim); font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ex-meta { margin-top: 2px; }
.ex-state { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; color: var(--faint);
  font-family: var(--display); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; border: 1px solid var(--line); }
.ex-state.on { background: var(--signal); color: #101010; border-color: var(--signal); }
.ex-state svg { margin: 0; width: 18px; height: 18px; }
.more-btn { display: grid; place-items: center; padding: 0; border-color: var(--line); }
.more-btn svg { margin: 0; width: 20px; height: 20px; }
.more-btn[aria-expanded="true"] { background: var(--signal); color: #101010; border-color: var(--signal); }
.ex .ex-swap { padding: 0 14px 6px 50px; margin: 0; }
.more { margin: 0 12px 12px; padding: 4px 12px; border-radius: 14px; background: #0c0c0c; border: 1px solid var(--line); }
.more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.more-row:first-child { border-top: none; }
.more-row > span { color: var(--dim); font-size: 13px; min-width: 92px; font-family: var(--display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.more-row .chips { margin: 0; gap: 6px; }
.more-row .chip { padding: 5px 11px; font-size: 14px; }
.sets { padding: 2px 12px 0; }
.set { margin-bottom: 8px; }
.set.with-rest { grid-template-columns: 18px minmax(0,1fr) 10px minmax(0,1fr) minmax(44px, 0.7fr) 38px; gap: 7px; }
.set input[type="text"] { padding: 12px 8px; font-size: 21px; background: #0b0b0b; border-color: var(--line); box-shadow: none; }
.set.done input[type="text"] { color: var(--signal); border-color: rgba(255,255,255,0.12); }
.set-n { font-size: 15px; color: var(--faint); }
.set.done .set-n { color: var(--text); }
.prev { font-size: 13px; color: var(--faint); }
.rest-btn { width: 38px; height: 38px; background: none; border: 1px solid var(--line); box-shadow: none; color: var(--faint); }
.sugg { margin: 4px 12px 0; padding: 8px 10px 8px 12px; border-radius: 12px; background: #0c0c0c; border: 1px dashed rgba(255,255,255,0.14); font-size: 15px; }
.sugg-lab { color: var(--dim); }
.sugg-txt b { font-family: var(--display); font-weight: 600; font-size: 18px; }
.set-tools { justify-content: flex-start; margin: 8px 12px 14px; gap: 8px; }
.set-tools .act.small { padding: 6px 14px; font-size: 15px; }
.taken { margin: 4px 0 12px; }
.finish-row { margin-top: 18px; }
.finish-row .act.primary { flex: 1 1 140px; font-size: 21px; padding: 14px; }

/* fold buttons (setup and Plan) */
.fold-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 18px; padding: 14px 16px; cursor: pointer;
  background: #121212; color: var(--text); border: 1px solid var(--line); border-radius: 14px; font-family: var(--display); font-weight: 600; font-size: 19px; text-align: left; }
.fold-btn span { display: flex; flex-direction: column; gap: 2px; }
.fold-btn > span > span, .fold-btn small { font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--dim); }
.fold-btn svg, .plan-head svg, .gear-days svg { width: 18px; height: 18px; margin: 0; flex: none; color: var(--dim); transition: transform .2s ease; }
[aria-expanded="true"] > svg { transform: rotate(180deg); }
.fold-btn.sec { margin-top: 10px; }
.sec-body { padding: 4px 2px 8px; }
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-grid .option { padding: 14px; }
.goal-grid .option b { font-size: 22px; }
.goal-grid .option span { font-size: 13px; }
.picked { color: var(--text); font-size: 14px; text-align: center; margin: 0 0 6px; }
.picked b { font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; color: var(--dim); margin-right: 6px; }

/* plan days fold like the Log */
.plan-day { padding: 0; margin-top: 10px; background: #121212; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.plan-day.open { border-color: var(--line-strong); background: linear-gradient(180deg, #181818 0%, #111111 100%); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; background: none; border: none; cursor: pointer; text-align: left; color: inherit; }
.pd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-name { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--signal); line-height: 1.1; }
.pd-sub { color: var(--dim); font-size: 13px; }
.pd-body { padding: 0 14px 14px; }
.pd-body .field input[type="text"] { font-family: var(--display); font-weight: 600; font-size: 20px; }
.pd-body .day-focus { margin: 8px 0 0; font-size: 13px; }
.pd-list { margin-top: 10px; }
.pd-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ex-line { border-top: 1px solid var(--line); }
.ex-line .handle { border: none; color: var(--faint); }
.ex-line .x { border-color: var(--line); }
.ex-line select { border-radius: 999px; padding: 6px 10px; font-size: 14px; background: #0b0b0b; }

/* gear */
.gear-item { padding: 12px; background: #121212; border: 1px solid var(--line); border-radius: 16px; }
.gear-item.open { border-color: var(--line-strong); }
.gear-days { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none; color: var(--dim); font-size: 13px; padding: 8px 2px 2px; cursor: pointer; text-align: left; }
.gear-lifts { margin-top: 10px !important; }
.gear-item .chip[aria-pressed="false"] { box-shadow: none; background: #0b0b0b; }
.ghost-chip { background: none !important; box-shadow: none !important; border-style: dashed !important; }
.gear-ideas { margin-top: 14px; }
.gear-ideas .chip { font-size: 14px; padding: 6px 12px; }

/* Plan: rest and reps */
.rest-set { flex-wrap: wrap; align-items: flex-start; }
.rest-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rep-ctl { display: inline-flex; align-items: center; gap: 6px; }
.rep-ctl i { font-style: normal; color: var(--dim); font-size: 13px; }
.rest-set .stepper { gap: 6px; }
.rest-set .stepper .chip { padding: 4px 11px; }
.rest-set .stepper b { min-width: 32px; font-size: 20px; }

/* Progress: vs last time */
.metric-note { margin-top: 2px; }
.vs { margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: #121212; border: 1px solid var(--line); }
.vs-head { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: var(--dim); text-transform: uppercase; margin-bottom: 6px; }
.vs-row { display: grid; grid-template-columns: 18px minmax(0,0.9fr) minmax(0,1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.vs-row:nth-child(2) { border-top: none; }
.vs-n { color: var(--faint); font-family: var(--display); }
.vs-set { color: var(--signal); font-family: var(--display); font-weight: 600; font-size: 18px; }
.vs-was { color: var(--faint); font-size: 13px; }
.vs-d { font-size: 13px; color: var(--dim); text-align: right; white-space: nowrap; }
.vs-d.up { color: var(--signal); font-weight: 600; }
.vs-d.down { color: var(--faint); }
.vs-new { font-size: 13px; color: var(--faint); }

/* add-exercise sheet: top of the screen, sized to what the keyboard leaves */
.sheet { top: calc(var(--vvt, 0px) + env(safe-area-inset-top, 0px) + 10px); bottom: auto; max-height: calc(var(--vvh, 100vh) - env(safe-area-inset-top, 0px) - 20px);
  left: 8px; right: 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); padding: 14px 14px 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.8); }
.sheet .list { flex: 1 1 auto; }
.sheet .custom { margin-top: 10px; padding-bottom: 6px; }
.sheet .custom .grp { grid-column: 1 / -1; }
#libSearch { font-size: 20px; padding: 12px 14px; border-radius: 12px; }

@media (max-width: 370px) {
  .set.with-rest { grid-template-columns: 16px minmax(0,1fr) 8px minmax(0,1fr) minmax(38px,0.6fr) 34px; gap: 5px; }
  .rest-btn { width: 34px; height: 34px; }
  .goal-grid .option b { font-size: 20px; }
}
.rest-btn svg { width: 18px; height: 18px; margin: 0; }
.rest-ctl .lab { color: var(--dim); font-size: 12px; margin-right: 4px; }
.rest-ctl > span { display: inline-flex; align-items: center; gap: 6px; }
.ex-state.warn { border: 1px dashed #FFFFFF; color: var(--signal); font-size: 18px; }
.ex.flagged:not(.open) { border-color: rgba(255,255,255,0.35); }
.ex-sub .ex-best { background: none; box-shadow: none; padding: 0; border-radius: 0; color: var(--text); font-weight: 500; font-size: inherit; white-space: nowrap; }

/* ---------- v28 chrome (1 Nov 2026, his reference pictures) ----------
   Polished-metal rims around deep, glossy black surfaces, like his chrome
   speech-bubble icon; bright metal only for what is "on". Drawn in CSS
   (gradients), no images copied. Still black, grey and white only. */
:root {
  --chrome: linear-gradient(135deg, #ffffff 0%, #9a9a9a 14%, #2c2c2c 32%, #d9d9d9 50%, #3a3a3a 66%, #a8a8a8 84%, #f4f4f4 100%);
  --chrome-soft: linear-gradient(135deg, #8f8f8f 0%, #3d3d3d 22%, #161616 45%, #6e6e6e 62%, #262626 80%, #9c9c9c 100%);
  --chrome-bar: linear-gradient(180deg, #ffffff 0%, #e6e6e6 16%, #8e8e8e 47%, #5a5a5a 50%, #cfcfcf 74%, #ffffff 100%);
  --gloss: radial-gradient(140% 90% at 22% -10%, #3a3a3a 0%, #151515 38%, #070707 72%, #000 100%);
  --gloss-open: radial-gradient(130% 80% at 20% -15%, #4a4a4a 0%, #1b1b1b 35%, #080808 70%, #000 100%);
  /* v29 colors: the glow and title metal follow the theme (app.js sets them; these are Chrome's) */
  --glow: 255,255,255;
  --title-grad: linear-gradient(180deg, #ffffff 0%, #f0f0f0 40%, #9b9b9b 62%, #e2e2e2 100%);
}
#app {
  background:
    radial-gradient(60% 28% at 88% 4%, rgba(var(--glow),0.10) 0%, rgba(var(--glow),0) 70%),
    radial-gradient(90% 40% at -10% 22%, rgba(var(--glow),0.06) 0%, rgba(var(--glow),0) 70%),
    radial-gradient(120% 50% at 50% -10%, #1e1e1e 0%, #000 60%), #000;
}
html, body { background: #000; }

/* chrome rims: a metal gradient shows only through a transparent 1px border */
.ex, .plan-day, .gear-item, .vs, .hist, .fold-btn, .goal, .option, .more, .sugg, .restbar:not(.over), .sheet, .check {
  border: 1px solid transparent !important;
  background: var(--gloss) padding-box, var(--chrome-soft) border-box !important;
}
.ex.open, .plan-day.open, .gear-item.open, .sheet, .restbar:not(.over) {
  background: var(--gloss-open) padding-box, var(--chrome) border-box !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.9), 0 18px 40px -16px rgba(0,0,0,1), 0 0 26px -10px rgba(var(--glow),0.18) !important;
}
.ex { position: relative; }
.ex.open::before, .sheet::before {   /* the specular glint on the rim, top left */
  content: ''; position: absolute; top: -3px; left: 22px; width: 54px; height: 6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0));
}
.ex.complete:not(.open) { background: linear-gradient(#050505, #050505) padding-box, var(--chrome-soft) border-box !important; opacity: 0.86; }
.option[aria-pressed="true"] { background: var(--gloss-open) padding-box, var(--chrome) border-box !important; box-shadow: 0 0 22px -8px rgba(var(--glow),0.35) !important; }
.sugg { border-style: solid !important; }

/* buttons: dark glossy pills with a metal edge; "on" and primary are polished metal */
button.act, .chip, .day, .metrics button, .rest-btn, .x, .handle:not(.ex .handle):not(.ex-line .handle):not(.pd-row .handle) {
  border: 1px solid transparent !important;
  background: linear-gradient(180deg, #202020 0%, #0c0c0c 55%, #050505 100%) padding-box, var(--chrome-soft) border-box !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 14px -8px rgba(0,0,0,0.9) !important;
}
button.act.ghost { background: linear-gradient(#000, #000) padding-box, var(--chrome-soft) border-box !important; }
button.act.primary, .chip[aria-pressed="true"], .day[aria-pressed="true"], .metrics button[aria-pressed="true"], .rest-btn[aria-pressed="true"],
.more-btn[aria-expanded="true"], .tag.on, .ex-state.on, .toast, .restbar.over {
  background: var(--chrome-bar) padding-box, linear-gradient(180deg, #fff, #8a8a8a) border-box !important;
  color: #0a0a0a !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -3px 6px -2px rgba(0,0,0,0.35) inset, 0 8px 18px -8px rgba(0,0,0,0.9), 0 0 18px -6px rgba(var(--glow),0.35) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.toast button { background: #050505 !important; text-shadow: none; }

/* text: chrome titles */
.day-title, .ex.open .ex-name, .pd-name, h2 {
  background: var(--title-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ex-name { color: #e8e8e8; }

/* inputs: recessed black wells */
input[type="text"], input[type="search"], input[type="date"], select, textarea {
  background: #000 !important; border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.9) inset, 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* the set he is on: big boxes with a polished rim */
.set.current { padding: 10px 8px; margin: 2px -8px 10px; border-radius: 16px; border: 1px solid transparent;
  background: linear-gradient(180deg, #161616, #050505) padding-box, var(--chrome) border-box; }
.set.current input[type="text"] { font-size: 24px; padding: 14px 8px; }
.set.current .set-n { color: var(--signal); }
.set-line { display: grid; grid-template-columns: 18px minmax(0,1fr) auto 26px; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 9px 4px; margin: 0; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; }
.set-line:last-child { border-bottom: none; }
.sl-n { font-family: var(--display); color: var(--faint); text-align: center; }
.sl-v { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--signal); }
.set-line.later .sl-v { color: var(--faint); font-weight: 500; font-size: 16px; }
.sl-was { color: var(--faint); font-size: 13px; white-space: nowrap; }
.sl-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #0a0a0a; }
.set-line.done .sl-mark { background: var(--chrome-bar); }
.sl-mark svg { width: 13px; height: 13px; margin: 0; }

/* progress line and the folded-lift state bead */
.day-progress { height: 4px; background: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.9) inset; }
.day-progress i { background: var(--chrome-bar); box-shadow: 0 0 10px rgba(var(--glow),0.4); }
.ex-state { border: 1px solid transparent; background: linear-gradient(#050505, #050505) padding-box, var(--chrome-soft) border-box; }

/* docks: smoked glass with a thin metal line on top */
.bar-dock, .dock { background: rgba(0,0,0,0.88); border-top: none; box-shadow: 0 -1px 0 rgba(255,255,255,0.14), 0 -14px 30px rgba(0,0,0,0.8); }
.tabbar button[aria-selected="true"] { color: #fff; }
.tabbar button[aria-selected="true"] svg { filter: drop-shadow(0 0 8px rgba(var(--glow),0.55)); }
.banner { border: 1px solid transparent !important; border-left-width: 1px !important; background: var(--gloss) padding-box, var(--chrome-soft) border-box !important; }
/* v28: the suggestion is only a faint number in the boxes (no box of its own) */
.set input.ph-sugg::placeholder { color: rgba(255,255,255,0.26); opacity: 1; font-weight: 500; }
.set input::placeholder { color: rgba(255,255,255,0.18); opacity: 1; }
/* the picked choice in setup and Plan: brighter rim, glow, and a chrome check */
.option { position: relative; }
.option[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(var(--glow),0.55), 0 0 26px -6px rgba(var(--glow),0.45) !important; }
.option[aria-pressed="true"]::after {
  content: '✓'; position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #0a0a0a;
  background: var(--chrome-bar); box-shadow: 0 0 10px rgba(var(--glow),0.45);
}
/* plan days: drag handle beside the folded day (v28, 2 Nov) */
.pd-row { display: flex; align-items: center; }
.pd-row .handle { flex: none; width: 34px; height: 44px; margin-left: 8px; border: none !important; background: none !important; box-shadow: none !important; color: var(--faint); }
.pd-row .plan-head { flex: 1; min-width: 0; padding-left: 6px; }
.plan-day.dragging { outline: 1px solid #fff; box-shadow: 0 16px 30px -10px rgba(0,0,0,0.95), 0 0 24px -6px rgba(255,255,255,0.4) !important; position: relative; z-index: 5; }
.pd-hint { margin-top: 0; }
.pd-hint .chip { margin-left: 6px; padding: 4px 10px; font-size: 14px; }

/* ---------- v29 (4 Nov 2026): notes, left and right, grips, quick workout, colors ---------- */
:root:not([data-theme="chrome"]) h1 { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; }
.chip.tiny { padding: 3px 10px !important; font-size: 13px !important; }
/* the side and grip above a set's boxes */
.set-tag { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px 2px; font-family: var(--display); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.set-tag b { font-weight: 700; color: var(--text); }
.set-tag.current b { color: var(--signal); }
.set-tag .chip { text-transform: none; letter-spacing: 0; }
.set-n small { display: block; font-size: 11px; line-height: 1; color: var(--dim); margin-top: 1px; }
.sl-lab { display: inline-block; margin-left: 8px; font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--dim); letter-spacing: 0.02em; }
.more-note { flex-basis: 100%; color: var(--faint); font-size: 12px; line-height: 1.4; margin: 2px 0 0; }
.style-new { display: flex; gap: 8px; flex-basis: 100%; align-items: center; }
.style-new input { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 15px; }
/* notes */
.ex-note { display: block; margin: 10px 12px 12px; }
.ex-note span { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.ex-note textarea { width: 100%; min-height: 54px; font-family: var(--body); font-size: 15px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; color: var(--text); resize: vertical; }
.ed-ex .ex-note { margin: 10px 0 2px; }
.ex-lastnote { margin: 0 14px 8px 50px; font-size: 13px; color: var(--text); }
.ex-lastnote b, .hist-note b { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-right: 6px; }
.hist-note { margin-top: 6px; font-size: 13px; color: var(--text); }
.notes-card .hist-note:first-child { margin-top: 0; }
/* Edit: the side and grip of each set */
.ed-tags { display: flex; gap: 6px; margin: 6px 0 3px 24px; }
.ed-more { margin: 4px 0 10px; }
/* Plan: a lift's own settings */
.ex-line { grid-template-columns: auto minmax(0,1fr) auto auto auto; }
.ex-line .more-btn { width: 32px; height: 32px; }
.ex-label small { display: block; font-size: 12px; color: var(--dim); margin-top: 1px; }
.ex-line .plan-more { grid-column: 1 / -1; margin: 4px 0 6px; }
/* Progress: one side or one grip at a time */
.lab-chips { margin-top: 10px; }
.lab-chips .chip { font-size: 14px; padding: 5px 12px; }
/* quick workout */
.quick { margin: 12px 0; padding: 14px; border-radius: var(--radius); border: 1px solid transparent; background: var(--gloss) padding-box, var(--chrome-soft) border-box; }
.quick h3 { font-size: 20px; }
.quick .chips { margin-top: 10px; }
.quick-chips .chip { font-size: 16px; padding: 8px 14px; }
.day-focus .chip { margin-left: 8px; vertical-align: 1px; }
/* colors */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 14px; cursor: pointer; color: var(--text);
  border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, #161616, #050505); font-family: var(--display); font-weight: 600; font-size: 15px; }
.swatch i { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 2px #000, 0 6px 14px -6px rgba(0,0,0,0.9); }
.swatch[aria-pressed="true"] { border-color: rgba(var(--glow),0.7); box-shadow: 0 0 18px -6px rgba(var(--glow),0.6); color: var(--signal); }
.swatch[aria-pressed="true"] i { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 2px #000, 0 0 0 4px rgba(var(--glow),0.9); }

/* ---------- v31 (5 Nov 2026, his ask): simpler and calmer ----------
   "make it as simple and aesthetic as possible ... right now it's
   overcrowding the screen". Less text and fewer big buttons on screen, the
   same features. And on the white (polished) buttons the dark band ran
   through the middle; now the metal darkens at the top and bottom edges and
   the middle is clean white. */
:root {
  --chrome-bar: linear-gradient(180deg, #9a9a9a 0%, #e4e4e4 13%, #ffffff 28%, #ffffff 68%, #e6e6e6 86%, #8a8a8a 100%);
}
button.act.primary, .chip[aria-pressed="true"], .day[aria-pressed="true"], .metrics button[aria-pressed="true"], .rest-btn[aria-pressed="true"],
.more-btn[aria-expanded="true"], .tag.on, .ex-state.on, .toast, .restbar.over {
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 18px -8px rgba(0,0,0,0.9), 0 0 18px -6px rgba(var(--glow),0.35) !important;
  text-shadow: none;
}

/* header: one quiet line on every tab */
.app-top { margin-bottom: 18px; align-items: center; }
.app-top h1 { font-size: 24px; margin-bottom: 1px; letter-spacing: 0.01em; }
.app-top .sub { font-size: 13px; }
.app-top .chip { margin-top: 0; }

/* the day buttons only on Log and Progress; the timer bar moves down when they are gone */
.dock-days[hidden] { display: none !important; }
body.no-days .restbar { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
body.no-days .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
body.no-days.resting .toast { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
body.resting #app:not(.with-days) { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }

/* Log: the day */
.day-title { font-size: 34px; }
.day-focus { margin: 2px 0 6px; font-size: 14px; }
.gear-line { font-size: 13px; color: var(--dim); margin-bottom: 12px; }
.gear-line b { font-family: var(--display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; color: var(--faint); }
.day-progress { margin-bottom: 14px; }

/* Log: inside a lift */
.sl-last { font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--faint); }
.set-tools { margin: 6px 12px 12px; gap: 6px; }
.set-tools .act.small { padding: 5px 12px; font-size: 14px; color: var(--dim); background: none !important; box-shadow: none !important; border: 1px solid rgba(255,255,255,0.10) !important; }

/* Log: the end of the workout */
.add-ex { border-style: dashed !important; background: none !important; box-shadow: none !important; border: 1px dashed rgba(255,255,255,0.22) !important; color: var(--text) !important; }
.link-row { display: flex; justify-content: center; margin: 2px 0 4px; }
.link { background: none; border: none; cursor: pointer; color: var(--dim); font-family: var(--body); font-size: 14px; padding: 8px 10px; min-height: 40px;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.18); text-underline-offset: 4px; }
.link.armed { color: var(--signal); text-decoration-color: var(--signal); }
@media (hover: hover) { .link:hover { color: var(--text); } }
.finish-row { margin-top: 14px; }
#noteLine:empty { min-height: 0; margin: 0; }

/* History: backup as one row */
.backup-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 16px; margin-bottom: 8px;
  border: 1px solid transparent; background: var(--gloss) padding-box, var(--chrome-soft) border-box; }
.backup-row.due { background: var(--gloss-open) padding-box, var(--chrome) border-box; }
.br-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.br-text b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--signal); }
.br-text small { color: var(--dim); font-size: 12px; }
.backup-row .act.small { flex: none; padding: 7px 16px; font-size: 16px; }
.backup-row .more-btn { flex: none; width: 38px; height: 38px; }
.tools { margin-top: 8px; }
.tools h2 { font-size: 20px; margin-top: 18px; }
.h-count { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--faint); -webkit-text-fill-color: var(--faint); margin-left: 6px; vertical-align: 3px; }

/* History: workout cards, each lift on its own line; cards fold */
.hist { padding: 14px 14px 12px; margin-bottom: 10px; }
.hist-top { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; }
button.hist-top { background: none; border: none; padding: 0; cursor: pointer; color: inherit; }
.hist-day { font-size: 19px; flex: 1 1 auto; min-width: 0; color: var(--signal); }
.hist-date { font-size: 13px; }
.hist-top svg { width: 16px; height: 16px; margin: 0; flex: none; color: var(--faint); align-self: center; transition: transform .2s ease; }
.hist-body { margin-top: 8px; color: inherit; }
.hl { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 10px; padding: 3px 0; font-size: 13px; line-height: 1.4; border-top: 1px solid rgba(255,255,255,0.05); }
.hl:first-child { border-top: none; }
.hl-n { color: var(--dim); overflow-wrap: anywhere; }
.hl-s { color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; font-style: normal; }
.hist.fold:not(.open) { padding-bottom: 10px; }
.hist-changes, .hist-note { font-size: 12px; }
.hist-actions { margin-top: 12px; }
.hist-actions .chip { font-size: 14px; padding: 5px 12px; }

/* the workout overview: small labels instead of big pills */
.hist .ov { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.hist:not(.ov-solo) .ov-head { display: none; }
.ov-rows { gap: 8px; }
.ov-row { grid-template-columns: 62px 1fr; gap: 10px; font-size: 13px; line-height: 1.45; }
.ov-lab { font-size: 11px !important; letter-spacing: 0.08em; padding: 1px 0 !important; border: none !important; background: none !important; box-shadow: none !important; text-align: left !important; }
.ov-positive .ov-lab { color: var(--signal) !important; }
.ov-focus .ov-lab { color: var(--faint) !important; }
.ov-goal .ov-lab { color: var(--signal) !important; }
.ov-goal span:last-child { color: var(--signal); }

/* Progress: the lifts in one sideways row, a shorter page */
.ex-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 12px; padding: 2px 16px 6px; }
.ex-chips::-webkit-scrollbar { display: none; }
.ex-chips .chip { flex: none; font-size: 15px; padding: 7px 12px; }
.metric-note { font-size: 12px; }
.hist-sum { margin-top: 3px; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.hist.fold:not(.open) .hist-top { padding-bottom: 0; }

/* v32 (his ask, 5 Nov): History is gone; the Calendar shows the picked day's
   workout. The overview is the big, eye-catching part; the sets and weights
   fold into one smaller line underneath. */
.cal-card { padding: 16px 16px 14px; }
.cal-card .hist-day { font-size: 21px; }
.cal-card .ov { margin-top: 12px; padding-top: 0; border-top: none; }
.cal-card .ov-head { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.cal-card .ov-rows { gap: 11px; }
.cal-card .ov-row { grid-template-columns: 72px 1fr; font-size: 16px; line-height: 1.45; }
.cal-card .ov-lab { font-size: 12px !important; padding-top: 3px !important; }
.sets-fold { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 10px 0 2px; background: none; border: none;
  border-top: 1px solid rgba(255,255,255,0.08); color: var(--dim); font: inherit; text-align: left; cursor: pointer; }
.sets-fold > span { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--text); }
.sets-fold small { display: block; font-weight: 400; font-size: 12px; color: var(--faint); margin-top: 1px; }
.sets-fold svg { width: 16px; height: 16px; flex: none; color: var(--faint); transition: transform .2s ease; }
.sets-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.sets-body .hist-body { margin-top: 6px; }
.sets-body .hl { font-size: 12px; padding: 2px 0; }
.sets-body .hist-changes { font-size: 12px; }
.cal-detail { margin-top: 14px; }
.cal-detail .note { margin-top: 0; }

/* v33: Muscles has two choices, Frequency and Strength; on Strength a muscle
   that got weaker is red */
.str-down { color: #E0675C; font-weight: 600; }
td.down { color: #E0675C; }
.bar.neg { background: linear-gradient(90deg, #5A2420, #C0352C); }
/* v35: one short caption under the muscle map */
.m-cap { text-align: center; margin: 4px 8px 6px; font-size: 13px; line-height: 1.4; }
/* v36: split picking: days a week first, then a short list */
.day-count { margin-top: 16px; gap: 8px; }
.day-count .chip { flex: 1 1 0; font-size: 16px; padding: 10px 0; text-align: center; }
.own-link { display: block; margin: 18px auto 0; }
/* v36: what the plan was shaped by (plan step of setup) */
.find.tailored { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.find.tailored b { font-family: var(--display); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.find.tailored span { font-size: 14px; color: var(--text); }