/* =====================================================================
   PACEY — PLAN PAGE
   ---------------------------------------------------------------------
   The Plan page's pinboard treatment, scoped to #pacey-content: the race
   card, the training-paces block, the trajectory row, the calendar weeks and
   day cards, and the build status. The shared board materials come from
   pinboard-theme.css. Tokens are inherited here, never redefined.
   ===================================================================== */

/* ---------------------------------------------------------------------
   BASE STYLES — moved out of pacey.css so this file owns the Plan page
   end to end. They sit before the theme rules below on purpose: the
   base must keep losing to the scoped theme, as it did in pacey.css.
   --------------------------------------------------------------------- */

/* ========== COACH PLAN PAGE ========== */
/* Two stacked blocks: the past-2-weeks history, then the editable
   upcoming-week plan. Reuses the card/title visual language of the rest
   of the dashboard. */

.pacey-plan-block {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

.pacey-plan-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pacey-space-md);
}

.pacey-plan-header-row .pacey-refresh-btn {
    width: auto;
    padding: 0.4rem 0.9rem;
    font-size: var(--pacey-text-label);
}

.pacey-coach-loading,
.pacey-coach-empty {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-muted);
    /* Tight padding so the loading box hugs the aura + status line instead
       of leaving a large empty band above and below it */
    padding: 1.25rem 1rem;
    background: var(--pacey-surface);
    border: 0.0625rem dashed var(--pacey-border);
    border-radius: var(--pacey-radius);
    text-align: center;
}

/* Circling halo — a rotating conic gradient ring around the loading
   container. Uses a ::before pseudo-element positioned slightly outside
   the container, with a conic gradient that sweeps from transparent to
   the blue accent. The container's own background sits on top via
   z-index stacking so only the ring halo is visible. The rotation
   runs on a 2s linear loop, synchronized with the shimmer text. */
.pacey-coach-loading--active {
    position: relative;
    border-color: transparent;
    overflow: hidden;
}

.pacey-coach-loading--active::before {
    content: '';
    position: absolute;
    inset: -0.125rem;
    border-radius: inherit;
    /* Tight comet: the lit band is 72%-90% (about 65 degrees) with a
       symmetric fade, so only ONE arc is visible at a time. The old
       60%-100% band wrapped across the 0-degree point, stretching from
       the bottom edge to the top edge at once — reading as two halos. */
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 72%,
        var(--pacey-blue) 82%,
        transparent 90%,
        transparent 100%
    );
    animation: pacey-halo-spin 2s linear infinite;
    z-index: 0;
}

/* Keep the shimmer text above the rotating halo */
.pacey-coach-loading--active > * {
    position: relative;
    z-index: 1;
}

/* Solid background layer to mask the inner part of the conic gradient
   so only the ring shows */
.pacey-coach-loading--active::after {
    content: '';
    position: absolute;
    inset: 0.0625rem;
    border-radius: calc(var(--pacey-radius) - 0.0625rem);
    background: var(--pacey-surface);
    z-index: 0;
}

@keyframes pacey-halo-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Plan page loading skeleton ---- */
/* A light aura revolving around the loading container's border (adapted
   from the motion-primitive effect). The glow square is masked to the
   1px border ring via the mask layers below, so only the ring glows —
   the container interior stays clean. */
.pacey-coach-loading--plan {
    position: relative;
    border-color: transparent;
    overflow: hidden;
}

/* Mask layer that confines the glow square to the 1px border ring:
   layer 1 (clipped to padding-box) is fully transparent, layer 2
   (clipped to border-box) is fully opaque — their intersection is
   exactly the ring between the two boxes. */
.pacey-plan-skeleton-border {
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
    -webkit-mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
}

/* The light source — a square traveling around the container's border via
   offset-path; its soft shadow is what makes the ring glow. */
.pacey-plan-skeleton-glow {
    position: absolute;
    width: 6.25rem;
    height: 6.25rem;
    background: var(--pacey-blue);
    offset-path: rect(0px auto auto 0px round 100px);
    box-shadow:
        0 0 1.875rem 0.75rem var(--pacey-skeleton-glow),
        0 0 4.375rem 2.1875rem var(--pacey-skeleton-glow);
    animation: pacey-plan-sweep 3.5s linear infinite;
}

@keyframes pacey-plan-sweep {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
}

.pacey-coach-loading-progress {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-body);
    color: var(--pacey-muted);
}

/* Slim build-status line shown above the calendar while the remaining
   plan weeks are still generating (the calendar is already visible with
   the past activities + first weeks at that point). */
.pacey-coach-build-status {
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}

/* Race status card — the plan page header block: race info, current
   fitness chips, the AI coach line, and drift advice in one card.
   Hierarchy: race name (prominent) > race meta > fitness chips > insight. */
.pacey-plan-race-card {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
    padding: var(--pacey-space-md) var(--pacey-space-lg);
    margin: 0 0 14px;
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    background: var(--pacey-surface);
    box-shadow: var(--pacey-shadow);
    font-family: var(--font-fuzzy);
}

.pacey-plan-race-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pacey-plan-race-name {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--pacey-text);
}

.pacey-plan-race-meta {
    font-size: var(--pacey-text-body);
    line-height: 1.45;
    color: var(--pacey-muted);
}

/* Training paces drawer — collapsible section in the race card showing
   the pace range per type and the runs that produced them. Each run row
   links to the activities page. */
.pacey-plan-fitness {
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    overflow: hidden;
}

/* Hidden-state overrides — author display values would otherwise defeat
   the hidden attribute (the UA [hidden]{display:none} rule loses to a
   declared display), leaving elements visible when they should be gone. */
.pacey-plan-race-card[hidden],
.pacey-plan-trajectory[hidden],
.pacey-plan-history-note[hidden] { display: none; }

/* History-only note — replaces the race card when the page is a training
   log rather than a plan (no-goal mode). A slim centred line in the board's
   handwriting face rather than a card, because there is nothing here to
   act on — it just names what the calendar below is. */
.pacey-plan-history-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin: 0 0 14px;
    padding: var(--pacey-space-md) var(--pacey-space-lg);
    font-family: var(--font-fuzzy);
    text-align: center;
}

.pacey-plan-history-note-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--pacey-text);
}

.pacey-plan-history-note-text {
    font-size: var(--pacey-text-body);
    line-height: 1.45;
    color: var(--pacey-muted);
}

/* The two goal doors under the note — compact inline actions that wrap
   beneath the text on narrow screens rather than stretching full width. */
.pacey-plan-history-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pacey-space-sm);
    margin-top: var(--pacey-space-sm);
}

.pacey-plan-fitness-toggle {
    display: flex;
    /* Wrap so the summary can take its own line at every width, not just on
       phones — this is what puts the paces below the label. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pacey-space-sm);
    width: 100%;
    min-height: 2.5rem;                 /* comfortable touch target */
    padding: 0.5rem 0.75rem;
    border: none;
    background: var(--pacey-light);
    cursor: pointer;
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
    text-align: left;
    transition: background var(--pacey-transition);
}

.pacey-plan-fitness-toggle:hover { background: var(--pacey-sky); }
.pacey-plan-fitness-toggle:active { background: var(--pacey-border); }

.pacey-plan-fitness-toggle:focus-visible {
    outline: 0.125rem solid var(--pacey-blue);
    outline-offset: -0.125rem;
}

.pacey-plan-fitness-toggle-label {
    font-weight: 700;
    /* The label keeps its own line; the summary wraps below it */
    flex: 0 0 auto;
    white-space: nowrap;
}

.pacey-plan-fitness-toggle-summary {
    /* The summary drops to its own line at every width — at laptop size it
       used to sit on the same line as the label and ran together. */
    flex: 1 1 100%;
    order: 3;
    text-align: left;
    /* Flex text children default to min-width:auto (content width), which
       forces horizontal overflow instead of wrapping — allow it to shrink
       and wrap long tokens gracefully. */
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--pacey-muted);
    font-size: var(--pacey-text-label);
    text-align: left;
}

.pacey-plan-fitness-chevron {
    width: 1rem;
    height: 1rem;
    flex: none;
    transition: transform 0.2s ease;
}

.pacey-plan-fitness-toggle[aria-expanded="true"] .pacey-plan-fitness-chevron {
    transform: rotate(180deg);
}

/* The body is a shared .pacey-disclosure — its padding and gaps live on the
   clipped inner so a collapsed drawer folds to nothing. */
.pacey-plan-fitness-inner {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

.pacey-plan-fitness-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pacey-space-sm);
}

.pacey-plan-fitness-group-label {
    font-weight: 700;
    font-size: var(--pacey-text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pacey-text);
}

.pacey-plan-fitness-group-range {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-blue);
}

.pacey-plan-fitness-note {
    margin: 0.15rem 0 0;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
}

.pacey-plan-fitness-runs {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;                       /* spacing between touch targets */
}

.pacey-plan-fitness-run {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2rem;                   /* WCAG 2.2 AA target size */
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: var(--pacey-radius-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-text);
    text-align: left;
    transition: background var(--pacey-transition);
}

.pacey-plan-fitness-run:hover { background: var(--pacey-light); }
.pacey-plan-fitness-run:hover .pacey-plan-fitness-run-name { color: var(--pacey-blue); }

.pacey-plan-fitness-run:focus-visible {
    outline: 0.125rem solid var(--pacey-blue);
    outline-offset: -0.125rem;
}

.pacey-plan-fitness-run-date {
    color: var(--pacey-muted);
    flex: none;
}

.pacey-plan-fitness-run-name {
    flex: 1 1 auto;
    /* min-width:0 lets the ellipsis actually engage — without it the flex
       item refuses to shrink below its content and the row overflows. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--pacey-transition);
}

.pacey-plan-fitness-run-meta {
    color: var(--pacey-muted);
    flex: none;
}

/* Trailing arrow signals the row opens the run on the activities page */
.pacey-plan-fitness-run-arrow {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--pacey-muted);
    flex: none;
    transition: transform var(--pacey-transition), color var(--pacey-transition);
}

.pacey-plan-fitness-run:hover .pacey-plan-fitness-run-arrow,
.pacey-plan-fitness-run:focus-visible .pacey-plan-fitness-run-arrow {
    transform: translateX(0.15rem);
    color: var(--pacey-blue);
}

/* ---- Training paces drawer: phone layout ---- */
/* On narrow screens the single-row toggle and run rows wrap into a messy
   right-aligned tangle. Stack them: toggle label + chevron on one line
   with the summary on its own line below; run rows get name + arrow on
   line 1 and date·pace on line 2. */
@media (max-width: 30rem) {
    .pacey-plan-fitness-toggle {
        row-gap: 0.2rem;
    }
    .pacey-plan-fitness-toggle-label {
        flex: 1 1 auto;
        min-width: 0;
    }
    .pacey-plan-fitness-toggle-summary {
        font-size: var(--pacey-text-label);
    }
    .pacey-plan-fitness-run {
        flex-wrap: wrap;
        row-gap: 0.15rem;
    }
    .pacey-plan-fitness-run-name {
        flex: 1 1 auto;
        min-width: 0;
    }
    .pacey-plan-fitness-run-meta {
        flex: 1 1 100%;
        font-size: var(--pacey-text-caption);
    }
    .pacey-plan-fitness-run-arrow {
        align-self: center;
    }
}

/* Flash highlight on the activities page when arriving from the drawer */
.pacey-activity-item--flash {
    animation: pacey-activity-flash 2s ease-out;
}

@keyframes pacey-activity-flash {
    0% { background: var(--pacey-sky); }
    100% { background: transparent; }
}

.pacey-plan-insight {
    margin: 0;
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
    line-height: 1.5;
    /* A left rule marks this as the coach's own read, so it doesn't read as
       another status line sitting next to the trajectory below it. */
    border-left: 0.1875rem solid var(--pinboard-line);
    padding-left: 0.6rem;
    padding-top: 0.5rem;
}

/* Trajectory status row — inside the race card, always visible when
   fitness data exists. A colored dot + label + one supporting line, like
   Garmin's training-status / Whoop recovery pattern; the rebuild button
   appears only on material drift (behind/ahead). */
.pacey-plan-trajectory {
    /* A grid rather than a wrapping flex row: the dot and the status label
       form one line, and the advice sits on its own line beneath. As a flex
       row the label and the long note ran together and read as one sentence. */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin: 0;
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
}

.pacey-plan-trajectory-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--pacey-accent-green);
    flex: none;
}

.pacey-plan-trajectory--behind .pacey-plan-trajectory-dot { background: var(--pacey-accent-amber); }
.pacey-plan-trajectory--ahead .pacey-plan-trajectory-dot { background: var(--pacey-blue); }
.pacey-plan-trajectory--mixed .pacey-plan-trajectory-dot { background: var(--pacey-accent-amber); }

.pacey-plan-trajectory-label {
    font-weight: 700;
    font-size: var(--pacey-text-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pacey-accent-green);
}

.pacey-plan-trajectory--behind .pacey-plan-trajectory-label { color: var(--pacey-accent-amber); }
.pacey-plan-trajectory--ahead .pacey-plan-trajectory-label { color: var(--pacey-blue); }
.pacey-plan-trajectory--mixed .pacey-plan-trajectory-label { color: var(--pacey-accent-amber); }

.pacey-plan-trajectory-note {
    grid-column: 1 / -1;
    color: var(--pacey-muted);
}

.pacey-plan-trajectory-rebuild {
    grid-column: 1 / -1;
    justify-self: start;
}

/* ---- Last 2 weeks history ---- */
.pacey-coach-history {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-lg);
}

.pacey-history-day {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pacey-history-day-header {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-label);
    color: var(--pacey-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pacey-history-run {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    padding: 0.6rem 0.75rem;
}

.pacey-history-run-main {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
    flex-wrap: wrap;
}

.pacey-history-run-type {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-blue);
    background: var(--pacey-light);
    padding: 0.15rem 0.5rem;
    border-radius: 62.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pacey-history-run-name {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
}

.pacey-history-run-meta {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
}

.pacey-history-run-toggle {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-blue);
    padding: 0.2rem 0.4rem;
    border-radius: var(--pacey-radius-sm);
    transition: background var(--pacey-transition);
}

.pacey-history-run-toggle:hover { background: var(--pacey-light); }

.pacey-history-laps {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pacey-lap-row {
    display: grid;
    grid-template-columns: 2rem 1fr 1fr 1fr;
    gap: var(--pacey-space-sm);
    align-items: center;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    padding: 0.2rem 0;
    border-bottom: 0.0625rem dashed var(--pacey-border);
}

.pacey-lap-row:last-child { border-bottom: none; }
.pacey-lap-idx { font-weight: 700; color: var(--pacey-navy); }
.pacey-lap-pace { color: var(--pacey-text); }

/* ---- Upcoming week plan ---- */
.pacey-coach-plan {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

.pacey-plan-day {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pacey-plan-day--rest {
    border-style: dashed;
    background: var(--pacey-bg);
}

.pacey-plan-day--scheduled {
    border-color: var(--pacey-accent-green);
}

.pacey-plan-day-header {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
}

.pacey-plan-day-dow {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-navy);
}

.pacey-plan-day-date {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
}

.pacey-plan-rest-label,
.pacey-plan-scheduled-badge {
    margin-left: auto;
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 62.5rem;
}

.pacey-plan-rest-label { color: var(--pacey-muted); background: var(--pacey-light); }
.pacey-plan-scheduled-badge { color: #fff; background: var(--pacey-accent-green); }

.pacey-plan-day-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pacey-plan-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--pacey-space-sm);
}

.pacey-plan-control {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-xs);
}

.pacey-plan-control-label {
    font-weight: 600;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pacey-plan-control input,
.pacey-plan-control select {
    font-size: var(--pacey-text-label);
    padding: 0.45rem 0.55rem;
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    background: var(--pacey-bg);
    color: var(--pacey-text);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    /* Some engines (Firefox/Safari) give input[type=date] a large intrinsic
       min-width; min-width:0 + max-width:100% stops it ever exceeding the
       field/container it sits in. */
    min-width: 0;
    max-width: 100%;
}

.pacey-plan-control input:focus,
.pacey-plan-control select:focus {
    border-color: var(--pacey-blue);
    box-shadow: 0 0 0 0.1875rem rgba(69, 123, 157, 0.15);
}

.pacey-plan-day-desc {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    line-height: 1.5;
    color: var(--pacey-muted);
    margin: 0;
}

.pacey-plan-add-workout,
.pacey-plan-rest-toggle {
    align-self: flex-start;
    background: none;
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    cursor: pointer;
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-label);
    color: var(--pacey-blue);
    padding: 0.35rem 0.75rem;
    transition: background var(--pacey-transition), border-color var(--pacey-transition);
}

.pacey-plan-add-workout:hover,
.pacey-plan-rest-toggle:hover {
    background: var(--pacey-light);
    border-color: var(--pacey-blue);
}

.pacey-plan-rest-toggle { color: var(--pacey-muted); }
.pacey-plan-rest-toggle:hover { color: var(--pacey-accent-red); border-color: var(--pacey-accent-red); }

.pacey-schedule-btn {
    margin-top: 0.5rem;
    width: auto;
    align-self: flex-start;
    padding: 0.7rem 1.5rem;
}

.pacey-coach-schedule-status,
.pacey-coach-error {
    font-size: var(--pacey-text-label);
    line-height: 1.5;
    padding: 0.6rem 0.85rem;
    border-radius: var(--pacey-radius-sm);
}

.pacey-coach-schedule-status {
    color: var(--pacey-accent-green);
    background: rgba(63, 123, 79, 0.08);
    border-left: 0.1875rem solid var(--pacey-accent-green);
}

/* The status line now only carries errors (the in-progress state is a button
   spinner), so it reads in the error tone rather than the old success green. */
.pacey-coach-schedule-status--error {
    color: var(--pacey-accent-red);
    background: rgba(196, 75, 75, 0.06);
    border-left-color: var(--pacey-accent-red);
}

.pacey-coach-error {
    color: var(--pacey-accent-red);
    background: rgba(196, 75, 75, 0.06);
    border-left: 0.1875rem solid var(--pacey-accent-red);
}

/* ========== COACH CALENDAR ========== */
/* A vertical agenda: date labels on the left, activity/workout cards on the
   right. Past activities are faded; suggested workouts are saturated. */

.pacey-plan-prefs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--pacey-space-md);
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: 0.85rem 1rem;
}

.pacey-plan-pref-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 8rem;
}

.pacey-plan-pref-label {
    font-weight: 600;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pacey-plan-pref-field .pacey-input { width: 100%; }

.pacey-generate-btn {
    width: auto;
    padding: 0.6rem 1.5rem;
    font-size: var(--pacey-text-body);
}

.pacey-coach-calendar {
    display: flex;
    flex-direction: column;
    /* gap: var(--pacey-space-sm); */
}

/* On touch the calendar is a drag surface, so text selection only competes
   with the gesture — a long-press would highlight words mid-drag. Disable it
   here; form controls (the inline editor) keep their own editing behaviour,
   and the workout detail sheet is unaffected. */
@media (pointer: coarse) {
    .pacey-coach-calendar { -webkit-touch-callout: none; }
    .pacey-coach-calendar,
    .pacey-coach-calendar *:not(input):not(select):not(textarea) {
        user-select: none;
        -webkit-user-select: none;
    }
}

.pacey-cal-row {
    display: flex;
    gap: var(--pacey-space-md);
    align-items: stretch;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem dashed var(--pacey-border);
}

.pacey-cal-row:last-child { border-bottom: none; }
.pacey-cal-row--today { background: var(--pacey-light); border-radius: var(--pacey-radius-sm); }

.pacey-cal-date {
    flex-shrink: 0;
    width: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pacey-cal-date-dow {
    font-weight: 700;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pacey-cal-date-num {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-heading);
    color: var(--pacey-navy);
    line-height: 1.1;
    display: inline-block;
    /* min-width: 1.4rem; */
    text-align: center;
}

.pacey-cal-date-month {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    padding-top: 0.1rem;
}

.pacey-cal-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* ========== SHARED CALENDAR CARD ========== */
/* Past activities and suggested workouts share the same two-line layout:
   title + tag on the first row, meta details on the second. Visual
   differentiation is applied per variant below. */
.pacey-cal-card {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
    border-radius: var(--pacey-radius-sm);
    padding: 0.45rem 0.6rem;
    position: relative;
}

/* Past activity variant — muted background, faded border, desaturated tag */
.pacey-cal-card--past {
    background: var(--pacey-bg);
    border: 0.0625rem solid var(--pacey-border);
}
.pacey-cal-card--past .pacey-run-tag { filter: saturate(0.8); opacity: 0.9; }
.pacey-cal-card--past .pacey-cal-card-title { color: var(--pacey-text); }
.pacey-cal-card--past .pacey-cal-card-meta { color: var(--pacey-muted); }

/* Suggested workout variant — saturated background, sky border, full-color tag */
.pacey-cal-card--suggested {
    background: var(--pacey-light);
    border: 0.0625rem solid var(--pacey-sky);
}
.pacey-cal-card--suggested .pacey-cal-card-title { color: var(--pacey-navy); }
.pacey-cal-card--suggested .pacey-cal-card-meta { color: var(--pacey-navy); }

.pacey-cal-card--scheduled { border-color: var(--pacey-accent-green); }
.pacey-cal-card--rest { background: var(--pacey-bg); border: 0.0625rem dashed var(--pacey-border); }
.pacey-cal-card[draggable="true"] { cursor: grab; }
.pacey-cal-card--dragging {
    opacity: 0.4;
    cursor: grabbing;
    /* No text selection while a drag is in flight */
    user-select: none;
    -webkit-user-select: none;
}

/* Editing variant — expanded form (hidden in UI but code preserved) */
.pacey-cal-card--editing {
    flex-direction: column;
    align-items: stretch;
    background: var(--pacey-surface);
    border-color: var(--pacey-blue);
}

/* Card body wraps the two-line content, leaving room for the drag handle */
.pacey-cal-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 1.25rem;
    gap: var(--pacey-space-sm);
}

/* First row: title on the left, then the type tag and — when the session has
   been pushed to Garmin — the "Synced" badge pinned to the right edge. */
.pacey-cal-card-title-row {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
}

.pacey-cal-card-title {
    font-weight: 700;
    font-size: var(--pacey-text-label);
    color: var(--pacey-navy);
    /* Let a long title shrink instead of pushing the tag/badge off the line */
    min-width: 0;
}

/* Tag and badge keep their size; the badge's margin-left:auto pins it right */
.pacey-cal-card-title-row .pacey-run-tag,
.pacey-cal-card-title-row .pacey-plan-scheduled-badge { flex-shrink: 0; }

/* Second row: meta details */
.pacey-cal-card-row {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
    flex-wrap: wrap;
}

.pacey-cal-card-meta {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    white-space: nowrap;
}

/* Drag handle absolutely positioned at the right edge of the card */
.pacey-drag-handle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pacey-muted);
    opacity: 0.5;
    transition: opacity 0.15s ease;
    /* Touch drag initiator. The browser must not scroll, zoom or select text
       when a gesture starts here — otherwise it cancels the pointer stream
       (pointercancel) and the drag never begins. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* A comfortable touch target on phones without moving the icon: the
       padding grows the hit area and the negative margin cancels it out. */
    padding: 0.6rem;
    margin: -0.6rem;
}
/* No hover on touch, so keep the handle visible there */
@media (pointer: coarse) {
    .pacey-drag-handle { opacity: 0.85; }
}
.pacey-cal-card:hover .pacey-drag-handle { opacity: 1; }
.pacey-drag-handle svg { display: block; }

/* Drop-target highlight when dragging over a day row */
.pacey-cal-row--drop-target {
    background: var(--pacey-sky);
    border-radius: var(--pacey-radius-sm);
    outline: 0.125rem dashed var(--pacey-blue);
    outline-offset: -0.125rem;
}

.pacey-workout-type {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    color: #fff;
    background: var(--pacey-blue);
    padding: 0.12rem 0.5rem;
    border-radius: 62.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pacey-cal-card-meta--suggested {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-navy);
    white-space: nowrap;
}

.pacey-cal-rest-label {
    font-weight: 600;
    font-size: var(--pacey-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pacey-muted);
}

.pacey-cal-card-desc {
    font-size: var(--pacey-text-caption);
    line-height: 1.45;
    color: var(--pacey-muted);
    margin: 0;
}

.pacey-cal-card-pace {
    font-weight: 600;
    font-size: var(--pacey-text-label);
    color: var(--pacey-navy);
    margin: 0;
}

.pacey-cal-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pacey-space-sm);
    margin-top: 0.2rem;
}

.pacey-cal-edit-btn,
.pacey-cal-save-btn,
.pacey-cal-rest-toggle {
    background: none;
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    cursor: pointer;
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    padding: 0.3rem 0.65rem;
    transition: background var(--pacey-transition), border-color var(--pacey-transition), color var(--pacey-transition);
    white-space: nowrap;
}

.pacey-cal-edit-btn { color: var(--pacey-blue); margin-left: auto; }
.pacey-cal-edit-btn:hover { background: var(--pacey-sky); border-color: var(--pacey-blue); }

.pacey-cal-save-btn { color: var(--pacey-navy); background: var(--pacey-sky); }
.pacey-cal-save-btn:hover { border-color: var(--pacey-blue); }

.pacey-cal-rest-toggle { color: var(--pacey-muted); }
.pacey-cal-rest-toggle:hover { color: var(--pacey-accent-red); border-color: var(--pacey-accent-red); }

/* Mobile: keep the date-left agenda but tighten spacing */
@media (max-width: 48rem) {
    .pacey-cal-date { width: 3rem; }
    .pacey-cal-date-num { font-size: var(--pacey-text-subheading); }
}
/* ---------------------------------------------------------------------
   1. RACE STATUS CARD — the masthead sheet
   The page header block (race info, fitness drawer, coach line, drift
   advice). Given the shared paper treatment (paper + grain + irregular
   radius + drop shadow) and pinned to the board with a red pushpin.
   --------------------------------------------------------------------- */
#pacey-content .pacey-plan-race-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    /* Passive masthead sheet — same shallow static depth as the overview's
       passive paper containers; the workout slips inside keep their own
       interactive elevation. */
    box-shadow: var(--pinboard-shadow-static), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

/* Pushpin — centred at the top edge so it reads as holding the sheet,
   sitting above the (left-aligned) race name rather than on it. */
#pacey-content .pacey-plan-race-card::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 0.85rem;
    height: 0.85rem;
    margin-left: -0.425rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    z-index: 4;
}

/* Race name reads as the sheet's handwritten heading; meta as copy. */
#pacey-content .pacey-plan-race-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: 0;
}
#pacey-content .pacey-plan-race-meta {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}
#pacey-content .pacey-plan-insight {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}

/* ---------------------------------------------------------------------
   2. TRAINING-PACES DRAWER — a nested index card
   Sits inside the race sheet, so it reads as a lighter card clipped to
   the page rather than a second sheet. Toggle label is a heading
   (Caveat); the pace summary/range are numbers and stay in the app sans.
   --------------------------------------------------------------------- */
/* A sticky note rather than a dashed index card: flat blue post-it with
   the usual soft note shadow and a slight tilt. */
#pacey-content .pacey-plan-fitness {
    background-color: var(--pinboard-note-blue);
    background-image: none;
    border: none;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 0.5rem 0.75rem rgba(0, 0, 0, 0.22), inset 0 -1.6rem 1.6rem -1.6rem rgba(0, 0, 0, 0.12);
    transform: rotate(-0.25deg);
}

/* The toggle header blends into the note so the whole drawer reads as one
   post-it, with just a hairline under the header. */
#pacey-content .pacey-plan-fitness-toggle {
    font-family: var(--font-fuzzy);
    background: transparent;
    border-radius: 2px 2px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#pacey-content .pacey-plan-fitness-toggle:hover { background: rgba(255, 255, 255, 0.35); }

#pacey-content .pacey-plan-fitness-toggle-label {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0;
}
#pacey-content .pacey-plan-fitness-group-label {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
}
#pacey-content .pacey-plan-fitness-note {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}
#pacey-content .pacey-plan-fitness-run-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0;
}
#pacey-content .pacey-plan-fitness-run-date,
#pacey-content .pacey-plan-fitness-run-meta {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}

/* Two-line run row: the run name sits on the first line, with the date and
   distance/pace details below it. The arrow is pinned to the right edge and
   spans both lines. (Grid, so the row can never wrap the arrow onto its own
   line.) */
#pacey-content .pacey-plan-fitness-run {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "name name arrow"
        "date meta arrow";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
}
#pacey-content .pacey-plan-fitness-run-name { grid-area: name; }
#pacey-content .pacey-plan-fitness-run-date { grid-area: date; }
#pacey-content .pacey-plan-fitness-run-meta { grid-area: meta; }
#pacey-content .pacey-plan-fitness-run-arrow {
    grid-area: arrow;
    justify-self: end;
    align-self: center;
    margin-left: 0;
    color: var(--pinboard-muted);
}

/* ---------------------------------------------------------------------
   3. TRAJECTORY STATUS ROW — dot + label + note inside the race sheet
   Already on paper, so the app's accent colours read fine; only the
   fonts change. The rebuild button inherits the shared .pacey-btn paper
   treatment and just picks up the handwriting face.
   --------------------------------------------------------------------- */
#pacey-content .pacey-plan-trajectory-label {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
    /* Status colour is kept but darkened so it clears 4.5:1 on the cream
       paper (the app's accent greens/ambers are tuned for white, not cream).
       The coloured dot still carries the status at a glance. */
    color: var(--pinboard-ink);
}
#pacey-content .pacey-plan-trajectory--on_track .pacey-plan-trajectory-label { color: #245a33; }
#pacey-content .pacey-plan-trajectory--behind .pacey-plan-trajectory-label { color: #8a3a1e; }
#pacey-content .pacey-plan-trajectory--ahead .pacey-plan-trajectory-label { color: #1f5a7a; }
#pacey-content .pacey-plan-trajectory--mixed .pacey-plan-trajectory-label { color: #8a6313; }
#pacey-content .pacey-plan-trajectory-note {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}
#pacey-content .pacey-plan-trajectory-rebuild {
    font-family: var(--font-fuzzy);
    border-radius: 2px 7px 3px 8px / 8px 3px 7px 2px;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.22);
}

/* ---------------------------------------------------------------------
   4. CALENDAR SCAFFOLDING — week blocks, week heads, day rows, dates
   These sit directly on the cork, so no paper/tilt here (the vertical
   agenda rhythm is preserved). Only the type and the text colour on the
   night board are touched. .pacey-cal-row / .pacey-cal-date stay as layout.
   --------------------------------------------------------------------- */
#pacey-content .pacey-cal-week-block {
    border-bottom-color: color-mix(in srgb, var(--pinboard-line) 80%, transparent);
}
#pacey-content .pacey-cal-week-head {
    padding-top: 0.9rem;
}
#pacey-content .pacey-cal-week-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0;
}
/* Phase tag styled as a pill, matching the run-type tags on the cards. */
#pacey-content .pacey-cal-week-phase {
    font-family: var(--font-fuzzy);
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2a5169;
    background: rgba(42, 81, 105, 0.14);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    box-shadow: none;
}
/* Week date range picks up the handwriting face too. */
#pacey-content .pacey-cal-week-range {
    font-family: var(--font-fuzzy);
    font-weight: 600;
}
#pacey-content .pacey-cal-date-dow,
#pacey-content .pacey-cal-date-month {
    font-family: var(--font-fuzzy);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   5. CALENDAR CARDS — activity & workout sheets
   The base card, the "past" and "rest" variants, the editing form and
   the "suggested" workout all get the paper treatment. Crucially this
   replaces the var(--pacey-bg) fills the app uses for past/rest, which are
   dark at night and would otherwise leave dark ink on a dark card.
   --------------------------------------------------------------------- */
#pacey-content .pacey-cal-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 2px 6px 3px 8px / 8px 3px 6px 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.16);
}

/* Past runs read as old history: greyer, flatter stock and muted ink so
   they recede against the live/suggested sessions.

   The stock is crumpled rather than flat. The texture is a seamless tile, so
   it repeats across any card width without a visible join — which matters
   here, because these cards are wide short strips (roughly 12:1 on desktop,
   5:1 on mobile) and that is precisely the shape a single non-tiling crumple
   photo would smear into horizontal streaks.

   The tile is high contrast on its own, so a wash of the card's own grey sits
   over it as the top background layer. That wash is the strength dial: raise
   the alpha to push the crumple back, lower it to bring the folds up. Using a
   layer rather than background-blend-mode keeps the card's grey exactly where
   it was, instead of letting the texture's light average shift the whole card.

   The alpha is set by the ink rather than by taste. The card's text is
   #6e6657, which sits around 103 in luminance, and the texture's folds run
   down to near 0 — so at a light wash the creases come out at roughly the same
   tone as the words and the text stops reading. At 0.8 the darkest a fold can
   render is about 181, which clears the text by nearly eighty levels and still
   leaves a good fifty levels of range for the crumple to show in. That is
   comfortable headroom, so if you darken the ink further the crumple can come
   back up a little in exchange.

   background-size sets the fold scale, and it is a relationship rather than a
   number: the tile is 180px, so the folds land around 30px, which is about a
   fold and a half of relief across a 50px-tall card. A smaller tile reads as
   finer, more tissue-like creasing; a larger one as fewer, deeper folds. */
#pacey-content .pacey-cal-card--past {
    background-color: #e6e2d7;
    background-image:
        linear-gradient(rgba(230, 226, 215, 0.8), rgba(230, 226, 215, 0.8)),
        url("/pacey/assets/textures/paper-crumple.jpg");
    background-size: auto, 180px 180px;
    background-repeat: no-repeat, repeat;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 0.25rem 0.4rem rgba(0, 0, 0, 0.1);
}

/* Wrinkle variation. A background always starts at its own element's origin,
   so without this every card would show the identical patch of the tile and
   the board would read as one pattern stamped out rather than a pile of
   separate scraps. Offsetting where each row's tile begins hands each card a
   different patch. Any offset is safe because the tile is seamless, so the
   phase can start anywhere without a join appearing.

   The offsets are deliberately irregular. Evenly stepping them would just walk
   the same fold diagonally down the board, which reads as a pattern rather
   than as chance. Six variants against a seven-day week means the cycle drifts
   by a day each week, so no two weeks line up.

   Position is set per layer: the wash stays pinned at 0 0 (shifting it would
   slide it off the corner and leave that strip of texture undimmed), and only
   the texture moves. */
#pacey-content .pacey-cal-row:nth-child(6n+2) .pacey-cal-card--past { background-position: 0 0, 37px 112px; }
#pacey-content .pacey-cal-row:nth-child(6n+3) .pacey-cal-card--past { background-position: 0 0, 118px 41px; }
#pacey-content .pacey-cal-row:nth-child(6n+4) .pacey-cal-card--past { background-position: 0 0, 64px 156px; }
#pacey-content .pacey-cal-row:nth-child(6n+5) .pacey-cal-card--past { background-position: 0 0, 151px 88px; }
#pacey-content .pacey-cal-row:nth-child(6n+6) .pacey-cal-card--past { background-position: 0 0, 92px 19px; }
#pacey-content .pacey-cal-row:nth-child(6n+7) .pacey-cal-card--past { background-position: 0 0, 12px 73px; }
#pacey-content .pacey-cal-card--past .pacey-cal-card-title,
#pacey-content .pacey-cal-card--past .pacey-cal-card-meta,
#pacey-content .pacey-cal-card--past .pacey-cal-card-desc,
#pacey-content .pacey-cal-card--past .pacey-cal-card-pace { color: #6e6657; }
#pacey-content .pacey-cal-card--past .pacey-run-tag { filter: saturate(0.8); opacity: 0.9; }

/* Rest days are not cards: just the word sitting on the cork, so the board
   stays uncluttered. */
#pacey-content .pacey-cal-card--rest {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

/* Suggested (actionable) workouts are the "to-do" slips. They carry a
   stronger blue tint than the past runs so the eye lands on what still
   needs doing, and keep a blue pushpin. */
#pacey-content .pacey-cal-card--suggested {
    background-color: var(--pinboard-note-blue);
    background-image: none;
    border: 1px solid #9dc0dd;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
#pacey-content .pacey-cal-card--suggested::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 50%;
    width: 0.6rem;
    height: 0.6rem;
    margin-left: -0.3rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #a7c9e6 0%, var(--pinboard-pin-blue) 58%, #17365a 100%);
    box-shadow: 0 0.15rem 0.22rem rgba(0, 0, 0, 0.4);
    z-index: 4;
}
#pacey-content .pacey-cal-card--suggested:hover {
    transform: translateY(-0.15rem);
    box-shadow: var(--pinboard-shadow-hover);
}

/* Synced workouts keep the app's green edge, re-declared here so it wins
   over the suggested rule above (equal specificity, later in the file). */
#pacey-content .pacey-cal-card--scheduled {
    border-color: var(--pacey-accent-green);
}

/* Editing variant — the same sheet with a blue "in progress" edge. */
#pacey-content .pacey-cal-card--editing {
    background-color: var(--pinboard-paper);
    border: 1px solid var(--pacey-blue);
}

/* Card copy: titles are headings (Caveat), meta/desc are copy (Fuzzy). */
#pacey-content .pacey-cal-card-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0;
}
#pacey-content .pacey-cal-card-meta,
#pacey-content .pacey-cal-card-meta--suggested,
#pacey-content .pacey-cal-card-desc,
#pacey-content .pacey-cal-card-pace {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}
#pacey-content .pacey-cal-rest-label {
    font-family: var(--font-caveat);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--pinboard-muted);
}
#pacey-content .pacey-drag-handle {
    color: var(--pinboard-muted);
}

/* Editing card's tag/badge row — laid out so the type tag and the
   "Synced" badge sit cleanly on one line. */
#pacey-content .pacey-cal-card-top {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
}
/* Synced badge: white on the remapped green, so it reads on paper in
   both themes. */
#pacey-content .pacey-plan-scheduled-badge {
    color: #ffffff;
    background: var(--pacey-accent-green);
    border-radius: 2px 6px 3px 7px / 7px 3px 6px 2px;
}

/* Editing-form fields: the app fills inputs with var(--pacey-bg) (dark at
   night) under ink text — swap to the paper tints so they stay legible. */
#pacey-content .pacey-plan-control-label {
    font-family: var(--font-fuzzy);
    font-weight: 600;
}
#pacey-content .pacey-plan-control input,
#pacey-content .pacey-plan-control select {
    font-family: var(--font-fuzzy);
    background: var(--pinboard-paper-2);
    color: var(--pinboard-ink);
    border-color: var(--pinboard-line);
    border-radius: 2px 6px 3px 7px / 7px 3px 6px 2px;
}

/* ---------------------------------------------------------------------
   6. BUTTONS — edit, weekly send, save, rest toggle
   Small paper chips that match the board. The weekly send button is the
   app's primary (navy) action; inside #pacey-content its text is white via
   the theme, so it stays readable — but the app's light hover fill would
   wash out that white text at night, so dark mode gets its own hover.
   --------------------------------------------------------------------- */
#pacey-content .pacey-plan-edit-btn,
#pacey-content .pacey-cal-save-btn,
#pacey-content .pacey-cal-rest-toggle,
#pacey-content .pacey-cal-week-send-btn {
    font-family: var(--font-fuzzy);
    border-radius: 2px 7px 3px 8px / 8px 3px 7px 2px;
    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.18);
}

/* The edit button sits on the cork in the section title row, so give it a
   paper chip (the app's blue-on-transparent vanishes on the night board). */
#pacey-content .pacey-plan-edit-btn {
    background: var(--pinboard-paper-2);
    color: var(--pinboard-ink);
    border-color: var(--pinboard-line);
}
#pacey-content .pacey-plan-edit-btn:hover {
    background: var(--pinboard-note-blue);
    border-color: var(--pinboard-pin-blue);
    color: var(--pinboard-ink);
}

html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-week-send-btn:hover {
    /* Keep the primary button dark at night so its white label holds. */
    background: #3a332a;
}

/* ---------------------------------------------------------------------
   7. LOADING, BUILD STATUS AND ALERTS
   The loading/skeleton states stay transitional (no paper treatment) —
   only their text is pinned to a readable colour on the light loading
   box. The build-status line and the error/status rows sit on the cork,
   so they get night-board colours; the error stays a legible alert, not
   a pinned note.
   --------------------------------------------------------------------- */
#pacey-content .pacey-coach-loading {
    font-family: var(--font-fuzzy);
    color: var(--pinboard-ink);
}
#pacey-content .pacey-coach-build-status {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}

/* Error: a soft red alert card that clears contrast on the cork in both
   themes (the app's translucent red tint would disappear at night). */
#pacey-content .pacey-coach-error {
    font-family: var(--font-fuzzy);
    color: #7d2222;
    background: #f2d9d6;
    border-left: 0.1875rem solid #a83b3b;
}
/* Schedule status: a soft green alert, same reasoning. */
#pacey-content .pacey-coach-schedule-status {
    font-family: var(--font-fuzzy);
    color: #245a34;
    background: #dceadb;
    border-left: 0.1875rem solid #2f6a3f;
}
/* Schedule status error — the same soft red alert as .pacey-coach-error */
#pacey-content .pacey-coach-schedule-status--error {
    color: #7d2222;
    background: #f2d9d6;
    border-left-color: #a83b3b;
}

/* ---------------------------------------------------------------------
   8. NIGHT BOARD — text that sits on the cork (not on paper)
   Calendar scaffolding and the build-status line live directly on the
   dark cork at night, but the theme maps --pacey-navy/--pacey-muted to dark
   ink. Brighten just those elements. The "today" row carries its own
   light paper tint, so its date ink stays dark — hence the :not().
   --------------------------------------------------------------------- */
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-week-title,
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-week-range,
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-rest-label,
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-coach-build-status {
    color: #e8dfca;
}
/* Phase pill on the dark board: light text on a translucent light tint. */
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-week-phase {
    color: #cfe0ea;
    background: rgba(207, 224, 234, 0.16);
}
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-row:not(.pacey-cal-row--today) .pacey-cal-date-dow,
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-row:not(.pacey-cal-row--today) .pacey-cal-date-num,
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-cal-row:not(.pacey-cal-row--today) .pacey-cal-date-month {
    color: #e8dfca;
}

/* ---------------------------------------------------------------------
   9. REDUCED MOTION — no hover lift on the suggested workout slips.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #pacey-content .pacey-cal-card--suggested:hover { transform: none; }
}