/* Gym dashboard — dark, dense, chart-forward. */

:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1b222c;
  --border: #2d333c;
  --text: #e6e8eb;
  --muted: #9aa4b2;
  --accent: #f2b632;
  --green: #3fb950;
  --red: #ff6b6b;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --silver: #d6dde6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }

/* header */
header {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 22px 0 6px;
}
@media (max-width: 640px) { header .range { display: none; } }
header h1 { font-size: 1.45rem; margin: 0; letter-spacing: .01em; align-self: center; }
header h1 a { color: inherit; text-decoration: none; }
/* The bot + wordmark lockup. The Worker swaps the bot's mood in per page
   load (moodHeader in src/index.ts); the demo keeps the focused default. */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.mark { flex: none; }
header .range { color: var(--muted); font-size: .9rem; }

/* The account menu, top right: profile, programmes, settings, your data,
   privacy and sign out — the places you visit now and then, kept out of the
   tab bar you use every session. A <details>; header.js draws its links and
   closes it on an outside tap. The Worker swaps the glyph for the lifter's
   initial. */
.me { position: relative; margin-left: auto; align-self: center; }
.me > summary { list-style: none; cursor: pointer; border-radius: 50%; }
.me > summary::-webkit-details-marker { display: none; }
.me-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  font-weight: 700; font-size: .95rem; line-height: 1;
}
.me > summary:hover .me-avatar, .me[open] .me-avatar { color: var(--text); border-color: var(--muted); }
/* On a page that lives in the menu, the avatar is the "you are here". */
.me.active .me-avatar { border-color: var(--accent); color: var(--accent); }
.me > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.me-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 35;
  min-width: 200px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.me-who {
  display: flex; flex-direction: column; padding: .4rem .7rem .6rem;
  margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.me-who[hidden] { display: none; }
.me-name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-handle { color: var(--muted); font-size: .8rem; }
.me-menu a, .me-menu button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem;
  color: var(--text); text-decoration: none; background: none; border: 0;
  border-radius: 8px; padding: .5rem .7rem; cursor: pointer;
}
.me-menu a:hover, .me-menu button:hover { background: var(--panel-2); }
.me-menu a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.me-group + .me-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.me-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--border); }
.me-menu button { color: var(--muted); }
.me-menu button:hover { color: var(--text); }

h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin: 34px 0 12px; font-weight: 600;
}
h2 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }

/* hero stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
}
.stat .v { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: .9rem; color: var(--muted); font-weight: 500; }
.stat .k { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.stat .fun { color: var(--accent); font-size: .75rem; margin-top: 4px; }
.stat .v.up { color: var(--green); }
.stat .v.down { color: var(--red); }
.stats .win {
  grid-column: 1 / -1; color: var(--muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
}

/* panels */
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }

/* heatmap */
.heatmap { overflow-x: auto; padding-bottom: 4px; }
.hm-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 13px); gap: 3px; width: max-content; }
.hm-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--panel-2); }
.hm-cell.v1 { background: #4a3a10; }
.hm-cell.v2 { background: #8a6a1a; }
.hm-cell.v3 { background: #c99a24; }
.hm-cell.v4 { background: #f2b632; }
.hm-cell.future { background: transparent; }
.hm-months { display: grid; grid-auto-flow: column; width: max-content; gap: 3px; margin-bottom: 4px; }
.hm-months span { width: 13px; font-size: .65rem; color: var(--muted); overflow: visible; white-space: nowrap; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--muted); font-size: .72rem; }
.hm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* tooltip */
#tip {
  position: fixed; pointer-events: none; z-index: 10; display: none;
  background: #000c; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: .8rem; backdrop-filter: blur(4px); max-width: 260px;
}
#tip b { color: var(--accent); }

/* podium cards */
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pod-card h3 { margin: 0 0 10px; font-size: .95rem; }
.pod-card .row {
  display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--border);
}
.pod-card .row:first-of-type { border-top: 0; }
.pod-card .medal { width: 1.4em; }
.pod-card .name { font-weight: 600; }
.pod-card .why { margin-left: auto; color: var(--muted); font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.pod-card .why b { font-size: .95rem; }
.up { color: var(--green); }
.down { color: var(--red); }
.gold { color: var(--accent); }

/* overload section */
.overload { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .overload { grid-template-columns: 1fr; } }
.ring-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.ring-panel .sub { color: var(--muted); font-size: .8rem; max-width: 200px; }
.bars .bar-row { display: grid; grid-template-columns: 170px 1fr 52px; gap: 10px; align-items: center; padding: 3px 0; font-size: .85rem; }
.bars .track { background: var(--panel-2); border-radius: 6px; height: 12px; overflow: hidden; }
.bars .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8a6a1a, var(--accent)); }
.bars .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.bars .bar-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On a phone the 170px name column leaves the bar too short to read as a
   quantity; names truncate gracefully, bars don't. */
@media (max-width: 600px) { .bars .bar-row { grid-template-columns: 120px 1fr 44px; } }

/* PR feed */
.prs { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.pr {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px;
}
.pr .d { color: var(--muted); font-size: .75rem; }
.pr .n { font-weight: 600; margin: 2px 0; }
.pr .v { font-variant-numeric: tabular-nums; font-size: .9rem; }

/* explorer */
.explorer-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .7rem; font-size: .95rem; min-width: 230px;
}
.chip {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: .28rem .8rem; cursor: pointer; font-size: .82rem;
}
.chip:hover { color: var(--text); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #161b22; font-weight: 600; }

/* overlay picker: selected lifts as removable pills + an add dropdown */
.overlay-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.pick {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .24rem .7rem; cursor: pointer; font-size: .8rem;
}
.pick:hover { border-color: var(--red); color: var(--red); }
.overlay-picker select { min-width: 0; padding: .24rem .5rem; font-size: .8rem; border-radius: 999px; }

/* small toggle inside a panel caption (e.g. the explorer's projected-1RM line) */
.cap-toggle {
  float: right; display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: .78rem; cursor: pointer; user-select: none;
}
.cap-toggle input { accent-color: var(--accent); margin: 0; }

.ex-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ex-stats .stat .v { font-size: 1.25rem; }

.charts { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
@media (max-width: 860px) { .charts { grid-template-columns: 1fr; } }
.chart-box { position: relative; height: 300px; }
.chart-box.short { height: 220px; }
.panel .cap { color: var(--muted); font-size: .78rem; margin: 0 0 8px; }

/* session log table */
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); }
td { padding: 6px 8px; border-bottom: 1px solid var(--panel-2); font-variant-numeric: tabular-nums; }
td.sets-cell { color: var(--muted); }
td .arrow { font-weight: 700; }

/* sparkline wall */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.spark {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; transition: border-color .12s;
}
.spark:hover { border-color: var(--accent); }
.spark .n { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark .meta { color: var(--muted); font-size: .72rem; margin-bottom: 4px; }
.spark svg { display: block; width: 100%; height: 40px; }

footer { margin-top: 46px; color: var(--muted); font-size: .78rem; text-align: center; }

/* muscle heatmap */
.muscle-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.muscle-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; }
.ml-grad {
  width: 90px; height: 10px; border-radius: 5px; display: inline-block;
  background: linear-gradient(90deg, #232b36, #4f3d12, #8a6a1a, #c99a24, #f2b632, #ffd75e);
}
.bodies { display: flex; justify-content: center; gap: 4vw; }
.body-fig { margin: 0; text-align: center; }
.bodies svg.body { width: min(240px, 40vw); height: auto; }
.body .sil polygon { fill: #1a212b; }
.body .muscle polygon { fill: #232b36; transition: fill .35s; }
.body .muscle { cursor: pointer; }
.body .muscle:hover polygon { stroke: #e6e8eb; stroke-width: .5; }
.body-label { color: var(--muted); font-size: .72rem; letter-spacing: .25em; margin-top: 8px; }

/* active program panel */
.plan-sched { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.plan-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Multi-week cycles: one aligned 7-column row per week, never wrapping —
   the whole schedule scrolls sideways on narrow screens instead. */
.plan-row.wk-row {
  display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr));
  gap: 8px; min-width: 640px;
}
.plan-row.wk-row .plan-day { min-width: 0; padding: 8px 6px; }
.plan-row.wk-row .plan-day .pg,
.plan-row.wk-row .plan-day .wd,
.plan-row.wk-row .plan-day .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-wk {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}
.plan-day {
  flex: 1; min-width: 92px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.plan-day.today { border-color: var(--accent); }
.plan-day .wd { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.plan-day .pg { font-weight: 600; margin: .18rem 0; font-size: .9rem; }
.plan-day .n { color: var(--muted); font-size: .72rem; }

/* last 7 days: what was actually trained (pace lives in the panel title) */
.week-row { display: flex; gap: 8px; flex-wrap: wrap; }
.week-day {
  flex: 1; min-width: 104px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.week-day.today { border-style: dashed; }
.week-day.hit { border-color: var(--green); }
.week-day .wd { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.week-day .did { font-weight: 600; font-size: .85rem; }
.week-day .did.none { color: var(--muted); font-weight: 400; }
.week-day .n { color: var(--muted); font-size: .72rem; }

/* active programme: the cycle strip (day order, next up highlighted) */
.cycle-strip { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cycle-arrow { align-self: center; color: var(--muted); }
.cycle-chip {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  min-width: 108px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
}
.cycle-chip.next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; padding-top: 16px; }
.cycle-chip .badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.cycle-chip .cc-name { font-weight: 600; font-size: .9rem; }
.cycle-chip .cc-meta { color: var(--muted); font-size: .72rem; }

/* header nav: segmented log ⇄ dashboard ⇄ marketplace tabs, same pill
   treatment as the nerd/bro toggle so "which subpage am I on" always reads
   the same way */
.tabs {
  display: flex; align-self: center; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.tab {
  color: var(--muted); text-decoration: none;
  padding: .38rem .9rem; font-size: .85rem; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--accent); color: #161b22; font-weight: 700;
  pointer-events: none; /* the current page is a state, not a link */
}
/* The bell, beside the account menu on every app page: follow requests are
   a number, anything else new since you last looked is a dot (header.ts
   draws either as the page streams out; activity-kit.js paintBell keeps it
   true after a tap). */
header .bell { margin-left: auto; align-self: center; width: 40px; height: 40px; color: var(--muted); }
header .bell:hover { color: var(--text); background: var(--panel); }
header .bell + .me { margin-left: -6px; }
.bell-dot {
  position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--bg);
}
/* The tab bar is a fixed-width pill, which stopped fitting on a phone once
   the marketplace made five tabs. Programmes and settings have since moved
   into the account menu, but brand + tabs + avatar still overflow a phone's
   width, so below 760px the tabs take a row of their own (and scroll rather
   than clip if they ever outgrow it — clipped navigation reads as missing
   navigation). */
@media (max-width: 760px) {
  header { gap: 10px; }
  .tabs {
    order: 3; width: 100%; align-self: stretch; flex-shrink: 1;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: .38rem .75rem; }
  header .bell, .me { order: 2; }
}

/* demo chip: pinned in the header so it's obvious on every demo subpage,
   even after the banner has scrolled away */
.demo-chip {
  align-self: center; color: var(--accent);
  background: rgba(242, 182, 50, .12); border: 1px solid rgba(242, 182, 50, .45);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; border-radius: 6px; padding: .14rem .5rem;
}

/* programme deep dive (read-only; programmes are edited in chat) */
.plans-list { display: grid; gap: 12px; }
.plan-card {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; color: inherit; text-decoration: none;
  transition: border-color .12s;
}
.plan-card:hover { border-color: var(--accent); }
.pc-head { display: flex; align-items: baseline; gap: 10px; }
.pc-name { font-size: 1.05rem; font-weight: 700; }
.pc-desc { color: var(--muted); font-size: .88rem; margin: 6px 0 0; }
.pc-meta { color: var(--muted); font-size: .78rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
.badge {
  background: var(--accent); color: #161b22; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; border-radius: 6px; padding: .12rem .5rem;
}
.back { display: inline-block; color: var(--muted); font-size: .85rem; text-decoration: none; margin-top: 20px; }
.back:hover { color: var(--text); }
.detail-head { margin-top: 10px; }
.detail-name { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.detail-desc { color: var(--muted); font-size: .92rem; margin: 10px 0 0; max-width: 62ch; }
.day-panel { display: flex; flex-direction: column; gap: 4px; }
.px { padding: 10px 2px; border-top: 1px solid var(--panel-2); }
.px:first-child { border-top: 0; }
.px-head { display: flex; align-items: baseline; gap: 10px; }
.px-no { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; width: 1.3em; }
.px-name { font-weight: 600; }
.px-target {
  margin-left: auto; font-variant-numeric: tabular-nums; color: var(--accent);
  font-weight: 600; white-space: nowrap;
}
.px-extra { color: var(--muted); font-size: .82rem; margin: 4px 0 0 calc(1.3em + 10px); max-width: 68ch; }
.px-extra i {
  font-style: normal; color: var(--muted); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; margin-right: 8px; opacity: .8;
}
.ro-note { text-align: center; margin-top: 30px; }

/* demo mode (/demo — public, sample data) */
.demo-banner {
  margin-top: 16px;
  background: linear-gradient(90deg, rgba(242, 182, 50, .14), rgba(242, 182, 50, .05));
  border: 1px solid rgba(242, 182, 50, .45);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .92rem;
}
.demo-banner .links { white-space: nowrap; }
.demo-banner a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  border: 1px solid rgba(242, 182, 50, .45); border-radius: 8px;
  padding: .15rem .6rem; margin-left: 8px;
}
.demo-banner a:hover { background: rgba(242, 182, 50, .15); }

/* progress-review nudge — sits above both mode panes, so it must not inherit
   any .bro styling; deliberately quieter than the demo banner (an offer, not
   an alert). */
.review-nudge {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 12px; padding: 12px 14px;
  font-size: .9rem; line-height: 1.45;
}
.review-nudge .rn-icon { font-size: 1.2rem; line-height: 1.2; }
.review-nudge .rn-body { flex: 1; }
.review-nudge .rn-body b { color: var(--text); }
.review-nudge .rn-close { flex: none; padding: 0 2px; font-size: .95rem; }

/* training habits */
.adh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 22px; }
.adh-day { min-width: 0; }
.adh-head {
  font-weight: 600; font-size: .85rem; margin: 8px 0 4px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.adh-head .hint { font-weight: 400; }
/* Adherence bars are a verdict, not a quantity: colour by how bad it is. */
.bars .fill.good { background: linear-gradient(90deg, #2a7a38, var(--green)); }
.bars .fill.mid  { background: linear-gradient(90deg, #8a6a1a, var(--accent)); }
.bars .fill.poor { background: linear-gradient(90deg, #8a2f2f, var(--red)); }
.panel .cap.warn { color: var(--text); }
.panel .cap.warn b { color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip-flat {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: .2rem .55rem; font-size: .82rem; white-space: nowrap;
}
.chip-flat small { color: var(--muted); margin-left: 5px; }

/* past progress reviews (programmes page) */
.review-list { display: grid; gap: 10px; }
.review-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: .9rem; line-height: 1.5;
}
.review-card .rc-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.review-card .rc-date { font-weight: 600; }
.review-card .rc-meta { color: var(--muted); font-size: .8rem; }
.review-card .rc-changed { color: var(--accent); }
.review-card p { margin: 4px 0 0; }
.review-card .rc-label { color: var(--muted); font-size: .78rem; }

/* block progress (finite programs: per-day ledger + week X of Y) */
.block { margin: 2px 0 16px; }
.block.complete {
  border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(242, 182, 50, .08), transparent);
}
.block.complete .cap { margin: 4px 0 0; }
.block.complete .ledger { margin-top: 12px; }
.block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bh-week { font-weight: 700; }
.bh-ext { color: var(--muted); font-size: .78rem; }
.bh-count { margin-left: auto; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.block-track { height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.block-fill {
  height: 100%; border-radius: 6px; min-width: 2px;
  background: linear-gradient(90deg, #8a6a1a, var(--accent));
}
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 10px; }
.ledger-day .ld-top { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; margin-bottom: 3px; }
.ld-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-track { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.ld-fill { height: 100%; border-radius: 4px; background: var(--blue); }
.ledger-day.full .ld-fill { background: var(--green); }
.ledger-day.behind .ld-fill { background: var(--red); }
.ledger-day.behind .ld-count { color: var(--red); }

/* bro mode (🤓/🦍 — same data, only what matters, delivered in gym bro).
   Set account-wide on the settings page; pages just render whichever voice
   the server says. */
body.bro header .range { display: none; }

/* settings — the feedback-voice picker (settings.js) */
.voice-panel .dim { color: var(--muted); font-size: .85rem; margin: .4rem 0; }
.voice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.voice-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; cursor: pointer; color: var(--text);
  font: inherit;
}
.voice-card:hover { border-color: var(--muted); }
.voice-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.vc-emoji { font-size: 1.6rem; }
.vc-name { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.voice-card.active .vc-name { color: var(--accent); }
.vc-desc { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.vc-note { margin-top: 12px; }
@media (max-width: 560px) { .voice-cards { grid-template-columns: 1fr; } }

/* settings — logger customisations (settings.js LOGGER_OPTIONS): one row per
   knob, a segmented choice, and a preview drawn with the logger's own markup */
.logger-panel .dim { color: var(--muted); font-size: .85rem; margin: .4rem 0; }
.lo-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: start;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--panel-2);
}
.lo-text { display: flex; flex-direction: column; gap: 4px; }
.lo-name { font-weight: 600; font-size: .92rem; }
.lo-desc { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.lo-seg {
  display: inline-flex; justify-self: start; border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
}
.lo-seg button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: .85rem;
  font-weight: 600; padding: .45rem .85rem; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
}
.lo-seg button + button { border-left: 1px solid var(--border); }
.lo-seg button.on { background: var(--panel-2); color: var(--accent); }
.lo-seg button:hover:not(.on) { color: var(--text); }
.lo-preview { grid-column: 1 / -1; display: flex; gap: 8px; max-width: 280px; }
.lo-preview .fld { padding-block: .42rem; }
.lo-preview .pv-val {
  font-weight: 400; font-size: .95rem; line-height: 1; min-width: 2ch; text-align: center;
  font-variant-numeric: tabular-nums;
}
.lo-row[hidden], .lo-preview[hidden] { display: none; } /* a follow-up knob while its switch is off */
/* The notifications panel opens straight onto its first knob. */
.notify-panel { margin-bottom: 12px; }
.notify-panel .lo-row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 560px) { .lo-row { grid-template-columns: 1fr; } }

.bro-tag {
  margin: 22px 0 0; color: var(--muted); font-size: .95rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.bro-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; margin-top: 14px;
}
.bro-card {
  background: var(--panel); border: 2px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.bro-card.wide { grid-column: 1 / -1; }
.bro-card .bk {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.bro-card .bv {
  font-family: Impact, "Arial Black", "Franklin Gothic Bold", system-ui, sans-serif;
  font-size: 3rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.bro-card .bv small { font-size: 1.3rem; color: var(--muted); letter-spacing: .05em; }
.bro-card .bv .todo { filter: grayscale(1); opacity: .3; }
.bro-card .bs { color: var(--muted); font-size: .85rem; }
.verdict {
  align-self: flex-start; margin-top: auto; padding: .18rem .6rem;
  border: 2px solid; border-radius: 6px; transform: rotate(-2deg);
  font-weight: 800; letter-spacing: .08em; font-size: .8rem; margin-left: 4px;
}
.verdict.good { color: var(--green); border-color: var(--green); }
.verdict.meh { color: var(--accent); border-color: var(--accent); }
.verdict.bad { color: var(--red); border-color: var(--red); }
.bro-note { text-align: center; color: var(--muted); margin-top: 26px; font-size: .85rem; }

/* session logger (the log tab — tick-to-log workout view) */
/* The freestyle workout button (log.js quickStartHtml): the picker's first and
   biggest action, in the same gold as Finish — no programme needed. */
.quick-start {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; font: inherit; cursor: pointer; touch-action: manipulation;
  background: var(--accent); color: #161b22; border: 0; border-radius: 14px;
  padding: 16px 18px; transition: filter .12s;
}
.quick-start:hover { filter: brightness(1.06); }
.quick-start:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.quick-start:disabled { opacity: .6; cursor: wait; }
.qs-icon {
  flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 50%;
  background: rgba(22, 27, 34, .14);
}
.qs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qs-title { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.qs-sub { font-size: .88rem; font-weight: 500; opacity: .72; }
/* No programme yet: the way to get one, quietly, under the button. */
.no-plan { color: var(--muted); font-size: .88rem; margin: 16px 0 0; max-width: 62ch; }
.no-plan a { color: var(--accent); }
/* The programme's name wraps as a whole, never mid-name. */
.plan-head .hint { display: inline-block; }
.rec-line { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.rec-line.urgent { color: var(--red); font-weight: 600; }
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.day-card {
  position: relative; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s;
}
.day-card:hover { border-color: var(--muted); }
.day-card.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.day-card .badge { position: absolute; top: 12px; right: 12px; }
.day-card .dc-name { font-size: 1.05rem; font-weight: 700; }
.day-card .dc-meta { color: var(--muted); font-size: .8rem; }
.day-card:disabled { opacity: .6; cursor: wait; }
/* "Logged something wrong? Tell GymBot in chat" — log.js FIX_HINT. */
.fix-hint { color: var(--muted); font-size: .8rem; margin: 10px 0 0; }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; font-size: .85rem;
  color: var(--muted); text-decoration: underline; cursor: pointer;
}
.linkish:hover { color: var(--text); }
.linkish.danger:hover { color: var(--red); }

/* Reminders opt-in on the day picker (log.js push section). */
.push-panel { margin-top: 18px; padding: 12px 16px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.push-panel b { color: var(--text); }
.push-panel .linkish { margin-left: 4px; }
/* Settings' notifications section: under a heading, like its neighbours. */
h2 + #pushPanel .push-panel, h2 + #pushPanel .hs-panel { margin-top: 0; }

/* Home screen walkthrough (homescreen-panel.js): a phone drawn in CSS acting
   out ••• → Share → Add to Home Screen → Add → the new icon, beside the
   steps. One clock, --hs-t: every layer, the tap and each step's highlight
   are keyframed on its percentages, so they can't drift apart. The screen
   is 128 × 268 and the tap's translate()s are its targets' centres less 9. */
.hs-panel { --hs-t: 13s; margin-top: 18px; padding: 14px 16px; color: var(--muted); font-size: .88rem; }
.hs-head { display: flex; align-items: center; gap: 8px; }
.hs-head b { color: var(--text); font-size: .95rem; }
.hs-hide {
  margin-left: auto; padding: 2px 6px; background: none; border: 0;
  color: var(--muted); font: inherit; font-size: 1rem; cursor: pointer;
}
.hs-hide:hover { color: var(--text); }
.hs-lead { margin: 4px 0 14px; line-height: 1.45; }
.hs-body { display: flex; align-items: center; gap: 14px; }
@media (max-width: 340px) { .hs-body { flex-direction: column; } }
.hs-steps { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: hs; }
.hs-steps li {
  padding: 3px 0 3px 10px; border-left: 2px solid var(--border);
  font-size: .8rem; line-height: 1.4;
}
.hs-steps li > b { display: block; color: var(--text); font-size: .88rem; }
.hs-steps li:not(.hs-s4) > b::before { counter-increment: hs; content: counter(hs) ". "; color: var(--accent); }
.hs-steps span b { color: var(--text); }
.hs-steps .hs-ico { width: 13px; height: 13px; vertical-align: -2px; }
.hs-steps code { color: var(--text); word-break: break-all; }
.hs-s1 { animation: hs-lit-1 var(--hs-t) infinite; }
.hs-s2 { animation: hs-lit-2 var(--hs-t) infinite; }
.hs-s3 { animation: hs-lit-3 var(--hs-t) infinite; }
.hs-s4 { animation: hs-lit-4 var(--hs-t) infinite; }
@keyframes hs-lit-1 { 0%, 7%, 97%, 100% { opacity: 1; border-left-color: var(--accent); } 8%, 96% { opacity: .45; border-left-color: var(--border); } }
@keyframes hs-lit-2 { 0%, 7%, 28%, 100% { opacity: .45; border-left-color: var(--border); } 8%, 27% { opacity: 1; border-left-color: var(--accent); } }
@keyframes hs-lit-3 { 0%, 27%, 61%, 100% { opacity: .45; border-left-color: var(--border); } 28%, 60% { opacity: 1; border-left-color: var(--accent); } }
@keyframes hs-lit-4 { 0%, 60%, 97%, 100% { opacity: .45; border-left-color: var(--border); } 61%, 96% { opacity: 1; border-left-color: var(--accent); } }
.hs-ico { flex: none; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.hs-phone {
  flex: none; width: 140px; height: 280px; padding: 5px; border-radius: 26px;
  background: #000; border: 1px solid #3a414b; box-shadow: 0 8px 24px #0008;
}
.hs-screen {
  position: relative; width: 128px; height: 268px; border-radius: 21px; overflow: hidden;
  background: var(--bg); color: var(--text); font-size: 7px; line-height: 1.2;
}
.hs-screen i { display: block; }
/* Safari, with GymBot's log tab open and iOS 26's compact bar: ‹, address, •••. */
.hs-safari { position: absolute; inset: 0; padding: 22px 9px 0; }
/* The status bar and Dynamic Island sit over every layer, as on the phone. */
.hs-status { position: absolute; top: 0; left: 0; right: 0; height: 22px; padding: 7px 0 0 14px; font-weight: 600; color: #fff; }
.hs-status::after {
  content: ""; position: absolute; top: 6px; left: 46px; width: 36px; height: 10px;
  border-radius: 6px; background: #000;
}
.hs-brand { display: flex; align-items: center; gap: 4px; margin: 6px 0 9px; font-size: 9px; font-weight: 700; }
.hs-brand img { width: 16px; height: auto; }
.hs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.hs-cards i { height: 34px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); }
.hs-cards i.rec { border-color: var(--accent); }
.hs-line { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--panel-2); }
.hs-line.short { width: 60%; margin-top: 6px; }
.hs-bar { position: absolute; left: 7px; right: 7px; bottom: 9px; height: 24px; display: flex; gap: 5px; }
.hs-btn, .hs-url { background: #262b33; border: 1px solid #ffffff1a; }
.hs-btn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.hs-more { font-size: 6px; letter-spacing: -.5px; }
.hs-url {
  flex: 1; min-width: 0; padding: 0 6px; border-radius: 12px; line-height: 22px;
  font-size: 6.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-row { height: 18px; display: flex; align-items: center; gap: 5px; padding: 0 6px; }
.hs-row i { width: 60%; height: 5px; border-radius: 3px; background: #ffffff24; }
.hs-row.on { font-weight: 600; }
/* ••• opens a menu; Share is in it. */
.hs-menu {
  position: absolute; right: 7px; bottom: 40px; width: 88px; padding: 4px;
  border-radius: 12px; background: #2a2f37; box-shadow: 0 6px 18px #000a;
  transform-origin: 90% 100%; opacity: 0; animation: hs-menu var(--hs-t) infinite;
}
.hs-menu .hs-row { border-radius: 6px; }
.hs-menu .hs-row.on { background: #ffffff14; }
/* The share sheet: the page, people and apps, then a list to scroll. */
.hs-sheet {
  position: absolute; left: 0; right: 0; top: 96px; bottom: 0; padding: 8px;
  border-radius: 14px 14px 0 0; background: #1c2026; box-shadow: 0 -6px 18px #0008;
  transform: translateY(100%); animation: hs-sheet var(--hs-t) infinite;
}
.hs-card { display: flex; align-items: center; gap: 6px; }
.hs-card img { width: 20px; height: 20px; border-radius: 5px; }
.hs-card span { flex: 1; display: grid; gap: 3px; }
.hs-card i { width: 70%; height: 4px; border-radius: 2px; background: #ffffff24; }
.hs-apps { display: flex; justify-content: space-between; margin: 8px 0 6px; padding: 0 6px; }
.hs-apps i { width: 20px; height: 20px; border-radius: 50%; background: #ffffff1c; }
.hs-actions { height: 100px; overflow: hidden; border-radius: 8px; background: #262b33; }
.hs-actions .hs-row { border-bottom: 1px solid #ffffff0d; }
.hs-list { animation: hs-scroll var(--hs-t) infinite; }
/* Add to Home Screen's own sheet: the name, "Open as Web App" on, Add. */
.hs-add {
  position: absolute; left: 0; right: 0; top: 18px; bottom: 0; padding: 8px 9px;
  border-radius: 14px 14px 0 0; background: #1c2026; box-shadow: 0 -6px 18px #0008;
  transform: translateY(100%); animation: hs-add var(--hs-t) infinite;
}
.hs-nav { display: flex; align-items: center; justify-content: space-between; height: 16px; margin-bottom: 10px; }
.hs-nav i { width: 26px; height: 5px; border-radius: 3px; background: #ffffff24; }
.hs-nav b { color: var(--blue); font-size: 8px; }
.hs-add .hs-card, .hs-toggle-row { padding: 6px; border-radius: 8px; background: #262b33; }
.hs-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.hs-toggle-row i { width: 50%; height: 5px; border-radius: 3px; background: #ffffff24; }
.hs-toggle { position: relative; width: 18px; height: 11px; border-radius: 6px; background: var(--green); }
.hs-toggle::after {
  content: ""; position: absolute; top: 1px; right: 1px; width: 9px; height: 9px;
  border-radius: 50%; background: #fff;
}
/* And there it is. */
.hs-home {
  position: absolute; inset: 0; padding: 30px 10px 0; opacity: 0;
  background: linear-gradient(165deg, #23345c 0%, #3a2a5e 55%, #151a24 100%);
  animation: hs-home var(--hs-t) infinite;
}
.hs-grid { display: grid; grid-template-columns: repeat(4, 21px); justify-content: space-between; row-gap: 14px; }
.hs-grid i, .hs-dock i { width: 21px; height: 21px; border-radius: 6px; background: #ffffff2e; }
.hs-grid i:nth-child(3n) { background: #ffffff1c; }
.hs-grid i:nth-child(4n + 1) { background: #ffffff3d; }
.hs-app { position: relative; width: 21px; height: 21px; animation: hs-pop var(--hs-t) infinite; }
.hs-app img { display: block; width: 21px; height: 21px; border-radius: 6px; }
.hs-app small {
  position: absolute; top: 23px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 5.5px; white-space: nowrap;
}
.hs-dock {
  position: absolute; left: 7px; right: 7px; bottom: 7px; height: 33px; border-radius: 12px;
  background: #ffffff1f; display: flex; align-items: center; justify-content: space-around;
}
.hs-tap {
  position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: #ffffff38; box-shadow: 0 0 0 2px #ffffffd9, 0 0 8px #000a; opacity: 0; pointer-events: none;
  animation: hs-tap var(--hs-t) infinite;
}
@keyframes hs-menu {
  0%, 11% { opacity: 0; transform: scale(.5); }
  14%, 24% { opacity: 1; transform: none; }
  27%, 100% { opacity: 0; transform: none; }
}
@keyframes hs-sheet {
  0%, 25%, 95%, 100% { transform: translateY(100%); }
  29%, 65% { transform: none; }
}
@keyframes hs-scroll {
  0%, 33%, 95%, 100% { transform: none; }
  39%, 65% { transform: translateY(-40px); }
}
@keyframes hs-add {
  0%, 48%, 95%, 100% { transform: translateY(100%); }
  51%, 65% { transform: none; }
}
@keyframes hs-home {
  0%, 60%, 98%, 100% { opacity: 0; }
  63%, 93% { opacity: 1; }
}
@keyframes hs-pop {
  0%, 64% { transform: scale(0); }
  67% { transform: scale(1.18); }
  69%, 100% { transform: none; }
}
/* Tap •••, tap Share, swipe the list up, tap Add to Home Screen, tap Add. */
@keyframes hs-tap {
  0%, 8% { opacity: 0; transform: translate(100px, 238px) scale(1.5); }
  10% { opacity: 1; transform: translate(100px, 238px) scale(1); }
  11% { opacity: 1; transform: translate(100px, 238px) scale(.75); }
  13% { opacity: 0; transform: translate(100px, 238px) scale(.75); }
  19% { opacity: 0; transform: translate(66px, 152px) scale(1.5); }
  21% { opacity: 1; transform: translate(66px, 152px) scale(1); }
  22% { opacity: 1; transform: translate(66px, 152px) scale(.75); }
  24% { opacity: 0; transform: translate(66px, 152px) scale(.75); }
  32% { opacity: 0; transform: translate(46px, 222px) scale(1.5); }
  33% { opacity: 1; transform: translate(46px, 222px) scale(1); }
  39% { opacity: 1; transform: translate(46px, 182px) scale(1); }
  41% { opacity: 0; transform: translate(46px, 182px) scale(1); }
  42% { opacity: 0; transform: translate(35px, 228px) scale(1.5); }
  44% { opacity: 1; transform: translate(35px, 228px) scale(1); }
  45% { opacity: 1; transform: translate(35px, 228px) scale(.75); }
  47% { opacity: 0; transform: translate(35px, 228px) scale(.75); }
  54% { opacity: 0; transform: translate(103px, 25px) scale(1.5); }
  56% { opacity: 1; transform: translate(103px, 25px) scale(1); }
  57% { opacity: 1; transform: translate(103px, 25px) scale(.75); }
  59%, 100% { opacity: 0; transform: translate(103px, 25px) scale(.75); }
}
/* Still: the share sheet scrolled to Add to Home Screen, every step lit. */
@media (prefers-reduced-motion: reduce) {
  .hs-steps li, .hs-menu, .hs-sheet, .hs-list, .hs-add, .hs-home, .hs-app, .hs-tap { animation: none; }
  .hs-sheet { transform: none; }
  .hs-list { transform: translateY(-40px); }
}

.sess-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.sess-head h2 { margin: 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.sess-meta { color: var(--muted); font-size: .82rem; }
.sess-head .linkish { margin-left: auto; }

.lx { margin-top: 14px; padding: 14px 16px; }
.lx-head { display: flex; align-items: baseline; gap: 10px; }
.lx-name { font-weight: 700; font-size: 1rem; }
/* Per-exercise kg/lb display toggle (log.js units section). Never shrinks:
   its overflow:hidden zeroes the flex minimum, so a long name used to squeeze
   it until the lb half was cut off. The name wraps instead. */
.unit-toggle {
  flex: none; display: inline-flex; align-self: center; border: 1px solid var(--border);
  border-radius: 7px; overflow: hidden;
}
.ut {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: .68rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .5rem; cursor: pointer; touch-action: manipulation;
}
.ut + .ut { border-left: 1px solid var(--border); }
.ut.on { background: var(--panel-2); color: var(--text); }
.ut:hover:not(.on) { color: var(--text); }
.lx-cue { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.lx-suggest {
  margin-top: 8px; font-size: .85rem; color: var(--accent);
  background: rgba(242, 182, 50, .08); border: 1px solid rgba(242, 182, 50, .3);
  border-radius: 8px; padding: 6px 10px;
}
.lx-last { color: var(--muted); font-size: .8rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
/* The record this card is chasing (log.js cardRecord): gold numbers, because
   gold means PR — the bar is visible before the set, not only after it. */
.lx-pr { color: var(--muted); font-size: .8rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.lx-pr b { color: var(--accent); font-weight: 700; }
.lx-pr .tied { color: var(--silver); }
.lx-pr:not([hidden]) + .lx-last { margin-top: 2px; }
/* The card's target chip is the scheme its history is keyed by — a button. */
.lx .px-target {
  background: none; border: 1px solid transparent; border-radius: 999px; font: inherit;
  font-size: .85rem; font-weight: 600; color: var(--accent); padding: .1rem .55rem;
  cursor: pointer; touch-action: manipulation;
}
.lx .px-target:hover { border-color: var(--border); }
.lx .px-target.none { color: var(--muted); font-weight: 500; border-style: dashed; border-color: var(--border); }
.target-edit { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.target-edit input {
  font: inherit; font-size: .9rem; text-align: center; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .38rem .3rem;
  -moz-appearance: textfield; appearance: textfield;
}
.target-edit input::-webkit-outer-spin-button, .target-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.target-edit input:focus { outline: none; border-color: var(--accent); }
.te-sets { width: 4.2em; }
.te-reps { width: 6.5em; }
.te-x { color: var(--muted); }
.te-ok, .te-cancel {
  font: inherit; font-size: .95rem; font-weight: 700; border-radius: 8px; padding: .3rem .7rem;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer;
  touch-action: manipulation;
}
.te-ok { border-color: var(--green); color: var(--green); }
.te-ok:hover { background: var(--green); color: #0e1116; }
.te-cancel { margin-left: auto; color: var(--muted); }
.te-none, .te-reset { font-size: .8rem; }
.te-hint { color: var(--muted); font-size: .74rem; margin-top: 4px; }
.lx.busy { opacity: .6; pointer-events: none; }
/* Ghosts in the field: the same set from the last two sessions under the
   card's scheme sits inside the box, left of today's number — last time
   nearest, the one before fainter and further left — so the row reads as a
   short run into today. The bordered box is .fld; the input inside it is
   bare, so the ghosts and the value share one field. */
.fld {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .4em;
  overflow: hidden; padding-inline: .2rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  transition: background .15s, border-color .15s, opacity .15s;
}
.fld:focus-within { border-color: var(--accent); }
.fld .gh {
  display: flex; flex: 0 0 auto; gap: .4em; font-size: .95rem; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; color: var(--text);
}
.fld .gh:empty { display: none; }
.fld .gh i { font-style: normal; min-width: 2ch; text-align: center; }
.fld .gh .g0 { opacity: .55; }
.fld .gh .g1 { opacity: .28; }
.fld .gh .gap { color: var(--muted); }
.sr-ctl .fld input, .sr-ctl .fld input:focus {
  flex: 0 0 auto; min-width: 0; border: 0; background: transparent; padding-inline: 0;
}
/* The weight's unit, inside the box after the number. Only a superset that
   mixes kg and lb shows it (.ss.mixed below), since its rows interleave
   under one header; an empty (bodyweight) box has no unit to show. */
.fld .wu {
  display: none; flex: 0 0 auto; margin-left: -.2em; /* hugs the number: room for a ghost */
  color: var(--muted); font-size: .72rem; font-weight: 600;
}
.fld .wu::before { content: var(--unit, ""); }
.set-block.done .fld { background: transparent; border-color: transparent; }
.set-block.done .fld .gh { opacity: .8; }
/* Added mid-session and never described — the handover note to chat. */
.lx-new {
  margin-top: 6px; font-size: .8rem; color: var(--purple);
  background: rgba(188, 140, 255, .1); border: 1px solid rgba(188, 140, 255, .35);
  border-radius: 8px; padding: .35rem .6rem;
}

/* The weigh-in row (health metrics): one value + unit + the same green tick. */
.metric-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.metric-row .sr-ctl { flex: 0 1 200px; }
.metric-row .tick { flex: 0 0 52px; margin-left: auto; }
.metric-unit { color: var(--muted); font-size: .85rem; }

/* "Why were you away?" — reason chips (green ⇔ answered) + other's textbox. */
.ab-optional { margin-left: auto; color: var(--muted); font-size: .75rem; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ab-chip {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .38rem .8rem; font: inherit; font-size: .85rem;
  cursor: pointer; touch-action: manipulation;
  transition: background .12s, color .12s, border-color .12s;
}
.ab-chip:hover { border-color: var(--muted); }
.ab-chip.pending { border-color: var(--green); }
.ab-chip.on { background: var(--green); border-color: var(--green); color: #0e1116; font-weight: 600; }
.ab-other { border-top: 0; padding: 0; }
.ab-note {
  flex: 1; min-width: 0; font: inherit; font-size: .9rem; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .6rem;
}
.ab-note:focus { outline: none; border-color: var(--accent); }
.ab-other.done .ab-note { background: transparent; border-color: transparent; color: var(--muted); font-style: italic; }
.absence-card.busy { opacity: .5; pointer-events: none; }

.set-cols, .set-row {
  display: grid; grid-template-columns: 1.6em minmax(0, 1fr) minmax(0, 1fr) 2.2em 2.6em;
  gap: 8px; align-items: center;
}
.set-cols {
  margin-top: 12px; color: var(--muted); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; text-align: center;
}
.set-block { border-top: 1px solid var(--panel-2); padding: 6px 0; }
.set-block:first-child { border-top: 0; }
.sr-no { color: var(--muted); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.sr-ctl { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.sr-ctl input {
  width: 100%; min-width: 0; text-align: center; font: inherit; font-size: .95rem;
  font-variant-numeric: tabular-nums;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .42rem .2rem;
  -moz-appearance: textfield; appearance: textfield;
  transition: background .15s, border-color .15s, opacity .15s;
}
.sr-ctl input::-webkit-outer-spin-button, .sr-ctl input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.sr-ctl input:focus { outline: none; border-color: var(--accent); }
.step {
  flex: 0 0 34px; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); border-radius: 8px; font-size: 1.05rem; cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s, visibility .15s;
}
.step:hover { color: var(--text); border-color: var(--muted); }
.note-btn {
  background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer;
  border-radius: 8px; padding: .3rem 0;
  transition: opacity .15s, visibility .15s;
}
.note-btn:hover { color: var(--text); }
.note-btn.has-note { color: var(--accent); }
.tick {
  height: 38px; border-radius: 10px; cursor: pointer; font-size: 1.05rem; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
  touch-action: manipulation;
}
.tick:hover { border-color: var(--green); color: var(--green); }
.set-block.done .tick { background: var(--green); border-color: var(--green); color: #0e1116; }
/* Ticked = submitted. The row turns into a receipt: steppers and the note
   pencil vanish, the field boxes flatten into printed values, and a note
   reads as a caption. Clicks on the frozen inputs fall through to the row
   (pointer-events), where log.js answers with the untick-to-edit hint —
   nothing on a green row pretends to be editable. */
.set-block.done .step,
.set-block.done .note-btn { visibility: hidden; opacity: 0; pointer-events: none; }
.set-block.done input {
  opacity: .8; background: transparent; border-color: transparent; pointer-events: none;
}
.set-block.busy { opacity: .5; pointer-events: none; }
.note-row { margin-top: 6px; padding-left: calc(1.6em + 8px); }
.note-row input {
  width: 100%; font: inherit; font-size: .85rem; background: var(--panel-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .35rem .6rem;
  transition: background .15s, border-color .15s;
}
.set-block.done .note-row input { color: var(--muted); font-style: italic; }
.add-set {
  margin-top: 10px; width: 100%; background: none; border: 1px dashed var(--border);
  color: var(--muted); border-radius: 8px; padding: .45rem; font: inherit; font-size: .85rem;
  cursor: pointer;
}
.add-set:hover { color: var(--text); border-color: var(--muted); }

/* Narrow phones: slimmer steppers and gaps so the number inputs keep
   readable width — this is the layout that gets used mid-workout. */
@media (max-width: 480px) {
  .set-cols, .set-row { grid-template-columns: .9em minmax(0, 1fr) minmax(0, 1fr) 1.3em 2.2em; gap: 4px; }
  .sr-ctl { gap: 3px; }
  .step { flex: 0 0 22px; font-size: .95rem; padding: 0; }
  .sr-ctl input { padding: .42rem .1rem; font-size: .92rem; }
  .lx { padding: 12px 10px; }
  .note-row { padding-left: calc(1.1em + 5px); }
  .fld { gap: .28em; padding-inline: .1rem; }
  .fld .gh { font-size: .84rem; gap: .28em; }
}
/* Ghosts yield to the live number (log.js fitInput measures the overflow):
   a narrow field keeps last time only, a very narrow one — a 3-digit weight
   on a small phone — shows the number alone. */
.fld .gh.drop1 .g1 { display: none; }
.fld .gh.drop2 { display: none; }

/* add an exercise: a search over the account's own exercises, with a
 * deliberate "create" row at the bottom for a genuinely new movement */
.add-ex { position: relative; margin-top: 16px; }
.add-ex input {
  width: 100%; font: inherit; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: .55rem .8rem;
}
.add-ex input:focus { outline: none; border-color: var(--muted); }
/* An empty workout (no cards yet): adding an exercise is the only next step,
   so the search box takes the gold and Finish steps back until there's
   something to finish. Pure CSS off #cards:empty — the first card ends it. */
.first-ex { display: none; }
#cards:empty + .first-ex { display: block; margin: 20px 0 0; font-weight: 600; }
#cards:empty ~ .add-ex { margin-top: 8px; }
#cards:empty ~ .add-ex input { border-color: var(--accent); padding: .8rem 1rem; font-size: 1.02rem; }
#cards:empty ~ .finish-btn {
  background: none; color: var(--muted); border: 1px solid var(--border); font-weight: 600;
}
.ex-menu {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 26px #0009;
}
.ex-opt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; color: var(--text); border: 0; border-bottom: 1px solid var(--border);
  padding: .5rem .7rem;
}
.ex-opt:last-child { border-bottom: 0; }
/* Enter picks the active row, so it has to be unmistakable. */
.ex-opt.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.ex-opt-name { font-weight: 600; }
.ex-opt-meta { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.ex-opt.ex-new .ex-opt-name { color: var(--accent); }
.ex-tag {
  font-size: .7rem; font-weight: 700; color: var(--purple);
  border: 1px solid rgba(188, 140, 255, .45); border-radius: 999px; padding: 0 .4rem;
}
/* The scheme a search row's history was logged under: part of the name, so
 * "Bench Press 5 × 5" and "Bench Press 3 × 10" read as two lifts. */
.ex-scheme {
  font-weight: 600; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: .25rem;
}
.ex-empty { color: var(--muted); font-size: .85rem; padding: .6rem .7rem; }
/* "From the library" (library.js): lifts the account hasn't done yet, each
 * with a tiny body map — primary muscles in the heatmap's hot colour, assists
 * dimmer, the rest of the figure dark, like the dashboard's own heatmap. */
.ex-sec {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--bg);
  padding: .45rem .7rem .3rem; border-bottom: 1px solid var(--border);
}
.ex-opt.ex-lib { align-items: center; justify-content: flex-start; }
.ex-lib-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ex-lib-muscles {
  color: var(--muted); font-size: .76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-opt.ex-lib .ex-opt-meta { margin-left: auto; }
.bm {
  --bm-off: #2a3340; --bm-sil: #1c232c; --bm-p: #f2b632; --bm-s: #8a6a1a;
  display: inline-flex; gap: 1px; flex: 0 0 auto;
}
.bm svg { display: block; width: 17px; height: 37px; }
/* A library pick's card: what it trains, instead of a setup task for chat. */
.lx-lib {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; font-size: .8rem; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: .3rem .6rem;
}

/* Supersets (log.js "supersets"). The S button on every card pairs it with
 * another; a group's cards are SPLICED into one: the wrapper is a wrapping
 * flex column, the member sections and their .sets are display:contents, and
 * log.js layoutGroup gives every piece a flex order — the group head, each
 * member's header in turn (--ho), one shared column header, the rows round by
 * round with a divider before each round, then + round — the one add button,
 * since every member has as many rows as the longest. Each
 * member wears its colour (--mc) and tag (--tag, "A1") on its name, its S
 * button and the leading cell of every row it owns. */
.lx .px-ss {
  flex: 0 0 auto; align-self: center; width: 1.75rem; height: 1.75rem; padding: 0;
  border-radius: 7px; border: 1px solid var(--border); background: none; color: var(--muted);
  font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.lx .px-ss:hover, .lx .px-ss.open { color: var(--text); border-color: var(--muted); }
.ss .lx .px-ss { background: var(--mc); border-color: var(--mc); color: #0e1116; }
.ss .lx .px-ss.open { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--mc); }

.ss-pick {
  margin-top: 8px; padding: 10px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.ss-pick-h { font-size: .85rem; color: var(--muted); }
.ss-pick-h b { color: var(--text); }
.ss-pick-note { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.ss-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ss-opt {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .38rem .8rem; font: inherit; font-size: .85rem;
  cursor: pointer; touch-action: manipulation;
}
.ss-opt:hover { border-color: var(--muted); }
.ss-opt-tag {
  font-size: .66rem; font-weight: 800; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 0 .3rem;
}
.ss-slot .add-ex { margin-top: 8px; }
.ss-pick-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ss-out { font-size: .8rem; }

.ss {
  display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 6px;
  margin-top: 14px; padding: 12px 16px 14px;
  /* the splice: a strip of every member's colour along the top */
  background: var(--ss-strip, none) top / 100% 3px no-repeat, var(--panel);
}
.ss > *, .ss > .lx > *, .ss > .lx > .sets > * { flex: 0 0 100%; min-width: 0; }
.ss > .lx, .ss > .lx > .sets { display: contents; }
.ss > .lx > :not(.sets) { order: var(--ho); }
.ss > .lx > .set-cols { display: none; }
.ss > .lx > .add-set { display: none; }
.ss > .lx.busy > *, .ss > .lx.busy > .sets > * { opacity: .6; pointer-events: none; }
.ss-head { order: 0; display: flex; align-items: center; gap: 8px; }
.ss-badge {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem;
  border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border);
  font-weight: 800; font-size: .85rem;
}
.ss-kind { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ss-hint { margin-left: auto; color: var(--muted); font-size: .75rem; }
/* Members after the first start below a seam. */
.ss > .lx + .lx > .lx-head { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ss > .lx:first-of-type > .lx-head { margin-top: 10px; }
.ss .lx-name::before {
  content: var(--tag); display: inline-block; margin-right: .45rem; padding: 0 .35rem;
  border-radius: 6px; background: var(--mc); color: #0e1116;
  font-size: .72rem; font-weight: 800; vertical-align: .1em;
}
.ss-cols { order: 999; }
.ss-round {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ss-round::after { content: ""; flex: 1; border-top: 1px dashed var(--border); }
.ss .set-block { border-top: 0; padding: 4px 0; }
.ss .set-cols, .ss .set-row { grid-template-columns: 2em minmax(0, 1fr) minmax(0, 1fr) 2.2em 2.6em; }
.ss .sr-no { font-size: 0; }
.ss .sr-no::after { content: var(--tag); font-size: .72rem; font-weight: 800; color: var(--mc); }
.ss .note-row { padding-left: calc(2em + 8px); }
.ss.mixed .fld .wu { display: inline; }
.ss.mixed .fld input:placeholder-shown + .wu { display: none; }
.ss-round-add {
  order: 9000; margin-top: 10px;
  background: none; border: 1px dashed var(--border); color: var(--text);
  border-radius: 8px; padding: .45rem; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.ss-round-add:hover { border-color: var(--muted); }
@media (max-width: 480px) {
  .ss { padding: 12px 10px; }
  .ss .set-cols, .ss .set-row { grid-template-columns: 1.7em minmax(0, 1fr) minmax(0, 1fr) 1.3em 2.2em; }
  .ss .note-row { padding-left: calc(1.7em + 4px); }
}

.finish-btn {
  display: block; width: 100%; margin-top: 18px;
  background: var(--accent); color: #161b22; font: inherit; font-weight: 800;
  font-size: 1.02rem; border: 0; border-radius: 12px; padding: .9rem; cursor: pointer;
}
.finish-btn:hover { filter: brightness(1.06); }
.finish-btn:disabled { opacity: .6; cursor: wait; }

/* tick feedback: verdict pills that float up from the tick button, then
   SETTLE and stay — long enough to read, and to turn the phone round and
   show someone what GymBot just said. log.js owns the lifetime (POP_HOLD_MS,
   tap to dismiss, the next tick replaces it); CSS only does the entrance and
   the .leaving exit. Wraps rather than nowrap: bro lines are long and the
   pill is right-anchored, so a single line would run off a phone's left edge. */
.float-pop {
  position: fixed; z-index: 30; cursor: pointer;
  max-width: min(78vw, 340px);
  font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: right;
  padding: .45rem .9rem; border-radius: 18px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  box-shadow: 0 4px 14px #0007;
  animation: float-pop-in .6s ease-out forwards;
}
.float-pop.leaving { pointer-events: none; animation: float-pop-out .5s ease-in forwards; }
/* PR: the one filled pill — every other verdict is an outline — with a
   stamped badge, a slow shine and a glow, so it outranks "beat last time"
   at a glance. Gold means PR and nothing else. */
.float-pop.pr {
  color: #241800; border-color: #ffe08a;
  background: linear-gradient(115deg, #ffe08a 0%, var(--accent) 35%, #ff9f43 65%, var(--accent) 100%);
  background-size: 250% 100%;
  box-shadow: 0 4px 14px #0007, 0 0 22px rgba(242, 182, 50, .55);
}
.float-pop.pr:not(.leaving) {
  animation: float-pop-in .6s ease-out forwards, pr-shine 2.4s ease-in-out .6s infinite alternate;
}
.float-pop .pop-badge {
  position: absolute; top: -.8rem; left: -.6rem; transform: rotate(-8deg);
  padding: .12rem .5rem; border-radius: 8px; white-space: nowrap;
  background: var(--bg); color: var(--accent); border: 1px solid var(--accent);
  font-size: .7rem; letter-spacing: .08em; line-height: 1.2;
}
@keyframes pr-shine {
  from { background-position: 0% 0; box-shadow: 0 4px 14px #0007, 0 0 14px rgba(242, 182, 50, .4); }
  to { background-position: 100% 0; box-shadow: 0 4px 14px #0007, 0 0 30px rgba(242, 182, 50, .75); }
}
/* Sparks fly under the verdict pill (z 30) so its text stays readable, but
   over the session-complete modal when that is what they celebrate. */
.pr-burst { position: fixed; z-index: 29; width: 0; height: 0; pointer-events: none; }
.sc-overlay ~ .pr-burst { z-index: 45; }
.pr-burst i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  opacity: 0; animation: pr-spark .9s ease-out both;
}
@keyframes pr-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
  70% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.8); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 18px)) scale(.3); }
}
.float-pop.up { background: linear-gradient(rgba(63, 185, 80, .14), rgba(63, 185, 80, .14)), var(--panel-2); border-color: var(--green); color: var(--green); }
.float-pop.even { border-color: var(--blue); color: var(--blue); }
.float-pop.down { border-color: var(--muted); color: var(--muted); }
.float-pop.first { border-color: var(--purple); color: var(--purple); }
/* Tied PR: silver — the medal that isn't gold. An outline like every
   non-PR verdict, but with the same stamped badge so it can't read as a
   plain "matched last time". */
.float-pop.tie {
  border-color: var(--silver); color: var(--silver);
  background: linear-gradient(rgba(214, 221, 230, .12), rgba(214, 221, 230, .12)), var(--panel-2);
}
.float-pop.tie .pop-badge { color: var(--silver); border-color: var(--silver); }
@keyframes float-pop-in {
  0% { opacity: 0; transform: translateY(8px) scale(.85); }
  55% { opacity: 1; transform: translateY(-40px) scale(1.05); }
  100% { opacity: 1; transform: translateY(-36px) scale(1); }
}
@keyframes float-pop-out {
  from { opacity: 1; transform: translateY(-36px); }
  to { opacity: 0; transform: translateY(-90px); }
}

/* Bro mode voice in the logger: stamped-verdict typography, and the bro's
   palette — matching a set is "meh" (grey; gold is reserved for PRs), going
   lighter is mocked in red rather than consoled. Same layout, different
   attitude. */
body.bro .float-pop,
body.bro .sc-title,
body.bro .sc-intensity,
body.bro .sc-modal .finish-btn,
body.bro .qs-title {
  font-family: Impact, "Arial Black", "Franklin Gothic Bold", system-ui, sans-serif;
  letter-spacing: .04em;
}
body.bro .float-pop { font-weight: 400; }
body.bro .qs-title { font-weight: 400; font-size: 1.3rem; }
body.bro .float-pop.even { border-color: var(--muted); color: var(--muted); }
body.bro .float-pop.down { border-color: var(--red); color: var(--red); background: linear-gradient(rgba(255, 107, 107, .12), rgba(255, 107, 107, .12)), var(--panel-2); }
body.bro .sc-intensity.light { border-color: var(--red); color: var(--red); background: rgba(255, 107, 107, .06); }

/* rest timer (log.js rest timer): a pill docked at the top of the screen —
   the keyboard owns the bottom — or the bottom, whenever the next set's row
   sits under the top dock. Both hug the visible part of the screen (log.js
   sets --vv-top / --vv-bottom from the visual viewport) so the keyboard can't
   bury either. It drains as the rest runs (.rd-fill, scaled by log.js),
   pulses through the last ten seconds and turns into the green "go". Blue
   while it counts, because gold means PR and nothing else. Centred with auto
   margins, not a transform, so the animations own `transform`. */
.rest-dock {
  position: fixed; z-index: 31; left: 0; right: 0; margin-inline: auto;
  top: calc(14px + env(safe-area-inset-top, 0px) + var(--vv-top, 0px));
  width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--panel-2); border: 1px solid var(--blue); color: var(--text);
  box-shadow: 0 6px 18px #000a;
  font-variant-numeric: tabular-nums;
  animation: rest-in .35s ease-out;
}
.rest-dock.bottom {
  top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--vv-bottom, 0px));
  animation-name: rest-in-bottom; /* a flip between docks slides in afresh */
}
.rd-fill {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(88, 166, 255, .2); transform-origin: left center;
  transition: transform .25s linear;
}
.rd-body { display: flex; align-items: baseline; gap: 7px; padding: 0 10px; min-width: 6.4em; justify-content: center; }
.rd-label { color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.rd-time { font-weight: 700; font-size: 1.2rem; line-height: 1; }
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600;
  min-width: 44px; height: 36px; padding: 0 .65rem; cursor: pointer; touch-action: manipulation;
}
.rd-btn:hover { color: var(--text); border-color: var(--muted); }
.rest-dock.final { animation: rest-pulse 1s ease-in-out infinite; }
.rest-dock.final .rd-time { color: var(--blue); }
.rest-dock.go {
  cursor: pointer; padding: .6rem 1.15rem; border-radius: 18px; border-color: var(--green);
  background: linear-gradient(rgba(63, 185, 80, .18), rgba(63, 185, 80, .18)), var(--panel-2);
  color: var(--green); font-weight: 700; font-size: 1rem; line-height: 1.3; text-align: center;
  animation: rest-go .5s cubic-bezier(.2, 1.6, .4, 1);
}
/* Last in the cascade on purpose: each state's `animation` replaces the one
   before it — bottom's slide-in, then final's pulse, go's pop, the exit. */
.rest-dock.leaving { pointer-events: none; animation: rest-out .3s ease-in forwards; }
@keyframes rest-in { from { opacity: 0; transform: translateY(-14px) scale(.92); } }
@keyframes rest-in-bottom { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes rest-out { to { opacity: 0; transform: scale(.9); } }
@keyframes rest-pulse {
  0%, 100% { box-shadow: 0 6px 18px #000a, 0 0 0 0 rgba(88, 166, 255, .55); transform: scale(1); }
  50% { box-shadow: 0 6px 18px #000a, 0 0 0 7px rgba(88, 166, 255, 0); transform: scale(1.04); }
}
@keyframes rest-go { from { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  .rest-dock, .rest-dock.bottom, .rest-dock.final, .rest-dock.go, .rest-dock.leaving { animation: none; }
  .rd-fill { transition: none; }
}
/* The toast lives at the bottom: lift it clear while the dock is there. */
body.rest-bottom #toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
body.bro .rest-dock.go {
  font-family: Impact, "Arial Black", "Franklin Gothic Bold", system-ui, sans-serif;
  font-weight: 400; letter-spacing: .04em;
}
/* The settings page draws the same pill as its preview, sitting still. */
.rest-dock.pv { position: relative; inset: auto; margin: 0; animation: none; box-shadow: none; pointer-events: none; }

/* session-complete modal */
.sc-overlay {
  position: fixed; inset: 0; z-index: 40; background: #000b;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px);
}
.sc-modal {
  max-width: 430px; width: 100%; max-height: 90vh; overflow-y: auto;
  text-align: center; padding: 26px 22px;
  animation: sc-in .25s ease-out;
}
@keyframes sc-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.sc-burst { font-size: 2.4rem; line-height: 1; }
/* The bot pops in: hyped after a PR, happy otherwise. */
.sc-burst .mark { animation: sc-bot .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes sc-bot { from { opacity: 0; transform: scale(.6) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .sc-burst .mark { animation: none; } }
.sc-title { margin: 10px 0 16px; font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-stats .stat { padding: 10px 6px; text-align: center; }
.sc-stats .stat .v { font-size: 1.3rem; }
.sc-intensity {
  margin-top: 14px; border-radius: 10px; padding: 10px 12px; font-size: .92rem;
  border: 1px solid var(--border); background: var(--panel-2);
}
.sc-intensity.hot { border-color: var(--accent); color: var(--accent); background: rgba(242, 182, 50, .08); }
.sc-intensity.solid { border-color: var(--green); color: var(--green); background: rgba(63, 185, 80, .08); }
.sc-intensity.light { color: var(--muted); }
.sc-prs { margin-top: 14px; text-align: left; }
.sc-sub {
  color: var(--muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; margin-bottom: 4px;
}
.sc-pr { padding: 6px 0; border-top: 1px solid var(--panel-2); font-variant-numeric: tabular-nums; font-size: .92rem; }
.sc-recap { margin-top: 12px; color: var(--muted); font-size: .82rem; }
.sc-pr .sc-beat { display: block; margin-left: 1.6em; color: var(--muted); font-size: .8rem; }
.sc-modal .finish-btn { margin-top: 18px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: #000d; border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: .6rem 1rem; font-size: .9rem; z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: min(90vw, 480px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { border-color: var(--green); }

/* Export + delete on the "your data" page (data.js). Deliberately
   plain, and the delete path is styled to look consequential rather than
   inviting. */
.account .dim { color: var(--muted); font-size: .85rem; margin: .4rem 0; }
.account .btn {
  display: inline-block; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 7px 13px; font: inherit;
  font-size: .85rem; cursor: pointer; text-decoration: none; margin-right: 8px;
}
.account .btn:hover { border-color: var(--muted); }
.account .btn.danger { color: var(--red); border-color: #4a2b2f; }
.account .btn.danger:hover { background: #2a1a1d; border-color: var(--red); }
.account #delInput {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: .85rem;
  margin: 0 8px 8px 0; width: 100%; max-width: 300px;
}
.account #delErr:empty { display: none; }
.account #delErr { color: var(--red); }

/* bro mode — the informative half: labelled charts and per-lift tiles. */
.bro-card .bs b { color: var(--text); }
.bro-chart { position: relative; height: 210px; margin: 8px 0 4px; }
.lifts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 10px 0 6px;
}
.lift {
  background: var(--panel-2); border-radius: 10px; padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--text);
}
.lift .ln { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lift .lv {
  font-family: Impact, "Arial Black", "Franklin Gothic Bold", system-ui, sans-serif;
  font-size: 1.9rem; line-height: 1.1; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.lift .lv small { font-size: .85rem; color: var(--muted); font-family: system-ui, sans-serif; letter-spacing: .05em; }
.lchip {
  font-family: system-ui, sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  padding: .08rem .4rem; border-radius: 5px; border: 2px solid; margin-left: auto;
}
.lchip.up { color: var(--green); border-color: var(--green); }
.lchip.down { color: var(--red); border-color: var(--red); }
.lchip.stuck { color: var(--accent); border-color: var(--accent); }
.lchip.new { color: var(--muted); border-color: var(--muted); }
.lift .lr { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lift .lr .up { color: var(--green); font-weight: 700; }
.lift .lr .down { color: var(--red); font-weight: 700; }
.bro-spark { display: block; width: 100%; height: auto; margin: 6px 0 2px; overflow: visible; }
.bro-spark path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.bro-spark circle { fill: var(--green); stroke: var(--panel-2); stroke-width: 2; }
.bro-bars { display: block; width: 100%; height: auto; margin: 8px 0 2px; overflow: visible; }
.bro-bars .bar { fill: var(--accent); }
.bro-bars .bar.now { opacity: .45; }
.bro-bars text { fill: var(--muted); font-size: 10px; font-weight: 700; font-family: system-ui, sans-serif; }
.bro-bars text.v { fill: var(--text); }
.mgs { display: grid; gap: 5px; margin: 8px 0 4px; }
.mg { display: grid; grid-template-columns: 76px 1fr 38px; gap: 8px; align-items: center; }
.mg .mgn { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .68rem; color: var(--text); }
.mg .mgt { height: 11px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.mg .mgf { height: 100%; background: var(--accent); border-radius: 6px; }
.mg.low .mgf { background: var(--red); }
.mg .mgp { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .78rem; }

/* ---- marketplace + the adopt actions -------------------------------------
   Shared by the marketplace tab and the publish/update panels on the
   programmes page. Deliberately built from the existing card and panel
   vocabulary: a published programme should look like a programme, not like a
   product listing. */

.market-sort { display: flex; gap: 8px; margin: 14px 0; }
.market-sort button {
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .85rem; font-size: .82rem; cursor: pointer;
}
.market-sort button.on { color: var(--text); border-color: var(--accent); }
.market-sort button:hover { color: var(--text); }

.pc-ver {
  margin-left: auto; color: var(--muted); font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.pc-by { color: var(--muted); font-size: .84rem; margin-top: 4px; }
.pc-by b { color: var(--blue); font-weight: 600; }
.pc-by .bio { display: block; margin-top: 4px; font-style: italic; }
.pc-foot { color: var(--muted); font-size: .76rem; margin-top: 8px; }

/* Status chips on a programme card: published / drifted / imported / update. */
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font-size: .7rem; border-radius: 999px; padding: .12rem .55rem;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  white-space: nowrap;
}
.chip-pub   { color: var(--green);  border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.chip-warn  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.chip-new   { color: var(--blue);   border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.chip-quiet { opacity: .7; }

/* Action panels. */
.import-panel, .share-panel, .update-panel, .activate-panel { margin-top: 18px; }
.update-panel { border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.share-panel h3, .update-panel h3 { margin: 0 0 6px; font-size: 1rem; }
.share-actions, .update-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}

button.primary, button.quiet {
  border-radius: 8px; padding: .5rem 1rem; font-size: .9rem; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border);
}
button.primary { background: var(--accent); color: #161b22; border-color: var(--accent); }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.quiet { background: transparent; color: var(--muted); }
button.quiet:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.update-actions button:not(.primary):not(.quiet) {
  background: var(--panel-2); color: var(--text); border-radius: 8px;
  padding: .5rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border);
}
.btn-link { color: var(--blue); font-size: .85rem; align-self: center; margin-left: 10px; }

p.ok   { color: var(--green); font-size: .88rem; margin: 10px 0 0; }
p.err  { color: var(--red);   font-size: .88rem; margin: 10px 0 0; }
p.warn { color: var(--accent); font-size: .86rem; margin: 8px 0 0; max-width: 62ch; }

/* The publish dialog. The notes question is the point of this layout: it gets
   its own block, its own heading and NO pre-selected answer. */
.pub-step { margin-top: 14px; }
.pub-step h4 { margin: 0 0 6px; font-size: .95rem; }
.pub-step label { display: block; margin: 10px 0; font-size: .85rem; color: var(--muted); }
.pub-step input[type="text"], .pub-step input:not([type]) {
  display: block; width: 100%; max-width: 32rem; margin-top: 4px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: .45rem .6rem; font-size: .9rem;
}
.pub-notes {
  margin: 18px 0; padding: 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.pub-notes label.radio {
  display: flex; gap: 10px; align-items: flex-start; color: var(--text);
  font-size: .88rem; cursor: pointer; margin: 10px 0 0;
}
.pub-notes label.radio input { margin-top: .25rem; flex: none; }
.pub-diff { font-size: .85rem; color: var(--muted); margin: 10px 0; }
.pub-diff ul { margin: 6px 0 0; padding-left: 1.2rem; }
.pub-preview-head { margin-top: 22px; }
.pub-preview {
  border: 1px dashed var(--border); border-radius: 10px; padding: 4px 14px 14px;
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
}
.pub-preview .detail-name { font-size: 1.1rem; }
.px-inc { color: var(--muted); font-weight: 500; margin-left: 8px; font-size: .82rem; }

/* Version history on a marketplace listing. */
.ver-list { display: flex; flex-direction: column; gap: 2px; }
.ver-row {
  display: flex; gap: 12px; align-items: baseline; padding: 8px 2px;
  border-top: 1px solid var(--panel-2); font-size: .86rem;
}
.ver-row:first-child { border-top: 0; }
.ver-no { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; width: 3em; }
.ver-date { color: var(--muted); font-size: .8rem; white-space: nowrap; width: 8em; }
.ver-log { color: var(--muted); }

@media (max-width: 560px) {
  .share-actions, .update-actions { flex-direction: column; align-items: stretch; }
  .btn-link { margin: 6px 0 0; text-align: center; }
  .ver-row { flex-wrap: wrap; gap: 4px 10px; }
}

/* ---- profile page (profile.js) ------------------------------------------ */
/* What other lifters see: the byline a published programme carries. */
.pcard-head { display: flex; align-items: center; gap: 12px; }
.pcard-avatar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--accent); font-weight: 700; font-size: 1.2rem;
}
.pcard-id { display: flex; flex-direction: column; min-width: 0; }
.pcard-id b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.pcard-id span { color: var(--blue); font-size: .88rem; }
.pcard-bio { margin: 12px 0 0; font-style: italic; color: var(--muted); }
.pcard-h {
  margin: 18px 0 6px; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); font-weight: 600;
}
.pcard-list { list-style: none; margin: 0; padding: 0; }
.pcard-list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.pcard-list li:first-child { border-top: 0; }
.pcard-list a { color: var(--text); font-weight: 600; text-decoration: none; }
.pcard-list a:hover { color: var(--accent); }
.pcard-meta { color: var(--muted); font-size: .8rem; }
.pcard-list .pc-ver { margin-left: 0; }
.pcard-list .share-btn { margin-left: auto; }
.pcard .dim { color: var(--muted); font-size: .85rem; margin: 12px 0 0; line-height: 1.5; }
.pcard .dim a { color: var(--accent); }

/* The edit form below it. */
.profile-panel .field { display: block; margin: 14px 0; }
.profile-panel .field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.profile-panel .field .opt { color: var(--muted); font-weight: 400; font-style: normal; font-size: .82rem; }
.profile-panel .field small { display: block; color: var(--muted); font-size: .8rem; margin-top: 6px; }
.profile-panel input {
  width: 100%; max-width: 26rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); padding: .5rem .65rem; font: inherit; font-size: .92rem;
}
.profile-panel input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.profile-panel .at {
  display: flex; align-items: center; max-width: 26rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; padding-left: .65rem;
}
.profile-panel .at i { color: var(--muted); font-style: normal; }
.profile-panel .at input { border: 0; border-radius: 0 9px 9px 0; padding-left: .15rem; }
.profile-panel .at input:focus { outline: none; }
.profile-panel .at:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.pf-btn {
  background: var(--accent); color: #161b22; border: 0; border-radius: 8px;
  padding: .5rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.pf-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pf-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- import (your data page, import-panel.js) -------------------------- */
.import-panel .dim { color: var(--muted); font-size: .85rem; margin: .4rem 0; line-height: 1.5; }
.import-panel a { color: var(--accent); }
.imp-file { display: inline-block; margin: 8px 0 4px; }
.imp-card { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-2); }
.imp-card > p { margin: .45rem 0; }
.imp-stats { font-size: .95rem; }
.imp-stats b { color: var(--accent); font-variant-numeric: tabular-nums; }
.imp-q {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: 12px 0; padding: 10px 12px; border-radius: 9px; background: var(--panel-2);
}
.imp-q > span { font-size: .9rem; }
.imp-notes { margin: 10px 0; padding-left: 1.2rem; color: var(--muted); font-size: .85rem; }
.imp-notes:empty { display: none; }
.imp-ex { margin: 12px 0; }
.imp-ex summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.imp-ex table { width: 100%; margin-top: 8px; font-size: .85rem; }
.imp-ex td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--panel-2); vertical-align: middle; }
.imp-ex td:first-child { width: 45%; overflow-wrap: anywhere; }
.imp-map {
  width: 100%; max-width: 18rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text); padding: .3rem .5rem; font: inherit; font-size: .85rem;
}
.imp-map:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.imp-hint { margin-left: 6px; color: var(--muted); }
.imp-badge {
  display: inline-block; font-style: normal; font-size: .72rem; font-weight: 600;
  border-radius: 999px; padding: 1px 8px; border: 1px solid var(--border); color: var(--muted);
}
.imp-badge.library { color: var(--blue); border-color: #22405f; }
.imp-badge.new { color: var(--accent); border-color: #5a4a1f; }
.imp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.imp-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: .85rem;
  color: var(--muted); text-decoration: underline; cursor: pointer;
}
.imp-link:hover:not(:disabled) { color: var(--text); }
.imp-link.danger { color: var(--red); }
.imp-bar { height: 8px; border-radius: 6px; background: var(--panel-2); overflow: hidden; margin-top: 12px; }
.imp-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.imp-err { color: var(--red); font-size: .88rem; }
.imp-done b { color: var(--green); }
.imp-sub {
  margin: 22px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600;
}
.imp-past { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.imp-past li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--panel-2);
}
.imp-past i { color: var(--muted); }
.imp-confirm { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--muted); }
@media (max-width: 560px) { .imp-ex td:first-child { width: 40%; } }

/* share links: the copy-link icon on marketplace cards, the detail title and
   the programmes page's published panel */
.market-card { cursor: pointer; }
.market-card .pc-name { color: inherit; text-decoration: none; }
.market-card .pc-name:hover { color: var(--accent); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: -6px 0 -6px 4px;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer; flex: none; font: inherit;
}
.share-btn:hover, .share-btn:focus-visible { color: var(--accent); border-color: var(--border); background: var(--panel-2); }
.share-btn svg { display: block; }
.detail-name .share-btn { margin: 0; }
.share-btn.linkish {
  width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none;
  color: var(--accent); text-decoration: underline;
}
.share-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.share-link code {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: .15rem .45rem; font-size: .8rem; word-break: break-all; color: var(--text);
}
.share-link .hint { flex-basis: 100%; }
#toast.manual { pointer-events: auto; }
.toast-url {
  display: block; width: 100%; margin-top: 6px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .5rem; font: inherit; font-size: .82rem;
}

/* ---- activity: the feed ------------------------------------------------------
   Laid out as the social feed it will become. One centred column of posts; a
   post is a card with who-and-when, the workout's name, a row of headline
   stats (small label over a big number), a full-bleed media panel — the body
   map beside the lifts, where a running app puts its route map — and an
   action bar. The opened post reuses the card at full size. */
.feed { max-width: 620px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 14px; }
.feed-list { display: flex; flex-direction: column; gap: 14px; }

.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #ffd75e 0%, #f2b632 45%, #c98a12 100%);
  color: #161b22; font-weight: 800; font-size: .92rem; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px rgba(242, 182, 50, .35);
}
.avatar.lg { width: 60px; height: 60px; font-size: 1.25rem; }

.ps-v small, .fs-v small { font-size: .7em; color: var(--muted); font-weight: 600; margin-left: 2px; }

/* a post */
.post {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.post-body { padding: 16px 18px; }
.post-head { display: flex; align-items: center; gap: 12px; }
.post-who { min-width: 0; }
.post-name { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.post-when { color: var(--muted); font-size: .8rem; }
.post-title { margin: 14px 0 12px; font-size: 1.24rem; font-weight: 800; letter-spacing: -.005em; line-height: 1.25; }
.post-title a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.post-title a:hover { color: var(--accent); }
.post-icon { color: var(--muted); display: inline-flex; flex: none; }
.post-title a:hover .post-icon { color: var(--accent); }

.post-stats { display: flex; flex-wrap: wrap; row-gap: 8px; }
.ps { padding: 0 18px; border-left: 1px solid var(--border); }
.ps:first-child { padding-left: 0; border-left: 0; }
.ps-k { display: block; color: var(--muted); font-size: .72rem; line-height: 1.3; }
.ps-v { display: block; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; }
.ps.gold .ps-v { color: var(--accent); }
@media (max-width: 420px) { .ps { padding: 0 12px; } }

/* the media panel: body map + lifts, full-bleed, a shade darker than the card */
.post-media {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px;
  padding: 16px 18px; color: inherit; text-decoration: none;
  background:
    radial-gradient(90% 120% at 12% 50%, rgba(242, 182, 50, .07), transparent 62%),
    #11161d;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.post-media:hover { background:
    radial-gradient(90% 120% at 12% 50%, rgba(242, 182, 50, .1), transparent 62%), #131922; }
.post-fig { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bm.post-bm, .bm.full-bm { --bm-off: #252e3a; --bm-sil: #1a212b; gap: 6px; }
.bm.post-bm svg { width: 54px; height: 119px; }
.post-mus {
  color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  max-width: 130px; text-align: center; line-height: 1.35;
}
.post-lifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; min-width: 0; }
.post-lifts li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; }
.pl-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-v { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .84rem; }
.post-lifts li.rec .pl-n { color: var(--accent); font-weight: 700; }
.post-lifts li.rec .pl-v { color: var(--text); }
.post-lifts li.more { color: var(--muted); font-size: .78rem; }
@media (max-width: 420px) {
  .post-media { gap: 14px; padding: 14px 16px; }
  .bm.post-bm svg { width: 44px; height: 97px; }
  .post-mus { max-width: 100px; }
  /* Name over top set, so a long name gets the whole column. */
  .post-lifts { gap: 8px; }
  .post-lifts li { flex-direction: column; align-items: stretch; gap: 0; }
  .pl-v { font-size: .78rem; }
}

.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 18px; }
.post-status { color: var(--blue); font-size: .78rem; display: inline-flex; align-items: center; gap: 6px; }
.post-act {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  background: none; border: 0; border-radius: 9px; padding: 8px 12px;
  color: var(--muted); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.post-act:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
.post-act.on { color: var(--blue); }
.post-act:disabled { opacity: .5; cursor: wait; }

/* the end of the feed, and its empty state */
.feed-end { text-align: center; color: var(--muted); font-size: .82rem; padding: 6px 0 4px; }
.feed-empty { text-align: center; padding: 30px 22px; }
.feed-empty .mark { display: block; margin: 0 auto 10px; }
.feed-empty h3 { margin: 0 0 6px; font-size: 1.1rem; }
.feed-empty p { color: var(--muted); max-width: 42ch; margin: 0 auto; font-size: .9rem; }
.feed-empty a { color: var(--accent); }
.btn-cta {
  display: inline-block; margin-top: 16px; background: var(--accent); color: #161b22 !important;
  font-weight: 700; padding: .6rem 1.2rem; border-radius: 10px; text-decoration: none;
}

/* loading skeleton */
.skeleton .sk { display: block; height: 11px; border-radius: 6px; background: var(--panel-2); margin: 6px 0; }
.skeleton .sk.tall { height: 18px; margin: 16px 0 14px; }
.skeleton .sk.fig { width: 112px; height: 119px; border-radius: 10px; margin: 0; }
.skeleton .w20 { width: 20%; } .skeleton .w25 { width: 90px; } .skeleton .w40 { width: 130px; }
.skeleton .w60 { width: 60%; } .skeleton .w70 { width: 70%; } .skeleton .w80 { width: 80%; }
.skeleton .sk-row { display: flex; gap: 18px; } .skeleton .sk-col { display: grid; gap: 6px; }
.skeleton .avatar { background: var(--panel-2); box-shadow: none; }
.skeleton .sk, .skeleton .avatar { animation: sk-pulse 1.2s ease-in-out infinite; }
@keyframes sk-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skeleton .sk, .skeleton .avatar { animation: none; } }

/* one post, opened up */
.full-title { margin: 14px 0 16px; font-size: 1.6rem; font-weight: 800; color: var(--text);
  text-transform: none; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; line-height: 1.2; }
.full-title .post-icon svg { width: 22px; height: 22px; }
.full-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.fs { background: var(--panel); padding: 10px 12px; }
.fs-v { display: block; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.fs.gold { background: linear-gradient(160deg, rgba(242, 182, 50, .18), rgba(242, 182, 50, .06)); }
.fs.gold .fs-v { color: var(--accent); }
.full-records {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px;
  border: 1px solid rgba(242, 182, 50, .45); border-radius: 12px; background: rgba(242, 182, 50, .07);
}
.full-records .mark { flex: none; }
.fr-head { color: var(--accent); font-weight: 800; font-size: .95rem; }
.fr-line { font-size: .88rem; font-variant-numeric: tabular-nums; }
.fr-line b { font-weight: 700; }

.full-media {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 26px; padding: 20px 22px;
  background: radial-gradient(90% 120% at 12% 50%, rgba(242, 182, 50, .07), transparent 62%), #11161d;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.full-media .cap { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .85rem; }
.bm.full-bm svg { width: 84px; height: 185px; }
.mus-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.mb-head { display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: 2px; }
.mb-row { display: grid; grid-template-columns: minmax(70px, 7.5rem) 1fr 2.2rem; align-items: center; gap: 10px; font-size: .84rem; }
.mb-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-bar { height: 7px; border-radius: 4px; background: #252e3a; overflow: hidden; }
.mb-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c99a24, #f2b632); }
.mb-v { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; font-size: .8rem; }
@media (max-width: 480px) {
  .full-media { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .mus-bars { width: 100%; }
}

.full-h { margin: 0 0 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.full-ex { list-style: none; margin: 0; padding: 0; }
.full-ex li {
  display: grid; grid-template-columns: 1fr auto 7.5rem; align-items: baseline; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--panel-2); font-size: .92rem;
}
.full-ex li:first-child { border-top: 0; padding-top: 2px; }
.fe-n { min-width: 0; overflow-wrap: anywhere; }
.fe-s { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.fe-t { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.full-ex li.rec .fe-n { color: var(--accent); font-weight: 700; }
/* A superset member's tag (activity.js withSupersets), in the logger's colours. */
.ss-tag {
  display: inline-block; margin-right: .4rem; padding: 0 .32rem; border-radius: 5px;
  background: var(--mc); color: #0e1116; font-size: .68rem; font-weight: 800;
  font-variant-numeric: tabular-nums; vertical-align: .1em;
}
@media (max-width: 420px) { .full-ex li { grid-template-columns: 1fr auto; } .fe-s { display: none; } }

.full-share { border-top: 1px solid var(--border); background: var(--panel); }
.share-copy { color: var(--muted); font-size: .85rem; margin: 0; max-width: 60ch; }
.share-url { display: flex; align-items: center; gap: 8px; color: var(--blue); min-width: 0; }
.share-url code {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .25rem .5rem;
  font-size: .8rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.full-share .share-actions button.primary { display: inline-flex; align-items: center; gap: 7px; }
.feed-fix { color: var(--muted); font-size: .8rem; text-align: center; margin: 2px 0 0; }

/* The save sheet's second choice, under the big "Save and share". */
.sc-save {
  display: block; width: 100%; margin-top: 8px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 12px; padding: .6rem; font: inherit;
  font-weight: 600; cursor: pointer;
}
.sc-save:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.sc-save:disabled, .sc-modal .finish-btn:disabled { opacity: .6; cursor: wait; }
.sc-note { color: var(--muted); font-size: .78rem; margin: 10px 0 0; text-align: center; }
/* The save sheet sits above the toast, so a save that fails still says why. */
body:has(.sc-overlay) #toast { z-index: 50; }

/* ---- activity: friends ----------------------------------------------------
   Other people's posts, reactions, lists of people and the lift comparison.
   Your own avatar stays gold; a friend's takes a steady hue from their handle
   (--av-h, set per avatar), so a mixed feed reads at a glance. */
.avatar.friend {
  background: linear-gradient(140deg, hsl(var(--av-h, 205) 70% 70%) 0%, hsl(var(--av-h, 205) 55% 48%) 100%);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px hsl(var(--av-h, 205) 60% 55% / .35);
}
.avatar.sm { width: 34px; height: 34px; font-size: .78rem; }

.feed-rival { margin: -4px 4px 0; color: var(--muted); font-size: .86rem; text-align: center; font-style: italic; }
body.bro .feed-rival { font-style: normal; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }

/* a post's author: the avatar and name open their profile */
.post a.post-name { color: var(--text); text-decoration: none; display: block; }
.post a.post-name:hover { color: var(--accent); }
.post-head > a, .notice > a:first-child { flex: none; border-radius: 50%; text-decoration: none; }
.post-when a { color: inherit; text-decoration: none; }
.post-when a:hover { color: var(--text); }

/* a post's footer: what it has collected */
.post-status > span { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; }

/* the reactions: a nerd's gold star (⭐) or a bro's aura (🗿, in hundreds).
   The button is grey until you give; given, it takes its currency's colour. */
.rx-emoji { font-size: 1.05rem; line-height: 1; filter: grayscale(1); opacity: .75; }
.post-act.rx { color: var(--muted); }
.post-act.rx.on .rx-emoji { filter: none; opacity: 1; }
.post-act.rx.on.star { color: var(--accent); background: rgba(242, 182, 50, .1); }
.post-act.rx.on.aura { color: #c4b5fd; background: rgba(167, 139, 250, .12); }
.post-act.rx.pop .rx-emoji { animation: rx-pop .35s ease-out; }
@keyframes rx-pop { 40% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .post-act.rx.pop .rx-emoji { animation: none; } }
.post-act.rx.big { padding: 10px 22px; font-size: .95rem; border: 1px solid var(--border); }
.post-act.rx.big.on.star { border-color: rgba(242, 182, 50, .55); }
.post-act.rx.big.on.aura { border-color: rgba(167, 139, 250, .55); }
/* what a post has collected: one chip per currency */
.tk { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-size: .85rem; color: var(--muted); }
.tk b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk.aura b { color: #c4b5fd; }
.full-react { justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--border); }
body.bro .post-act.rx span:not(.rx-emoji) { text-transform: uppercase; letter-spacing: .03em; }

/* an exercise on an opened post that compares with friends */
.fe-n a { color: inherit; text-decoration: none; }
.fe-n a:hover { color: var(--accent); }
.fe-cmp { display: inline-flex; vertical-align: -1px; margin-left: 6px; color: var(--muted); }
.fe-n a:hover .fe-cmp { color: var(--accent); }
.fe-hint { color: var(--muted); font-size: .78rem; margin: 10px 0 0; display: flex; align-items: center; gap: 6px; }
.full-h svg { vertical-align: -2px; margin-right: 4px; }

/* lists of people: search results, the bell, followers and following */
.people-sec h3 { margin: 0 0 8px; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.people-sec h3 .count { color: var(--muted); font-weight: 600; font-size: .85rem; }
.people-sec .share-copy + .share-copy { margin-top: 8px; }
.people-sec .full-h { margin-top: 16px; }
.share-copy.small { font-size: .8rem; margin-top: 12px; }
.share-copy a { color: var(--accent); }
.share-copy .linkish { font-size: inherit; }
.people-list { list-style: none; margin: 4px 0 0; padding: 0; }
.person { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--panel-2); }
.person:first-child { border-top: 0; }
.pp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.pp-who:hover b { color: var(--accent); }
.pp-who b { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-who span { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-acts { display: flex; gap: 6px; flex: none; }
.pp-acts button { padding: 6px 12px; font-size: .82rem; }
@media (max-width: 420px) {
  .pp-acts button { padding: 6px 10px; }
}
.invite-card .me-handle { color: var(--muted); font-size: .88rem; }
.invite-card .avatar { margin: 0 auto 10px; }
.invite-card .share-actions { justify-content: center; align-items: center; margin-top: 16px; }
.invite-card p { margin-top: 10px; }
.quiet-link { color: var(--muted); font-size: .88rem; }

/* the comparison: you and the people you follow, on one lift */
.cmp-verdict { margin: -4px 0 16px; font-size: 1rem; font-weight: 700; color: var(--accent); }
body.bro .cmp-verdict { text-transform: uppercase; letter-spacing: .02em; }
.cmp-head { margin: 0 0 4px; }
.cmp-list { list-style: none; margin: 0 0 6px; padding: 0; }
.cmp-row { display: grid; grid-template-columns: auto minmax(0, 11rem) 1fr 4.6rem; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--panel-2); }
.cmp-row:first-child { border-top: 0; }
.cmp-who { display: flex; flex-direction: column; min-width: 0; }
.cmp-who b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-who span { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-bar { height: 8px; border-radius: 4px; background: #252e3a; overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3d6fa8, var(--blue)); }
.cmp-row.me .cmp-bar i { background: linear-gradient(90deg, #c99a24, #f2b632); }
.cmp-row.me .cmp-who b { color: var(--accent); }
.cmp-v { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-v small { color: var(--muted); font-weight: 600; font-size: .72em; margin-left: 2px; }
@media (max-width: 480px) {
  .cmp-row { grid-template-columns: auto minmax(0, 1fr) 4.2rem; }
  .cmp-bar { grid-column: 2 / -1; grid-row: 2; }
}

/* The one-time "let them in?" sheet: the first approval (or invite link) is
   the moment sharing starts, so it says what followers will see and asks. */
.share-ask {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 8, 12, .72);
}
.sa-card {
  width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.sa-card h3 { margin: 0 0 10px; font-size: 1.15rem; }
.sa-card p { margin: 0 0 8px; color: var(--text); font-size: .92rem; }
.sa-card ul { margin: 0 0 10px; padding-left: 1.2rem; color: var(--text); font-size: .9rem; }
.sa-card li { margin: 3px 0; }
.sa-card .sa-small { color: var(--muted); font-size: .82rem; }
.sa-card .share-actions { margin-top: 14px; }

/* the settings page's privacy section */
button.quiet.danger:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.vis-panel > .lo-row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vis-panel .vc-note a { color: var(--accent); }
.pv-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pv-acts button { padding: 6px 12px; font-size: .82rem; }
.pv-blocked { grid-template-columns: 1fr; }
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; color: var(--muted); font-size: .86rem; }
.pv-list b { color: var(--text); margin-right: 4px; }
.pv-list button { padding: 5px 12px; font-size: .82rem; }
.feed-empty.locked > svg { width: 28px; height: 28px; color: var(--muted); display: block; margin: 0 auto 8px; }

/* What a workout's owner wrote about it; the share page's form. */
.post-desc { margin: -6px 0 12px; color: var(--text); font-size: .92rem; line-height: 1.45;
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.full-desc { margin: -8px 0 16px; color: var(--text); font-size: .98rem; line-height: 1.5; white-space: pre-line; }
.quiet-btn {
  display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px;
  padding: .5rem 1rem; font-size: .9rem; font-weight: 600; color: var(--muted); text-decoration: none;
}
.quiet-btn:hover { color: var(--text); border-color: var(--muted); }
.compose-form { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.compose-form label { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-top: 8px; }
.compose-form input, .compose-form textarea {
  width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: .65rem .8rem; font: inherit; font-size: 1rem;
}
.compose-form input:focus, .compose-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.compose-form textarea { resize: vertical; min-height: 96px; }
.compose-form .share-actions { align-items: center; }

/* ---- friends: the shape every social app has -------------------------------
   A bar on top of every screen below the feed (back, a title, one action);
   the feed's search pill and bell; profiles (avatar, name, counts, one row
   of buttons); lists of people; and the action sheet. */
.topbar {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 6px;
  min-height: 44px; margin: -4px 0 -4px;
}
.tb-back, .tb-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.tb-back:hover, .tb-icon:hover { background: var(--panel); }
.tb-title { margin: 0; text-align: center; font-size: 1.02rem; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-right { display: flex; justify-content: flex-end; }

.search-pill {
  min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: .92rem;
}
.search-pill:hover { border-color: var(--muted); color: var(--text); }
.bell {
  position: relative; flex: none; display: grid; place-items: center;
  border-radius: 50%; text-decoration: none;
}
.bell-badge {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; background: var(--red); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--bg);
}
.find-card h3 { margin: 0 0 4px; font-size: 1.02rem; }
.find-acts, .prof-acts { display: flex; gap: 8px; }
.find-acts { margin-top: 12px; }
.find-acts > *, .prof-acts > * { flex: 1; justify-content: center; gap: 7px; white-space: nowrap; padding-inline: .6rem; }
.quiet-btn { background: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; }
.prof-acts button.primary, .prof-acts button.quiet { padding: .55rem 1rem; }

/* search */
.topbar.search-top { grid-template-columns: 40px minmax(0, 1fr); }
.search-field {
  display: flex; align-items: center; gap: 9px; padding: 0 14px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
}
.search-field:focus-within { border-color: var(--accent); }
.search-field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text);
  font: inherit; font-size: 1rem; padding: 10px 0;
}
.search-note { color: var(--muted); font-size: .9rem; margin: 6px 0; text-align: center; }
.rel-tag {
  display: inline-block; color: var(--muted); font-size: .76rem; font-weight: 600; white-space: nowrap;
  background: var(--panel-2); border-radius: 6px; padding: 1px 7px;
}
.people-list + .people-list { margin-top: 0; border-top: 1px solid var(--panel-2); }
.action-row .row-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--panel-2); color: var(--text);
}
.action-row button.pp-who { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.action-row button.pp-who:hover b { color: var(--accent); }

/* profiles */
.prof {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
}
.prof-top { display: flex; align-items: center; gap: 16px; }
.prof .avatar.lg { width: 72px; height: 72px; font-size: 1.45rem; }
.prof-id { min-width: 0; }
.prof-name { font-size: 1.22rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.prof-handle { margin-top: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  color: var(--muted); font-size: .88rem; }
.prof-handle a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.prof-handle a:hover { color: var(--text); }
.prof-handle svg { width: 14px; height: 14px; }
.prof-bio { margin: -4px 0 0; font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }
.prof-counts {
  display: grid; grid-template-columns: repeat(3, 1fr); text-align: center;
  border-top: 1px solid var(--panel-2); border-bottom: 1px solid var(--panel-2); padding: 8px 0;
}
.prof-counts > * { display: flex; flex-direction: column; padding: 4px 0; border-radius: 8px; color: inherit; text-decoration: none; }
.prof-counts a:hover { background: var(--panel-2); }
.prof-counts b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.prof-counts span { color: var(--muted); font-size: .8rem; }
.only-you { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.only-you svg { width: 12px; height: 12px; }

/* followers and following: two tabs over one list */
.seg-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); margin-top: -6px; }
.seg-tabs a {
  padding: 10px; margin-bottom: -1px; text-align: center; color: var(--muted); text-decoration: none;
  font-size: .9rem; border-bottom: 2px solid transparent;
}
.seg-tabs a.on { color: var(--text); font-weight: 700; border-bottom-color: var(--text); }
.seg-tabs b { color: var(--text); }

/* the bell */
.people-sec.new { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.notice .pp-who > span.nt-text { color: var(--text); font-size: .9rem; line-height: 1.35; white-space: normal; }
.nt-text b { font-weight: 700; font-size: inherit; white-space: normal; }
.nt-emoji { font-size: 1.2rem; line-height: 1; }
.quiet-empty { text-align: center; color: var(--muted); padding: 14px 8px 6px; }
.quiet-empty svg { width: 28px; height: 28px; }
.quiet-empty p { margin: 8px auto 12px; max-width: 36ch; font-size: .9rem; }

/* the action sheet: a few choices, from the bottom of a phone */
.sheet {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  padding: 12px; background: rgba(5, 8, 12, .6);
}
@media (min-width: 640px) { .sheet { align-items: center; } }
.sheet-card {
  width: min(420px, 100%); display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.sheet-card h3 { margin: 0; padding: 16px 18px 6px; font-size: 1rem; text-align: center; overflow-wrap: anywhere; }
.sheet-card p { margin: 0; padding: 0 18px 12px; color: var(--muted); font-size: .86rem; text-align: center; }
.sheet-btn {
  padding: 14px; background: none; border: 0; border-top: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: .98rem; font-weight: 600; cursor: pointer;
}
.sheet-card > .sheet-btn:first-child { border-top: 0; }
.sheet-btn:hover, .sheet-btn:focus-visible { background: var(--panel-2); outline: none; }
.sheet-btn.danger { color: var(--red); }
.sheet-btn.cancel { color: var(--muted); font-weight: 500; }