:root {
      --slate-950: #1a1a18;
      --slate-900: #2C2C2A;
      --slate-800: #444441;
      --slate-600: #5F5E5A;
      --slate-500: #6F6E69;
      --slate-400: #888780;
      --slate-200: #B4B2A9;
      --slate-100: #D3D1C7;
      --slate-50:  #F1EFE8;
      --ember-600: #854F0B;
      --ember-500: #BA7517;
      --ember-400: #EF9F27;
      --ember-100: #FAC775;
      --ember-50:  #FAEEDA;
      --teal-600:  #0F6E56;
      --teal-400:  #1D9E75;
      --teal-50:   #E1F5EE;
      --red-500:   #EF4444;
      --red-400:   #E24B4A;
      --red-50:    #FCEBEB;
      --emerald-500: #10B981;
      --blue-600:  #185FA5;
      --blue-50:   #E6F1FB;
      --cyan-400:  #22d3ee;
      --white:     #ffffff;
      --font-sans: -apple-system, 'Segoe UI', sans-serif;

      /* z-index scale */
      --z-sticky:   1;
      --z-raised:   2;
      --z-drawer:   5;
      --z-fixed:   50;
      --z-dropdown: 100;
      --z-overlay: 200;
      --z-tooltip: 150;
      --z-modal:  1000;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; overflow: hidden; }
    body { font-family: var(--font-sans); background: var(--slate-50); color: var(--slate-800); }

    .hidden { display: none !important; }
    .clickable { cursor: pointer; }
    .pmc-value-title { font-size: 16px; }

    /* ── Utility classes ─────────────────────────────────────────────── */

    /* Buttons — base + variants */
    .btn {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      border: none;
      border-radius: 8px;
      min-height: 44px;
      padding: 0 16px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn--primary { background: var(--slate-900); color: var(--ember-400); }
    .btn--primary:hover { opacity: 0.9; }
    .btn--accent { background: var(--ember-500); color: var(--white); }
    .btn--accent:hover { opacity: 0.9; }
    .btn--accent:disabled { opacity: 0.6; cursor: not-allowed; }
    .btn--secondary {
      background: var(--white);
      color: var(--slate-800);
      border: 1px solid var(--slate-200);
    }
    .btn--secondary:hover { background: var(--slate-50); }
    .btn--ghost { background: none; color: var(--slate-600); }
    .btn--ghost:hover { color: var(--slate-800); }
    .btn--danger { background: var(--red-50); color: var(--red-400); }
    .btn--sm {
      min-height: 36px;
      font-size: 12px;
      border-radius: 4px;
      padding: 0 12px;
    }

    /* Cards — base + variants */
    .card {
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 10px;
    }
    .card--accent { background: var(--ember-50); border-color: var(--ember-100); }
    .card--muted { background: var(--slate-50); border-color: transparent; }

    /* Form inputs */
    .input {
      font-size: 16px;
      padding: 8px 10px;
      border: 0.5px solid var(--slate-100);
      border-radius: 4px;
      background: var(--white);
      color: var(--slate-800);
      font-family: inherit;
      box-sizing: border-box;
      width: 100%;
    }
    .input:focus {
      outline: none;
      border-color: var(--ember-400);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--ember-400) 20%, transparent);
    }
    .input:focus-visible {
      outline: 2px solid var(--ember-400);
      outline-offset: 2px;
    }

    /* Labels — uppercase micro text */
    .label {
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-600);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ── Wordmark ─────────────────────────────────────────────────────
       The "why am i slow?" brand lockup. JetBrains Mono 600 via Google
       Fonts, loaded only on the document that renders the wordmark
       (index.html). `font-display: swap` falls back to system mono
       until the web font arrives, so the layout never blocks. The
       ember question mark is the signature accent — do not recolour. */
    .wordmark {
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-weight: 600;
      letter-spacing: -0.04em;
    }
    .wordmark__mark { color: var(--ember-400); }

    /* Inline wordmark — tab bar, 44px dark chrome. */
    .app-name.wordmark--inline {
      font-size: 15px;
      line-height: 1;
      color: var(--slate-50);
    }

    /* Stacked wordmark — login / splash hero. */
    h2.wordmark--stacked {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 44px;
      line-height: 0.92;
      color: var(--slate-900);
      text-align: left;
      margin: 0 0 16px 0;
    }
    h2.wordmark--stacked .wordmark__line { display: block; }

    /* ── Tab bar ── */
    .tab-bar {
      background: var(--slate-900);
      height: 44px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: var(--z-fixed);
    }
    .tab-bar .app-name {
      margin-right: auto;
    }
    .tab-bar .tabs {
      display: flex;
      gap: 0;
    }
    .tab-bar .tab {
      font-size: 14px;
      font-weight: 500;
      color: var(--slate-400);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 10px 16px;
      cursor: pointer;
      line-height: 22px;
    }
    .tab-bar .tab.active {
      color: var(--ember-400);
      background: rgba(239, 159, 39, 0.1);
      border-bottom-color: transparent;
      border-radius: 4px;
    }
    .tab-bar .tab:hover:not(.active) {
      color: var(--slate-200);
    }
    .beta-marker {
      color: var(--ember-400);
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: var(--slate-800);
      border-radius: 4px;
      padding: 1px 4px;
      margin-left: 4px;
      position: relative;
      top: -1px;
      cursor: help;
    }
    .athlete-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--slate-800);
      border-radius: 20px;
      padding: 4px 12px 4px 8px;
      margin-left: 16px;
      cursor: pointer;
      border: none;
    }
    .athlete-pill .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ember-400);
    }
    .athlete-pill .name {
      font-size: 14px;
      color: var(--slate-200);
      font-weight: 400;
    }
    .athlete-pill .chevron {
      font-size: 12px;
      color: var(--slate-400);
      margin-left: 4px;
    }
    .athlete-menu { position: relative; margin-left: 16px; }
    .athlete-pill { margin-left: 0; }
    .athlete-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 8px;
      min-width: 120px;
      z-index: var(--z-dropdown);
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .athlete-dropdown.hidden {
      display: block !important;
      opacity: 0;
      transform: translateY(-4px) scale(0.97);
      pointer-events: none;
    }
    .athlete-dropdown button,
    .athlete-dropdown a {
      display: block;
      width: 100%;
      padding: 10px 14px;
      border: none;
      background: none;
      font-size: 14px;
      font-family: var(--font-sans);
      color: var(--slate-800);
      cursor: pointer;
      text-align: left;
      border-radius: 8px;
      text-decoration: none;
      box-sizing: border-box;
    }
    .athlete-dropdown button:hover,
    .athlete-dropdown a:hover { background: var(--slate-50); }
    .athlete-dropdown .dropdown-separator {
      border: none;
      border-top: 0.5px solid var(--slate-100);
      margin: 4px 0;
    }
    .athlete-dropdown button + button,
    .athlete-dropdown button + a,
    .athlete-dropdown a + button,
    .athlete-dropdown a + a {
      border-top: 0.5px solid var(--slate-100);
      border-radius: 0 0 8px 8px;
    }
    .athlete-dropdown :first-child {
      border-radius: 8px 8px 0 0;
    }
    .athlete-dropdown :last-child {
      border-radius: 0 0 8px 8px;
    }
    .athlete-dropdown :only-child {
      border-radius: 8px;
    }
    .oura-status-line {
      display: block;
      padding: 10px 14px;
      font-size: 14px;
      color: var(--slate-600);
    }
    .oura-dot { color: var(--ember-400); }

    /* ── Login ── */
    .login-screen {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      min-height: 100dvh;
      padding-top: 44px;
      padding-bottom: env(safe-area-inset-bottom);
      background: var(--slate-50);
    }
    .login-footer {
      margin-top: 16px;
      font-size: 12px;
      color: var(--slate-400);
      text-align: center;
    }
    .login-footer a {
      color: var(--slate-400);
      text-decoration: none;
    }
    .login-footer a:hover { color: var(--slate-600); }
    .login-footer .strava-attribution {
      margin-top: 12px;
    }
    .strava-badge {
      height: 14px;
      width: auto;
      opacity: 0.6;
      transition: opacity 0.15s ease;
    }
    .strava-badge:hover {
      opacity: 1;
    }
    .app-footer {
      text-align: center;
      padding: 12px 0;
      font-size: 12px;
      color: var(--slate-400);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .app-footer a { color: var(--slate-400); text-decoration: none; }
    .app-footer a:hover { color: var(--slate-600); }
    .app-footer-sep { color: var(--slate-300); }
    .login-card {
      background: var(--white);
      border-radius: 12px;
      border: 0.5px solid var(--slate-100);
      padding: 32px;
      width: 100%;
      max-width: 360px;
    }
    .login-card h2 {
      font-size: 22px;
      font-weight: 500;
      color: var(--slate-900);
      text-align: center;
      margin-bottom: 4px;
    }
    .login-card .subtitle {
      font-size: 14px;
      color: var(--slate-400);
      text-align: center;
      margin-bottom: 24px;
    }
    .login-card input,
    .login-card select {
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 12px;
      border: 0.5px solid var(--slate-200);
      border-radius: 6px;
      font-size: 16px;
      font-family: var(--font-sans);
      min-height: 44px;
      color: var(--slate-800);
      background: var(--white);
    }
    .login-card input::placeholder {
      color: var(--slate-400);
    }
    .login-card .login-btn { width: 100%; }
    .login-error {
      color: var(--red-400);
      font-size: 13px;
      margin-top: 8px;
      text-align: center;
    }
    .login-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      font-size: 13px;
      color: var(--slate-400);
    }
    .mini-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid var(--slate-100);
      border-top-color: var(--slate-900);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Error banner ── */
    .error-banner {
      position: fixed;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--red-50);
      border: 0.5px solid var(--red-400);
      color: var(--red-400);
      font-size: 12px;
      padding: 8px 16px;
      border-radius: 8px;
      z-index: var(--z-dropdown);
      max-width: 90%;
    }

    /* ── Inline load-error state (renderLoadError) ── */
    .load-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 32px 16px;
      background: var(--white);
      border: 0.5px solid var(--red-400);
      border-radius: 12px;
      color: var(--slate-600);
      text-align: center;
    }
    .load-error-message {
      margin: 0;
      font-size: 13px;
      color: var(--red-400);
    }
    .load-error-retry {
      appearance: none;
      background: var(--red-400);
      color: var(--white);
      border: none;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      padding: 8px 16px;
      cursor: pointer;
      transition: background-color 150ms ease;
    }
    .load-error-retry:hover { background: var(--red-500); }
    .load-error-retry:focus-visible {
      outline: 2px solid var(--red-400);
      outline-offset: 2px;
    }

    /* ── Re-auth banner (Oura refresh-token expired) ── */
    .reauth-banner {
      position: fixed;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--ember-50);
      border: 0.5px solid var(--ember-400);
      color: var(--ember-600);
      font-size: 12px;
      padding: 8px 16px;
      border-radius: 8px;
      z-index: var(--z-dropdown);
      max-width: 90%;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .reauth-banner-link {
      background: transparent;
      border: none;
      color: var(--ember-600);
      font-size: 12px;
      font-weight: 600;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
    }
    .reauth-banner-link:hover,
    .reauth-banner-link:focus-visible {
      color: var(--ember-500);
    }

    /* ── Sync toast ── */
    .sync-toast {
      position: fixed;
      top: 52px;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 8px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--slate-600);
      z-index: var(--z-dropdown);
      opacity: 1;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .sync-toast.hidden {
      display: flex !important;
      opacity: 0;
      transform: translateX(-50%) translateY(-8px);
      pointer-events: none;
    }
    .sync-toast.synced {
      border-color: var(--ember-400);
      color: var(--ember-600);
    }
    .sync-toast.sync-error {
      border-color: var(--slate-300);
      color: var(--slate-600);
    }

    /* ══════════════════════════════════════════
       CHAT SURFACE
       ══════════════════════════════════════════ */
    .chat-surface {
      display: grid;
      grid-template-columns: 1fr 260px;
      height: calc(100vh - 44px);
      height: calc(100dvh - 44px);
      margin-top: 44px;
    }
    .chat-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .chat-sidebar {
      background: var(--white);
      border-left: 0.5px solid var(--slate-100);
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }

    /* Sidebar — glance cards */
    .glance-card {
      background: var(--slate-50);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
    }
    .glance-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .glance-label { font-weight: 600; }
    .glance-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .glance-badge.green { background: var(--teal-50); color: var(--teal-600); }
    .glance-badge.red { background: var(--red-50); color: var(--red-400); }
    .glance-badge.ember { background: var(--ember-50); color: var(--ember-600); }
    .glance-value {
      font-size: 24px;
      font-weight: 600;
      color: var(--slate-900);
      line-height: 1;
    }
    .glance-form-label {
      font-size: 13px;
      font-weight: 500;
      margin-top: 4px;
      line-height: 1;
    }
    .glance-form-label:empty { display: none; }
    .glance-form-label.form-green { color: var(--teal-600); }
    .glance-form-label.form-ember { color: var(--ember-600); }
    .glance-form-label.form-red { color: var(--red-400); }
    .glance-form-label.form-red-dark { color: var(--red-500); }
    .glance-meta {
      font-size: 11px;
      color: var(--slate-400);
      margin-top: 4px;
      display: flex;
      gap: 8px;
    }
    .glance-sparkline {
      height: 24px;
      margin-top: 6px;
      display: flex;
      align-items: flex-end;
      gap: 2px;
    }
    .glance-sparkline .bar {
      flex: 1;
      border-radius: 2px 2px 0 0;
      min-height: 3px;
      height: var(--h);
      background: var(--bg);
    }
    .glance-sparkline .bar[title] { cursor: default; }
    .sparkline-day-labels {
      display: flex;
      gap: 2px;
    }
    .sparkline-day-labels span {
      flex: 1;
      text-align: center;
      font-size: 9px;
      color: var(--slate-400);
      line-height: 1;
    }

    /* Sidebar — collapsible sections */
    .sb-divider {
      height: 0.5px;
      background: var(--slate-100);
      margin: 4px 0;
    }
    .sb-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 4px;
      cursor: pointer;
      user-select: none;
      border-radius: 4px;
    }
    .sb-section-header:hover { background: var(--slate-50); }
    .sb-section-title-row { display: flex; align-items: center; gap: 6px; }
    .sb-section-title { font-weight: 600; }
    .sb-section-count {
      font-size: 10px;
      color: var(--slate-400);
      background: var(--slate-50);
      padding: 1px 6px;
      border-radius: 8px;
      margin-left: 6px;
    }
    .sb-section-chevron {
      font-size: 10px;
      color: var(--slate-400);
      transition: transform 0.15s;
    }
    .sb-section-chevron.open { transform: rotate(90deg); }
    .sb-section-body {
      overflow: hidden;
    }
    .sb-section-body.collapsed {
      height: 0;
    }

    /* Sidebar — session items */
    .sb-session-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 4px;
      border-radius: 4px;
    }
    .sb-session-item:hover { background: var(--slate-50); }
    .sb-session-day {
      font-size: 11px;
      font-weight: 600;
      color: var(--slate-600);
      min-width: 36px;
    }
    .sb-session-day.today { color: var(--ember-500); }
    .sb-session-name {
      font-size: 12px;
      color: var(--slate-800);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    /* Sidebar — activity items */
    .sb-activity-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 4px;
      border-radius: 4px;
    }
    .sb-activity-item:hover { background: var(--slate-50); }
    .sb-activity-date {
      font-size: 11px;
      color: var(--slate-400);
      min-width: 36px;
    }
    .sb-activity-name {
      font-size: 12px;
      color: var(--slate-800);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .sb-activity-stat {
      font-size: 11px;
      color: var(--slate-400);
      white-space: nowrap;
    }

    /* Sidebar — notes compact */
    .sb-note-item {
      padding: 6px 8px;
      border-radius: 4px;
      border-left: 3px solid var(--slate-200);
      margin-bottom: 4px;
      background: var(--slate-50);
    }
    .sb-note-item.injury { border-left-color: var(--red-400); background: var(--red-50); }
    .sb-note-item.goal { border-left-color: var(--teal-400); background: var(--teal-50); }
    .sb-note-item.race { border-left-color: var(--ember-400); background: var(--ember-50); }
    .sb-note-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--slate-800);
    }
    .sb-note-detail {
      font-size: 11px;
      color: var(--slate-600);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sb-add-note-btn {
      font-size: 12px;
      color: var(--slate-400);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      margin-top: 4px;
    }
    .sb-add-note-btn:hover { color: var(--slate-600); }

    .sb-empty {
      font-size: 12px;
      color: var(--slate-400);
      padding: 4px;
    }

    /* Conversations sidebar entries */
    .sb-conversation-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 10px;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      transition: background-color 120ms ease;
    }
    .sb-conversation-row:hover {
      background-color: var(--slate-50);
    }
    .sb-conversation-row.is-active {
      background-color: var(--ember-50);
      border-left: 3px solid var(--ember-400);
      padding-left: 7px;
    }
    .sb-conversation-row__title {
      font-weight: 500;
      font-size: 13px;
      color: var(--slate-800);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right: 24px;
    }
    .sb-conversation-row__title[contenteditable="true"] {
      outline: 1px solid var(--ember-400);
      border-radius: 2px;
      padding-right: 6px;
    }
    .sb-conversation-row__meta {
      font-size: 11px;
      color: var(--slate-400);
    }
    .sb-conversation-row__delete {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 20px;
      height: 20px;
      background: transparent;
      border: 0;
      color: var(--slate-400);
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 120ms ease, background-color 120ms ease;
    }
    .sb-conversation-row:hover .sb-conversation-row__delete,
    .sb-conversation-row__delete:focus-visible {
      opacity: 1;
    }
    .sb-conversation-row__delete:hover {
      background-color: var(--slate-100);
      color: var(--slate-800);
    }
    .sb-add-conversation-btn {
      width: 100%;
      margin-top: 8px;
      padding: 6px 8px;
      background: transparent;
      border: 1px dashed var(--slate-200);
      border-radius: 4px;
      color: var(--slate-400);
      font-size: 12px;
      cursor: pointer;
      transition: border-color 120ms ease, color 120ms ease;
    }
    .sb-add-conversation-btn:hover {
      border-color: var(--ember-400);
      color: var(--ember-500);
    }

    /* Messages */
    .messages {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 16px;
      background: var(--slate-50);
      position: relative;
    }
    .chat-empty {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--slate-400);
      font-size: 14px;
      pointer-events: none;
    }
    .chat-empty > p {
      margin-top: auto;
      margin-bottom: auto;
    }
    .suggested-prompts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      padding: 0 16px 16px;
      pointer-events: auto;
    }
    .suggested-prompt {
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid var(--slate-100);
      background: var(--white);
      color: var(--slate-600);
      font-family: var(--font-sans);
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .suggested-prompt:hover,
    .suggested-prompt:focus-visible {
      border-color: var(--ember-400);
      color: var(--slate-800);
      outline: none;
    }
    @media (max-width: 799px) {
      .suggested-prompts { justify-content: flex-start; }
    }
    .message {
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      animation: fadeUp 0.2s ease-out both;
    }
    .message.user {
      align-items: flex-end;
    }
    .message .bubble {
      max-width: 78%;
      padding: 10px 14px;
      font-size: 14px;
      line-height: 1.6;
    }
    .message.user .bubble {
      background: var(--slate-900);
      color: var(--slate-50);
      border-radius: 14px 14px 4px 14px;
    }
    .message.agent .bubble {
      background: var(--white);
      color: var(--slate-800);
      border: 0.5px solid var(--slate-100);
      border-radius: 14px 14px 14px 4px;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .message.agent .bubble strong {
      color: var(--ember-500);
      font-weight: 500;
    }
    .message.agent .bubble p { margin-bottom: 8px; }
    .message.agent .bubble p:last-child { margin-bottom: 0; }
    .message.agent .bubble code {
      background: var(--slate-50);
      padding: 2px 4px;
      border-radius: 3px;
      font-size: 13px;
    }
    .message.agent .bubble pre {
      background: var(--slate-50);
      padding: 8px;
      border-radius: 6px;
      overflow-x: auto;
      margin: 8px 0;
    }
    .message.agent .bubble pre code { background: none; padding: 0; }
    .message.agent .bubble ul,
    .message.agent .bubble ol { margin-left: 20px; margin-bottom: 8px; }
    .message.agent .bubble table { border-collapse: collapse; margin: 8px 0; width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .message.agent .bubble th,
    .message.agent .bubble td { border: 1px solid var(--slate-100); padding: 4px 8px; font-size: 13px; white-space: nowrap; }
    .message .timestamp {
      font-size: 11px;
      color: var(--slate-600);
      margin-top: 2px;
      padding: 0 4px;
    }

    /* Date separator */
    .date-separator {
      display: flex;
      justify-content: center;
      margin: 16px 0;
    }
    .date-separator span {
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 11px;
      color: var(--slate-600);
    }

    /* Loading dots */
    .loading-dots {
      display: none;
      margin-bottom: 12px;
      padding: 0 16px;
    }
    .loading-dots.visible {
      display: flex;
    }
    .loading-dots .bubble {
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 14px 14px 14px 4px;
      padding: 12px 18px;
      display: flex;
      gap: 5px;
    }
    .loading-dots .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ember-400);
      animation: dotPulse 1.2s infinite ease-in-out;
    }
    .loading-dots .dot:nth-child(2) { animation-delay: 0.2s; }
    .loading-dots .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes dotPulse {
      0%, 80%, 100% { opacity: 0.6; }
      40% { opacity: 1.0; }
    }
    .loading-dots .tool-label {
      font-size: 14px;
      color: var(--slate-400);
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .loading-dots.has-label .dot { display: none; }
    .loading-dots.has-label .tool-label { display: inline; opacity: 1; }

    /* ── Entry & transition animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .stagger-in { animation: fadeUp 0.25s ease-out both; }

    /* Tab surface cross-fade */
    .data-surface,
    .plan-surface,
    .chat-surface {
      transition: opacity 0.15s ease;
    }
    .surface-entering {
      animation: fadeUp 0.15s ease-out both;
    }

    /* Activity table row hover shift (desktop only) */
    @media (min-width: 640px) {
      .act-table tbody tr { transition: transform 0.15s ease; }
      .act-table tbody tr:hover { transform: translateX(2px); }
    }

    /* Chat input */
    .chat-input-bar {
      background: var(--white);
      border-top: 0.5px solid var(--slate-100);
      padding: 12px 14px;
      padding-bottom: max(12px, env(safe-area-inset-bottom));
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }
    .chat-input-bar input {
      flex: 1;
      background: var(--slate-50);
      border: 0.5px solid var(--slate-200);
      border-radius: 20px;
      min-height: 44px;
      padding: 0 14px;
      font-size: 16px;
      font-family: var(--font-sans);
      color: var(--slate-800);
    }
    .chat-input-bar input::placeholder { color: var(--slate-400); }
    .chat-input-bar input:disabled { opacity: 0.5; pointer-events: none; }

    /* Chat quota bar */
    .chat-quota-bar {
      font-size: 0.72rem;
      color: var(--slate-400);
      text-align: center;
      padding: 2px 0 4px;
      line-height: 1.4;
      min-height: 1.2em;
    }

    .chat-quota-bar.quota-limit-reached {
      color: var(--amber-400, #f59e0b);
      font-weight: 500;
    }

    /* Settings popover (above input bar) */
    .settings-popover {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 0;
      margin-bottom: 8px;
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 8px;
      padding: 12px;
      width: 260px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      z-index: var(--z-dropdown);
    }
    .settings-popover.open { display: block; }
    .settings-popover label { display: block; font-weight: 600; margin-top: 10px; }
    .settings-popover label:first-child { margin-top: 0; }
    .settings-popover select,
    .settings-popover input[type="range"] {
      width: 100%;
      margin-top: 4px;
    }
    .settings-popover select {
      padding: 4px 6px;
      font-size: 13px;
      border: 0.5px solid var(--slate-100);
      border-radius: 4px;
      background: var(--white);
      color: var(--slate-800);
    }
    .model-pill {
      font-size: 11px;
      color: var(--slate-600);
      background: var(--slate-50);
      padding: 4px 8px;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;
      border: none;
      font-family: var(--font-sans);
    }
    .model-pill:hover { background: var(--slate-100); }
    .send-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--slate-900);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .send-btn .arrow {
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid var(--ember-400);
      margin-left: 2px;
    }

    /* ── Sidebar sections ── */
    .note-card {
      border-radius: 0 6px 6px 0;
      padding: 8px 10px;
      margin-bottom: 6px;
    }
    .note-card.race { border-left: 3px solid var(--ember-400); background: var(--ember-50); }
    .note-card.injury { border-left: 3px solid var(--red-400); background: var(--red-50); }
    .note-card.goal { border-left: 3px solid var(--teal-400); background: var(--teal-50); }
    .note-card.other { border-left: 3px solid var(--slate-200); background: var(--slate-50); }
    .note-card { position: relative; }
    .note-card .note-title { font-size: 12px; font-weight: 500; color: var(--slate-900); padding-right: 42px; }
    .note-card .note-sub { font-size: 11px; color: var(--slate-600); margin-top: 2px; }
    .note-card .note-card-actions {
      position: absolute; top: 6px; right: 6px;
      display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s;
    }
    .note-card:hover .note-card-actions { opacity: 1; }
    .note-card .note-card-actions button {
      background: none; border: none; cursor: pointer;
      font-size: 16px; color: var(--slate-400); padding: 2px 4px; line-height: 1;
      position: relative;
    }
    .note-card .note-card-actions button::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .note-card .note-card-actions button:hover { color: var(--slate-800); }
    .notes-empty { font-size: 12px; color: var(--slate-400); text-align: center; padding: 12px 0; }

    /* Add note form */
    .add-note-toggle {
      font-size: 14px;
      color: var(--slate-400);
      border: 0.5px solid var(--slate-100);
      border-radius: 20px;
      padding: 4px 10px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      background: none;
      cursor: pointer;
      margin-top: 4px;
      font-family: var(--font-sans);
    }
    .add-note-toggle:hover { color: var(--slate-600); }
    .add-note-form { margin-top: 8px; }
    .add-note-form select,
    .add-note-form input,
    .add-note-form textarea {
      width: 100%;
      font-size: 14px;
      font-family: var(--font-sans);
      padding: 6px 8px;
      margin-bottom: 6px;
      border: 0.5px solid var(--slate-200);
      border-radius: 4px;
      color: var(--slate-800);
      background: var(--white);
    }
    .add-note-form textarea { resize: vertical; }
    .add-note-form .note-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .add-note-form .save-note-btn {
      background: var(--slate-900);
      color: var(--ember-400);
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
      font-family: var(--font-sans);
    }
    .add-note-form .cancel-note {
      font-size: 14px;
      color: var(--slate-400);
      cursor: pointer;
      background: none;
      border: none;
      font-family: var(--font-sans);
    }


    .settings-range-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .settings-range-val {
      font-size: 11px;
      color: var(--slate-400);
      min-width: 48px;
      text-align: right;
    }
    .style-pills {
      display: flex;
      gap: 4px;
    }
    .style-pill {
      flex: 1;
      padding: 5px 0;
      text-align: center;
      font-size: 12px;
      border: 1px solid var(--slate-200);
      border-radius: 12px;
      background: none;
      color: var(--slate-400);
      cursor: pointer;
    }
    .style-pill.active {
      border-color: var(--ember-400);
      color: var(--ember-400);
      font-weight: 500;
    }

    /* System note in chat */
    .system-note {
      text-align: center;
      font-size: 11px;
      color: var(--slate-400);
      padding: 6px 8px;
      margin: 2px 0;
      background: var(--slate-50);
      border-radius: 6px;
    }

    /* Mobile toggle row (notes + stats pills side by side) */
    .mobile-toggle-row {
      display: none;
      position: absolute;
      top: 8px;
      left: 12px;
      right: 12px;
      z-index: var(--z-drawer);
      gap: 8px;
    }
    .mobile-toggle-row button {
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 20px;
      padding: 10px 14px;
      font-size: 14px;
      min-height: 44px;
      color: var(--slate-400);
      cursor: pointer;
      font-family: var(--font-sans);
    }
    .mobile-toggle-row button .chevron {
      display: inline-block;
      transition: transform 0.2s;
      font-size: 10px;
      margin-left: 2px;
    }
    .mobile-toggle-row button.open .chevron { transform: rotate(180deg); }

    /* Mobile drawers — both use same slide-down pattern */
    .mobile-drawer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--slate-900);
      border-radius: 0 0 10px 10px;
      padding: 56px 16px 12px;
      z-index: calc(var(--z-drawer) - 1);
      transform: translateY(-100%);
      transition: transform 0.25s ease;
      pointer-events: none;
    }
    .mobile-drawer.visible { transform: translateY(0); pointer-events: auto; }

    /* Notes drawer — light theme (matches card/modal surfaces) */
    .notes-drawer {
      background: var(--white);
      max-height: 60vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .notes-drawer .note-card { background: var(--slate-50); }
    .notes-drawer .note-card.race { border-left-color: var(--ember-400); background: var(--ember-50); }
    .notes-drawer .note-card.injury { border-left-color: var(--red-400); background: var(--red-50); }
    .notes-drawer .note-card.goal { border-left-color: var(--teal-400); background: var(--teal-50); }
    .notes-drawer .note-card .note-title { color: var(--slate-900); }
    .notes-drawer .note-card .note-sub { color: var(--slate-600); }
    .notes-drawer .note-card .note-card-actions { opacity: 1; }
    .notes-drawer .note-card .note-card-actions button { color: var(--slate-400); font-size: 20px; padding: 4px 6px; }
    .notes-drawer .note-card .note-card-actions button:hover { color: var(--slate-800); }
    .notes-drawer .notes-empty { color: var(--slate-400); }
    .notes-drawer .add-note-toggle {
      color: var(--slate-600);
      border-color: var(--slate-200);
    }
    .notes-drawer .add-note-toggle:hover { color: var(--slate-800); }
    .notes-drawer .add-note-form select,
    .notes-drawer .add-note-form input,
    .notes-drawer .add-note-form textarea {
      background: var(--white);
      border-color: var(--slate-200);
      color: var(--slate-800);
    }
    .notes-drawer .add-note-form .save-note-btn {
      background: var(--ember-500);
      color: var(--white);
    }
    .notes-drawer .add-note-form .cancel-note { color: var(--slate-600); }

    /* ══════════════════════════════════════════
       DATA SURFACE
       ══════════════════════════════════════════ */
    .data-surface {
      padding: 16px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      overflow-y: auto;
      height: calc(100vh - 44px);
      height: calc(100dvh - 44px);
      margin-top: 44px;
      background: var(--slate-50);
    }

    /* Data tab error / stale-data banner */
    .data-error-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--red-50);
      border: 0.5px solid var(--red-400);
      color: var(--red-400);
      font-size: 12px;
      padding: 8px 16px;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .data-error-banner.hidden { display: none; }
    .data-error-banner .retry-link {
      background: none;
      border: none;
      color: var(--red-400);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      font-family: var(--font-sans);
    }
    .data-error-banner .retry-link::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .data-error-banner .retry-link { position: relative; }

    /* Delta badges */
    .sc-badge {
      font-size: 11px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 99px;
      white-space: nowrap;
    }
    .sc-badge-green { color: #16a34a; background: rgba(22,163,74,0.08); }
    .sc-badge-red   { color: #dc2626; background: rgba(220,38,38,0.08); }
    .sc-badge-ember { color: var(--ember-400); background: rgba(224,122,48,0.08); }

    /* Sparkline area in card */
    .sc-sparkline { width: 100%; height: 48px; display: block; }
    .sc-spark-fill { stroke: none; }
    .sc-spark-line { fill: none; stroke-width: 2; }

    .sc-pop-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 20px;
    }
    .sc-pop-label { letter-spacing: 0.04em; margin-bottom: 2px; }
    .sc-pop-value {
      font-size: 18px;
      font-weight: 500;
      color: var(--slate-800);
    }
    .sc-pop-value .sc-pop-unit {
      font-size: 12px;
      color: var(--slate-400);
      font-weight: 400;
    }
    .sc-pop-divider {
      border: none;
      border-top: 1px solid var(--slate-100);
      margin: 12px 0 10px;
    }

    /* Day-by-day rows in Weekly Load popover */
    .sc-day-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
    }
    .sc-day-row:last-child { margin-bottom: 0; }
    .sc-day-label { font-size: 11px; color: var(--slate-400); width: 32px; }
    .sc-day-track {
      flex: 1;
      background: rgba(0,0,0,0.03);
      border-radius: 3px;
      height: 14px;
      overflow: hidden;
    }
    .sc-day-fill {
      height: 100%;
      background: var(--ember-400);
      border-radius: 3px;
      opacity: 0.7;
    }
    .sc-day-val {
      font-size: 12px;
      color: var(--slate-900);
      font-weight: 500;
      width: 28px;
      text-align: right;
    }
    .sc-day-empty {
      flex: 1;
      height: 14px;
      border: 1px dashed rgba(0,0,0,0.08);
      border-radius: 3px;
    }

    /* Sleep stages bar in popover */
    .sc-stages-bar {
      display: flex;
      height: 10px;
      border-radius: 5px;
      overflow: hidden;
      gap: 1px;
    }
    .sc-stages-legend {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--slate-400);
      margin-top: 4px;
    }

    /* --- Recovery (Oura) colours --- */
    .metric-value.readiness { color: #22c55e; }
    .metric-value.sleep-score { color: #7c3aed; }
    .spark-fill-green { fill: #dcfce7; }
    .spark-line-green { fill: none; stroke: #22c55e; stroke-width: 1.5; }
    .spark-dot-green { fill: #22c55e; }
    .spark-fill-purple { fill: #ede9fe; }
    .spark-line-purple { fill: none; stroke: #7c3aed; stroke-width: 1.5; }
    .spark-dot-purple { fill: #7c3aed; }
    .detail-sparkline {
      display: inline-flex;
      flex-direction: column;
      gap: 2px;
    }
    .detail-sparkline .spark-wrap {
      width: 80px;
      height: 24px;
    }
    .detail-sparkline .spark-wrap svg { width: 100%; height: 100%; }
    /* Sleep stage bar */
    .sleep-bar-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 140px;
    }
    .sleep-bar {
      display: flex;
      height: 6px;
      border-radius: 3px;
      overflow: hidden;
    }
    .sleep-bar .sb-deep { background: #4338ca; }
    .sleep-bar .sb-rem { background: #7c3aed; }
    .sleep-bar .sb-light { background: #a78bfa; }
    .sleep-bar .sb-awake { background: var(--slate-200); }
    .sleep-bar-legend {
      display: flex;
      gap: 10px;
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      color: var(--slate-600);
    }
    .sleep-bar-legend span::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 3px;
      vertical-align: middle;
    }
    .sleep-bar-legend .sb-deep::before { background: #4338ca; }
    .sleep-bar-legend .sb-rem::before { background: #7c3aed; }
    .sleep-bar-legend .sb-light::before { background: #a78bfa; }
    .sleep-bar-legend .sb-awake::before { background: var(--slate-200); }
    /* Daily TSS bar chart */
    .daily-tss {
      display: flex;
      gap: 6px;
      align-items: flex-end;
    }
    .daily-tss-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 28px;
    }
    .daily-tss-bar .bar {
      width: 16px;
      background: var(--ember-100);
      border-radius: 2px 2px 0 0;
      min-height: 2px;
    }
    .daily-tss-bar .bar.today { background: var(--ember-400); }
    .daily-tss-bar .day-label {
      font-size: 9px;
      color: var(--slate-400);
      text-transform: uppercase;
    }
    .daily-tss-bar .tss-label {
      font-size: 9px;
      font-variant-numeric: tabular-nums;
      color: var(--slate-600);
    }

    /* ── Thresholds drawer ── */
    .thresholds-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: var(--z-overlay);
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .thresholds-overlay.visible { opacity: 1; pointer-events: auto; }
    .thresholds-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 340px; max-width: 90vw;
      background: var(--white);
      border-left: 0.5px solid var(--slate-100);
      z-index: var(--z-modal);
      transform: translateX(100%);
      transition: transform 0.25s ease;
      display: flex; flex-direction: column;
      overflow-y: auto;
    }
    .thresholds-drawer.visible { transform: translateX(0); }
    .thresholds-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 20px 10px;
      border-bottom: 0.5px solid var(--slate-100);
      flex-shrink: 0;
    }
    .thresholds-drawer-header h3 {
      font-size: 15px; font-weight: 500; color: var(--slate-900); margin: 0;
    }
    .thresholds-drawer-close {
      background: none; border: none; font-size: 20px;
      color: var(--slate-400); cursor: pointer; padding: 4px;
      line-height: 1; position: relative;
    }
    .thresholds-drawer-close::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .thresholds-drawer-body {
      padding: 16px 20px; flex: 1; overflow-y: auto;
    }

    /* ── Races drawer ── */
    /* Hide mobile-only races sheet at desktop — styled in @media (max-width: 639px) */
    .races-sheet, .races-sheet-overlay { display: none; }
    .races-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.3);
      opacity: 0; pointer-events: none;
      z-index: var(--z-overlay);
      transition: opacity 0.2s ease;
    }
    .races-overlay.visible { opacity: 1; pointer-events: auto; }
    .races-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 360px; max-width: 90vw;
      background: var(--white);
      box-shadow: -2px 0 12px rgba(0,0,0,0.12);
      transform: translateX(100%);
      transition: transform 0.25s ease;
      z-index: calc(var(--z-overlay) + 1);
      display: flex; flex-direction: column;
      overflow-y: auto;
    }
    .races-drawer.visible { transform: translateX(0); }
    .races-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 20px 10px;
      border-bottom: 1px solid var(--slate-100);
      flex-shrink: 0;
    }
    .races-drawer-header h3 {
      font-size: 15px; font-weight: 500; color: var(--slate-900); margin: 0;
    }
    .races-drawer-header-actions {
      display: flex; align-items: center; gap: 8px;
    }
    .races-drawer-close {
      background: none; border: none; font-size: 20px;
      color: var(--slate-400); cursor: pointer; padding: 4px;
      line-height: 1; position: relative;
    }
    .races-drawer-close::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .races-drawer-body {
      padding: 16px 20px; flex: 1; overflow-y: auto;
    }
    .race-list-section { margin-bottom: 24px; }
    .race-list-section-heading {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--slate-400);
      margin: 0 0 10px;
    }
    .race-list-card {
      border: 1px solid var(--slate-100);
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 8px;
      background: var(--white);
    }
    .race-list-card-row1 {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 4px;
    }
    .race-list-card-name {
      font-size: 13px; font-weight: 500; color: var(--slate-900);
      flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .race-list-card-edit {
      flex-shrink: 0;
      background: none; border: 1px solid var(--slate-200);
      border-radius: 5px; padding: 2px 8px;
      font-size: 12px; color: var(--slate-600); cursor: pointer;
    }
    .race-list-card-edit:hover { background: var(--slate-50); }
    .race-list-card-meta {
      font-size: 12px; color: var(--slate-500);
    }
    .race-list-empty {
      font-size: 13px; color: var(--slate-400); padding: 4px 0;
    }

    /* ── Pipeline settings drawer (per-athlete pipeline toggles) ── */
    .pipeline-settings-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: var(--z-overlay);
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .pipeline-settings-overlay.visible { opacity: 1; pointer-events: auto; }
    .pipeline-settings-drawer {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 340px; max-width: 90vw;
      background: var(--white);
      border-left: 0.5px solid var(--slate-100);
      z-index: var(--z-modal);
      transform: translateX(100%);
      visibility: hidden;
      transition: transform 0.25s ease, visibility 0s linear 0.25s;
      display: flex; flex-direction: column;
      overflow-y: auto;
    }
    .pipeline-settings-drawer.visible {
      transform: translateX(0); visibility: visible;
      transition: transform 0.25s ease, visibility 0s linear 0s;
    }
    .pipeline-settings-drawer-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 20px 10px;
      border-bottom: 0.5px solid var(--slate-100);
      flex-shrink: 0;
    }
    .pipeline-settings-drawer-header h3 {
      font-size: 15px; font-weight: 500; color: var(--slate-900); margin: 0;
    }
    .pipeline-settings-drawer-close {
      background: none; border: none; font-size: 20px;
      color: var(--slate-400); cursor: pointer; padding: 4px;
      line-height: 1; position: relative;
    }
    .pipeline-settings-drawer-close::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .pipeline-settings-drawer-body {
      padding: 4px 20px 16px; flex: 1; overflow-y: auto;
    }
    .pipeline-settings-sheet-inner {
      flex: 1;
      overflow-y: auto;
      padding: 0 4px 16px;
    }
    .pipeline-settings-resync {
      padding: 12px 0 12px;
      border-bottom: 0.5px solid var(--slate-100);
    }
    .pipeline-settings-resync-btn {
      width: 100%;
      box-sizing: border-box;
    }
    .pipeline-settings-toggles {
      padding-top: 4px;
    }
    .pipeline-settings-subheading {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--slate-400);
      margin: 20px 0 10px;
      padding-top: 8px;
      border-top: 0.5px solid var(--slate-100);
    }
    .pipeline-settings-connections {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 8px;
    }
    .pipeline-settings-connections .btn {
      width: 100%;
      box-sizing: border-box;
      text-align: center;
    }
    .pipeline-settings-connections .oura-status-line {
      padding: 8px 0;
      margin: 0;
    }
    .pipeline-settings-oura-connect,
    .pipeline-settings-oura-status {
      margin-top: 12px;
    }
    .setting-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 14px 0; border-bottom: 0.5px solid var(--slate-100); gap: 16px;
    }
    .setting-row:last-of-type { border-bottom: none; }
    .setting-info { flex: 1; min-width: 0; }
    .setting-name { font-size: 14px; font-weight: 500; color: var(--slate-900); margin-bottom: 2px; }
    .setting-desc { font-size: 12px; color: var(--slate-400); line-height: 1.4; }
    .setting-toggle {
      flex-shrink: 0; width: 40px; height: 22px;
      border-radius: 11px; border: none; cursor: pointer;
      position: relative; background: var(--ember-400);
      transition: background 0.15s; margin-top: 1px;
    }
    .setting-toggle[aria-checked="false"] { background: var(--slate-200); }
    .setting-toggle::after {
      content: ''; position: absolute;
      top: 3px; right: 3px;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--white);
      transition: transform 0.15s, right 0.15s, left 0.15s; /* audit-ok: 16px toggle knob, isolated element, no layout thrash */
    }
    .setting-toggle[aria-checked="false"]::after { right: auto; left: 3px; }
    .settings-forward-notice {
      margin-top: 16px; padding: 10px 12px;
      background: var(--ember-50); border: 0.5px solid var(--ember-100);
      border-radius: 6px; font-size: 12px; color: var(--ember-600); line-height: 1.4;
    }
    @media (prefers-reduced-motion: reduce) {
      .pipeline-settings-drawer, .pipeline-settings-overlay,
      .pipeline-settings-sheet, .pipeline-settings-sheet-overlay,
      .setting-toggle, .setting-toggle::after { transition: none; }
    }

    .threshold-card {
      background: var(--slate-50); border: 0.5px solid var(--slate-100);
      border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
    }
    .threshold-card-header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .threshold-label { margin: 0; }
    .threshold-value {
      font-size: 18px; font-weight: 500; color: var(--slate-900);
      margin-top: 4px; display: flex; align-items: baseline; gap: 4px;
    }
    .threshold-unit { font-size: 12px; color: var(--slate-600); font-weight: 400; }
    .threshold-date { font-size: 11px; color: var(--slate-600); margin-top: 2px; }
    .threshold-empty { color: var(--slate-600); font-size: 14px; font-style: italic; margin-top: 4px; }
    .threshold-card--wide { /* no special width in drawer */ }
    .threshold-value--sm { font-size: 14px; }
    .threshold-edit-btn {
      background: none; border: none; color: var(--slate-400);
      cursor: pointer; font-size: 16px; padding: 0; margin-left: auto;
      position: relative;
    }
    .threshold-edit-btn::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .threshold-edit-btn:hover { color: var(--ember-400); }
    .threshold-value--clickable {
      cursor: pointer;
      border-bottom: 1px dashed var(--slate-400);
      display: inline-flex;
    }
    .threshold-value--clickable:hover { border-bottom-color: var(--ember-400); }
    .threshold-history {
      margin-top: 12px; padding-top: 10px;
      border-top: 0.5px solid var(--slate-100);
    }
    .threshold-step-chart { width: 100%; height: 72px; display: block; }
    .threshold-history-empty {
      font-size: 12px; color: var(--slate-400); font-style: italic;
    }
    .threshold-history-loading {
      font-size: 12px; color: var(--slate-600);
    }
    .threshold-edit-form {
      margin-top: 8px;
    }
    .threshold-edit-actions {
      display: flex; gap: 8px; margin-top: 8px;
    }
    .threshold-btn-save:disabled {
      opacity: 0.6; cursor: not-allowed;
    }
    .threshold-btn-cancel {
      background: var(--slate-50); color: var(--slate-800);
    }
    .threshold-zones-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      margin-top: 8px;
    }
    .threshold-zones-grid label { display: block; margin-bottom: 4px; }

    /* Tooltips */
    .has-tooltip {
      cursor: help;
      text-decoration: underline dotted var(--slate-200);
      text-underline-offset: 2px;
    }
    #tooltip-el {
      position: fixed;
      background: var(--slate-900);
      color: var(--slate-50);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      padding: 6px 10px;
      border-radius: 6px;
      white-space: normal;
      max-width: 240px;
      width: max-content;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
      z-index: var(--z-modal);
    }
    #tooltip-el.visible { opacity: 1; }
    #tooltip-el.inverted {
      background: var(--slate-50);
      color: var(--slate-900);
    }

    /* Sparkline */
    .sparkline-wrap { margin-top: 4px; height: 28px; }
    .sparkline-wrap svg { display: block; width: 100%; height: 100%; }
    .sparkline-wrap .spark-fill { fill: var(--ember-50); }
    .sparkline-wrap .spark-line { fill: none; stroke: var(--ember-400); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
    .sparkline-wrap .spark-dot { fill: var(--ember-400); }
    @media (max-width: 639px) {
      .sparkline-wrap { height: 22px; }
    }

    /* Phase progress bar */
    /* ── Plan tab ── */
    .plan-surface {
      padding: 20px;
      padding-bottom: max(20px, env(safe-area-inset-bottom));
      max-width: 1280px;
      margin: 0 auto;
      margin-top: 44px;
      overflow-y: auto;
      height: calc(100vh - 44px);
      height: calc(100dvh - 44px);
      background: var(--slate-50);
    }
    .plan-header-cards {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }
    .plan-header-cards .pmc-card {
      flex: 1;
      padding: 12px 14px;
    }
    .plan-header-cards .pmc-label {
      font-size: 11px;
      color: var(--slate-600);
    }
    .plan-header-cards .pmc-value {
      font-size: 22px;
      font-weight: 500;
      color: var(--slate-900);
      margin-top: 2px;
    }
    .plan-header-cards .pmc-card.accent .pmc-value { color: var(--ember-400); }
    .plan-header-cards .pmc-delta {
      font-size: 11px;
      color: var(--slate-600);
      margin-top: 2px;
    }
    .plan-header-cards .pmc-delta .positive { color: var(--ember-500); }
    .plan-header-cards .pmc-delta .negative { color: var(--red-400); }
    .plan-empty {
      text-align: center;
      padding: 80px 20px;
      color: var(--slate-400);
      font-size: 14px;
    }
    .plan-empty-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--slate-600);
      margin-bottom: 8px;
    }
    .phase-pill {
      display: inline-block;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 10px;
      border-radius: 10px;
    }
    .phase-pill.base { background: var(--slate-200); color: var(--slate-600); }
    .phase-pill.build { background: var(--ember-50); color: var(--ember-600); }
    .phase-pill.peak { background: var(--ember-100); color: var(--ember-600); }
    .phase-pill.taper { background: var(--teal-50); color: var(--teal-600); }
    .phase-pill.recovery { background: var(--slate-50); color: var(--slate-400); border: 1px solid var(--slate-200); }
    .phase-pill.test { background: var(--blue-50); color: var(--blue-600); }
    .phase-pill.race { background: var(--red-50); color: var(--red-400); }

    /* Plan week table */
    .plan-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .plan-table thead th {
      background: var(--slate-50);
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-600);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 10px 12px;
      text-align: left;
    }
    .plan-table thead th.num { text-align: right; }
    .plan-table tbody tr { border-bottom: 0.5px solid var(--slate-100); }
    .plan-table tbody tr:hover { background: var(--slate-50); }
    .plan-table tbody td {
      padding: 10px 12px;
      font-size: 13px;
      color: var(--slate-800);
      vertical-align: middle;
    }
    .plan-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }

    /* Current week highlight */
    .plan-row-current {
      border-bottom: 2px solid var(--ember-400) !important;
      background: rgba(250, 238, 218, 0.25);
    }
    .plan-row-current:hover { background: rgba(250, 238, 218, 0.35); }
    .now-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 500;
      color: var(--ember-500);
      background: var(--ember-50);
      padding: 1px 6px;
      border-radius: 8px;
      margin-left: 6px;
      letter-spacing: 0.05em;
    }

    /* Future week muting */
    .plan-row-future td { color: var(--slate-400); }
    .plan-row-future .phase-pill { opacity: 0.6; }

    /* Compliance colours */
    .compliance-good { color: var(--teal-600); font-weight: 500; }
    .compliance-ok { color: var(--ember-500); font-weight: 500; }
    .compliance-low { color: var(--red-400); font-weight: 500; }
    .compliance-in-progress { color: var(--slate-600); font-weight: 500; }

    /* TSS progress bars (desktop only) */
    .tss-bar {
      margin-top: 4px;
      height: 3px;
      background: var(--slate-100);
      border-radius: 1.5px;
      overflow: hidden;
    }
    .tss-bar-fill {
      height: 100%;
      width: var(--w);
      border-radius: 1.5px;
      transform-origin: left center;
      animation: tss-bar-grow 0.4s ease-out both;
    }
    .tss-bar-fill.compliance-good { background: var(--teal-600); }
    .tss-bar-fill.compliance-ok { background: var(--ember-500); }
    .tss-bar-fill.compliance-low { background: var(--red-400); }

    @keyframes tss-bar-grow {
      from { transform: scaleX(0); opacity: 0; }
      to { transform: scaleX(1); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tss-bar-fill { animation: none; }
    }

    /* Plan expand-more buttons */
    .plan-expand-row td { padding: 0; text-align: center; background: var(--slate-50); }
    .plan-expand-btn {
      width: 100%;
      padding: 8px 0;
      font-size: 12px;
      color: var(--slate-600);
      border-top: 0.5px dashed var(--slate-200);
      border-bottom: 0.5px dashed var(--slate-200);
    }
    .plan-expand-btn:hover { color: var(--ember-500); }
    .plan-expand-icon { font-size: 14px; font-weight: 500; }

    /* Plan expanded week detail */
    .plan-detail-row { display: none; }
    .plan-detail-row.visible { display: table-row; }
    .plan-detail-row > td {
      background: var(--slate-50);
      padding: 12px 14px 12px 24px !important;
      border-bottom: 0.5px solid var(--slate-100);
    }
    .plan-detail-footer {
      font-size: 12px;
      color: var(--slate-400);
      padding-top: 6px;
      border-top: 0.5px solid var(--slate-100);
    }
    .plan-detail-border-base { border-left: 3px solid var(--slate-200); padding-left: 12px; }
    .plan-detail-border-build { border-left: 3px solid var(--ember-400); padding-left: 12px; }
    .plan-detail-border-peak { border-left: 3px solid var(--ember-100); padding-left: 12px; }
    .plan-detail-border-taper { border-left: 3px solid var(--teal-400); padding-left: 12px; }
    .plan-detail-border-recovery { border-left: 3px solid var(--slate-200); padding-left: 12px; }
    .plan-detail-border-test { border-left: 3px solid var(--blue-600); padding-left: 12px; }
    .plan-detail-border-race { border-left: 3px solid var(--red-400); padding-left: 12px; }
    .plan-detail-donuts { margin-bottom: 16px; }
    .plan-detail-notes-header {
      font-size: 11px;
      text-transform: uppercase;
      color: var(--slate-400);
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .plan-detail-link { font-size: 12px; margin-top: 12px; }
    .plan-detail-link a { color: var(--ember-600); text-decoration: none; border-bottom: 1px solid var(--ember-100); }
    .plan-detail-link a:hover { border-bottom-color: var(--ember-400); }

    /* ── Calendar strip ── */
    .plan-calendar-strip {
        display: flex;
        gap: 3px;
        margin-top: 4px;
    }

    .plan-day-col {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .plan-day-header {
        text-align: center;
        font-size: 11px;
        font-weight: 500;
        color: var(--slate-400);
        padding: 2px 0;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .plan-day-cell {
        background: var(--white);
        border: 0.5px solid var(--slate-100);
        border-radius: 6px;
        padding: 5px;
        min-height: 56px;
        cursor: pointer;
    }

    .plan-day-cell:hover {
        border-color: var(--slate-200);
    }

    .plan-day-cell.rest {
        background: var(--slate-25, #fafafa);
    }

    .plan-day-col.today .plan-day-header {
        color: var(--ember-500);
        font-weight: 500;
    }

    .plan-day-col.today .plan-day-cell {
        border-color: var(--ember-400);
        background: var(--ember-50);
    }

    .plan-day-list .day-card.today {
        border-color: var(--ember-400);
        background: var(--ember-50);
    }

    .plan-day-list .day-card.today .day-card-header {
        color: var(--ember-500);
    }

    /* ── Badge-driven session slot ── */
    .session-slot {
        position: relative;
        border-radius: 4px;
        padding: 4px 20px 4px 6px;
        margin-bottom: 3px;
        background: var(--slate-25, #fafafa);
    }

    .session-slot.completed {
        border-left: 3px solid var(--teal-400);
    }

    .session-slot.pending {
        border-left: 3px solid var(--amber-400, #f59e0b);
    }

    .session-slot.missed {
        border-left: 3px solid var(--red-400);
        opacity: 0.7;
    }

    .session-slot.unmatched {
        border-left: 3px dashed var(--slate-200);
    }

    .session-slot-header {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 500;
        color: var(--slate-800);
    }

    .session-slot-header .sport-emoji {
        font-size: 12px;
        flex-shrink: 0;
    }

    .session-slot-header .type-pill {
        font-size: 10px;
        background: var(--slate-100);
        color: var(--slate-600);
        padding: 0 5px;
        border-radius: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .session-slot-actual {
        font-size: 10px;
        color: var(--slate-400);
        padding-left: 18px;
        margin-top: 1px;
    }

    .session-desc {
        font-size: 11px;
        color: var(--slate-400);
        padding-left: 18px;
        margin-top: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .session-slot.expanded .session-desc {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        color: var(--slate-600);
    }

    .session-stats {
        font-size: 10px;
        color: var(--slate-400);
        padding-left: 18px;
        margin-top: 2px;
    }

    .session-slot.expanded {
        outline: 1px solid var(--slate-200);
    }

    .session-edit-icon {
        position: absolute;
        bottom: 4px;
        right: 6px;
        font-size: 16px;
        color: var(--slate-400);
        cursor: pointer;
        line-height: 1;
    }

    .session-edit-icon::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: -8px;
        min-width: 44px;
        min-height: 44px;
    }

    .session-edit-icon:hover {
        color: var(--ember-500);
    }

    .session-slot.missed .session-slot-header span:not(.sport-emoji):not(.type-pill):not(.session-edit-icon) {
        text-decoration: line-through;
    }

    /* ── Race markers ── */
    .race-marker {
      background: var(--red-50);
      border-left: 3px solid var(--red-400);
      border-radius: 4px;
      padding: 4px 6px;
      margin-bottom: 3px;
      cursor: pointer;
    }

    .race-marker-header {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 500;
      color: var(--slate-800);
    }

    .race-badge {
      font-size: 10px;
      font-weight: 500;
      padding: 1px 6px;
      border-radius: 8px;
      background: var(--red-400);
      color: white;
    }

    .race-badge.unconfirmed {
      background: var(--slate-200);
      color: var(--slate-600);
    }

    .race-badge.planned {
      background: var(--ember-100);
      color: var(--ember-600);
    }

    .race-marker-detail {
      font-size: 11px;
      color: var(--slate-600);
      margin-top: 2px;
    }

    .race-marker-countdown {
      font-size: 11px;
      font-weight: 500;
      color: var(--red-400);
      margin-top: 1px;
    }

    .race-indicator {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 10px;
      font-weight: 500;
      background: var(--red-50);
      color: var(--red-400);
      padding: 1px 6px;
      border-radius: 8px;
      margin-left: 6px;
    }

    /* ── Stats bar ── */
    .plan-stats-bar {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 8px 12px;
        background: var(--white);
        border-radius: 6px;
        border-left: 3px solid var(--bc, var(--slate-200));
        margin-bottom: 4px;
    }

    .plan-stats-bar .stats-donuts {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .mini-donut-progress {
        animation: mini-donut-sweep 0.6s ease-out both;
    }
    @keyframes mini-donut-sweep {
        from { stroke-dashoffset: 75.4; opacity: 0.4; }
    }
    @media (prefers-reduced-motion: reduce) {
        .mini-donut-progress { animation: none; }
    }

    .plan-stats-bar .stats-sessions {
        font-size: 11px;
        color: var(--slate-600);
    }

    .plan-stats-bar .stats-actions {
        margin-left: auto;
        display: flex;
        gap: 6px;
    }

    .plan-stats-bar .stats-actions button {
        background: var(--white);
        border: 0.5px solid var(--slate-200);
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 11px;
        font-weight: 500;
        font-family: var(--font-sans);
        color: var(--slate-600);
        cursor: pointer;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        min-height: 28px;
    }

    .plan-stats-bar .stats-actions button:hover {
        background: var(--slate-900);
        color: var(--ember-400);
        border-color: var(--slate-900);
    }

    .template-menu {
        position: absolute;
        z-index: var(--z-dropdown);
        background: var(--white);
        border: 0.5px solid var(--slate-200);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        width: min(240px, calc(100vw - 32px));
        max-height: 360px;
        overflow-y: auto;
        right: 0;
        top: 100%;
        margin-top: 4px;
    }

    .template-menu-save {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-bottom: 0.5px solid var(--slate-100);
        cursor: pointer;
    }

    .template-menu-save:hover {
        background: var(--slate-50);
    }

    .template-menu-divider {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--slate-400);
        padding: 6px 14px;
        background: var(--slate-50);
    }

    .template-menu-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-bottom: 0.5px solid var(--slate-100);
        font-size: 12px;
    }

    .template-menu-item:last-child {
        border-bottom: none;
    }

    .template-menu-chevron {
        cursor: pointer;
        font-size: 10px;
        color: var(--slate-400);
        user-select: none;
        position: relative;
    }

    .template-menu-chevron::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    .template-menu-delete {
        margin-left: auto;
        cursor: pointer;
        font-size: 10px;
        color: var(--slate-400);
        position: relative;
    }

    .template-menu-delete:hover {
        color: var(--red-400);
    }

    .template-menu-delete::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
    }

    .template-menu-preview {
        padding: 6px 14px 10px 28px;
        background: var(--slate-50);
        font-size: 10px;
        color: var(--slate-600);
        line-height: 1.8;
    }

    .template-menu-apply {
        padding: 6px 14px 10px;
        background: var(--slate-50);
        text-align: right;
    }

    .template-menu-apply button {
        background: var(--slate-50);
        border: 0.5px solid var(--slate-200);
        border-radius: 4px;
        padding: 3px 12px;
        font-size: 10px;
        color: var(--slate-600);
        cursor: pointer;
    }

    .template-menu-apply button:hover {
        background: var(--slate-100);
        color: var(--slate-800);
    }

    .template-menu-empty {
        font-size: 12px;
        color: var(--slate-400);
        font-style: italic;
        padding: 8px 14px;
    }

    /* ── Dialog entrance animation ── */
    @keyframes dialogIn {
      from { opacity: 0; transform: translateY(8px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes backdropIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* ── Session modal (desktop) ── */
    #sessionModal {
      border: none;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      max-width: 460px;
      width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      padding: 0;
      background: var(--white);
      margin: auto;
    }
    #sessionModal[open] {
      animation: dialogIn 0.2s ease both;
    }
    #sessionModal::backdrop {
      background: rgba(0,0,0,0.3);
      animation: backdropIn 0.2s ease both;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px 10px;
      border-bottom: 0.5px solid var(--slate-100);
    }
    .modal-header h3 {
      font-size: 15px;
      font-weight: 500;
      color: var(--slate-900);
      margin: 0;
    }
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--slate-400);
      cursor: pointer;
      padding: 4px;
      line-height: 1;
      position: relative;
    }
    .modal-close::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }
    .modal-body {
      padding: 16px 20px;
    }
    .modal-field {
      margin-bottom: 14px;
    }
    .modal-field > label { color: var(--slate-400); display: block; margin-bottom: 4px; }
    .modal-field input,
    .modal-field select,
    .modal-field textarea {
      background: var(--slate-50);
    }
    .modal-field textarea {
      resize: vertical;
      min-height: 64px;
      line-height: 1.5;
    }
    .modal-row {
      display: flex;
      gap: 10px;
    }
    .modal-row .modal-field {
      flex: 1;
    }
    .modal-targets-label { color: var(--slate-400); margin-bottom: 6px; }
    .modal-targets .modal-field > label {
      text-transform: none;
      letter-spacing: normal;
    }
    .modal-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      border-top: 0.5px solid var(--slate-100);
    }
    .modal-btn-cancel {
      background: var(--slate-50);
      color: var(--slate-800);
    }
    .modal-btn-save:disabled { opacity: 0.6; }
    .modal-error {
      color: var(--red-400);
      font-size: 12px;
      display: none;
    }

    /* ── Race modal (desktop) — shares .modal-* styles with session modal ── */
    #raceModal {
      border: none;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      max-width: 460px;
      width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      padding: 0;
      background: var(--white);
      margin: auto;
    }
    #raceModal[open] {
      animation: dialogIn 0.2s ease both;
    }
    #raceModal::backdrop {
      background: rgba(0,0,0,0.3);
      animation: backdropIn 0.2s ease both;
    }
    .race-time-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .race-time-row input {
      width: 60px;
      text-align: center;
    }
    .race-time-row span {
      color: var(--slate-400);
      font-size: 13px;
    }
    /* ── Context picker (add session vs add race) ── */
    .context-picker {
      position: absolute;
      background: var(--white);
      border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      padding: 4px;
      z-index: var(--z-dropdown);
      min-width: 150px;
    }
    .context-picker-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
      color: var(--slate-800);
      cursor: pointer;
    }
    .context-picker-item:hover {
      background: var(--slate-50);
    }

    /* ── Drag-and-drop on calendar ── */
    .session-slot[draggable="true"] { cursor: grab; padding-left: 16px; }
    .session-slot[draggable="true"]:active { cursor: grabbing; }
    .session-slot.dragging { opacity: 0.4; }
    .plan-day-cell.drag-over { box-shadow: inset 0 2px 0 var(--ember-400); }

    .session-drag-handle {
        position: absolute;
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        line-height: 1;
        color: var(--slate-200);
        pointer-events: none;
        cursor: grab;
    }

    /* ── Mobile: vertical day list ── */
    .plan-day-list {
        display: none;
        flex-direction: column;
        gap: 4px;
    }

    .plan-day-list .day-card {
        background: var(--white);
        border: 0.5px solid var(--slate-100);
        border-radius: 6px;
        padding: 8px 10px;
    }

    .plan-day-list .day-card-header {
        font-size: 11px;
        font-weight: 500;
        color: var(--slate-600);
        margin-bottom: 4px;
    }

    .plan-day-list .day-card.rest .day-card-header {
        color: var(--slate-200);
    }

    .plan-mobile-add-btn {
        background: var(--white);
        border: 1px dashed var(--slate-200);
        border-radius: 6px;
        padding: 8px 10px;
        text-align: center;
        font-size: 12px;
        color: var(--slate-400);
        cursor: pointer;
        margin-top: 4px;
    }

    /* ── Bottom sheet ── */
    .plan-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        border-top: 0.5px solid var(--slate-200);
        border-radius: 12px 12px 0 0;
        padding: 16px;
        z-index: var(--z-overlay);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .plan-bottom-sheet.visible {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.25s ease, visibility 0s linear 0s;
    }

    .plan-bottom-sheet label {
        font-size: 12px;
        color: var(--slate-600);
        margin-bottom: 4px;
        display: block;
    }

    .plan-bottom-sheet select,
    .plan-bottom-sheet input {
        width: 100%;
        padding: 8px;
        font-size: 16px; /* Prevent iOS zoom */
        border: 0.5px solid var(--slate-200);
        border-radius: 6px;
        margin-bottom: 10px;
        background: var(--slate-50);
    }

    .plan-bottom-sheet .sheet-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }

    .plan-bottom-sheet .sheet-actions button { flex: 1; padding: 10px; border-radius: 6px; }
    .sheet-btn-cancel { background: var(--slate-100); color: var(--slate-600); }
    .stats-separator { border-left: 1px solid var(--slate-200); height: 24px; }

    /* Inline edit */
    .plan-edit-input {
      width: 60px;
      padding: 4px 6px;
      font-size: 14px;
      border: 1px solid var(--slate-200);
      border-radius: 6px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .plan-edit-input:focus { outline: none; border-color: var(--ember-400); }
    .plan-edit-input:focus-visible { outline: 2px solid var(--ember-400); outline-offset: 2px; }
    .plan-edit-select {
      padding: 4px 6px;
      font-size: 14px;
      border: 1px solid var(--slate-200);
      border-radius: 6px;
    }
    .plan-edit-select:focus { outline: none; border-color: var(--ember-400); }
    .plan-edit-select:focus-visible { outline: 2px solid var(--ember-400); outline-offset: 2px; }
    .plan-action-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--slate-400);
      font-size: 16px;
      padding: 4px;
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .plan-action-btn:hover { color: var(--slate-800); }
    .plan-action-btn.save { color: var(--teal-600); }
    .plan-action-btn.save:hover { color: var(--teal-400); }
    .plan-action-btn.cancel { color: var(--red-400); }

    /* Chat plan card */
    .plan-chat-card {
      padding: 12px;
      margin-top: 4px;
    }
    .plan-chat-card-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--slate-900);
      margin-bottom: 8px;
    }
    .plan-chat-card-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .plan-status-badge {
      font-size: 11px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .plan-status-badge.draft { background: var(--ember-50); color: var(--ember-600); }
    .plan-status-badge.active { background: var(--teal-50); color: var(--teal-600); }
    .plan-activate-btn {
      font-size: 14px;
      font-weight: 500;
      color: var(--ember-500);
      background: none;
      border: 1px solid var(--ember-400);
      border-radius: 8px;
      padding: 6px 14px;
      cursor: pointer;
      min-height: 44px;
    }
    .plan-view-link {
      font-size: 14px;
      color: var(--ember-500);
      padding: 10px 0;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    /* Inline progress bar in data tab */
    /* Plan mobile single-week view */
    .plan-mobile { display: none; }
    .plan-mobile-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .plan-mobile-nav button {
      background: none;
      border: 1px solid var(--slate-200);
      border-radius: 8px;
      min-width: 44px;
      min-height: 44px;
      font-size: 16px;
      color: var(--slate-600);
      cursor: pointer;
    }
    .plan-mobile-nav button:disabled { opacity: 0.3; cursor: default; }
    .plan-mobile-nav .plan-mobile-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--slate-800);
    }
    /* Filter row */
    .filter-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 16px;
      position: relative;
      z-index: var(--z-raised);
    }
    .sport-pill {
      background: var(--white);
      color: var(--slate-600);
      border: 0.5px solid var(--slate-200);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      min-height: 44px;
      cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 400;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .sport-pill.active {
      background: var(--slate-900);
      color: var(--ember-400);
      border-color: var(--slate-900);
    }

    /* Sport-pill icons — self-hosted Lucide SVGs masked to inherit the pill
       text colour. No runtime Lucide dependency; the SVGs are static assets
       in api/static/icons/. */
    .sport-pill__icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      background-color: currentColor;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-position: center;
              mask-position: center;
      flex-shrink: 0;
    }
    .sport-pill[data-sport="run"] .sport-pill__icon {
      -webkit-mask-image: url('/static/icons/footprints.svg');
              mask-image: url('/static/icons/footprints.svg');
    }
    .sport-pill[data-sport="ride"] .sport-pill__icon {
      -webkit-mask-image: url('/static/icons/bike.svg');
              mask-image: url('/static/icons/bike.svg');
    }
    .sport-pill[data-sport="swim"] .sport-pill__icon {
      -webkit-mask-image: url('/static/icons/waves.svg');
              mask-image: url('/static/icons/waves.svg');
    }
    .filter-row select {
      height: 36px;
      min-height: 44px;
      border: 0.5px solid var(--slate-200);
      border-radius: 6px;
      padding: 0 8px;
      font-size: 14px;
      font-family: var(--font-sans);
      color: var(--slate-800);
      background: var(--white);
    }
    .date-range {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .date-range .date-sep {
      color: var(--slate-200);
      font-size: 14px;
      user-select: none;
    }
    .date-label {
      display: inline-flex;
      align-items: center;
      gap: 0;
      border: 0.5px solid var(--slate-200);
      border-radius: 6px;
      background: var(--white);
      min-height: 44px;
      overflow: hidden;
    }
    .date-label .date-prefix {
      font-size: 14px;
      font-weight: 500;
      color: var(--slate-400);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0 0 0 10px;
      white-space: nowrap;
    }
    .date-label input[type="date"] {
      border: none;
      outline: none;
      background: transparent;
      height: 36px;
      padding: 0 8px;
      font-size: 14px;
      font-family: var(--font-sans);
      color: var(--slate-800);
      min-width: 0;
    }
    .filter-row .action-btns {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }
    .search-wrap {
      position: relative;
      flex: 0 1 200px;
      min-width: 140px;
    }
    .search-wrap .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      pointer-events: none;
    }
    .search-wrap input[type="search"] {
      width: 100%;
      padding: 6px 10px 6px 30px;
      border: 0.5px solid var(--slate-200);
      border-radius: 20px;
      font-size: 14px;
      font-family: var(--font-sans);
      color: var(--slate-800);
      background: var(--white);
      min-height: 44px;
      box-sizing: border-box;
    }
    .search-wrap input[type="search"]:focus {
      outline: none;
      border-color: var(--ember-400);
    }
    .search-wrap input[type="search"]:focus-visible {
      outline: 2px solid var(--ember-400);
      outline-offset: 2px;
    }
    .pagination-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
    }
    .pagination-btn { border-width: 0.5px; border-color: var(--slate-200); padding: 6px 12px; position: relative; }
    .pagination-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 44px;
      min-height: 44px;
    }
    .pagination-btn:disabled {
      color: var(--slate-400);
      cursor: default;
      opacity: 0.5;
    }
    .pagination-info {
      font-size: 12px;
      font-weight: 500;
      color: var(--slate-600);
    }
    .export-split {
      position: relative;
      display: inline-flex;
    }
    .export-split-main, .export-split-caret {
      background: var(--white);
      border: 0.5px solid var(--slate-200);
      color: var(--slate-600);
      font-size: 14px;
      min-height: 44px;
      cursor: pointer;
      font-family: var(--font-sans);
      display: inline-flex;
      align-items: center;
    }
    .export-split-main {
      padding: 10px 14px;
      border-radius: 20px 0 0 20px;
      gap: 5px;
      min-width: 110px;
      justify-content: center;
      border-right: none;
    }
    .export-split-caret {
      padding: 10px 10px;
      border-radius: 0 20px 20px 0;
      border-left: 1px solid var(--slate-200);
    }
    .export-split-main:hover, .export-split-caret:hover { border-color: var(--slate-400); }
    .export-split-main:hover { border-right: none; }
    .export-split-main .btn-icon { font-size: 13px; opacity: 0.6; }
    .export-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: var(--white);
      border: 0.5px solid var(--slate-200);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      z-index: var(--z-fixed);
      min-width: 190px;
      overflow: hidden;
    }
    .export-dropdown.open { display: block; }
    .export-dropdown button {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 10px 14px;
      background: none;
      border: none;
      color: var(--slate-600);
      font-size: 14px;
      font-family: var(--font-sans);
      cursor: pointer;
    }
    .export-dropdown button:hover { background: var(--slate-50); }
    .export-dropdown .dropdown-sep {
      height: 1px;
      background: var(--slate-100);
      margin: 4px 0;
    }
    .export-dropdown .dropdown-toggle {
      justify-content: space-between;
      white-space: nowrap;
    }
    .export-dropdown .dropdown-toggle .toggle-check {
      font-size: 14px;
      color: var(--ember-500);
    }

    /* Activity table */
    .table-card {
      overflow: hidden;
    }
    .activity-cards { display: none; }
    .act-table {
      width: 100%;
      border-collapse: collapse;
    }
    .act-table thead th {
      background: var(--slate-50);
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-600);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 10px 14px;
      text-align: left;
      cursor: pointer;
    }
    .act-table thead th:last-child,
    .act-table thead th:nth-last-child(2) { text-align: center; width: 40px; }
    .act-table thead th.col-actions-header { text-align: center; cursor: default; }
    .act-table tbody tr { border-bottom: 0.5px solid var(--slate-100); }
    .act-table tbody tr:hover { background: var(--slate-50); }
    .act-table tbody td {
      padding: 10px 14px;
      font-size: 13px;
      color: var(--slate-800);
      vertical-align: middle;
    }
    .act-table .cell-date { font-size: 12px; color: var(--slate-400); white-space: nowrap; }
    .act-table .cell-duration { font-size: 12px; color: var(--slate-400); }
    .act-table .cell-method { font-size: 12px; color: var(--slate-400); }

    /* Sport pills in table */
    .sport-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .sport-badge.ride { background: var(--blue-50); color: var(--blue-600); }
    .sport-badge.run { background: var(--ember-50); color: var(--ember-600); }
    .sport-badge.swim { background: var(--teal-50); color: var(--teal-600); }
    .sport-badge.brick { background: var(--ember-50); color: var(--ember-600); }
    .sport-badge.other { background: var(--slate-50); color: var(--slate-600); }

    /* TSS colouring */
    .tss-high { color: var(--ember-500); font-weight: 500; }
    .tss-normal { color: var(--slate-800); font-weight: 400; }
    .tss-easy { color: var(--slate-400); font-weight: 400; }

    /* IF colouring */
    .if-hard { color: var(--ember-500); }
    .if-tempo { color: var(--ember-500); }
    .if-easy { color: var(--slate-800); }

    /* Expand chevron */
    .expand-chevron {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--slate-400);
      font-size: 16px;
      padding: 4px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: transform 0.2s;
    }
    .expand-chevron:hover { color: var(--slate-800); }
    .expand-chevron.open { transform: rotate(90deg); color: var(--slate-800); }

    /* Detail row */
    .detail-row { display: none; }
    .detail-row.visible { display: table-row; }
    .detail-row > td {
      background: var(--slate-50);
      border-top: 0.5px solid var(--slate-100);
      padding: 12px 14px 12px 28px !important;
      border-bottom: 0.5px solid var(--slate-100);
    }

    /* Detail metrics card */
    .detail-metrics-card {
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 10px;
    }
    .detail-metrics-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .detail-metrics-row + .detail-metrics-row {
      margin-top: 10px;
      align-items: center;
    }
    .dm-item {
      min-width: 60px;
    }
    .dm-label {
      font-size: 10px;
      font-weight: 500;
      color: var(--slate-600);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 1px;
    }
    .dm-value {
      font-size: 14px;
      color: var(--slate-800);
    }
    .dm-value.dm-derived {
      font-size: 13px;
    }
    .dm-unit {
      font-size: 11px;
      color: var(--slate-400);
    }
    .dm-value.dm-bold { font-weight: 500; }
    .dm-value.dm-ember { color: var(--ember-500); font-weight: 500; }
    .dm-peaks-sep {
      border-left: 1px solid var(--slate-100);
      padding-left: 20px;
    }
    .detail-weather {
      margin-top: 9px;
      padding-top: 8px;
      border-top: 1px solid var(--slate-100);
      font-size: 11px;
      color: var(--slate-600);
    }
    /* Section label clarifying that the following row is computed by CoachGPT
       rather than sourced directly from Strava (Strava API terms compliance). */
    .detail-derived-header {
      margin-top: 12px;
      margin-bottom: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--slate-100);
      font-size: 10px;
      font-weight: 500;
      color: var(--slate-600);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* Zone donut — compact inline version */
    .dm-zones {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dm-donut {
      width: var(--w, 38px);
      height: var(--h, 38px);
      background: var(--bg);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }
    .dm-donut::after {
      content: '';
      position: absolute;
      top: 24%; left: 24%;
      width: 52%; height: 52%;
      border-radius: 50%;
      background: var(--white);
    }
    .dm-donut-label {
      font-size: 9px;
      color: var(--slate-600);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .dm-zone-legend {
      font-size: 9px;
      color: var(--slate-600);
      line-height: 1.6;
    }
    .dm-zone-legend .zl-swatch {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 1px;
      margin-right: 3px;
      vertical-align: middle;
      background: var(--bg);
    }

    /* Lap table */
    .lap-table-wrap {
      margin-top: 0;
      background: var(--white);
      border: 0.5px solid var(--slate-100);
      border-radius: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .lap-tbl {
      border-collapse: collapse;
      width: 100%;
      font-size: 12px;
    }
    .lap-tbl th {
      background: var(--slate-50);
      padding: 7px 12px;
      text-align: left;
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-400);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .lap-tbl td {
      padding: 6px 12px;
      border-bottom: 0.5px solid var(--slate-100);
      text-align: right;
      color: var(--slate-800);
      white-space: nowrap;
    }
    .lap-tbl td:first-child { text-align: left; color: var(--slate-400); }

    /* Effort bar in lap table */
    .effort-bar {
      height: 14px;
      border-radius: 3px;
      min-width: 15%;
      width: var(--w);
    }
    .effort-bar.effort-low { background: var(--slate-200); }
    .effort-bar.effort-high { background: linear-gradient(90deg, var(--ember-400), var(--ember-500)); }
    .lap-tbl .effort-cell { text-align: left; width: 24%; }

    /* Swim lap autocorrection indicator — flags laps whose distance was
       snapped to the inferred pool length so users can see when a value
       differs from Strava's original. */
    .lap-tbl .lap-corrected {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-bottom: 1px dotted var(--slate-400);
      cursor: help;
    }
    .lap-adj-badge {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 3px;
      background: var(--ember-50);
      color: var(--ember-600);
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1.3;
    }
    .lap-corrected-note {
      padding: 8px 12px;
      border-top: 0.5px solid var(--slate-100);
      font-size: 11px;
      color: var(--slate-600);
      line-height: 1.5;
    }
    .lap-corrected-note .lap-adj-badge {
      vertical-align: baseline;
    }

    .detail-loading {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--slate-400);
      font-size: 13px;
    }
    .detail-loading .ember-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ember-400);
      animation: dotPulse 1.2s infinite ease-in-out;
    }
    .ember-dot--d1 { animation-delay: 0.2s; }
    .ember-dot--d2 { animation-delay: 0.4s; }
    .detail-loading-label { margin-left: 4px; }

    /* Threshold zone strip — inline list of zone values */
    .zone-strip-item { margin-right: 12px; }

    /* Table state cells (used inside <tr><td colspan=...> rows) */
    .table-loading-cell { padding: 20px; text-align: center; }
    .table-empty-cell {
      padding: 20px;
      text-align: center;
      font-size: 14px;
      color: var(--slate-400);
    }
    .table-error-cell {
      padding: 20px;
      text-align: center;
      color: var(--slate-400);
    }
    .cell-center { text-align: center; }
    .detail-empty {
      color: var(--slate-400);
      font-size: 12px;
    }

    /* Zone donut wrappers (renderZoneDonutsHtml + renderZoneDonutsCard) */
    .dm-zones-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dm-zones-donut-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .zones-donut-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }

    /* Lap row tint — effort-scaled warm background */
    .lap-effort-tinted { background: var(--bg); }
    .row-copy-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--slate-400);
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .row-copy-btn svg { width: 18px; height: 18px; }
    .row-copy-btn:hover { color: var(--slate-800); }
    .row-copy-btn.copied { color: var(--ember-500); }
    /* Strava "View on Strava" text link (Brand Guidelines §3).
       Orange = Strava brand colour #FC5200. Never add an icon back in —
       the guidelines require visible text. */
    .view-on-strava-link {
      color: #FC5200;
      font-weight: 500;
      font-size: 12px;
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      padding: 10px 8px;
      border-radius: 6px;
      transition: background-color 120ms ease;
    }
    .view-on-strava-link:hover,
    .view-on-strava-link:focus-visible { text-decoration: underline; }
    .view-on-strava-link:focus-visible {
      outline: 2px solid var(--ember-400);
      outline-offset: 2px;
    }
    .view-on-strava-link--row { padding: 12px 8px; }
    .view-on-strava-link--hero {
      padding: 6px 8px;
      background: rgba(255,255,255,0.12);
      color: #FC5200;
    }
    .view-on-strava-link--hero:hover { background: rgba(255,255,255,0.2); }
    .view-on-strava-link--card {
      margin-left: auto;
      padding: 4px 0;
      font-size: 11px;
    }

    /* ── Responsive ── */

    /* Plan tab: progressive responsive breakpoints (#244) */
    @media (max-width: 999px) {
        .plan-calendar-strip .session-desc { display: none; }
        .plan-calendar-strip .session-slot.expanded .session-desc { display: block; }
        .plan-calendar-strip .session-slot-header .sport-name { display: none; }
    }
    @media (max-width: 799px) {
        .plan-table-desktop { display: none; }
        .plan-mobile { display: block; }
        .plan-calendar-strip { display: none; }
        .plan-day-list { display: flex; }
        .plan-mobile-add-btn { display: block; }
        .plan-surface { padding: 10px; }
        .tss-bar { display: none; }
    }

    .detail-copy-mobile { display: none; }

    @media (max-width: 639px) {
      .chat-surface {
        grid-template-columns: 1fr;
      }
      .chat-sidebar { display: none; }
      .mobile-toggle-row { display: flex; }
      .messages { padding-top: 60px; }
      /* Data surface mobile */
      .data-surface { padding: 10px; }
      .table-card { display: none; }
      .activity-cards { display: flex; flex-direction: column; gap: 8px; }
      .activity-card { overflow: hidden; }
      .activity-card-body { padding: 12px 14px; cursor: pointer; }
      .activity-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .activity-card-left {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
      }
      .activity-card-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--slate-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .activity-card-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        margin-left: 8px;
      }
      .activity-card-btn {
        background: none;
        border: none;
        color: var(--slate-400);
        padding: 4px;
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
      }
      .activity-card-btn svg { width: 15px; height: 15px; }
      .activity-card-stats {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-top: 8px;
      }
      .activity-card-tss { font-size: 12px; font-weight: 600; margin-right: 4px; }
      .activity-card-date { font-size: 11px; color: var(--slate-400); }
      .activity-card-stat { font-size: 13px; font-weight: 500; color: var(--slate-800); }
      .activity-card-detail { display: none; }
      .activity-card-detail.visible {
        display: block;
        background: var(--slate-50);
        border-top: 0.5px solid var(--slate-100);
        padding: 10px 14px;
      }
      .col-copy { display: none; }
      .row-tappable { cursor: pointer; }
      .detail-copy-mobile {
        display: flex;
        justify-content: flex-start;
        padding: 8px 0 4px;
      }
      .detail-copy-mobile .row-copy-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--slate-500);
      }
      .detail-copy-mobile .row-copy-btn svg { width: 14px; height: 14px; }
      .act-table thead th,
      .act-table tbody td { padding: 8px 10px; }
      .detail-row > td { padding: 10px 10px 10px 16px !important; }
      /* Mobile detail: merge metric rows, stack zones below */
      .detail-metrics-row { gap: 16px; }
      .detail-metrics-row + .detail-metrics-row { margin-top: 8px; }
      /* Stack detail sub-cards vertically on mobile */
      .detail-cards-row { flex-direction: column; }
      .detail-chart-card { min-height: 160px; }
      .dm-peaks-sep { border-left: none; padding-left: 0; }
      .dm-zones { margin-left: 0; margin-top: 8px; width: 100%; }
      .effort-cell { display: none; }
      /* Issue 1: sport pills — prevent short labels becoming circles */
      .sport-pill {
        min-width: 48px;
        padding: 10px 16px;
      }
      /* Issue 3: tighter mobile spacing */
      .filter-row { gap: 6px; margin-bottom: 8px; }
      .filter-row select { flex: 1; min-width: 0; }
      .search-wrap { flex: 1 1 100%; min-width: 0; }
      .pagination-info { font-size: 11px; }
      .filter-row .action-btns { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
      .filter-row .export-split { width: 100%; }
      .filter-row .export-split-main { flex: 1; justify-content: center; }
      /* Date pickers: single row with From/To labels */
      .filter-row .date-range {
        display: flex;
        flex-direction: row;
        gap: 6px;
        width: 100%;
      }
      .filter-row .date-range .date-label {
        flex: 1;
        min-width: 0;
      }
      .filter-row .date-range .date-label .date-prefix {
        font-size: 12px;
        padding: 0 0 0 8px;
      }
      .filter-row .date-range .date-label input[type="date"] {
        width: 100%;
        height: 44px;
        font-size: 14px;
        padding: 0 4px;
      }
      .filter-row .date-range .date-sep {
        display: none;
      }
      /* Bubble max-width */
      .message .bubble { max-width: 88%; }
      /* Sticky date column */
      .act-table thead th:first-child,
      .act-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: var(--z-sticky);
        box-shadow: 1px 0 0 0 var(--slate-100);
      }
      .act-table thead th:first-child { background: var(--slate-50); }
      .act-table tbody td:first-child { background: var(--white); }
      .act-table tbody tr:hover td:first-child { background: var(--slate-50); }
      /* iOS zoom prevention for notes form inputs */
      .notes-drawer .add-note-form select,
      .notes-drawer .add-note-form input,
      .notes-drawer .add-note-form textarea { font-size: 16px; }
      /* Plan tab mobile — below 640px only */
      .plan-header-cards { flex-wrap: wrap; }
      .plan-header-cards .pmc-card { flex: 1 1 calc(50% - 5px); }
      .plan-edit-input { font-size: 16px; width: 56px; }
      .plan-edit-select { font-size: 16px; }
      /* Hide model pill on mobile — mobile-status-bar replaces it */
      .model-pill { display: none; }
      .chat-input-bar { padding-bottom: 12px; }
      /* Mobile session status bar */
      .mobile-status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 14px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        min-height: 44px;
        font-size: 11px;
        border-top: 0.5px solid var(--slate-200);
        cursor: pointer;
        background: var(--white);
      }
      .mobile-status-bar .status-model { color: var(--slate-400); display: flex; align-items: center; gap: 4px; }
      /* Bottom sheet */
      .bottom-sheet-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: var(--z-dropdown);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .bottom-sheet-overlay.visible { opacity: 1; pointer-events: auto; }

      .bottom-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--slate-900);
        border-radius: 12px 12px 0 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        z-index: calc(var(--z-dropdown) + 1);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        max-height: 70vh;
        overflow-y: auto;
      }
      .bottom-sheet.visible { transform: translateY(0); visibility: visible; transition: transform 0.25s ease, visibility 0s linear 0s; }
      .bottom-sheet .drag-handle {
        width: 36px; height: 4px;
        background: var(--slate-600);
        border-radius: 2px;
        margin: 0 auto 12px;
      }
      .bottom-sheet label {
        display: block;
        color: var(--slate-400);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 6px;
        margin-top: 14px;
      }
      .bottom-sheet label:first-of-type { margin-top: 0; }
      .bottom-sheet select {
        width: 100%;
        background: var(--slate-800);
        color: var(--slate-100);
        border: 1px solid var(--slate-600);
        border-radius: 6px;
        padding: 8px;
        font-size: 16px;
      }
      .bottom-sheet input[type="range"] {
        flex: 1;
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 2px;
        background: var(--slate-600);
        outline: none;
      }
      .bottom-sheet input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ember-400);
        cursor: pointer;
      }
      .bottom-sheet input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: none;
        background: var(--ember-400);
        cursor: pointer;
      }
      .bottom-sheet input[type="range"]::-moz-range-track {
        height: 4px;
        border-radius: 2px;
        background: var(--slate-600);
      }
      .bottom-sheet .settings-range-val { color: var(--slate-400); }
      .bottom-sheet .style-pill {
        border-color: var(--slate-600);
        color: var(--slate-400);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bottom-sheet .style-pill.active {
        border-color: var(--ember-400);
        color: var(--ember-400);
      }
      /* Stat-card sheet uses light theme to match popover content */
      #statCardSheet {
        background: var(--white);
        border-top: 1px solid var(--slate-100);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
      }
      #statCardSheet .drag-handle {
        background: var(--slate-200);
      }
    }
    @media (max-width: 639px) {
      /* On mobile, hide the desktop drawer and use a bottom sheet instead */
      .thresholds-overlay { display: none; }
      .thresholds-drawer { display: none; }
      .pipeline-settings-overlay { display: none; }
      .pipeline-settings-drawer { display: none; }
      .pipeline-settings-sheet-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: var(--z-dropdown);
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .pipeline-settings-sheet-overlay.visible { opacity: 1; pointer-events: auto; }
      .pipeline-settings-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--white);
        border-radius: 12px 12px 0 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        z-index: calc(var(--z-dropdown) + 1);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        max-height: 80vh;
        overflow-y: auto;
      }
      .pipeline-settings-sheet.visible {
        transform: translateY(0); visibility: visible;
        transition: transform 0.25s ease, visibility 0s linear 0s;
      }
      .pipeline-settings-sheet .drag-handle {
        width: 36px; height: 4px;
        background: var(--slate-200);
        border-radius: 2px;
        margin: 0 auto 12px;
      }
      .pipeline-settings-sheet-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 12px;
      }
      .pipeline-settings-sheet-header h3 {
        font-size: 15px; font-weight: 500; color: var(--slate-900); margin: 0;
      }
      .pipeline-settings-sheet-close {
        background: none; border: none; font-size: 20px;
        color: var(--slate-400); cursor: pointer; padding: 4px;
        line-height: 1; position: relative;
      }
      .pipeline-settings-sheet-close::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        min-width: 44px; min-height: 44px;
      }
      .thresholds-sheet-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: var(--z-dropdown);
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .thresholds-sheet-overlay.visible { opacity: 1; pointer-events: auto; }
      .thresholds-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--white);
        border-radius: 12px 12px 0 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        z-index: calc(var(--z-dropdown) + 1);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        max-height: 80vh;
        overflow-y: auto;
      }
      .thresholds-sheet.visible {
        transform: translateY(0); visibility: visible;
        transition: transform 0.25s ease, visibility 0s linear 0s;
      }
      .thresholds-sheet .drag-handle {
        width: 36px; height: 4px;
        background: var(--slate-200);
        border-radius: 2px;
        margin: 0 auto 12px;
      }
      .thresholds-sheet-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 12px;
      }
      .thresholds-sheet-header h3 {
        font-size: 15px; font-weight: 500; color: var(--slate-900); margin: 0;
      }
      .thresholds-sheet-close {
        background: none; border: none; font-size: 20px;
        color: var(--slate-400); cursor: pointer; padding: 4px;
        line-height: 1; position: relative;
      }
      .thresholds-sheet-close::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        min-width: 44px; min-height: 44px;
      }
      .races-overlay { display: none; }
      .races-drawer { display: none; }
      .races-sheet-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        opacity: 0; pointer-events: none;
        z-index: var(--z-overlay);
        transition: opacity 0.25s ease;
      }
      .races-sheet-overlay.visible { opacity: 1; pointer-events: auto; }
      .races-sheet {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0;
        background: var(--white);
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        transform: translateY(100%); visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        z-index: calc(var(--z-overlay) + 1);
        overflow-y: auto;
        padding: 0 20px 32px;
      }
      .races-sheet.visible {
        transform: translateY(0); visibility: visible;
        transition: transform 0.25s ease, visibility 0s linear 0s;
      }
      .races-sheet .drag-handle {
        width: 36px; height: 4px;
        background: var(--slate-200);
        border-radius: 2px;
        margin: 12px auto 12px;
      }
      .races-sheet-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 12px;
      }
      .races-sheet-header h3 {
        font-size: 15px; font-weight: 500; color: var(--slate-900); margin: 0;
      }
      .races-sheet-close {
        background: none; border: none; font-size: 20px;
        color: var(--slate-400); cursor: pointer; padding: 4px;
        line-height: 1; position: relative;
      }
      .races-sheet-close::after {
        content: ''; position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        min-width: 44px; min-height: 44px;
      }
    }
    @media (min-width: 640px) {
      /* On desktop, hide the mobile bottom sheet */
      .thresholds-sheet-overlay { display: none; }
      .thresholds-sheet { display: none; }
      .pipeline-settings-sheet-overlay { display: none; }
      .pipeline-settings-sheet { display: none; }
      .mobile-status-bar { display: none; }
      .bottom-sheet-overlay { display: none; }
      .bottom-sheet { display: none; }
    }
    @media (min-width: 640px) {
      .mobile-toggle-row { display: none !important; }
      .mobile-drawer { display: none !important; }
    }
    @media (min-width: 800px) {
      .plan-mobile { display: none !important; }
      .plan-day-list { display: none !important; }
      .plan-bottom-sheet { display: none !important; }
      .plan-mobile-add-btn { display: none; }
    }

    /* Note modal */
    .note-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: var(--z-overlay);
      justify-content: center;
      align-items: center;
    }
    .note-modal-overlay.open {
      display: flex;
    }
    .note-modal {
      background: var(--white);
      border-radius: 8px;
      padding: 20px;
      width: 340px;
      max-width: 90vw;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .note-modal h3 {
      font-size: 14px;
      font-weight: 600;
      color: var(--slate-900);
      margin: 0 0 12px;
    }
    .note-modal select,
    .note-modal input[type="text"],
    .note-modal input[type="date"],
    .note-modal textarea {
      width: 100%;
      padding: 6px 8px;
      font-size: 13px;
      border: 0.5px solid var(--slate-100);
      border-radius: 4px;
      background: var(--white);
      color: var(--slate-800);
      font-family: var(--font-sans);
      margin-top: 6px;
    }
    .note-modal textarea { resize: vertical; }
    .note-modal .note-modal-label { font-weight: 600; margin-top: 10px; display: block; }
    .note-modal .note-modal-label:first-of-type { margin-top: 0; }
    .note-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 14px;
    }
    .note-modal-actions button { font-size: 13px; border-radius: 4px; padding: 6px 14px; }
    .note-modal-cancel { border-width: 0.5px; border-color: var(--slate-100); color: var(--slate-600); }
    /* note-modal-save inherits from btn--accent */

    /* ── Accessibility ─────────────────────────────────────────────────── */

    /* Screen-reader-only text */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Skip link — visible on focus only */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      z-index: calc(var(--z-modal) + 1);
      background: var(--slate-900);
      color: var(--ember-400);
      padding: 8px 16px;
      border-radius: 0 0 8px 8px;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0;
    }

    /* Note card actions visible on keyboard focus */
    .note-card:focus-within .note-card-actions { opacity: 1; }

    /* Color contrast: upgrade --slate-400 to --slate-600 on small text
       to meet WCAG AA 4.5:1 ratio */
    .pmc-label, .fm-label, .date-separator span,
    .message .timestamp { color: var(--slate-600); }

    /* Tabular figures for numeric table columns */
    .act-table td { font-variant-numeric: tabular-nums; }

    /* Text wrap balance on headings, pretty on body */
    .login-card h2, .pmc-label, .plan-empty-title,
    #modalTitle { text-wrap: balance; }
    .message .bubble, .note-card { text-wrap: pretty; }

    /* Scroll affordance: removed the ::after gradient on .table-card
       because pseudo-elements on overflow-x:auto containers scroll with
       content, rendering as a phantom line artifact (#279, #316).
       The scrollbar itself provides sufficient affordance. */

    /* Error banner dismiss button */
    .error-banner { display: flex; align-items: center; gap: 8px; }
    .error-dismiss {
      background: none; border: none; cursor: pointer;
      color: var(--red-400); font-size: 18px; padding: 0 0 0 4px;
      font-family: var(--font-sans);
      position: relative;
    }
    .error-dismiss::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 44px; min-height: 44px;
    }

/* --- Threshold suggestion popup --- */
.threshold-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.threshold-popup.hidden { display: none; }
.threshold-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.threshold-popup-content {
  position: relative;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.threshold-popup-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
  margin: 0 0 4px;
}
.threshold-popup-subtitle {
  font-size: 13px;
  color: var(--slate-600);
  margin: 0 0 16px;
}
.threshold-popup-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: 14px;
  color: var(--slate-800);
}
.threshold-popup-item:last-child { border-bottom: none; }
.threshold-popup-item strong { font-weight: 600; }
.threshold-popup-arrow {
  color: var(--slate-400);
  font-size: 12px;
}
.threshold-popup-new {
  color: var(--ember-500);
  font-weight: 500;
}
.threshold-popup-count {
  color: var(--slate-400);
  font-size: 12px;
}
.threshold-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
}

/* --- Threshold suggestion badge (inline in Thresholds panel) --- */
.threshold-suggestion-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--ember-400) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember-400) 20%, transparent);
  border-radius: 8px;
  font-size: 13px;
}
.threshold-suggestion-label {
  flex: 1;
  color: var(--ember-500);
  font-weight: 500;
}
.threshold-suggestion-accept,
.threshold-suggestion-dismiss {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  position: relative;
}
.threshold-suggestion-accept::after,
.threshold-suggestion-dismiss::after {
  content: '';
  position: absolute;
  inset: -10px;
  min-width: 44px;
  min-height: 44px;
}
.threshold-suggestion-accept { color: var(--green, #22c55e); }
.threshold-suggestion-dismiss { color: var(--slate-400); }

/* ── Activity detail: three-card layout ───────────────────── */

.detail-cards-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.detail-metrics-card {
  flex: 3 1 0%;
  min-width: 0;
}

/* When no chart card is present, constrain metrics and push zones right */
.detail-cards-row:not(:has(.detail-chart-card)) .detail-metrics-card {
  max-width: 520px;
}

.detail-cards-row:not(:has(.detail-chart-card)) .detail-zones-card {
  margin-left: auto;
}

.detail-chart-card {
  flex: 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
}

.detail-zones-card {
  flex: 1.2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 12px;
  gap: 0;
}

.detail-zones-card.dual-donut {
  flex: 1.5;
}

/* Chart internals */
.chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 10px;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chart-legend-swatch {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
  background: var(--bg);
}

.chart-container {
  flex: 1;
  position: relative;
  min-height: 100px;
}

.chart-y-label {
  position: absolute;
  left: 0;
  font-size: 8px;
  color: var(--slate-400);
}

.chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Zone donut in zones card */
.zones-donut-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zones-donut-label {
  font-size: 9px;
  color: var(--slate-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.zones-legend {
  font-size: 10px;
  color: var(--slate-800);
  line-height: 1.7;
}

.zones-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.zones-legend-swatch {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--bg);
}

.zones-divider {
  width: 80%;
  border: none;
  border-top: 1px solid var(--slate-100);
  margin: 12px 0;
}

/* Chart loading state */
.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 4px;
}

/* CSP migration (issue #763 PR 1) — replacements for removed inline styles in index.html. */

.u-mt-8 { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }

.btn-icon--muted {
  font-size: 13px;
  opacity: 0.6;
}

.modal-footer-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Plan-table column widths (was inline style= on each <th>). */
.plan-table th.col-week { width: 12%; }
.plan-table th.col-phase { width: 10%; }
.plan-table th.col-swim,
.plan-table th.col-bike,
.plan-table th.col-run,
.plan-table th.col-total { width: 13%; }
.plan-table th.col-compliance { width: 14%; }
.plan-table th.col-actions { width: 72px; }

/* ── Responsive: narrow / mobile ──────────────────────────── */

@media (max-width: 800px) {
  .detail-cards-row {
    flex-wrap: wrap;
  }

  .detail-metrics-card {
    flex: 1 1 60%;
    order: 1;
  }

  .detail-zones-card,
  .detail-zones-card.dual-donut {
    flex: 1 1 30%;
    order: 2;
  }

  .detail-chart-card {
    flex: 1 1 100%;
    order: 3;
    min-height: 120px;
  }
}

/* ── Focus-visible indicators ────────────────────────────── */
.tab:focus-visible,
.btn:focus-visible,
.activity-card-body:focus-visible,
.sb-section-header:focus-visible,
.dash-widget[tabindex]:focus-visible,
.athlete-pill:focus-visible,
.export-split-main:focus-visible,
.export-split-caret:focus-visible,
.activity-card-btn:focus-visible,
.note-card-btn:focus-visible {
  outline: 2px solid var(--ember-400);
  outline-offset: 2px;
}

/* Tab focus ring sits inside (no offset) to avoid clipping */
.tab:focus-visible {
  outline-offset: -2px;
}

    /* Reduced motion — respect user preference */
    @media (prefers-reduced-motion: reduce) {
      .stagger-in { animation: none !important; }
      .loading-dots .dot { animation: none; opacity: 0.8; }
      .mini-spinner { animation: none; }
      .surface-entering { animation: none !important; }
      * { transition-duration: 0.01ms !important; }
      .sb-section-chevron { transition: none; }
      .threshold-step-chart polyline,
      .threshold-step-chart polygon { transition: none; }
      .dash-hero-ring-area--near-complete .dash-hero-ring-svg,
      .dash-hero-ring-area--weekly-splash .dash-hero-ring-svg,
      .dash-hero-ring-area--tick .dash-hero-ring-svg {
        animation: none !important;
      }
      .dash-hero-ring-area--weekly-splash::after {
        animation: none !important;
        opacity: 0;
      }
      .dash-hero-ring-area--near-complete .dash-hero-ring-svg {
        transform: scale(1.05);
      }
      .dash-hero-session-done--celebrate .dash-hero-session-check,
      .dash-hero-session-done--celebrate .dash-hero-session-emoji {
        animation: none !important;
      }
      #sessionModal[open], #raceModal[open],
      #sessionModal::backdrop, #raceModal::backdrop {
        animation: none !important;
      }
    }

/* ── Plan wizard ─────────────────────────────────────────────── */

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--slate-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.wizard-step.active {
  background: var(--ember-400);
  color: var(--white);
}
.wizard-step-line {
  width: 32px;
  height: 2px;
  background: var(--slate-200);
}

/* Configure form */
.wizard-form {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 24px;
}
.wizard-form .card {
  padding: 20px;
}
.wizard-form-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-900);
  margin-bottom: 16px;
}
.wizard-field {
  margin-bottom: 14px;
}
.wizard-field .label {
  margin-bottom: 4px;
}

/* Chip toggle rows */
.wizard-chips {
  display: flex;
  gap: 6px;
}
.wizard-chip {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 4px;
  border: 0.5px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  background: var(--white);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wizard-chip.selected {
  background: var(--slate-900);
  color: var(--ember-400);
  border-color: var(--slate-900);
  font-weight: 500;
}
.wizard-chip:hover:not(.selected) {
  border-color: var(--slate-400);
}

.wizard-validation {
  color: var(--red-400);
  font-size: 12px;
  margin-top: 4px;
}

/* Preview */
.wizard-preview {
  padding: 0 16px 24px;
}
.wizard-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px;
}
.wizard-summary-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-900);
}
.wizard-summary-sub {
  font-size: 12px;
  color: var(--slate-400);
  margin-top: 2px;
}
.wizard-feasibility {
  font-size: 12px;
  font-weight: 500;
}
.wizard-feasibility.ok { color: var(--teal-400); }
.wizard-feasibility.warn { color: var(--ember-500); }

/* Warnings */
.wizard-warnings {
  padding: 0 16px 12px;
}
.wizard-warnings summary {
  font-size: 12px;
  color: var(--ember-500);
  cursor: pointer;
}
.wizard-warnings li {
  font-size: 12px;
  color: var(--slate-600);
  margin-top: 4px;
}

/* Phase bar */
.wizard-phase-bar {
  display: flex;
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
  height: 28px;
  margin-bottom: 12px;
}
.wizard-phase-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: var(--flex, 1);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wizard-phase-segment.base   { background: var(--slate-200); color: var(--slate-600); }
.wizard-phase-segment.build  { background: var(--ember-50);  color: var(--ember-600); }
.wizard-phase-segment.peak   { background: var(--ember-100); color: var(--ember-600); }
.wizard-phase-segment.taper  { background: var(--teal-50);   color: var(--teal-600); }
.wizard-phase-segment.race   { background: var(--red-50);    color: var(--red-400); }

/* Session grid */
.wizard-week {
  background: var(--white);
  border: 0.5px solid var(--slate-100);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.wizard-week-header {
  padding: 8px 12px;
  background: var(--slate-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid var(--slate-100);
}
.wizard-week-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-900);
}
.wizard-week-title.recovery {
  font-style: italic;
  color: var(--slate-400);
}
.wizard-week-tss {
  font-size: 11px;
  color: var(--slate-400);
}
.wizard-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.wizard-day-grid-header {
  padding: 4px;
  text-align: center;
  font-size: 9px;
  color: var(--slate-400);
  text-transform: uppercase;
  background: var(--slate-50);
  border-bottom: 0.5px solid var(--slate-100);
}
.wizard-day-cell {
  padding: 4px;
  min-height: 40px;
  border-right: 0.5px solid var(--slate-50);
}
.wizard-day-cell:last-child { border-right: none; }
.wizard-day-cell.rest {
  background: var(--slate-50);
}
.wizard-day-rest-label {
  font-size: 9px;
  color: var(--slate-400);
}
.wizard-session-badge {
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 3px;
  margin-bottom: 4px;
  display: block;
}
.wizard-session-badge.swim { background: var(--teal-50); color: var(--teal-600); }
.wizard-session-badge.bike { background: var(--blue-50); color: var(--blue-600); }
.wizard-session-badge.run  { background: var(--ember-50); color: var(--ember-600); }
.wizard-session-badge.brick { background: var(--red-50); color: var(--red-400); }
.wizard-session-type-pill {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  display: block;
  background: var(--slate-50);
  color: var(--slate-600);
  border: 0.5px solid var(--slate-200);
}
.wizard-session-type-pill.tempo     { background: var(--ember-50); color: var(--ember-600); border-color: var(--ember-100); }
.wizard-session-type-pill.intervals { background: var(--red-50); color: var(--red-400); border-color: var(--red-400); }
.wizard-session-type-pill.long      { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-50); }
.wizard-session-type-pill.recovery  { background: var(--teal-50); color: var(--teal-600); border-color: var(--teal-50); }
.wizard-session-type-pill.race      { background: var(--red-50); color: var(--red-400); border-color: var(--red-400); }
.wizard-session-type-pill.test      { background: var(--blue-50); color: var(--blue-600); border-color: var(--blue-50); }
.wizard-session-detail {
  font-size: 8px;
  color: var(--slate-400);
}

/* Multi-session day: group each session visually */
.wizard-day-session-group {
  padding: 2px 0;
}
.wizard-day-session-group + .wizard-day-session-group {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed var(--slate-200);
}

/* Overflow scroll for mobile */
.wizard-day-grid-wrap {
  overflow-x: auto;
}
@media (max-width: 500px) {
  .wizard-day-grid { min-width: 420px; }
}

/* Show more weeks toggle */
.wizard-show-more {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: var(--ember-500);
  cursor: pointer;
  background: var(--white);
  border: 0.5px solid var(--slate-100);
  border-radius: 10px;
  margin-bottom: 8px;
}
.wizard-show-more:hover {
  background: var(--slate-50);
}

/* Wizard actions */
.wizard-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 0 16px 24px;
}
.wizard-actions .btn { flex: 1; }
.wizard-actions .btn--accent { flex: 2; }

/* No race gate */
.wizard-no-race {
  text-align: center;
  padding: 40px 20px;
  color: var(--slate-400);
  font-size: 14px;
}
.wizard-no-race-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-600);
  margin-bottom: 8px;
}

/* Advanced overrides panel */
.wizard-advanced {
  border-top: 0.5px solid var(--slate-200);
  padding-top: 14px;
  margin-top: 4px;
}
.wizard-advanced summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 4px;
}
.wizard-advanced summary::-webkit-details-marker { display: none; }
.wizard-chevron {
  font-size: 10px;
  transition: transform 0.15s ease;
  display: inline-block;
}
.wizard-advanced[open] .wizard-chevron { transform: rotate(90deg); }
.wizard-advanced[open] summary { margin-bottom: 14px; }

/* Tooltip underline on labels with title */
.wizard-field .label[title],
.wizard-toggle-row .label[title] {
  text-decoration: underline dotted var(--slate-400);
  text-underline-offset: 3px;
  cursor: help;
}

/* Toggle switch */
.wizard-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard-toggle-input { display: none; }
.wizard-toggle-track {
  width: 36px;
  height: 20px;
  background: var(--slate-200);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wizard-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--slate-400);
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
}
.wizard-toggle-input:checked + .wizard-toggle-track {
  background: var(--ember-400);
}
.wizard-toggle-input:checked + .wizard-toggle-track .wizard-toggle-thumb {
  transform: translateX(16px);
  background: var(--white);
}
.wizard-toggle-label {
  font-size: 12px;
  color: var(--slate-400);
}
.wizard-toggle-input:checked ~ .wizard-toggle-label {
  color: var(--slate-600);
}

/* Range slider */
.wizard-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--slate-200);
  border-radius: 3px;
  outline: none;
  margin-top: 4px;
}
.wizard-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 2px solid var(--slate-900);
  border-radius: 50%;
  cursor: pointer;
}
.wizard-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--white);
  border: 2px solid var(--slate-900);
  border-radius: 50%;
  cursor: pointer;
}
.wizard-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 3px;
}

/* Toggle row (brick / test / consecutive) */
.wizard-toggle-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.wizard-toggle-row > div { flex: 1; }

/* Toast */
.wizard-toast {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 0.5px solid var(--ember-400);
  border-radius: 8px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ember-600);
  z-index: var(--z-dropdown);
  max-width: 90%;
}
.wizard-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-400);
  font-size: 18px;
  padding: 0;
  font-family: var(--font-sans);
  position: relative;
}
.wizard-toast-close::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px;
}

/* New plan card in header row */
.wizard-new-plan-card {
  text-align: center;
  transition: border-color 0.15s ease;
}
.wizard-new-plan-card:hover {
  border-color: var(--ember-100);
}
.wizard-new-plan-icon {
  font-size: 22px;
  font-weight: 400;
  color: var(--ember-400);
  margin-top: 2px;
  line-height: 1;
}

/* ── Plan list sub-view ── */
.plan-all-plans-card {
  text-align: center;
  border: 1px solid var(--ember-100);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-all-plans-card:hover {
  border-color: var(--ember-400);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.plan-all-plans-icon {
  display: inline-block;
  font-size: 28px;
  color: var(--ember-400);
  margin: 4px 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.plan-all-plans-card:hover .plan-all-plans-icon {
  color: var(--ember-500);
  transform: translateX(3px);
}

.plan-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 12px;
}

.plan-list-card {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.plan-list-card:hover { border-color: var(--slate-300); }
.plan-list-card--active  { border-left: 3px solid var(--green-500); }
.plan-list-card--draft   { border-left: 3px solid var(--amber-500); }
.plan-list-card--completed { border-left: 3px solid var(--slate-400); }
.plan-list-card--archived {
  border-left: 3px solid var(--slate-200);
  opacity: 0.7;
}

.plan-list-card-header { padding: 14px 16px; }
.plan-list-card-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.plan-list-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
}
.plan-list-card--completed .plan-list-card-name,
.plan-list-card--archived .plan-list-card-name {
  color: var(--slate-500);
  font-weight: 500;
}

.plan-list-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  margin-left: 8px;
  white-space: nowrap;
}
.plan-list-status--active    { background: var(--green-100); color: var(--green-800); }
.plan-list-status--draft     { background: var(--amber-100); color: var(--amber-800); }
.plan-list-status--completed { background: var(--slate-100); color: var(--slate-600); }
.plan-list-status--archived  { background: var(--slate-50);  color: var(--slate-400); }

.plan-list-subtitle {
  font-size: 12px;
  color: var(--slate-400);
  margin-top: 2px;
}

.plan-list-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--slate-500);
  flex-wrap: wrap;
}
.plan-list-stats-sep {
  border-left: 1px solid var(--slate-200);
  padding-left: 12px;
}

.plan-list-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.plan-list-action {
  font-size: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.plan-list-action--activate { color: var(--blue-600); font-weight: 500; }
.plan-list-action--delete   { color: var(--red-500); }
.plan-list-action--secondary { color: var(--slate-500); }
.plan-list-action:hover { text-decoration: underline; }

.plan-list-chevron {
  font-size: 11px;
  color: var(--slate-300);
  margin-left: 4px;
}

/* Expanded preview within a plan card */
.plan-list-preview {
  padding: 12px 16px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
  border-radius: 0 0 8px 8px;
}
.plan-list-show-more {
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: var(--blue-600);
  cursor: pointer;
}
.plan-list-show-more:hover { text-decoration: underline; }

/* Shared confirmation modal (used across tabs) */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}
.confirm-dialog {
  max-width: 400px;
  padding: 24px;
  border-radius: 12px;
}
.confirm-message {
  font-size: 14px;
  color: var(--slate-700);
  margin-bottom: 16px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.plan-empty-link {
  font-size: 13px;
  color: var(--slate-500);
}

/* ═══════════════════════════════════════════════════════════════════
   Dashboard / Home Tab
   ═══════════════════════════════════════════════════════════════════ */
.home-surface {
  padding: 60px 16px 16px;
  max-width: 960px;
  margin: 0 auto;
  overflow-y: auto;
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
}

/* ── Dashboard grid ── */
/* Mobile: 2-column grid */
.dash-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dash-stale-banner {
  grid-column: 1 / -1;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 12px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 8px;
}
.dash-error-card {
  grid-column: 1 / -1;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dash-error-title {
  color: var(--slate-700);
  font-size: 14px;
  font-weight: 500;
}
.dash-error-retry { min-height: 40px; }
.dash-hero-area { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
[data-dash="readiness"] { order: 2; }
[data-dash="fitness"]   { order: 3; }
[data-dash="yesterday"] { order: 4; grid-column: 1 / -1; }
.dash-trajectory { grid-column: 1 / -1; order: 5; }
.dash-bottom-row { grid-column: 1 / -1; order: 6; display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ── Week at a Glance ── */
.dash-week-strip { display: flex; justify-content: space-between; gap: 2px; margin: 10px 0 8px; }
.dash-week-day { flex: 1; text-align: center; min-width: 0; }
.dash-week-day-label { font-size: 10px; color: var(--slate-400); margin-bottom: 4px; }
.dash-week-today-label { color: var(--ember-500); font-weight: 600; }
.dash-week-circle {
  width: 28px; height: 28px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  border: 2px solid var(--slate-200); background: var(--slate-50); color: var(--slate-400);
}
.dash-week-done .dash-week-circle { border-color: #3d8b6e; background: #1a3a2a; color: #3d8b6e; }
.dash-week-today .dash-week-circle { border-color: var(--ember-500); background: #3a2a1a; color: var(--ember-500); }
.dash-week-future .dash-week-circle { border-color: var(--slate-300); background: var(--slate-50); }
.dash-week-rest .dash-week-circle { border-color: var(--slate-200); color: var(--slate-300); }
.dash-week-past .dash-week-circle { border-color: var(--slate-300); background: var(--slate-100); }
.dash-week-multi .dash-week-circle { position: relative; overflow: hidden; }
.dash-week-circle[data-style-var-bg] {
  background: var(--bg);
  border-color: var(--bc);
  color: #fff;
}
.dash-week-split-top, .dash-week-split-bottom { position: absolute; font-size: 11px; line-height: 1; }
.dash-week-split-top { top: 2px; left: 3px; }
.dash-week-split-bottom { bottom: 2px; right: 3px; }
.dash-week-sport { font-size: 9px; color: var(--slate-400); margin-top: 2px; }
.dash-week-sport-done { color: #3d8b6e; }
.dash-week-footer { font-size: 11px; color: var(--slate-400); }

/* ── Sport Balance ── */
.dash-sport-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; margin: 10px 0 10px; }
.dash-sport-bar-empty { background: var(--slate-100); }
.dash-sport-segment { display: flex; align-items: center; justify-content: center; min-width: 0; animation: dash-sport-fade 0.45s ease-out both; flex: var(--flex); background: var(--bg); }
@keyframes dash-sport-fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-sport-segment { animation: none; }
}
.dash-sport-segment span { font-size: 10px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.dash-sport-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; color: var(--slate-400); }
.dash-sport-legend-item { display: flex; align-items: center; gap: 4px; }
.dash-sport-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--bg); }
.dash-sport-dot--ghost {
  background: transparent;
  border: 1.5px dashed var(--bc);
  width: 7px;
  height: 7px;
}
.dash-sport-empty { font-size: 12px; color: var(--slate-400); margin: 8px 0; }
.dash-sport-ghost { opacity: 0.2; border: 1.5px dashed var(--bc); background: transparent; box-sizing: border-box; }
.dash-sport-ghost span { color: var(--slate-400); }
.dash-sport-legend-planned { color: var(--slate-500, #6b6b63); }

/* When readiness is missing, fitness fills more space */
[data-dash="fitness"]:first-child { grid-column: 1 / -1; }

/* ── Card surface ── */
.dash-widget {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  min-height: 44px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s ease;
}

/* ── Skeleton / shimmer ── */
.dash-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--slate-50);
  box-shadow: none;
  height: var(--h);
}

.dash-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: dashShimmer 1.2s ease-in-out infinite;
}

@keyframes dashShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Header + chevron ── */
.dash-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dash-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--slate-400);
}

.dash-expand-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-expand-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-400);
  letter-spacing: 0.3px;
  transition: color 0.15s ease;
}

.dash-expanded .dash-expand-label {
  display: none;
}

.dash-chevron {
  font-size: 14px;
  color: var(--slate-400);
  transition: transform 0.2s ease, color 0.15s ease;
}

.dash-widget[data-dash="readiness"]:hover .dash-expand-label,
.dash-widget[data-dash="fitness"]:hover .dash-expand-label,
.dash-widget[data-dash="readiness"]:hover .dash-chevron,
.dash-widget[data-dash="fitness"]:hover .dash-chevron {
  color: var(--slate-600);
}

.dash-expanded .dash-chevron {
  transform: rotate(90deg);
}

/* ── Values ── */
.dash-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--slate-900);
}

.dash-value.dash-muted {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-400);
}

.dash-unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-400);
  margin-left: 2px;
}

.dash-hint {
  font-size: 12px;
  color: var(--slate-400);
  margin-top: 4px;
}

/* ── Detail panel (accordion) ──
   grid-template-rows 0fr→1fr animates intrinsic height without
   reserving layout space when collapsed. Child must set min-height: 0
   and overflow: hidden for the grid track to clip content. */
.dash-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease; /* audit-ok: accordion expand pattern, isolated container */
  margin-top: 0;
}

.dash-detail-inner {
  overflow: hidden;
  min-height: 0;
}

.dash-expanded .dash-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

.dash-detail-sub {
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
}

/* ── Hero card ── */
.dash-hero {
  background: linear-gradient(135deg, var(--slate-950, #1a1a18) 0%, var(--slate-900) 100%);
  border-radius: 12px;
  padding: 20px;
  color: var(--slate-50);
  box-shadow: none;
  transition: background 0.5s ease-out;
}
.dash-hero-done {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}
/* Readiness-based accent strip — UX P1 "feel it before you read it".
   Subtle left border + translucent tint keyed to today's readiness score.
   Completed (green) hero overrides these via specificity of .dash-hero-done. */
.dash-hero-readiness-good {
  border-left: 3px solid var(--teal-600);
  background:
    linear-gradient(135deg, rgba(15, 110, 86, 0.18) 0%, rgba(15, 110, 86, 0) 45%),
    linear-gradient(135deg, var(--slate-950, #1a1a18) 0%, var(--slate-900) 100%);
}
.dash-hero-readiness-fair {
  border-left: 3px solid var(--ember-500);
  background:
    linear-gradient(135deg, rgba(186, 117, 23, 0.18) 0%, rgba(186, 117, 23, 0) 45%),
    linear-gradient(135deg, var(--slate-950, #1a1a18) 0%, var(--slate-900) 100%);
}
.dash-hero-readiness-poor {
  border-left: 3px solid var(--red-400);
  background:
    linear-gradient(135deg, rgba(226, 75, 74, 0.18) 0%, rgba(226, 75, 74, 0) 45%),
    linear-gradient(135deg, var(--slate-950, #1a1a18) 0%, var(--slate-900) 100%);
}
.dash-hero-noplan {
  text-align: center;
  padding: 32px 20px;
}
.dash-hero-noplan .dash-hero-coaching {
  margin-bottom: 16px;
}

.dash-hero-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.dash-hero-body {
  flex: 1;
  min-width: 0;
}
.dash-hero-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-400);
  margin-bottom: 8px;
}
.dash-hero-done .dash-hero-header {
  color: rgba(255,255,255,0.5);
}
.dash-hero-coaching {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--slate-50);
  margin-bottom: 16px;
  transition: opacity 0.15s ease-out;
}

/* ── Session card inside hero ── */
.dash-hero-session {
  background: rgba(196,92,60,0.15);
  border: 0.5px solid rgba(196,92,60,0.3);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-hero-session-done {
  background: rgba(255,255,255,0.1);
  border-color: transparent;
}
.dash-hero-session-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(196,92,60,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.dash-hero-session-done .dash-hero-session-icon {
  background: rgba(255,255,255,0.12);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-hero-session-emoji {
  display: inline-block;
  line-height: 1;
}
.dash-hero-session-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4ade80;
  color: #166534;
  font-size: 9px;
  font-weight: 500;
  line-height: 15px;
  text-align: center;
}
@keyframes dashHeroSessionCheckPop {
  0% { transform: scale(0.82); opacity: 0.75; }
  55% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes dashHeroSessionEmojiPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.dash-hero-session-done--celebrate .dash-hero-session-check {
  animation: dashHeroSessionCheckPop 0.45s ease-out 1;
  transform-origin: center center;
}
.dash-hero-session-done--celebrate .dash-hero-session-emoji {
  animation: dashHeroSessionEmojiPop 0.45s ease-out 1;
}
.dash-hero-session-info {
  flex: 1;
  min-width: 0;
}
.dash-hero-session-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-50);
}
.dash-hero-session-stats {
  font-size: 12px;
  color: var(--slate-400);
}
.dash-hero-session-done .dash-hero-session-stats {
  color: rgba(255,255,255,0.5);
}
.dash-hero-session-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ember-500);
  font-weight: 500;
  background: rgba(196,92,60,0.15);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.dash-hero-copy {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-50);
  flex-shrink: 0;
  padding: 0;
}
.dash-hero-copy svg { width: 16px; height: 16px; }
.dash-hero-copy:hover { background: rgba(255,255,255,0.2); }
.dash-hero-copy.copied { color: #4ade80; }

/* ── Tomorrow preview ── */
.dash-hero-tomorrow {
  font-size: 13px;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-hero-tomorrow-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-400);
  font-weight: 500;
}

/* ── Weekly ring area ── */
.dash-hero-ring-area {
  flex-shrink: 0;
  text-align: center;
}
.dash-hero-ring-svg {
  display: block;
  transform-origin: center center;
}
/* Near-complete weekly ring (≥75%, <100%): urgency cue — #597 */
@keyframes dashHeroRingNearPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.07); opacity: 0.92; }
}
.dash-hero-ring-area--near-complete:not(.dash-hero-ring-area--tick) .dash-hero-ring-svg {
  animation: dashHeroRingNearPulse 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(196, 92, 60, 0.4));
}
.dash-hero-done .dash-hero-ring-area--near-complete:not(.dash-hero-ring-area--tick) .dash-hero-ring-svg {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}
/* Session count just increased — brief pulse (#595) */
@keyframes dashHeroRingTick {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.09); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.dash-hero-ring-area--tick .dash-hero-ring-svg {
  animation: dashHeroRingTick 0.26s ease-out 1;
  filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.4));
}
.dash-hero-done .dash-hero-ring-area--tick .dash-hero-ring-svg {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
}
/* Weekly ring 100% — class always; splash anim once per week (#595) */
@keyframes dashHeroRingWeeklyComplete {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes dashHeroRingWeeklyCompleteStrong {
  0% { transform: scale(1); opacity: 1; }
  38% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.dash-hero-ring-area--weekly-splash {
  position: relative;
}
.dash-hero-ring-area--weekly-splash .dash-hero-ring-svg {
  animation: dashHeroRingWeeklyComplete 0.7s ease-out 1;
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.45));
}
.dash-hero-ring-area--weekly-splash-strong .dash-hero-ring-svg {
  animation: dashHeroRingWeeklyCompleteStrong 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
.dash-hero-done .dash-hero-ring-area--weekly-splash .dash-hero-ring-svg {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}
@keyframes dashHeroRingSparkle {
  0% { opacity: 0; transform: scale(0.88); }
  40% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.15); }
}
.dash-hero-ring-area--weekly-splash::after {
  content: '';
  position: absolute;
  width: 92px;
  height: 92px;
  left: 50%;
  top: 0;
  margin-left: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.38) 0%, transparent 68%);
  opacity: 0;
  transform: scale(0.88);
  animation: dashHeroRingSparkle 0.58s ease-out 1;
  pointer-events: none;
}
.dash-hero-done .dash-hero-ring-area--weekly-splash::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, transparent 68%);
}
.dash-ring-outer, .dash-ring-inner {
  transition: opacity 0.6s ease-out, stroke 0.6s ease-out;
}
.dash-hero-ring-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-50);
  margin-top: 4px;
}
.dash-hero-ring-caption {
  font-size: 10px;
  color: var(--slate-400);
}

/* ── Race countdown (race week replaces ring) ── */
.dash-hero-race-countdown {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid var(--ember-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dash-hero-race-days {
  font-size: 24px;
  font-weight: 500;
  color: var(--ember-500);
  line-height: 1;
}
.dash-hero-race-label {
  font-size: 10px;
  color: var(--slate-400);
}

/* ── Hero button (no plan CTA) ── */
.dash-hero-btn {
  margin-top: 8px;
}

/* ── Race trajectory card ── */
.dash-traj-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}
.dash-traj-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--slate-900);
  margin-top: 2px;
}
.dash-traj-name-btn {
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer; text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--slate-300);
}
.dash-traj-name-btn:hover { text-decoration-color: var(--slate-600); }
.dash-traj-countdown {
  text-align: right;
  flex-shrink: 0;
}
.dash-traj-weeks {
  font-size: 24px;
  font-weight: 500;
  color: var(--ember-500);
  display: block;
  line-height: 1;
}
.dash-traj-weeks-label {
  font-size: 10px;
  color: var(--slate-400);
  text-transform: uppercase;
}
.dash-traj-spark {
  margin: 8px 12px 6px;
  position: relative;
}
.dash-traj-now {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember-500);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(232, 98, 40, 0.15);
  left: var(--l);
  top: var(--t);
}
.dash-traj-footer {
  font-size: 12px;
  color: var(--slate-600);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.dash-traj-footer strong { color: var(--slate-900); }
.dash-traj-delta-up { color: #3d8b6e; font-size: 11px; }
.dash-traj-delta-down { color: var(--red-400); font-size: 11px; }
.dash-traj-ontrack { color: #3d8b6e; font-weight: 500; }
.dash-traj-behind { color: var(--ember-500); font-weight: 500; }
.dash-traj-ahead { color: var(--teal-600); font-weight: 500; }

/* ── Widget value rows ── */
.dash-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.dash-value-ember { color: var(--ember-500); }
.dash-value-good { color: #3d8b6e; }
.dash-value-fair { color: var(--ember-500); }
.dash-value-poor { color: var(--red-400); }
.dash-delta-up { font-size: 12px; color: #3d8b6e; }
.dash-delta-down { font-size: 12px; color: var(--red-400); }

/* ── Badges ── */
.dash-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
}
.dash-badge-good { color: #3d8b6e; background: #e8f5e9; }
.dash-badge-fair { color: var(--ember-500); background: var(--ember-50); }
.dash-badge-poor { color: var(--red-400); background: var(--red-50); }

/* ── Daily TSS bars ── */
.dash-tss-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 28px;
  margin-top: 10px;
}
.dash-tss-bar {
  flex: 1;
  background: var(--slate-200);
  border-radius: 2px;
  min-height: 2px;
  transition: transform 0.3s ease;
  transform-origin: bottom;
}
.dash-tss-bar-today { background: var(--ember-500); opacity: 0.7; }
.dash-tss-bar-future { opacity: 0.3; }
.dash-tss-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--slate-400);
  margin-top: 2px;
}

/* ── Sleep stages bar ── */
.dash-sleep-stages { margin-top: 12px; }
.dash-sleep-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.dash-sleep-deep  { background: #1e3a5f; width: var(--w); }
.dash-sleep-rem   { background: #3d8b6e; width: var(--w); }
.dash-sleep-light { background: var(--slate-200); width: var(--w); }
.dash-sleep-awake { background: var(--ember-400); width: var(--w); }
.dash-sleep-legend {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 4px;
}

/* ── Yesterday rows ── */
.dash-yesterday-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.dash-yesterday-row[data-action] { cursor: pointer; }
.dash-yesterday-row:hover { background: var(--slate-50); border-radius: 6px; margin: 0 -4px; padding: 4px; }
.dash-yesterday-row + .dash-yesterday-row {
  border-top: 0.5px solid var(--slate-100);
}
.dash-yesterday-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg, var(--slate-50));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dash-yesterday-icon--rest { background: var(--slate-50); }
.dash-yesterday-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dash-yesterday-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-yesterday-name--rest { color: var(--slate-600); }
.dash-yesterday-stats {
  font-size: 11px;
  color: var(--slate-400);
  white-space: nowrap;
}
.dash-compliance-ok { font-size: 12px; color: #3d8b6e; flex-shrink: 0; }
.dash-yesterday-arrow { font-size: 16px; color: var(--slate-400); flex-shrink: 0; }

/* ── Yesterday: load bar ── */
.dash-load-bar {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid var(--slate-100);
}
.dash-load-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--slate-400);
}
.dash-load-target {
  font-weight: 600;
  color: var(--slate-600);
}
.dash-load-track {
  position: relative;
  height: 6px;
  background: var(--slate-50);
  border-radius: 3px;
}
.dash-load-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--bg, var(--ember-500));
  width: var(--w);
  transform-origin: left center;
  animation: dash-load-grow 0.4s ease-out both;
}
@keyframes dash-load-grow {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-load-fill { animation: none; }
}
.dash-load-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--slate-600);
  border-radius: 1px;
  left: var(--l);
}

/* ── Yesterday widget: border-left variants ── */
.dash-widget--rest { border-left: 3px solid var(--slate-200); }
.dash-widget[data-dash="yesterday"][data-style-var-bc] { border-left: 3px solid var(--bc); }

/* ── Yesterday: rest day ── */
.dash-yesterday-rest-msg {
  font-size: 11px;
  color: var(--slate-400);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Responsive: mobile ── */
@media (max-width: 639px) {
  .home-surface { padding: 56px 12px 12px; }
  .dash-value { font-size: 28px; }
  .dash-widget { padding: 14px; }
  .dash-hero { padding: 16px; }
  .dash-hero-layout { gap: 12px; }
  .dash-hero-coaching { font-size: 14px; }
  .dash-hero-ring-svg { width: 48px; height: 48px; }
  .dash-hero-race-countdown { width: 48px; height: 48px; }
  .dash-hero-race-days { font-size: 18px; }
  .dash-traj-name { font-size: 14px; }
  .dash-traj-weeks { font-size: 20px; }
  /* Tab bar: hide app name, compact tabs for 4-tab layout */
  .tab-bar .app-name { display: none; }
  .tab-bar .tab { font-size: 13px; padding: 0 10px; }
  .athlete-menu { margin-left: auto; }
  .athlete-pill .name { font-size: 13px; }
  .athlete-pill { padding: 4px 8px; }
  .dash-week-circle { width: 28px; height: 28px; font-size: 12px; }
}

/* ── Responsive: desktop ── */
@media (min-width: 800px) {
  .home-surface { padding: 60px 24px 24px; }
  .dash-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .dash-hero-area { grid-column: 1 / -1; }
  [data-dash="readiness"] { order: 2; }
  [data-dash="fitness"]   { order: 3; }
  [data-dash="yesterday"] { order: 4; grid-column: auto; }
  .dash-trajectory { grid-column: 1 / -1; order: 5; }
  .dash-bottom-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dash-week-circle { width: 32px; height: 32px; font-size: 14px; }

  /* When readiness is missing, fitness + yesterday split 2 columns */
  [data-dash="fitness"]:first-child { grid-column: span 2; }
  [data-dash="fitness"]:first-child + [data-dash="yesterday"] { grid-column: auto; }

  .dash-value { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Plan tab — classes for inline-style migration (#763 PR 2)
   ═══════════════════════════════════════════════════════════════════ */

/* Generic text helpers used across plan-tab states */
.plan-hint-text { color: var(--slate-400); font-size: 12px; }
.plan-error-inline { color: var(--red-400); font-size: 12px; }
.plan-loading-inline { padding: 16px; text-align: center; color: var(--slate-400); }
.plan-empty-state { padding: 48px; text-align: center; color: var(--slate-400); }
.plan-empty-state--sm { padding: 24px; text-align: center; color: var(--slate-400); }
.plan-empty-state-title { font-size: 14px; margin-bottom: 8px; }
.plan-empty-state-sub { font-size: 12px; }

/* Rest-day cells within calendar/day columns */
.plan-rest-cell { font-size: 11px; color: var(--slate-200); padding: 4px; }
.plan-rest-cell--tight { font-size: 11px; color: var(--slate-200); padding: 2px 0; }
.plan-day-add-cell {
  font-size: 11px;
  color: var(--slate-200);
  padding: 4px 0;
  cursor: pointer;
}

/* Unmatched-activity session slot secondary text */
.session-slot-secondary { color: var(--slate-400); }

/* Plan notes rendering */
.plan-notes-col { display: flex; flex-direction: column; }
.plan-notes-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.plan-notes-row--bordered { border-bottom: 1px solid var(--slate-100); }
.plan-notes-day { color: var(--slate-400); min-width: 28px; flex-shrink: 0; font-size: 12px; }
.plan-notes-rest { color: var(--slate-400); font-style: italic; font-size: 13px; }
.plan-notes-content { color: var(--slate-600); font-size: 13px; }
.plan-notes-empty { color: var(--slate-400); font-style: italic; margin: 0; }
.plan-notes-plain { margin: 0; color: var(--slate-600); }

/* Donut widget (_renderDonut / _renderDonutRow) */
.donut-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.donut-svg { transform: rotate(-90deg); display: block; }
.donut-centre-text {
  fill: var(--slate-800);
  font-weight: 500;
  transform: rotate(90deg);
  transform-origin: 18px 18px;
}
.donut-centre-text--sm { font-size: 6px; }
.donut-centre-text--md { font-size: 7px; }
.donut-label {
  color: var(--slate-600);
  font-weight: 500;
  white-space: nowrap;
}
.donut-sublabel {
  color: var(--slate-400);
  white-space: nowrap;
}
.donut-label--sm { font-size: 9px; }
.donut-label--md { font-size: 11px; }
.donut-row { display: flex; align-items: center; }
.donut-row--sm { gap: 16px; }
.donut-row--md { gap: 24px; }
.donut-row-total {
  border-left: 1px solid var(--slate-100);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.donut-row-total--sm { padding-left: 8px; }
.donut-row-total--md { padding-left: 12px; }
.donut-total-value {
  font-weight: 500;
  color: var(--slate-800);
  line-height: 1;
}
.donut-total-value--sm { font-size: 16px; }
.donut-total-value--md { font-size: 20px; }

/* Mini donut (_renderMiniDonut) */
.mini-donut-wrap { text-align: center; }
.mini-donut-label { font-size: 8px; color: var(--slate-400); }
.mini-donut-pct-text {
  font-size: 8px;
  font-weight: 500;
  fill: var(--slate-600);
}

/* Template menu internals */
.template-menu-save-icon { font-size: 14px; }
.template-menu-item-body { flex: 1; min-width: 0; }
.template-menu-item-name { color: var(--slate-800); }
.template-menu-item-meta { font-size: 10px; color: var(--slate-400); }
.template-menu-save-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-800);
}
.template-menu-save-sub { font-size: 10px; color: var(--slate-400); }
.template-menu-preview-empty { font-style: italic; }

/* Races sheet header */
.races-sheet-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile day list */
.plan-day-list--flex { display: flex; }

/* Bottom-sheet section titles */
.sheet-section-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Race-sheet time inputs */
.race-sheet-time-row { display: flex; gap: 6px; }
.race-sheet-time-input { width: 60px; text-align: center; }
.race-sheet-time-sep {
  line-height: 36px;
  color: var(--slate-400);
}

/* Wizard helpers */
.wizard-field-row { display: flex; gap: 12px; }
.wizard-field-col { flex: 1; }
.wizard-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wizard-range-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ember-500);
  min-width: 3em;
  text-align: right;
}
.wizard-range-value.is-default {
  color: var(--slate-400);
}
.wizard-toggle-hint {
  font-size: 12px;
  color: var(--slate-400);
  margin-top: 1px;
  margin-bottom: 4px;
}
.wizard-no-race-btn { margin-top: 16px; }
.wizard-generate-btn { width: 100%; margin-top: 6px; }
.wizard-preview-card { margin-bottom: 12px; }
.wizard-phase-bar-preview { margin: 0 16px 12px; }

/* Plan-list cards */
.plan-list-not-started {
  color: var(--slate-400);
  font-style: italic;
}
.plan-list-sport-swim { color: var(--teal-500); }
.plan-list-sport-bike { color: var(--blue-600); }
.plan-list-sport-run  { color: var(--ember-500); }

/* ─── Profile surface ─── */
.profile-surface {
  padding: 24px 16px 80px;
  overflow-y: auto;
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
  margin-top: 44px;
  background: var(--slate-50);
}
.profile-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-back {
  background: transparent;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  align-self: flex-start;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.profile-back:hover { color: var(--slate-900); border-color: var(--slate-400); }

.profile-hero {
  background: var(--white);
  border: 0.5px solid var(--slate-100);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ember-500);
  color: var(--white);
  font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-name { margin: 0; font-size: 20px; color: var(--slate-900); }
.profile-subtitle { color: var(--slate-600); font-size: 13px; margin-top: 4px; }
.profile-accent { color: var(--ember-500); font-weight: 600; }

.profile-section {
  background: var(--white);
  border: 0.5px solid var(--slate-100);
  border-radius: 12px;
  padding: 18px 20px;
}
.profile-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  gap: 12px;
}
.profile-section-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--slate-900); }
.profile-section-sub {
  color: var(--slate-400); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.profile-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.profile-tile {
  background: var(--slate-50);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.profile-tile-value { font-size: 18px; font-weight: 700; color: var(--slate-900); }
.profile-tile-label {
  font-size: 10px; color: var(--slate-600);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 4px;
}

.profile-sport-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.profile-sport-table th {
  text-align: left; color: var(--slate-600); font-weight: 500;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 0;
}
.profile-sport-table th.num, .profile-sport-table td.num { text-align: right; }
.profile-sport-table tbody tr { border-top: 1px solid var(--slate-100); }
.profile-sport-table td { padding: 8px 0; color: var(--slate-800); }

.profile-streak {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--ember-50);
  border-left: 3px solid var(--ember-500);
  border-radius: 4px;
  font-size: 13px;
  color: var(--slate-900);
}

.profile-empty, .profile-empty-mini {
  color: var(--slate-600); font-size: 13px; padding: 8px 0;
}

.profile-conn-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: var(--slate-50);
  border-radius: 8px;
  margin-bottom: 8px;
}
.profile-conn-row:last-child { margin-bottom: 0; }
.profile-conn-left, .profile-conn-right {
  display: flex; align-items: center; gap: 10px;
}
.profile-conn-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; font-size: 12px;
}
.profile-conn-icon--strava { background: #fc4c02; }
.profile-conn-icon--oura { background: #6b46c1; }
.profile-conn-name { color: var(--slate-900); font-size: 14px; }
.profile-conn-badge {
  background: var(--slate-100); color: var(--slate-600);
  padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.profile-conn-badge--ok {
  background: var(--teal-50); color: var(--teal-600);
}
.profile-conn-sync { color: var(--slate-600); font-size: 11px; }

.profile-error {
  color: var(--slate-600); font-size: 13px; padding: 16px;
  background: var(--white); border: 0.5px solid var(--slate-100); border-radius: 8px;
}
.profile-skeleton {
  color: var(--slate-600); font-size: 13px; padding: 24px; text-align: center;
}

@media (max-width: 639px) {
  .profile-tiles { grid-template-columns: 1fr 1fr; }
  .profile-hero { padding: 16px; }
  .profile-section { padding: 14px 16px; }
}

/* ═══════════════ Trends tab ═══════════════ */
.trends-surface {
  margin-top: 44px;
  padding: 1rem;
}
@media (max-width: 640px) { .trends-surface { padding: 0.75rem; } }

.trends-container { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

.trends-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.trends-title { margin: 0; font-size: 1.5rem; }

.trends-ranges { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.trends-range {
  min-width: 44px; min-height: 44px;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--slate-100);
  background: transparent;
  color: var(--slate-800);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.trends-range:hover:not(:disabled) { border-color: var(--ember-500); }
.trends-range.active {
  background: var(--ember-500);
  color: var(--white);
  border-color: var(--ember-500);
  font-weight: 600;
}
.trends-range:disabled { opacity: 0.4; cursor: not-allowed; }

.trends-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.trends-card.is-loading .trends-card-body { opacity: 0.5; transition: opacity 150ms ease; }
.trends-card-head h3 { margin: 0 0 0.25rem 0; font-size: 1.125rem; }
.trends-card-sub { margin: 0; color: var(--slate-600); font-size: 0.875rem; }
.trends-card-body { position: relative; width: 100%; }

.trends-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; color: var(--slate-600); }
.trends-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.375rem; vertical-align: middle; }

/* Chart primitives — used by chartUtils.js */
.chart-axis-tick text { fill: var(--slate-600); font-size: 10px; }
.chart-gridline { stroke: var(--slate-100); stroke-width: 1; opacity: 0.4; }
.chart-hairline { stroke: var(--slate-600); stroke-width: 1; stroke-dasharray: 2,2; pointer-events: none; }

.chart-tooltip-host { position: relative; }
.chart-tooltip {
  position: absolute;
  top: 0;
  transform: translate(calc(var(--tt-x, 0px) - 50%), -100%);
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
  border-radius: 6px;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--slate-800);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip, 150);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.chart-tooltip--top { transform: translate(-50%, 0); top: -0.5rem; left: 50%; }
.chart-tooltip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .trends-range, .trends-card.is-loading .trends-card-body { transition: none; }
}

/* Trends tab — PMC chart */
.trends-chart { display: block; }
.chart-axis-line { stroke: var(--slate-100); stroke-width: 1; }
.chart-zero-line { stroke: var(--slate-100); stroke-width: 1; opacity: 0.6; }
.trends-line { fill: none; }
.trends-line-ctl { stroke: var(--ember-500); stroke-width: 1.25; opacity: 0.55; }
.trends-line-atl { stroke: var(--blue-600); stroke-width: 1.25; opacity: 0.55; }
.trends-line-tsb { stroke-width: 2.75; }
.trends-tsb-area { pointer-events: none; }
.trends-swatch-ctl { background: var(--ember-500); opacity: 0.55; }
.trends-swatch-atl { background: var(--blue-600); opacity: 0.55; }
.trends-swatch-tsb { background: linear-gradient(180deg, var(--emerald-500) 0%, var(--slate-400) 50%, var(--red-500) 100%); }
.trends-form-label { color: var(--slate-800); font-weight: 600; font-size: 0.95rem; }
.trends-sub-muted { color: var(--slate-400); }
.trends-legend-primary { font-weight: 600; color: var(--slate-800); }
.trends-empty { color: var(--slate-600); font-size: 0.875rem; }

.trends-bar { shape-rendering: crispEdges; }
.trends-bar-run { fill: var(--ember-500); }
.trends-bar-ride { fill: var(--blue-600); }
.trends-bar-swim { fill: var(--cyan-400, #22d3ee); }
.trends-bar-other { fill: var(--slate-600); opacity: 0.7; }
.trends-swatch-run { background: var(--ember-500); }
.trends-swatch-ride { background: var(--blue-600); }
.trends-swatch-swim { background: var(--cyan-400, #22d3ee); }
.trends-swatch-other { background: var(--slate-600); }

.trends-empty-card { text-align: center; color: var(--slate-600); padding: 2rem 1rem; }
.trends-empty-card p { margin: 0; }
.trends-error { color: var(--red-500, #ef4444); padding: 1rem; }
.link-button { background: none; border: none; color: var(--ember-500); cursor: pointer; text-decoration: underline; padding: 0; font: inherit; }