/* api/static/css/plan.css
 *
 * Plan tab styles. Extracted from styles.css in #2270 — pure relocation,
 * no behaviour change.
 *
 * Selectors covered: `.plan-*`, `.session-*`, `.donut-*`, `.mini-donut-*`,
 * `.template-menu-*`, `.race-list-*`, `.race-marker`, `.race-badge`,
 * `.race-indicator`, `.race-time-row`, `.race-sheet-time-*`,
 * `.races-sheet-header-actions`, `.day-card`, `.sheet-section-title`,
 * `.tss-bar` (compliance bar).
 *
 * Deferred from extraction (stay in styles.css):
 *   - `.races-sheet, .races-sheet-overlay { display: none }` top-level
 *     rule and the `@media (max-width: 639px)` block that turns sheets
 *     on — the latter shares grouped selectors with thresholds-sheet
 *     and pipeline-settings-sheet, so they cannot be cleanly split.
 *
 * Modify in place. Bump api/static/sw.js CACHE_NAME on every change.
 */

    .race-list-section { margin-bottom: var(--space-5); }
    .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 var(--space-3);
      margin-bottom: var(--space-2);
      background: var(--white);
    }
    .race-list-card-row1 {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: var(--space-1);
    }
    .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 var(--space-2);
      font-size: 12px; color: var(--slate-600); cursor: pointer;
    }
    .race-list-card-edit:hover { background: var(--slate-50); }
    .race-list-card-edit-icon {
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      background: none; border: none; border-radius: 6px;
      color: var(--slate-400); cursor: pointer; padding: 0;
      transition: background-color 120ms ease, color 120ms ease;
    }
    .race-list-card-edit-icon:hover {
      background: var(--slate-50); color: var(--slate-700);
    }
    .race-list-card-edit-icon:focus-visible {
      outline: 2px solid var(--ember-500);
      outline-offset: 1px;
    }
    .race-list-card-meta {
      font-size: 12px; color: var(--slate-500);
    }
    .race-list-empty {
      font-size: 13px; color: var(--slate-400); padding: var(--space-1) 0;
    }

    /* 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: 20px;
      margin-bottom: 32px;
    }
    .plan-header-cards .pmc-card {
      flex: 1;
      padding: var(--space-3) 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: var(--space-2);
    }
    .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); }

    /* Race countdown next to the phase pill in the Weeks-remaining card (#2274). */
    .plan-race-countdown {
      color: var(--text-muted);
      font-size: 12px;
    }

    /* Pace labels inside the in-progress compliance cell (#2267). */
    .plan-pace-ok     { font-size: 10px; font-weight: 400; color: var(--teal-600); }
    .plan-pace-ahead  { font-size: 10px; font-weight: 400; color: var(--ember-500); }
    .plan-pace-behind { font-size: 10px; font-weight: 400; 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 var(--space-3);
      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 var(--space-3);
      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 */
    /* Current-week emphasis (#2266) — ember tint + heavier accent + bold week
       label so the row anchors the scroll position. */
    .plan-row-current {
      border-bottom: 2px solid var(--ember-400) !important;
      background: var(--ember-50);
    }
    .plan-row-current:hover { background: var(--ember-100); }
    .plan-row-current td:first-child { font-weight: 600; color: var(--slate-900); }
    /* NOW badge — ember fill, white text, larger than the prior slate pill. */
    .now-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: var(--white);
      background: var(--ember-500);
      padding: 2px 8px;
      border-radius: 8px;
      margin-left: 6px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* 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: var(--space-1);
      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: var(--space-2) 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[data-state="open"] { display: table-row; }
    .plan-detail-row > td {
      background: var(--slate-50);
      padding: var(--space-3) 14px var(--space-3) var(--space-5) !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: var(--space-3); }
    .plan-detail-border-build { border-left: 3px solid var(--ember-400); padding-left: var(--space-3); }
    .plan-detail-border-peak { border-left: 3px solid var(--ember-100); padding-left: var(--space-3); }
    .plan-detail-border-taper { border-left: 3px solid var(--teal-400); padding-left: var(--space-3); }
    .plan-detail-border-recovery { border-left: 3px solid var(--slate-200); padding-left: var(--space-3); }
    .plan-detail-border-test { border-left: 3px solid var(--blue-600); padding-left: var(--space-3); }
    .plan-detail-border-race { border-left: 3px solid var(--red-400); padding-left: var(--space-3); }
    .plan-detail-donuts { margin-bottom: var(--space-4); }
    .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: var(--space-3); }
    .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: var(--space-1);
    }

    .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: var(--space-1) 20px var(--space-1) 6px;
        margin-bottom: 3px;
        background: var(--slate-25, #fafafa);
    }

    /* Session state borders + tinted backgrounds.
       Semantic axis: solid = something happened (scheduled-done, planned-upcoming, off-plan-done);
                      dashed = a planned session did NOT happen (missed).
       Tinted bg reinforces state at a glance — pills use white bg to pop. */
    /* Card bg tints are intentionally subtle — roughly halfway between
       white and the matching --*-50 token. State should be recognisable
       at a glance without overwhelming the calendar's neutral page bg. */
    .session-slot.completed {
        background: #F0FAF6;  /* pale teal, lighter than --teal-50 */
        border-left: 3px solid var(--teal-400);
    }

    .session-slot.pending {
        background: #FDF7EC;  /* pale amber, lighter than --ember-50 */
        border-left: 3px solid var(--amber-400, #f59e0b);
    }

    .session-slot.missed {
        background: #FDF5F5;  /* pale red, lighter than --red-50 */
        border-left: 3px dashed var(--red-400);
    }

    .session-slot.unmatched {
        background: #EEEDE8;  /* pale slate, neutral hue — distinct from the three scheduled-state tints */
        border-left: 3px solid var(--slate-400);
    }

    /* State pills — absolute top-right corner of the session-slot so they
       don't compete with .type-pill for header space. Carry state-meaning
       textually so it survives mobile-collapsed mode and colour-blind viewing.
       The edit icon sits at bottom-right (when canEdit) so the two never
       collide. */
    .session-state-pill {
        position: absolute;
        top: 4px;
        right: 6px;
        font-size: 10px;
        font-weight: 600;
        padding: 0 5px;
        border-radius: 6px;
        white-space: nowrap;
        line-height: 14px;
        pointer-events: none;
    }
    /* Pills use white bg + state-coloured text so they pop against the
       tinted card background (which uses the same state hue at -50). */
    .session-state-pill--done    { background: var(--white); color: var(--teal-600);  border: 1px solid var(--teal-400); }
    .session-state-pill--planned { background: var(--white); color: var(--ember-600); border: 1px solid var(--ember-400); }
    .session-state-pill--missed  { background: var(--white); color: var(--red-500);   border: 1px solid var(--red-400); }
    .session-state-pill--offplan { background: var(--white); color: var(--ember-600); border: 1px solid var(--ember-400); }

    .session-slot-header {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-size: 12px;
        font-weight: 500;
        color: var(--slate-800);
        padding-right: 68px;  /* reserve room for absolute-positioned .session-state-pill (widest: "Unplanned") */
    }

    .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;
    }

    /* Two-line clamp (#2269) instead of single-line truncation so long
       session names ("Long endurance ride", "Drill & technique") show
       enough to read without expanding. Expanded state below unclamps. */
    .session-desc {
        font-size: 11px;
        color: var(--slate-400);
        padding-left: 18px;
        margin-top: 1px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
                line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .session-slot.expanded .session-desc {
        display: block;
        -webkit-line-clamp: unset;
                line-clamp: unset;
        overflow: visible;
        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);
    }


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

    .race-marker-header {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      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: var(--space-2) var(--space-3);
        background: var(--white);
        border-radius: 6px;
        border-left: 3px solid var(--bc, var(--slate-200));
        margin-top: 24px;
        margin-bottom: var(--space-1);
    }

    .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 var(--space-3);
        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: var(--space-1);
    }

    .template-menu-save {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        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: var(--space-2) 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 var(--space-3);
        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: var(--space-2) 14px;
    }

    .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;
    }

    /* ── Drag-and-drop on calendar ── */
    .session-slot[draggable="true"] { cursor: grab; padding-left: var(--space-4); }
    .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: var(--space-1);
    }

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

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

    .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: var(--space-2) 10px;
        text-align: center;
        font-size: 12px;
        color: var(--slate-400);
        cursor: pointer;
        margin-top: var(--space-1);
    }

    /* ── Bottom sheet ── */
    .plan-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        overflow-y: auto;
        background: var(--white);
        border-top: 0.5px solid var(--slate-200);
        border-radius: 12px 12px 0 0;
        padding: var(--space-4);
        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: var(--space-1);
        display: block;
    }

    .plan-bottom-sheet select,
    .plan-bottom-sheet input {
        width: 100%;
        padding: var(--space-2);
        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: var(--space-2);
        margin-top: var(--space-2);
    }

    .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: var(--space-1) 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: var(--space-1) 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: var(--space-1);
      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: var(--space-3);
      margin-top: var(--space-1);
    }
    .plan-chat-card-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--slate-900);
      margin-bottom: var(--space-2);
    }
    .plan-chat-card-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-2);
      flex-wrap: wrap;
    }
    .plan-status-badge {
      font-size: 11px;
      font-weight: 500;
      padding: 2px var(--space-2);
      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: var(--space-3);
    }
    .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);
    }

    /* ── Responsive ── */

    /* Plan tab: progressive responsive breakpoints (#244)
       Type pill is always hidden in calendar view — calendar columns are
       too narrow at any typical desktop width to fit emoji + sport-name +
       type-pill alongside the absolute-positioned state pill. The session
       description (visible at >=1000px) carries the type detail. */
    .plan-calendar-strip .session-slot-header .type-pill { display: none; }

    @media (max-width: 999px) {
        .plan-calendar-strip .session-desc { display: none; }
        .plan-calendar-strip .session-slot.expanded .session-desc { display: block; }
    }
    @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; }
    }

    @media (max-width: 639px) {
      /* Plan tab mobile — below 640px only */
      .plan-header-cards { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
      .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; }
    }

    @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; }
    }

/* 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; }

/* ── 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: var(--space-1) 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 var(--space-3);
}

.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 var(--space-4); }
.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 var(--space-2);
  border-radius: 10px;
  font-weight: 500;
  margin-left: var(--space-2);
  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: var(--space-4);
  font-size: 12px;
  color: var(--slate-500);
  flex-wrap: wrap;
}
.plan-list-stats-sep {
  border-left: 1px solid var(--slate-200);
  padding-left: var(--space-3);
}

.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: var(--space-1);
}

/* Expanded preview within a plan card */
.plan-list-preview {
  padding: var(--space-3) var(--space-4);
  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: var(--space-2);
  font-size: 12px;
  color: var(--blue-600);
  cursor: pointer;
}
.plan-list-show-more:hover { text-decoration: underline; }

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

/* ═══════════════════════════════════════════════════════════════════
   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: var(--space-4); text-align: center; color: var(--slate-400); }
/* `.plan-empty-state` and friends retired in favour of `.empty-state` (issue #2168). */

/* Rest-day cells within calendar/day columns */
.plan-rest-cell { font-size: 11px; color: var(--slate-200); padding: var(--space-1); }
.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: var(--space-1) 0;
  cursor: pointer;
}

/* Unmatched-activity session slot secondary text */
.session-slot-secondary { color: var(--slate-800); font-weight: 500; }

/* Plan notes rendering */
.plan-notes-col { display: flex; flex-direction: column; }
.plan-notes-row { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 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: var(--space-4); }
.donut-row--md { gap: var(--space-5); }
.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: var(--space-2); }
.donut-row-total--md { padding-left: var(--space-3); }
.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: var(--space-2);
}

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

/* Bottom-sheet section titles */
.sheet-section-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-3);
}

/* 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);
}

/* 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); }

.race-list-card--clickable { cursor: pointer; }