/* ============================================================
   Stride — Training Week layout v2 (design 2a desktop / 3a mobile)

   ALL rules are scoped under `.week-layout-v2` so the warm palette and
   restyled rows only affect the plan page. The rest of the app keeps its
   existing `--color-*` theme untouched.

   Interactions are preserved: the existing DOM + JS event wiring is reused;
   this file only reskins. Live class toggles (`.completed`, `.skipped`,
   `.today`) drive the status bar / dot / label so completion/skip/undo update
   without a re-render.
   ============================================================ */

.week-layout-v2 {
    /* Cool page palette (scoped) */
    --wk-page-bg: #eef0f9;
    --wk-card-bg: #ffffff;
    --wk-card-border: rgba(22, 32, 94, .10);
    --wk-card-shadow: 0 1px 3px rgba(22, 32, 94, .05), 0 10px 30px rgba(22, 32, 94, .06);
    --wk-ink: #16205e;
    --wk-muted: #7c839c;
    --wk-faint: #9ba1b6;
    --wk-accent: #e0662a;

    /* Status colours: bar / dot / text / row-tint / row-border */
    --wk-completed-bar: #37a75f;
    --wk-completed-dot: #37a75f;
    --wk-completed-text: #2f9e57;
    --wk-completed-tint: #f3faf5;
    --wk-completed-border: #dcecdf;

    --wk-skipped-bar: #d3d8dc;
    --wk-skipped-dot: #c2c7cc;
    --wk-skipped-text: #9aa0a6;
    --wk-skipped-tint: #fbfbfa;
    --wk-skipped-border: rgba(0, 0, 0, .06);

    --wk-rest-bar: #e6e3dd;
    --wk-rest-dot: #d8d4cc;
    --wk-rest-text: #a9a49b;
    --wk-rest-tint: #faf9f6;
    --wk-rest-border: rgba(0, 0, 0, .05);

    --wk-upcoming-bar: #c8cdf5;
    --wk-upcoming-dot: #8b95ef;
    --wk-upcoming-text: #5561cf;
    --wk-upcoming-tint: #fbfcfe;
    --wk-upcoming-border: rgba(43, 57, 214, .16);
}

/* The page background applies to the weeks container only (not the whole
   .plan-weeks main, so the fitness progress card etc. keep the app theme). */
.week-layout-v2 {
    background-color: var(--wk-page-bg);
    padding: 12px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Week card ---------- */
.week-layout-v2 .week-card {
    background: var(--wk-card-bg);
    border: 1px solid var(--wk-card-border);
    border-radius: 16px;
    box-shadow: var(--wk-card-shadow);
    overflow: hidden;
}

/* ---------- Week header ---------- */
.week-layout-v2 .week-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 20px 12px;
    background: transparent;
    border-bottom: none;
}
/* On wider screens the row wrappers are structural only: flatten them so every
   header item flows in one wrapping row. They form a 4-line stack ≤480px. */
.week-layout-v2 .week-header__row { display: contents; }
.week-layout-v2 .week-header__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-right: auto;
}
/* Preserve the original left-to-right order once the wrappers are flattened:
   title · mileage cluster · TSS pill · phase / deferred. */
.week-layout-v2 .week-header__meta > * { order: 1; }
.week-layout-v2 .week-header__tss > * { order: 2; }
.week-layout-v2 .week-header__row--top > .week-phase,
.week-layout-v2 .week-header__row--top > .week-race-week-pill,
.week-layout-v2 .week-header__row--top > .week-deferred-indicator { order: 3; }
.week-layout-v2 .week-header__tss:empty { display: none; }
.week-layout-v2 .week-header h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--wk-ink);
    margin: 0;
    letter-spacing: -.01em;
}
.week-layout-v2 .week-date-range {
    font-size: 13px;
    font-weight: 500;
    color: var(--wk-faint);
}

/* Planned / logged / delta cluster */
.week-layout-v2 .week-mileage {
    margin-left: 0;
    font-weight: 700;
    color: #2f6fdb;
    font-size: 14px;
}
.week-layout-v2 .week-mileage--rebased .week-rebased-arrow { color: #cf6a3c; }
.week-layout-v2 .week-mileage-logged {
    font-size: 13px;
    color: var(--wk-muted);
}
.week-layout-v2 .week-mileage-delta { color: #cf6a3c; }
.week-layout-v2 .week-mileage-delta-tri--down { color: #cf6a3c; }
.week-layout-v2 .week-mileage-delta-tri--up { color: var(--wk-completed-text); }

/* Completed-week mileage badge — single state-driven pill (over / under /
   on-track). Base pill shape mirrors .week-overrun-warning (style.css:1070). */
.week-layout-v2 .week-mileage-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
/* On track: landed without triggering a rebase — green "good/completed". */
.week-layout-v2 .week-mileage-badge--on-track {
    color: var(--wk-completed-text);
    background-color: #f3faf5;
    border: 1px solid #dcecdf;
}
/* Over-reached: >10% over plan — amber caution (classic 10% injury rule). */
.week-layout-v2 .week-mileage-badge--over {
    color: #92400e;
    background-color: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
}
/* Under-target: rebase-class shortfall — terracotta/red "behind plan". */
.week-layout-v2 .week-mileage-badge--under {
    color: #b3402e;
    background-color: rgba(207, 106, 60, 0.12);
    border: 1px solid rgba(207, 106, 60, 0.3);
}

/* Phase badge kept, restyled */
.week-layout-v2 .week-phase.badge {
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* RACE WEEK pill */
.week-layout-v2 .week-race-week-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #d24b86;
    background: #fce4ee;
}

.week-layout-v2 .week-deferred-indicator {
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
}

/* Week TSS badge — reuse tier ramp, restyle pill */
.week-layout-v2 .week-tss { color: var(--wk-muted); }

/* ---------- Workouts container ---------- */
.week-layout-v2 .week-workouts {
    padding: 4px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---------- Day row ---------- */
.week-layout-v2 .day-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 0;
}
.week-layout-v2 .day-primary { flex: 1 1 auto; min-width: 0; position: relative; }
.week-layout-v2 .day-secondary {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 210px;
}

/* ---------- Workout row (calm rows) ----------
   Flex layout: [day][content grows][actions], with the status colour carried by
   the row's own left border.
   The distance hero + TSS chips live inside `.workout-content` and are
   pushed to the right edge there; actions sit at the far right of the row. */
.week-layout-v2 .workout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    /* 11px on the left, not 14px, so 4px border + padding lands the content on
       the same 15px from the outer edge that 1px border + 14px did. */
    padding: 12px 14px 12px 11px;
    border-radius: 12px;
    border: 1px solid transparent;
    /* Status rail as a real border rather than an inset pseudo-element. Against
       1px on the other three sides and a 12px radius, the browser tapers the 4px
       edge into the corner arcs, so the colour curls around the top-left and
       bottom-left corners instead of stopping square — the same wrap
       .pace-adjustment-banner gets from its 5px border-left. An absolutely
       positioned bar can't produce this: it lives inside the border box and
       clips flat against the radius. */
    border-left: 4px solid var(--_bar, var(--wk-upcoming-bar));
    background: transparent;
    position: relative;
    /* Kept for .drag-handle, which is pulled out to left: -3px. Borders sit
       outside the padding box, so this never clips the status edge itself. */
    overflow: hidden;
    transition: background-color .15s ease, border-color .15s ease;
}
.week-layout-v2 .workout:hover {
    background: rgba(0, 0, 0, .015);
}

/* Status → colour mapping. Each rule defines the status vars AND applies the
   row tint/border directly, at `.workout.<class>` specificity so it overrides
   the global sheet's `.workout.completed` tint/left-border. Order in the
   source: upcoming/rest (data-status) first, then completed, then skipped so
   skipped (which also carries .completed) wins.
   Each restates border-left-color because the `border-color` shorthand next to
   it would otherwise repaint the status edge in the hairline colour. */
.week-layout-v2 .workout {
    --_bar: var(--wk-upcoming-bar);
    --_dot: var(--wk-upcoming-dot);
    --_stxt: var(--wk-upcoming-text);
    --_label: 'Upcoming';
}
.week-layout-v2 .workout[data-status="upcoming"] {
    --_bar: var(--wk-upcoming-bar);
    --_dot: var(--wk-upcoming-dot);
    --_stxt: var(--wk-upcoming-text);
    --_tint: var(--wk-upcoming-tint);
    --_bd: var(--wk-upcoming-border);
    --_label: 'Upcoming';
    background: var(--wk-upcoming-tint);
    border-color: var(--wk-upcoming-border);
    border-left-color: var(--_bar);
}
.week-layout-v2 .workout[data-status="rest"] {
    --_bar: var(--wk-rest-bar);
    --_dot: var(--wk-rest-dot);
    --_stxt: var(--wk-rest-text);
    --_tint: var(--wk-rest-tint);
    --_bd: var(--wk-rest-border);
    --_label: 'Rest';
    background: var(--wk-rest-tint);
    border-color: var(--wk-rest-border);
    border-left-color: var(--_bar);
}
/* Live class toggles override the initial data-status colours. */
.week-layout-v2 .workout.completed {
    --_bar: var(--wk-completed-bar);
    --_dot: var(--wk-completed-dot);
    --_stxt: var(--wk-completed-text);
    --_tint: var(--wk-completed-tint);
    --_bd: var(--wk-completed-border);
    --_label: 'Done';
    background: var(--wk-completed-tint);
    border-color: var(--wk-completed-border);
    border-left-color: var(--_bar);
}
.week-layout-v2 .workout.completed.skipped,
.week-layout-v2 .workout.skipped {
    --_bar: var(--wk-skipped-bar);
    --_dot: var(--wk-skipped-dot);
    --_stxt: var(--wk-skipped-text);
    --_tint: var(--wk-skipped-tint);
    --_bd: var(--wk-skipped-border);
    --_label: 'Skipped';
    background: var(--wk-skipped-tint);
    border-color: var(--wk-skipped-border);
    border-left-color: var(--_bar);
}
.week-layout-v2 .workout:hover {
    filter: brightness(.985);
}

/* Today emphasis (only when not completed/skipped). */
.week-layout-v2 .workout.today:not(.completed):not(.skipped) {
    box-shadow: 0 0 0 1px var(--wk-upcoming-border) inset;
}

/* ---------- Day column ---------- */
.week-layout-v2 .workout-day {
    flex: 0 0 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 52px;
    text-align: left;
    gap: 2px;
}
.week-layout-v2 .workout-day .day-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--wk-ink);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.week-layout-v2 .workout-day .day-date {
    font-size: 11px;
    color: var(--wk-faint);
}
/* Right-side status text ("Completed" / "Skipped") carries the status dot +
   colour that previously sat under the day/date. */
.week-layout-v2 .completed-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--_stxt, var(--wk-completed-text));
}
.week-layout-v2 .completed-label::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--_dot, var(--wk-completed-dot));
    flex: 0 0 auto;
}
.week-layout-v2 .completed-label.skipped-label {
    color: var(--wk-skipped-text);
}

/* ---------- Content column (type + note + hero + tss) ----------
   Flex-grow region. Type/description sit on the left; the distance hero and
   TSS chips are pushed to the right edge with a spacer (margin-left:auto on
   the first right-aligned element). Uses row-wrap so the description and
   details flow onto their own full-width rows beneath. */
.week-layout-v2 .workout-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}
/* Metrics column — dedicated right-aligned stack for logged mileage, planned
   note, and pace. Rendered for all runs (completed and upcoming), never rest. */
.week-layout-v2 .workout-metrics {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}
.week-layout-v2 .workout-type {
    order: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--wk-ink);
}
.week-layout-v2 .mid-plan-race-badge { order: 2; }
.week-layout-v2 .edit-workout-type { order: 2; }

/* Distance hero — sits inside the metrics column (placement handled there). */
.week-layout-v2 .workout-distance-pill {
    align-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    text-align: right;
}
.week-layout-v2 .workout-distance {
    font-size: 19px;
    font-weight: 800;
    color: var(--wk-ink);
    font-variant-numeric: tabular-nums;
}
.week-layout-v2 .workout.completed .workout-distance,
.week-layout-v2 .workout.completed .workout-unit {
    color: var(--wk-completed-text);
    font-family: inherit;
    font-size: inherit;
}
.week-layout-v2 .workout.completed .workout-distance { font-size: 19px; font-weight: 800; }
.week-layout-v2 .workout-unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--wk-muted);
}
/* Drop the global completed distance-pill treatment (tick bg, height) in v2. */
.week-layout-v2 .workout.completed .workout-distance-pill {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
}
.week-layout-v2 .workout.completed .workout-distance-pill::before {
    display: none;
}
/* TSS chip group sits at the far right of the row, after the planned note. */
.week-layout-v2 .workout-content > .workout-tss-chip-group {
    order: 7;
    align-self: center;
    margin-left: 0;
}
/* Planned distance — stacked in the metrics column beneath the logged mileage. */
.week-layout-v2 .planned-distance-note {
    align-self: center;
    text-align: right;
    font-size: 11px;
    color: var(--wk-faint);
}
/* Fallback: if re-inserted as a direct child of `.workout` (before actions),
   keep it aligned to the right edge of the row rather than the far left. */
.week-layout-v2 .workout > .workout-tss-chip-group {
    align-self: center;
    margin-left: 0;
    order: 0;
}

/* Overall pace line (completed runs only) — sits under the planned note. */
.week-layout-v2 .workout-pace-line {
    font-size: 11px;
    color: var(--wk-faint);
    font-variant-numeric: tabular-nums;
}

/* Description + details / attribution / race chips break to full-width rows. */
.week-layout-v2 .workout-description {
    order: 9;
    flex: 0 0 100%;
    font-size: 12.5px;
    color: var(--wk-muted);
    line-height: 1.45;
    margin: 0;
}
.week-layout-v2 .workout-details,
.week-layout-v2 .workout-attribution,
.week-layout-v2 .race-result-chip,
.week-layout-v2 .session-creation-form,
.week-layout-v2 .add-activity-form {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
}

/* Mid-plan race badge + KEY RACE styling kept; ensure inline with type. */
.week-layout-v2 .mid-plan-race-badge {
    align-self: center;
}

/* Race rows: the legacy sheet paints all race text white (#fff) for its purple
   gradient card, but the v2 row sits on a light tint — so that text is invisible.
   Restore readable colours: body text matches a normal day, and the title takes
   the race accent (same magenta as the RACE WEEK pill). Higher specificity than
   the legacy `.workout.race:not(.completed) X` rules so these win. */
.week-layout-v2 .workout.race:not(.completed) .day-name { color: var(--wk-ink); }
.week-layout-v2 .workout.race:not(.completed) .day-date { color: var(--wk-faint); }
.week-layout-v2 .workout.race:not(.completed) .workout-type { color: #d24b86; }
.week-layout-v2 .workout.race:not(.completed) .workout-description { color: var(--wk-muted); }
.week-layout-v2 .workout.race:not(.completed) .workout-distance { color: var(--wk-ink); }
.week-layout-v2 .workout.race:not(.completed) .workout-unit { color: var(--wk-muted); }

/* ---------- TSS chip pills (reuse tier ramp, restyle) ---------- */
.week-layout-v2 .workout-tss-chip {
    border-radius: 20px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    margin-left: 0;
    border: 1px solid transparent;
}
.week-layout-v2 .workout-tss-chip-group { margin-left: 0; }

/* Design 4-bucket swatches mapped onto the existing 6-tier ramp:
   light (1-2), moderate (3), hard (4), peak (5-6). Each tier carries a
   subtle border in its own hue, matching the +/- mileage badge treatment. */
.week-layout-v2 .workout-tss-chip.tss-tier-1,
.week-layout-v2 .workout-tss-chip.tss-tier-2 {
    background: #e6f6ec; border-color: rgba(47, 158, 87, 0.3); color: #2f9e57;
}
.week-layout-v2 .workout-tss-chip.tss-tier-3 {
    background: #f6f3cc; border-color: rgba(138, 125, 31, 0.3); color: #8a7d1f;
}
.week-layout-v2 .workout-tss-chip.tss-tier-4 {
    background: #fceadb; border-color: rgba(196, 117, 18, 0.3); color: #c47512;
}
.week-layout-v2 .workout-tss-chip.tss-tier-5,
.week-layout-v2 .workout-tss-chip.tss-tier-6 {
    background: #fbe0e0; border-color: rgba(207, 75, 75, 0.3); color: #cf4b4b;
}

/* Split planned|done seam kept subtle. Collapse the touching borders so the
   join reads as one pill rather than a doubled line. */
.week-layout-v2 .workout-tss-chip.tss-chip-planned {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
    opacity: .8;
}
.week-layout-v2 .workout-tss-chip.tss-chip-done {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

/* ---------- Actions (far right of the row) ---------- */
.week-layout-v2 .workout-actions {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 76px;
}
/* Completed rows: stack the TSS chip group beneath the "Completed" label,
   right-aligned. Non-completed rows keep the row-of-buttons layout. */
.week-layout-v2 .workout.completed .workout-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.week-layout-v2 .workout-actions > .workout-tss-chip-group {
    display: inline-flex;
    gap: 0;
}
.week-layout-v2 .session-selector {
    flex: 0 0 auto;
    align-self: center;
}
.week-layout-v2 .drag-handle {
    position: absolute;
    left: -3px;
    top: 8px;
    opacity: 0;
    color: var(--wk-faint);
    transition: opacity .15s ease;
    z-index: 1;
}
.week-layout-v2 .workout:hover .drag-handle { opacity: 1; }

/* ---------- Structure / splits disclosure ---------- */
.week-layout-v2 .workout-details summary {
    color: var(--wk-accent);
    font-size: 12px;
    font-weight: 600;
}
.week-layout-v2 .workout-structure {
    background: #faf9f6;
    border: 1px solid var(--wk-rest-border);
    border-radius: 10px;
    padding: 8px 10px;
    margin-top: 6px;
}
.week-layout-v2 .structure-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}
.week-layout-v2 .structure-item .label {
    font-size: 11px;
    font-weight: 700;
    color: var(--wk-muted);
    min-width: 66px;
    position: relative;
    padding-left: 10px;
}
.week-layout-v2 .structure-item .label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--wk-rest-dot);
}
.week-layout-v2 .structure-item.main .label::before { background: var(--wk-accent); }
.week-layout-v2 .structure-item.warmup .label::before { background: var(--wk-upcoming-dot); }
.week-layout-v2 .structure-item.cooldown .label::before { background: var(--wk-completed-dot); }
.week-layout-v2 .structure-item .value {
    font-family: var(--font-family-mono, ui-monospace, monospace);
    font-size: 12px;
    color: var(--wk-ink);
    text-align: right;
    padding-left: 0;
}
/* Greyed-out warmup/cooldown rows when no such activity was logged. */
.week-layout-v2 .structure-item--empty .value {
    color: var(--wk-faint);
    font-style: italic;
}
/* Keep the workout (main) row consistent with warmup/cooldown: single row,
   label left, value right — rather than the stacked/centered default. */
.week-layout-v2 .structure-item.main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.week-layout-v2 .structure-item.main .value {
    text-align: right;
    max-width: 60%;
    font-weight: var(--font-weight-semibold);
    line-height: normal;
}

/* ---------- Attribution / Strava / race chips ---------- */
.week-layout-v2 .workout-attribution {
    font-size: 11px;
    color: var(--wk-faint);
    margin-top: 4px;
}
.week-layout-v2 .strava-view-link { color: var(--wk-accent); }
.week-layout-v2 .race-result-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: 0 1 auto;
    width: auto;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #2f6fdb;
    background: #eaf1fc;
}
/* Editable race badge (mid-plan races): signal it's clickable. */
.week-layout-v2 .race-result-chip--editable {
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.week-layout-v2 .race-result-chip--editable:hover {
    background: #dce8fb;
    border-color: #b8d0f5;
}
.week-layout-v2 .race-result-chip--editable:focus-visible {
    outline: 2px solid #2f6fdb;
    outline-offset: 2px;
}
/* No result captured yet — a prompt, not a fact. */
.week-layout-v2 .race-result-chip--empty {
    background: transparent;
    border: 1px dashed var(--wk-border, #cbd5e1);
    color: var(--wk-muted, #64748b);
}

/* ---------- Actions column (+ Add / Edit) ---------- */
.week-layout-v2 .day-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: center;
    width: 76px;
}
/* Per-activity swipe wrappers are layout-transparent on desktop, so the slot
   tag and the `.workout` card stay direct flex children of the day columns. */
.week-layout-v2 .day-sec-slot,
.week-layout-v2 .day-slot-face { display: contents; }
/* Desktop uses the single row-level tray. */
.week-layout-v2 .day-actions--slot { display: none; }
/* Mobile-only multi-activity affordances: the day-card header (desktop keeps
   each card's own `.workout-day` block), the in-card slot tag (desktop shows
   the tag above the card), and the skipped-session collapse (desktop always
   shows the full card). The collapse shell is layout-transparent here so the
   `.workout` stays a direct flex child of its day column. */
.week-layout-v2 .day-card-header,
.week-layout-v2 .workout-slot-tag,
.week-layout-v2 .slot-collapse__row { display: none; }
.week-layout-v2 .slot-collapse { display: contents; }
.week-layout-v2 .add-activity-affordance {
    border: 1px dashed rgba(0, 0, 0, .18);
    color: var(--wk-muted);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    width: auto;
    align-self: stretch;
    text-align: center;
    white-space: nowrap;
    background: transparent;
}
.week-layout-v2 .add-activity-affordance:hover,
.week-layout-v2 .add-activity-affordance:focus {
    border-color: var(--wk-accent);
    color: var(--wk-accent);
    background: transparent;
}
.week-layout-v2 .btn-day-edit {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wk-muted);
    border: 1px solid var(--wk-card-border);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.week-layout-v2 .btn-day-edit:hover,
.week-layout-v2 .btn-day-edit:focus {
    border-color: var(--wk-accent);
    color: var(--wk-accent);
}

/* Actions kept in the DOM for the Edit menu to forward-click, but hidden. */
.week-layout-v2 .workout-actions .activity-delete.is-hidden-action,
.week-layout-v2 .workout-actions .change-to-quality.is-hidden-action,
.week-layout-v2 .edit-workout-type.is-hidden-action {
    display: none;
}

/* ---------- Day edit popover menu ---------- */
.day-edit-menu {
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--wk-card-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 4px;
    min-width: 150px;
}
.day-edit-action {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #111827;
}
.day-edit-action:hover {
    background-color: #f3f4f6;
}

/* ---------- secondary activities ---------- */
/* The `border` shorthand here would flatten the primary row's status edge back
   to a hairline, so the left side is restated — same 4px / --_bar wrap, and the
   9px padding-left keeps content on the row's original 13px. */
.week-layout-v2 .secondary-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    grid-template-columns: none;
    padding: 10px 12px 10px 9px;
    border: 1px solid var(--wk-rest-border);
    border-left: 4px solid var(--_bar);
    border-radius: 12px;
    background: var(--wk-card-bg);
}
/* Completed / skipped secondary activities pick up the same status tint +
   border as the primary row. (These rules mirror the primary status colours;
   their specificity exceeds the flat `.secondary-activity` background above.) */
.week-layout-v2 .secondary-activity.completed {
    background: var(--wk-completed-tint);
    border-color: var(--wk-completed-border);
    border-left-color: var(--_bar);
}
.week-layout-v2 .secondary-activity.completed.skipped,
.week-layout-v2 .secondary-activity.skipped {
    background: var(--wk-skipped-tint);
    border-color: var(--wk-skipped-border);
    border-left-color: var(--_bar);
}
.week-layout-v2 .secondary-activity.completed .workout-distance,
.week-layout-v2 .secondary-activity.completed .workout-unit {
    color: var(--wk-completed-text);
}
/* Neutralise the global completed-secondary tick pill treatment in v2. */
.week-layout-v2 .secondary-activity.completed .workout-distance-pill {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
}
.week-layout-v2 .secondary-activity.completed .workout-distance-pill::before {
    display: none;
}
.week-layout-v2 .secondary-activity .workout-distance {
    font-size: 15px;
}

/* ---------- Double-day split treatment (desktop) ---------- */
.week-layout-v2 .day-slot-tag {
    display: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--wk-faint);
    text-transform: uppercase;
}
/* No outer card: the two halves are standalone cards laid out like a normal
   day row (same gap, no wrapping border/background/padding) so multi-activity
   days align horizontally with single-activity days. */
.week-layout-v2 .day-row--double {
    align-items: stretch;
    gap: 10px;
}
/* Primary is a flex column (tag above the card) mirroring the secondary column
   exactly — same gap — so the two cards share identical tops and, with the
   cards stretching to fill, identical heights. */
.week-layout-v2 .day-row--double .day-primary {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.week-layout-v2 .day-row--double .day-primary .workout {
    flex: 1 1 auto;
}
.week-layout-v2 .day-row--double .day-secondary {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-start;
}
.week-layout-v2 .day-row--double .day-slot-tag {
    display: block;
    padding: 6px 6px 0 10px;
}
/* Secondary activities keep the same bordered card + status tint as the
   primary row (base `.secondary-activity` border/background, status colours
   from `.secondary-activity.completed` etc.). */
.week-layout-v2 .day-row--double .secondary-activity {
    box-shadow: none;
    /* Grow to fill the (stretched) secondary column so the activity's tint
       matches the primary slot's height instead of collapsing to content. */
    flex: 1 1 auto;
}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width: 768px) {
    .week-layout-v2 .day-row { flex-direction: column; }
    .week-layout-v2 .day-secondary { min-width: 0; }
    .week-layout-v2 .day-row--double { flex-direction: column; }
    .week-layout-v2 .day-row--double .day-primary {
        flex: 1 1 auto;
    }
    /* ---- Swipe-to-reveal day actions (Edit / Add) ---- */
    /* Tray width; JS reads the same value from --tray-w. */
    .week-layout-v2 { --tray-w: 132px; }

    /* Each activity is its own swipe container, clipping its own tray. Trays
       are per-slot so nothing bleeds through the gap between stacked cards. */
    .week-layout-v2 .day-swipe-slot {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
    }
    .week-layout-v2 .day-sec-slot { display: block; }   /* undo display:contents */

    /* Sliding layer — translates left to reveal the slot's tray. */
    .week-layout-v2 .day-slot-face {
        display: block;
        position: relative;
        z-index: 1;
        background: var(--wk-page-bg);
        transition: transform .22s ease;
        will-change: transform;
    }
    .week-layout-v2 .day-swipe-slot.day-swipe-open .day-slot-face {
        transform: translateX(calc(-1 * var(--tray-w, 132px)));
    }
    /* Mobile uses the per-activity trays, not the row-level one. */
    .week-layout-v2 .day-row > .day-actions--row { display: none; }
    .week-layout-v2 .day-actions--slot { display: flex; }

    /* Tray — absolute, behind the sliding card. Overrides the desktop
       sidebar layout of .day-actions within the mobile query only. */
    .week-layout-v2 .day-actions,
    .week-layout-v2 .day-row--double .day-actions {
        --tray-edit: #2f6fdb;
        --tray-add: #37a75f;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 0;
        width: var(--tray-w, 132px);
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        padding: 0;
        background: #f1efeb;
        border-radius: 14px;
        border-left: none;
    }

    /* Tray buttons: icon-above-label columns, each filling half the tray
       width and the full tray height. */
    .week-layout-v2 .day-actions .btn-day-edit,
    .week-layout-v2 .day-actions .add-activity-affordance {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: none;
        border-radius: 0;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        align-self: stretch;
        cursor: pointer;
    }
    /* Icon glyphs via masked SVG so they inherit the label colour. */
    .week-layout-v2 .day-actions .btn-day-edit::before,
    .week-layout-v2 .day-actions .add-activity-affordance::before {
        content: "";
        width: 20px;
        height: 20px;
        background: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    /* Edit = blue pencil on a pale blue background. */
    .week-layout-v2 .day-actions .btn-day-edit {
        color: var(--tray-edit);
        background: #eaf1fc;
    }
    .week-layout-v2 .day-actions .btn-day-edit:hover,
    .week-layout-v2 .day-actions .btn-day-edit:focus {
        background: #dce8fb;
    }
    .week-layout-v2 .day-actions .btn-day-edit::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    }

    /* Add = green plus on a pale green background.
       Suppress the literal "+ " from the button text. */
    .week-layout-v2 .day-actions .add-activity-affordance {
        color: var(--tray-add);
        background: #e6f5ec;
        font-size: 0;
    }
    .week-layout-v2 .day-actions .add-activity-affordance:hover,
    .week-layout-v2 .day-actions .add-activity-affordance:focus {
        background: #d7efe0;
    }
    .week-layout-v2 .day-actions .add-activity-affordance::after {
        content: "Add";
        font-size: 12px;
        font-weight: 600;
    }
    .week-layout-v2 .day-actions .add-activity-affordance::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    }

    /* ---- Mobile per-day action modals (Add form / Edit menu) ----
       The Add form and Edit menu are wrapped in the shared
       `.session-change-modal` overlay on mobile so they render centered above
       the swiped-open card instead of behind the low-z-index tray. The
       `__content` shell supplies the card chrome; these rules neutralise the
       inline/popover chrome the form and menu carry for their desktop layout. */
    .day-action-modal .add-activity-form {
        margin: 0;
        border: none;
    }
    .day-edit-menu-modal .day-edit-menu {
        position: static;
        box-shadow: none;
        border: none;
        min-width: 200px;
        z-index: auto;
    }
    .day-edit-menu-modal .day-edit-action {
        padding: 12px 14px;
        font-size: 1rem;
    }

    /* ============================================================
       Multi-activity day card
       ------------------------------------------------------------
       A day carrying more than one session is wrapped in a single card:
       a tinted header band with the day's rolled-up totals, then one
       activity card per session. Each session keeps its own swipe slot,
       so the cards are inset from the wrapper's edges while the header
       runs full-bleed.
       ============================================================ */
    .week-layout-v2 .day-row--double {
        gap: 8px;
        padding: 0 0 10px;
        background: var(--wk-card-bg);
        border: 1px solid var(--wk-card-border);
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
        overflow: hidden;
    }
    .week-layout-v2 .day-row--double > .day-primary,
    .week-layout-v2 .day-row--double > .day-secondary {
        margin: 0 10px;
    }
    .week-layout-v2 .day-row--double .day-secondary { gap: 8px; }
    /* The sliding face sits on the day card, not the page, so its opaque
       backing (which hides the tray) has to match. */
    .week-layout-v2 .day-row--double .day-slot-face {
        background: var(--wk-card-bg);
        border-radius: 14px;
    }
    /* The tag now lives inside each card, in its own gutter. */
    .week-layout-v2 .day-row--double .day-slot-tag { display: none; }
    .week-layout-v2 .workout-slot-tag {
        display: block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--wk-faint);
        line-height: 1.5;
    }
    /* The day/date and totals moved up into the header band. */
    .week-layout-v2 .day-row--double .workout-day { display: none; }
    /* Swipe-tray Edit covers deletion, so drop the inline button. */
    .week-layout-v2 .day-row--double .secondary-activity .activity-delete {
        display: none;
    }

    /* ---- Header band ---- */
    .week-layout-v2 .day-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 10px 14px;
        background: var(--wk-rest-tint);
        border-bottom: 1px solid var(--wk-card-border);
    }
    .week-layout-v2 .day-card-header--done {
        background: var(--wk-completed-tint);
        border-bottom-color: var(--wk-completed-border);
    }
    .week-layout-v2 .day-card-header__day {
        display: flex;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
    }
    .week-layout-v2 .day-card-header .day-name {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--wk-ink);
    }
    .week-layout-v2 .day-card-header .day-date {
        font-size: 12px;
        font-weight: 500;
        color: var(--wk-muted);
        white-space: nowrap;
    }
    .week-layout-v2 .day-card-sessions {
        padding: 2px 8px;
        border-radius: 20px;
        background: var(--wk-card-bg);
        border: 1px solid var(--wk-card-border);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--wk-muted);
        white-space: nowrap;
    }
    .week-layout-v2 .day-card-header__totals {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* ---- Skipped-session collapse ---- */
    .week-layout-v2 .slot-collapse { display: block; }
    .week-layout-v2 .slot-collapse.is-collapsed > .workout { display: none; }
    .week-layout-v2 .slot-collapse__row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--wk-skipped-border);
        border-radius: 14px;
        background: var(--wk-skipped-tint);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    /* When expanded the row becomes the card's cap. */
    .week-layout-v2 .slot-collapse:not(.is-collapsed) > .slot-collapse__row {
        border-bottom: none;
        border-radius: 14px 14px 0 0;
    }
    .week-layout-v2 .slot-collapse:not(.is-collapsed) > .workout {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .week-layout-v2 .slot-collapse__tag {
        flex: 0 0 auto;
        min-width: 22px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--wk-faint);
    }
    .week-layout-v2 .slot-collapse__type {
        font-size: 13px;
        font-weight: 700;
        color: var(--wk-skipped-text);
        white-space: nowrap;
    }
    .week-layout-v2 .slot-collapse__dist {
        font-size: 12px;
        color: var(--wk-faint);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .week-layout-v2 .slot-collapse__status {
        margin-left: auto;
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--wk-skipped-text);
    }
    .week-layout-v2 .slot-collapse__chev {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        background: var(--wk-faint);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform .18s ease;
    }
    .week-layout-v2 .slot-collapse:not(.is-collapsed) .slot-collapse__chev {
        transform: rotate(180deg);
    }
}

/* ============================================================
   Mobile 3a — stacked day cards
   ============================================================ */
@media (max-width: 480px) {
    .week-layout-v2 { padding: 8px; gap: 12px; }
    /* 3-line header stack: (1) week + type badge, (2) mileage cluster,
       (3) TSS pill. */
    .week-layout-v2 .week-header {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 14px 14px 8px;
    }
    .week-layout-v2 .week-header__row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0;
    }
    .week-layout-v2 .week-header__row--top { justify-content: space-between; }
    .week-layout-v2 .week-header__title { margin-right: 0; }
    .week-layout-v2 .week-header__meta { gap: 10px; }
    .week-layout-v2 .week-header h2 { font-size: 18px; }
    .week-layout-v2 .week-workouts { padding: 4px 8px 12px; gap: 8px; }

    /* No `bar` column any more — the status colour is the card's own left
       border, so the 4px track plus its 10px gutter go back to the content. */
    .week-layout-v2 .workout {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "day    status"
            "type   dist"
            "type   pace"
            "tss    tss"
            "note   note"
            "struct struct"
            "attr   attr"
            "extra  extra"
            "acts   acts";
        row-gap: 4px;
        column-gap: 10px;
        padding: 12px;
        border-radius: 14px;
        border: 1px solid var(--_bd, var(--wk-card-border));
        border-left: 4px solid var(--_bar);
        background: var(--_tint, var(--wk-card-bg));
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    .week-layout-v2 .workout-day {
        grid-area: day;
        flex: initial;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-left: 0;
    }
    .week-layout-v2 .workout-content {
        display: contents;
    }
    .week-layout-v2 .workout-metrics {
        display: contents;
    }
    .week-layout-v2 .workout-pace-line { grid-area: pace; justify-self: end; }
    .week-layout-v2 .workout-type { grid-area: type; order: 0; align-self: center; }
    .week-layout-v2 .workout-description { grid-area: note; order: 0; flex-basis: auto; }
    .week-layout-v2 .workout-distance-pill {
        grid-area: dist;
        order: 0;
        margin-left: 0;
        justify-self: end;
        align-self: center;
    }
    .week-layout-v2 .planned-distance-note { grid-area: extra; order: 0; flex-basis: auto; justify-self: start; }
    .week-layout-v2 .workout-content > .workout-tss-chip-group {
        grid-area: tss;
        order: 0;
        justify-self: start;
    }
    .week-layout-v2 .workout-details { grid-area: struct; order: 0; flex-basis: auto; }
    .week-layout-v2 .workout-attribution { grid-area: attr; order: 0; flex-basis: auto; }
    .week-layout-v2 .race-result-chip { grid-area: extra; order: 0; flex-basis: auto; }
    .week-layout-v2 .workout-actions {
        grid-area: acts;
        justify-self: start;
    }
    .week-layout-v2 .session-selector { grid-area: acts; justify-self: end; }

    /* Mid-plan race badge sits on the top row after the date (the status cell),
       instead of auto-placing over the day name. Nowrap stops the label clipping. */
    .week-layout-v2 .mid-plan-race-badge {
        grid-area: status;
        order: 0;
        justify-self: end;
        align-self: center;
        margin-left: 0;
        white-space: nowrap;
    }

    /* Completed & skipped day cards: stacked layout (matches screenshots) */
    .week-layout-v2 .workout.completed {
        grid-template-areas:
            "day      status"
            "type     type"
            "note     note"
            "metrics  tss"
            "struct   struct"
            "attr     attr"
            "extra    extra";
    }
    /* Flatten actions so the status label + TSS pill can be placed individually */
    .week-layout-v2 .workout.completed .workout-actions { display: contents; }
    .week-layout-v2 .workout.completed .completed-label {
        grid-area: status;
        justify-self: end;
        align-self: center;
    }
    /* On completed cards the status cell holds the "Completed" label, so tuck the
       race badge to the right end of the type row instead. */
    .week-layout-v2 .workout.completed .mid-plan-race-badge {
        grid-area: type;
        justify-self: end;
    }
    .week-layout-v2 .workout.completed .workout-tss-chip-group {
        grid-area: tss;
        justify-self: end;
        align-self: center;
    }
    /* Distance + "of N planned" + pace as one inline cluster (left) */
    .week-layout-v2 .workout.completed .workout-metrics {
        grid-area: metrics;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: 2px 8px;
        justify-self: start;
        margin-left: 0;
        min-width: 0;
    }
    .week-layout-v2 .workout.completed .workout-metrics .workout-distance-pill {
        align-self: baseline;
        margin-left: 0;
        padding-left: 0;
    }
    .week-layout-v2 .workout.completed .workout-metrics .planned-distance-note,
    .week-layout-v2 .workout.completed .workout-metrics .workout-pace-line {
        align-self: baseline;
    }
    /* Rare: leftover action buttons on manual activities (e.g. delete) */
    .week-layout-v2 .workout.completed .workout-actions > button {
        grid-area: extra;
        justify-self: end;
    }

    /* ---- Multi-activity day card: per-session grid ----
       One template for every status. The day/date row is gone (the day card
       header carries it), so the type name shares row 1 with the status, and
       a narrow gutter holds the AM/PM tag. Metrics always collapse into a
       single inline cluster with the TSS pill opposite, which is what the
       completed template already does — applying it across the board keeps
       the two cards in a day reading identically. */
    .week-layout-v2 .day-row--double .workout {
        grid-template-columns: 24px 1fr auto;
        grid-template-areas:
            "tag type    status"
            ".   note    note"
            ".   metrics tss"
            ".   struct  struct"
            ".   attr    attr"
            ".   extra   extra"
            ".   acts    acts";
        column-gap: 8px;
    }
    .week-layout-v2 .day-row--double .workout-slot-tag {
        grid-area: tag;
        align-self: center;
    }
    .week-layout-v2 .day-row--double .workout-type {
        grid-area: type;
        font-size: 15px;
    }
    .week-layout-v2 .day-row--double .workout.completed .workout-type {
        color: var(--_stxt, var(--wk-completed-text));
    }
    .week-layout-v2 .day-row--double .workout-metrics {
        grid-area: metrics;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: 2px 8px;
        justify-self: start;
        margin-left: 0;
        min-width: 0;
    }
    .week-layout-v2 .day-row--double .workout-metrics > * {
        align-self: baseline;
        margin-left: 0;
        padding-left: 0;
    }
    .week-layout-v2 .day-row--double .workout-tss-chip-group {
        grid-area: tss;
        justify-self: end;
        align-self: center;
    }
    /* A secondary card's action set is fixed and tiny (a status label or a tick,
       plus the TSS pill), so flatten it into the grid the way completed cards
       already do rather than leaving a stray row at the bottom. */
    .week-layout-v2 .day-row--double .secondary-activity .workout-actions {
        display: contents;
    }
    .week-layout-v2 .day-row--double .secondary-activity .complete-workout {
        grid-area: status;
        justify-self: end;
        align-self: center;
    }
}