/* ShapeUp — Exercise Log SPA styles (first pass: Log tab).
 * Blue ShapeUp theme, mobile-first. iOS Safari: inputs are >=16px to avoid
 * focus zoom; the true scroll container is .xl-main, not window. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/montserrat-variable.woff2') format('woff2-variations');
}

:root {
  --blue: #2563C9;
  --blue-dark: #1e4fa3;
  --blue-deep: #0d47a1;
  --blue-light: #e6f1fb;
  --error: #dc2626;
  --error-light: #fef2f2;
  --ok: #16a34a;
  --ink: #0f172a;
  --slate: #475569;
  --muted: #94a3b8;
  --border: #D5D9E0;
  --bg: #f4f6f8;
  --canvas: #F7F8FA;    /* app screen background — gray so white cards separate */
  --white: #ffffff;
  --split-selected: var(--blue);
  --radius: 6px;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.xl-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  background: var(--canvas);
  box-shadow: 0 0 40px rgba(15, 23, 42, 0.05);
}

/* ───────── burger + sidebar ───────── */

.xl-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
}

.xl-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background: var(--white);
  box-shadow: 4px 0 24px rgba(15,23,42,.12);
  z-index: 210;
  transform: translateX(-100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
}
.xl-sidebar.open { transform: translateX(0); }

.xl-sidebar-logo {
  padding: 8px 12px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.xl-sidebar-logo img {
  width: 120px;
  height: auto;
  display: block;
}

.xl-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xl-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--slate);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.xl-sidebar-item:hover {
  background: var(--bg);
  color: var(--ink);
}
.xl-sidebar-item.active {
  background: var(--blue-light);
  color: var(--blue);
}

.xl-sidebar-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xl-sidebar-icon svg { width: 18px; height: 18px; display: block; }
.xl-sidebar-svg-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  /* normalize any fill to black first, then recolor to --slate (#475569) */
  filter: brightness(0) invert(35%) sepia(12%) saturate(600%) hue-rotate(182deg) brightness(88%);
}
.xl-sidebar-item:hover .xl-sidebar-svg-icon {
  filter: brightness(0) invert(9%) sepia(18%) saturate(900%) hue-rotate(200deg) brightness(80%);
}
.xl-sidebar-item.active .xl-sidebar-svg-icon {
  /* recolor to --blue (#2563C9) */
  filter: brightness(0) invert(28%) sepia(80%) saturate(700%) hue-rotate(200deg) brightness(95%);
}

/* ───────── header (white bar, centered logo — per mockup) ───────── */

.xl-header {
  position: relative;            /* anchor for the absolutely-centered brand */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid #E7E9EE;
  color: var(--ink);
}

/* Left cluster: burger. */
.xl-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Right cluster: per-page action (e.g. help icon) + profile. */
.xl-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hamburger — plain dark icon button (was the white wordmark). */
.xl-burger {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.xl-burger:hover { background: #f1f3f6; }
.xl-burger-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* Centered brand — absolutely positioned so the logo stays dead-center
   regardless of what sits in the left/right clusters. */
.xl-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  text-decoration: none;
}
.xl-header .xl-logo { height: 22px; width: auto; display: block; }

/* ───────── top-level nav ───────── */

.xl-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.xl-nav-item {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.xl-nav-item:hover { background: #f1f3f6; color: var(--ink); }
.xl-nav-item.active { background: var(--blue-light); color: var(--blue); }

/* ───────── profile menu ───────── */

.xl-profile { position: relative; }

.xl-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
  font-family: inherit;
}
.xl-profile-name {
  color: var(--slate);
  font-size: 12px;
  font-weight: 500;
}
.xl-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

@keyframes xlMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.xl-menu {
  position: absolute;
  top: 46px;
  right: 0;
  width: 304px;
  background: #ffffff;
  border: 1px solid #e6e7eb;
  border-radius: 14px;
  box-shadow: 0 16px 40px -8px rgba(20, 24, 40, 0.28),
              0 4px 12px -4px rgba(20, 24, 40, 0.12);
  overflow: hidden;
  z-index: 50;
  transform-origin: top right;
  animation: xlMenuIn 0.14s ease-out;
  color: var(--ink);
}
.xl-menu[hidden] { display: none; }

/* identity */
.xl-menu-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
}
.xl-menu-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.xl-menu-id-text { min-width: 0; }
.xl-menu-name {
  font-size: 15px;
  font-weight: 600;
  color: #16181d;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xl-menu-email {
  font-size: 12.5px;
  color: #8a8f9c;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xl-menu-access {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xl-menu-divider { height: 1px; background: #eef0f3; }

/* actions */
.xl-menu-actions { padding: 6px; }
.xl-menu-logout-form { margin: 0; }
.xl-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: #2b2e36;
  text-align: left;
  text-decoration: none;
  background: none;
  transition: background .12s;
}
.xl-menu-item[hidden] { display: none; }
.xl-menu-item:hover { background: #f3f4f7; }
.xl-menu-item--danger { color: #c0392f; }
.xl-menu-item--danger:hover { background: #fcf2f1; }

.xl-menu-icon {
  width: 17px;
  height: 17px;
  flex: none;
  /* SVGs carry the theme color directly: #6b7080 (muted gray-blue),
     and #c0392f (red) for the danger/logout icon */
}

/* session */
.xl-menu-session { padding: 13px 16px 15px; background: #fafbfc; }
.xl-menu-session-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9aa0ad;
  margin-bottom: 10px;
}
.xl-menu-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.xl-menu-session-row:last-child { margin-bottom: 0; }
.xl-menu-session-key { font-size: 12.5px; color: #767c89; }
.xl-menu-session-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #3a3f4a;
  background: #eef0f3;
  padding: 2px 7px;
  border-radius: 5px;
}
.xl-menu-session-dur {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: #3a3f4a;
}
.xl-menu-session-dash { width: 14px; height: 1px; background: #c4c8d0; }

/* ───────── scroll body ───────── */

.xl-main {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* No top padding here on purpose — that space would scroll away with the
     content, leaving scrolled cards flush against .xl-tabbar with no gap.
     The top gap instead lives on .xl-tabbar's margin-bottom, outside the
     scroll container, so it's always present. */
  padding: 0 18px 32px;
}
/* Reserve room for the fixed bottom action bar (Log tab only) so the last cards
   / current-session panel aren't hidden behind it. Mirrors the bar height +
   margin (58 + 16 + safe-area). */
.xl-app.fab-on .xl-main {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

/* ───────── workout setup card ───────── */

.xl-setup {
  height: var(--setup-hero-height, auto);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.xl-setup-label {
  font-size: 11px; font-weight: 600;
  color: var(--slate); margin-bottom: 6px;
}

.xl-split-row { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; }

.xl-chip {
  --accent: var(--blue);
  font-family: var(--font);
  font-size: 10px; font-weight: 600;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
  white-space: nowrap;
  text-align: center;
}
.xl-chip:hover { border-color: var(--accent); color: var(--accent); }
.xl-chip.selected {
  background: var(--split-selected); border-color: var(--split-selected); color: #fff;
}
.xl-chip.empty { opacity: 0.45; }

.xl-focus-field { display: flex; flex-direction: column; gap: 6px; }
.xl-focus-label {
  font-size: 11px; font-weight: 600;
  color: var(--slate);
}
.xl-focus {
  width: 100%;
  font-family: var(--font); font-size: 13px;
  padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--white); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.xl-focus:disabled { background: var(--bg); color: var(--muted); }
.xl-focus:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* margin-top:auto pins the button row to the card's bottom edge (both cards
   share a fixed height); padding-top keeps the old 12px minimum gap. */
.xl-setup-actions { display: flex; margin-top: auto; padding-top: 12px; }

.xl-commit {
  width: 100%;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 15px;
  border: none; border-radius: 999px;
  background: var(--blue); color: #fff;
  cursor: pointer; transition: all 0.15s;
}
.xl-commit:hover:not(:disabled) { background: var(--blue-dark); }
.xl-commit:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }

.xl-finish {
  flex: 0 0 auto;
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--white); color: var(--ink);
  cursor: pointer; transition: all 0.15s;
}
.xl-finish:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.xl-finish:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }

.xl-switch-btn {
  flex: 0 0 auto;
  width: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--white); color: var(--slate);
  cursor: pointer; transition: all 0.15s;
}
.xl-switch-btn svg { width: 17px; height: 17px; }
.xl-switch-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* ───────── tab bar (grey pill track, icons only — per mockup) ───────── */

/* A rounded grey track holding four equal-width, icon-only tabs. The active
   tab gets a white pill (soft shadow, blue icon) that slides between tabs. */
.xl-tabbar {
  position: relative;            /* anchor for the sliding pill */
  z-index: 2;                    /* stay above scrolled .xl-main content */
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: #EFF0F3;
  border-radius: 999px;
  padding: 5px;
  margin: 14px 16px 16px;
}

/* ── sliding white pill ──
   A single white pill that slides to sit behind the active tab. JS positions
   it (left/width) so the transition does the animating. */
.xl-tab-glass {
  position: absolute;
  top: 5px;                      /* matches .xl-tabbar padding */
  left: 0;
  width: 0;
  height: calc(100% - 10px);     /* track height minus top+bottom padding */
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  pointer-events: none;
  opacity: 0;
  transition: left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
  z-index: 0;                    /* sits BEHIND the tab buttons (z-index:1) */
}
.xl-tab-glass.ready { opacity: 1; }

.xl-tabbtn {
  position: relative;            /* keep the icon above the sliding pill */
  z-index: 1;
  height: 44px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8A919E;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.28s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.xl-tabbtn:focus { outline: none; }
.xl-tabbtn:active { background: transparent; }
/* Icons-only per the mockup — labels are hidden (kept in markup for a11y). */
.xl-tabbtn-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.xl-panel { display: none; }
.xl-panel.active { display: block; }

/* ───────── program meta + cards ───────── */

.xl-program-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.xl-program-meta-label {
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.xl-program-meta-add {
  font-family: var(--font); font-size: 13px; font-weight: 650;
  color: var(--blue); background: none; border: none; cursor: pointer;
  padding: 0;
}
.xl-program-meta-add:hover { color: var(--blue-dark); }

/* ───────── active-session hero (State 4, docs/shapeup-new-design-spec.md) ─────────
   Replaces .xl-setup once a program is committed. */
.xl-hero {
  position: relative;
  height: var(--setup-hero-height, auto);
  display: flex;
  flex-direction: column;
  background: var(--blue);
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 201, 0.30);
  text-align: center;
  margin-bottom: 16px;
}
/* Mirrors the header .xl-help-btn "?" pattern: a fixed square box, everything
   inside it clickable. z-index keeps it above the hero's centered content so no
   sibling overlaps its corners. */
.xl-hero-switch {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: none; border-radius: 50%; background: none; color: #fff;
  cursor: pointer; flex: none;
  transition: background .12s;
}
.xl-hero-switch:hover { background: rgba(255, 255, 255, 0.15); }
.xl-hero-switch:active { background: rgba(255, 255, 255, 0.25); }
.xl-hero-switch-icon { display: block; width: 20px; height: 20px; }
.xl-hero-kicker {
  font-size: 13px; font-weight: 650; opacity: 0.9; margin-bottom: 14px;
}
.xl-hero-total {
  font-size: 46px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xl-hero-unit {
  font-size: 19px; font-weight: 700; opacity: 0.8; margin-left: 4px;
}
.xl-hero-program {
  margin-top: 8px; font-size: 14px; font-weight: 600; opacity: 0.9;
}
.xl-hero-meta {
  margin-top: 6px;
  font-size: 13px; font-weight: 600; opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.xl-hero-actions { display: flex; gap: 9px; margin-top: auto; padding-top: 12px; }
.xl-hero-finish {
  flex: 1;
  font-family: var(--font); font-size: 14px; font-weight: 750;
  padding: 13px; border: none; border-radius: 999px;
  background: #fff; color: var(--blue);
  cursor: pointer; transition: all 0.15s;
}
.xl-hero-finish:hover { background: #f0f5ff; }

/* "Session details" pill — sits between the hero and the Exercises list,
   opens the .cp-sheet-based session log (SessionDetailsSheet.tsx). */
.xl-cs-pill {
  width: 100%; margin: 10px 0 16px;
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 14px;
  cursor: pointer; font-family: var(--font);
}
.xl-cs-pill-txt {
  flex: 1; text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.xl-cs-pill-chevron { display: flex; flex: 0 0 auto; color: var(--muted); }
.xl-cs-pill-chevron svg { width: 15px; height: 15px; }

/* Session details sheet head: align top padding to the left padding (16px),
   .cp-sheet-head's default 6px top reads too close to the edge. */
.xl-cs-sheet .cp-sheet-head { padding-top: 16px; }

.xl-empty {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 40px 20px; line-height: 1.6;
}

/* "No active session" empty state — docs/shapeup-new-design-spec.md State 1 */
.xl-nosession {
  background: #EEF0F4;
  border: 1px solid #E2E5EA;
  border-radius: 18px;
  padding: 32px 20px 24px;
  text-align: center;
}
.xl-nosession-icon {
  width: 58px; height: 58px; border-radius: 16px;
  background: #E1E5EC;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.xl-nosession-icon img {
  width: 27px; height: 27px;
}
.xl-nosession-title {
  font-size: 18px; font-weight: 800; color: #3A404C; letter-spacing: -0.01em;
}
.xl-nosession-sub {
  font-size: 13px; color: var(--muted); margin: 7px auto 0;
  line-height: 1.5; max-width: 250px;
}
.xl-nosession-actions {
  display: flex; flex-direction: column; gap: 9px; margin-top: 22px;
}
.xl-nosession-primary {
  width: 100%; padding: 15px; border: none; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
/* "Input manual  or  create custom program" — two underlined text links under
   the primary button (session-states State 1). */
.xl-nosession-links {
  margin-top: 14px; font-size: 13px; font-weight: 650; color: var(--muted);
}
.xl-nosession-link {
  background: none; border: none; padding: 0; font: inherit; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ───────── manual-input exercise picker (session-states State 2) ───────── */
/* Reached via "Input manual". Back row + sticky search/chips + selectable
   exercise cards; the "Start session (N)" footer is .xl-manual-bar (fixed). The
   header + tab bar stay put (they live outside .xl-main). */
.xl-manual { display: block; }
.xl-manual[hidden] { display: none; }
/* Hide the FAB bar + drop its reserved padding while the picker is open — the
   picker owns the bottom with its own .xl-manual-bar. */
.xl-app.manual-on .xl-fabbar { display: none; }
.xl-app.manual-on.fab-on .xl-main {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

.xl-manual-backrow { padding: 4px 0 6px; }
.xl-manual-back {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 4px 4px 4px 2px; cursor: pointer;
  color: var(--ink); font-size: 14px; font-weight: 650; font-family: inherit;
}
.xl-manual-back svg { width: 18px; height: 18px; }

/* Sticky search + chips: opaque panel-bg so scrolled cards don't show through.
   Pins to the top of the scroll body (.xl-main); the negative side margins +
   padding let its background bleed to the frame edges over .xl-main's 18px
   gutter, matching the design's edge-to-edge sticky bar. */
.xl-manual-sticky {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  margin: 0 -18px; padding: 4px 18px 0;
}
.xl-manual-search {
  display: flex; align-items: center; gap: 9px;
  background: #EFF0F3; border-radius: 12px; padding: 11px 14px;
}
.xl-manual-search-ic { display: flex; flex-shrink: 0; color: var(--muted); }
.xl-manual-search-ic svg { width: 17px; height: 17px; }
.xl-manual-search input {
  border: none; background: none; outline: none; flex: 1; min-width: 0;
  font-size: 14px; font-family: inherit; color: var(--ink);
}
.xl-manual-chips {
  display: flex; gap: 8px; padding: 14px 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.xl-manual-chips::-webkit-scrollbar { display: none; }
/* Muscle chips match the split-type chips (.xl-chip): same type scale, padding,
   pill radius and colors. They scroll horizontally (many muscles) so they keep
   flex-shrink:0 instead of the split row's flex:1. */
.xl-manual-chip {
  flex-shrink: 0; font-family: var(--font);
  border: 1px solid var(--border); background: var(--white);
  color: var(--slate); border-radius: 999px; padding: 7px 10px;
  font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.xl-manual-chip:hover { border-color: var(--blue); color: var(--blue); }
.xl-manual-chip.selected { background: var(--blue); border-color: var(--blue); color: var(--white); }

.xl-manual-list { padding: 4px 0 8px; }
/* Card matches the program exercise card (.xl-card): white, 1px border (color
   shifts on selection — no width change → no layout shift), 8px radius, same
   head padding/gap and name/muscle type scale. */
.xl-manual-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.xl-manual-card.selected { border-color: var(--blue); }
.xl-manual-card-main { flex: 1; min-width: 0; }
.xl-manual-card-name { font-size: 12px; font-weight: 500; color: var(--ink); }
.xl-manual-card-muscle { font-size: 10px; color: var(--muted); margin-top: 2px; }
.xl-manual-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.xl-manual-check.on { border-color: var(--blue); background: var(--blue); }
.xl-manual-check svg { width: 13px; height: 13px; }
.xl-manual-hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.xl-manual-empty { font-size: 13px; color: var(--muted); text-align: center; margin-top: 24px; }

/* Fixed footer bar — spans the app frame (same left/right clamp as .xl-fabbar's
   timer-on state) and pins above the safe area. */
.xl-manual-bar {
  position: fixed;
  left: max(14px, calc(50% - 320px + 14px));
  right: max(14px, calc(50% - 320px + 14px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 96;
}
.xl-manual-start {
  width: 100%; padding: 15px; border: none; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
}
.xl-manual-start:disabled { background: #C9CEDA; cursor: not-allowed; box-shadow: none; }

/* Card visuals ported 1:1 from the old app (example/appscript/Index.html
   .xl-card*): 8px radius, compact 10px/12px head padding, circular seq badge,
   column-stacked status, and the success/optional state backgrounds. */
.xl-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  margin-bottom: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.xl-card.in-progress { border-color: var(--blue); background: var(--white); }
.xl-card.target-met { background: #e8f5e9; opacity: 0.75; }
.xl-card.over-target { background: #e8f5e9; opacity: 0.85; border-color: #2e7d32; }
/* Optional exercises read as a separate cream-themed group (old app). */
.xl-card.is-optional { background: #fffdf6; border-color: #e8d4a0; }

.xl-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
/* Soft blue hover on the card head (matches the tab-bar hover). The colored
   states (met / over / optional) keep their own tint and skip the blue. */
.xl-card:not(.target-met):not(.over-target):not(.is-optional) .xl-card-head:hover {
  background: var(--blue-light);
}
.xl-card:not(.target-met):not(.over-target):not(.is-optional):hover {
  border-color: var(--blue);
}
/* Optional cards hover in their own cream/amber theme (still pending target). */
.xl-card.is-optional:not(.target-met):not(.over-target) .xl-card-head:hover {
  background: #fdf3df;
}
.xl-card.is-optional:not(.target-met):not(.over-target):hover {
  border-color: #ba7517;
}
/* Count (left slot, replaced the old .xl-seq circle): plain "N/target" over
   "Sets", stacked, muted grey — no background. */
.xl-count-badge {
  flex: 0 0 auto;
  min-width: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15;
}
.xl-count-num { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--slate); }
.xl-count-word { font-size: 9px; font-weight: 500; color: var(--muted); }
.xl-card-main { flex: 1; min-width: 0; }
.xl-card-name {
  font-size: 12px; font-weight: 500; color: var(--ink);
}
/* "ALT N" pill on a swapped exercise (old app .xl-alt-badge). */
.xl-swap-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 8px; margin-left: 6px;
  background: #e8f5e9; color: #2e7d32;
  vertical-align: middle;
}
/* "OPT" pill on an optional exercise — amber to match the cream card theme. */
.xl-opt-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 8px; margin-left: 6px;
  background: #fdf3df; color: #ba7517;
  vertical-align: middle;
}
/* Logged-equipment tag appended to the name once a set is in (old app
   .xl-equipment-tag). */
.xl-equip-tag {
  display: inline-block;
  font-size: 9px; font-weight: 600;
  color: var(--blue); background: rgba(37,99,201,0.1);
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
  vertical-align: middle;
}
.xl-card-muscle { font-size: 10px; color: var(--muted); margin-top: 2px; }
.xl-card-status {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
/* Compact uppercase label for the "done"/"active" hint. */
.xl-status-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--muted);
}
.xl-over {
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px; background: #2e7d32; color: #fff;
}
.xl-swap-btn {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.xl-swap-btn:hover { border-color: var(--blue); color: var(--blue); }
.xl-swap-btn svg { width: 14px; height: 14px; }
/* On the colored states the swap button keeps a light readable outline. */
.xl-card.in-progress .xl-swap-btn,
.xl-card.target-met .xl-swap-btn,
.xl-card.over-target .xl-swap-btn {
  border-color: rgba(0,0,0,0.18); color: var(--slate);
}

/* ───────── current logged exercises (this session) ─────────
   Rendered below the program cards (current-session-mockup.html). A collapsible
   blue status bar reveals per-exercise blocks of logged sets. Typography reuses
   the card/set sizes already in this file for consistency. */

#xl-current { margin-top: 4px; }

/* status bar (sets logged · elapsed) — tap to collapse/expand the body */
.xl-cs-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--blue); color: #fff;
  cursor: pointer; user-select: none;
}
.xl-cs-bar.open { border-radius: 8px 8px 0 0; }
.xl-cs-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7ee787; flex: 0 0 auto;
  animation: xlCsPulse 2s infinite;
}
@keyframes xlCsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(126, 231, 135, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(126, 231, 135, 0); }
  100% { box-shadow: 0 0 0 0 rgba(126, 231, 135, 0); }
}
.xl-cs-txt { flex: 1; font-size: 12px; font-weight: 600; }
.xl-cs-sub { opacity: 0.8; font-weight: 400; }
.xl-cs-link { font-size: 11px; font-weight: 600; opacity: 0.9; }

/* body — white card hanging off the bar */
.xl-cs-body {
  background: var(--white);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 4px 12px 8px;
}

/* one exercise block; divider between, none on the last */
.xl-cs-ex { border-bottom: 1px solid var(--border); padding: 8px 0; }
.xl-cs-ex:last-child { border-bottom: none; }
.xl-cs-ex-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.xl-cs-ex-nm { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; min-width: 0; }

/* B/U category badge */
.xl-cs-cat {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.xl-cs-cat-B { background: #0f6e56; }
.xl-cs-cat-U { background: #993c1d; }

/* logged-equipment tag — matches the exercise card's .xl-equip-tag (flat blue). */
.xl-cs-equip {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 600;
  color: var(--blue); background: rgba(37, 99, 201, 0.1);
  padding: 1px 5px; border-radius: 3px;
}

/* set row: id / weight×reps / RIR·RPE / time */
.xl-cs-set {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; flex-wrap: wrap;
}
/* Grey box matching the History detail's .hist-set: the read-only (non-swipe)
   row carries the box itself; for swipe rows it lives on the wrapper + slide. */
.xl-cs-ex > .xl-cs-set {
  background: #f4f4f5; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
}
.xl-cs-ex > .xl-cs-set:last-child { margin-bottom: 0; }
.xl-cs-w {
  /* Match the History detail's "weight × reps" (.hist-set-wr): 12px / 500, not
     bold — the user flagged this column reading too heavy. */
  font-size: 12px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 84px;
}
/* PR badge — SHARED by the Log tab's logged sets AND the History tab (exercise.css
   loads on both pages). One source of truth: a solid filled pill with white text,
   colored per type by a modifier class. Don't redefine this in history.css. */
.pr-badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; letter-spacing: 0;
  color: #fff;
}
.pr-badge-weight { background: #0F6E56; } /* Weight PR  — green */
.pr-badge-reps   { background: #BA7517; } /* Lower reps — amber */
.pr-badge-lower  { background: #A32D2D; } /* Lower wt   — red   */
.xl-cs-meta { flex: 1; font-size: 11px; color: var(--muted); }
.xl-cs-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* remark (new design): full-width line under the set, indented under the weight
   column with a blue left accent. Replaces the old inline remark. */
.xl-cs-rmk {
  flex-basis: 100%;
  margin: 1px 0 0 34px; padding-left: 9px;
  border-left: 2px solid var(--blue);
}
.xl-cs-rmk-txt { font-size: 11px; color: var(--slate); font-style: italic; line-height: 1.4; }

/* ── swipe-to-edit/delete on a logged set (mirrors history.js) ── */
.xl-cs-set-swipe {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;       /* let vertical scroll through; we handle horizontal */
  /* Grey box matching the History detail's .hist-set-swipe — the slide carries
     the padding; the wrapper carries the bg + radius + spacing. */
  background: #f4f4f5;
  border-radius: 8px;
  margin-bottom: 6px;
}
.xl-cs-set-swipe:last-child { margin-bottom: 0; }
.xl-cs-set-swipe.editing { overflow: visible; }
.xl-cs-actions {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: stretch;
}
.xl-cs-act {
  width: 60px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.xl-cs-act svg { width: 18px; height: 18px; }
.xl-cs-act-edit { background: var(--blue); }
.xl-cs-act-del { background: #c0392b; }
.xl-cs-slide {
  position: relative;
  background: #f4f4f5;       /* the slide carries the grey box (matches .hist-set-slide) */
  padding: 10px 12px;
  transform: translateX(0);
  transition: transform 0.18s ease;
  z-index: 1;
  touch-action: pan-y;
}

/* ── Inline edit form (Current panel + History detail) ──
   Reuses the shared .xl-form card design (equipment chips, pill toggles, RIR/RPE
   selects). It renders inside the grey set slide, so drop .xl-form's border-top
   and give it a rounded white card look sitting on the grey. */
.xl-edit-form.xl-form {
  border-top: none;
  border-radius: 12px;
  padding: 12px;
  margin: 2px 0;
}

/* Read-only exercise-name header (the name is not editable in the edit form). */
.xl-edit-name {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.xl-edit-name-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted);
}
.xl-edit-name-value {
  font-size: 14px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Validation line above the edit-form actions. */
.xl-form-error { font-size: 11px; color: #c0392b; margin-top: 6px; }
.xl-form-error:empty { display: none; }

/* Edit-form actions: Save (primary, prominent) + Cancel (neutral). Overrides
   the log form's 2fr/1fr + red-ghost layout, which is tuned for Submit/Clear. */
.xl-edit-form .xl-form-actions {
  grid-template-columns: 1fr 1.6fr;
  margin-top: 12px;
}
.xl-edit-form .xl-btn.ghost {
  background: var(--white); color: var(--slate);
  border: 1px solid #d9dde3;
}
.xl-edit-form .xl-btn.ghost:hover { background: var(--bg); }

/* ───────── logging form ───────── */

/* Form chrome ported from the old app (.xl-card-form / .xl-form-group):
   white background, 16px padding, uppercase labels with a faint required mark. */
.xl-form {
  border-top: 1px solid var(--border);
  padding: 16px;
  background: var(--white);
}
.xl-form-row { margin-bottom: 8px; }
.xl-label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Faint "*" required marker after a label (old app .xl-required). */
.xl-required { color: var(--muted); font-size: 10px; margin-left: 4px; }
.xl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xl-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.xl-form input[type="number"], .xl-form input[type="text"] {
  width: 100%;
  font-family: var(--font); font-size: 16px; /* >=16px: no iOS focus zoom */
  padding: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); color: var(--ink);
}
.xl-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* RIR / RPE dropdowns — match the text/number inputs, with a custom chevron. */
.xl-form select.xl-select {
  width: 100%;
  font-family: var(--font); font-size: 16px; /* >=16px: no iOS focus zoom */
  padding: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); color: var(--ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.xl-form select.xl-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.xl-form input:disabled,
.xl-form select:disabled {
  background: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  opacity: 1;
}

/* Hide native number spinners (no scroll-to-change on the field). */
.xl-form input[type="number"] { -moz-appearance: textfield; }
.xl-form input[type="number"]::-webkit-outer-spin-button,
.xl-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* RPE description pill (ported from the old app). Colors are set inline per
   level from RPE_CONFIG; this just handles layout. Hidden until a value is set. */
.xl-rpe-pill {
  display: none;
  padding: 4px 12px;
  margin-top: 6px;
  border-radius: 14px;
  font-size: 11px; font-weight: 600;
  font-family: var(--font);
}

.xl-equip-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.xl-equip-chip {
  font-family: var(--font); font-size: 11px; font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--white); color: var(--slate);
  cursor: pointer; transition: all 0.15s ease;
}
.xl-equip-chip:hover { background: var(--bg); }
/* Unselected & still required → dashed red border (prompt to pick). */
.xl-equip-chip.required-missing { border-style: dashed; border-color: #c0392b; }
.xl-equip-chip.selected {
  background: var(--blue); border-color: var(--blue); border-style: solid; color: #fff;
  font-weight: 600;
}
/* Red "pick equipment" hint under the chips (old app .xl-eq-hint). */
.xl-eq-hint { font-size: 10px; color: #c0392b; margin-top: 4px; }

/* ── reference row (Latest / Max hint) ── */
.xl-ref-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; padding: 2px;
}
.xl-ref-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xl-ref-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted);
}
.xl-ref-date { font-size: 11px; font-weight: 600; color: var(--slate); line-height: 1; }
.xl-ref-date.empty { color: var(--muted); font-style: italic; }
.xl-ref-toggle {
  flex: 0 0 auto;
  display: inline-flex; gap: 2px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 2px;
}
.xl-ref-btn {
  padding: 6px 11px;
  border: none; border-radius: 12px;
  background: transparent; color: var(--slate);
  font-family: var(--font); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.xl-ref-btn.active { background: var(--blue); color: #fff; }
/* Prev with no logged set this session: greyed + non-interactive. */
.xl-ref-btn.disabled,
.xl-ref-btn:disabled {
  color: var(--muted); opacity: 0.45; cursor: not-allowed;
}
.xl-ref-btn.disabled.active,
.xl-ref-btn:disabled.active { background: transparent; color: var(--muted); }


/* Native radios, no boxed border (matches the old app). */
.xl-radio-box { display: flex; gap: 16px; padding: 4px 0; }
.xl-radio {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 400; color: var(--ink);
  cursor: pointer;
}
.xl-radio input {
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Old app: Submit (2fr) + Clear (1fr), both uppercase; Clear is red. */
.xl-form-actions {
  display: grid; grid-template-columns: 2fr 1fr; gap: 8px;
  margin-top: 16px;
}
.xl-btn {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 12px 8px;
  border: none; border-radius: 8px;
  cursor: pointer; transition: all 0.2s ease;
}
.xl-btn.primary { background: var(--blue); color: #fff; }
.xl-btn.primary:hover:not(:disabled) { background: var(--blue-dark); }
.xl-btn.primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.xl-btn.ghost { background: #c0392b; color: #fff; }
.xl-btn.ghost:hover { background: #962d22; }

.xl-muted { font-size: 12px; color: var(--muted); }

/* ───────── placeholder panels ───────── */

.xl-placeholder {
  text-align: center; color: var(--muted);
  padding: 60px 20px; line-height: 1.7;
}
.xl-placeholder .xl-ph-title { font-size: 15px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }
.xl-placeholder .xl-ph-sub { font-size: 13px; }

/* ───────── toast ───────── */

.xl-toast {
  position: fixed;
  left: 50%; top: max(16px, env(safe-area-inset-top));
  transform: translate(-50%, -20px);
  max-width: 90%;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(15,23,42,.25);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
.xl-toast.show { opacity: 1; transform: translate(-50%, 0); }
.xl-toast.error { background: var(--error); }

/* ───────── session-expiry warning (§2B.5) ───────── */
.xl-session-warn {
  position: fixed;
  left: 50%; bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92%, 420px);
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.28);
  z-index: 90;
}
.xl-session-warn.urgent { background: var(--error); }
.xl-session-warn-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.xl-session-warn-title { font-size: 12.5px; font-weight: 700; }
.xl-session-warn-time { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.xl-session-warn-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.xl-session-warn-extend {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.xl-session-warn-extend:disabled { opacity: .6; cursor: default; }
.xl-session-warn-dismiss {
  border: none;
  background: transparent;
  color: #fff;
  opacity: .75;
  font-size: 18px;
  line-height: 1;
  width: 22px; height: 22px;
  cursor: pointer;
}
.xl-session-warn-dismiss:hover { opacity: 1; }

/* ───────── finish session modal ───────── */
.xl-finish-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.xl-finish-modal.active { display: flex; }
.xl-finish-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(2px);
}
.xl-finish-card {
  position: relative;
  width: min(100%, 420px);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 24px 20px 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  z-index: 1;
}
.xl-finish-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--slate);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.xl-finish-close:hover { background: rgba(37, 99, 201, 0.1); color: var(--blue); }
.xl-finish-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.xl-finish-title {
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
}
.xl-finish-copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  margin-bottom: 18px;
}
.xl-finish-moods {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.xl-finish-mood {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid #dde3eb;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.xl-finish-mood:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: translateY(-1px);
}
.xl-finish-mood.selected {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(37, 99, 201, 0.12), rgba(37, 99, 201, 0.06));
  box-shadow: 0 0 0 3px rgba(37, 99, 201, 0.08);
}
.xl-finish-mood-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #f4f7fb;
  color: var(--blue);
}
.xl-finish-mood.selected .xl-finish-mood-icon {
  background: var(--blue);
  color: #fff;
}
.xl-finish-mood-icon svg { width: 22px; height: 22px; }
.xl-finish-mood-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.xl-finish-mood-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.xl-finish-mood-sub {
  font-size: 12px;
  color: var(--muted);
}
.xl-finish-actions {
  display: flex;
  gap: 10px;
}
.xl-finish-btn {
  flex: 1;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
}
.xl-finish-btn.primary {
  background: var(--blue);
  color: #fff;
}
.xl-finish-btn.primary:hover:not(:disabled) { background: var(--blue-dark); }
.xl-finish-btn.primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
.xl-finish-btn.ghost {
  background: #eef2f7;
  color: var(--slate);
}
.xl-finish-btn.ghost:hover { background: #e4eaf2; }

/* ───────── trial-reward modal (add active number → +7 days) ───────── */
.xl-trial-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.xl-trial-modal.active { display: flex; }
.xl-trial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(2px);
}
.xl-trial-card {
  position: relative;
  width: min(100%, 420px);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 26px 22px 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  z-index: 1;
  text-align: center;
}
.xl-trial-badge {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563C9, #0d47a1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 12px 26px rgba(37, 99, 201, 0.38);
  margin-bottom: 14px;
}
.xl-trial-badge-diamond {
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 6px;
  transform: rotate(45deg);
}
.xl-trial-badge-spark {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transform: rotate(45deg);
}
.xl-trial-badge-spark--tr {
  width: 8px; height: 8px;
  top: 11px; right: 13px;
}
.xl-trial-badge-spark--bl {
  width: 5px; height: 5px;
  bottom: 13px; left: 12px;
  background: rgba(255, 255, 255, 0.75);
}

.xl-trial-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--slate);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.xl-trial-close:hover { background: rgba(37, 99, 201, 0.1); color: var(--blue); }
.xl-trial-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.xl-trial-title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 8px;
}
.xl-trial-copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  margin-bottom: 18px;
}
.xl-trial-contrast {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 20px;
}
.xl-trial-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px 8px;
  border-radius: 14px;
  background: #f4f7fb;
  border: 1.5px solid var(--border);
}
.xl-trial-day:last-child {
  background: var(--blue-light);
  border-color: var(--blue);
}
.xl-trial-day-num {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}
.xl-trial-day-num.reward { color: var(--blue); }
.xl-trial-day-date {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  color: #64748b;
  white-space: nowrap;
  margin-top: 5px;
}
.xl-trial-day-date.reward { color: #2563C9; }
.xl-trial-day-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.xl-trial-arrow {
  font-size: 20px;
  color: var(--muted);
  font-weight: 700;
  flex: none;
  display: flex;
  align-items: center;
}
.xl-trial-btn {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 14px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  text-align: center;
}
.xl-trial-btn.primary { background: var(--blue); color: #fff; }
.xl-trial-btn.primary:hover { background: var(--blue-dark); }
.xl-trial-btn.ghost {
  background: none;
  color: var(--slate);
  margin-top: 8px;
}
.xl-trial-btn.ghost:hover { color: var(--ink); }

/* ───────── bottom action bar: rest-timer slot ─────────
   Ported from example/fab-design.html (Option 3); the "+ Add Exercise" FAB that
   used to share this bar was removed — manual add now lives in the "+ Add more"
   button next to the Exercises label (renderProgramMeta). Fixed within the
   centered app frame; shown only on the Log tab (the .xl-app.fab-on toggle, set
   in JS). Idle: a collapsed clock icon; active: slides open into the full
   rest-timer segment. */

.xl-fabbar {
  position: fixed;
  /* Pinned to the LEFT edge of the centered app frame (not stretched full-width).
     The frame is centered, max 640 wide, with a 14px side gutter — clamp keeps the
     bar against the frame's left edge on both narrow and wide viewports. */
  left: max(14px, calc(50% - 320px + 14px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  height: 58px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  display: none;                    /* shown by .xl-app.fab-on (Log tab) */
  align-items: center;
  padding: 6px;
  gap: 8px;
  z-index: 95;
}
/* Timer FAB hidden for now (logic kept). To re-enable, restore:
   .xl-app.fab-on .xl-fabbar { display: flex; } */
.xl-app.fab-on .xl-fabbar { display: none; }
/* When a rest is running the bar widens (the timer segment expands). Bound its
   right edge to the frame's right gutter so the segment never overflows on a
   narrow viewport — the timer fills whatever room is left of the "+". */
.xl-fabbar.timer-on { right: max(14px, calc(50% - 320px + 14px)); }
/* While the sheet is open the bar hands its footprint to the sheet — hide it so
   the sheet reads as the bar itself expanding, not a second box over it. */
.xl-app.sheet-open .xl-fabbar { opacity: 0; pointer-events: none; }

/* Lock the page behind the sheet so it can't scroll a sliver underneath the
   scrim — without this the short empty sheet leaves the .xl-main page draggable
   behind it (the "small scroll page" the user saw). The sheet itself scrolls. */
.xl-app.sheet-open .xl-main { overflow: hidden; }

/* Timer slot. Idle = a 46px clock square. Active (.xl-fabbar.timer-on) = slides
   open into the full rest-timer segment; the bar widens to fit. */
.xl-fab-timer {
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Slide open/close animation on width + padding. */
  width: 46px;
  padding: 0;
  gap: 0;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              gap 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s;
}
.xl-fab-clock { width: 21px; height: 21px; stroke: var(--slate); flex-shrink: 0; }

/* idle: square clock only. The inner elements are DISPLAY:NONE (not opacity:0)
   so they leave the flex layout entirely — otherwise their width keeps pushing
   the clock out of the clipped 46px square (the "missing clock") and makes the
   collapse animation squish leftover content. They re-appear on expand. */
.xl-fabbar:not(.timer-on) .xl-fab-timer { cursor: pointer; }
.xl-fabbar:not(.timer-on) .xl-fab-timer:active { background: var(--bg, #f4f6fa); }
.xl-fabbar:not(.timer-on) .xl-fab-timer .xl-rest-ring,
.xl-fabbar:not(.timer-on) .xl-fab-timer .xl-rest-meta,
.xl-fabbar:not(.timer-on) .xl-fab-timer .xl-rest-btns {
  display: none;
}

/* active: clock hidden, segment slides open. */
.xl-fabbar.timer-on .xl-fab-timer {
  flex: 1;
  width: auto;
  min-width: 0;
  gap: 9px;
  padding: 0 8px 0 6px;
  cursor: default;
}
.xl-fabbar.timer-on .xl-fab-timer .xl-rest-ring,
.xl-fabbar.timer-on .xl-fab-timer .xl-rest-meta,
.xl-fabbar.timer-on .xl-fab-timer .xl-rest-btns {
  opacity: 1;
  transition: opacity 0.2s 0.12s; /* fade in after the slide */
}
.xl-fabbar.timer-on .xl-fab-clock { display: none; }
/* finished: green wash, matching the spec's .done state. */
.xl-fabbar.timer-done .xl-fab-timer { background: #e8f5e9; border-color: rgba(46, 125, 50, 0.5); }

.xl-rest-ring { width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; position: relative; }
.xl-rest-ring svg.xl-rest-ring-svg { transform: rotate(-90deg); }
/* Once the interval is ticking the ring is no longer a tap target. */
.xl-fabbar.timer-done .xl-rest-ring { cursor: default; }
.xl-rest-ring circle.bg { stroke: #e0e6ee; }
.xl-rest-ring circle.fg { stroke: var(--blue); transition: stroke-dashoffset 1s linear; }
.xl-fabbar.timer-done .xl-rest-ring circle.fg { stroke: #2e7d32; }

/* Play/pause glyph centered inside the duration circle. Toggles between the two
   icons via the bar's .timer-paused / running state; tap to freeze/resume. */
.xl-rest-pp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--blue);
}
.xl-rest-pp:active { transform: scale(0.9); }
.xl-fabbar.timer-done .xl-rest-pp { display: none; }   /* no controls once finished */
.xl-rest-pp svg { width: 15px; height: 15px; display: block; }
/* Default = NOT running (expanded-but-idle or paused) → show the play glyph.
   Only while the countdown is actively ticking (.timer-running) do we show pause. */
.xl-rest-pp .xl-rest-pp-pause { display: none; }
.xl-rest-pp .xl-rest-pp-play  { display: block; }
.xl-fabbar.timer-running .xl-rest-pp .xl-rest-pp-pause { display: block; }
.xl-fabbar.timer-running .xl-rest-pp .xl-rest-pp-play  { display: none; }

.xl-rest-meta { display: flex; align-items: center; min-width: 0; }
.xl-rest-time {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px; color: var(--blue); line-height: 1.1;
}
.xl-fabbar.timer-done .xl-rest-time { color: #2e7d32; }
/* dimmed while the adjust popover holds the countdown frozen. */
.xl-fabbar.timer-paused .xl-rest-time { opacity: 0.4; }

.xl-rest-btns { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.xl-rb-ctrl {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.xl-rb-ctrl:active { transform: scale(0.95); }
.xl-rb-ctrl.skip { color: #c0392b; border-color: rgba(192, 57, 43, 0.3); }
.xl-fabbar.timer-done .xl-rb-ctrl.skip { color: #2e7d32; border-color: rgba(46, 125, 50, 0.4); }
.xl-rb-edit {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--white);
  border-radius: 8px; cursor: pointer; color: var(--muted);
}
.xl-rb-edit:active { transform: scale(0.95); }
.xl-rb-edit svg { width: 15px; height: 15px; }

/* ───────── rest-duration adjust popover ───────── */
.xl-rest-pop-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.25);
  z-index: 96;
}
.xl-rest-pop-backdrop[hidden] { display: none; }
.xl-rest-pop {
  position: fixed;
  left: 14px; right: 14px;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  max-width: 612px;          /* frame width (640) minus the 14px side gutters */
  margin: 0 auto;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22);
  padding: 16px;
  z-index: 97;
}
.xl-rest-pop[hidden] { display: none; }
.xl-rest-pop-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.xl-rest-pop-sub { font-size: 11px; color: var(--muted); margin: 2px 0 14px; }
.xl-rest-stepper {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; width: fit-content; margin: 0 auto;
}
.xl-rest-stepper button {
  width: 48px; height: 48px; border: none;
  background: var(--bg); font-size: 22px; font-weight: 600;
  color: var(--blue); cursor: pointer; font-family: var(--font);
}
.xl-rest-stepper button:active { background: #e6e6e6; }
.xl-rest-stepper .val {
  min-width: 96px; text-align: center;
  font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; line-height: 1.1; padding: 0 6px;
}
.xl-rest-stepper .val small {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted);
}
.xl-rest-presets {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 14px 0;
}
.xl-rest-preset {
  border: 1px solid var(--border); background: var(--white);
  color: var(--slate); font-family: var(--font); font-weight: 600;
  font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.xl-rest-preset.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.xl-rest-pop-actions { display: flex; gap: 10px; }
.xl-rest-pop-actions button {
  flex: 1; height: 44px; border-radius: 10px;
  font-family: var(--font); font-weight: 600; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--white); color: var(--slate);
}
.xl-rest-pop-actions button.save { background: var(--blue); border-color: var(--blue); color: #fff; }
.xl-rest-pop-actions button:active { transform: scale(0.98); }
.xl-rest-pop-note { font-size: 10px; color: var(--muted); text-align: center; margin-top: 10px; }

/* ───────── manual-entry bottom sheet ───────── */

.xl-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  z-index: 9997;
  display: block;                   /* [hidden] handles show/hide */
  transition: background 0.25s;
}
.xl-sheet-scrim[hidden] { display: none; }
.xl-sheet-scrim.show { background: rgba(15, 23, 42, 0.5); }

.xl-sheet {
  position: absolute;
  /* Floating card occupying the FAB bar's exact footprint. On open it grows
     UPWARD out of the bar (origin = bottom), animating its HEIGHT from the bar's
     58px to fit its content — so it reads as the "+ Add Exercise" bar itself
     expanding into the form rather than a separate panel sliding up. Animating
     height (not scaleY) keeps the inner content crisp — no squish/stretch. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 612px;                 /* match the FAB bar's footprint */
  background: var(--white);
  border-radius: 16px;              /* same radius as the bar */
  padding: 0 18px;                  /* vertical padding fades in with the body */
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);  /* bar's shadow, lifts on open */
  /* Collapsed = the bar's height; expands to content height on open. */
  height: 58px;
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              padding 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.3s ease, border-radius 0.3s ease;
  -webkit-overflow-scrolling: touch;
}
.xl-sheet-scrim.show .xl-sheet {
  /* JS sets the explicit pixel height (content height, capped); these just
     restore the open chrome. */
  padding: 14px 18px 22px;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.28);
  overflow-y: auto;
}

/* ── Genie open (only when launched from the + FAB) ──────────────────────────
   A scale-genie approximation of macOS's minimize/restore: the sheet appears to
   fly OUT of the + button, scaling up from that point with a slight vertical
   stretch and a fast→slow ease-out. A true genie warp (curved edges) is
   non-affine and can't be done with CSS transforms, so this is the clean,
   iOS-Safari-safe stand-in. `--genie-x` / `--genie-y` are set by JS to the +
   button's center; the bar's height-morph is suppressed here so the two
   animations don't fight (the transform alone carries the open).  */
.xl-sheet-scrim.genie .xl-sheet {
  transform-origin: var(--genie-x, 50%) var(--genie-y, 100%);
  /* OPEN: height jumps instantly to target (no height transition); scale carries it */
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease,
              padding 0s, box-shadow 0.3s ease, border-radius 0.3s ease;
}
/* Collapsed genie start / CLOSE target: a near-zero speck at the + button,
   slightly squashed vertically so the motion reads as a stretch from/into the
   point. The CLOSE transition (this `:not(.show)` state) is a touch SHORTER than
   the open and eases IN (accelerates), so the sheet drops into the button and the
   FAB returns without the brief dead gap. opacity clears fast so the input fields
   are already gone before the box finishes shrinking. */
.xl-sheet-scrim.genie:not(.show) .xl-sheet {
  transform: translateX(-50%) scale(0.04, 0.02);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1),
              opacity 0.14s ease,
              padding 0s, box-shadow 0.26s ease, border-radius 0.26s ease;
}
.xl-sheet-scrim.genie.show .xl-sheet {
  transform: translateX(-50%) scale(1, 1);
  opacity: 1;
}

/* The body cross-fades in slightly after the bar starts growing, so the morph
   reads as the bar opening up rather than text popping in. Collapsed, only the
   "+ Add Exercise" affordance height is visible.
   On CLOSE (the .show class removed) the content fades out FAST and up front so
   the box is already empty before the height finishes collapsing — that's what
   keeps the tail of the close animation smooth (no content snapping away at the
   very end). */
.xl-sheet-handle,
.xl-sheet-head,
.xl-sheet-body {
  opacity: 0;
  transition: opacity 0.12s ease;        /* fade-out: quick, no delay */
}
.xl-sheet-scrim.show .xl-sheet-handle,
.xl-sheet-scrim.show .xl-sheet-head,
.xl-sheet-scrim.show .xl-sheet-body {
  opacity: 1;
  transition: opacity 0.18s ease 0.04s;   /* fade-in: start earlier so the open reads continuous */
}

.xl-sheet-handle {
  position: relative;
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 14px;
  cursor: pointer;                  /* tap the handle to close (no × button) */
}
/* Bigger invisible hit-target around the thin handle so it's easy to tap. */
.xl-sheet-handle::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
}
.xl-sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.xl-sheet-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.xl-sheet-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: var(--bg); color: var(--slate);
  font-size: 14px; cursor: pointer; transition: background 0.13s;
  flex-shrink: 0;
}
.xl-sheet-close:hover { background: var(--border); }

/* searchable exercise field + suggestion list */
.xl-sheet-search { position: relative; margin-bottom: 12px; }
.xl-sheet-suggest {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  max-height: 220px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 5;
}
.xl-sheet-suggest[hidden] { display: none; }
.xl-sheet-opt {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--bg);
}
.xl-sheet-opt:last-child { border-bottom: none; }
.xl-sheet-opt:hover, .xl-sheet-opt.active { background: var(--blue-light); }
.xl-sheet-opt-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.xl-sheet-opt-muscle { font-size: 11px; color: var(--muted); margin-top: 2px; }
.xl-sheet-empty { padding: 12px; font-size: 12px; color: var(--muted); text-align: center; }

/* The sheet body reuses the card's .xl-form (same field helpers → identical
   inputs), but the sheet already supplies its own padding and has no card frame,
   so drop the form's card-only chrome (top border + 16px box padding). The
   inputs/labels/selects keep the card's exact font, size, color and 12px field
   padding — only the wrapper differs. */
.xl-sheet .xl-form {
  border-top: none;
  padding: 0;
  background: transparent;
}

.xl-sheet-fields { display: none; }   /* revealed once an exercise is picked */
.xl-sheet-fields.show { display: block; }

/* Bottom action row: trash/clear (square slot, like the FAB bar's clock) on the
   left + "Save set" filling the rest — mirrors the FAB bar's add/clock layout. */
.xl-sheet-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}

/* Clear button — square slot the same size as Save's height (46px), mirroring
   the FAB bar's square clock slot (icon sized like .xl-fab-clock, 21px).
   Resets the form; sheet stays open. */
.xl-sheet-clear {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 12px;
  color: var(--slate);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.xl-sheet-clear svg { width: 21px; height: 21px; stroke: currentColor; }
.xl-sheet-clear:active { background: var(--bg); }
.xl-sheet-clear:hover { color: var(--blue); border-color: var(--blue); }

.xl-sheet-save {
  flex: 1;
  height: 46px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
.xl-sheet-save:disabled { opacity: 0.5; cursor: not-allowed; }
.xl-sheet-save:not(:disabled):active { background: var(--blue-deep); }

/* ===== WORKOUT SETUP HEADER (Custom Program link) ===== */
.xl-setup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.xl-setup-head .xl-setup-label { margin-bottom: 0; }
.xl-custom-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 4px 2px;
  line-height: 1;
}
.xl-custom-link-plus { font-size: 14px; font-weight: 700; line-height: 1; }
.xl-custom-link:hover { color: var(--blue-dark); }

/* ===== CUSTOM PROGRAM BOTTOM SHEET ===== */
.cp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18,26,38,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 150;
}
.cp-backdrop.open { opacity: 1; pointer-events: auto; }

.cp-sheet {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 32px));
  width: calc(100% - 28px);
  max-width: 612px;
  max-height: 90vh;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 160;
  display: flex;
  flex-direction: column;
}
.cp-sheet.open { transform: translateX(-50%) translateY(0); }
.cp-sheet-grip { display: none; }
.cp-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 12px;
  flex-shrink: 0;
}
.cp-sheet-head h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.cp-sheet-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--slate);
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  font-family: var(--font);
}
.cp-sheet-body { overflow-y: auto; padding: 14px 16px 18px; flex: 1; }
.cp-sheet-body::-webkit-scrollbar { width: 0; }
.cp-status {
  font-size: 11px;
  min-height: 16px;
  margin-bottom: 4px;
  text-align: center;
}
.cp-status.ok { color: var(--green); }
.cp-status.err { color: var(--red, #b00020); }

.cp-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.cp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px;
  margin-bottom: 14px;
}
.cp-field { margin-bottom: 11px; }
.cp-field:last-child { margin-bottom: 0; }
.cp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 6px;
}
.cp-req { color: var(--blue); }
.cp-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--ink);
  outline: none;
}
.cp-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

.cp-ex-row {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px;
  margin-bottom: 9px;
}
.cp-ex-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.cp-ex-seq {
  background: var(--bg);
  padding: 3px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.cp-ex-del {
  width: 27px; height: 27px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cp-ex-del:hover { border-color: #b00020; color: #b00020; }
.cp-ex-del svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.cp-ex-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.cp-suggest-wrap { position: relative; }
.cp-suggest {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 200;
}
.cp-suggest[hidden] { display: none; }

/* "Add Exercise" — full-width secondary button inside the body */
#cp-add-exercise {
  display: block;
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--slate);
  cursor: pointer;
  margin-bottom: 4px;
}
#cp-add-exercise:active { background: var(--bg); }
.cp-hint {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 14px;
}
.cp-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 12px;
}
.cp-divider::before, .cp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cp-saved-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cp-saved-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.cp-saved-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cp-saved-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cp-mini-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  font-family: var(--font);
}
.cp-mini-btn.edit:hover { border-color: var(--blue); color: var(--blue); }
.cp-mini-btn.del:hover { border-color: #b00020; color: #b00020; }

/* Optional toggle — pill with a sliding knob */
.cp-optional-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 4px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cp-optional-toggle.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.cp-optional-knob {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
}
.cp-optional-toggle.on .cp-optional-knob { background: rgba(255,255,255,0.5); }
/* ── PR celebration: confetti canvas + result card ─────────────────────────
   Spec: example/confetti-spec.md. Colors come from the live tokens (gold is a
   fixed accent matching confetti.js). */
#xl-confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;   /* never blocks taps */
  z-index: 10000;         /* above the celebrate card backdrop */
}

.xl-celebrate {
  position: fixed;
  inset: 0;
  z-index: 9999;          /* below the confetti, above everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* CRITICAL: while hidden the overlay must be display:none, otherwise it covers
   the whole viewport and (even at opacity:0) swallows every click. The JS drops
   the [hidden] attribute one frame before adding .active so the fade still runs. */
.xl-celebrate[hidden] { display: none; }
.xl-celebrate.active { opacity: 1; }
.xl-celebrate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(2px);
}
.xl-celebrate-card {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s ease;
}
.xl-celebrate.active .xl-celebrate-card { transform: translateY(0) scale(1); }

.xl-celebrate-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.xl-celebrate-badge svg { width: 32px; height: 32px; stroke: #fff; }
.xl-celebrate-pill {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: #BA7517;            /* gold accent (matches confetti.js) */
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.xl-celebrate-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #BA7517;
  margin-bottom: 8px;
}
.xl-celebrate-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--blue-dark);
  margin-bottom: 6px;
}
.xl-celebrate-sub {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 22px;
}

.xl-celebrate-prs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
  text-align: left;
}
.xl-celebrate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: xlCelebrateRowIn 0.4s ease forwards;
}
@keyframes xlCelebrateRowIn {
  to { opacity: 1; transform: translateY(0); }
}
.xl-celebrate-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}
.xl-celebrate-icon svg { width: 16px; height: 16px; stroke: #fff; }
.xl-celebrate-info { flex: 1; min-width: 0; }
.xl-celebrate-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.xl-celebrate-detail {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.xl-celebrate-delta {
  font-weight: 700;
  font-size: 14px;
  color: var(--ok);
  flex-shrink: 0;
}

.xl-celebrate-done {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.xl-celebrate-done:hover { background: var(--blue-dark); }

/* Reduced motion: card still renders, animations suppressed. */
@media (prefers-reduced-motion: reduce) {
  .xl-celebrate,
  .xl-celebrate-card { transition: none; }
  .xl-celebrate-row { animation: none; opacity: 1; transform: none; }
}

/* The inline "i" field-info tooltip system (icon + dark popover + dark bottom
   sheet) was removed — field help now lives entirely in the header "?" Field
   Guide below. */

/* ===== Help icon + new-user nudge + Field Guide sheet =====================
   Additive — ported from example/shapeup-help-nudge-design.html, recut to the
   project tokens (--blue/--ink/--slate/--muted/--border/--white). The help icon
   sits in the header left of the avatar; the nudge is anchored under it; the
   Field Guide is a light bottom sheet. */

/* Help icon (ghost, in the blue header) */
.xl-help-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: none;
  border: none;
  color: #1B1F27;              /* match the burger ink */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  padding: 0;
  transition: background .12s, color .12s;
}
.xl-help-btn:hover { background: #f1f3f6; }
.xl-help-btn:active { background: #e7e9ee; }

/* New-user nudge — floating popover under the help icon */
.xl-nudge-overlay {
  position: fixed;
  inset: 0;
  z-index: 920;
  pointer-events: none;
}
.xl-nudge-overlay.show { pointer-events: auto; }
.xl-nudge {
  position: absolute;
  top: 56px;
  right: 64px;
  width: 270px;
  max-width: calc(100vw - 24px);
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.xl-nudge-overlay.show .xl-nudge { opacity: 1; transform: translateY(0) scale(1); }
.xl-nudge::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 14px;
  height: 14px;
  background: var(--white);
  transform: rotate(45deg);
  border-radius: 3px;
}
.xl-nudge-body { position: relative; padding: 18px 16px 16px; }
.xl-nudge-x {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
}
.xl-nudge-lang {
  position: absolute;
  top: 14px;
  right: 38px;
  display: flex;
  background: var(--bg);
  border-radius: 6px;
  padding: 2px;
}
.xl-nudge-lang button {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}
.xl-nudge-lang button.on { background: var(--blue); color: #fff; }
.xl-nudge h4 { font-size: 14px; font-weight: 600; color: var(--ink); }
.xl-nudge p { font-size: 11.5px; color: var(--slate); line-height: 1.55; margin-top: 5px; }
.xl-nudge-acts { margin-top: 14px; display: flex; align-items: center; gap: 18px; }
.xl-nudge-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  padding: 2px;
}
.xl-nudge-btn.primary { color: var(--blue); }
.xl-nudge-btn.ghost { color: var(--muted); font-weight: 500; }

/* Field Guide — light bottom sheet (search + accordions) */
.xl-guide-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 930;
}
.xl-guide-back.open { opacity: 1; pointer-events: auto; }
.xl-guide {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
  border-radius: 18px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  transform: translateY(calc(100% + 12px));
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 931;
}
.xl-guide.open { transform: translateY(0); }
.xl-guide-grab {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 10px auto 2px;
}
.xl-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.xl-guide-head h3 { font-size: 16px; font-weight: 600; color: var(--ink); }
.xl-guide-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
  display: flex;
  margin-right: -6px;
}
.xl-guide-search { padding: 12px 16px 4px; }
.xl-guide-search-wrap { position: relative; }
.xl-guide-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 36px 10px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
}
.xl-guide-search input:focus { outline: none; border-color: var(--blue); background: var(--white); }
.xl-guide-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xl-guide-search-clear[hidden] { display: none; }
.xl-guide-body {
  overflow-y: auto;
  padding: 6px 16px 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.xl-fld { border-bottom: 1px solid var(--border); }
.xl-fld-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 11px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
}
.xl-fld-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.xl-fld-chev {
  stroke: var(--muted);
  stroke-width: 2;
  width: 18px;
  height: 18px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.xl-fld.open .xl-fld-chev { transform: rotate(180deg); }
.xl-fld-a { max-height: 0; overflow: hidden; transition: max-height 0.26s ease; }
.xl-fld.open .xl-fld-a { max-height: 600px; }
.xl-fld-a .xl-fld-lang-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 2px;
}
.xl-fld-a .xl-fld-lang-block { padding: 0 2px 8px; }
.xl-fld-a .xl-fld-lang-block:last-child { padding-bottom: 12px; }
.xl-fld-a p { font-size: 12px; line-height: 1.5; color: var(--slate); }

@media (prefers-reduced-motion: reduce) {
  .xl-nudge, .xl-guide-back, .xl-guide, .xl-fld-a, .xl-fld-chev { transition: none; }
}

/* ===== summary panel (inline per-exercise chart + PR ladder) ===== */

.xl-summary-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate); cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.xl-summary-btn:hover { border-color: var(--blue); color: var(--blue); }
.xl-summary-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.xl-summary-btn svg { width: 14px; height: 14px; }

/* On the colored (light-green) states keep a dark readable icon — matches the
   swap button. (Was near-white, invisible on the light-green target-met card.) */
.xl-card.in-progress .xl-summary-btn,
.xl-card.target-met .xl-summary-btn,
.xl-card.over-target .xl-summary-btn {
  border-color: rgba(0,0,0,0.18); color: var(--slate);
}

.xl-summary-panel {
  border-top: 1px solid var(--border);
  padding: 12px;
  background: var(--white);
}

.xls-controls { margin-bottom: 12px; }
.xls-control-group { margin-bottom: 10px; }
.xls-control-group:last-child { margin-bottom: 0; }
.xls-control-label {
  display: block; font-size: 11px; font-weight: 500; color: var(--slate); margin-bottom: 4px;
}

.xls-eq-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.xls-eq-chip {
  padding: 6px 12px; border-radius: 16px; font-size: 11px; font-weight: 500;
  background: #fff; border: 1px solid var(--border); color: var(--slate);
  cursor: pointer; transition: all .15s ease; font-family: inherit;
}
.xls-eq-chip:hover { background: #f0f2f5; }
.xls-eq-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600; }

.xls-radio-group { display: flex; gap: 16px; padding: 4px 0; }
.xls-radio-option { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.xls-radio-option input[type="radio"] { cursor: pointer; margin: 0; }
.xls-radio-option label { cursor: pointer; font-size: 14px; color: var(--ink); margin: 0; display: inline; }

.xls-divider { height: 1px; background: #ececec; margin: 12px 0; }

.xls-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xls-title {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.xls-max { font-size: 11px; color: var(--slate); }
.xls-max strong { color: var(--blue-dark); font-size: 12px; }

.xls-chart { height: 72px; position: relative; }

.xls-pr-block { margin-top: 12px; }
.xls-pr-label {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.xls-ladder { display: flex; flex-direction: column; }
.xls-ladder-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px;
  border-top: 1px solid #f3f3f3;
}
.xls-ladder-row:first-child { border-top: none; }
.xls-rank {
  width: 16px; height: 16px; border-radius: 50%;
  background: #eef2fb; color: var(--blue-dark); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.xls-ladder-row.is-top .xls-rank { background: var(--blue-dark); color: #fff; }
.xls-w { font-weight: 600; min-width: 68px; color: var(--ink); }
.xls-rmk { flex: 1; font-size: 10px; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xls-d { font-size: 10px; color: var(--muted); margin-left: auto; }

.xls-empty { text-align: center; padding: 18px 12px; color: var(--muted); font-size: 12px; }
.xls-empty svg { width: 28px; height: 28px; opacity: .4; margin-bottom: 6px; display: block; margin-left: auto; margin-right: auto; }
.xls-empty .sub { font-size: 10px; margin-top: 2px; }
.xls-partial {
  font-size: 10px; color: var(--muted); font-style: italic; text-align: center;
  padding: 8px; background: #f4f6f8; border-radius: 4px; margin-bottom: 10px;
}