/* ──────────────────────────────────────────────────────────────────────
   blox — design tokens + base styles
   See design/BLOX_DESIGN.md for the source of truth.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F5F5F4;
  --surface-hover: #F0F0EF;
  --border: #E7E5E4;
  --border-strong: #D6D3D1;
  --text: #1A1A1A;
  --text-2: #57534E;
  --text-3: #A8A29E;

  --accent-from: #E63095;
  --accent-to: #FF7B00;
  --accent-solid: #E63095;
  --accent-soft: #FFE6F0;
  --accent-text: #B12270;

  --sport-run:           #F97316;
  --sport-run-soft:      #FFEDD5;
  --sport-bike:          #10B981;
  --sport-bike-soft:     #D1FAE5;
  --sport-swim:          #3B82F6;
  --sport-swim-soft:     #DBEAFE;
  --sport-strength:      #8B5CF6;
  --sport-strength-soft: #EDE9FE;

  /* Analysis metric palette — deliberately distinct from the sport colours
     so a chart line's colour never reads as a "sport" (§7.3). */
  --metric-power: #7C3AED;
  --metric-pace:  #0D9488;
  --metric-hr:    #EF4444;
  --metric-elevation: #94A3B8;
  --chart-highlight: #F59E0B;

  --success: #16A34A;
  --warning: #F59E0B;
  --info:    #3B82F6;
  --danger:  #DC2626;

  /* Chart-only kleuren (dashboard-wellness): teal = sleep, magenta = RHR */
  --chart-teal: #0E9394;
  --chart-magenta: #D6336C;

  --note-bg: #F5F5F4;

  --sans: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
}

[data-theme="dark"] {
  --bg: #0C0A09;
  --surface: #1C1917;
  --surface-2: #292524;
  --surface-hover: #2A2624;
  --border: #292524;
  --border-strong: #44403C;
  --text: #F4F1E9;
  --text-2: #D6D3D1;
  --text-3: #78716C;

  --accent-from: #FF6FB5;
  --accent-to: #FFA847;
  --accent-solid: #FF6FB5;
  --accent-soft: #2E1820;
  --accent-text: #FF8FC4;

  --sport-run:           #FB923C;
  --sport-run-soft:      #2A1810;
  --sport-bike:          #34D399;
  --sport-bike-soft:     #0F2A20;
  --sport-swim:          #60A5FA;
  --sport-swim-soft:     #0F1E33;
  --sport-strength:      #A78BFA;
  --sport-strength-soft: #1F1734;

  --success: #4ADE80;
  --warning: #FBBF24;
  --info:    #60A5FA;
  --danger:  #F87171;

  --chart-teal: #2DD4BF;
  --chart-magenta: #F472B6;

  --note-bg: #292524;
}

/* ── Reset + base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
.mono { font-family: var(--mono); }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.italic { font-style: italic; }
.hidden { display: none !important; }

/* ── App shell — vertical rail + content ───────────────────────────── */
body { margin: 0; min-height: 100vh; background: var(--bg); }

/* Travel-mode read-only banner (#102) — a top strip when another host holds the token. */
.travel-banner { background: var(--warning); color: #1A1A1A; text-align: center;
  font-size: 12.5px; font-weight: 500; padding: 7px 16px; }

/* App shell — sticky top bar (logo · nav · account avatar), 1180px centred. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: none; margin: 0 auto; padding: 0 24px;
  height: 56px; display: flex; align-items: center; gap: 16px;
}
.topbar-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.topbar-logo svg { shape-rendering: crispEdges; }
.topnav { flex: 1; display: flex; align-items: center; gap: 4px; }
.topbar-account { position: relative; flex-shrink: 0; }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff; font-family: var(--sans); font-weight: 500; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[data-theme="dark"] .topbar-avatar { color: #1A1A1A; font-weight: 600; }

.main { background: var(--bg); min-height: calc(100vh - 56px); }
.page-shell { max-width: none; margin: 0 auto; }

/* Account menu (dropdown under the avatar). */
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); padding: 7px; z-index: 60;
}
.account-head { display: flex; align-items: center; gap: 10px; padding: 7px 8px 10px; }
.account-id { display: flex; flex-direction: column; min-width: 0; }
.account-name { font-size: 14px; font-weight: 500; color: var(--text); }
.account-roles { font-size: 11px; color: var(--text-3); text-transform: lowercase; }
.account-item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 8px; border-radius: var(--r-md); font-size: 13px; color: var(--text-2);
  text-decoration: none; background: none; border: none; cursor: pointer;
  font-family: var(--sans); text-align: left;
}
.account-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
.account-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.account-logout { color: var(--danger); }
.account-divider { height: 1px; background: var(--border); margin: 5px 0; }
.account-theme { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }
.account-theme-label { font-size: 13px; color: var(--text-2); }
.theme-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.theme-seg button {
  font-family: var(--mono); font-size: 11px; padding: 3px 10px; border: none; cursor: pointer;
  background: var(--surface); color: var(--text-3); text-transform: lowercase;
}
.theme-seg button.is-active { background: var(--accent-soft); color: var(--accent-text); }

.app-footer {
  max-width: none; margin: 0 auto; padding: 16px 24px 24px;
  font-size: 11px; color: var(--text-3); letter-spacing: 0.03em;
}

/* Page-head: lives at the top of .main with a thin underline, fixed height
   across pages so the rail + topbar form a stable frame. The eyebrow and
   the h1 share the same mono-uppercase + size treatment — only the colour
   differs (eyebrow gray, h1 in --text → white in dark mode). They sit
   side-by-side on one line so they read as one phrase. */
.page-head {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  height: 88px;
  box-sizing: border-box;
}
.page-head-stack {
  display: flex; flex-direction: row;
  align-items: baseline; gap: 8px;
  min-width: 0;
}
.page-head h1,
.topbar-eyebrow {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  /* All-caps mono has no descenders, so a tall line box parks the ink high in
     the centered 88px bar. line-height:1 tightens it back to the optical middle. */
  line-height: 1;
  margin: 0;
}
.page-head h1 { color: var(--text); }
.topbar-eyebrow { color: var(--text-3); }
.page-head-spacer { flex: 1; }

section { padding: 24px; border-bottom: 1px solid var(--border); }
.section-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-eyebrow {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.section-title { font-size: 22px; font-weight: 500; margin: 0; color: var(--text); }
.section-meta { font-size: 13px; color: var(--text-3); margin-left: auto; }

/* ── Brand lockup (still used on the login shell) ──────────────────── */
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 24px;
  text-decoration: none;
  color: inherit;
}
.brand:hover { text-decoration: none; }
.brand svg { shape-rendering: crispEdges; flex-shrink: 0; }
.brand-text {
  display: flex; flex-direction: column;
  justify-content: space-between;
  height: 32px;
  line-height: 1;
}
.brand-name {
  font-weight: 500; font-size: 20px;
  color: var(--text);
  letter-spacing: -0.4px;
}
.brand-tagline {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-3); letter-spacing: 0.04em;
}

/* ── Rail nav items — icon above tiny label, vertically stacked ────── */
.nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); }
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.75; }
.nav-item.active .nav-icon { opacity: 1; }

/* ── Buttons ───────────────────────────────────────────────────────── */
/* Every action button (.btn, .btn-primary, .topbar-btn) renders with the
   same filled-accent style — the look Bas pinned as "+ Add user".
   .btn-danger keeps its red affordance so destructive actions stay distinct. */
.btn, .btn-primary, .topbar-btn, .topbar-btn-primary {
  height: 32px; padding: 0 14px;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  border: 1px solid transparent; border-radius: var(--r-md);
  color: white; font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover, .btn-primary:hover, .topbar-btn:hover, .topbar-btn-primary:hover {
  color: white; opacity: 0.92; text-decoration: none;
}
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .topbar-btn,
[data-theme="dark"] .topbar-btn-primary { color: #1A1A1A; font-weight: 600; }
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .topbar-btn:hover,
[data-theme="dark"] .topbar-btn-primary:hover { color: #1A1A1A; }

.btn-danger {
  background: transparent;
  color: var(--danger); border-color: var(--border);
  font-weight: 500;
}
.btn-danger:hover {
  background: var(--surface-hover); color: var(--danger); opacity: 1;
}
[data-theme="dark"] .btn-danger { color: var(--danger); font-weight: 500; }
[data-theme="dark"] .btn-danger:hover { color: var(--danger); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; }

/* Icon-only button (modify, delete, theme toggle) */
.icon-btn {
  background: transparent; border: none; padding: 6px;
  border-radius: var(--r-sm); cursor: pointer;
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}
.form-card-narrow { max-width: 420px; }
.form-card-medium { max-width: 560px; }

/* ── Workout admin form shell — form + live preview side by side ───── */
.workout-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .workout-form-shell { grid-template-columns: 1fr; }
}
.workout-form { min-width: 0; }
.workout-preview {
  position: sticky;
  top: 24px;
  min-width: 0;
}
.workout-preview-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.workout-preview-name {
  font-size: 14px; font-weight: 500; margin: 0;
  font-family: var(--mono);
}
.workout-preview-body {
  font-family: var(--mono);
  font-size: 12px; line-height: 1.5;
  white-space: pre;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 12px;
  margin: 0;
  overflow-x: auto;
  color: var(--text);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; gap: 12px; }
.field-row-2 { grid-template-columns: 1fr 1fr; }
.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
  .field-row-2, .field-row-3 { grid-template-columns: 1fr; }
}

.field-label {
  font-size: 12px; color: var(--text-2);
  font-family: var(--mono); letter-spacing: 0.04em;
}
.field-hint { font-size: 11px; color: var(--text-3); }

.input, .select, .textarea {
  height: 36px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); font-family: inherit; font-size: 14px;
  width: 100%;
}
.textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-from); }
.input-mono { font-family: var(--mono); }

.radio-group { display: flex; flex-direction: column; gap: 4px; }
.radio-group-inline { display: flex; flex-wrap: wrap; gap: 12px; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.radio input { margin: 0; cursor: pointer; }

.form-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.form-actions-noborder { border-top: none; padding-top: 0; }

/* ── Banners ───────────────────────────────────────────────────────── */
.banner {
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: 13px; margin-bottom: 16px;
  border: 1px solid transparent;
}
.banner-flash    { background: var(--sport-bike-soft); color: var(--sport-bike); }
.banner-error    { background: var(--sport-run-soft);  color: var(--sport-run); }
.banner-warning  { background: var(--accent-soft);     color: var(--accent-text); border-color: var(--accent-text); }
.banner-warning .banner-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* ── Pills (sport + note) ──────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: 12px;
  font-size: 12px; font-weight: 500;
  line-height: 1; white-space: nowrap;
  font-family: inherit;
}
.pill-run      { background: var(--sport-run);      color: white; }
.pill-bike     { background: var(--sport-bike);     color: white; }
.pill-swim     { background: var(--sport-swim);     color: white; }
.pill-strength { background: var(--sport-strength); color: white; }
[data-theme="dark"] .pill-run,
[data-theme="dark"] .pill-bike,
[data-theme="dark"] .pill-swim,
[data-theme="dark"] .pill-strength { color: #0C0A09; font-weight: 600; }
.pill-note {
  background: var(--note-bg); color: var(--text-2);
  font-style: italic;
}
.pill-note svg { width: 12px; height: 12px; opacity: 0.6; }
.pill-role {
  background: var(--surface-2); color: var(--text-2);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
}

/* ── Event tag (gradient marker + label) ───────────────────────────── */
.event-tag {
  display: inline-flex; align-items: center; gap: 8px;
}
.event-marker {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: white; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .event-marker { color: #1A1A1A; }
.event-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── Year-plan (12-month grid) ─────────────────────────────────────── */
.year-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 760px)  { .year-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .year-grid { grid-template-columns: repeat(4, 1fr); } }

.year-month {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.year-month-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  font-family: var(--mono); font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.year-month-body { padding: 6px 8px; min-height: 48px; }
.year-month-empty { color: var(--text-3); font-style: italic; font-size: 11px; padding: 4px 4px; }

.year-race-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px;
  font-size: 11px;
}
.year-race-row:hover { background: var(--surface-hover); border-radius: var(--r-sm); }
.year-race-day { font-family: var(--mono); color: var(--text-3); min-width: 22px; text-align: right; }
.year-race-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.year-race-actions { display: none; gap: 6px; }
.year-race-row:hover .year-race-actions { display: flex; }

.year-nav { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.year-nav .current { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--text); }
.year-nav a { color: var(--text-3); }
.year-nav a:hover { color: var(--text); text-decoration: none; }

/* ── Tabs (athlete tabs) ───────────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px;
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent-solid);
  font-weight: 500;
}

/* ── Administration database shell ────────────────────────────────── */
.db-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
/* Tables panel — one shade lighter than the rail so the two levels read distinct. */
.db-sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.db-sidebar-eyebrow {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  letter-spacing: 0.08em; padding: 4px 12px 8px; text-transform: uppercase;
}
.db-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-md);
  color: var(--text-2); font-size: 14px;
  text-decoration: none;
}
.db-tab:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.db-tab.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.db-tab .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.db-tab.active .nav-icon { opacity: 1; }

.db-main {
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0; /* let tables shrink inside grid */
}
@media (max-width: 760px) {
  .db-shell { grid-template-columns: 1fr; }
  .db-sidebar {
    flex-direction: row; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 8px 12px;
  }
  .db-sidebar-eyebrow { display: none; }
}

/* ── Athlete-context card (/me → Context, #62) ─────────────────────────
   The standing markdown the coach agent reads: rendered view + edit form. */
.ai-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ai-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.ai-edit-btn {
  font-family: var(--mono); font-size: 11px; text-transform: lowercase;
  color: var(--text-3); background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px 10px; cursor: pointer;
}
.ai-edit-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ai-view { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.ai-view h1, .ai-view h2, .ai-view h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.ai-view p { margin: 0 0 8px; } .ai-view p:last-child { margin-bottom: 0; }
.ai-view ul, .ai-view ol { margin: 0 0 8px; padding-left: 18px; }
.ai-view code { background: var(--surface-2); padding: 1px 4px; border-radius: var(--r-sm); font-size: 12px; }
.ai-empty { color: var(--text-3); font-style: italic; }
.ai-textarea {
  width: 100%; font-family: var(--mono); font-size: 13px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); resize: vertical; box-sizing: border-box;
}
.ai-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ── Tables ────────────────────────────────────────────────────────── */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.table-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.table-meta { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  padding: 10px 16px; text-align: left;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text); }
table.data th.action-col { width: 120px; text-align: right; }
table.data td {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  color: var(--text);
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-hover); }
table.data td.mono, table.data td.num { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
table.data td.num { text-align: right; }
table.data td.action-cell { text-align: right; white-space: nowrap; padding-right: 8px; }
table.data td.action-cell a, table.data td.action-cell button {
  margin-left: 4px;
}

/* Administration → Backlog */
.backlog-title { font-weight: 500; }
/* Title-as-toggle: the row shows only the short title; clicking it reveals
   the rendered markdown body underneath. */
.backlog-title-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 500; color: inherit; text-align: left;
  cursor: pointer;
}
.backlog-title-toggle:hover { color: var(--accent-text); }
.backlog-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-3); transition: transform .12s ease; }
.backlog-title-toggle.is-open .backlog-chevron { transform: rotate(90deg); }
.backlog-done-text { text-decoration: line-through; color: var(--text-3); }
.backlog-body {
  font-size: 12.5px; margin: 6px 0 4px 18px; max-width: 68ch;
  word-break: break-word; line-height: 1.5;
}
.backlog-body p { margin: 0 0 6px; }
.backlog-body p:last-child { margin-bottom: 0; }
.backlog-body ul, .backlog-body ol { margin: 0 0 6px; padding-left: 18px; }
.backlog-body code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-2); padding: 1px 4px; border-radius: var(--r-sm);
}
.backlog-row.backlog-done { opacity: 0.62; }
.backlog-select {
  font-family: var(--mono); font-size: 11px; text-transform: lowercase;
  padding: 3px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2);
  cursor: pointer;
}
.backlog-status-open { color: var(--info); border-color: var(--info); }
.backlog-status-doing { color: var(--warning); border-color: var(--warning); }
.backlog-status-done { color: var(--success); border-color: var(--success); }
.backlog-prio-high { color: var(--danger); border-color: var(--danger); }
.backlog-prio-low { color: var(--text-3); }

.filter-pill {
  height: 28px; padding: 0 12px;
  background: var(--surface-2); border-radius: 14px;
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.filter-pill:hover { color: var(--text); text-decoration: none; }
.filter-pill.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

/* Tooltip (used on the birthdate column) */
.tooltip {
  position: relative;
  border-bottom: 1px dotted var(--border-strong);
}
.tooltip:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px);
  padding: 4px 8px;
  background: var(--text); color: var(--bg);
  font-size: 11px; font-family: var(--mono);
  border-radius: var(--r-sm);
  white-space: nowrap;
  z-index: 5;
}

/* ── Modal dialog ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  /* Must sit above the sticky top bar (z-index 50) + its menus (60) — a
     full-screen modal is the top layer, else it's clipped under the navbar. */
  z-index: 100; padding: 24px 16px;
  overflow-y: auto;  /* the page scrolls if modal is taller than viewport */
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  width: 640px; max-width: 100%;
  /* No internal vertical scroll — the modal grows with its content,
     and the overlay above handles page-level scrolling if needed. */
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between;
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 500; }
.modal-head .eyebrow { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}

/* Athlete-view / week-info modal carries the pre-formatted workout —
   give it room to breathe so the mono pre-block doesn't wrap awkwardly. */
/* View modal for a scheduled workout — wider so the formatted
   workout pre-block doesn't wrap awkwardly. */
.modal-week-info { width: 760px; }

/* Edit-scheduled modal — two-column layout, needs the room. */
.modal-wide { width: 1040px; }

/* Edit-scheduled: meta + briefing on the left, DML textarea on the right. */
.edit-scheduled-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
}
.edit-scheduled-meta-col,
.edit-scheduled-dml-col {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.edit-scheduled-dml {
  flex: 1;
  min-height: 280px;
  resize: vertical;
}
@media (max-width: 880px) {
  .edit-scheduled-grid { grid-template-columns: 1fr; }
}
.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
}

/* ── Login layout ──────────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-shell .brand { margin-bottom: 24px; padding-bottom: 0; }

/* ── Logo / sprite ─────────────────────────────────────────────────── */
.blox-sprite { shape-rendering: crispEdges; }
@keyframes col-dim {
  0%, 35%, 100% { opacity: 1; }
  12%           { opacity: 0.20; }
}
.wave .col   { animation: col-dim 3.2s linear infinite; }
.wave .col-0 { animation-delay: 0s; }
.wave .col-1 { animation-delay: 0.115s; }
.wave .col-2 { animation-delay: 0.23s; }
.wave .col-3 { animation-delay: 0.345s; }
.wave .col-4 { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) { .wave .col { animation: none !important; } }

/* ── Utility helpers (sparingly used) ──────────────────────────────── */
.row { display: flex; align-items: center; gap: 12px; }
.row-baseline { display: flex; align-items: baseline; gap: 12px; }
.spacer { flex: 1; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.max-w-md { max-width: 480px; }
.max-w-lg { max-width: 720px; }
.max-w-xl { max-width: 960px; }

/* ── Loaded-out (login) ────────────────────────────────────────────── */

/* ── Per-activity analysis screen (§7) ─────────────────────────────── */
.analysis { display: flex; flex-direction: column; gap: 20px; }
.analysis.cal-bike     { --sport: var(--sport-bike); }
.analysis.cal-run      { --sport: var(--sport-run); }
.analysis.cal-swim     { --sport: var(--sport-swim); }
.analysis.cal-strength { --sport: var(--sport-strength); }
.analysis.cal-other    { --sport: var(--text-3); }

.an-head { display: flex; align-items: center; gap: 10px; }
.an-bar { width: 4px; height: 22px; border-radius: 2px; background: var(--sport, var(--text-3)); }
.an-meta { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.an-dim { color: var(--text-3); }
.an-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--success); border: 1px solid var(--success);
  border-radius: var(--r-sm); padding: 1px 6px;
}
.an-download { margin-left: auto; font-family: var(--mono); font-size: 11px; }
/* Page actions on the analysis screen (#92): download / view plan / unpair. */
.an-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }

/* Athlete-view panel: briefing + workout structure share one panel with a thin separator.
   Used by the calendar popup AND the analysis view-plan modal (#92) — moved here from
   week_calendar.css so it's available on the analysis page too. */
.workout-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0; overflow: hidden; }
.workout-panel-briefing { padding: 10px 14px; }
.workout-panel-briefing:empty { display: none; }
.workout-panel-briefing:not(:empty) + .workout-panel-body { border-top: 1px solid var(--border); }
.workout-panel-body {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text);
  padding: 12px 14px; margin: 0; overflow: auto; max-height: 55vh; white-space: pre;
}

.an-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.an-chip {
  min-width: 92px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.an-chip-label { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); text-transform: uppercase; }
.an-chip-value { font-size: 16px; font-weight: 600; color: var(--text); }
.an-chip-sub { font-family: var(--mono); font-size: 10px; color: var(--text-2); }

.an-chart-wrap { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
/* Hovered-segment stats readout over the chart (B-010). */
.an-seg-readout {
  position: absolute; top: 16px; right: 16px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: var(--text);
  background: var(--surface-1, var(--surface-2)); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 3px 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.an-chart-toggles { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.an-toggle {
  font-family: var(--mono); font-size: 11px; cursor: pointer;
  padding: 2px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-3);
}
.an-toggle.is-on { color: var(--text); border-color: var(--text-3); background: var(--surface-hover); }
.an-chart-note { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
#an-chart { width: 100%; }

/* Power time-in-zone bar (B-005). */
.an-zones { margin-top: 14px; }
.an-zones-title { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-bottom: 6px; }
.an-zones-bar { display: flex; height: 14px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3, var(--border)); }
.an-zones-seg { height: 100%; }
.an-zones-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px 16px; margin-top: 8px; }
.an-zones-li { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.an-zones-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.an-zones-name { color: var(--text); }
.an-zones-range { color: var(--text-3); font-family: var(--mono); font-size: 10px; }
.an-zones-time { margin-left: auto; color: var(--text-2); font-family: var(--mono); font-size: 10px; }

.an-table-wrap { overflow-x: auto; }
.an-splits-title { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin: 16px 0 6px; }
/* Best-effort strip (B-016). */
.an-efforts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
.an-efforts-title { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.an-effort { font-size: 12px; color: var(--text-2); }
.an-effort b { color: var(--text); font-weight: 600; }
/* width:auto — size to content (roomy padding does the spacing) so the table
   reads as a block, not stretched edge-to-edge across the page. */
.an-table { width: auto; border-collapse: collapse; font-size: 12.5px; }
.an-table th { text-align: left; font-family: var(--mono); font-size: 10px; color: var(--text-3);
  text-transform: uppercase; padding: 4px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.an-table td { padding: 4px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; font-family: var(--mono); }
.an-table th:first-child, .an-table td:first-child { padding-left: 4px; }
.an-table th:last-child, .an-table td:last-child { padding-right: 4px; }
/* Numeric columns: right-aligned, tabular figures so digits line up (§7.4). */
.an-table th.an-num, .an-table td.an-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table th.an-c-label, .an-table td.an-c-label { text-align: left; }
/* avg + NP cells tint by whether that metric sits in the power band (#84): on a
   rolling block avg can fall out (red) while NP holds (green) — the verdict is
   the OR, and the two cells show which one carried it. VI is a plain diagnostic. */
.an-table td .pw-in { color: var(--success); }
.an-table td .pw-out { color: var(--danger); }
.an-table td.an-vi { color: var(--text-3); }
/* vs-target mini-bar (#101): the band is the middle third of the track; the marker
   is the achieved average. Green when on target (avg OR NP in band, #84), amber off. */
.an-target-cell .an-tbar {
  display: block; position: relative; height: 4px; margin-top: 3px; border-radius: 999px;
  background: var(--surface-2);
}
.an-target-cell .an-tbar::before {
  content: ""; position: absolute; left: 33.33%; right: 33.33%; top: 0; bottom: 0;
  border-radius: 999px; background: var(--success); opacity: 0.28;
}
.an-target-cell .an-tbar.is-off::before { background: var(--warning); }
.an-tbar-mark {
  position: absolute; top: -2px; width: 2px; height: 8px; margin-left: -1px;
  border-radius: 1px; background: var(--success);
}
.an-tbar.is-off .an-tbar-mark { background: var(--warning); }
/* A planned block with no execution — dimmed, with "✗ missed" in the plan cell. */
.an-row.is-missed td { color: var(--text-3); }
.an-row.is-missed td:last-child { color: var(--danger); white-space: nowrap; }
/* HR vs its guard: in-range green, out-of-range red; the planned range dimmed. */
.an-table td .hr-in { color: var(--success); }
.an-table td .hr-out { color: var(--danger); }
.an-table td .an-hr-t { color: var(--text-3); }
/* Chart ↔ table linking: the lap the chart cursor (or a row hover) points at. */
.an-row { cursor: default; }
.an-row.is-linked > td { background: color-mix(in srgb, var(--chart-highlight) 14%, transparent); }

/* Block selection (#91 PR-B): a narrow checkbox column + the filter-pill treatment on
   a picked row (accent-soft tint + accent label) — no coloured left rail (rule 6). */
.an-table th.an-select, .an-table td.an-select {
  width: 1%; text-align: center; padding-left: 4px; padding-right: 8px;
}
.an-table td.an-select .an-pick { accent-color: var(--accent-solid); cursor: pointer; margin: 0; }
.an-row.is-selected > td { background: var(--accent-soft); }
.an-row.is-selected > td.an-c-label { color: var(--accent-text); }

/* The selection strip: a filtered, accent-tinted panel with a mono eyebrow, the honest
   scope note, and the rep-to-rep tiles (all filled client-side). */
.an-selection {
  background: var(--accent-soft); border: 1px solid var(--accent-text);
  border-radius: var(--r-lg); padding: 12px 14px; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.an-selection[hidden] { display: none; }
.an-selection-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.an-selection-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.an-selection-clear {
  background: none; border: none; color: var(--accent-text); font-family: var(--mono);
  font-size: 11px; cursor: pointer; padding: 0; text-decoration: underline;
}
.an-selection-note { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.an-selection-chips { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.an-rep { display: flex; flex-direction: column; gap: 1px; }
.an-rep-label { font-family: var(--mono); font-size: 9.5px; color: var(--accent-text); text-transform: uppercase; }
.an-rep-value { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
.an-rep-sub { font-family: var(--mono); font-size: 10px; color: var(--text-2); }

.an-summary { font-size: 13px; color: var(--text-2); }
.an-summary p { margin: 2px 0; }

/* ══ analysis redesign (#94) — masthead + 34/66 layout, strictly standard blox tokens ══ */
.an-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 2px 0 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.an-mh-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--text-3); }
.an-headline { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.an-kpi { text-align: right; }
.an-kpi-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.an-kpi-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600;
  color: var(--text); line-height: 1.15; }
.an-kpi.pos .an-kpi-val { color: var(--success); }
.an-badge-ok { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px;
  font-weight: 500; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); border-radius: var(--r-md); padding: 6px 10px; }

.an-metrics { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 11.5px; background: var(--surface-2);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; }
.an-metric { color: var(--text); white-space: nowrap; }
.an-metric b { color: var(--text-3); font-weight: 500; margin-right: 4px; }
.an-metric i { color: var(--text-3); font-style: normal; }

.an-grid { display: grid; grid-template-columns: 34% 1fr; gap: 16px; align-items: start; }
.an-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.an-chart-card { position: relative; }
.an-card-title { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px; }
.an-card-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--text-3); }

/* session log — read-only view + a small edit icon that reveals the forms (#94) */
.an-session .an-card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.an-edit-btn { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 5px;
  margin: -5px -5px -5px 0; display: inline-flex; align-items: center; border-radius: var(--r-sm); }
.an-edit-btn:hover { color: var(--accent-text); }
.an-session-view { display: flex; flex-wrap: wrap; gap: 4px 20px; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.an-session-item b { color: var(--text-3); font-weight: 500; margin-right: 5px; }
.an-session-forms { display: flex; flex-direction: column; gap: 9px; }
.an-session-row { display: flex; align-items: center; gap: 9px; margin-bottom: 0; }
.an-session-lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); width: 38px; flex-shrink: 0; }
.an-rpe-inp { width: 60px; text-align: center; }
.an-note-inp, .an-gear-inp { flex: 1; min-width: 0; }

.an-pc { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 12px; }
.an-pc-pt { color: var(--text); }
.an-pc-pt b { color: var(--text-3); font-weight: 500; margin-right: 4px; font-size: 10px; }

.an-coach .ai-view { max-width: 74ch; }

@media (max-width: 900px) { .an-grid { grid-template-columns: 1fr; } }

.fit-chip-analysis { display: inline-flex; align-items: center; color: var(--text-3); padding: 0 2px; text-decoration: none; }
.fit-chip-analysis:hover { color: var(--accent-solid); }
.fit-chip-analysis svg { width: 10px; height: 10px; }
/* Delete a standalone activity + FIT (B-023). */
.fit-chip-delete { display: inline-flex; align-items: center; color: var(--text-3); padding: 0 2px; background: none; border: none; cursor: pointer; }
.fit-chip-delete:hover { color: var(--metric-hr, #EF4444); }
.fit-chip-delete svg { width: 10px; height: 10px; }

/* ── Records page (§8) ─────────────────────────────────────────────── */
.records { display: flex; flex-direction: column; gap: 14px; }
.records.cal-bike { --sport: var(--sport-bike); }
.rec-section { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.rec-note { font-size: 12.5px; color: var(--text-2); margin: 0; max-width: 60ch; }
.records.cal-run { --sport: var(--sport-run); }

/* ── pool-swim session view (#101): set-block table, click to expand lengths ── */
.sw-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 14px; }
.sw-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.sw-swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--stroke-c, var(--sport-swim)); }
.sw-swatch.sw-free   { --stroke-c: var(--sport-swim); }
.sw-swatch.sw-back   { --stroke-c: #6aa9e0; }
.sw-swatch.sw-breast { --stroke-c: #57c2a8; }
.sw-swatch.sw-fly    { --stroke-c: #c79be6; }
.sw-swatch.sw-mixed  { --stroke-c: #9aa0a6; }
.sw-swatch.sw-other  { --stroke-c: #9aa0a6; }
.sw-swatch.sw-drill  { --stroke-c: #b9b4ab; background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,.18) 3px 6px); }

/* align-self keeps the table at content width: .analysis is a flex column, whose
   default align-items:stretch would otherwise force width:auto to fill the row. */
.sw-table { width: auto; max-width: 100%; align-self: flex-start; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.sw-table thead th { text-align: right; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500; padding: 4px 10px 8px; border-bottom: 1px solid var(--border); }
.sw-table th.sw-th-set { text-align: left; }
.sw-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.sw-table td.an-num { text-align: right; }
.sw-table td.sw-dim { color: var(--text-3); }
.sw-set-row { cursor: pointer; }
.sw-set-row:hover { background: var(--surface-hover); }
.sw-set-row:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.sw-set-row td.sw-set { font-weight: 500; color: var(--text); }
.sw-set-row.is-drill td.sw-set { color: var(--text-2); }
.sw-caret { display: inline-block; width: 0; height: 0; margin-right: 7px; vertical-align: middle;
  border-left: 5px solid var(--text-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s ease; }
.sw-set-row.is-open .sw-caret { transform: rotate(90deg); }
.sw-len-row td { background: var(--surface-2); color: var(--text-2); }
.sw-len-row td.sw-len-set { padding-left: 24px; }
.sw-len-row .sw-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: middle; }
.sw-axis-note { font-size: 11.5px; color: var(--text-2); margin: 14px 0 0; }

/* ── inline workout-create: type checkboxes (B-035) ── */
.check-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.check input { margin: 0; }

/* ── live DML preview (B-036) ── */
.dml-preview { margin-top: 8px; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 8px;
  background: var(--surface-2, rgba(0,0,0,.03)); padding: 8px 10px; }
.dml-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 4px; }
.dml-preview-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.dml-preview-dur { font-size: 12px; font-weight: 600; color: var(--text); }
.dml-preview-body { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  line-height: 1.45; color: var(--text); white-space: pre-wrap; max-height: 220px; overflow: auto; }
.dml-preview-error { font-size: 12px; color: var(--danger, #c0392b); white-space: pre-wrap; }

/* ── fill-target provenance (B-037) ── */
.fill-sources { margin-top: 8px; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 8px;
  background: var(--surface-2, rgba(0,0,0,.03)); padding: 8px 10px; }
.fill-sources-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.fill-sources-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fill-source { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.fill-source-head { font-family: var(--mono, ui-monospace, monospace); color: var(--text); white-space: nowrap; }
.fill-source-detail { color: var(--text-2); text-align: right; }

/* ── post-sync summary banner (B-038) ── */
.sync-flash { display: flex; align-items: center; gap: 12px; }
.sync-flash[hidden] { display: none; }
.sync-flash span { flex: 1; }
.sync-flash-close { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer;
  color: inherit; opacity: .6; padding: 0 2px; }
.sync-flash-close:hover { opacity: 1; }
.icu-sync-fit { margin: 8px 0 0; font-size: 13px; color: var(--text); }
.icu-sync-fit.has-failures { color: var(--accent, #b8860b); font-weight: 600; }

/* ── coach manual (/handleiding) ── */
.handleiding-wrap { display: flex; align-items: flex-start; gap: 32px; }
.handleiding-toc { position: sticky; top: 16px; flex: 0 0 200px; font-size: 13px; }
.handleiding-toc-title { text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
  color: var(--text-2); margin-bottom: 8px; }
.handleiding-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.handleiding-toc a { color: var(--text-2); text-decoration: none; }
.handleiding-toc a:hover { color: var(--text); }

.handleiding { flex: 1 1 auto; min-width: 0; max-width: 760px; font-size: 14.5px;
  line-height: 1.65; color: var(--text); }
.handleiding h2 { font-size: 20px; font-weight: 600; margin: 36px 0 12px; padding-top: 8px;
  scroll-margin-top: 16px; }
.handleiding h2:first-child { margin-top: 0; }
.handleiding h3 { font-size: 15.5px; font-weight: 600; margin: 24px 0 8px; }
.handleiding p { margin: 0 0 12px; }
.handleiding ul, .handleiding ol { margin: 0 0 12px; padding-left: 22px; }
.handleiding li { margin-bottom: 5px; }
.handleiding a { color: var(--sport-bike, #2e7d32); }
.handleiding strong { font-weight: 600; }
.handleiding code { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px;
  background: var(--surface-2, rgba(0,0,0,.05)); padding: 1px 5px; border-radius: 4px; }
.handleiding pre { background: var(--surface-2, rgba(0,0,0,.04)); border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.handleiding pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.5; }
.handleiding table { border-collapse: collapse; margin: 0 0 14px; font-size: 13.5px; }
.handleiding th, .handleiding td { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); vertical-align: top; }
.handleiding th { font-weight: 600; color: var(--text); }

@media (max-width: 760px) {
  .handleiding-wrap { flex-direction: column; gap: 16px; }
  .handleiding-toc { position: static; flex-basis: auto; }
}

/* ── Administration → Data tab ─────────────────────────────────────────
   Tick the entities to act on; click a tile to list what is in the period. */
.data-scope { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.data-field {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.data-field select { min-width: 140px; }

.data-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.data-tile {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; cursor: pointer;
}
.data-tile:hover { border-color: var(--border-strong); }
.data-tile:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.data-tile.is-open { border-color: var(--accent-text); }
.data-tile.is-picked { background: var(--accent-soft); border-color: var(--accent-text); }
.data-tick { display: flex; align-items: center; cursor: pointer; }
.data-tick input { width: 15px; height: 15px; accent-color: var(--accent-solid); cursor: pointer; }
.data-tile-label {
  flex: 1; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.data-tile-count { font-size: 19px; color: var(--text); }

.data-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.data-hint { font-size: 11px; color: var(--text-3); }

/* the console: a dashed rule, then the rows themselves */
.data-console { margin-top: 20px; border-top: 1px dashed var(--border-strong); padding-top: 14px; }
.data-console-body {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  background: var(--surface-2); border-radius: var(--r-md);
  font-size: 12px; line-height: 1.7; color: var(--text-2); white-space: pre;
}
.data-console-body .data-console-cmd { color: var(--text-3); }
.data-console-body .data-console-meta { color: var(--text-3); }

.data-note { margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-3); max-width: 78ch; }

/* ── Analysis: ride shape — why a steady-state number is absent (#63) ───── */
.an-shape {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--r-md);
}
.an-shape-label {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.an-shape-note { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }