/* ==========================================================================
   Barbell Pocket — the app, recreated for the homepage demos
   Everything inside .bp-app follows the iOS app's own design system (dark mode):
   the app's colours and type roles, and
   geometry from each component's StyleSheet (1 CSS px = 1 pt). The page around it
   stays Concept 01. Fonts are the app's own IBM Plex pair, self-hosted (SIL OFL 1.1,
   see ../fonts/OFL.txt) — no third-party font requests.
   ========================================================================== */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.bp-app {
  /* Colors.dark */
  --app-bg: #151718;
  --app-card: #1e2021;
  --app-border: #2b2e2f;
  --app-text: #ecedee;
  --app-muted: #9ba1a6;       /* mutedText, icon */
  --app-subtle: #878d92;      /* subtleText */
  --app-placeholder: #6b7173; /* placeholderText */
  --app-tint: #ffffff;        /* dark-mode tint */
  --app-accent: #22d3ee;      /* accentPrimary */
  --app-amber: #f2b84b;       /* accentSecondary */
  --app-success: #4caf50;
  --app-negative: #e53935;
  --app-destructive: #d32f2f;
  --app-next-border: #959697; /* 50% blend of border -> tint, the "next set" outline */
  --plex-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --plex-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", Roboto, sans-serif;
  --hair: 1px;
  position: relative;
  font-family: var(--plex-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--app-text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  letter-spacing: 0;
}
@media (min-resolution: 2dppx) { .bp-app { --hair: 0.5px; } }
.bp-app *, .bp-app *::before, .bp-app *::after { box-sizing: border-box; }
/* resets stay at zero specificity (:where) so every component rule below wins over them */
.bp-app :where(p) { margin: 0; }
.bp-app :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; }
.bp-app :where(button:disabled) { cursor: default; }
.bp-app :focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: 6px; }
.bp-app .ic { display: inline-flex; flex: none; line-height: 0; }
.bp-app .ic svg { display: block; overflow: visible; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* shared type roles */
.bp-app .mono-label { font-family: var(--plex-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.4px; text-transform: uppercase; }
.bp-app .btn-label { font-family: var(--plex-mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.3px; text-transform: uppercase; }
.bp-app .btn-label-primary { font-family: var(--plex-mono); font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.5px; text-transform: uppercase; }

/* ---------------- the phone: one frame for all three demos ----------------
   The screen is 390 x 640 pt, laid out at fixed points like the app. The frame takes the width
   its column gives it (up to 390 px) and keeps the screen's aspect, and js/app-kit.js zooms the
   screen down to fit (--phone-scale), so the demos share one footprint and resize continuously.
   Anything taller than the screen scrolls inside it, as it would on the phone. */
.phone-frame {
  --phone-h: 640px;
  --phone-scale: 1;
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 390 / 640;
  margin-inline: auto;
  border-radius: 16px;
  box-shadow: 0 30px 44px -26px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.phone {
  position: absolute; left: 0; top: 0;
  width: 390px;
  height: var(--phone-h, 640px);
  zoom: var(--phone-scale);
  display: flex; flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}
.phone > .app-statusbar, .phone > .wk-header, .phone > .nav-bar { flex: none; }
/* the screen's list: wheel, touch and (js/app-kit.js dragScroll) mouse drag; a thin scrollbar says
   there is more below; scrolling chains to the page, so a swipe over the phone never sticks */
.app-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; scrollbar-width: thin; scrollbar-color: rgba(236, 237, 238, 0.22) transparent; }   /* the demos drive the scroll offset themselves: no scroll anchoring */
.app-scroll::-webkit-scrollbar { width: 5px; }
.app-scroll::-webkit-scrollbar-track { background: transparent; }
.app-scroll::-webkit-scrollbar-thumb { background: rgba(236, 237, 238, 0.22); border-radius: 3px; }
.app-scroll.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.app-scroll.is-dragging * { pointer-events: none; }
/* a soft edge at the bottom of the screen while there is more to scroll to */
.phone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 4;
  background: linear-gradient(to bottom, rgba(21, 23, 24, 0), var(--app-bg));
  pointer-events: none; opacity: 0; transition: opacity 200ms linear;
}
.phone.more-below::after { opacity: 1; }
/* surrounding chrome that is not part of the demonstration reads as chrome, not as controls */
.app-chrome { color: var(--app-placeholder); pointer-events: none; }
.app-statusbar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 4px 26px 0 30px; font-family: var(--sys); font-weight: 600; font-size: 15px; letter-spacing: -0.2px; }
.app-statusbar .sb-right { display: inline-flex; align-items: center; gap: 6px; }
.app-statusbar .sb-right .ic:first-child svg { width: 15px; height: 12px; }
.sb-battery { position: relative; width: 24px; height: 12px; border: 1px solid rgba(236, 237, 238, 0.55); border-radius: 3.5px; padding: 1.5px; }
.sb-battery::after { content: ""; position: absolute; right: -3.5px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(236, 237, 238, 0.55); }
.sb-battery-level { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: var(--app-text); }

/* the round header button (the iOS 26 glass circle behind the Dashboard's Intel entry) */
.hdr-circle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 21px; background: var(--app-card); border: var(--hair) solid var(--app-border); color: var(--app-tint); flex: none; }
.hdr-circle:hover { border-color: var(--app-muted); }

/* ================================================================
   TRACK — the live workout screen
   ================================================================ */
.wk-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 12px; gap: 8px; }
.wk-spacer { min-width: 52px; }   /* where the app's Back sits; the title stays centred */
.wk-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.wk-title { font-weight: 600; font-size: 17px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wk-status { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.status-label { display: inline-flex; align-items: center; gap: 6px; color: var(--app-accent); }
.status-dot { width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex: none; }
.wk-timer { font-size: 13px; line-height: 16px; color: var(--app-subtle); font-variant-numeric: tabular-nums; }
.wk-actions { display: flex; align-items: center; gap: 20px; min-width: 52px; justify-content: flex-end; }
.wk-clock { display: flex; flex-direction: column; align-items: center; color: var(--app-muted); position: relative; }
.wk-clock::before, .wk-finish::before { content: ""; position: absolute; inset: -10px -8px; }   /* header buttons: a finger-sized target around the glyph */
.wk-finish { position: relative; }
.wk-clock-readout { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-family: var(--plex-sans); font-size: 11px; line-height: 13px; color: var(--app-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-finish { color: var(--app-accent); }
.wk-finish:disabled { opacity: 0.5; }
.wk-body { padding-top: 4px; padding-bottom: 8px; }

/* Swipe to delete, as in the app: a card rides over a red layer with a white trash; a
   set row over a neutral one — the card's own colour and a muted trash */
.ex-swipe { position: relative; margin: 0 16px 16px; }
.ex-swipe-bg, .set-swipe-bg { position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: flex-end; padding-right: 24px; opacity: 0; }
.ex-swipe-bg { background: #d32f2f; color: #fff; }
.set-swipe { position: relative; margin-bottom: 6px; }
.set-swipe-bg { background: var(--app-card); color: var(--app-muted); border-radius: 10px; }
.ex-card { position: relative; padding: 14px; border-radius: 12px; border: var(--hair) solid var(--app-border); background: var(--app-card); touch-action: pan-y; }
.ex-card.swiping, .set-row.swiping { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.ex-card.swiping *, .set-row.swiping * { pointer-events: none; }
.set-row { position: relative; touch-action: pan-y; }
.ex-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-card:not(.collapsed) .ex-header { margin-bottom: 10px; }
.ex-title { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.ex-title { cursor: pointer; }
.ex-actions { display: flex; align-items: center; gap: 12px; flex: none; color: var(--app-muted); }
.ex-actions button { display: inline-flex; align-items: center; justify-content: center; color: inherit; position: relative; }
.ex-actions button::before { content: ""; position: absolute; inset: -8px; }   /* hitSlop 8 */
.ex-actions button.on { color: var(--app-tint); }
.priority-ring { width: 16px; height: 16px; border-radius: 8px; border: 2px solid var(--app-border); display: inline-flex; align-items: center; justify-content: center; }
.priority-core { width: 6px; height: 6px; border-radius: 3px; }
.ex-card.superset { border-left-width: 4px; border-left-style: solid; }
.superset-label { font-family: var(--plex-mono); font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 4px; display: block; }
.superset-label[hidden] { display: none; }   /* only a card in a superset carries the caption */
/* the utility row, as the app lays it out: one line — the quick-add pills, Fields, and the Superset
   icon at the trailing edge (marginLeft auto). The pills are the app's 26 pt pills with a slightly
   tighter inset, so the three of them and the icon share a 390 pt card without touching. */
.utility-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.utility-row .chip-row { margin-top: 0; flex: 1; min-width: 0; gap: 6px; }
.utility-row .pill { padding: 0 8px; }
.utility-row .utility-icon { margin-left: auto; }
/* a narrower screen (a smaller iPhone): the pills tighten so the row still fits on one line */
.phone.narrow .utility-row { gap: 4px; }
.phone.narrow .utility-row .chip-row { gap: 4px; }
.phone.narrow .utility-row .pill { padding: 0 6px; font-size: 11px; letter-spacing: 0.1px; }
/* the note under the name: bodySecondary in mutedText, no box, up to six lines; a tap opens the card */
.inline-note { display: block; width: 100%; margin: 0 0 10px; text-align: left; font-size: 13px; line-height: 18px; color: var(--app-muted); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.inline-note[hidden] { display: none; }
.inline-note:active { opacity: 0.5; }
/* NoteSheet: a centred card (max 420, radius 14, hairline, padding 16, gap 12) */
.note-card { width: 100%; max-width: 420px; border-radius: 14px; border: var(--hair) solid var(--app-border); background: var(--app-bg); padding: 16px; display: grid; gap: 12px; }
.note-title { color: var(--app-subtle); }
.note-card .note-input { min-height: 92px; max-height: 160px; border-radius: 8px; padding: 8px 10px; }
.note-card .pin-row { margin-top: 0; }
.note-actions { display: flex; align-items: center; gap: 4px; }
.note-actions-spacer { flex: 1; }
.note-btn { padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--app-muted); }
.note-btn.primary { color: var(--app-tint); }
.note-btn.destructive { color: var(--app-destructive); }
.utility-icon { color: var(--app-muted); display: inline-flex; padding: 4px; margin: -4px; flex: none; position: relative; }
.utility-icon::before { content: ""; position: absolute; inset: -8px; }   /* hitSlop 8, as the app's superset control */
.utility-icon.on { color: var(--accent, var(--app-tint)); }
.pill.fields-pill { border-color: var(--app-amber); background: rgba(242, 184, 75, 0.1); color: var(--app-amber); }
.pill.fields-pill .ic svg { width: 13px; height: 13px; }
.pill.active { background: var(--app-tint); border-color: var(--app-tint); color: var(--app-bg); }
.wk-empty { margin: 32px 16px; text-align: center; color: var(--app-subtle); font-size: 14px; }
.ex-card.leaving { transition: opacity 160ms linear, transform 160ms ease-in; opacity: 0; transform: scale(0.98); }

/* bottom sheets (Fields, Note) share the rest-timer sheet's scaffolding */
.app-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--app-bg); border-radius: 20px 20px 0 0; padding: 20px 20px 28px; max-height: 88%; overflow-y: auto; }
.sheet-section { margin-bottom: 18px; }
.sheet-section-title { font-size: 12px; line-height: 16px; color: var(--app-subtle); margin-bottom: 8px; }
.sheet-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-pills .pill { height: 30px; padding: 0 12px; gap: 6px; }
.sheet-pills .pill .ic svg { width: 11px; height: 11px; }
.sheet-done { display: block; margin: 4px auto 0; font-weight: 600; color: var(--app-muted); padding: 8px 16px; }
.note-input { display: block; width: 100%; min-height: 96px; resize: none; border-radius: 10px; border: var(--hair) solid var(--app-border); background: var(--app-card); color: var(--app-text); font: inherit; font-size: 15px; line-height: 22px; padding: 10px 12px; outline: none; }
.note-input:focus-visible { border-color: var(--app-accent); }
.note-input::placeholder { color: var(--app-placeholder); }
.pin-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.pin-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--app-text); }
.pin-toggle .ic { color: var(--app-muted); }
.pin-toggle[aria-pressed="true"] .ic { color: var(--app-tint); }
.pin-help { font-size: 13px; line-height: 18px; color: var(--app-subtle); margin-top: 4px; }

/* colour swatches (PriorityColorPicker: the same FOLDER_COLORS palette supersets use) */
.swatch-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px; }
.swatch { width: 34px; height: 34px; border-radius: 17px; border: 2px solid transparent; position: relative; }
.swatch[aria-pressed="true"] { border-color: var(--app-tint); }
.swatch[aria-pressed="true"]::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--app-bg); }
.action-option.plain { color: var(--app-muted); }
.ex-body { overflow: hidden; }
.ex-body-inner { padding-top: 0; }

.set-row { border: var(--hair) solid var(--app-border); border-radius: 10px; padding: 8px; transition: border-color 100ms linear; }
.set-row.done { background: var(--app-card); }
.set-row.next { border: 1.5px solid var(--app-next-border); padding: 7px; }
.set-top { display: flex; align-items: flex-end; gap: 10px; }
.set-num { flex: none; min-width: 22px; text-align: center; border-radius: 6px; padding: 2px 4px; margin-bottom: 8px; font-size: 13px; line-height: 18px; color: var(--app-subtle); font-variant-numeric: tabular-nums; }
.fields { flex: 1; min-width: 0; display: flex; gap: 6px; }
.field { min-width: 0; flex-basis: 0; display: flex; flex-direction: column; }
.field-label { height: 28px; margin-bottom: 3px; overflow: hidden; color: var(--app-subtle); font-family: var(--plex-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
.fields.dense .field-label { height: 26px; font-size: 10px; line-height: 13px; letter-spacing: 0.2px; }
.field-box { position: relative; width: 100%; height: 32px; border-radius: 8px; border: var(--hair) solid var(--app-border); background: transparent; }
.field-input, .field-btn { display: block; width: 100%; height: 100%; padding: 0 8px; border: 0; background: transparent; color: var(--app-text); font-family: var(--sys); font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums; text-align: left; border-radius: 8px; outline: none; }
.field-input { -webkit-appearance: none; appearance: none; caret-color: var(--app-accent); }
.field-input::selection { background: rgba(34, 211, 238, 0.35); }
.field-input::placeholder { color: var(--app-placeholder); opacity: 1; }
.field-btn { cursor: pointer; }
.field-btn .ph { color: var(--app-placeholder); }
.field-box:focus-within { border-color: var(--app-muted); }
.field-box.editing { border-color: var(--app-accent); }
.check { flex: none; width: 28px; height: 28px; border-radius: 14px; border: 2px solid var(--app-tint); display: flex; align-items: center; justify-content: center; color: var(--app-bg); position: relative; }
.check::before { content: ""; position: absolute; inset: -8px; }  /* hitSlop 8 */
.check.on { background: var(--app-success); border-color: var(--app-success); }
.check .ic { opacity: 0; transform: scale(0.6); transition: opacity 100ms linear, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.check.on .ic { opacity: 1; transform: none; }
.add-set { display: block; width: 100%; padding: 8px 0; text-align: center; color: var(--app-accent); }
.chip-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; border: var(--hair) solid var(--app-border); color: var(--app-muted); white-space: nowrap; flex: none; font-family: var(--plex-mono); font-weight: 500; font-size: 12px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; }
button.pill:active { opacity: 0.6; }

/* RPE slider keyboard */
.rpe-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--app-card); border-top: var(--hair) solid var(--app-border); padding: 14px 20px 18px; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); }
.rpe-panel[hidden] { display: none; }
.rpe-head { display: flex; justify-content: space-between; align-items: center; }
.rpe-head .mono-label { color: var(--app-subtle); }
.rpe-done { color: var(--app-accent); }
.rpe-readout { font-family: var(--plex-mono); font-weight: 600; font-size: 40px; line-height: 48px; text-align: center; margin: 6px 0; font-variant-numeric: tabular-nums; }
.rpe-track { position: relative; height: 44px; touch-action: none; cursor: pointer; }
.rpe-track-bg, .rpe-track-fill { position: absolute; left: 0; top: 19px; height: 6px; border-radius: 3px; }
.rpe-track-bg { right: 0; background: var(--app-border); }
.rpe-track-fill { background: var(--app-tint); }
.rpe-thumb { position: absolute; top: 9px; left: 0; width: 26px; height: 26px; border-radius: 13px; background: var(--app-tint); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); pointer-events: none; }
.rpe-track:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: 8px; }
.rpe-ticks { display: flex; gap: 6px; margin-top: 10px; }
.rpe-tick { flex: 1; height: 36px; border-radius: 18px; border: var(--hair) solid var(--app-border); color: var(--app-subtle); font-size: 13px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; min-width: 0; }
.rpe-tick.on { background: var(--app-tint); border-color: var(--app-tint); color: var(--app-bg); }

/* modals inside the phone */
.app-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.4); }
.app-scrim[hidden] { display: none; }
.rest-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--app-bg); border-radius: 20px 20px 0 0; padding: 24px 24px 32px; }
.rest-sheet[hidden] { display: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sheet-title { font-weight: 600; font-size: 16px; line-height: 24px; }
.sheet-close { color: var(--app-muted); padding: 4px; margin: -4px; }
.rest-label { text-align: center; color: var(--app-subtle); margin-bottom: 4px; }
.rest-time { font-family: var(--plex-mono); font-weight: 600; font-size: 48px; line-height: 58px; text-align: center; margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.rest-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.rest-chip { border: var(--hair) solid var(--app-border); border-radius: 14px; padding: 6px 12px; font-family: var(--plex-mono); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.3px; }
.rest-chip.on { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-bg); }
.rest-custom-toggle { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border: var(--hair) solid var(--app-border); border-radius: 10px; padding: 12px 0; }
.rest-custom-toggle .ic { color: var(--app-muted); }
.rest-custom { margin-top: 12px; display: grid; gap: 12px; }
.rest-custom[hidden] { display: none; }
.stepper-row { display: flex; gap: 12px; }
.stepper { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.stepper-btn { width: 34px; height: 34px; border-radius: 17px; border: var(--hair) solid var(--app-border); display: inline-flex; align-items: center; justify-content: center; color: var(--app-text); flex: none; }
.stepper-btn:disabled { opacity: 0.35; }
.stepper-value { position: relative; flex: 1; min-width: 70px; min-height: 48px; border-radius: 8px; border: var(--hair) solid var(--app-border); display: flex; align-items: center; justify-content: center; font-family: var(--plex-mono); font-weight: 600; font-size: 20px; line-height: 24px; font-variant-numeric: tabular-nums; }
.stepper-unit { position: absolute; right: 8px; color: var(--app-subtle); }
.btn-primary-app { display: block; width: 100%; border-radius: 10px; padding: 12px 0; text-align: center; background: var(--app-accent); color: var(--app-bg); }
.rest-controls { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.rest-controls[hidden] { display: none; }
.rest-controls button { border-radius: 10px; padding: 12px 28px; border: var(--hair) solid var(--app-border); }
.rest-controls .primary { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-bg); }

.center-layer { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 32px; pointer-events: none; }
.center-layer[hidden] { display: none; }
.center-layer > * { pointer-events: auto; }
.action-card { width: 100%; max-width: 320px; border-radius: 14px; border: var(--hair) solid var(--app-border); background: var(--app-bg); overflow: hidden; }
.action-title { padding: 12px 16px; border-bottom: var(--hair) solid var(--app-border); font-size: 13px; line-height: 18px; text-align: center; color: var(--app-subtle); }
.action-option { display: block; width: 100%; padding: 14px 0; text-align: center; color: var(--app-tint); }
.action-option + .action-option { border-top: var(--hair) solid var(--app-border); }
.action-option.destructive { color: var(--app-destructive); }
.action-cancel { display: block; width: 100%; padding: 14px 0; margin-top: 6px; text-align: center; font-weight: 600; color: var(--app-muted); }

.complete-card { width: 100%; max-width: 340px; border-radius: 16px; border: var(--hair) solid var(--app-border); background: var(--app-bg); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.complete-ring { width: 52px; height: 52px; border-radius: 26px; border: 1.5px solid var(--app-accent); color: var(--app-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.complete-status { box-shadow: none; }
.complete-status .status-dot { box-shadow: 0 0 6px 1px rgba(34, 211, 238, 0.55); }
.complete-title { font-weight: 600; font-size: 16px; line-height: 24px; text-align: center; }
.complete-stats { display: flex; align-self: stretch; margin-top: 6px; }
.complete-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.complete-stat b { font-weight: 400; font-size: 26px; line-height: 32px; font-variant-numeric: tabular-nums; }
.complete-stat span { color: var(--app-subtle); text-align: center; }
.pr-band { display: inline-flex; align-items: center; gap: 6px; border: var(--hair) solid var(--app-amber); border-radius: 999px; padding: 5px 12px; margin-top: 4px; color: var(--app-amber); }
.pr-names { font-size: 14px; line-height: 20px; color: var(--app-subtle); text-align: center; }
.complete-done { margin-top: 10px; }

.rest-saved { margin-bottom: 24px; }
.rest-saved[hidden] { display: none; }
.saved-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--app-subtle); }
.rest-saved .rest-chips { justify-content: center; margin-bottom: 0; }

/* the iOS system alert (Alert.alert) the app raises at the field cap */
.ios-alert { width: 270px; border-radius: 14px; overflow: hidden; background: rgba(44, 44, 46, 0.97); font-family: var(--sys); text-align: center; }
.ios-alert-text { padding: 19px 16px 18px; display: grid; gap: 4px; }
.ios-alert-title { font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.4px; }
.ios-alert-msg { font-size: 13px; line-height: 17px; letter-spacing: -0.1px; }
.ios-alert-ok { display: block; width: 100%; height: 44px; border-top: var(--hair) solid rgba(84, 84, 88, 0.65) !important; color: #0a84ff; font-family: var(--sys); font-weight: 600; font-size: 17px; text-align: center !important; }

.app-toast { position: absolute; left: 16px; right: 16px; top: 52px; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
.app-toast[hidden] { display: none; }
.app-toast-inner { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--app-card); border: var(--hair) solid var(--app-border); font-size: 13px; line-height: 18px; }
.app-toast-inner .ic { color: var(--app-success); }

/* ================================================================
   VISUALIZE — the Dashboard's exercise screen
   ================================================================ */
.nav-bar { position: relative; display: flex; align-items: center; height: 54px; padding: 0 16px; border-bottom: var(--hair) solid var(--app-border); }
.nav-bar-title { position: absolute; left: 64px; right: 64px; text-align: center; font-weight: 600; font-size: 17px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.nav-bar-title.sys { font-family: var(--sys); letter-spacing: -0.2px; }
.nav-bar .intel-btn { margin-left: auto; text-decoration: none; }
.dash-body { padding: 12px 16px 12px; }
.dash-name { font-weight: 600; font-size: 32px; line-height: 38px; margin: 0 0 8px; letter-spacing: -0.2px; }
.category-badge { display: inline-block; border-radius: 12px; padding: 4px 10px; margin-bottom: 14px; background: var(--app-tint); color: var(--app-bg); font-weight: 600; font-size: 12px; line-height: 16px; }
.category-badge[hidden] { display: none; }
.dash-section-label { font-family: var(--plex-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.4px; color: var(--app-subtle); margin: 4px 0 8px; }
/* the range pills: a continuous strip (wheel, drag with momentum, trackpad, touch); a soft fade at
   whichever edge has more to show */
.range-row { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 -16px 6px; padding: 0 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 16px; touch-action: pan-x pan-y; cursor: grab;
  --fade-l: 32px; --fade-r: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); }
.range-row.at-start { --fade-l: 0px; }
.range-row.at-end { --fade-r: 0px; }
.range-row.is-dragging { cursor: grabbing; }
.range-row.is-dragging * { pointer-events: none; }
.range-row::-webkit-scrollbar { display: none; }
.range-chip { flex: none; border: var(--hair) solid var(--app-border); border-radius: 14px; padding: 6px 14px; font-size: 13px; line-height: 16px; color: var(--app-text); }
.range-chip[aria-checked="true"] { background: var(--app-tint); border-color: var(--app-tint); color: var(--app-bg); }
.stat-card { border-radius: 12px; border: var(--hair) solid var(--app-border); background: var(--app-card); }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
.stat-row + .stat-row { border-top: var(--hair) solid var(--app-border); }
.stat-label-col { flex: 1; min-width: 0; }
.stat-label-row { display: flex; align-items: center; gap: 4px; }
.stat-label { font-size: 14px; line-height: 24px; }
.app-info { color: var(--app-subtle); display: inline-flex; padding: 4px; margin: -4px; border-radius: 50%; position: relative; }
.app-info::before { content: ""; position: absolute; inset: -8px; }   /* hitSlop 8, as the app's (i) */
.stat-caption { font-size: 12px; line-height: 16px; margin-top: 2px; color: var(--app-subtle); font-variant-numeric: tabular-nums; }
.stat-value { flex-shrink: 1; max-width: 55%; text-align: right; font-weight: 600; font-size: 15px; line-height: 24px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a chart section: ChartSectionHeader (title, scope caption, info, chevron) over the chart; the whole
   header row toggles the section (the app's disclosure), the (i) stays its own button above it */
.chart-section { margin-top: 10px; border-radius: 12px; border: var(--hair) solid var(--app-border); background: var(--app-card); }
.chart-section-head { position: relative; display: flex; align-items: center; gap: 6px; padding: 12px 14px; color: var(--app-subtle); }
.chart-toggle { position: absolute; inset: 0; border-radius: 12px; }
.chart-toggle:focus-visible { outline-offset: -2px; }
.chart-section-head .app-info, .chart-chevron { position: relative; z-index: 1; }
.chart-section-head .app-info { pointer-events: auto; }
.chart-chevron { display: inline-flex; color: var(--app-subtle); pointer-events: none; margin-left: 2px; }
.chart-disclosure { overflow: hidden; }
.chart-disclosure[hidden] { display: none; }
.chart-section-titles { flex: 1; min-width: 0; position: relative; pointer-events: none; }
.chart-section-title { font-family: var(--plex-mono); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.5px; display: block; }
.chart-section-caption { font-size: 12px; line-height: 14px; margin-top: 1px; display: block; font-variant-numeric: tabular-nums; }
.chart-section-body { padding: 0 14px 12px; }
.dash-empty { margin: 24px 0; text-align: center; font-size: 14px; color: var(--app-subtle); }
.dash-swap { transition: opacity 140ms linear; }
.dash-swap.out { opacity: 0; }

/* charts */
.app-chart { position: relative; }
.chart-row { display: flex; }
.chart-ylabels { width: 48px; flex: none; display: flex; flex-direction: column; justify-content: space-between; padding-right: 6px; font-size: 11px; line-height: 14px; color: var(--app-subtle); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-plot { position: relative; flex: 1; min-width: 0; touch-action: pan-y; cursor: crosshair; outline: none; border-radius: 4px; -webkit-user-select: none; user-select: none; }
.chart-plot.static { cursor: default; }
.chart-plot:focus-visible { box-shadow: 0 0 0 2px var(--app-accent); }
.chart-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.chart-grid { stroke: var(--app-border); stroke-width: 1; shape-rendering: crispEdges; }
.chart-guide { stroke: var(--app-muted); }
.chart-dot { stroke: var(--app-card); }
.chart-tip { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 7px; border: var(--hair) solid var(--app-border); background: var(--app-card); padding: 3px 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); font-family: var(--sys); white-space: nowrap; }
.tip-first { font-size: 11px; line-height: 13px; font-weight: 600; color: var(--app-text); }
.tip-line { font-size: 10px; line-height: 12px; color: var(--app-subtle); font-variant-numeric: tabular-nums; }
.chart-xlabels { display: flex; justify-content: space-between; margin-top: 6px; padding-left: 48px; font-size: 11px; line-height: 16px; color: var(--app-subtle); white-space: nowrap; }
.scatter-axis { margin-top: 4px !important; text-align: center; font-size: 10px; line-height: 14px; color: var(--app-subtle); }
.bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bar-value { font-size: 12px; line-height: 20px; font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.bar-track { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill { width: 55%; border-radius: 6px; transform-origin: 50% 100%; }
.bar-label { font-size: 11px; line-height: 16px; margin-top: 6px; color: var(--app-subtle); white-space: nowrap; }
.ranked { display: grid; gap: 8px; }
.ranked-heading { font-family: var(--plex-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--app-subtle); }
.ranked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranked-row { display: grid; gap: 4px; }
.ranked-label { font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranked-bar-row { display: flex; align-items: center; gap: 8px; }
.ranked-track { flex: 1; height: 6px; border-radius: 3px; background: var(--app-border); overflow: hidden; }
.ranked-fill { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; }
.ranked-fill.pos { background: var(--app-success); } .ranked-fill.neg { background: var(--app-negative); } .ranked-fill.flat { background: var(--app-subtle); }
.ranked-value { min-width: 44px; text-align: right; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.ranked-value.pos { color: var(--app-success); } .ranked-value.neg { color: var(--app-negative); } .ranked-value.flat { color: var(--app-subtle); }

/* InfoPopup */
.app-popover { position: absolute; z-index: 12; padding: 10px 12px; border-radius: 10px; border: var(--hair) solid var(--app-border); background: var(--app-card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); display: grid; gap: 6px; transform-origin: 50% 0; }
.app-popover p { font-size: 13px; line-height: 18px; color: var(--app-text); }

/* ================================================================
   UNDERSTAND — Athlete Intel
   ================================================================ */
.intel-feed { padding: 8px 16px 24px; display: grid; gap: 12px; align-content: start; }
.intel-slack { margin-top: -12px; height: 0; }   /* the close hold's spacer; the grid gap is cancelled */
.intel-slack[hidden] { display: none; }
.intel-card { border-radius: 12px; border: var(--hair) solid var(--app-border); border-left: 4px solid var(--accent); background: var(--app-card); }
.intel-head { display: grid; gap: 4px; width: 100%; padding: 14px; border-radius: 12px; }
.intel-head:focus-visible { outline-offset: -2px; }
.intel-category { font-family: var(--plex-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--app-subtle); }
.intel-headrow { display: flex; align-items: flex-start; gap: 6px; }
.intel-headline { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 24px; }
.intel-chevron { color: var(--app-subtle); margin-top: 4px; }
.hero-row { display: flex; align-items: baseline; gap: 4px; color: var(--accent); }
.hero-value { font-family: var(--plex-mono); font-weight: 600; font-size: 26px; line-height: 32px; font-variant-numeric: tabular-nums; }
.hero-unit { font-size: 13px; color: var(--app-subtle); }
.hero-trend { margin-left: 2px; align-self: center; }
.intel-summary { font-size: 13px; line-height: 18px; }
.confidence-row { display: flex; align-items: center; gap: 6px; }
.confidence-dot { width: 6px; height: 6px; border-radius: 3px; flex: none; }
.confidence-label { font-size: 11px; line-height: 16px; color: var(--app-subtle); }
.intel-body { overflow: hidden; }
.intel-body[hidden] { display: none; }
.intel-body-inner { border-top: var(--hair) solid var(--app-border); padding: 14px; display: grid; gap: 10px; }
.body-caption { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--app-subtle); font-family: var(--sys); }
.intel-line { font-size: 14px; line-height: 20px; }
.date-group { display: grid; gap: 2px; }
.date-group-label { font-family: var(--plex-mono); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--app-subtle); margin-bottom: 2px; }
.date-item { font-size: 13px; line-height: 19px; }
.date-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.date-summary-row .date-item { flex: 1; }
.date-toggle { font-size: 12px; line-height: 16px; color: var(--app-subtle); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.date-list { list-style: none; margin: 0; padding: 0; }
.date-list[hidden] { display: none; }
.evidence-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-bottom: var(--hair) solid var(--app-border); }
.evidence-label { font-size: 12.5px; line-height: 20px; color: var(--app-subtle); }
.evidence-value { font-weight: 600; font-size: 13px; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .bp-app *, .bp-app *::before, .bp-app *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* the close hold: an invisible spacer at the end of the Dashboard list */
.dash-slack { height: 0; }