/* public/styles.css
   Triplanner — global reset & design tokens.
   Component/view styles are layered on top of this by a later phase. */

:root {
  /* Surfaces */
  --bg: #080b12;
  --surface: #0a0e17;
  --surface-2: #0b0f18;
  --card: #101826;
  --card-2: #0f1622;
  --input-bg: #0e131d;

  /* Borders */
  --border: #141c2a;
  --border-2: #1e2939;
  --border-3: #1f2b3d;

  /* Text */
  --text: #eaf0f8;
  --text-2: #c5d2e5;
  --text-3: #9fb0c8;
  --muted: #7d8ca3;
  --muted-2: #5c6a80;
  --faint: #455267;

  /* Accent */
  --accent: #4d84ff;

  /* Sport colours */
  --sport-swim: #2fd0e6;
  --sport-bike: #4d84ff;
  --sport-run: #4ade80;
  --sport-strength: #a78bfa;
  --sport-brick: #fb923c;
  --sport-rest: #64748b;
  --sport-mobility: #38bdf8;

  /* Zone ramp */
  --z1: #274a86;
  --z2: #2d5296;
  --z3: #3a72c9;
  --z4: #4d8bf0;
  --z5: #6ea6ff;
  --z6: #95c2ff;

  /* Status */
  --success: #4ade80;
  --danger: #e08a8a;

  /* Type */
  --font-sans: "Barlow", sans-serif;
  --font-condensed: "Barlow Semi Condensed", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* Belt-and-suspenders: the app shell (.app-shell/.app-main, below) is
     already height-capped with overflow:hidden so nothing should reach the
     real document edge, but this guarantees the page itself can never be
     the thing that scrolls sideways — individual panels own their own
     overflow-x:auto instead (zone tables, month grid, etc). */
  overflow-x: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================================================
   APP STYLES — app shell, router views, nav, Plan calendar view.
   =========================================================================== */

@media (max-width: 819px) {
  .mobile-hide { display: none !important; }
}
@media (min-width: 820px) {
  .desktop-hide { display: none !important; }
}

/* ---- app shell ---------------------------------------------------------- */

.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.view-loading,
.view-stub,
.view-error {
  padding: 26px;
  color: var(--text-3);
}
.view-stub h1,
.view-error h1 {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 8px;
}

/* ---- left rail (desktop) ------------------------------------------------- */

.rail-slot .rail {
  width: 90px;
  flex: 0 0 90px;
  background: var(--surface-2);
  border-right: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 6px;
  height: 100%;
}
@media (max-width: 819px) {
  .rail-slot .rail { display: none; }
}
.rail__logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--accent), #2f5bb0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 22px;
}
.rail__item {
  width: 66px;
  height: 62px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6b7a90;
  background: transparent;
  transition: all 0.15s;
}
.rail__item.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.rail__icon { font-size: 21px; line-height: 1; }
.rail__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }

/* ---- bottom tab bar (mobile) --------------------------------------------- */

.tabbar-slot .tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 74px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11, 15, 24, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  z-index: 50;
}
@media (min-width: 820px) {
  .tabbar-slot .tabbar { display: none; }
}
.tabbar__item {
  flex: 1;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #6b7a90;
  padding-top: 10px;
}
.tabbar__item.is-active { color: var(--accent); }
.tabbar__icon { font-size: 22px; line-height: 1; }
.tabbar__label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }

/* ---- generic buttons / chips ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--card-2);
  color: var(--text-2);
  white-space: nowrap;
}
.btn--icon { width: 34px; height: 34px; padding: 0; font-size: 16px; flex: 0 0 34px; }
.btn--block { flex: 1 1 100%; min-height: 44px; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--danger { background: #241820; color: var(--danger); }
.btn--done { background: rgba(74, 222, 128, 0.14); color: var(--success); }
.btn--ghost { background: var(--input-bg); color: var(--text-3); }
.btn--sync.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.btn--sync.is-synced { background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); color: var(--success); }

.chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 20px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  color: var(--text-3);
  min-height: 30px;
}
.chip.is-active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.pill { font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.pill--today { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tag { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; }
.tag--skipped { color: var(--muted); background: var(--card-2); }
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ---- data banner (fallback-store notice) ---------------------------------- */

.data-banner {
  padding: 8px 18px;
  background: rgba(224, 138, 138, 0.1);
  border-bottom: 1px solid rgba(224, 138, 138, 0.25);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---- Plan view: header ----------------------------------------------------- */

.plan-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.plan-header { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
@media (max-width: 819px) {
  .plan-header { padding: 16px 16px 14px; }
}
.plan-header__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plan-header__titles { min-width: 0; }
.plan-header__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.plan-header__phase { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.plan-header__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.plan-header__countdown { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--muted); }
.plan-header__period { font-family: var(--font-condensed); font-weight: 700; font-size: 32px; letter-spacing: -0.5px; line-height: 1; }
@media (max-width: 819px) {
  .plan-header__period { font-size: 26px; }
}
.plan-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.segmented { display: flex; background: var(--input-bg); border: 1px solid var(--border-2); border-radius: 11px; padding: 3px; }
.segmented__item { padding: 7px 15px; border-radius: 8px; font-weight: 600; font-size: 13px; color: #8895aa; min-height: 30px; }
.segmented__item.is-active { background: var(--accent); color: #fff; }

.stepper { display: flex; align-items: center; gap: 2px; background: var(--input-bg); border: 1px solid var(--border-2); border-radius: 11px; padding: 3px; }
.stepper__btn { width: 34px; height: 34px; border-radius: 8px; color: var(--text-3); font-size: 18px; display: flex; align-items: center; justify-content: center; }
.stepper__today { padding: 0 12px; height: 34px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 13px; }

/* ---- Plan view: phase strip ------------------------------------------------ */

.phase-strip { margin-top: 16px; }
.phase-strip__bars { display: flex; align-items: center; gap: 6px; }
.phase-strip__bar { height: 5px; border-radius: 3px; background: var(--border); }
.phase-strip__bar.is-active { background: var(--accent); }
.phase-strip__labels { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.phase-strip__label { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: #3a4557; }
.phase-strip__label.is-active { color: var(--accent); }

/* ---- Plan view: picking banner --------------------------------------------- */

.picking-banner {
  padding: 10px 18px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #bcd2ff;
  flex: 0 0 auto;
}

/* ---- Plan view: body layout ------------------------------------------------ */

.plan-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.plan-body__calendar { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---- week grid (desktop) --------------------------------------------------- */

.week-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  overflow: auto;
}
.day-col {
  background: var(--surface);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 9px;
  gap: 7px;
}
.day-col.is-today { background: #0c141f; }
.day-col.is-pickable { cursor: pointer; }
.day-col__head { display: flex; align-items: baseline; justify-content: space-between; }
.day-col__dow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); }
.day-col.is-today .day-col__dow { color: var(--accent); }
.day-col__dom { font-family: var(--font-condensed); font-weight: 700; font-size: 16px; color: var(--text-2); }
.day-col__dom.is-today { color: var(--accent); }
.day-col__empty {
  flex: 1;
  min-height: 40px;
  border: 1px dashed var(--border-3);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--faint);
}

/* ---- workout card (used in week grid, week list, day cards) --------------- */

.workout-card {
  background: var(--card);
  border: 1px solid var(--border-3);
  border-left: 3px solid var(--muted-2);
  border-radius: 9px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  min-height: 44px;
}
.workout-card.is-dimmed { opacity: 0.62; }
.workout-card--missing { color: var(--danger); font-size: 11px; }
.workout-card__top { display: flex; align-items: center; gap: 6px; }
.workout-card__code { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.5px; }
.workout-card__icons { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-sync { font-size: 10px; color: var(--sport-swim); }
.icon-done { color: var(--success); font-size: 11px; }
.workout-card__title { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.workout-card__meta { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }

/* ---- week list (mobile) ---------------------------------------------------- */

.week-list { flex: 1; overflow: auto; padding: 12px 14px 90px; display: flex; flex-direction: column; gap: 10px; }
.day-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.day-card.is-today { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: #0c141f; }
.day-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.day-card__dow { font-family: var(--font-condensed); font-weight: 700; font-size: 16px; }
.day-card__dom { font-size: 12px; font-weight: 600; color: var(--muted); }
.day-card__list { display: flex; flex-direction: column; gap: 8px; }
.day-card__empty { font-size: 12.5px; color: #556277; padding: 4px 0; }
.workout-card--compact { padding: 10px 11px; }

/* ---- month view -------------------------------------------------------- */

.month-view { flex: 1; display: flex; flex-direction: column; overflow: auto; }
.month-view__headers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.month-view__header { padding: 9px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); }
.month-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1px; background: var(--border); }
.month-cell { background: var(--surface); min-height: 82px; padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; }
.month-cell.is-outside { background: var(--bg); }
.month-cell.is-today { background: #0c141f; }
.month-cell.is-pickable { cursor: pointer; }
.month-cell__dom { font-family: var(--font-condensed); font-weight: 600; font-size: 13px; color: var(--text-2); }
.month-cell.is-outside .month-cell__dom { color: var(--faint); }
.month-cell__dom.is-today { color: var(--accent); }
.month-cell__chips { display: flex; flex-direction: column; gap: 2px; }
.month-chip {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.month-chip.is-dimmed { opacity: 0.55; }

/* ---- library sidebar (desktop, Plan view only) ----------------------------- */

.lib-sidebar {
  width: 330px;
  flex: 0 0 330px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  overflow: hidden;
}
.lib-sidebar__head { padding: 16px 16px 12px; }
.lib-sidebar__head h3 { font-family: var(--font-condensed); font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.lib-sidebar__hint { font-size: 11px; color: #556277; margin-bottom: 10px; }
.lib-sidebar__list { flex: 1; overflow-y: auto; padding: 0 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.lib-sidebar__footer { border-top: 1px solid var(--border); padding: 13px 16px; background: var(--surface-2); }
.lib-sidebar__footer-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 9px; }
.lib-sidebar__totals { display: flex; gap: 14px; margin-bottom: 11px; }
.lib-stat__val { font-family: var(--font-mono); font-size: 19px; font-weight: 600; }
.lib-stat__lbl { font-size: 10px; color: var(--muted); }
.lib-sidebar__breakdown { display: flex; flex-direction: column; gap: 5px; }
.lib-sidebar__breakdown-row { display: flex; align-items: center; gap: 8px; }
.lib-sidebar__breakdown-name { font-size: 11.5px; color: var(--text-2); flex: 1; }
.lib-sidebar__breakdown-val { font-family: var(--font-mono); font-size: 11px; color: #8895aa; }

.lib-card {
  background: var(--card);
  border: 1px solid var(--border-3);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lib-card__top { display: flex; align-items: center; gap: 8px; }
.lib-card__badge {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}
.lib-card__titles { min-width: 0; flex: 1; }
.lib-card__title { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-card__focus { font-size: 10.5px; color: var(--muted); }
.lib-card__meta { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; color: #8895aa; }

.zone-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; gap: 1px; }
.zone-bar--lg { height: 10px; border-radius: 4px; margin-bottom: 4px; }
.zone-bar__seg { min-width: 2px; }

/* ---- mobile picker sheet ---------------------------------------------------- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 12, 0.72);
  z-index: 90;
  display: flex;
  align-items: flex-end;
}
.sheet {
  width: 100%;
  max-height: 78vh;
  background: var(--card-2);
  border: 1px solid var(--border-3);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet__head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sheet__head h3 { font-family: var(--font-condensed); font-weight: 700; font-size: 16px; }
.sheet__list { overflow-y: auto; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 9px; }

/* ---- detail modal ------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 12, 0.72);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 820px) {
  .modal-overlay { align-items: center; }
}
.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--card-2);
  border: 1px solid var(--border-3);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeUp 0.22s ease;
}
@media (min-width: 820px) {
  .modal { border-radius: 20px; margin: auto; }
}
.modal__head { padding: 18px 20px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
.modal__badge {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.modal__titles { flex: 1; min-width: 0; }
.modal__titles h2 { font-family: var(--font-condensed); font-weight: 700; font-size: 21px; line-height: 1.1; }
.modal__subtitle { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.modal__body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.modal__stats { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.modal__stat-val { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.modal__stat-lbl { font-size: 10.5px; color: var(--muted); }
.modal-section { margin-bottom: 16px; }
.modal-section__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.modal-section__head .dot { background: var(--z3); }
.modal-section__name { font-family: var(--font-condensed); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-2); }
.modal-section__rows { display: flex; flex-direction: column; gap: 7px; }
.modal-row { display: flex; gap: 11px; align-items: baseline; padding: 9px 12px; background: var(--card); border-radius: 10px; border-left: 3px solid var(--muted-2); max-width: 100%; }
.modal-row.is-avoid { background: rgba(224, 138, 138, 0.08); }
.modal-row.is-unparsed { border-left-color: var(--danger); }
/* Recovery legs of an interval (kind:'rest') must not look like work: dashed
   left border, dimmed, italic description — distinguishable at a glance from
   the work leg it's paired with inside a .modal-repeat group. */
.modal-row.is-rest { border-left-style: dashed; opacity: 0.72; background: var(--card-2); }
.modal-row.is-rest .modal-row__desc { font-style: italic; }
.modal-row__amount { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-2); flex: 0 0 56px; }
.modal-row__body { flex: 1; min-width: 0; }
.modal-row__desc { font-size: 13px; color: var(--text); word-break: break-word; }
.modal-row__target { font-family: var(--font-mono); font-size: 11px; color: #8895aa; margin-top: 2px; }
.modal-row__target.is-avoid { color: var(--danger); font-weight: 600; }
/* Brick sport-segment badge (Bike/Run/Swim), shown inline before a step's
   description whenever the step carries a `segment` — i.e. the sport changed
   mid-workout (see BR1: Bike -> Run -> Bike). */
.modal-row__segment {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 5px;
  margin-right: 6px;
}
.tag--rest { color: var(--muted); background: var(--card-2); margin-right: 6px; }

/* ---- repeat block (Nx group) ------------------------------------------- */
/* A parsed `repeat` node (see parser.js) renders as ONE bracketed group with
   the ×N label attached to the group as a whole, and its children listed in
   order inside it — never flattened into separate "all the work, then all
   the rest" rows (that was the bug: it misread the ordering/alternation of
   the prescription). Nested repeats nest visually too, since each group's
   .modal-repeat__body is itself a flex column that can contain another
   .modal-repeat. */
.modal-repeat {
  border: 1px solid var(--border-3);
  border-radius: 12px;
  padding: 10px 10px 10px 12px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
  max-width: 100%;
}
.modal-repeat__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.modal-repeat__count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 2px 9px;
  border-radius: 20px;
}
.modal-repeat__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.modal-repeat__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  min-width: 0;
}
.modal__footer { padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 9px; }

/* ---- toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--card-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 819px) {
  .toast { bottom: 92px; }
}

/* ===========================================================================
   LIBRARY + BUILDER VIEWS
   =========================================================================== */

/* ---- Library view: header ------------------------------------------------- */

.library-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.library-header { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
@media (max-width: 819px) {
  .library-header { padding: 16px 16px 14px; }
}
.library-header__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.library-header__title { font-family: var(--font-condensed); font-weight: 700; font-size: 32px; letter-spacing: -0.5px; line-height: 1; }
@media (max-width: 819px) {
  .library-header__title { font-size: 26px; }
}
.library-header__subtitle { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.library-header__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.library-search {
  flex: 1;
  min-width: 180px;
  min-height: 38px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}
.library-search:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ---- Library view: family groups + grid ------------------------------------ */

.library-body { flex: 1; overflow: auto; padding: 20px 26px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 819px) {
  .library-body { padding: 14px 14px 90px; }
}
.library-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13.5px; padding: 40px 20px; }

.family-group__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.family-group__name { font-family: var(--font-condensed); font-weight: 700; font-size: 15px; letter-spacing: 0.2px; color: var(--text-2); }
.family-group__count { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
@media (max-width: 819px) {
  .library-grid { grid-template-columns: 1fr; }
}

.library-card {
  background: var(--card-2);
  border: 1px solid var(--border-3);
  border-radius: 14px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.library-card__top { display: flex; align-items: flex-start; gap: 10px; }
.library-card__badge {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.library-card__titles { flex: 1; min-width: 0; }
.library-card__title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.library-card__subtitle { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.library-card__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: #8895aa; }
.library-card__actions { display: flex; gap: 7px; margin-top: 2px; }
.library-card__action { flex: 1; min-height: 38px; }
.library-card__action--accent { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }

.library-show-more { display: flex; justify-content: center; padding: 6px 0 18px; }

/* ---- Library view: modal purpose line, add-to-day sheet --------------------- */

.modal__purpose { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }

.add-sheet__body { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.add-sheet__label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); }
.add-sheet__date {
  min-height: 44px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: var(--font-mono);
}

/* ---- Builder view: header ---------------------------------------------------- */

.builder-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.builder-header {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 819px) {
  .builder-header { padding: 16px 16px 14px; }
}
.builder-header__meta { min-width: 0; flex: 1; }
.builder-header__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.builder-title-input {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.5px;
  color: var(--text);
  width: 100%;
  min-width: 0;
  padding: 0;
}
@media (max-width: 819px) {
  .builder-title-input { font-size: 26px; }
}
.builder-title-input::placeholder { color: var(--faint); }
.builder-header__actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---- Builder view: form body ------------------------------------------------- */

.builder-body { flex: 1; overflow: auto; padding: 20px 26px; }
@media (max-width: 819px) {
  .builder-body { padding: 14px 14px 90px; }
}
.builder-form { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.builder-fork-note {
  font-size: 12px;
  color: var(--danger);
  background: rgba(224, 138, 138, 0.1);
  border: 1px solid rgba(224, 138, 138, 0.25);
  border-radius: 10px;
  padding: 10px 13px;
}

.builder-meta { display: flex; flex-direction: column; gap: 14px; }
.builder-field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 8px; }
.builder-field--grow { flex: 1; min-width: 130px; }
.builder-row { display: flex; gap: 14px; flex-wrap: wrap; }
.builder-input {
  width: 100%;
  min-height: 40px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}
.builder-input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.builder-sport-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.builder-sport-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  font-size: 13px;
  font-weight: 600;
  color: #8895aa;
}
.builder-sport-chip.is-active { color: var(--text); }

.builder-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 12.5px;
  color: var(--muted);
}
.builder-duration__val { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--accent); margin-left: auto; }

/* ---- Builder view: sections + steps ------------------------------------------ */

.builder-section { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.builder-section__head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: var(--card-2); border-bottom: 1px solid var(--border); }
.builder-section__name {
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--text);
  min-width: 0;
  flex: 0 1 220px;
}
.builder-section__total { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.builder-section__body { padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }

.builder-step { display: flex; gap: 8px; align-items: flex-start; }
.builder-step__amount {
  width: 56px;
  flex: 0 0 56px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 9px 6px;
  font-size: 13px;
  text-align: center;
  outline: none;
  color: var(--text);
  font-family: var(--font-mono);
}
.builder-step__unit { flex: 0 0 auto; align-self: center; font-size: 10.5px; color: var(--muted-2); margin-left: -4px; margin-right: 2px; }
.builder-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.builder-step__desc {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13px;
  outline: none;
  color: var(--text);
}
.builder-step__presets { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.builder-step__presets-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; color: var(--muted-2); text-transform: uppercase; margin-right: 1px; }
.builder-preset-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border-3);
  color: #7ec8ff;
}
.builder-preset-btn.is-active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--text); }
.builder-preset-btn.is-avoid { color: var(--danger); border-color: rgba(224, 138, 138, 0.35); }
.builder-preset-btn.is-avoid.is-active { background: rgba(224, 138, 138, 0.18); border-color: var(--danger); }
.builder-step__target-text { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.builder-step__target-text.is-avoid { color: var(--danger); font-weight: 600; }

.builder-add-step { align-self: flex-start; font-size: 12.5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.builder-add-section-row { align-self: flex-start; }

/* ===========================================================================
   Settings view
   =========================================================================== */

.settings-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.settings-header { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
@media (max-width: 819px) {
  .settings-header { padding: 16px 16px 14px; }
}
.settings-header h1 { font-family: var(--font-condensed); font-weight: 700; font-size: 32px; letter-spacing: -0.5px; line-height: 1; }
@media (max-width: 819px) {
  .settings-header h1 { font-size: 26px; }
}
.settings-header__sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
/* overflow-x: hidden (not auto) is deliberate: this column must never be the
   thing that scrolls sideways. Any content wide enough to need its own
   horizontal scroll (the zone tables) gets a scoped overflow-x:auto on
   itself instead — see .zt-grid. */
.settings-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 26px 90px; }
@media (max-width: 819px) {
  .settings-scroll { padding: 14px 14px 90px; }
}
.settings-shell { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.card { border: 1px solid var(--border-2); border-radius: 16px; padding: 16px 18px; background: var(--card-2); display: flex; flex-direction: column; gap: 14px; }
.card__head { display: flex; flex-direction: column; gap: 4px; }
.card__title { font-family: var(--font-condensed); font-weight: 700; font-size: 16px; }
.card__hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
.card__body { display: flex; flex-direction: column; gap: 14px; }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; max-width: 100%; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.field--sm { flex: 1 1 120px; }
.field-pair { display: flex; align-items: flex-end; gap: 8px; }
.field-pair .field { flex: 1; }
.field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-2); }
.field__input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  outline: none;
  color: var(--text);
  min-height: 44px;
}
.field__input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.field__input--mono { font-family: var(--font-mono); }

.divider { height: 1px; background: var(--border); margin: 2px 0; }

.inline-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; }

/* ---- toggle switch ---- */
.toggle { width: 44px; height: 26px; border-radius: 20px; background: var(--border-2); position: relative; flex: 0 0 44px; transition: background 0.15s; min-height: 26px; }
.toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.toggle.is-on { background: var(--accent); }
.toggle.is-on .toggle__knob { left: 21px; }
.toggle.is-disabled { opacity: 0.5; cursor: not-allowed; }

.toggle-row { display: flex; align-items: center; gap: 14px; padding: 12px 13px; background: var(--input-bg); border: 1px solid var(--border-2); border-radius: 11px; }
.toggle-row--disabled { opacity: 0.85; }
.toggle-row__text { flex: 1; min-width: 0; }
.toggle-row__label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.toggle-row__sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ---- plan selector ---- */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 100%; }
@media (max-width: 560px) {
  .plan-grid { grid-template-columns: 1fr; }
}
.plan-card {
  text-align: left;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
}
.plan-card.is-selected { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.plan-card__top { display: flex; align-items: center; justify-content: space-between; }
.plan-card__level { font-family: var(--font-condensed); font-weight: 700; font-size: 13.5px; }
.plan-card__weeks { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.plan-card__note { font-size: 11.5px; color: var(--text-3); }
.plan-card__req { font-size: 10.5px; color: var(--muted-2); line-height: 1.4; }

/* ---- confirm bar (reanchor preview / import preview) ---- */
.confirm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 11px;
  font-size: 13px;
  color: var(--text-2);
}
.confirm-bar--preview { flex-direction: column; align-items: stretch; }
.confirm-bar__summary { font-size: 12.5px; line-height: 1.5; }
.confirm-bar__actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---- test-from-result calculators ---- */
.calc { margin-top: 8px; }
.calc__toggle { font-size: 11.5px; font-weight: 600; color: var(--accent); padding: 4px 0; min-height: 30px; }
.calc__body { display: flex; flex-direction: column; gap: 10px; padding: 10px; margin-top: 4px; background: var(--input-bg); border: 1px solid var(--border-2); border-radius: 10px; }
.calc__fields { display: flex; gap: 8px; flex-wrap: wrap; }
.calc__actions { display: flex; gap: 8px; }
.calc__result { font-family: var(--font-mono); font-size: 12px; color: var(--success); }
.calc__error { font-size: 12px; color: var(--danger); }

/* ---- zone tables ----
   auto-fit + minmax(0, ...) means these wrap to 1/2/3 columns by available
   width rather than a fixed row — the previous `1fr`/`repeat(3, 1fr)` tracks
   had an implicit min-width:auto floor equal to each table's max-content
   width (driven by .zt__range's `white-space: nowrap`), so on a narrow
   viewport the grid itself grew wider than its container instead of
   wrapping, which is what pushed the rightmost table off-screen and forced
   the whole settings column to scroll sideways. overflow-x:auto stays on as
   a last-resort safety net, not the primary fix. */
.zt-grid,
.zt-grid--3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  max-width: 100%;
  overflow-x: auto;
}
.zt__title { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-2); margin-bottom: 9px; }
.zt__rows { display: flex; flex-direction: column; gap: 5px; }
.zt__row { padding: 6px 8px; border-radius: 8px; }
.zt__row--avoid { background: rgba(224, 138, 138, 0.08); }
.zt__row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 3px; }
.zt__dot { width: 4px; height: 16px; border-radius: 2px; flex: 0 0 4px; }
.zt__name { font-size: 12.5px; color: var(--text-2); flex: 1; min-width: 0; }
.zt__avoid-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--danger); background: rgba(224, 138, 138, 0.16); padding: 2px 6px; border-radius: 5px; }
.zt__range { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.zt__row--avoid .zt__range { color: var(--danger); }
.zt__avoid-note { font-size: 10.5px; color: var(--muted); line-height: 1.45; margin: 3px 0 2px 12px; }

/* ---- Garmin status row ---- */
.status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.status-detail { color: var(--muted); font-size: 12px; }

/* ---- data card ---- */
.data-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }