/* ============================================================
   ATHLERA Design System
   Coaching & Performance Platform — by Malte
   Dark / Deep Blue / Silver, gold reserved for premium accents only.
   ============================================================ */

html{ scroll-behavior:smooth; }

:root{
  /* --- Core surfaces --- */
  --athlera-bg:        #05070C;
  --athlera-surface:   #0D1119;
  --athlera-surface-2: #141A26;
  --athlera-surface-3: #1B2333;
  --athlera-border:    #232B3C;
  --athlera-border-soft: #1A2130;

  /* --- Brand --- */
  --athlera-blue:       #3B82F6;
  --athlera-blue-dim:   #1E3A66;
  --athlera-blue-glow:  rgba(59,130,246,0.18);
  --athlera-silver:     #AEB8CC;
  --athlera-white:      #F5F7FB;
  --athlera-gold:       #D9B36C;   /* sparse: PR highlights only */
  --athlera-gold-dim:   rgba(217,179,108,0.14);

  /* --- Text --- */
  --athlera-text:   #F1F4FA;
  --athlera-muted:  #7C8698;
  --athlera-faint:  #4E5666;

  /* --- Status --- */
  --athlera-good: #34D399;
  --athlera-good-dim: rgba(52,211,153,0.12);
  --athlera-warn: #F5B754;
  --athlera-warn-dim: rgba(245,183,84,0.12);
  --athlera-bad:  #F1555F;
  --athlera-bad-dim: rgba(241,85,95,0.12);

  /* --- Legacy aliases (kept so existing inline references never break) --- */
  --bg: var(--athlera-bg);
  --surface: var(--athlera-surface);
  --surface2: var(--athlera-surface-2);
  --border: var(--athlera-border);
  --text: var(--athlera-text);
  --mute: var(--athlera-muted);
  --accent: var(--athlera-blue);
  --air: var(--athlera-silver);
  --good: var(--athlera-good);
  --warn: var(--athlera-warn);
  --bad: var(--athlera-bad);

  /* --- Scale --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --bottom-nav-h: 68px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);

  /* --- Motion system ---
     Three durations and two curves for the whole app. Components reference
     these instead of inventing their own numbers, which is what makes the
     interface feel like one product rather than a pile of effects.
       fast  — state feedback the finger is still on (press, hover)
       base  — something appearing or changing in place
       slow  — a celebration, and only a celebration
     Nothing loops except a genuine loading skeleton. Everything is
     transform/opacity so nothing can shift layout or force a reflow. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 380ms;
  --ease-out: cubic-bezier(.22,.8,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* --- Depth ---
     Two levels, used sparingly. Depth here means "this sits above that", never
     decoration: a card at rest and a card under the pointer. A third floating
     level was defined and never used, so it is not defined. */
  --lift-0: 0 1px 2px rgba(0,0,0,0.30);
  --lift-1: 0 4px 14px rgba(0,0,0,0.38);
}

/* The single guard that matters: it covers every component, including ones
   written after this line. The per-component reduced-motion blocks further down
   are belt and braces, not the safety net. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  html{ scroll-behavior: auto !important; }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--athlera-bg); color:var(--athlera-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(217,179,108,0.05), transparent 55%);
  background-attachment:fixed;
}
a{ color:var(--athlera-blue); text-decoration:none; }
.tabular{ font-variant-numeric: tabular-nums; }
::selection{ background:var(--athlera-blue-glow); }
:focus-visible{ outline:2px solid var(--athlera-blue); outline-offset:2px; border-radius:4px; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--athlera-border); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.app-shell{ min-height:100vh; }

/* --- Desktop sidebar --- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:linear-gradient(180deg, var(--athlera-surface), var(--athlera-bg));
  border-right:1px solid var(--athlera-border-soft);
  display:flex; flex-direction:column; z-index:30;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:22px 20px 18px;
  border-bottom:1px solid var(--athlera-border-soft);
}
.sidebar-brand img{ width:34px; height:34px; object-fit:contain; border-radius:8px; }
.sidebar-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.sidebar-brand-text .wordmark{ font-weight:800; font-size:16px; letter-spacing:1.5px; color:var(--athlera-white); }
.sidebar-brand-text .tagline{ font-size:10px; color:var(--athlera-muted); letter-spacing:.5px; text-transform:uppercase; }
.sidebar-nav{ flex:1; padding:16px 12px; overflow-y:auto; }
.sidebar-nav .nav-group-label{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--athlera-faint); padding:14px 10px 6px; }
.sidebar-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:var(--athlera-silver); font-size:14px; font-weight:600; margin-bottom:2px;
  transition:background .15s ease, color .15s ease;
}
.sidebar-link .sl-icon{ font-size:16px; width:20px; text-align:center; opacity:.9; }
.sidebar-link:hover{ background:var(--athlera-surface-2); color:var(--athlera-white); }
.sidebar-link.active{ background:var(--athlera-blue-dim); color:var(--athlera-white); box-shadow:inset 0 0 0 1px rgba(59,130,246,0.35); }
.sidebar-footer{ padding:14px 16px; border-top:1px solid var(--athlera-border-soft); }
.sidebar-user{ display:flex; align-items:center; gap:10px; }
.sidebar-user .avatar{
  width:34px; height:34px; border-radius:50%; background:var(--athlera-surface-3);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--athlera-silver);
  border:1px solid var(--athlera-border);
}
.sidebar-user .who{ flex:1; min-width:0; }
.sidebar-user .who .name{ font-size:13px; font-weight:700; color:var(--athlera-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .who .role{ font-size:11px; color:var(--athlera-muted); }

/* --- Mobile top header --- */
.mobile-header{
  display:none; position:sticky; top:0; z-index:25; height:var(--topbar-h);
  align-items:center; justify-content:space-between; padding:0 16px;
  background:rgba(5,7,12,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--athlera-border-soft);
}
.mobile-header .brand-mini, .ca-tri .ca-card-head h3 { display:flex; align-items:center; gap:8px; }
.mobile-header .brand-mini img{ width:26px; height:26px; border-radius:6px; object-fit:contain; }
.mobile-header .brand-mini .wordmark{ font-weight:800; font-size:14px; letter-spacing:1px; color:var(--athlera-white); }

/* --- Content area --- */
.main-content{ margin-left:var(--sidebar-w); padding:32px 36px 60px; max-width:1180px; }
.container{ max-width:1100px; margin:0 auto; padding:24px 18px 60px; } /* legacy alias, unused pages fall back to this */

@media (max-width: 1023px){
  .sidebar{ display:none; }
  .mobile-header{ display:flex; }
  .main-content{ margin-left:0; padding:20px 16px 90px; }
}

/* ============================================================
   BOTTOM NAV (mobile, both roles)
   ============================================================ */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:rgba(8,10,16,0.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--athlera-border-soft);
  display:flex; justify-content:space-around; align-items:center;
  padding:8px 4px max(8px, env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,0.35);
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--athlera-muted); font-size:11px; font-weight:600; flex:1; text-align:center;
  padding:6px 2px; border-radius:10px; min-height:48px; justify-content:center;
  transition:color .15s ease;
}
.bottom-nav a.active{ color:var(--athlera-blue); }
.bottom-nav .bn-icon{ font-size:20px; line-height:1; }
@media (min-width: 1024px){ .bottom-nav{ display:none; } }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1{ font-size:26px; font-weight:800; margin:0 0 4px; letter-spacing:-0.01em; color:var(--athlera-white); }
h2{ font-size:19px; font-weight:750; margin:0 0 12px; color:var(--athlera-white); }
h3{ font-size:12px; font-weight:750; margin:0 0 10px; color:var(--athlera-muted); text-transform:uppercase; letter-spacing:.6px; }
.subtitle{ color:var(--athlera-muted); margin-bottom:24px; font-size:14px; }
.page-header{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--athlera-blue); margin-bottom:6px; }

/* Numeric emphasis for weight/reps/PR/e1RM */
.metric{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-0.01em; }
.metric-lg{ font-size:32px; }

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.card{
  background:linear-gradient(180deg, var(--athlera-surface-2), var(--athlera-surface));
  border:1px solid var(--athlera-border); border-radius:var(--radius);
  padding:20px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.card-hero{
  background:linear-gradient(135deg, var(--athlera-surface-2) 0%, var(--athlera-bg) 120%);
  border:1px solid var(--athlera-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
/* auto-fit's minmax math can still overflow a narrow mobile viewport in edge cases
   (e.g. a grid nested inside a padded card, or a >2-col row); force a single column
   below 640px so no grid can ever push the page wider than the screen. */
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

/* KPI stat tiles */
.stat{
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border); border-radius:var(--radius-sm);
  padding:16px; position:relative; overflow:hidden;
}
.stat::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--athlera-blue); opacity:.55; }
.stat .num{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--athlera-white); }
.stat .label{ font-size:11px; color:var(--athlera-muted); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }

/* ============================================================
   TABLES + RESPONSIVE CARD FALLBACK
   ============================================================ */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; color:var(--athlera-muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; padding:9px 10px; border-bottom:1px solid var(--athlera-border); }
td{ padding:11px 10px; border-bottom:1px solid var(--athlera-border-soft); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:rgba(255,255,255,0.015); }

@media (max-width: 640px){
  /* None of the responsive-cards tables actually wrap their header row in a <thead> —
     they use a bare first <tr><th>...</th></tr>. Targeting :first-child directly (instead
     of assuming a <thead> that doesn't exist) is what actually hides the header row across
     all 14 uses of this class, not just the ones with a literal <thead> element. */
  table.responsive-cards tr:first-child,
  table.responsive-cards thead{ display:none; }
  table.responsive-cards, table.responsive-cards tbody, table.responsive-cards tr, table.responsive-cards td{ display:block; width:100%; }
  table.responsive-cards tr{
    background:var(--athlera-surface-2); border:1px solid var(--athlera-border); border-radius:var(--radius-sm);
    margin-bottom:10px; padding:10px 12px;
  }
  /* flex-wrap is critical here: cell content can span multiple lines (e.g. "80kg x 8" + a
     details <span> below it) or contain long text (exercise descriptions). Without wrap,
     flex children are forced onto one row with no shrink point, pushing the row (and the
     whole page) wider than the viewport — this caused real horizontal overflow on the
     Exercises and Analytics pages. */
  table.responsive-cards td{
    border:none; padding:6px 0; display:flex; flex-wrap:wrap; justify-content:space-between;
    align-items:flex-start; gap:4px 12px; max-width:100%;
  }
  table.responsive-cards td::before{
    content:attr(data-label); color:var(--athlera-muted); font-size:11px; text-transform:uppercase;
    letter-spacing:.5px; font-weight:700; flex-shrink:0;
  }
  /* The actual value must be able to shrink/wrap within the row's available width instead
     of forcing its natural (unwrapped) width — min-width:0 is what allows flex children to
     shrink below their content size. */
  table.responsive-cards td > *{ min-width:0; }
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
label{ display:block; font-size:12px; color:var(--athlera-muted); margin-bottom:5px; font-weight:600; }
input[type=text],input[type=password],input[type=number],input[type=date],input[type=file],input[type=url],select,textarea{
  width:100%; background:var(--athlera-surface-2); border:1px solid var(--athlera-border); color:var(--athlera-text);
  border-radius:var(--radius-sm); padding:11px 13px; font-size:14.5px; margin-bottom:14px;
  transition:border-color .15s ease, box-shadow .15s ease; font-family:inherit;
}
textarea{ resize:vertical; min-height:70px; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--athlera-blue); box-shadow:0 0 0 3px var(--athlera-blue-glow);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--athlera-blue); color:#04101F; border:none;
  padding:11px 18px; border-radius:10px; font-weight:750; font-size:14px; cursor:pointer;
  transition:filter .15s ease, transform .05s ease; min-height:44px;
}
.btn:hover{ filter:brightness(1.1); }
.btn:active{ transform:scale(0.98); }
.btn-ghost{ background:var(--athlera-surface-2); color:var(--athlera-text); border:1px solid var(--athlera-border); }
.btn-ghost:hover{ background:var(--athlera-surface-3); filter:none; }
.btn-sm{ padding:8px 13px; font-size:12.5px; border-radius:8px; min-height:36px; }
.btn-bad{ background:var(--athlera-bad); color:#2A0000; }
.btn-block{ width:100%; }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge{ display:inline-block; padding:4px 10px; border-radius:99px; font-size:10.5px; font-weight:750; text-transform:uppercase; letter-spacing:.5px; }
.badge-good{ background:var(--athlera-good-dim); color:var(--athlera-good); border:1px solid rgba(52,211,153,0.3); }
.badge-warn{ background:var(--athlera-warn-dim); color:var(--athlera-warn); border:1px solid rgba(245,183,84,0.3); }
.badge-bad{ background:var(--athlera-bad-dim); color:var(--athlera-bad); border:1px solid rgba(241,85,95,0.3); }
.badge-mute{ background:rgba(124,134,152,0.12); color:var(--athlera-muted); border:1px solid rgba(124,134,152,0.25); }
.badge-gold{ background:var(--athlera-gold-dim); color:var(--athlera-gold); border:1px solid rgba(217,179,108,0.35); }

/* ============================================================
   ALERTS / FLASH / TOAST
   ============================================================ */
.flash-stack{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.flash{ padding:12px 14px; border-radius:10px; font-size:14px; border:1px solid transparent; animation:slideIn .2s ease; }
.flash-success{ background:var(--athlera-good-dim); border-color:rgba(52,211,153,0.35); color:var(--athlera-good); }
@keyframes slideIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }

/* ============================================================
   EMPTY / LOADING / ERROR STATES
   ============================================================ */
.empty-state{
  text-align:center; padding:52px 24px; border:1px dashed var(--athlera-border); border-radius:var(--radius);
  background:var(--athlera-surface);
}
.empty-state .es-icon{ font-size:34px; margin-bottom:10px; opacity:.7; }
.empty-state h3{ color:var(--athlera-text); font-size:16px; text-transform:none; letter-spacing:0; margin-bottom:4px; }
.empty-state p{ color:var(--athlera-muted); font-size:13.5px; margin:0 0 16px; }

@keyframes skeleton{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
/* Das Lade-Skeleton ist die EINE Animation, die legitim laeuft (Test 3c haelt
   das fest). Es hat aktuell keinen Verwender im Markup und ist trotzdem kein
   toter Code, sondern ein Design-System-Primitiv fuer Ladezustaende. Am
   2026-08-29 versehentlich als "tot" entfernt und wiederhergestellt. */
.skeleton{ background:linear-gradient(90deg, var(--athlera-surface-2) 25%, var(--athlera-surface-3) 37%, var(--athlera-surface-2) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:8px; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar{ height:6px; background:var(--athlera-border); border-radius:99px; overflow:hidden; }
.progress-bar-fill{ height:100%; background:var(--athlera-blue); border-radius:99px; transition:width .3s ease; }

/* ============================================================
   AUTH / CENTERED SCREENS
   ============================================================ */
.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:400px; background:linear-gradient(180deg, var(--athlera-surface-2), var(--athlera-surface)); border:1px solid var(--athlera-border); border-radius:var(--radius-lg); padding:36px 32px; box-shadow:var(--shadow-lg); }
.auth-logo{ display:flex; flex-direction:column; align-items:center; margin-bottom:22px; }
.auth-logo img{ width:64px; height:64px; object-fit:contain; border-radius:14px; margin-bottom:12px; box-shadow:0 8px 24px rgba(59,130,246,0.15); }
.auth-logo .wordmark{ font-weight:800; font-size:20px; letter-spacing:2px; color:var(--athlera-white); }
.auth-logo .by-line{ font-size:11px; color:var(--athlera-muted); letter-spacing:.5px; margin-top:2px; }
.auth-card h1{ text-align:center; margin-bottom:6px; }
.auth-card .subtitle{ text-align:center; }

/* ============================================================
   WORKOUT UX
   ============================================================ */
.workout-exercise-card{
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border); border-radius:var(--radius);
  padding:18px; margin-bottom:14px;
}
.workout-exercise-name{ font-size:17px; font-weight:750; color:var(--athlera-white); }
.workout-target{ font-size:12.5px; color:var(--athlera-muted); margin-top:2px; }
.set-row{ display:grid; grid-template-columns:34px 1fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.set-num{ color:var(--athlera-muted); font-weight:750; font-size:13px; }
.set-row input{ margin-bottom:0; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.set-complete-btn{
  min-width:44px; min-height:44px; border-radius:10px; background:var(--athlera-blue); color:#04101F; border:none;
  font-weight:800; cursor:pointer; font-size:16px;
}
.set-logged-row{
  display:grid; grid-template-columns:34px 1fr 1fr 1fr; gap:8px; align-items:center; padding:8px 4px;
  background:var(--athlera-good-dim); border-radius:8px; margin-bottom:6px; font-variant-numeric:tabular-nums; font-weight:700;
}
.today-hero{
  text-align:center; padding:32px 22px; position:relative; overflow:hidden;
}
.today-hero::after{
  content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 50% -20%, rgba(59,130,246,0.14), transparent 70%);
  pointer-events:none;
}
.today-hero .eyebrow{ position:relative; }
.today-hero .today-title{ position:relative; font-size:23px; font-weight:800; margin-bottom:18px; color:var(--athlera-white); }

/* ============================================================
   PLAN BUILDER / DAY PICKER / MISC COMPONENTS (kept, restyled)
   ============================================================ */
.day-picker{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.day-choice{
  display:flex; flex-direction:column; gap:4px; padding:18px 16px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border); text-align:left; min-height:44px;
  transition:border-color .15s ease, background .15s ease;
}
.day-choice:not(.done){ cursor:pointer; }
.day-choice:not(.done):active{ background:var(--athlera-blue); border-color:var(--athlera-blue); }
.day-choice:not(.done):active .dc-label, .day-choice:not(.done):active .dc-meta{ color:#04101F; }
.day-choice .dc-label{ font-weight:750; font-size:15px; color:var(--athlera-text); }
.day-choice.done{ opacity:.55; }

.locked-banner{ background:var(--athlera-warn-dim); border:1px solid rgba(245,183,84,0.3); color:var(--athlera-warn); padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:13px; }
.split-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px; }
.photo-item{ position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:var(--athlera-surface-2); border:1px solid var(--athlera-border); }
.photo-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-delete{ position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,0.65); color:#fff; border:none; cursor:pointer; font-size:13px; }

.chart-wrap{ position:relative; height:240px; }

/* ============================================================
   PHASE 5 — COACH WORKSPACE COMPONENTS
   (built on the existing Phase 4 tokens: no new palette, no new
   card logic, no second navigation)
   ============================================================ */
.quick-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.filter-bar input[type=text]{ flex:2; min-width:180px; margin-bottom:0; }
.filter-bar select{ flex:1; min-width:150px; margin-bottom:0; }

.athlete-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; margin-bottom:16px; }
@media (max-width: 640px){ .athlete-grid{ grid-template-columns:1fr; } }

.athlete-card{
  display:block; background:linear-gradient(180deg, var(--athlera-surface-2), var(--athlera-surface));
  border:1px solid var(--athlera-border); border-radius:var(--radius); padding:16px;
  color:var(--athlera-text); transition:border-color .15s ease, transform .05s ease;
}
.athlete-card:active{ transform:scale(0.995); }
.ac-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.ac-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--athlera-surface-3); border:1px solid var(--athlera-border);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:var(--athlera-silver);
}
.ac-ident{ flex:1; min-width:0; }
.ac-name{ font-weight:750; font-size:15px; color:var(--athlera-white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-meta{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.ac-label{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--athlera-faint); font-weight:700; }
.ac-value{ font-size:13px; color:var(--athlera-silver); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-pr{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--athlera-border-soft);
  font-size:12px; color:var(--athlera-gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Athlete detail: section anchors + tab-like section nav */
.section-nav{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.section-nav a{
  padding:7px 13px; border-radius:99px; font-size:12.5px; font-weight:650;
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border); color:var(--athlera-silver);
}
.section-nav a:hover{ border-color:var(--athlera-blue); color:var(--athlera-white); }
.detail-section{ scroll-margin-top:80px; }

/* Pagination (audit fix: roster page weight) */
.pagination{ display:flex; align-items:center; justify-content:center; gap:12px; margin:4px 0 20px; flex-wrap:wrap; }
.page-indicator{ font-size:13px; color:var(--athlera-muted); font-variant-numeric:tabular-nums; }

/* ============================================================
   PHASE 6 — FEEDBACK / MESSAGING
   (existing tokens only — no new palette)
   ============================================================ */
.feedback-thread{ display:flex; flex-direction:column; gap:10px; }
.feedback-msg{
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border);
  border-radius:var(--radius-sm); padding:12px 14px;
}
.feedback-msg.from-coach, .pb-item.has-logs { border-left:3px solid var(--athlera-blue); }
.feedback-msg.from-athlete{ border-left:3px solid var(--athlera-silver); }
.fm-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fm-author{ font-size:12px; font-weight:750; color:var(--athlera-white); }
.fm-time{ font-size:11px; color:var(--athlera-muted); margin-left:auto; }
.fm-body{ font-size:14px; color:var(--athlera-text); white-space:pre-wrap; word-break:break-word; }

.nav-badge{
  margin-left:auto; background:var(--athlera-blue); color:#04101F;
  font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:99px; min-width:18px; text-align:center;
}

/* ============================================================
   LEGACY CLASS ALIASES (from earlier "Maltes Coaching" build —
   kept 1:1 so nothing breaks, mapped onto new tokens)
   ============================================================ */
/* superseded by .sidebar / .mobile-header */
.brand{ font-weight:800; letter-spacing:1px; color:var(--athlera-white); }
.logout-btn{ background:none; border:none; color:var(--athlera-bad); font-size:13px; cursor:pointer; padding:6px; font-family:inherit; border-radius:8px; }
.logout-btn:hover{ background:var(--athlera-bad-dim); }
footer.hint{ color:var(--athlera-muted); font-size:12px; margin-top:30px; text-align:center; }

/* ============================================================
   PHASE 7 — NUTRITION
   (existing tokens only — no new palette)
   ============================================================ */
.day-switcher{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.day-switcher .day-label{ display:flex; align-items:center; gap:8px; font-size:15px; }

.macro-grid{ display:grid; gap:16px; }
.macro-row, .ex-demand { display:flex; flex-direction:column; gap:5px; }
.macro-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.macro-label{ font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.5px; color:var(--athlera-muted); }
.macro-value, .bp-nums strong { font-size:15px; font-weight:800; color:var(--athlera-white); }
.macro-target{ font-size:13px; font-weight:600; color:var(--athlera-muted); }
.macro-remaining, .mt-att-state { font-size:11.5px; color:var(--athlera-muted); }

.meal-block{
  border:1px solid var(--athlera-border); border-radius:var(--radius-sm);
  padding:14px; margin-bottom:12px; background:var(--athlera-surface-2);
}
.meal-head, .hm-p-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.meal-type{ font-weight:750; font-size:14px; color:var(--athlera-white); }
.meal-time{ font-size:12px; color:var(--athlera-muted); margin-left:8px; }
.meal-actions{ display:flex; gap:6px; }
.meal-photo{
  width:100%; max-width:260px; border-radius:var(--radius-sm); margin-bottom:10px;
  border:1px solid var(--athlera-border); display:block;
}
.meal-note{ font-size:13px; color:var(--athlera-muted); margin:8px 0 0; }

.estimate-notice{ border-color:var(--athlera-warn); }
.estimate-notice strong{ display:block; margin-bottom:6px; color:var(--athlera-warn); font-size:13px; }
.estimate-notice ul{ margin:0; padding-left:18px; }
.estimate-notice li{ font-size:13px; color:var(--athlera-silver); margin-bottom:3px; }

.item-editor{
  border:1px solid var(--athlera-border); border-radius:var(--radius-sm);
  padding:12px; margin-bottom:10px; background:var(--athlera-surface-2);
}
.ie-top{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.ie-top input{ flex:1; margin-bottom:0; font-weight:700; }
.ie-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(88px,1fr)); gap:8px; }
.ie-grid input{ margin-bottom:0; text-align:center; font-variant-numeric:tabular-nums; }
.ie-grid label{ font-size:10px; margin-bottom:3px; }
.ie-source{ font-size:11.5px; color:var(--athlera-muted); margin-top:8px; }

.totals-line{ display:flex; flex-wrap:wrap; gap:16px; font-weight:800; font-size:15px; }

/* 5 bottom-nav items still need comfortable taps on a 390px screen */
@media (max-width: 420px){
  .bottom-nav a{ font-size:10px; padding:6px 1px; }
  .bottom-nav .bn-icon{ font-size:18px; }
}

/* ============================================================
   ACCESSIBILITY — TOUCH TARGETS (muss GANZ am Ende stehen)
   Auf Touch-Geraeten waren Buttons 27-37px hoch, unter der ~44px-Empfehlung.
   Dieser Block stand urspruenglich vor den Legacy-Definitionen von .logout-btn
   und war damit davon abhaengig, dass spaetere Regeln min-height zufaellig nicht
   ueberschreiben. Am Dateiende kann das nicht mehr passieren.
   Nur bei grobem Zeiger aktiv -> die dichtere Desktop-Darstellung bleibt unveraendert.
   ============================================================ */
@media (pointer: coarse){
  .btn-sm{ min-height:44px; padding:11px 15px; }
  /* Der Quittier-Knopf ist mit Absicht klein — auf dem Touchgeraet gemessen
     waren es 60 x 18 px, und das trifft niemand zuverlaessig. Unauffaellig
     heisst nicht winzig: hier gilt dieselbe 44-px-Regel wie fuer jede andere
     Aktion, der Rand bleibt dezent. */
  .sg-ack-btn{ min-height:44px; padding:6px 14px; }
  .logout-btn{ min-height:44px; min-width:44px; padding:10px; }
  .photo-delete{ width:36px; height:36px; }
  .bottom-nav a{ min-height:48px; }
  .meal-actions .btn-sm{ min-height:44px; }
}

/* ==========================================================================
   Exercise Intelligence — detail page + in-workout quick guide (Phase 9)
   Uses the existing --athlera-* tokens only; no new palette.
   ========================================================================== */

/* --- media ---------------------------------------------------------------- */
/* Ein Video, wenn es eines gibt. Der Leerzustand gehoert nicht hierher,
   sondern in den einen Medienblock (.xv-*) — siehe exercise_detail.html. */
.xv-video{ width:100%; display:block; background:#000; aspect-ratio:16/9; border-radius:10px; }
.xv-note{ margin:0; font-size:12.5px; line-height:1.5; }

.ex-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.ex-facts, .mt-bw-row {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px;
}
.ex-facts strong{ font-size:14px; color:var(--athlera-text); }

.ex-demands{
  display:flex; flex-wrap:wrap; gap:18px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--athlera-border-soft);
}

.ex-dots{ display:flex; gap:4px; }
.ex-dots i{
  width:9px; height:9px; border-radius:50%;
  background:rgba(124,134,152,0.22); display:block;
}
.ex-dots i.on{ background:var(--athlera-gold); }

/* --- quick guide ---------------------------------------------------------- */
.ex-quick{ border-left:3px solid var(--athlera-gold); }
.ex-cues{ margin:0 0 10px; padding-left:18px; }
.ex-cues li{ margin-bottom:6px; font-size:14px; }
.ex-mistake{ margin:0; font-size:13.5px; color:var(--athlera-muted); }

/* --- muscles -------------------------------------------------------------- */
.ex-muscle-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.ex-muscle-row:last-child{ margin-bottom:0; }
.ex-muscle-label{
  flex:0 0 92px; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-faint); padding-top:5px;
}
.ex-muscle{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:5px 10px; margin:0 6px 6px 0; border-radius:8px;
  background:rgba(124,134,152,0.10); border:1px solid var(--athlera-border-soft);
  font-size:13px;
}
.ex-muscle.is-primary{
  background:var(--athlera-gold-dim); border-color:rgba(217,179,108,0.35); font-weight:600;
}

/* --- execution ------------------------------------------------------------ */
.ex-block{ margin-bottom:12px; }
.ex-block > span{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-faint); margin-bottom:3px;
}
.ex-block p{ margin:0; font-size:14px; }
.ex-steps{ margin:0 0 14px; padding-left:20px; }
.ex-steps li{ margin-bottom:8px; font-size:14px; }
.ex-mistakes{ margin:0 0 12px; padding-left:18px; }
.ex-mistakes li{ margin-bottom:6px; font-size:14px; color:var(--athlera-muted); }
.ex-safety{
  padding:12px 14px; border-radius:10px;
  background:var(--athlera-warn-dim); border:1px solid rgba(245,183,84,0.3);
}
.ex-safety strong{ display:block; margin-bottom:4px; color:var(--athlera-warn); font-size:12px;
  text-transform:uppercase; letter-spacing:.6px; }
.ex-safety p{ margin:0; font-size:13.5px; }

/* --- related -------------------------------------------------------------- */
.ex-rel-group{ margin-bottom:14px; }
.ex-rel-group:last-child{ margin-bottom:0; }
.ex-rel-label, .hm-p-src-label{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-faint); margin-bottom:6px;
}
.ex-rel-list{ display:flex; flex-wrap:wrap; gap:7px; }
.ex-rel, .hm-src{
  display:inline-flex; flex-direction:column; gap:1px;
  padding:8px 12px; border-radius:9px; text-decoration:none;
  background:var(--athlera-surface); border:1px solid var(--athlera-border);
  font-size:13.5px; color:var(--athlera-text);
}

/* --- in-workout quick guide (collapsed by default) ------------------------ */
.wq{ margin:8px 0 10px; }
.wq summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--athlera-muted);
  padding:7px 11px; border-radius:8px; border:1px solid var(--athlera-border);
  min-height:36px;
}
.wq summary::-webkit-details-marker{ display:none; }
.wq-body{
  margin-top:8px; padding:12px 14px; border-radius:10px;
  background:rgba(124,134,152,0.07); border:1px solid var(--athlera-border-soft);
}
.wq-body ul{ margin:0 0 8px; padding-left:17px; }
.wq-body li{ font-size:13.5px; margin-bottom:5px; }
.wq-warn{ margin:0 0 8px; font-size:13px; color:var(--athlera-muted); }
.wq-caution{
  margin:0 0 8px; font-size:12.5px; padding:7px 10px; border-radius:7px;
  background:var(--athlera-warn-dim); color:var(--athlera-warn);
}
.wq-more{ font-size:12.5px; font-weight:650; }
.wx-name-link{ color:inherit; text-decoration:none; border-bottom:1px dotted var(--athlera-border); }
.wx-name-link:hover{ border-bottom-color:var(--athlera-gold); }

@media (max-width:768px){
  .ex-muscle-row{ flex-direction:column; gap:4px; }
  .ex-muscle-label{ flex:none; padding-top:0; }
  .ex-facts{ grid-template-columns:repeat(2, 1fr); }
  .wq summary{ min-height:44px; }
  .ex-rel{ min-height:44px; justify-content:center; }
}

/* --- exercise search / list / quality (Phase 9, Schritte 7+9) -------------- */
.ex-search-input{ width:100%; margin-bottom:10px; }
.ex-filters, .cw-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ex-filters select{ width:auto; min-width:140px; margin:0; }
.ex-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--athlera-muted); }
.ex-check input{ width:auto; margin:0; }
.ex-add summary{ cursor:pointer; }
.ex-item{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--athlera-border-soft);
}
.ex-item:last-child{ border-bottom:none; }
.ex-item-main{ flex:1 1 240px; min-width:0; }
.ex-item-name{ font-weight:650; font-size:14.5px; text-decoration:none; color:var(--athlera-text); }
.ex-item-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:3px; font-size:12px; color:var(--athlera-faint); }
.ex-item-tags{ display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.ex-item-actions{ display:flex; gap:6px; flex:0 0 auto; }
.ex-edit{ padding:10px 0 16px; border-bottom:1px solid var(--athlera-border-soft); }

.qa-item{ align-items:flex-start; }
.qa-bar{
  height:6px; border-radius:99px; margin-top:7px; overflow:hidden;
  background:rgba(124,134,152,0.16); max-width:320px;
}
.qa-fill{ height:100%; border-radius:99px; }
.qa-fill.is-bad{ background:var(--athlera-bad); }
.qa-issues{ margin-top:5px; font-size:12px; color:var(--athlera-faint); }
.qa-errors{ margin-top:4px; font-size:12px; color:var(--athlera-bad); }
.qa-score{ font-size:13px; color:var(--athlera-muted); min-width:42px; text-align:right; }

/* --- plan builder search picker ------------------------------------------- */
.exp{ position:relative; }
.exp-results{
  position:absolute; z-index:60; left:0; right:0; top:100%; margin-top:4px;
  max-height:280px; overflow-y:auto; border-radius:10px;
  background:var(--athlera-surface); border:1px solid var(--athlera-border);
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
}
.exp-results:empty{ display:none; }
.exp-hit{
  display:block; width:100%; text-align:left; padding:10px 12px; cursor:pointer;
  background:none; border:none; border-bottom:1px solid var(--athlera-border-soft);
  color:var(--athlera-text); font-size:13.5px;
}
.exp-hit:last-child{ border-bottom:none; }
.exp-hit:hover, .exp-hit:focus{ background:rgba(217,179,108,0.10); }
.exp-hit em{ font-style:normal; display:block; font-size:11.5px; color:var(--athlera-faint); margin-top:2px; }
.exp-chosen{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 12px; border-radius:9px;
  background:var(--athlera-gold-dim); border:1px solid rgba(217,179,108,0.35); font-size:13.5px;
}

@media (max-width:768px){
  .ex-filters select{ flex:1 1 46%; min-width:0; }
  .ex-item-actions{ width:100%; }
  .ex-item-actions .btn-sm{ flex:1; }
  .exp-hit{ min-height:44px; }
}

/* Touch targets in the active workout screen. The exercise name and the
   "more details" link are primary navigation there, so on touch they get a real
   tap area instead of the ~20px an inline text link would otherwise have.
   The pain checkbox gets the same treatment via its label. */
@media (max-width:768px){
  .workout-exercise-name .wx-name-link{
    display:inline-block; padding:11px 0; min-height:44px; line-height:22px;
  }
  .wq-more{
    display:inline-block; padding:13px 0; min-height:44px; line-height:18px;
  }
  .workout-exercise-card label:has(input[type="checkbox"]){
    min-height:44px; align-items:center;
  }
  .workout-exercise-card input[type="checkbox"]{
    width:20px; height:20px; min-height:20px;
  }
}

/* Library + quality screens on touch: match the 44px rule the rest of the app
   already follows in its own mobile block. */
@media (max-width:768px){
  .ex-search-input,
  .ex-filters select{ min-height:44px; }
  .ex-check{ min-height:44px; }
  .ex-check input[type="checkbox"]{ width:20px; height:20px; }
  .ex-add > summary{ min-height:44px; display:flex; align-items:center; }
  .ex-item-name{ display:inline-block; padding:11px 0; min-height:44px; line-height:22px; }
  .pagination a.btn-sm{ min-height:44px; }
}
/* Die drei Gruppen des Dashboards ("wer braucht dich?").
   Bewusst sehr wenig eigenes CSS: die Karten darin sind unveraendert `.tri`,
   die Farbe kommt aus den vorhandenen `.badge-*`. Neu ist nur der Abstand
   zwischen den Gruppen und die Kopfzeile, die eine Gruppe benennt. Eine Gruppe
   soll sich nicht wie eine andere Komponente anfuehlen, sondern wie dieselbe
   Liste mit einer Ueberschrift. */
/* Die Signalzeilen auf der Athletenkarte. Dieselben `.sig`-Regeln wie im
   Dashboard-Panel; hier nur der Abstand zur Karte darueber. */
.ac-signals{ margin-top:10px; }

.focus-group{ margin-bottom:18px; }
.focus-group:last-child{ margin-bottom:0; }
.focus-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.focus-head .subtitle{ margin:0; font-size:12.5px; }
/* "Laeuft gut" ist bewusst nur eine Zeile und kein Kartenstapel: die Gruppe
   soll sichtbar sein, aber keinen Platz beanspruchen. */
.focus-ok{ border-top:1px solid var(--athlera-border-soft); padding-top:14px; }

.tri{
  display:block; text-decoration:none; color:inherit;
  padding:12px 14px; border-radius:10px;
  background:var(--athlera-surface); border:1px solid var(--athlera-border);
  border-left:3px solid var(--athlera-border);
}
.tri-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.tri-signals, .cw-fc-reasons { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.sig{ font-size:12.5px; color:var(--athlera-muted); padding-left:14px; position:relative; }
.sig::before{
  content:""; position:absolute; left:0; top:6px;
  width:6px; height:6px; border-radius:50%; background:currentColor;
}
/* `sig-critical` und `sig-info` stehen NICHT hier, sondern weiter unten beim
   Coach-Intelligence-Block ("Signal levels: four …"). Ein Entwurf dieses Blocks
   hat sie hier ein zweites Mal definiert, in der Annahme, sie fehlten — sie
   fehlten nicht, sie standen nur woanders. Wer die vier Stufen sucht, findet
   sie an einer Stelle, und das soll so bleiben.

   (Nebenbei gelernt: keinen Klassennamen mit fuehrendem Punkt in einen
   CSS-Kommentar schreiben. Pruefung 10c liest das Stylesheet als Text und
   haelt so etwas fuer eine definierte, aber unbenutzte Klasse.) */
@media (max-width:768px){ .tri{ min-height:44px; } }

/* --- Coach Action Layer (act-Praefix) -------------------------------------
   Die Handlungsliste auf dem Command Center und der naechste Schritt in der
   Athletenansicht. Bewusst nur fuenf eigene Klassen: Rahmen, Statusfarbe und
   Begruendungszeile kommen aus tri / tri-Stufe und pg-why, weil eine Aktion
   optisch dasselbe Ding ist wie der Anlass, aus dem sie entsteht. Ein eigener
   Kartenstil waere eine zweite Gestalt fuer denselben Gegenstand — und nach
   Pruefung 10d ausserdem eine dritte Kopie derselben Regel.

   Der Knopf ist btn btn-sm und erbt damit das 44-px-Beruehrungsziel aus dem
   zentralen pointer-coarse-Block am Dateiende. Hier entsteht kein zweiter:
   genau daran ist die Beruehrungsflaeche der Textlinks in Tabellenzellen
   schon einmal gescheitert. */
.act-list, .ci-levels, .mt-attempts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.act-go{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:8px; }
.act-title{ font-weight:600; font-size:13px; }
.act-src{ display:block; color:var(--athlera-faint); font-size:11px; margin-top:3px; }
.act-none{ color:var(--athlera-good); font-weight:600; margin:0; }

/* --- athlete "today" panels (Night Shift 2, section 10) ------------------- */
.today-macros{ display:flex; flex-direction:column; gap:14px; }
.tm-label{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--athlera-faint); }
.today-macros .metric{ font-size:21px; }
.today-macros em{ font-style:normal; font-size:13px; color:var(--athlera-muted); font-weight:500; }
.tm-bar{ height:6px; border-radius:99px; background:rgba(124,134,152,0.16); margin-top:6px; overflow:hidden; }
.tm-bar div{ height:100%; border-radius:99px; background:var(--athlera-gold); }
.tm-bar div.is-protein{ background:var(--athlera-blue); }
.today-recovery{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--athlera-border-soft);
}
.today-recovery strong{ font-size:15px; }

/* --- progressive overload / performance panel (Blocks 3-6, 8-9) ----------- */
.perf-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(126px,1fr)); gap:12px; margin-bottom:14px;
}
.perf-stats strong{ font-size:15px; }
.perf-relative{
  margin:0 0 12px; padding:9px 12px; border-radius:9px; font-size:13.5px;
  background:var(--athlera-gold-dim); border:1px solid rgba(217,179,108,0.3);
}
.perf-relative em{ font-style:normal; color:var(--athlera-muted); font-size:12px; margin-left:6px; }
.perf-trends{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.trend{
  font-size:12px; padding:4px 10px; border-radius:99px;
  background:rgba(124,134,152,0.12); color:var(--athlera-muted);
}
.trend-down{ background:var(--athlera-bad-dim); color:var(--athlera-bad); }
.perf-warnings{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; }
.pw{ font-size:13px; padding:9px 12px; border-radius:8px; }
/* Diese beiden wurden am 2026-08-29 versehentlich als "tot" entfernt: das
   Template schreibt `class="pw pw-{{ w['level'] }}"`, der Klassenname steht
   also nirgends ausgeschrieben. Wiederhergestellt aus der Fassung vom
   2026-08-24; Test 10c kennt jetzt auch kurze Praefixe. */
.pw-warn, .mt-lvl--aggressive { background:var(--athlera-warn-dim); color:var(--athlera-warn); }
.pw-info{ background:rgba(124,134,152,0.10); color:var(--athlera-muted); }
.perf-tabs, .pv-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.perf-tab{
  border:1px solid var(--athlera-border); background:none; color:var(--athlera-muted);
  padding:7px 13px; border-radius:99px; font-size:12.5px; cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
/* Gemeinsame Darstellung — 3 Stellen, eine Regel. */
.wq summary:hover,
.wq[open] summary,
.perf-tab:hover{border-color:var(--athlera-gold); color:var(--athlera-text); }

.perf-tab.is-active, .ex-disc-powerlifting { background:var(--athlera-gold-dim); border-color:var(--athlera-gold); color:var(--athlera-gold); }
.perf-chart{ min-height:190px; }
.perf-history{ margin-top:12px; }
.perf-history summary{ cursor:pointer; font-size:13px; color:var(--athlera-muted); padding:8px 0; }
.perf-table{ margin-top:8px; font-size:13px; }
@media (max-width:768px){
  .perf-tab{ min-height:44px; }
  .perf-history summary{ min-height:44px; display:flex; align-items:center; }
  .perf-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .perf-tab{ transition:none; }
}

/* ==========================================================================
   Premium micro-interactions.
   Rules followed throughout this block:
     * transform/opacity only — no animation of layout properties, so nothing
       can shift the page or cost a reflow on a phone
     * short (120-450ms) and eased; nothing loops, nothing bounces
     * every single one is disabled under prefers-reduced-motion at the bottom
   ========================================================================== */

/* --- workout summary ------------------------------------------------------ */
.ws-hero{ text-align:center; padding:26px 16px 20px; }
.ws-hero h1{ margin:12px 0 4px; font-size:23px; }
.ws-check{ display:inline-flex; }
.ws-check-ring{ stroke:var(--athlera-good); opacity:.35;
  stroke-dasharray:145; stroke-dashoffset:145; animation:wsRing .5s ease-out forwards; }
.ws-check-mark{ stroke:var(--athlera-good);
  stroke-dasharray:40; stroke-dashoffset:40; animation:wsMark .32s .34s ease-out forwards; }
.ws-hero.has-pr .ws-check-ring, .ws-hero.has-pr .ws-check-mark{ stroke:var(--athlera-gold); }
@keyframes wsRing{ to{ stroke-dashoffset:0; } }
@keyframes wsMark{ to{ stroke-dashoffset:0; } }

.ws-pr-card{ border:1px solid rgba(217,179,108,0.4); background:linear-gradient(180deg, var(--athlera-gold-dim), transparent 70%); }
.ws-pr{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline;
  padding:11px 13px; border-radius:10px;
  background:var(--athlera-surface); border:1px solid rgba(217,179,108,0.3);
  animation:wsRise .38s ease-out backwards; animation-delay:calc(.18s + var(--i) * .07s);
}
.ws-pr-type{ grid-column:1; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--athlera-gold); }
.ws-pr strong{ grid-column:1; font-size:14.5px; }
.ws-pr-value{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:17px; font-weight:700; }
.ws-pr-delta{ grid-column:2; font-size:12px; color:var(--athlera-good); text-align:right; }
@keyframes wsRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.ws-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:14px; }
.ws-stats strong{ font-size:20px; }
.ws-compare{ margin:14px 0 0; padding-top:12px; border-top:1px solid var(--athlera-border-soft);
  font-size:13.5px; color:var(--athlera-muted); }
.ws-compare.is-down{ color:var(--athlera-muted); }
.ws-compare em, .tc-head em { font-style:normal; color:var(--athlera-faint); font-size:12px; }
.ws-pain{ margin:12px 0 0; padding:10px 12px; border-radius:9px; font-size:13px;
  background:var(--athlera-warn-dim); color:var(--athlera-warn); }
.ws-ex{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--athlera-border-soft);
  animation:wsRise .32s ease-out backwards; animation-delay:calc(var(--i) * .05s); }
.ws-ex:last-child{ border-bottom:none; }
.ws-ex-main, .pb-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ws-ex-meta, .cw-pr-who span { font-size:12px; color:var(--athlera-faint); }
.ws-ex-top{ font-size:14px; white-space:nowrap; }

/* --- feedback on the things people press all day -------------------------- */
.btn, .set-complete-btn, .perf-tab, .exp-hit{ transition:transform .1s ease, filter .12s ease; }
.btn:active, .set-complete-btn:active, .perf-tab:active, .exp-hit:active{ transform:scale(.97); }
.card, .tri, .ex-rel{ transition:border-color .14s ease, transform .14s ease; }
.tri:active, .ex-rel:active{ transform:scale(.995); }

/* Logged sets fade in instead of appearing between one frame and the next. */
.set-logged-row, .cw-fc { animation:wsRise .26s ease-out backwards; }

/* Expand/collapse: only the marker moves, so the panel cannot shift the page. */
.wq summary, .ex-add > summary, .perf-history summary{ transition:border-color .12s ease, color .12s ease; }
details[open] > summary{ margin-bottom:2px; }
.wq[open] .wq-body, .perf-history[open] .perf-table{ animation:wsRise .2s ease-out; }

/* Progress bars grow from zero once, on first paint. */
.tm-bar div, .qa-fill, .progress-bar-fill{ animation:wsGrow .55s cubic-bezier(.22,.8,.3,1) backwards; }
@keyframes wsGrow{ from{ transform:scaleX(0); } to{ transform:none; } }
.tm-bar div, .qa-fill, .progress-bar-fill{ transform-origin:left center; }

/* Flash messages arrive rather than blink into place. */
.flash{ animation:wsRise .28s ease-out backwards; }

@media (max-width:768px){
  .ws-stats{ grid-template-columns:repeat(2,1fr); }
  .ws-ex-name{ display:inline-block; padding:11px 0; min-height:44px; line-height:22px; }
}

/* --- accessibility: everything above is optional -------------------------- */
@media (prefers-reduced-motion: reduce){
  .ws-check-ring, .ws-check-mark, .ws-pr, .ws-ex, .set-logged-row, .flash,
  .tm-bar div, .qa-fill, .progress-bar-fill,
  .wq[open] .wq-body, .perf-history[open] .perf-table{
    animation:none !important;
    stroke-dashoffset:0 !important;
    opacity:1 !important;
    transform:none !important;
  }
  .btn, .set-complete-btn, .perf-tab, .exp-hit, .card, .tri, .ex-rel,
  .wq summary, .ex-add > summary, .perf-history summary{ transition:none !important; }
  /* The loading skeleton is the one animation that legitimately loops, so it is
     the one that matters most here: a perpetual shimmer is exactly what someone
     who asked for reduced motion needs stopped. Falls back to a flat surface. */
  .skeleton{ animation:none !important; background:var(--athlera-surface-2) !important; }
  .btn:active, .set-complete-btn:active, .perf-tab:active, .exp-hit:active,
  .tri:active, .ex-rel:active{ transform:none !important; }
}

/* --- athlete progress hub ------------------------------------------------- */
.pv-totals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:14px; }
.pv-totals strong{ font-size:20px; }

.pv-pr{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--athlera-border-soft);
}
.pv-pr:last-child{ border-bottom:none; }
.pv-pr strong{ font-size:14px; display:block; }
.pv-pr em{ font-style:normal; font-size:11.5px; color:var(--athlera-faint); margin-left:6px; }
.pv-ex-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:8px; }
.pv-ex{
  display:flex; flex-direction:column; gap:3px; padding:11px 13px; border-radius:10px;
  background:var(--athlera-surface); border:1px solid var(--athlera-border);
  text-decoration:none; color:var(--athlera-text); font-size:13.5px;
  transition:border-color .14s ease;
}
/* Gemeinsame Darstellung — 3 Stellen, eine Regel. */
.ex-rel:hover,
.tri:hover,
.pv-ex:hover{border-color:var(--athlera-gold); }

@media (max-width:768px){
  .pv-totals{ grid-template-columns:repeat(2,1fr); }
  .pv-ex{ min-height:44px; }
}
@media (prefers-reduced-motion: reduce){ .pv-ex{ transition:none !important; } }

/* --- progression: last vs next target in the workout screen (P1) ---------- */
.pg{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:8px 0 4px; padding:11px 13px; border-radius:11px;
  background:linear-gradient(135deg, rgba(124,134,152,0.10), transparent 70%);
  border:1px solid var(--athlera-border-soft);
}
.pg-col strong{ font-size:15px; }
.pg-arrow{ color:var(--athlera-faint); font-size:16px; }
.pg-status{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:4px 9px; border-radius:99px;
}
.pg-stable, .ca-tri-pill { background:rgba(124,134,152,0.14); color:var(--athlera-muted); }
.pg-reason{ margin:0 0 8px; font-size:12px; color:var(--athlera-faint); }
/* Die Begruendung unter einem Status (Auftragsblock N). Kleiner als der Status,
   aber immer sichtbar — ein Status ohne Grund ist eine Blackbox. */
.pg-why{ margin:5px 0 0; font-size:11px; color:var(--athlera-muted); line-height:1.45; }
.pg-why-inline{ font-style:normal; opacity:.8; }

@media (max-width:768px){
  .pg-status{ margin-left:0; }
}

/* --- Coach Weekly Overview (.cw*) ---------------------------------------
   Same surfaces, radii and status colours as the rest of the app — this page
   introduces no new palette. Layout is card-first, not table-first, so the
   coach scans instead of reads. Everything collapses to one column on mobile. */
.cw-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }

.cw-nav .is-disabled{ opacity:.35; pointer-events:none; }

.cw-focus-card, .ci-card { border-color:var(--athlera-border); }
.cw-focus{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:10px; }
.cw-fc{
  display:block; text-decoration:none; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  border-left-width:3px;
}
.cw-fc-idle, .ca-tri-thin { border-left-color:var(--athlera-faint); }
.cw-fc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.cw-fc-head strong, .cw-row-who strong { font-size:14.5px; color:var(--athlera-text); }
.cw-fc-sessions{ font-size:15px; font-weight:700; color:var(--athlera-text); white-space:nowrap; }
.cw-fc-sessions em{ font-style:normal; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.6px; color:var(--athlera-faint); margin-left:4px; font-weight:500; }

.cw-stats .cw-of{ font-size:15px; font-weight:600; color:var(--athlera-faint); }
.cw-delta{ display:block; margin-top:2px; font-size:10.5px; letter-spacing:.3px;
  text-transform:none; font-variant-numeric:tabular-nums; }

/* Team status: one bar instead of four numbers — the split is the message. */
.cw-statusbar{ display:flex; height:10px; border-radius:99px; overflow:hidden;
  background:rgba(124,134,152,0.14); margin-bottom:12px; }
.cw-sb{ display:block; height:100%; }
.cw-sb-neutral{ background:var(--athlera-silver); }
.cw-legend{ list-style:none; margin:0 0 14px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:6px 12px; }
.cw-legend li{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--athlera-muted); }
.cw-legend strong{ margin-left:auto; color:var(--athlera-text); }
.cw-dot{ width:8px; height:8px; border-radius:99px; flex:0 0 auto; }
.cw-mini{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:12px;
  padding-top:12px; border-top:1px solid var(--athlera-border-soft); }
/* Label-über-Wert-Paar (Spalte) — 6 Stellen, eine Regel. */
.ex-facts div,
.today-recovery div,
.perf-stats div,
.ws-stats div,
.pv-totals div,
.cw-mini div{display:flex; flex-direction:column; gap:2px; }

.cw-mini strong{ font-size:16px; }

.cw-wins{ border:1px solid rgba(217,179,108,0.28); }
.cw-pr, .ci-item { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--athlera-border-soft); }
.cw-pr:last-child{ border-bottom:none; }
.cw-pr-who strong{ font-size:14px; }

.cw-pr-val{ font-size:14.5px; font-weight:700; white-space:nowrap; text-align:right; }
.cw-pr-val em{ display:block; font-style:normal; font-size:11.5px; font-weight:500;
  color:var(--athlera-gold); }
.cw-badge-pr{ background:var(--athlera-gold-dim); color:var(--athlera-gold);
  border:1px solid rgba(217,179,108,0.3); }
/* Label-über-Wert-Paar (Spalte) — 5 Stellen, eine Regel. */
.ex-list,
.ws-ex-list,
.pv-prs,
.cw-pr-list,
.cw-rows{display:flex; flex-direction:column; }

.cw-row{
  display:grid; grid-template-columns:minmax(150px,1.6fr) repeat(auto-fit,minmax(96px,1fr)) auto;
  align-items:center; gap:12px; padding:12px 10px; margin:0 -10px; text-decoration:none;
  border-bottom:1px solid var(--athlera-border-soft); border-radius:var(--radius-sm);
}
.cw-row:last-child{ border-bottom:none; }
.cw-row:hover, .bp-btn:hover{ background:var(--athlera-surface-2); }

.cw-row-sub{ font-size:11.5px; color:var(--athlera-faint); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.cw-row-metric strong{ font-size:13.5px; color:var(--athlera-text); font-weight:650; }
.cw-row-metric strong em{ font-style:normal; color:var(--athlera-faint); font-weight:500; }
.cw-row-tail, .ca-row-tail { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pg-insufficient_data, .mt-s-no_target { background:rgba(124,134,152,0.10); color:var(--athlera-faint); }

@media (max-width:768px){
  .cw-header{ align-items:flex-start; }
  .cw-nav .btn{ min-height:44px; display:inline-flex; align-items:center; }
  .cw-fc{ min-height:44px; }
  .cw-row{ grid-template-columns:1fr 1fr; row-gap:10px; padding:14px 10px; }
  .cw-row-who{ grid-column:1 / -1; }
  .cw-row-tail{ grid-column:1 / -1; justify-content:flex-start; }
}

/* Motion: only transform/opacity, and the focus cards stagger just far enough
   to read as one group arriving — anything longer would delay the answer. */
.cw-fc, .cw-row{ transition:border-color .14s ease, background-color .14s ease, transform .14s ease; }
.cw-fc:active, .cw-row:active{ transform:scale(.995); }

.cw-fc:nth-child(2){ animation-delay:.03s; }
.cw-fc:nth-child(3){ animation-delay:.06s; }
.cw-fc:nth-child(4){ animation-delay:.09s; }
.cw-fc:nth-child(n+5){ animation-delay:.12s; }
.cw-sb{ animation:wsGrow .5s cubic-bezier(.22,.8,.3,1) backwards; transform-origin:left center; }

@media (prefers-reduced-motion: reduce){
  .cw-fc, .cw-sb{ animation:none !important; }
  .cw-fc, .cw-row{ transition:none !important; }
  .cw-fc:active, .cw-row:active{ transform:none !important; }
}

/* --- Plan Builder: replace-exercise panel (.rep*) ------------------------
   Collapsed by default: the coach opens it only for the one exercise they are
   unsure about, and only then does the page ask the engine for suggestions. */
.rep{ margin-top:6px; }
.rep > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--athlera-muted); padding:6px 0; min-height:32px;
}
.rep > summary::-webkit-details-marker{ display:none; }
.rep > summary::before{ content:"⇄"; color:var(--athlera-faint); }
.rep-body{ padding:2px 0 6px; }
.rep-hint{ margin:0; font-size:12px; color:var(--athlera-faint); }
.rep-opt{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:left;
  padding:8px 10px; margin-bottom:4px; min-height:44px; cursor:pointer;
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  border-radius:var(--radius-sm); color:var(--athlera-text);
}
.rep-opt strong{ font-size:13.5px; }
.rep[open] .rep-body{ animation:wsRise .2s ease-out; }
.rep-opt{ transition:border-color .12s ease, transform .12s ease; }
.rep-opt:active{ transform:scale(.995); }
@media (prefers-reduced-motion: reduce){
  .rep[open] .rep-body{ animation:none !important; }
  .rep-opt{ transition:none !important; }
  .rep-opt:active{ transform:none !important; }
}
.qa-head h3{ margin:0; }
.pager{ display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--athlera-border-soft);
  font-size:12.5px; color:var(--athlera-muted); }
@media (max-width:768px){ .pager .btn{ min-height:44px; display:inline-flex; align-items:center; } }

/* --- Exercise detail: section nav + progressive disclosure ---------------- */
.ex-nav{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:2px;
}
.ex-nav a{
  font-size:12.5px; padding:7px 12px; border-radius:99px; text-decoration:none;
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  color:var(--athlera-muted); white-space:nowrap;
}
.ex-more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--athlera-muted); min-height:32px;
}
.ex-more > summary::-webkit-details-marker{ display:none; }
.ex-more > summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:5px; font-size:13px; line-height:1;
  background:var(--athlera-surface-3); color:var(--athlera-muted);
}
.ex-more[open] > summary::before{ content:"–"; }
.ex-more-body{ padding-top:10px; }
.ex-more-body .ex-facts{ margin-bottom:0; }
.ex-more-body .ex-block:last-child{ margin-bottom:0; }

@media (max-width:768px){
  .ex-nav{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -16px 14px; padding:0 16px 4px; }
  .ex-nav::-webkit-scrollbar{ display:none; }
  .ex-nav a{ min-height:36px; display:inline-flex; align-items:center; }
  .ex-more > summary{ min-height:44px; }
}

.ex-more[open] .ex-more-body{ animation:wsRise .2s ease-out; }
.ex-nav a{ transition:border-color .12s ease, color .12s ease; }
@media (prefers-reduced-motion: reduce){
  .ex-more[open] .ex-more-body{ animation:none !important; }
  .ex-nav a{ transition:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* --- Plan Builder 2.0 (.pb*) --------------------------------------------
   Drag & drop is an enhancement on top of buttons that work everywhere, so the
   styling has to make BOTH paths obvious: a grip for pointers, visible arrows
   for everyone else. */
.pb-board{ align-items:start; }
.pb-day-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.pb-day-head h3{ margin:0; }
.pb-count, .sp-card-n {
  font-size:11px; font-weight:700; min-width:22px; height:22px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:99px;
  background:var(--athlera-surface-3); color:var(--athlera-muted);
}
.pb-list{ display:flex; flex-direction:column; gap:6px; min-height:52px; border-radius:var(--radius-sm); }
.pb-list.is-over{ outline:2px dashed var(--athlera-blue); outline-offset:4px; }
.pb-empty{ font-size:13px; margin:8px 2px; }

.pb-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
}
.pb-item.is-dragging{ opacity:.45; }

.pb-grip{ cursor:grab; color:var(--athlera-faint); font-size:15px; line-height:1; user-select:none; }
.pb-grip:active{ cursor:grabbing; }

.pb-target em{ font-style:normal; }
.pb-logged{ color:var(--athlera-blue); }

.pb-actions, .mmg-inline { display:flex; align-items:center; gap:6px; }
.pb-move{ display:flex; gap:2px; margin:0; }
.pb-btn{
  width:28px; height:28px; padding:0; border-radius:6px; font-size:12px; cursor:pointer;
  background:var(--athlera-surface-3); border:1px solid var(--athlera-border-soft);
  color:var(--athlera-muted);
}
.pb-btn:disabled{ opacity:.3; cursor:default; }
.pb-edit{ margin:0; }
.pb-edit > summary{
  cursor:pointer; list-style:none; font-size:11.5px; color:var(--athlera-muted);
  padding:6px 9px; border-radius:6px; background:var(--athlera-surface-3);
  border:1px solid var(--athlera-border-soft); white-space:nowrap;
}
.pb-edit > summary::-webkit-details-marker{ display:none; }
.pb-edit-body{
  grid-column:1 / -1; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--athlera-border-soft);
}
.pb-edit[open]{ grid-column:1 / -1; width:100%; }
.pb-edit-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.pb-to-day label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--athlera-faint); }
.pb-note, .tc-caveat { margin:8px 0 0; font-size:11.5px; color:var(--athlera-blue); }
.pb-hint{ font-size:12.5px; margin-top:14px; }

.pb-status{
  margin-bottom:10px; padding:9px 12px; border-radius:var(--radius-sm); font-size:12.5px;
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  color:var(--athlera-muted); opacity:0;
}
.pb-status.is-on{ opacity:1; }

@media (max-width:768px){
  /* No HTML5 drag events on touch — the grip would be a lie, so it goes away
     and the arrow buttons grow to a real touch target. */
  .pb-grip{ display:none; }
  .pb-item{ grid-template-columns:1fr auto; padding:12px; }
  .pb-btn{ width:40px; height:40px; font-size:15px; }
  .pb-edit > summary{ min-height:40px; display:inline-flex; align-items:center; }
}

.pb-item{ transition:border-color .14s ease, opacity .14s ease, transform .14s ease; }
.pb-item:active{ transform:scale(.997); }
.pb-status{ transition:opacity .2s ease; }
.pb-edit[open] .pb-edit-body{ animation:wsRise .2s ease-out; }
@media (prefers-reduced-motion: reduce){
  .pb-item, .pb-status{ transition:none !important; }
  .pb-item:active{ transform:none !important; }
  .pb-edit[open] .pb-edit-body{ animation:none !important; }
}

/* ==========================================================================
   Design system: depth, arrival, feedback
   One place for the three things that make the whole app feel finished, so a
   new screen inherits them instead of re-implementing them.
   ========================================================================== */

/* --- Depth -----------------------------------------------------------------
   A card rests at level 0 and lifts to level 1 under the pointer. The lift is
   one pixel and a shadow — enough to read as "this responds", not enough to
   move text under the cursor. Touch devices never get the hover state. */
.card, .stat{ box-shadow:var(--lift-0); }
@media (hover:hover) and (pointer:fine){
  .card{ transition:transform var(--motion-base) var(--ease-out),
                    box-shadow var(--motion-base) var(--ease-out),
                    border-color var(--motion-fast) var(--ease-soft); }
  .card:hover{ transform:translateY(-1px); box-shadow:var(--lift-1); }
  .cw-fc:hover, .pb-item:hover, .ex-rel:hover, .pv-ex:hover{ box-shadow:var(--lift-0); }
}

/* --- Arrival ---------------------------------------------------------------
   Content fades up once on load, staggered just enough to read as one group
   arriving. `backwards` matters: with animations off the element simply renders
   in its final state, so nothing is ever invisible because of motion. Capped at
   six steps so a long page does not make its last card wait. */
.main-content > .page-header,
.main-content > .card,
.main-content > .grid,
.main-content > .quick-actions,
.main-content > .split-cols,
.main-content > .empty-state{
  animation:appear var(--motion-base) var(--ease-out) backwards;
}
.main-content > *:nth-child(2){ animation-delay:30ms; }
.main-content > *:nth-child(3){ animation-delay:60ms; }
.main-content > *:nth-child(4){ animation-delay:90ms; }
.main-content > *:nth-child(5){ animation-delay:120ms; }
.main-content > *:nth-child(n+6){ animation-delay:150ms; }
@keyframes appear{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* --- Feedback --------------------------------------------------------------
   Anything clickable acknowledges the press. Uses the fast token, so the whole
   app answers a finger at the same speed. */
a.btn, button, .perf-tab, .ex-nav a, .pb-btn, .rep-opt, .exp-hit{
  transition:transform var(--motion-fast) var(--ease-soft),
             border-color var(--motion-fast) var(--ease-soft),
             color var(--motion-fast) var(--ease-soft),
             background-color var(--motion-fast) var(--ease-soft);
}
a.btn:active, button:active, .perf-tab:active, .pb-btn:active{ transform:scale(.97); }

/* Focus must never be subtler than hover — keyboard users get the same signal. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--athlera-blue); outline-offset:2px; border-radius:4px;
}

/* --- Numbers that count up -------------------------------------------------
   Only where a number is the point of the screen (a PR, a week's total). The
   final value is already in the HTML — the script animates towards it, so with
   JavaScript off or motion reduced the correct number is simply there. */
.js-count{ font-variant-numeric:tabular-nums; }

/* --- Chart reveal ----------------------------------------------------------
   The line draws itself once. Purely visual: the SVG is complete either way. */
.chart-line-reveal{ animation:chartDraw 620ms var(--ease-out) forwards; }
@keyframes chartDraw{ to{ stroke-dashoffset:0; } }
.chart-fill-reveal{ animation:chartFade 420ms 180ms var(--ease-soft) backwards; }
@keyframes chartFade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .card:hover{ transform:none !important; }
  .main-content > *{ animation:none !important; }
  .chart-line-reveal, .chart-fill-reveal{ animation:none !important; }
}

/* Scroll reveal for cards below the first screenful (opt-in, see motion.js).
   Default state is the FINAL state so that a card is never invisible because a
   script did not run; the script adds .js-reveal's start state only when it can
   also guarantee the end state. */
.js-reveal{ opacity:0; transform:translateY(10px);
  transition:opacity var(--motion-slow) var(--ease-out),
             transform var(--motion-slow) var(--ease-out); }
.js-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Every chart answers one question, stated above it. */
.perf-question{ margin:0 0 10px; font-size:12.5px; color:var(--athlera-faint); }

/* Signal levels: four, and the colour follows the ranking, not the wording. */
.sig-critical{ color:var(--athlera-bad); font-weight:600; }
.tri-info, .wr-up { border-left-color:var(--athlera-good); }

/* --- Coach Intelligence cockpit (.ci*, .mv*) ----------------------------
   Priority is carried by position first, colour second: the levels are stacked
   in the order they should be acted on, so the page reads correctly even
   without colour perception. */

.ci-head h3{ margin:0; }
.ci-pill{
  display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; border-radius:99px;
  font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  color:var(--athlera-muted);
}
.ci-pill strong{ font-size:13px; }
/* Statusfarbe (Hintergrund + Text) — 3 Stellen, eine Regel. */
.flash-error,
.pb-status.is-bad,
.ci-pill.ci-critical{background:var(--athlera-bad-dim); color:var(--athlera-bad);
  border-color:rgba(241,85,95,0.35); }

.ci-pill.ci-high{ background:var(--athlera-warn-dim); color:var(--athlera-warn);
  border-color:rgba(245,183,84,0.35); }
.ci-pill.ci-info{ background:var(--athlera-good-dim); color:var(--athlera-good);
  border-color:rgba(52,211,153,0.3); }

.ci-group{ margin-top:14px; }
.ci-group-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ci-group-label{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--athlera-muted); }
.ci-group-n, .wu-pct { font-size:11px; color:var(--athlera-faint); margin-left:auto; }
.ci-dot{ width:8px; height:8px; border-radius:99px; background:var(--athlera-faint); flex:0 0 auto; }
.ci-dot.ci-critical{ background:var(--athlera-bad); }
.ci-dot.ci-medium{ background:var(--athlera-silver); }

.ci-item:last-child{ border-bottom:none; }
.ci-who, .mv-name { font-size:13.5px; font-weight:650; color:var(--athlera-text); text-decoration:none; }
.ci-action{
  font-size:11.5px; white-space:nowrap; text-decoration:none; padding:6px 10px;
  border-radius:6px; background:var(--athlera-surface-2);
  border:1px solid var(--athlera-border-soft); color:var(--athlera-muted);
}
/* Gemeinsame Darstellung — 4 Stellen, eine Regel. */
.ex-nav a:hover,
.pb-btn:hover:not(:disabled),
.pb-edit > summary:hover,
.ci-action:hover{border-color:var(--athlera-blue); color:var(--athlera-text); }

.ci-more{ margin:6px 0 0; font-size:11.5px; color:var(--athlera-faint); }

.mv-title{ font-size:11px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--athlera-faint); margin-bottom:6px; }
.mv-item{ display:grid; grid-template-columns:1fr auto; gap:1px 12px;
  padding:8px 0; border-bottom:1px solid var(--athlera-border-soft); }
.mv-item:last-child{ border-bottom:none; }

.mv-meta{ grid-column:1; font-size:11.5px; color:var(--athlera-faint); }
.mv-delta{ grid-column:2; grid-row:1 / span 2; align-self:center;
  font-size:14px; font-weight:700; white-space:nowrap; }

@media (max-width:768px){
  .ci-item{ flex-direction:column; align-items:flex-start; gap:8px; }
  .ci-action{ min-height:40px; display:inline-flex; align-items:center; }
  .mv-cols{ gap:18px; }
}
.ci-item, .pr-row { animation:wsRise var(--motion-base) var(--ease-out) backwards; }
.ci-item:nth-child(2){ animation-delay:25ms; }
.ci-item:nth-child(3){ animation-delay:50ms; }
.ci-item:nth-child(n+4){ animation-delay:75ms; }
@media (prefers-reduced-motion: reduce){ .ci-item{ animation:none !important; } }
.ai-item{ padding:9px 0 9px 13px; border-bottom:1px solid var(--athlera-border-soft);
  position:relative; display:flex; flex-direction:column; gap:1px; }
.ai-item:last-child{ border-bottom:none; }
.ai-item::before{ content:""; position:absolute; left:0; top:14px;
  width:5px; height:5px; border-radius:99px; background:var(--athlera-faint); }

/* --- Progression center (.pr*) ------------------------------------------ */
.pr-head{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:12px; }
.pr-head h3{ margin:0; }
/* Label-über-Wert-Paar (Spalte) — 3 Stellen, eine Regel. */
/* --- coach triage panel (Night Shift 2) ----------------------------------- */ .triage,
.ws-prs,
.pr-list{display:flex; flex-direction:column; gap:8px; }

.pr-row{
  display:grid; grid-template-columns:minmax(140px,1.4fr) auto auto auto;
  align-items:center; gap:10px 16px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  border-left-width:3px; border-left-color:var(--athlera-border);
}
.pr-now strong, .pr-next strong{ font-size:14.5px; }
.pr-tail{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.pr-advice{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.pr-a-neutral{ color:var(--athlera-muted); }
.pr-reason{ grid-column:1 / -1; margin:2px 0 0; font-size:11.5px; color:var(--athlera-faint); }
/* Der Status-Satz (Auftragsblock C). Steht UEBER der Empfehlung, weil er die
   Messung ist und die Empfehlung daraus folgt. Das Wort "Warum" macht sichtbar,
   dass es eine Begruendung ist und keine zweite Anweisung. */
.pr-why{ margin:6px 0 0; font-size:11.5px; color:var(--athlera-silver); line-height:1.5; }
.pr-why-tag{ display:inline-block; margin-right:6px; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.7px; color:var(--athlera-muted);
  border:1px solid var(--athlera-border-soft); border-radius:999px; padding:1px 6px; }

@media (max-width:768px){
  .pr-row{ grid-template-columns:1fr 1fr; padding:14px; }
  .pr-main{ grid-column:1 / -1; }
  .pr-tail{ grid-column:1 / -1; flex-direction:row; align-items:center;
    justify-content:space-between; }
}

.pr-row:nth-child(2){ animation-delay:25ms; }
.pr-row:nth-child(3){ animation-delay:50ms; }
.pr-row:nth-child(n+4){ animation-delay:75ms; }
@media (prefers-reduced-motion: reduce){ .pr-row{ animation:none !important; } }

/* --- Plan draft (.pdz*) -------------------------------------------------- */
.pdz-note{ border-color:rgba(59,130,246,0.3); background:linear-gradient(180deg,
  rgba(59,130,246,0.06), transparent 70%); }
.pdz-note p{ margin:6px 0 0; font-size:13px; color:var(--athlera-muted); }
.pdz-note code{ font-size:12px; }
.pdz-equip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px; }
.pdz-draft{ width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.5; }
.pdz-errors{ list-style:none; margin:10px 0 0; padding:0; display:flex;
  flex-direction:column; gap:5px; }
.pdz-errors li{ font-size:12.5px; color:var(--athlera-bad); padding-left:13px; position:relative; }
.pdz-errors li::before{ content:"!"; position:absolute; left:0; font-weight:700; }
.pdz-rejected{ border-color:rgba(241,85,95,0.35); }
.pdz-preview{ border-color:rgba(52,211,153,0.3); }
.pdz-day{ margin-bottom:12px; }
.pdz-day:last-child{ margin-bottom:0; }
.pdz-day-label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-faint); margin-bottom:4px; }
/* Label-über-Wert-Paar (Spalte) — 6 Stellen, eine Regel. */
.ci-list,
.mv-list,
/* --- Athlete Intelligence summary (.ai*) -------------------------------- Each line states a fact and,
underneath in smaller type,
the data it came from. The second line is the point: it makes the claim checkable instead of something to trust. */ .ai-list,
.pdz-ex{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }

.pdz-ex li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:6px 0; border-bottom:1px solid var(--athlera-border-soft); font-size:13px; }
.pdz-ex li:last-child{ border-bottom:none; }
.pdz-ex-name{ font-weight:600; }
@media (max-width:768px){
  .pdz-ex li{ flex-direction:column; gap:2px; }
}

/* --- Muscle colour system (.m*) -----------------------------------------
   The VALUES live in muscle_colors.py and arrive as an inline custom property,
   so no hex is repeated here. These rules only say how a colour is used. */
.m-badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--m); border:1px solid color-mix(in srgb, var(--m) 40%, transparent);
  background:color-mix(in srgb, var(--m) 12%, transparent);
}
.m-dot{ width:8px; height:8px; border-radius:99px; background:var(--m); flex:0 0 auto; }
.m-bar{ height:3px; border-radius:99px; background:var(--m); }
.m-rail{ border-left:3px solid var(--m); }

/* --- Multi-series chart (.mc*) ------------------------------------------ */
.mc-wrap{ position:relative; }
.mc-chart{ min-height:200px; position:relative; }
.mc-tip{
  position:absolute; top:6px; pointer-events:none; z-index:2;
  padding:8px 10px; border-radius:var(--radius-sm); font-size:12px;
  background:var(--athlera-surface-3); border:1px solid var(--athlera-border);
  box-shadow:var(--lift-1); min-width:120px;
}
.mc-tip-date{ font-size:10.5px; color:var(--athlera-faint); margin-bottom:4px; }
.mc-tip-row{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.mc-tip-row i{ width:7px; height:7px; border-radius:99px; flex:0 0 auto; }
.mc-tip-name{ color:var(--athlera-muted); }
.mc-tip-val{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* Legend doubles as the on/off control — one element, one meaning. */
.mc-legend{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.mc-leg{ padding:6px 10px; min-height:32px; font-size:12px;
         border-color:var(--athlera-border-soft); color:var(--athlera-text); }
.mc-leg i, .hm-leg i { width:9px; height:9px; border-radius:99px; background:var(--m); flex:0 0 auto; }
.mc-leg[aria-pressed="false"]{ opacity:.42; }
.mc-tools{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.mc-tools .perf-tab{ min-height:32px; }
.mc-sep{ width:1px; height:20px; background:var(--athlera-border); margin:0 4px; }

@media (max-width:768px){
  .mc-leg{ min-height:40px; }
  .mc-tools .perf-tab{ min-height:40px; }
  .mc-tip{ font-size:11.5px; }
}

/* --- Exercise analytics (.ea*) ------------------------------------------ */
.ea-today{ padding-left:15px; }
.ea-today-head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; }
.ea-dir{ font-size:11.5px; font-weight:650; }
.ea-flat{ color:var(--athlera-muted); }
.ea-today-main{ font-size:26px; font-weight:800; margin-top:4px; }
.ea-today-main em{ font-style:normal; font-size:14px; font-weight:500;
  color:var(--athlera-faint); margin-left:8px; }
.ea-deltas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:12px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--athlera-border-soft); }
/* Kleines Label über einer Zahl — 9 Stellen, eine Regel. */
.ex-facts span,
.ex-demand > span,
.today-recovery span,
.perf-stats span,
.ws-stats span,
.pv-totals span,
.cw-mini span,
.ea-label,
.ea-delta span{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-faint); }

.ea-delta strong{ font-size:16px; color:var(--athlera-muted); }
.ea-vs{ margin:10px 0 0; font-size:12px; color:var(--athlera-faint); }
.ea-caveat{ margin:8px 0 0; font-size:12px; color:var(--athlera-blue);
  padding-left:12px; border-left:2px solid rgba(59,130,246,0.4); }
.ea-cards .num{ font-variant-numeric:tabular-nums; }
.ea-unit{ font-size:14px; font-weight:600; color:var(--athlera-faint); }

/* --- Split analytics (.sp*) --------------------------------------------- */
.sp-legend{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.sp-tree{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
/* --- Split Performance (Auftragsblock F) ---------------------------------
   Eine Auszaehlung, keine Bewertung. Die Zahlen stehen nebeneinander, ohne
   Urteilsfarbe — nur die Statusverteilung darunter traegt Farbe, und die
   kommt aus dem bestehenden pg-status-System. */
.sp-sum-grid{ display:grid; gap:12px; margin:10px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); }
.sp-kpi>span, .sp-vs span { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-muted); }
.sp-kpi>strong{ font-size:20px; font-weight:650; line-height:1.15; }
.sp-sum-status{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--athlera-border-soft); }

/* --- Uebungskarte (Auftragsblock B) --------------------------------------
   Die Karte wird zum Block, sobald sie mehr als eine Zeile traegt: Streifen,
   Begruendung und ein aufklappbarer Vergleich. Das Wichtigste steht oben und
   ohne Klick da, die Details erst auf Wunsch. */
.sp-node{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 13px; padding-left:14px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft);
  flex-wrap:wrap;
}
.sp-spark{ flex:1 1 100%; margin:8px 0 0; }
.sp-spark .ca-spark-bar{ opacity:.85; }
/* Der Satz unter einem Zielstatus. Sichtbar, nicht nur im title: auf der
   Zielseite IST die Begruendung die eigentliche Antwort. */
.mt-why{ margin:6px 0 0; font-size:11.5px; color:var(--athlera-muted); line-height:1.5; }
.sp-why{ flex:1 1 100%; margin:7px 0 0; font-size:11.5px;
  color:var(--athlera-muted); line-height:1.5; }
/* NICHT .sp-more nennen: die Klasse gehoert bereits dem "+N"-Badge in
   split_list.html. Ein `flex:1 1 100%` dort haette das Badge auf eine eigene
   Zeile gezwungen — dieselbe Klasse fuer zwei Komponenten ist genau die Art
   Kollision, die spaeter niemand mehr sucht. */
.sp-vsbox{ flex:1 1 100%; margin-top:6px; }
.sp-vsbox>summary{ cursor:pointer; font-size:11.5px; color:var(--athlera-silver);
  min-height:44px; display:flex; align-items:center; }
.sp-vs{ display:grid; gap:10px; padding-top:4px;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }

.sp-vs strong{ font-size:14.5px; font-weight:650; }
.sp-vs em{ font-style:normal; font-size:10.5px; color:var(--athlera-faint); }
.sp-flat{ color:var(--athlera-silver); }
.sp-pr{ margin:8px 0 0; font-size:11.5px; color:var(--athlera-gold); }
/* Name/Titel einer Zeile — 4 Stellen, eine Regel. */
.ws-ex-name,
.pb-name,
.pr-name,
.sp-name{font-size:14px; font-weight:650; color:var(--athlera-text); text-decoration:none; }

.sp-node-nums{ display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  white-space:nowrap; }
.sp-last{ font-size:13.5px; font-weight:650; }
.sp-change{ font-size:11.5px; font-weight:650; }
.sp-stable{ color:var(--athlera-muted); }

.sp-card{ display:block; text-decoration:none; }
.sp-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sp-card-head h3{ margin:0; }

.sp-mix{ display:flex; height:8px; border-radius:99px; overflow:hidden; margin-top:12px;
  background:rgba(124,134,152,0.14); }
.sp-mix-seg{ display:block; height:100%; background:var(--m);
  animation:wsGrow var(--motion-slow) var(--ease-out) backwards;
  transform-origin:left center; }
.sp-mix-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; }
.sp-mix-item{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--athlera-muted); }
.sp-mix-item i{ width:7px; height:7px; border-radius:99px; background:var(--m); }

@media (max-width:768px){
  .sp-node{ flex-direction:column; align-items:flex-start; gap:6px; }
  .sp-node-nums{ align-items:flex-start; flex-direction:row; gap:10px; }
  .ea-today-main{ font-size:22px; }
}
@media (prefers-reduced-motion: reduce){
  .sp-mix-seg{ animation:none !important; }
}

/* --- Today vs last time, inside the workout (.tc*) ----------------------- */
.tc{ margin-bottom:10px; padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border-soft); }
.tc-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
/* Kleines Label über einer Zahl — 4 Stellen, eine Regel. */
.pg-label,
.cw-row-metric > span,
.pr-label,
.tc-label{font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--athlera-faint); }

.tc-head strong{ font-size:15px; }

.tc-sets{ margin-left:auto; font-size:11.5px; color:var(--athlera-faint); }
.tc-deltas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tc-delta{ font-size:11px; padding:4px 9px; border-radius:99px;
  background:rgba(124,134,152,0.12); color:var(--athlera-muted); }
.tc-delta strong{ font-size:12px; }
.tc-note{ margin:8px 0 0; font-size:11.5px; color:var(--athlera-faint); }

/* --- Sofortvergleich: Bezugswert, Verlauf, Begruendung -------------------
   Das Delta allein zwingt zum Nachrechnen. Die "gegen"-Zeile nennt darum die
   Zahlen der Vorsession selbst; der Streifen zeigt, ob das ein Ausreisser war
   oder eine Linie. Der Status steht NIE ohne seinen Satz — Auftragsblock N. */
.tc-vs{ margin:7px 0 0; font-size:12px; color:var(--athlera-muted); }
/* --- Aufwaermplan --------------------------------------------------------
   Vor den Arbeitssaetzen, sichtbar getrennt und zugeklappt, ausser bei einem
   schweren Hauptlift — dort ist die Leiter die eigentliche Information.
   Die Zusammenfassung in der Kopfzeile macht ihn auf dem Handy lesbar, ohne
   dass man aufklappen muss. */
.wu{ margin:0 0 10px; border:1px solid var(--athlera-border-soft);
  border-radius:var(--radius-sm); background:var(--athlera-surface-2); }
.wu>summary{ cursor:pointer; min-height:44px; display:flex; align-items:center;
  gap:8px; padding:0 12px; flex-wrap:wrap; }
.wu-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--athlera-muted); border:1px solid var(--athlera-border-soft);
  border-radius:999px; padding:1px 7px; }
.wu-peek, .ci-danger-body label { font-size:12.5px; color:var(--athlera-silver); }
.wu-peek.is-none{ color:var(--athlera-faint); font-style:italic; }
.wu-sets{ list-style:none; margin:2px 0 0; padding:0 12px;
  display:flex; flex-direction:column; gap:5px; }
.wu-set{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.wu-no{ flex:0 0 20px; height:20px; border-radius:50%; display:grid;
  place-items:center; font-size:10.5px; font-weight:700;
  background:var(--athlera-surface-3); color:var(--athlera-silver); }
.wu-kg{ font-size:14px; font-weight:650; }
.wu-reps{ font-size:13px; color:var(--athlera-silver); }

.wu-why{ margin:9px 0 0; padding:0 12px; font-size:11.5px;
  color:var(--athlera-muted); line-height:1.5; }
.wu-basis{ margin:5px 0 0; padding:0 12px; font-size:11px;
  color:var(--athlera-faint); }
.wu-note{ margin:8px 0 0; padding:8px 12px 10px; font-size:10.5px;
  color:var(--athlera-faint); line-height:1.5;
  border-top:1px solid var(--athlera-border-soft); }
.wu-note em{ font-style:normal; color:var(--athlera-silver); }

/* Der Aufwaermkasten in der Coach-Wochenansicht sitzt INNERHALB von .pb-main,
   einem Spalten-Flex mit gap:2px. Ohne diese Zeilen traegt er dort seinen
   Aussenabstand aus dem Trainingsscreen mit und reisst die Zeile auseinander.
   Keine neue Klasse — nur die vorhandenen, im Kontext des Plan-Builders. */
.pb-main > .wu{ margin:6px 0 0; }
.pb-main > .wu > summary{ min-height:44px; padding:0 10px; }
.tc-vs strong{ color:var(--athlera-silver); font-weight:650; }
.tc-trend{ margin-top:9px; padding-top:8px;
  border-top:1px solid var(--athlera-border-soft); }
.tc-spark{ margin-bottom:6px; }
.tc-why{ margin:0; font-size:11.5px; color:var(--athlera-muted); line-height:1.5; }
.tc-status{ font-weight:650; margin-right:5px; }
.tc-status--progressing{ color:var(--athlera-good); }
.tc-status--stable{ color:var(--athlera-silver); }

@media (max-width: 520px){
  .tc-vs-more{ display:block; }
}

.tc-more{ display:inline-block; margin-top:9px; font-size:12px;
  color:var(--athlera-muted); text-decoration:none; }
/* Alles Ausgezeichnete — Rekorde, Bestwerte. */
.ex-item-name:hover, .ws-ex-name:hover, .pg-next strong, .pb-name:hover, .ci-who:hover,
.mv-name:hover, .pr-name:hover, .pr-next strong, .sp-name:hover, .tc-more:hover{ color:var(--athlera-gold); }
.ex-nav-cta{ border-color:var(--athlera-gold) !important; color:var(--athlera-gold) !important; }
@media (max-width:768px){
  .tc-sets{ margin-left:0; width:100%; }
  .tc-more{ min-height:40px; display:inline-flex; align-items:center; }
}

/* ============================================================
   COACH ANALYTICS 2.0 — Mehrwochen-Verlauf (.ca-* Team, .ah-* Athlet)
   ============================================================
   Verhältnis zum Rest: die Statusfarben (.pg-*), die Signalzeilen (.sig-*), die
   Muskelfarben (--m) und die Chart-Hüllen (.mc-*) sind bereits definiert und
   werden hier NICHT neu erfunden — dieser Block fügt nur die Bausteine hinzu,
   die es vorher nicht gab: das Segment-Control, die KPI-Delta-Zeile, den
   Wochenstreifen und die Muskelaufteilung. */

/* --- Kopfzeile mit Zeitraumwahl --- */
.ca-header{ align-items:flex-start; gap:16px; flex-wrap:wrap; }

/* Segment-Control: ein Rahmen, drei Felder. Der aktive Zustand ändert nur
   Hintergrund und Farbe — nie Rahmenbreite oder Schriftgröße, sonst würde die
   Auswahl beim Wechsel die Nachbarn verschieben. */
.ca-seg{
  display:inline-flex; padding:3px; gap:2px;
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border);
  border-radius:99px;
}
.ca-seg-item{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 15px; border-radius:99px;
  font-size:12.5px; font-weight:600; letter-spacing:.2px;
  color:var(--athlera-muted); text-decoration:none; white-space:nowrap;
  transition:color var(--motion-fast) var(--ease-soft),
             background-color var(--motion-base) var(--ease-out);
}
.ca-seg-item.is-active{
  background:var(--athlera-blue); color:#fff;
  box-shadow:0 1px 8px var(--athlera-blue-glow);
}
.ca-seg-item:active{ transform:scale(.97); }

/* --- KPI-Karten --- */
.ca-kpis{ margin-bottom:20px; }
.ca-kpi .num{ display:flex; align-items:baseline; gap:1px; }
.ca-unit{ font-size:14px; font-weight:600; color:var(--athlera-muted); }
.ca-none{ color:var(--athlera-faint); font-weight:700; }
.ca-kpi .label{ display:block; }

/* Die Delta-Zeile trägt Richtung UND Zeichen als Text. Farbe ist die zweite
   Codierung, nie die einzige. */
.ca-delta{
  display:block; margin-top:5px; font-size:11px; font-weight:600;
  text-transform:none; letter-spacing:.1px; line-height:1.35;
}
.ca-delta.is-flat{ color:var(--athlera-muted); }
/* Gemeinsame Darstellung — 3 Stellen, eine Regel. */
.ex-na,
.pr-none,
.ca-delta.is-none{color:var(--athlera-faint); font-weight:500; }

.ca-card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:2px;
}
.ca-card-head h3{ margin:0; }
.ca-hint{
  margin:10px 0 0; font-size:11.5px; line-height:1.5; color:var(--athlera-faint);
  min-height:2.2em;   /* reserviert, damit ein Tab-Wechsel nichts verschiebt */
}
.ca-caveat{
  margin:12px 0 0; padding-top:10px; border-top:1px solid var(--athlera-border-soft);
  font-size:11.5px; line-height:1.55; color:var(--athlera-faint);
}
.ca-caveat em, .mt-meta em { font-style:normal; color:var(--athlera-muted); }

/* --- Fokusliste --- */
.ca-focus-card{ margin-bottom:20px; }
.ca-focus{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.ca-fc{
  display:block; padding:14px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border);
  border-left:3px solid var(--athlera-faint);
  text-decoration:none; color:inherit;
  transition:transform var(--motion-fast) var(--ease-out),
             border-color var(--motion-fast) var(--ease-soft);
}
/* Gemeinsame Darstellung — 4 Stellen, eine Regel. */
.tri-high,
.cw-fc-high,
.tri-critical,
.ca-fc-high{border-left-color:var(--athlera-bad); }

.ca-fc-idle{ border-left-color:var(--athlera-border); }
.ca-fc:active{ transform:scale(.99); }
.ca-fc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ca-fc-name{ font-size:14.5px; color:var(--athlera-white); }
.ca-fc-reasons, .wr-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:5px; }
.ca-fc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:11px; padding-top:9px; border-top:1px solid var(--athlera-border-soft);
  font-size:11.5px; color:var(--athlera-muted);
}
.ca-fc-go{ color:var(--athlera-blue); font-weight:600; white-space:nowrap; }

/* --- Wochenstreifen ---
   Eine Säule je Woche. Eine leere Woche behält ihren Platz und bekommt einen
   Sockel: die Lücke ist die Aussage, sie darf nicht verschwinden. */
.ca-spark{
  display:flex; align-items:flex-end; gap:2px; height:30px; margin-top:11px;
}
.ca-spark-sm{ height:22px; margin:0; }
.ca-spark-bar{
  flex:1 1 0; min-width:3px; border-radius:2px 2px 0 0;
  height:max(3px, var(--h)); background:var(--athlera-blue); opacity:.75;
  transform-origin:bottom;
  animation:caGrow var(--motion-slow) var(--ease-out) backwards;
}
.ca-spark-bar.is-empty{
  height:3px; background:var(--athlera-border); opacity:1; animation:none;
}

/* --- Roster-Zeilen --- */
.ca-rows{ display:grid; gap:8px; }
.ca-row{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(120px, 1.3fr) 90px repeat(4, minmax(74px, .8fr)) auto;
  padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border:1px solid var(--athlera-border);
  text-decoration:none; color:inherit;
  transition:border-color var(--motion-fast) var(--ease-soft);
}
.ca-row-who{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.ca-row-who strong{ font-size:13.5px; color:var(--athlera-white); }
/* Label-über-Wert-Paar (Spalte) — 8 Stellen, eine Regel. */
.ac-meta > div,
.cw-pr-who,
.cw-row-who,
.cw-row-metric,
.ci-item-main,
.pr-main,
.sp-node-main,
.ca-row-metric{display:flex; flex-direction:column; gap:1px; min-width:0; }

.ca-row-metric span{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--athlera-faint);
}
.ca-row-metric strong{ font-size:12.5px; color:var(--athlera-text); font-weight:600; }
/* Nebentext (gedämpft) — 4 Stellen, eine Regel. */
.ex-muscle em,
.ex-rel em,
.sp-kpi>em,
.ca-row-metric em{font-style:normal; color:var(--athlera-faint); font-size:11px; }

/* --- Muskelaufteilung (Athletenseite) --- */
.ah-mix{
  display:flex; height:12px; border-radius:99px; overflow:hidden;
  background:var(--athlera-surface-3); margin:4px 0 14px;
}
.ah-mix-seg{ background:var(--m); min-width:3px; }
.ah-mus{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ah-mus-item{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(110px, 1.4fr) repeat(3, minmax(64px, .7fr)) auto;
  padding:9px 12px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:color-mix(in srgb, var(--m) 7%, var(--athlera-surface-2));
}
.ah-mus-name{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
              color:var(--athlera-white); min-width:0; }
.ah-mus-num{ font-size:12.5px; color:var(--athlera-text); }

/* --- Bestwerte --- */
.ah-prs{ display:grid; gap:6px; }
.ah-pr{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(120px, 1.6fr) repeat(3, minmax(78px, .8fr));
  padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--athlera-gold-dim); border:1px solid rgba(217,179,108,0.16);
}
.ah-pr-name{ font-size:13px; font-weight:600; color:var(--athlera-white); min-width:0; }
.ah-pr-val{ font-size:12.5px; color:var(--athlera-gold); font-weight:600; }
/* Nebentext (gedämpft) — 5 Stellen, eine Regel. */
.day-choice .dc-meta,
.ac-username,
.ci-what,
.ah-mus-share,
.ah-pr-e1rm{font-size:12px; color:var(--athlera-muted); }

/* --- Wochentabelle --- */
.ah-table td{ vertical-align:middle; }

/* --- Datenqualität ---
   Bewusst kein Fehlerlook: das hier ist eine Auskunft über die Erfassung, keine
   Beschwerde über den Athleten. */
.ah-quality{ border-color:var(--athlera-border-soft); }
.ah-q-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.ah-q{
  position:relative; padding-left:18px; font-size:12.5px; line-height:1.5;
  color:var(--athlera-muted);
}
.ah-q::before{
  content:""; position:absolute; left:4px; top:.55em;
  width:6px; height:6px; border-radius:99px; background:var(--athlera-faint);
}

/* --- Bewegung ---
   Ein Wachsen aus der Grundlinie, einmal beim Eintritt. transform statt height,
   damit nichts umbricht; kein Dauerzustand, keine Wiederholung. */
@keyframes caGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.ca-grow{ animation:caGrow var(--motion-slow) var(--ease-out) backwards; transform-origin:bottom; }
.ah-mix .ca-grow{ transform-origin:left; }
@keyframes caGrowX{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.ah-mix .ca-grow{ animation-name:caGrowX; }

.ca-spark-bar:nth-child(2){ animation-delay:20ms; }
.ca-spark-bar:nth-child(3){ animation-delay:40ms; }
.ca-spark-bar:nth-child(4){ animation-delay:60ms; }
.ca-spark-bar:nth-child(n+5){ animation-delay:80ms; }

/* --- Responsive --- */
@media (max-width: 900px){
  .ca-row{ grid-template-columns:1fr 1fr; row-gap:8px; }
  .ca-row-who{ grid-column:1 / -1; }
  .ca-spark-sm{ grid-column:1 / -1; height:26px; }
  .ca-row-tail{ grid-column:1 / -1; justify-content:flex-start; }
  .ah-mus-item{ grid-template-columns:1fr 1fr; row-gap:6px; }
  .ah-mus-name{ grid-column:1 / -1; }
  .ah-pr{ grid-template-columns:1fr 1fr; row-gap:5px; }
  .ah-pr-name{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .ca-header{ flex-direction:column; }
  .ca-seg{ width:100%; }
  .ca-seg-item{ flex:1 1 0; padding:0 8px; }
  .ca-focus{ grid-template-columns:1fr; }
}

/* A finger needs more than a mouse pointer does. 36px is a comfortable pill on a
   desktop header and too small to hit reliably on a phone, so the coarse-pointer
   case gets the full 44px — measured, not assumed. */

/* Bewegung ist hier durchgehend Zugabe: ohne sie steht jeder Endzustand bereits
   im HTML, deshalb genügt es, sie abzuschalten. */
@media (prefers-reduced-motion: reduce){
  .ca-spark-bar, .ca-grow, .ah-mix .ca-grow{ animation:none !important; transform:none !important; }
  .ca-seg-item, .ca-fc, .ca-row{ transition:none !important; }
  .ca-seg-item:active, .ca-fc:active{ transform:none !important; }
}

/* ============================================================
   FOCUS TRIAGE 2.0 — die drei Situationen (.ca-tri-*)
   ============================================================
   Bedeutung steckt NIE nur in der Farbe: jede Gruppe trägt eine Überschrift,
   ein Zeichen und einen erklärenden Satz. Die Farbe ist die dritte Codierung,
   nicht die erste. "Braucht Aufmerksamkeit" ist bernstein und nicht rot —
   rot ist im Projekt für Schmerz und Fehler reserviert, und eine Seite, die
   bei jedem Volumenrückgang rot schreit, wird nach einer Woche ignoriert. */
.ca-tri, .ex-instr { border-left:3px solid var(--athlera-border); }
.ca-tri-start, .ex-instr--coach { border-left-color:var(--athlera-blue); }

.ca-tri-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:99px; flex:0 0 auto;
  font-size:12px; font-weight:800; line-height:1;
  background:rgba(124,134,152,0.16); color:var(--athlera-muted);
}
.ca-tri-start .ca-tri-icon{ background:rgba(59,130,246,0.16); color:var(--athlera-blue); }
.ca-tri-thin .ca-tri-icon{ background:rgba(124,134,152,0.12); color:var(--athlera-faint); }

.ca-tri-start .ca-tri-pill, .ca-tt-getting_started { background:rgba(59,130,246,0.14); color:var(--athlera-blue); }

/* Das Kürzel in der Roster-Tabelle — dieselbe Zuordnung, andere Dichte. */
.ca-tri-tag{
  display:inline-block; padding:2px 8px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
}

@media (max-width: 900px){
  .ca-tri-tag{ font-size:10px; }
}

/* ============================================================
   VOLUMENZIELE JE MUSKELGRUPPE (.mt-*)
   ============================================================
   Status wird IMMER dreifach codiert: Zeichen, Text und Farbe. Ein Coach, der
   Farben nicht unterscheiden kann, liest "↓ Unter Ziel" genauso gut wie jeder
   andere — die Farbe ist die Zugabe, nicht die Information. */
.mt-list, .tg-list, .bp-list, .hm-src-list{ list-style:none; margin:0; padding:0; }
.mt-list, .tg-list{ display:grid; gap:9px; }
.mt-row{
  padding:12px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:color-mix(in srgb, var(--m) 6%, var(--athlera-surface-2));
}
.mt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mt-name{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650;
          color:var(--athlera-white); }
.mt-status{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.2px; white-space:nowrap;
}
.mt-mark{ font-size:11px; line-height:1; }
.mt-s-above_target{ background:rgba(59,130,246,0.15); color:var(--athlera-blue); }

.mt-s-insufficient_data, .ca-tt-insufficient{ background:rgba(124,134,152,0.12); color:var(--athlera-faint); }

.mt-nums{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:7px; }
.mt-actual{ font-size:22px; font-weight:800; color:var(--athlera-white); line-height:1; }
.mt-of, .mt-row-meta { font-size:12.5px; color:var(--athlera-muted); }
.mt-pct{ margin-left:auto; font-size:13px; font-weight:700; color:var(--athlera-silver); }

/* Zielband + Ist-Marke. Das Band ist der vom Coach gesetzte Bereich, die Marke
   der tatsächliche Schnitt — beide auf derselben Skala, damit ein Überschreiten
   sichtbar bleibt statt am Rand zu verschwinden. */
.mt-bar{
  position:relative; height:8px; margin:10px 0 8px; border-radius:99px;
  background:var(--athlera-surface-3); overflow:hidden;
}
.mt-zone{
  position:absolute; top:0; bottom:0; border-radius:99px;
  background:color-mix(in srgb, var(--m) 42%, transparent);
}
.mt-fill{
  position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:99px;
  background:color-mix(in srgb, var(--m) 80%, transparent);
  transform-origin:left; animation:caGrowX var(--motion-slow) var(--ease-out) backwards;
}
.mt-mark-now{
  position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px;
  background:var(--athlera-white); border-radius:2px;
}

.mt-kpi .num{ font-size:24px; }
/* Gemeinsame Darstellung — 5 Stellen, eine Regel. */
.qa-fill.is-ok,
.cw-sb-good,
.ci-dot.ci-info,
.ai-good::before,
.mt-kpi-good::before{background:var(--athlera-good); }

/* Gemeinsame Darstellung — 7 Stellen, eine Regel. */
.progress-bar-fill.over,
.qa-fill.is-warn,
.cw-sb-warn,
.ci-dot.ci-high,
.ai-warn::before,
.ah-q-warn::before,
.mt-kpi-warn::before{background:var(--athlera-warn); }

.mt-kpi-over::before{ background:var(--athlera-blue); }
/* Gemeinsame Darstellung — 3 Stellen, eine Regel. */
.cw-sb-faint,
.mc-leg[aria-pressed="false"] i,
.mt-kpi-faint::before{background:var(--athlera-faint); }

/* Zielband im Verlaufschart */
.mt-chart-wrap{ position:relative; }
.mt-band{
  position:absolute; left:48px; right:14px; pointer-events:none; z-index:0;
  background:color-mix(in srgb, var(--m) 14%, transparent);
  border-top:1px dashed color-mix(in srgb, var(--m) 55%, transparent);
  border-bottom:1px dashed color-mix(in srgb, var(--m) 55%, transparent);
}

/* --- Formular --- */
.mt-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.mt-edit{
  padding:11px 13px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--athlera-surface-2);
}
.mt-edit-err{ background:var(--athlera-bad-dim); }
.mt-edit-name{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:650;
               color:var(--athlera-white); margin-bottom:8px; }
.mt-edit-fields{ display:flex; align-items:center; gap:7px; }
.mt-edit-fields input{ width:100%; min-width:0; min-height:40px; text-align:center; }
.mt-edit-dash{ color:var(--athlera-faint); flex:0 0 auto; }
.mt-edit-note{ width:100%; margin-top:7px; min-height:38px; font-size:12.5px; }
.mt-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.mt-errors{ margin:0; padding-left:18px; font-size:13px; color:var(--athlera-text); }
.mt-errors li{ margin-bottom:4px; }

@media (max-width: 560px){
  .mt-grid{ grid-template-columns:1fr; }
  .mt-pct{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){
  .mt-fill{ animation:none !important; transform:none !important; }
}

/* Nur fuer Screenreader. Kein display:none und kein visibility:hidden — beide
   nehmen den Text auch der Vorlesesoftware weg, was das Gegenteil des Zwecks
   waere. Ein Pfeil "↑" allein ist fuer ein Auge eine Richtung und fuer eine
   Sprachausgabe ein Zeichenname; das Wort daneben ist die eigentliche Aussage. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ============================================================
   MUSKEL-HEATMAP (.hm-*)
   ============================================================
   Die Farbe einer Flaeche kommt als --m aus muscle_colors.py, die Intensitaet
   als --i aus dem gemessenen Volumen. Dieses Stylesheet definiert KEINE
   Muskelfarbe — es beschreibt nur, wie eine gegebene Farbe bei einem gegebenen
   Zustand aussieht. */
.hm{ display:grid; gap:16px; }
.hm-views{ position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hm-fig{ margin:0; flex:1 1 190px; max-width:260px; text-align:center; }
.hm-cap{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--athlera-faint); margin-bottom:4px;
}
.hm-svg{ width:100%; height:auto; max-height:min(52vh, 420px); display:block; overflow:visible; }

/* Die Silhouette ist Kontur, kein Datentraeger: sie darf nie mit einer
   eingefaerbten Region verwechselt werden. */
.hm-body{
  fill:var(--athlera-surface-2);
  stroke:color-mix(in srgb, var(--athlera-border) 80%, var(--athlera-silver));
  stroke-width:1.1;
  /* Der Koerper wird EINMAL gezeichnet und traegt seine Rundung aus dem
     Verlauf, nicht aus einem Filter: ein Verlauf wird beim Rastern einmal
     ausgewertet, ein blur/drop-shadow bei jedem Repaint neu. Auf dem Handy ist
     das der Unterschied zwischen fluessig und ruckelnd. */
}

.hm-r{
  fill:var(--m, var(--athlera-faint));
  fill-opacity:calc(0.16 + var(--i, 0) * 0.72);
  stroke:color-mix(in srgb, var(--m, #7C8698) 55%, transparent);
  stroke-width:1;
  cursor:pointer;
  transition:fill-opacity var(--motion-base) var(--ease-out),
             stroke-width var(--motion-fast) var(--ease-soft),
             filter var(--motion-base) var(--ease-out);
}
/* Keine Daten: gedimmt und ohne Zeiger — es gibt nichts zu oeffnen. */
.hm-r.hm-no_target[style*="--i: 0.0"],
.hm-r.hm-insufficient_data{ fill-opacity:.10; }
.hm-unknown{
  fill:transparent; stroke:var(--athlera-border-soft); stroke-dasharray:3 3;
  cursor:default; pointer-events:none;
}

/* Zustaende. "Ueber Ziel" bekommt bewusst KEINE Auszeichnung als Bestwert:
   mehr als verschrieben ist eine Abweichung, keine Leistung. */
.hm-in_target{ stroke:color-mix(in srgb, var(--athlera-good) 70%, transparent); stroke-width:1.6; }
.hm-below_target{ stroke:var(--athlera-warn); stroke-width:1.4; stroke-dasharray:4 2.5; }
.hm-above_target{ stroke:var(--athlera-blue); stroke-width:1.6; }

@media (hover:hover) and (pointer:fine){
  .hm-r[data-slug]:hover{ fill-opacity:.92; stroke-width:2; }
}
.hm-r.is-sel{
  fill-opacity:.95; stroke-width:2.4;
  stroke:color-mix(in srgb, var(--m) 90%, white);
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--m) 45%, transparent));
}
.hm-r:focus-visible, 
/* --- Tooltip --- */
.hm-tip{
  position:absolute; z-index:5; pointer-events:none; max-width:min(260px, 88%);
  padding:7px 10px; border-radius:8px; font-size:11.5px; line-height:1.45;
  background:rgba(8,10,16,.97); border:1px solid var(--athlera-border);
  color:var(--athlera-text); box-shadow:var(--lift-1);
}

/* Gemeinsame Pillenform: dreimal dieselben acht Zeilen, jetzt einmal. Was sich
   wirklich unterscheidet, steht bei der jeweiligen Klasse. */
.mc-leg, .hm-leg, .tg-a, .hm-vsw{
  display:inline-flex; align-items:center; gap:6px; border-radius:99px;
  cursor:pointer; background:var(--athlera-surface-2);
  border:1px solid var(--athlera-border);
  transition:color var(--motion-fast) var(--ease-soft),
             border-color var(--motion-fast) var(--ease-soft);
}

/* --- Legende --- */
.hm-legend{ display:grid; gap:7px; }
.hm-leg-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.hm-leg{ min-height:34px; padding:4px 11px; color:var(--athlera-muted);
         font-size:11.5px; font-weight:600; }

.hm-leg.is-sel{ color:var(--athlera-white); border-color:color-mix(in srgb, var(--m) 70%, transparent); }
.hm-leg:active{ transform:scale(.97); }

.hm-leg-states{ padding-top:2px; border-top:1px solid var(--athlera-border-soft); }
.hm-state{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px;
           color:var(--athlera-faint); }
.hm-state i{ width:8px; height:8px; border-radius:2px; flex:0 0 auto;
             border:1.5px solid var(--athlera-faint); }
.hm-state.hm-in_target i{ border-color:var(--athlera-good); }
.hm-state.hm-below_target i{ border-color:var(--athlera-warn); border-style:dashed; }
/* Gemeinsame Darstellung — 6 Stellen, eine Regel. */
.day-choice:not(.done):hover,
.athlete-card:hover,
.cw-fc:hover,
.rep-opt:hover,
.mc-leg:hover,
.hm-state.hm-above_target i{border-color:var(--athlera-blue); }

/* --- Detailblock --- */
.hm-detail{ min-height:96px; }
.hm-hint{ margin:0; font-size:12.5px; line-height:1.55; color:var(--athlera-faint); }
.hm-panel{
  padding:13px 15px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:color-mix(in srgb, var(--m) 7%, var(--athlera-surface-2));
  animation:appear var(--motion-base) var(--ease-out) backwards;
}

.hm-p-name{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700;
            color:var(--athlera-white); }
.hm-p-nums{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }
/* Label-über-Wert-Paar (Spalte) — 7 Stellen, eine Regel. */
.pg-col,
.pr-now,
.pr-next,
.ea-delta,
.sp-kpi,
.sp-vs>div,
.hm-p-num{display:flex; flex-direction:column; gap:1px; }

.hm-p-num strong{ font-size:19px; font-weight:800; color:var(--athlera-white); }
.hm-p-num span{ font-size:10px; text-transform:uppercase; letter-spacing:.5px;
                color:var(--athlera-faint); }
.hm-none{ color:var(--athlera-faint) !important; }
.hm-p-target{
  margin-top:11px; padding-top:9px; border-top:1px solid var(--athlera-border-soft);
  font-size:12.5px; color:var(--athlera-muted);
}
/* Nebentext (gedämpft) — 6 Stellen, eine Regel. */
.sig em,
.cw-none,
.ci-what em,
.ca-fc-foot em,
.mt-of em,
.hm-p-target em{font-style:normal; color:var(--athlera-faint); }

.hm-p-meta{ margin-top:6px; font-size:11.5px; color:var(--athlera-faint); }

/* --- Muskel -> Uebung ---
   Die Liste, die aus einer eingefaerbten Flaeche eine Handlung macht. Bewusst
   Links und kein Text: der naechste Schritt eines Coaches ist immer, sich die
   Uebung anzusehen. */
.hm-p-src{ margin-top:10px; padding-top:9px; border-top:1px solid var(--athlera-border-soft); }
.hm-src-list{ display:grid; gap:3px; }
.hm-src{ flex-direction:row; align-items:center; justify-content:space-between;
         gap:10px; min-height:34px; padding:5px 9px; background:var(--athlera-surface-2);
         border-color:transparent; font-size:13px; }
.hm-src:hover, .hm-src:focus-visible{ border-color:color-mix(in srgb, var(--m) 45%, transparent); }
.hm-src-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-src-sets{ flex:0 0 auto; font-size:11.5px; color:var(--athlera-silver); }

/* Die Verlaufsstopps der Koerperflaeche stehen HIER und nicht im Makro, damit
   die Komponente weiterhin keine einzige Farbe enthaelt — und damit ein
   Themewechsel den Koerper mitnimmt, ohne ein Template anzufassen. */
/* Die Formen einer Koerperkarte stehen EINMAL in einem versteckten <svg>
   und werden per <use> referenziert — sonst laege allein der Umriss viermal
   je Seite im ausgelieferten HTML. */
.hm-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.hm-g0{ stop-color:color-mix(in srgb, var(--athlera-border) 70%, var(--athlera-surface-2)); }
.hm-g1{ stop-color:var(--athlera-surface-2); }
.hm-g2{ stop-color:var(--athlera-surface); }
/* Anatomische Rillen: dunkel, damit sie auf eingefaerbter UND leerer Flaeche
   als Vertiefung lesen. Nie eine Muskelfarbe, nie ein Klickziel. */
.hm-lines{ fill:none; stroke:#000; stroke-width:1; stroke-linecap:round;
           opacity:.30; pointer-events:none; }

/* Erscheint erst, wenn zwei Figuren nebeneinander zu schmal werden — auf
   breiten Schirmen ist der Vergleich vorne/hinten die eigentliche Frage. */
.hm-viewswitch{ display:none; gap:6px; justify-content:center; }
.hm-vsw{ min-height:34px; padding:5px 16px; font-size:12px; font-weight:650;
         color:var(--athlera-muted); }
.hm-vsw.is-on{ color:var(--athlera-white); border-color:var(--athlera-blue); }

@media (max-width: 560px){
  .hm-views{ gap:8px; }
  .hm-fig{ flex:1 1 46%; max-width:none; }
  .hm-svg{ max-height:44vh; }
  .hm-p-nums{ grid-template-columns:repeat(2, 1fr); }
  /* Eine Figur auf einmal, sobald zwei nebeneinander nur noch Briefmarken
     waeren. Ohne JavaScript bleibt data-view ungesetzt und beide stehen da. */
  .hm-viewswitch{ display:flex; }
  .hm[data-view="front"] .hm-fig[data-fig="back"],
  .hm[data-view="back"] .hm-fig[data-fig="front"]{ display:none; }
  .hm[data-view] .hm-fig{ flex:1 1 100%; }
  .hm[data-view] .hm-svg{ max-height:56vh; }
}
@media (prefers-reduced-motion: reduce){
  .hm-r{ transition:none !important; }
  .hm-panel{ animation:none !important; }
  .hm-leg:active{ transform:none !important; }
  .hm-src, .hm-vsw, .bp-btn{ transition:none !important; }
}

/* ============================================================
   BODY PULSE (.bp-*)
   ============================================================
   Dieselben Zahlen wie die Figur, in Ziffern und Pfeilen. Nicht als Ersatz,
   sondern als Gegenstueck: die Figur beantwortet "wo?", diese Liste "wie viel,
   gegen welches Ziel, in welche Richtung?". Damit haengt keine einzige Aussage
   der Komponente allein an einer Farbe. */
.bp{ border-top:1px solid var(--athlera-border-soft); padding-top:12px; }
.bp-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:8px; }
.bp-sub, .bp-nogoal, .xv-ph-meta,
/* Die Nebeninformation der Journey: der Vorperiodenwert, das Detail eines
   Ereignisses, das Datum einer Wegmarke. Gleiche Rolle, gleiche Regel —
   ein drittes Mal dieselben zwei Deklarationen waere genau die
   Duplizierung, die 10d meldet. */
.jr-say-ev, .jr-cmp-prev, .jr-ev-detail, .jr-mark-date, .pv-target, .ef-runtime{ font-size:11.5px; color:var(--athlera-faint); }
.bp-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
           color:var(--athlera-silver); font-weight:700; }
.bp-list{ display:grid; gap:2px; }
.bp-btn{
  display:grid; width:100%; align-items:center; gap:10px; min-height:38px;
  grid-template-columns:minmax(0,1fr) auto auto auto auto;
  padding:6px 10px; border:1px solid transparent; border-radius:7px;
  background:transparent; cursor:pointer; text-align:left; color:inherit;
  transition:background var(--motion-fast) var(--ease-soft),
             border-color var(--motion-fast) var(--ease-soft);
}
.bp-btn.is-sel{ background:var(--athlera-surface-2);
                border-color:color-mix(in srgb, var(--m) 60%, transparent); }
.bp-btn .mt-name{ min-width:0; font-size:13.5px; }
.bp-btn .mt-name span:not(.m-dot){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bp-nums{ font-size:13px; color:var(--athlera-muted); white-space:nowrap; }

.bp-slash{ margin:0 3px; color:var(--athlera-faint); }
.bp-goal{ color:var(--athlera-silver); }

/* Die Auslastung als abzaehlbare Form. Vier Balken, `level` davon gefuellt —
   dieselbe Aussage wie die Helligkeit der Flaeche, nur ohne Farbe lesbar. */
.bp-level{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.bp-level i{ width:3px; border-radius:1px; background:var(--athlera-border); align-self:flex-end; }
.bp-level i:nth-child(1){ height:5px; }
.bp-level i:nth-child(2){ height:8px; }
.bp-level i:nth-child(3){ height:11px; }
.bp-level i:nth-child(4){ height:14px; }
.bp-level i.on{ background:var(--m); }

.bp-trend{ font-size:14px; font-weight:800; line-height:1; }
.bp-t-flat{ color:var(--athlera-silver); }
.bp-t-new{ color:var(--athlera-blue); }
.bp-status{ justify-self:end; }

@media (max-width: 560px){
  /* Der Statustext wandert aus dem Blick, das Statuszeichen bleibt: auf 375 px
     ist die Zeile sonst dreizeilig. Bewusst NICHT display:none — das naehme den
     Text auch der Sprachausgabe weg und machte aus einer Platzentscheidung
     einen Informationsverlust. */
  .bp-btn{ gap:7px; padding:6px 8px; }
  .bp-status-text{ position:absolute; width:1px; height:1px; margin:-1px;
                   overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .bp-sub{ display:none; }
}

/* ============================================================
   ÜBUNGSBILD (.xv-*)
   ============================================================
   Die Fallback-Kette steckt in der SCHICHTUNG, nicht in JavaScript: der
   Platzhalter liegt IMMER im Kasten, das Bild deckt ihn ab, wenn es kommt. Es
   gibt deshalb keinen Zustand, in dem eine leere Flaeche entsteht — auch nicht
   ohne Skript, auch nicht, wenn die Datei zwischen zwei Aufrufen verschwindet.
   visual.js entfernt zusaetzlich das Bruchsymbol des Browsers.

   Das Seitenverhaeltnis steht HIER und nicht am Bild: so hat der Kasten seine
   Groesse, bevor irgendein Byte da ist, und ein ankommendes Bild kann keinen
   Text verschieben, der schon gelesen wird (CLS). */
.xv-box{ position:relative; display:block; overflow:hidden; flex:0 0 auto;
         border-radius:10px; background:var(--athlera-surface-2);
         border:1px solid var(--athlera-border-soft); }
.xv-hero{ width:100%; max-width:560px; aspect-ratio:16/10; }
.xv-pair{ width:100%; aspect-ratio:4/3; }
.xv-card{ width:88px; aspect-ratio:4/3; border-radius:8px; }
.xv-mini{ width:54px; aspect-ratio:4/3; border-radius:7px; }
/* Bewusst OHNE eigenen Hintergrund und mit unsichtbarem Text: schlaegt das
   Laden fehl, ist das <img> durchsichtig und der Platzhalter darunter ist
   wieder das, was man sieht. */
.xv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
         display:block; border:0; background:transparent; color:transparent; font-size:0; }
.xv-box.is-broken .xv-img{ display:none; }
/* Liegt das Bild deckend darueber, faellt der Platzhalter aus dem Baum, damit
   eine Sprachausgabe nicht erst ihn und dann das alt desselben Bildes liest. */
.xv-box.is-loaded .xv-ph{ display:none; }
.xv-ph{
  position:absolute; inset:0; display:flex; align-items:center; gap:10px;
  padding:10px 12px; overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--athlera-surface) 90%, var(--athlera-gold)),
    var(--athlera-surface-2));
}
.xv-ph-mini, .xv-ph-card{ justify-content:center; padding:4px; }
/* Das Monogramm ist der wiedererkennbare Anker beim Scrollen durch 500
   Uebungen; seine Groesse kommt aus der Box, nicht aus vier eigenen Regeln. */
.xv-mono{ flex:0 0 auto; display:grid; place-items:center; font-weight:800;
          letter-spacing:.5px; color:var(--athlera-gold);
          width:var(--mono, 34px); height:var(--mono, 34px);
          font-size:var(--monofs, 13px); border-radius:var(--monor, 8px);
          background:color-mix(in srgb, var(--athlera-gold) 12%, transparent);
          border:1px solid color-mix(in srgb, var(--athlera-gold) 30%, transparent); }
.xv-ph-hero{ --mono:66px; --monofs:24px; --monor:12px; }
.xv-ph-pair{ --mono:48px; --monofs:18px; --monor:10px; }
.xv-ph-mini{ --mono:26px; --monofs:11px; --monor:6px; }
.xv-ph-text{ min-width:0; display:grid; gap:3px; }
.xv-ph-card .xv-ph-text{ display:none; }
.xv-ph-name{ font-size:14px; font-weight:700; color:var(--athlera-text);
             line-height:1.3; overflow:hidden; }

.xv-detail{ display:grid; gap:8px; }
.xv-arrow{ flex:0 0 auto; align-self:center; font-size:20px; font-weight:800;
           color:var(--athlera-gold); }
.xv-label{ position:absolute; left:8px; bottom:8px; z-index:2;
           background:rgba(8,10,16,.82); color:var(--athlera-white);
           border:1px solid var(--athlera-border); }
.xv-caption{ margin:0; font-size:12.5px; line-height:1.55; color:var(--athlera-muted); }
.xv-credit{ margin:0; font-size:11px; }
/* Feste Flaeche, faul geladen, ein Tap navigiert — die Vorschau im
   Trainingsprotokoll darf das Loggen unter keinen Umstaenden verlangsamen. */
.xv-inline{ display:block; flex:0 0 auto; text-decoration:none; }
/* Start und Ende stehen untereinander, solange die Spalte schmal ist: zwei
   150-px-Bilder nebeneinander zeigen keine Technik mehr, sondern zwei
   Briefmarken. Der Pfeil dreht mit, damit die Leserichtung stimmt. */
.xv-pair-row{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.xv-pair-row .xv-arrow{ transform:rotate(90deg); }
@media (min-width: 561px){
  .xv-pair-row{ flex-direction:row; align-items:center; gap:10px; }
  .xv-pair-row .xv-arrow{ transform:none; }
  .xv-pair-row .xv-box{ flex:1 1 0; min-width:0; }
}

/* Bild und Uebungsname in EINER Zeile: das Bild gehoert zur Kopfzeile der
   Uebung und nicht zwischen zwei Saetze. */
.wx-head{ display:flex; align-items:center; gap:10px; margin-bottom:2px; }
.wx-head .workout-exercise-name{ min-width:0; margin:0; }

/* ============================================================
   ÜBUNG -> MUSKEL (.mm-*)
   ============================================================
   Die kleine Koerperkarte am Uebungsdetail. Bewusst eine ANDERE Klasse als die
   grosse Heatmap: eine Flaeche hier traegt eine ROLLE, keine Intensitaet.
   Gleiche Klassen waeren die Einladung, irgendwann Volumendaten hineinzureichen
   und beide Aussagen zu vermischen. Beschriftung und Kacheln kommen dagegen aus
   den vorhandenen .ex-muscle*-Regeln — dieselbe Seite, dieselbe Sprache. */
.mm{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.mm-figs{ display:flex; gap:8px; flex:0 0 auto; }
.mm-svg{ width:94px; height:auto; display:block; }
.mm-r{ fill:var(--m, var(--athlera-faint)); stroke:none; }
.mm-primary{ fill-opacity:.92; }
.mm-secondary{ fill-opacity:.48; }
.mm-stabilizer{ fill-opacity:.24; }
.mm-off{ fill:var(--athlera-surface); fill-opacity:.35; }
.mm-legend{ display:grid; gap:7px; min-width:0; flex:1 1 190px; }

/* ============================================================
   MEDIENVERWALTUNG (.mmg-*)
   ============================================================
   Die Liste benutzt die vorhandenen .ex-item*-Regeln der Uebungsbibliothek:
   dieselbe Zeilenform fuer dieselbe Sache, und kein zweiter Satz Klassen, der
   beim naechsten Designwechsel vergessen wird. Eigen ist nur der Hinweiskasten
   zur Rechtelage — er hat in der Bibliothek keine Entsprechung. */
.mmg-off{ opacity:.6; }

.mmg-inline select{ width:auto; min-width:130px; margin:0; }

/* ============================================================
   ZIELE IM TEAM (.tg-*)
   ============================================================
   Reihenfolge ist die Aussage: die Gruppe mit den meisten Athleten unter Ziel
   steht oben, und in ihr der Athlet mit dem groessten Rueckstand. Ein Coach
   liest diese Liste, um Arbeit zu finden. */

.tg-group{
  padding:11px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:color-mix(in srgb, var(--m) 6%, var(--athlera-surface-2));
}
.tg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
          flex-wrap:wrap; margin-bottom:9px; }
.tg-name{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:650;
          color:var(--athlera-white); }
/* Flex-Zeile — 5 Stellen, eine Regel. */
.qa-views,
.ci-counts,
.pr-counts,
.tg-summary,
.tg-athletes{display:flex; gap:6px; flex-wrap:wrap; }

.tg-a{ min-height:34px; padding:5px 11px; gap:7px; text-decoration:none;
       background:var(--athlera-surface-3); font-size:12px; color:var(--athlera-text); }
.tg-a:active{ transform:scale(.97); }
.tg-a-below_target{ border-color:color-mix(in srgb, var(--athlera-warn) 45%, transparent); }
.tg-a-above_target{ border-color:color-mix(in srgb, var(--athlera-blue) 40%, transparent); }
.tg-a-name{ font-weight:600; }
.tg-a-num{ color:var(--athlera-silver); }
.tg-a-pct{ color:var(--athlera-faint); font-size:11px; }
.tg-more{ align-self:center; font-size:11.5px; color:var(--athlera-faint); }

@media (prefers-reduced-motion: reduce){
  .tg-a{ transition:none !important; }
  .tg-a:active{ transform:none !important; }
}

/* Anteil statt Zielbadge: auf einer Session oder einem Split gilt kein
   Wochenziel, wohl aber "wie viel von der Arbeit ging hierhin". */
.hm-share{ font-size:11.5px; font-weight:700; color:var(--athlera-silver); }
.hm-compact .hm-svg{ max-height:min(38vh, 300px); }

/* ============================================================
   WOCHENRUECKBLICK (.wr-*)
   ============================================================ */
.wr-moves{ display:grid; gap:9px; }
.wr-move{
  display:grid; gap:2px; padding:11px 13px; border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); border-left:3px solid var(--athlera-border);
}

/* Gemeinsame Darstellung — 5 Stellen, eine Regel. */
.tri-medium,
.cw-fc-medium,
.ca-fc-medium,
.ca-tri-high,
.wr-down{border-left-color:var(--athlera-warn); }

.wr-move-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.7px;
              color:var(--athlera-faint); }
.wr-move-name{ font-size:14.5px; font-weight:700; color:var(--athlera-white);
               text-decoration:none; }
.wr-move-name:hover{ color:var(--athlera-blue); }
.wr-move-num{ font-size:20px; font-weight:800; }
/* Alles Warnende. */
.sig-medium, .cw-delta.is-down, .mv-down, .pr-a-warn, .ea-down, .ea-delta.is-down strong,
.ea-cards .is-down, .sp-regressing, .ca-delta.is-down, .bp-t-down, .wr-down .wr-move-num{ color:var(--athlera-warn); }

.wr-row{
  display:grid; align-items:center; gap:9px;
  grid-template-columns:minmax(110px, 1.5fr) auto auto;
  padding:7px 11px; border-radius:var(--radius-sm); background:var(--athlera-surface-2);
}
.wr-row-name{ font-size:13px; font-weight:600; color:var(--athlera-text); text-decoration:none; }
.wr-row-name:hover{ color:var(--athlera-blue); }

.wr-cons-main{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.wr-cons-main strong{ font-size:30px; font-weight:800; color:var(--athlera-white); }
.wr-cons-main span{ font-size:13px; color:var(--athlera-muted); }

@media (max-width: 560px){
  .wr-row{ grid-template-columns:1fr auto; }
  .wr-row-name{ grid-column:1 / -1; }
}
/* Uebungsnamen sind Links. Auf dem Desktop reicht die Textzeile, mit dem Finger
   nicht — dort bekommen sie die im Projekt dokumentierten 40 px, ohne dass sich
   das Layout auf dem Desktop verschiebt. */

/* ===========================================================================
   Coach Custom Exercise Instructions (Migration 0017)
   Bewusst wenig eigenes CSS: Karten, Buttons und Felder kommen aus dem
   bestehenden System. Neu ist nur, was die DREI EBENEN sichtbar macht — die
   Kette, der geerbte Text unter jedem Feld und die Herkunftsmarke.
   =========================================================================== */

.ci-levels li{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--athlera-border-soft); border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); opacity:.55; }
.ci-levels li.is-active{ opacity:1; border-color:var(--athlera-blue-dim);
  background:color-mix(in srgb, var(--athlera-blue) 7%, var(--athlera-surface-2)); }
.ci-levels li>span{ flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--athlera-surface-3); color:var(--athlera-silver); }
.ci-levels li.is-active>span{ background:var(--athlera-blue); color:#fff; }
.ci-levels strong{ display:block; font-size:14px; }
.ci-levels em{ font-style:normal; font-size:12px; color:var(--athlera-muted); }

.ci-note{ border-color:color-mix(in srgb, var(--athlera-warn) 35%, var(--athlera-border)); }
.ci-note p{ color:var(--athlera-muted); font-size:13px; margin:6px 0; }
.ci-others{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.ci-others a{ display:inline-flex; min-height:34px; align-items:center; padding:5px 11px;
  border:1px solid var(--athlera-border); border-radius:999px; text-decoration:none;
  font-size:13px; color:var(--athlera-text); background:var(--athlera-surface-2); }
/* Gemeinsame Darstellung — 4 Stellen, eine Regel. */
.ca-fc:hover,
.ca-row:hover,
.tg-a:hover,
.ci-others a:hover{border-color:var(--athlera-blue-dim); }

.ci-field{ margin-bottom:20px; }
.ci-field label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
.ci-hint{ font-size:12px; color:var(--athlera-muted); margin:6px 0 0; }
.ci-inherit{ margin-top:8px; font-size:12.5px; color:var(--athlera-muted); }
.ci-inherit summary, .pl-variants summary { cursor:pointer; color:var(--athlera-silver); min-height:32px;
  display:flex; align-items:center; }
.ci-inherit p, .ci-inherit ol{ margin:6px 0 0; padding-left:0; }
.ci-inherit ol{ padding-left:18px; }

.ci-check{ display:flex; gap:10px; align-items:flex-start; padding:12px;
  border:1px solid var(--athlera-border); border-radius:var(--radius-sm);
  background:var(--athlera-surface-2); cursor:pointer; }
.ci-check input{ margin-top:2px; width:18px; height:18px; flex:0 0 auto; }
.ci-check em{ display:block; font-style:normal; font-size:12px; color:var(--athlera-muted); }
.ci-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.ci-reset, .mt-count { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ci-reset p{ font-size:13px; color:var(--athlera-muted); margin:4px 0 0; max-width:60ch; }

/* Herkunftsmarke — sagt dem Leser, wessen Anweisung er liest. */
.ci-src{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--athlera-blue-dim); color:var(--athlera-silver);
  background:color-mix(in srgb, var(--athlera-blue) 9%, transparent); }
.ci-src::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--athlera-blue); }

@media (max-width: 560px){ .ci-reset{ flex-direction:column; align-items:stretch; } }
.ex-coach-note{ border-color:var(--athlera-blue-dim);
  background:color-mix(in srgb, var(--athlera-blue) 5%, var(--athlera-surface)); }
.ci-roster p{ font-size:13px; color:var(--athlera-muted); margin:6px 0 10px; max-width:70ch; }
.ci-dot{ display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--athlera-blue); vertical-align:middle; margin-left:2px; }

/* ===========================================================================
   Powerlifting (Migration 0018) — bewusst schmal gehalten: Karten, Chips und
   Tabellen kommen aus dem bestehenden System, neu sind nur die drei Lift-Karten.
   =========================================================================== */
.pl-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); margin-bottom:14px; }
.pl-lift-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.pl-lift-head h3{ margin:0; }
.pl-lift{ border-top:2px solid var(--athlera-border); }
/* Farbe je Lift kommt als Variable aus muscle_colors (siehe
   COMPETITION_LIFT_HUES in app.py), nicht als Hexwert von hier. */
.pl-lift{ --lift: var(--athlera-border); border-top-color:var(--lift); }
.pl-nums{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.pl-nums>div{ min-width:0; }
.pl-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--athlera-faint); margin-bottom:3px; }
.pl-nums strong{ font-size:15px; }
.pl-big{ font-size:26px !important; line-height:1.1; }
.pl-unit{ font-style:normal; font-size:13px; color:var(--athlera-muted); margin-left:3px; }
.pl-none{ font-size:12px !important; color:var(--athlera-faint); font-weight:400; }
.pl-none-body{ font-size:13px; color:var(--athlera-muted); margin:0; }
.pl-comp{ font-size:12.5px; color:var(--athlera-muted); margin:12px 0 0; }
.pl-variants{ margin-top:10px; font-size:13px; }

.pl-var-table{ width:100%; margin-top:8px; font-size:13px; }
.pl-var-table th, .pl-var-table td{ padding:5px 6px; border-bottom:1px solid var(--athlera-border-soft); }
.pl-var-table .num{ text-align:right; }
.pl-badge{ display:inline-block; font-size:10px; padding:1px 6px; border-radius:999px; margin-left:5px;
  background:var(--athlera-gold-dim); color:var(--athlera-gold); vertical-align:middle; }
.pl-total{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.pl-total p{ font-size:12.5px; color:var(--athlera-muted); margin:0; max-width:52ch; }
.pl-total--partial{ display:block; }
.pl-empty p{ color:var(--athlera-muted); max-width:70ch; }
.chart-host{ min-height:200px; }
@media (max-width: 420px){ .pl-nums{ grid-template-columns:1fr 1fr; } }
.set-role{ display:flex; gap:5px; margin:6px 0 2px; flex-wrap:wrap; }
.sr-opt{ position:relative; }
.sr-opt input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.sr-opt span{ display:inline-flex; align-items:center; min-height:34px; padding:4px 11px;
  border:1px solid var(--athlera-border); border-radius:999px; font-size:12px;
  color:var(--athlera-muted); background:var(--athlera-surface-2); }
.sr-opt input:checked + span{ border-color:var(--athlera-blue-dim); color:var(--athlera-text);
  background:color-mix(in srgb, var(--athlera-blue) 12%, var(--athlera-surface-2)); }
.sr-opt input:focus-visible + span{ outline:2px solid var(--athlera-blue); outline-offset:2px; }
.hm-p-links{ margin-top:8px; }
.hm-p-link{ font-size:12.5px; color:var(--athlera-silver); text-decoration:none;
  display:inline-flex; align-items:center; min-height:32px; }

/* ===========================================================================
   TOUCH-ZIELE — die Regel steht EINMAL
   ===========================================================================
   40 px ist die im Projekt dokumentierte Untergrenze (siehe PROGRESS.md), 44 px
   fuer die primaeren Bedienelemente. Das stand vorher in acht ueber die Datei
   verteilten @media-Bloecken, jeder neben dem Feature, das ihn gebraucht hat —
   mit dem Ergebnis, dass beim naechsten Feature ein neunter dazukam und niemand
   die Liste als Ganzes sehen konnte. Ein neues Bedienelement gehoert hier in
   die Liste, nicht in einen eigenen Block. */
@media (pointer: coarse){
  .ca-seg-item{ min-height:44px; }
  .mc-leg, .hm-leg, .tg-a, .sr-opt span,
  .ci-others a, .ci-inherit summary,
  .pl-variants summary, .hm-p-link{ min-height:40px; }
  .wr-move-name, .wr-row-name{ display:inline-flex; align-items:center; min-height:40px; }
  /* Reine Textlinks in Tabellenzellen ("Sätze ansehen →", "öffnen →", "View →").
     Im Card-Fallback unter 640px ist so eine Zeile nur so hoch wie ihr Text —
     rund 20 px. Sie sind aber der einzige Weg von der Liste in die Detailfläche,
     also müssen sie so treffbar sein wie ein Button. Gefunden im UX-Review,
     nicht im Test: eine Klasse fehlte nicht, es fehlte eine Höhe. */
  .responsive-cards td a, .focus-ok a{
    display:inline-flex; align-items:center; min-height:44px; }
}
.ws-ex-roles{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; grid-column:1/-1; }
.ws-role{ font-size:11px; padding:2px 8px; border-radius:999px; color:var(--athlera-muted);
  border:1px solid var(--athlera-border-soft); background:var(--athlera-surface-2); }
.ws-role.is-top{ color:var(--athlera-text); border-color:var(--athlera-blue-dim); }
.ws-role.is-quiet{ border-color:transparent; color:var(--athlera-faint); }
.ci-rest{ border-top:1px solid var(--athlera-border-soft); padding-top:14px; margin-bottom:18px; }
.ci-rest>summary{ cursor:pointer; font-weight:600; font-size:13.5px; color:var(--athlera-silver);
  min-height:36px; display:flex; align-items:center; }
.ci-rest-body{ padding-top:14px; }
@media (pointer: coarse){ .ci-rest>summary{ min-height:44px; } }
/* Bestaetigung, dass der Satz angekommen ist — einmal, kurz, ohne Layout-Shift.
   Nur transform/opacity und ein Rahmen; die Zeile bewegt nichts um sich herum. */
@keyframes setLanded{
  0%{ opacity:.4; transform:translateY(-3px); border-color:var(--athlera-blue); }
  100%{ opacity:1; transform:none; }
}
.set-logged-row.is-new{ animation:setLanded .42s ease-out 1;
  border-color:color-mix(in srgb, var(--athlera-blue) 55%, var(--athlera-border)); }
.set-logged-row.is-warmup{ opacity:.62; }
.set-role-tag{ font-size:10.5px; color:var(--athlera-faint); }
.ci-others a:active, .hm-p-link:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){
  .set-logged-row.is-new{ animation:none !important; }
  .ci-others a:active, .hm-p-link:active{ transform:none !important; }
}
.mc-bulk{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
/* Nebentext (gedämpft) — 12 Stellen, eine Regel. */
.pv-pr-date,
.pb-target,
.ai-basis,
.pr-meta,
.sp-meta,
.sp-none,
.ah-mus-sets,
.ah-pr-date,
.mt-meta,
.wr-move-meta,
.wr-row-meta,
.mc-bulk-hint{font-size:11.5px; color:var(--athlera-faint); }

/* Ein gedrueckter Umschalter muss auch gedrueckt AUSSEHEN. Ohne das liest sich
   eine leere Legende wie ein Fehler statt wie eine aktive Filterung — und der
   Weg zurueck (derselbe Knopf) waere nicht erkennbar. aria-pressed traegt
   dieselbe Aussage fuer Screenreader. */
.mc-bulk .btn.is-active,
.mc-bulk .btn[aria-pressed="true"]{
  border-color:var(--athlera-blue);
  color:var(--athlera-blue);
  background:color-mix(in srgb, var(--athlera-blue) 12%, transparent);
}
/* "Verwendete Anleitung" auf der Uebungsseite (Block 5/6). Die Randfarbe sagt
   die Ebene, der Satz darunter sagt die Konsequenz — Farbe allein traegt hier
   nie eine Information. */

.ex-instr--athlete{ border-left-color:var(--athlera-gold); }

/* Flex-Zeile — 3 Stellen, eine Regel. */
/* --- Quality worklist header + pager ------------------------------------- */ .qa-head,
.ci-head,
.ex-instr-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.ex-instr-note{ margin:8px 0 0; font-size:13px; color:var(--athlera-muted); max-width:72ch; }
/* Gemeinsame Darstellung — 4 Stellen, eine Regel. */
/* One disclosure pattern for the whole page,
so every "there is more" looks the same wherever it appears. */ .ex-more,
.pb-to-day,
.ci-danger{margin-top:12px; border-top:1px solid var(--athlera-border-soft); padding-top:10px; }

.ci-danger>summary{ cursor:pointer; font-size:13px; color:var(--athlera-bad);
  min-height:36px; display:flex; align-items:center; }
.ci-danger-body{ padding-top:10px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ci-danger-body p{ font-size:13px; color:var(--athlera-muted); margin:0; max-width:70ch; }

.ci-danger-body input[type=text]{ max-width:200px; }
/* Disziplin-Marken (Block 9/11). Abgeleitet, nicht gespeichert — siehe
   exercise_disciplines(). Powerlifting nimmt die Wettkampf-Goldnote, weil sie
   im Projekt ohnehin fuer Bestleistungen reserviert ist. */
.ex-disc{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.ex-disc-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:999px; font-size:11.5px; font-weight:600;
  border:1px solid var(--athlera-border); color:var(--athlera-silver);
  background:var(--athlera-surface-2); }
.ex-disc-tag em, .mt-grid label em { font-style:normal; font-weight:400; color:var(--athlera-faint); }

.ex-disc-powerlifting em{ color:color-mix(in srgb, var(--athlera-gold) 70%, transparent); }

/* ===========================================================================
   MEET / WETTKAMPF (Migration 0020)
   Karten, Badges, Felder und Motion kommen aus dem bestehenden System. Neu ist
   nur, was ein Wettkampf braucht: Countdown, Versuchsraster, Ergebniszeile.
   =========================================================================== */
.mt-list{ padding:0; overflow:hidden; }
.mt-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; text-decoration:none; color:var(--athlera-text);
  border-bottom:1px solid var(--athlera-border-soft); min-height:44px; }
.mt-row:last-child{ border-bottom:none; }
.mt-row:hover{ background:var(--athlera-surface-2); }
.mt-row-main{ min-width:0; }
.mt-row-main strong{ display:block; font-size:15px; }

.mt-row-side{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.mt-days{ font-size:12px; color:var(--athlera-silver); white-space:nowrap; }
.mt-days.is-today{ color:var(--athlera-gold); font-weight:700; }

.mt-count-num{ font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.mt-count-label{ display:block; font-size:13px; color:var(--athlera-muted); margin-top:4px; }
.mt-count--cancelled .mt-count-num{ color:var(--athlera-faint); font-size:24px; }

.mt-bw-row strong{ font-size:17px; display:block; }
/* Nebentext (gedämpft) — 7 Stellen, eine Regel. */
.pv-ex em,
.pg-col em,
.rep-opt em,
.pr-now em,
.pr-next em,
.pdz-ex em,
.mt-bw-date{font-style:normal; font-size:11.5px; color:var(--athlera-faint); }

.mt-note{ font-size:12.5px; color:var(--athlera-muted); margin:12px 0 0; max-width:74ch; }
.mt-warn ul{ margin:8px 0; padding-left:18px; font-size:13px; color:var(--athlera-silver); }

.mt-lifts{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); margin-bottom:14px; }
.mt-lift{ border-top:2px solid var(--lift, var(--athlera-border)); }
.mt-lift-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.mt-lift-head h3{ margin:0; }
.mt-best{ font-size:11.5px; color:var(--athlera-silver); white-space:nowrap; }
/* Alle Nebentexte: Belege, Einheiten, Randnotizen. */
input::placeholder, textarea::placeholder, .sig-more, .pr-a-muted, .ea-none, .sp-grp,
.sp-more, .tc-vs-more, .tc-status--insufficient_data, .ah-gap td, .hm-p-none, .bp-t-none,
.xv-none, .xv-credit, .ci-inherit--none, .mt-days.is-past, .mt-best.is-none{ color:var(--athlera-faint); }

.mt-att{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius-sm);
  border:1px solid var(--athlera-border-soft); background:var(--athlera-surface-2); }
.mt-att input, .mt-att select{ min-height:40px; margin:0; }
/* Das <select> traegt den laengsten Text ("nicht angetreten") und wuchs darum
   auf seine Intrinsic Width — 181 von 345 px, waehrend die Gewichtsfelder auf
   50 px zusammenfielen und "180.0" als "1" zeigten. Beide duerfen jetzt
   schrumpfen; die Gewichte bekommen den groesseren Anteil, weil sie die
   eigentliche Eingabe sind. */
.mt-att input{ flex:1 1 62px; min-width:0; }
.mt-att select{ flex:0 1 122px; min-width:0; }
.mt-att-no{ flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; background:var(--athlera-surface-3); color:var(--athlera-silver); }
.mt-att-kg{ flex:1; font-size:15px; font-weight:650; }

/* Der Zustand steht IMMER auch als Wort da — die Randfarbe ist Zugabe, nie der
   einzige Träger der Information. */
.mt-att--success{ border-color:color-mix(in srgb, var(--athlera-good) 55%, transparent); }
.mt-att--failed{ border-color:color-mix(in srgb, var(--athlera-bad) 55%, transparent); }
.mt-att--not_attempted{ opacity:.6; }

/* --- Wettkampf zu Wettkampf ----------------------------------------------
   Eine Zeile je gewertetem Wettkampf, darunter das Diagramm. Das Delta traegt
   Vorzeichen UND Richtungsfarbe UND im title den Wettkampf, gegen den
   verglichen wurde — die Farbe allein sagt hier nichts. */
.mt-hist-rows{ display:flex; flex-direction:column; gap:10px; margin:12px 0 6px; }
.mt-hist-row{ padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--athlera-border-soft); background:var(--athlera-surface-2); }
.mt-hist-main strong{ font-size:14.5px; }
.mt-hist-nums{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:7px; }
.mt-hist-lift{ display:flex; align-items:baseline; gap:5px; font-size:13px; }
.mt-hist-lift em{ font-style:normal; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--athlera-muted); }
.mt-hist-lift b{ font-size:15px; font-weight:650; }
.mt-hist-total{ border-left:1px solid var(--athlera-border); padding-left:12px; }
/* Zurueck auf die Grundfarbe. */
.rep > summary:hover, .ex-more > summary:hover, .ca-seg-item:hover, .ah-q-warn,
.hm-leg:hover, .hm-p-target strong, .ci-inherit summary:hover, .hm-p-link:hover,
.ci-rest>summary:hover, .mt-hist-total b{ color:var(--athlera-text); }
.mt-none{ color:var(--athlera-faint); font-weight:400; }
.mt-d{ font-style:normal; font-size:11.5px; font-weight:650; }
.mt-d.is-flat{ color:var(--athlera-muted); }
.mt-hist-missing{ margin:6px 0 0; font-size:11.5px; color:var(--athlera-muted); }
.mt-hist-rule{ margin:2px 0 12px; font-size:11.5px; color:var(--athlera-muted);
  line-height:1.5; }

@media (max-width: 520px){
  .mt-hist-nums{ gap:6px 12px; }
  .mt-hist-total{ border-left:0; padding-left:0; }
}

/* --- Attempt-Vorschlaege --------------------------------------------------
   Der Vorschlag steht als eigene Zeile UNTER dem Versuch, nicht daneben: er ist
   eine andere Art Information als das eingetragene Gewicht und darf nicht mit
   ihm verwechselt werden. Das Wort "Vorschlag" steht immer da — die Zahl allein
   waere eine Vorgabe.
   Die Einschaetzung (konservativ/plausibel/aggressiv) traegt Farbe UND Wort UND
   eine Begruendungszeile darunter; die Farbe ist nie der einzige Traeger. */
.mt-sug{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  padding:5px 8px 3px 30px; font-size:12px; color:var(--athlera-silver); }
/* Nebentext (gedämpft) — 3 Stellen, eine Regel. */
.ai-text,
.pdz-week summary,
.mt-sug b{font-size:13.5px; color:var(--athlera-text); }

.mt-sug-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--athlera-muted); border:1px solid var(--athlera-border-soft);
  border-radius:999px; padding:1px 6px; }
.mt-sug-txt{ flex:1 1 200px; min-width:0; color:var(--athlera-muted); line-height:1.45; }
.mt-sug--none .mt-sug-txt{ font-style:italic; }
.mt-arrow{ padding:0 0 0 8px; color:var(--athlera-faint); font-size:12px; line-height:1; }
.mt-lvl{ font-size:10.5px; font-weight:650; border-radius:999px; padding:2px 8px;
  border:1px solid currentColor; white-space:nowrap; }
.mt-lvl--conservative{ color:var(--athlera-silver); }
/* Statusfarbe (Hintergrund + Text) — 10 Stellen, eine Regel. */
.trend-up,
.pg-progressing,
.tc-delta.is-up,
/* Die vier Statustoene,
einmal. Jedes Feature,
das einen Status zeigt — Volumenziele,
Triage-Kuerzel,
Heatmap-Detail — benutzt dieselben Klassen. */ .mt-s-in_target,
.ca-tt-ok,
.mt-lvl--plausible{color:var(--athlera-good); background:var(--athlera-good-dim); }

/* Statusfarbe (Hintergrund + Text) — 7 Stellen, eine Regel. */
.pg-regressing,
.tc-delta.is-down,
.ca-tri-high .ca-tri-icon,
.ca-tri-high .ca-tri-pill,
.mt-s-below_target,
.ca-tt-attention,

.mt-lvl-why{ padding:0 8px 6px 30px; font-size:11.5px; color:var(--athlera-muted);
  line-height:1.45; }
.mt-nodata{ margin:8px 0 0; font-size:12.5px; color:var(--athlera-muted); line-height:1.5; }
.mt-why{ margin-top:8px; }
.mt-why>summary{ cursor:pointer; font-size:12px; color:var(--athlera-silver);
  min-height:44px; display:flex; align-items:center; }
.mt-why ul{ margin:0 0 4px; padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:5px; }
.mt-why li{ font-size:12px; color:var(--athlera-muted); line-height:1.5; }
.mt-why-no{ display:inline-block; min-width:22px; font-weight:700;
  color:var(--athlera-silver); }
.mt-why-rule{ border-top:1px solid var(--athlera-border-soft); padding-top:6px;
  margin-top:2px; }

/* Ein gueltiger Versuch bekommt einen einmaligen, ruhigen Puls — kein Loop.
   Ein Fehlversuch bekommt bewusst KEINE Animation: ihn zu betonen waere eine
   Wertung, und die Randfarbe plus das Wort sagen bereits alles. */
.mt-att--success{ animation:mtGood var(--motion-slow) var(--ease-out) backwards;
  animation-delay:calc(var(--i, 0) * 60ms); }
@keyframes mtGood{
  from{ opacity:.4; transform:scale(.985); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .mt-att--success{ animation:none !important; }
}

@media (max-width: 520px){
  .mt-sug, .mt-lvl-why{ padding-left:8px; }
}

.mt-result-row{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.mt-result-row strong{ font-size:18px; display:block; }
.mt-total{ border-left:2px solid var(--athlera-border); padding-left:12px; }
.mt-edit>summary{ cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }
.mt-edit-body{ padding-top:14px; }
.mt-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); margin-bottom:14px; }
.mt-grid label{ display:block; font-size:13px; font-weight:600; }

.mt-grid input, .mt-grid select{ margin-top:5px; }
.mt-new h3{ margin-top:0; }

@media (max-width: 520px){
  .mt-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .mt-att{ flex-wrap:wrap; }
  .mt-count-num{ font-size:30px; }
}

/* ===========================================================================
   Journey — Zusammenfassung, Periodenvergleich, Wegmarken, Zeitleiste
   ===========================================================================
   Die vier Abschnitte sind dieselbe Bauform: eine Liste aus Zeilen. Deshalb
   eine Basis (.jr-list/.jr-row) und Abweichungen davon, statt vier eigener
   Baukaesten — der erste Entwurf beschrieb dasselbe Raster dreimal und war
   damit 1.000 Bytes schwerer, die diese Datei nicht mehr hat.

   Geschrieben wird einzeilig wie .eyebrow und .badge weiter oben: bei vierzig
   Regeln entscheidet allein die Einrueckung ueber mehrere hundert Bytes.

   Gefaerbt wird nur, was eine Nachricht ist — dieselben vier Rollen wie
   ueberall sonst. Die Zeitleiste faerbt darum nur die vier Arten, die einen
   Tag praegen (Rekord, Wettkampf, Schmerz, Planwechsel); Training, Check-in
   und Feedback bleiben neutral. Sieben Farben waeren bunt und unlesbar.
   -------------------------------------------------------------------------*/
.ca-card-head h2{ margin:0; font-size:16px; }
.jr-list{ display:grid; gap:1px; margin-top:14px; padding:0; list-style:none; border-radius:10px; overflow:hidden; background:var(--athlera-border-soft); }
.jr-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:11px 13px; background:var(--athlera-surface); }
.jr-say-text{ flex:1 1 220px; font-size:13.5px; font-weight:600; }
.jr-say.is-muted .jr-say-text{ color:var(--athlera-muted); }
.jr-cmp-row{ display:grid; align-items:center; gap:10px; grid-template-columns:minmax(90px,1.4fr) auto auto auto auto; }
/* Die Beschriftung einer Kennzahlzeile — dieselbe Rolle in drei
   Bereichen, deshalb eine Regel statt dreier gleicher (10d). */
.jr-cmp-label, .pn-group-name, .cv-label, .sv-note{ font-size:13px; font-weight:600; }
.jr-cmp-now{ font-size:15px; font-weight:700; }
.jr-cmp-delta{ min-width:56px; text-align:right; font-size:12.5px; font-weight:600; color:var(--athlera-muted); }
.jr-marks{ display:grid; gap:8px; margin:14px 0 0; padding:0; list-style:none; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.jr-mark{ padding:10px 12px; border:1px solid var(--athlera-border-soft); border-left:3px solid var(--athlera-silver); border-radius:10px; }
.jr-mark-label{ display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--athlera-faint); }
.jr-mark-value{ display:block; margin-top:3px; font-size:13.5px; font-weight:600; }
.jr-mark-date{ display:block; margin-top:2px; }
.jr-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 4px; }
.jr-chip{ padding:5px 11px; border:1px solid var(--athlera-border); border-radius:999px; font-size:12px; color:var(--athlera-muted); text-decoration:none; }
.jr-chip:hover{ border-color:var(--athlera-silver); color:var(--athlera-text); }
.jr-chip.is-active{ border-color:var(--athlera-blue); background:var(--athlera-blue-dim); color:var(--athlera-white); }
.jr-timeline{ margin:16px 0 0; padding:0; list-style:none; }
.jr-date{ display:block; padding:10px 0 6px; border-top:1px solid var(--athlera-border-soft); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--athlera-faint); }
.jr-day:first-child .jr-date{ padding-top:0; border-top:0; }
.jr-events{ display:grid; gap:6px; margin:0; padding:0 0 6px; list-style:none; }
/* Die Gattung steht als WORT da, nicht als Symbol: ein Alphabet aus sieben
   Zeichen muesste erst gelernt werden, und vorgelesen wird davon nichts. */
.jr-ev{ display:grid; align-items:baseline; gap:10px; grid-template-columns:88px 1fr; padding:7px 11px; border:1px solid var(--athlera-border-soft); border-left:3px solid var(--athlera-border); border-radius:9px; background:var(--athlera-surface); }
.jr-ev-kind{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--athlera-faint); }
.jr-ev-body{ font-size:13px; line-height:1.5; }
.jr-ev-body a{ color:var(--athlera-text); text-decoration:none; border-bottom:1px solid var(--athlera-border); }
.jr-ev-body a:hover{ color:var(--athlera-white); border-bottom-color:var(--athlera-silver); }
.jr-ev-detail{ display:block; }
/* Auszeichnungen — Rekord und Bestwert tragen dieselbe Farbe. Einzeln waeren
   das zwei identische Regeln und mit .ex-instr--athlete eine Dreiergruppe. */
.jr-pr, .jr-mark-heaviest{ border-left-color:var(--athlera-gold); }
.jr-meet{ border-left-color:var(--athlera-blue); }
.jr-pain, .sw-row.is-pain{ border-left-color:var(--athlera-bad); }
.jr-plan{ border-left-color:var(--athlera-silver); }
/* Alles Positive in dieser Anwendung. */
.day-choice.done .dc-meta, .ex-has-video, .perf-stats .is-up, .ws-compare.is-up, .ws-up,
.cw-delta.is-up, .sig-info, .mv-up, .pr-a-good, .ea-up, .ea-delta.is-up strong,
.ea-cards .is-up, .sp-up, .sp-progressing, .ca-delta.is-up, .bp-t-up, .wr-up .wr-move-num,
.pl-up, .mt-d.is-up, .jr-say.is-good .jr-say-text, .jr-cmp-row.is-good .jr-cmp-delta,
.jr-ev.is-good .jr-ev-kind{ color:var(--athlera-good); }
/* Alles Schlechte. */
.logout, .sig-high, .perf-stats .is-down, .cw-mini .is-bad, .sp-down, .tc-status--regressing,
.mt-d.is-down, .jr-say.is-bad .jr-say-text, .jr-cmp-row.is-bad .jr-cmp-delta,
.jr-ev.is-bad .jr-ev-kind{ color:var(--athlera-bad); }
/* Schmal: die Gattung wandert ueber den Text, statt ihn auf 40 % der Breite zu
   quetschen. Im Vergleich behalten Wert und Vorwert je ihre Spalte. */
@media (max-width:640px){
.jr-ev{ grid-template-columns:1fr; gap:2px; }
.jr-cmp-row{ grid-template-columns:1fr auto; row-gap:4px; }
.jr-cmp-now, .jr-cmp-delta{ grid-column:2; text-align:right; }
.jr-cmp-row .badge{ grid-column:1 / -1; justify-self:start; }
}

/* --- Schmerz-Muster ------------------------------------------------------- */
/* Baut auf .jr-list/.jr-row auf: dieselbe Bauform, dieselben Nebentexte. Nur
   die Spalten sind andere, und "auffaellig" bekommt eine Kante statt einer
   Flaeche — ein rot hinterlegter Block waere lauter als die Aussage. */
.pn-ex{ display:grid; align-items:baseline; gap:6px 12px; grid-template-columns:minmax(140px,1.3fr) auto 1fr auto; }
.pn-ex.is-pattern{ border-left:3px solid var(--athlera-bad); padding-left:10px; }
.pn-ex-name a{ color:var(--athlera-text); text-decoration:none; font-weight:600; font-size:13.5px; border-bottom:1px solid var(--athlera-border); }
/* Namenslinks in den Kennzahllisten — gleicher Hover, eine Regel. */
.pn-ex-name a:hover, .ef-name a:hover, .sw-name a:hover{ color:var(--athlera-white); border-bottom-color:var(--athlera-silver); }
.pn-ex-share{ font-size:13px; font-weight:700; }
.pn-groups{ display:grid; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.pn-group{ display:grid; align-items:baseline; gap:4px 10px; grid-template-columns:auto minmax(90px,auto) auto 1fr; }
.pn-group-n{ font-size:13px; font-weight:700; color:var(--m); }
@media (max-width:640px){
/* Schmal fallen alle Kennzahlzeilen auf dasselbe zweispaltige
   Raster: Beschriftung links, Zahl rechts, Beleg darunter. Drei
   gleiche Regeln waeren genau die Duplizierung aus 10d. */
.pn-ex, .pn-group, .cv-row, .mr-lift, .ef-row, .sv-row, .sw-row{ grid-template-columns:1fr auto; }
.pn-ex .jr-say-ev, .pn-group .jr-say-ev{ grid-column:1 / -1; }
}

/* --- Warum-Layer ---------------------------------------------------------- */
/* Steht unter der Uebung und tritt zurueck: die Begruendung soll den Blick
   nicht vom Gewicht abziehen, das gleich gehoben wird. Farbe bekommt nur, was
   eine Warnung ist. */
.wy-list{ display:grid; gap:3px; margin:7px 0 0; padding:0; list-style:none; }
.wy{ display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; font-size:12px; }
.wy-text{ font-weight:600; color:var(--athlera-silver); }
.wy-ev{ color:var(--athlera-faint); }
.wy.is-warn .wy-text{ color:var(--athlera-warn); }
.wy.is-bad .wy-text{ color:var(--athlera-bad); }
.wy.is-good .wy-text{ color:var(--athlera-good); }

/* --- Erfassungsgrad ------------------------------------------------------- */
/* Der Balken ist bewusst schmal und einfarbig: er soll die Groessenordnung
   zeigen, nicht bewerten. Rot waere hier falsch — wer ohne RIR loggt, macht
   nichts falsch, er bekommt nur keine Aufwandsaussage. */
.cv-statement{ margin:12px 0 0; font-size:13.5px; font-weight:600; }
.cv-statement.is-thin{ color:var(--athlera-warn); }
.cv-rows{ display:grid; gap:9px; margin:14px 0 0; padding:0; list-style:none; }
.cv-row{ display:grid; align-items:center; gap:4px 10px; grid-template-columns:minmax(110px,auto) minmax(60px,1fr) auto; }
.cv-bar{ height:6px; border-radius:3px; background:var(--athlera-border-soft); overflow:hidden; }
.cv-bar > span{ display:block; height:100%; background:var(--athlera-silver); }
.cv-row.is-thin .cv-bar > span{ background:var(--athlera-warn); }
.cv-pct{ font-size:13px; font-weight:700; }
.cv-row .jr-say-ev{ grid-column:1 / -1; }
@media (max-width:640px){
.cv-bar{ grid-column:1 / -1; }
}

/* --- Wettkampf-Realitaetsabgleich ----------------------------------------- */
/* Nur der ambitionierte Fall bekommt eine Kante. "gedeckt" und "knapp" sind
   keine Probleme und sollen auch nicht wie welche aussehen. */
.mr-lift{ display:grid; align-items:baseline; gap:4px 12px; grid-template-columns:minmax(110px,auto) auto 1fr; }
.mr-lift.is-ambitious{ border-left:3px solid var(--athlera-warn); padding-left:10px; }
.mr-lift.is-covered .jr-cmp-now{ color:var(--athlera-good); }
.mr-lift .jr-say-ev{ grid-column:1 / -1; }

/* --- Wochenvorschau beim Planen ------------------------------------------- */
/* Die Zahl steht gross, das Ziel klein daneben: beim Tippen aendert sich die
   Zahl, und der Blick soll dort bleiben. Der Hinweis "nicht gespeichert"
   erscheint erst, wenn wirklich etwas abweicht. */
.pv-row{ display:grid; align-items:baseline; gap:4px 10px; grid-template-columns:auto minmax(90px,1fr) auto auto auto; }
.pv-sets{ font-size:15px; font-weight:700; color:var(--m); }
.pv-live{ color:var(--athlera-warn); }
@media (max-width:640px){
.pv-row{ grid-template-columns:auto 1fr auto; }
.pv-target{ grid-column:2 / -1; }
.pv-badge{ grid-column:1 / -1; justify-self:start; }
}

/* --- Wirkung, Selbsteinschaetzung, Ersatzuebung --------------------------- */
/* Gleiche Bauform wie ueberall (.jr-list/.jr-row). Eine Kante bekommt nur, was
   Handlung braucht: die versteckte Regression. "Traegt" ist eine gute
   Nachricht und muss nicht schreien. */
.ef-row{ display:grid; align-items:baseline; gap:4px 10px; grid-template-columns:minmax(150px,1.4fr) auto auto; }
.ef-row.is-hidden_regression{ border-left:3px solid var(--athlera-bad); padding-left:10px; }
.ef-name a{ color:var(--athlera-text); text-decoration:none; font-weight:600; font-size:13.5px; border-bottom:1px solid var(--athlera-border); }
.ef-muscle{ display:block; font-size:11px; color:var(--m); }
.ef-row .jr-say-ev{ grid-column:1 / -1; }
.sv-row{ display:grid; align-items:baseline; gap:4px 10px; grid-template-columns:auto auto 1fr auto; }
.sv-row.is-gap{ border-left:3px solid var(--athlera-warn); padding-left:10px; }
.sv-real{ font-size:12px; color:var(--athlera-muted); }
.sv-gap{ font-size:13px; font-weight:700; color:var(--athlera-warn); }
.sw-row{ display:grid; align-items:baseline; gap:4px 10px; grid-template-columns:minmax(150px,1fr) auto; }
.sw-row.is-known{ border-left:3px solid var(--athlera-good); padding-left:10px; }
.sw-name a{ color:var(--athlera-text); text-decoration:none; font-weight:600; font-size:14px; border-bottom:1px solid var(--athlera-border); }
.sw-badges{ display:flex; flex-wrap:wrap; gap:5px; }
.sw-row .jr-say-ev{ grid-column:1 / -1; }
.wx-swap{ margin-left:8px; font-size:11.5px; color:var(--athlera-faint); text-decoration:none; border-bottom:1px dotted var(--athlera-border); }
.wx-swap:hover{ color:var(--athlera-text); border-bottom-color:var(--athlera-silver); }

/* --- Signale: Ziel und Quittierung ---------------------------------------- */
/* Der Quittier-Knopf tritt bewusst zurueck. Der Regelfall ist, dass ein Signal
   bearbeitet wird — nicht, dass es weggeklickt wird. */
.sg-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.sg-text{ flex:1 1 auto; }
.sg-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--athlera-border); }
.sg-link:hover{ border-bottom-color:currentColor; }
.sg-ack{ flex:0 0 auto; margin:0; }
.sg-ack-btn{ padding:2px 8px; border:1px solid var(--athlera-border); border-radius:999px;
  background:transparent; color:var(--athlera-faint); font-size:11px; cursor:pointer; }
.sg-ack-btn:hover{ border-color:var(--athlera-silver); color:var(--athlera-text); }
.sg-ack-row{ display:grid; align-items:baseline; gap:4px 10px; grid-template-columns:minmax(110px,auto) auto 1fr auto; }
.sg-ack-row.is-expired{ opacity:.55; }
@media (max-width:640px){
.sg-row{ flex-wrap:wrap; }
.sg-ack-row{ grid-template-columns:1fr auto; }
.sg-ack-row .jr-say-ev{ grid-column:1 / -1; }
}

/* --- Vom Homescreen gestartet --------------------------------------------- */
/* Nur im Standalone-Modus. Mit apple-mobile-web-app-status-bar-style
   "black-translucent" laeuft der Inhalt UNTER die Statusleiste — ohne diesen
   Abstand sitzt die Kopfzeile hinter Uhrzeit und Akkuanzeige. Im Browser gilt
   das nicht, dort waere der Abstand nur verschenkter Platz.

   Die seitlichen Abstaende fangen die abgerundeten Ecken und die Notch im
   Querformat ab. */
@media (display-mode: standalone), (display-mode: fullscreen){
  .main-content, .mobile-header{ padding-top:max(12px, env(safe-area-inset-top)); }
  .main-content{ padding-left:max(16px, env(safe-area-inset-left));
                 padding-right:max(16px, env(safe-area-inset-right)); }
  /* Ein vom Homescreen gestarteter Bildschirm hat keinen Zurueck-Knopf des
     Browsers. Die eigene Navigation muss deshalb immer erreichbar bleiben. */
  .bottom-nav{ display:flex; }
}