/* =====================================================================
   PACEY — READINESS PAGE
   ---------------------------------------------------------------------
   The Readiness page, end to end: its base styles (the radar card, the six
   pillar cards and their strengths/gaps sections, the dimension explainer,
   the legend and the summary) followed by its pinboard treatment, scoped to
   #pacey-content. 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 Readiness
   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.
   --------------------------------------------------------------------- */

/* ---- Dimension explainer: educational content under the radar ---- */
/* Explains how each of the 6 dimensions influences race performance */
.pacey-dimension-explainer {
    margin-top: clamp(1rem, 2vw, 1.5rem);
}

.pacey-dimension-explainer-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-navy);
    margin: 0 0 0.75rem;
}

.pacey-dimension-explainer-grid {
    display: grid;
    /* Two columns on large screens, one on mobile */
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1rem);
}

.pacey-dimension-explainer-item {
    display: flex;
    gap: 0.6rem;
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: clamp(0.6rem, 1.2vw, 0.85rem);
}

.pacey-dimension-explainer-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Dimension dot colour variants — each maps to a performance dimension.
   Colours use the run-type tokens since the dimensions share the same
   palette (red = lactate/speed, green = aerobic, amber = economy,
   purple = strength, blue = VO₂max, teal = fatigue). */
.pacey-dimension-explainer-dot--lactate { background: color-mix(in srgb, var(--pacey-run-speedwork) 70%, transparent); }
.pacey-dimension-explainer-dot--aerobic { background: color-mix(in srgb, var(--pacey-accent-green) 70%, transparent); }
.pacey-dimension-explainer-dot--economy { background: color-mix(in srgb, var(--pacey-run-tempo) 70%, transparent); }
.pacey-dimension-explainer-dot--strength { background: color-mix(in srgb, var(--pacey-run-lsd) 70%, transparent); }
.pacey-dimension-explainer-dot--vo2max { background: color-mix(in srgb, var(--pacey-blue) 70%, transparent); }
.pacey-dimension-explainer-dot--fatigue { background: color-mix(in srgb, var(--pacey-run-easy) 70%, transparent); }

.pacey-dimension-explainer-name {
    display: block;
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
    margin-bottom: 0.2rem;
}

.pacey-dimension-explainer-desc {
    font-size: var(--pacey-text-label);
    line-height: 1.5;
    color: var(--pacey-muted);
    margin: 0;
}

/* ---------------------------------------------------------------------
   Race detail — the goal, stated before the verdict
   Sits above the radar on the readiness page so the six scores have
   something to be read against. The rhythm is 1-then-3: the race name needs
   a row of its own because it runs long, and the three facts underneath it
   fit across. That is the same shape the overview's goal panel uses, so the
   two read as the same kind of note.
   --------------------------------------------------------------------- */
.pacey-race-detail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem 1.25rem;
    padding: 1.15rem 1.3rem 1rem;
    margin: 0 0 clamp(0.9rem, 1.8vw, 1.25rem);
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    box-shadow: var(--pacey-shadow);
    font-family: var(--font-fuzzy);
}

.pacey-race-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* Let a long race name wrap instead of forcing the grid wider. */
    min-width: 0;
}

.pacey-race-detail-item--full { grid-column: 1 / -1; }

.pacey-race-detail-label {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pacey-race-detail-value {
    font-size: var(--pacey-text-body);
    font-weight: 600;
    color: var(--pacey-navy);
    line-height: 1.25;
    overflow-wrap: break-word;
}

/* Phones: three columns of facts get cramped, so the facts go two-up and the
   race name keeps its full row. */
@media (max-width: 48rem) {
    .pacey-race-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 1rem 1.05rem 0.9rem;
    }
}

/* Goal specifics stat grid — 2 columns, centered vertically with improved spacing */
.pacey-goal-specifics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.9rem, 1.8vw, 1.25rem);
    flex: 1;
    align-content: center;
    /* Add top padding so stats don't overlap with the countdown highlight */
    padding-top: clamp(4.5rem, 5.5vw, 6rem);
}

.pacey-goal-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Full-width stat — spans both grid columns for a 1-2-2 row layout */
.pacey-goal-stat--full {
    grid-column: 1 / -1;
}

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

/* Value + unit inline on the same row */
.pacey-goal-stat-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--pacey-space-xs);
    flex-wrap: wrap;
}

.pacey-goal-stat-value {
    font-size: var(--pacey-text-subheading);
    font-weight: 700;
    color: var(--pacey-navy);
    line-height: 1.2;
}

.pacey-goal-stat-unit {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
}

/* Radar canvas wrapper — the radar plot is square (Chart.js sizes the
   hexagon by the smaller canvas dimension), so the wrap is square too.
   Previously flex:1 stretched it tall to match the goal-specifics card,
   leaving dead vertical space above and below the hexagon on wide-but-
   short screens (e.g. tablet landscape). The readiness page pins a fixed
   height instead (--full), which overrides the ratio since both
   dimensions are then definite. */
.pacey-radar-wrap {
    width: 100%;
    /* The radar plot is square — keep the wrap square at every width. A
       min-height here would override the aspect ratio on narrow columns
       (column < 22rem), making the wrap taller than wide and leaving the
       hexagon with dead space above and below it. */
    aspect-ratio: 1 / 1;
    max-height: 100%;
    /* Center the square in the card's leftover space so the two cards'
       backgrounds still read as balanced */
    margin: auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* anchor for radar skeleton overlay */
}

.pacey-radar-wrap canvas {
    max-width: 100%;
    /* Fade in when the chart is created after the skeleton fades out.
       Short fade so the radar's grow-from-center animation is the dominant
       motion rather than being hidden behind a slow opacity crossfade. */
    opacity: 0;
    /* Blurred while the loading placeholder is up (the .pacey-radar-loading
       class, added by startRadarLoading), then transitions back to sharp when
       the real scores land. A light blur softens the plot AND its axis labels
       so the loading label sits legibly in front. */
    filter: blur(0);
    transition: opacity 0.3s ease-out, filter 0.4s ease-out;
}

.pacey-radar-wrap canvas.pacey-radar-loading {
    filter: blur(2px);
}

.pacey-radar-wrap canvas.pacey-radar-loaded {
    opacity: 1;
}

/* Radar loading state. The placeholder is no longer a separate SVG — the real
   radar renders with stand-in scores (desaturated, see RADAR_LOADING_* in
   pacey.js) and this container carries only the loading label, which fades out
   when the real scores land. */
.pacey-radar-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

/* Fade-out class applied by JS before setting hidden=true */
.pacey-radar-skeleton.pacey-fade-out { opacity: 0; }

.pacey-radar-skeleton[hidden] { display: none; }

/* "Analysing your readiness…" label over the radar while it loads — makes the
   placeholder state unmistakable instead of looking like a faint copy of the
   final chart. The text inside uses the shimmer animation, so the label color
   is set transparent by the .pacey-shimmer-text class. */
.pacey-radar-skeleton-label {
    position: absolute;
    /* Centred rather than pinned to the bottom: the radar's own axis labels sit
       around the edges, and the bottom one collided with this. The middle of a
       radar is empty grid, so the label has room and reads as "still working". */
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-body);
    /* Full opacity so the label reads clearly over the blurred radar */
    opacity: 1;
    pointer-events: none;
    letter-spacing: 0.02em;
}

/* Full-page radar (readiness page). The plot is square, so the wrap follows
   the base aspect-ratio (1:1) instead of a fixed height — a flat height made
   the wrap taller than its square plot and left dead bands above and below the
   hexagon, worst on narrow screens where the plot is only as tall as the
   column is wide. The cap stops a very wide column from producing an oversized
   plot. */
.pacey-radar-wrap--full {
    height: auto;
    max-height: 40rem;
}

/* External HTML tooltip for the radar chart — rendered as a real DOM element
   so it can contain a clickable link to the corresponding insight pillar.
   Positioned absolutely on the page by the external tooltip handler. */
.pacey-radar-tooltip {
    position: absolute;
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: 0.5rem 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: auto;
    z-index: 1000;
    white-space: nowrap;
}

.pacey-radar-tooltip-link {
    font-weight: 600;
    font-size: var(--pacey-text-body);
    color: var(--pacey-blue);
    text-decoration: none;
    cursor: pointer;
    /* Clickable indicator — a small chevron signals the link navigates
       to the readiness pillar detail (standardized tooltip affordance
       for interactive items). */
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.pacey-radar-tooltip-link::after {
    content: "›";
    font-weight: 700;
    color: var(--pacey-blue);
    opacity: 0.7;
}

.pacey-radar-tooltip-link:hover {
    text-decoration: underline;
}

.pacey-radar-tooltip-score {
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
}

/* ---- Dimension legend ---- */
.pacey-dimension-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(10rem, 16vw, 12rem), 1fr));
    gap: var(--pacey-space-sm);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid var(--pacey-border);
}

.pacey-legend-item {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-navy);
}

.pacey-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }

.pacey-legend-score {
    margin-left: auto;
    font-weight: 400;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
}

/* ---- Summary ---- */
.pacey-summary-error {
    font-size: var(--pacey-text-label);
    color: var(--pacey-accent-red);
    padding: var(--pacey-space-md);
    background: rgba(196, 75, 75, 0.05);
    border-radius: var(--pacey-radius-sm);
}

.pacey-refresh-btn { width: auto; align-self: flex-start; }
/* =========================================================================
   Pillar card — base presentation (moved from pacey.css so the landing's
   previews can wear the same card without loading the app shell). The
   #pacey-content-scoped rules below layer the board treatment on top.
   ========================================================================= */
.pacey-pillar-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: clamp(0.75rem, 1.5vw, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-sm);
}

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

.pacey-pillar-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.pacey-pillar-name {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
}

.pacey-pillar-score {
    margin-left: auto;
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-blue);
}

/* Summary card variant — shown on the overview/home page. Contains only
   the quick summary text (no concrete data) and a "View details" link.
   The entire card is clickable and navigates to the full insight on the
   insights page. */
.pacey-pillar-card--summary {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pacey-pillar-card--summary:hover {
    border-color: var(--pacey-blue);
    box-shadow: 0 0.125rem 0.5rem rgba(69, 123, 157, 0.12);
}

.pacey-pillar-summary {
    font-size: var(--pacey-text-label);
    line-height: 1.55;
    color: var(--pacey-text);
    margin: 0;
}

.pacey-pillar-view-details {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--pacey-blue);
    margin-top: auto;
    padding-top: 0.25rem;
}

.pacey-pillar-note {
    /* Standardized to Raleway — matches all other body text in the dashboard */
    font-size: var(--pacey-text-label);
    line-height: 1.55;
    color: var(--pacey-text);
    margin: 0;
}

/* Strengths and Gaps sections within each pillar card */
/* Each section has a colored label badge and the analysis text below it */
.pacey-pillar-section {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-xs);
}

.pacey-pillar-section-label {
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 0.5rem;
    align-self: flex-start;
}

/* Strengths label — green tint indicating positive aspects */
.pacey-pillar-section-label--strengths {
    background: rgba(63, 123, 79, 0.15);
    color: var(--pacey-accent-green);
}

/* Gaps label — yellow/amber tint indicating areas for improvement.
   Yellow (rather than red) keeps gaps feeling actionable rather than
   alarming, distinguishing them from error states. Text colour
   darkened to #8a6313 (~5.2:1 on the tinted background) to meet WCAG
   AA 4.5:1 for small text. */
.pacey-pillar-section-label--gaps {
    background: rgba(235, 189, 71, 0.75);
    color: var(--pacey-run-tempo);
}

/* Dark mode overrides for section labels */
[data-theme="dark"] .pacey-pillar-section-label--strengths {
    background: rgba(63, 123, 79, 0.25);
    color: #6dba82;
}

[data-theme="dark"] .pacey-pillar-section-label--gaps {
    background: rgba(212, 160, 23, 0.75);
    color: var(--pacey-run-tempo);
}

/* ---------------------------------------------------------------------
   1. FULL PILLAR CARDS — Strengths / Gaps blocks
   The readiness variant adds Strengths and Gaps sections inside each
   pillar card. The card itself is a blue post-it via the shared theme,
   and crucially the post-it stays LIGHT in both themes (--pinboard-note-
   blue is a light tint in light AND dark mode). So the label text must
   stay DARK in both modes too — the app's own dark-mode rule brightens
   the Strengths label to a light green, which would wash out on the
   still-light post-it. We override it back to a dark, readable green.
   --------------------------------------------------------------------- */

/* Section wrapper: a simple stacked block, no background of its own so
   the text reads directly on the post-it paper. */
#pacey-content .pacey-pillar-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Strengths / Gaps wrappers carry no fill — they are plain notes on the
   post-it, not their own cards. Declared explicitly to document intent. */
#pacey-content .pacey-pillar-section--strengths,
#pacey-content .pacey-pillar-section--gaps {
    background: none;
}

/* Label badge: handwritten label to match the rest of the board copy. */
#pacey-content .pacey-pillar-section-label {
    font-family: var(--font-fuzzy);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Strengths — subtle green tint + dark green text that clears contrast
   on the light blue post-it. */
#pacey-content .pacey-pillar-section-label--strengths {
    background: rgba(47, 106, 63, 0.26);
    color: #114d20;
}

/* Gaps — the bright amber from pacey.css, kept on the board. It reads as
   "actionable, not alarming" without going muddy; the dark amber text is
   what carries the contrast. */
#pacey-content .pacey-pillar-section-label--gaps {
    background: rgba(235, 189, 71, 0.55);
    color: #5f410b;
}

/* Night board: the post-it is still light, so keep the SAME dark label
   colours. This deliberately overrides the app's light-green dark-mode
   Strengths rule, which assumed a dark card. */
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-pillar-section-label--strengths {
    background: rgba(47, 106, 63, 0.18);
    color: #275a34;
}
/* Night board: the post-it stays light, so the amber stays amber — nudged up
   in opacity so it still reads as yellow rather than tan — with the same dark
   text. (The app's dark rule uses a light-gold text, which only works on a
   dark card.) */
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-pillar-section-label--gaps {
    background: rgba(225, 178, 61, 0.82);
    color: #5f410b;
}

/* ---------------------------------------------------------------------
   2. PILLAR HIGHLIGHT — transient pulse on "jump to pillar"
   The app's pulse keyframes set box-shadow outright, which would strip
   the post-it's own drop shadow for the duration of the pulse. We reuse
   the post-it shadow (hoisted to a custom property) and append a growing
   blue ring so the two never fight.
   --------------------------------------------------------------------- */
#pacey-content .pacey-pillar-card {
    /* The post-it drop shadow, reused by the pulse keyframes below. */
    --pinboard-postit-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);
}

@keyframes pacey-pinboard-pillar-pulse {
    0%   { box-shadow: var(--pinboard-postit-shadow), 0 0 0 0 rgba(47, 111, 176, 0.45); }
    50%  { box-shadow: var(--pinboard-postit-shadow), 0 0 0 0.4rem rgba(47, 111, 176, 0.22); }
    100% { box-shadow: var(--pinboard-postit-shadow), 0 0 0 0 rgba(47, 111, 176, 0); }
}

#pacey-content .pacey-pillar-card.pacey-pillar-highlight {
    animation: pacey-pinboard-pillar-pulse 1s ease-out 2;
}

/* ---------------------------------------------------------------------
   3. INFO BUTTONS — small icon buttons in the section titles
   These sit on the cork (not on a paper card). The app CSS gives both a
   circular chip filled with --pacey-surface, which inside #pacey-content
   resolves to the (always light) pinboard paper. We keep that paper chip
   in BOTH themes — a light disc reads clearly against the dark cork at
   night and against the tan cork by day — and pin the glyph to dark ink
   so it stays legible on the light disc.
   --------------------------------------------------------------------- */
#pacey-content .pacey-dimension-info-btn,
#pacey-content .pacey-score-info-btn {
    background: var(--pinboard-paper);
    border-color: var(--pinboard-line);
    color: var(--pinboard-ink);
    box-shadow: 0 0.1rem 0.22rem rgba(0, 0, 0, 0.22);
}

#pacey-content .pacey-dimension-info-btn:hover,
#pacey-content .pacey-score-info-btn:hover {
    background: var(--pinboard-paper-2);
    border-color: var(--pinboard-pin-blue);
    color: var(--pinboard-pin-blue);
}

/* ---------------------------------------------------------------------
   4. TAP HINT — "Select a label for details." inside .pacey-section-sub
   It sits on the cork. The app colours it with --pacey-blue, which is dark
   and vanishes on the night board; brighten it for dark mode only.
   --------------------------------------------------------------------- */
#pacey-content .pacey-tap-hint {
    font-family: var(--font-fuzzy);
    font-weight: 600;
}

/* Only the hint that sits directly on the cork (inside a section subtitle)
   needs brightening. The overview's copy of this hint lives inside a paper
   card (.pacey-readiness-card-sub) and must stay dark on that light paper. */
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-section-sub .pacey-tap-hint {
    color: #a7c9e6;
}

/* ---------------------------------------------------------------------
   5. RADAR — paper card with the radar plot + loading skeleton
   The skeleton grid lines use var(--pacey-border) and the vertex dots use
   var(--pacey-blue); both are remapped inside #pacey-content to paper-safe
   values, so they already read on the (always light) paper in both
   themes. Only two things need attention: the label font, and the
   shimmer sweep, which the app forces to white in dark mode — invisible
   on light paper — so we put it back to ink.
   --------------------------------------------------------------------- */
#pacey-content .pacey-radar-skeleton-label {
    font-family: var(--font-fuzzy);
    letter-spacing: 0.01em;
}

/* Shimmer sweep must stay dark on the light paper card, even at night. */
html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-shimmer-text {
    --pacey-shimmer-base: var(--pinboard-muted);
    --pacey-shimmer-sweep: var(--pinboard-ink);
}

/* ---------------------------------------------------------------------
   6. GRIDS, STATUS AND REFRESH ROW
   A little more air between the post-its so the grid reads as a board
   rather than a table, plus an error line that stays a plain, legible
   message (never a note) in both themes.
   --------------------------------------------------------------------- */
#pacey-content .pacey-pillars-grid,
#pacey-content .pacey-pillars-content {
    gap: clamp(1.4rem, 3vw, 2.4rem);
}

/* Error message: keep it as copy, not a pinned note. Darken the light
   red for the night board so it still clears contrast on the cork. */
#pacey-content .pacey-summary-error {
    font-family: var(--font-fuzzy);
}

html[data-theme="dark"]:has(#pacey-dashboard-screen:not([hidden])) #pacey-content .pacey-summary-error {
    color: #e6a3a3;
    background: rgba(200, 90, 90, 0.14);
}

/* Refresh button inherits the shared .pacey-btn paper treatment; only the
   handwriting font is added here. */
#pacey-content .pacey-refresh-btn {
    font-family: var(--font-fuzzy);
}

/* ---------------------------------------------------------------------
   7. Reduced motion — no pulse for the pillar highlight.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #pacey-content .pacey-pillar-card.pacey-pillar-highlight { animation: none; }
}

/* ---------------------------------------------------------------------
   8. Race recap — post-race mode.
   ---------------------------------------------------------------------
   Once race day passes the six areas have nothing left to measure, so the
   radar, the pillars and the Big Picture give way to the result. The recap
   renders in two places from one builder: the overview's goal section, which
   it replaces outright, and the whole Readiness page.

   The figures are computed in the browser and appear immediately; only the
   paragraph is generated, and it fills in beneath them.

   Type follows the board's convention rather than the page default: coach
   copy and figures are Fuzzy Bubbles, the same face the goal card, the metric
   values and the pillar summaries use. Headings stay in Caveat, which is what
   .pacey-section-title already carries.
   --------------------------------------------------------------------- */

#pacey-content .pacey-race-recap {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
    font-family: var(--font-fuzzy);
    /* The paper, tape and tilt come from the board's shared card treatment in
       pinboard-theme.css; this is the sheet's own breathing room. The top is
       tighter than it was when a pushpin sat inside the sheet — the tape hangs
       over the top edge, so the content only has to clear the strip's lower
       half rather than a whole pin. */
    padding: clamp(1.1rem, 2vw, 1.45rem) clamp(1rem, 1.8vw, 1.35rem) clamp(1rem, 1.8vw, 1.35rem);
}

/* The top row: which race it was on the left, the course preview in the
   top-right corner beside it. Wraps rather than squeezing on a narrow sheet —
   the note has a per-route width, so it cannot simply be shrunk. */
#pacey-content .pacey-race-recap-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pacey-space-md);
    flex-wrap: wrap;
}

#pacey-content .pacey-race-recap-id {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Takes the slack so the note is pushed hard against the right edge. */
    flex: 1 1 12rem;
    min-width: 0;
}

/* The race name leads the recap — it is what everything below is about. */
#pacey-content .pacey-race-recap-name {
    font-size: var(--pacey-text-heading);
    line-height: 1.2;
    color: var(--pinboard-ink);
}

#pacey-content .pacey-race-recap-verdict {
    font-size: 1.05rem;
    color: var(--pacey-accent-amber);
}

/* Hitting the target is the one outcome worth a colour of its own. */
#pacey-content .pacey-race-recap-verdict.is-achieved {
    color: var(--pacey-accent-green);
}

/* The goal and the result are kept apart on purpose — the gap between what was
   set and what was run is the story. Side by side the comparison is direct, and
   each one being its own panel is what stops eight figures reading as a single
   list. Stacks on a phone, where there is no width to compare across. */
#pacey-content .pacey-race-recap-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pacey-space-md);
}

@media (max-width: 48rem) {
    #pacey-content .pacey-race-recap-figures { grid-template-columns: 1fr; }
}

#pacey-content .pacey-race-recap-group,
#pacey-content .pacey-race-recap-read {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Each group is a post-it in its own right, not a panel: the goal and the
   result are two notes stuck on the sheet, which is what keeps eight figures
   reading as two answers rather than one list. Flat colour, squared-off
   corners, and the shaded band along the bottom edge that reads as the sheet
   curling up off the board. */
/* "What to Work On" is a topic shift inside the analysis block, so it takes the
   wider break a --spaced section gets. The block is a plain div, not a
   .pacey-section, so it never inherited the section's flex-column gap — and the
   radar card above it carries no bottom margin of its own. Between the two, the
   heading was sitting flush against the card. */
#pacey-readiness-analysis > .pacey-section-title {
    margin-top: var(--pacey-space-xl);
}

#pacey-content .pacey-race-recap-group {
    position: relative;
    padding: 0.8rem 0.9rem 0.9rem;
    background-color: var(--pinboard-note-yellow);
    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.2rem 1.2rem -1.2rem rgba(0, 0, 0, 0.12);
    /* Laid down by hand rather than squared up: the two notes lean away from
       each other, so the pair reads as two sheets stuck on rather than one
       panel split down the middle. */
    transform: rotate(var(--recap-note-tilt, -0.7deg));
}

/* The result note leans the other way, and is a different colour: the two are
   answering different questions, and telling them apart by colour means the
   pair reads as two sheets before a single figure is read. */
#pacey-content .pacey-race-recap-figures > .pacey-race-recap-group:nth-child(2) {
    --recap-note-tilt: 0.8deg;
    background-color: var(--pinboard-note-blue);
}

#pacey-content .pacey-race-recap-group-label {
    position: relative;
    align-self: flex-start;
    padding-bottom: 0.35rem;
    font-size: var(--pacey-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Ink rather than muted: the label heads a panel now, so it has to read as
       a heading rather than as another row of the table. */
    color: var(--pinboard-ink);
}

/* A short hand-drawn rule under each heading — the same pen as the section
   underlines, at a smaller size so it marks the block without competing with
   the sheet's own title. */
#pacey-content .pacey-race-recap-group-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.35rem;
    background-image: var(--pinboard-sketch-underline);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
    opacity: 0.6;
}

/* Two per row, at every width. Each panel is half the sheet on a laptop and the
   full width on a phone, and a fixed pair reads correctly in both — an auto-fit
   track would pack three into a phone and four into the wider panel, which is
   exactly the crowding this replaced. */
#pacey-content .pacey-race-recap-stats {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: a long value like "1:49:48" would otherwise
       push its track past half the row and squeeze the other column. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pacey-space-sm);
}

#pacey-content .pacey-race-recap-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#pacey-content .pacey-race-recap-stat-label {
    font-size: var(--pacey-text-caption);
    color: var(--pinboard-muted);
}

#pacey-content .pacey-race-recap-stat-value {
    font-size: 1.15rem;
    color: var(--pinboard-ink);
    font-variant-numeric: tabular-nums;
}

#pacey-content .pacey-race-recap-prose {
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--pinboard-ink);
}

/* The read is a paragraph, so its placeholder is a paragraph's shape — a few
   full lines and a short last one, matching the length the prompt asks for so
   the block barely changes height when the prose lands. Same animated shimmer
   the board's other loading states use; the lines take the surrounding ink, so
   they sit correctly on the paper in either theme. */
#pacey-content .pacey-race-recap-prose-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

#pacey-content .pacey-race-recap-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pacey-space-sm);
}

/* The no-goal offer is a preference, not one of the recap's choices — it
   sits on its own row below them, left-aligned like the quiet links. */
/* #pacey-content .pacey-race-recap-no-goal {
    margin-top: var(--pacey-space-sm);
} */
/* The ghost's generic margin:auto would centre it in the row; it stays
   content-sized and left-aligned like the other compact actions. */
#pacey-content .pacey-race-recap-no-goal .pacey-btn {
    margin: 0;
    width: auto;
    align-self: flex-start;
}

/* ---- The course preview, relocated from the goal card ----
   The note is absolutely positioned in the goal card, pinned under the
   countdown, and its width is measured per route in JS. In the recap there is
   no countdown to sit under, so it joins the flow at the top-right corner and
   keeps only its sticky-note dressing — the tape, the tilt and the scribble all
   still apply. */
#pacey-content .pacey-race-recap-map {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Carries a per-route width from JS, so it must not be stretched or shrunk
       by the flex row it sits in. */
    flex: 0 0 auto;
}

/* An empty host takes no space, so the top row closes up when no course has been
   uploaded rather than leaving a gap where the note would have been. */
#pacey-content .pacey-race-recap-map:empty { display: none; }

#pacey-content .pacey-goal-map-note--recap {
    position: static;
    max-width: 100%;
    margin: 0;
}

/* ---- The "have you completed it?" prompt ---- */
#pacey-content .pacey-race-recap-question {
    margin: 0;
    font-size: 1.15rem;
    color: var(--pinboard-ink);
}

#pacey-content .pacey-race-recap-note {
    margin: 0.25rem 0 0;
    font-size: 1.02rem;
    color: var(--pinboard-muted);
}

#pacey-content .pacey-race-recap-link-btn {
    align-self: flex-start;
}

/* A stored race with no saved read — a quiet line where the paragraph would
   sit, rather than a shimmer that never resolves. */
#pacey-content .pacey-race-recap-unavailable {
    color: var(--pinboard-muted);
}

/* ---- The archive-view actions ----
   An unboxed row under the recap card while the readiness page is pointed at
   the archive: the way back to the current goal's view when one exists, or
   the way forward (explore, set a goal) when it does not. No card or shadow —
   these sit in the page flow like the other compact actions. */
#pacey-content .pacey-readiness-archive-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pacey-space-sm);
    margin-bottom: var(--pacey-space-md);
}

/* The ghost's generic margin:auto would centre Back inside the row — it stays
   content-sized and left-aligned like the other compact actions. */
#pacey-content .pacey-readiness-archive-actions .pacey-btn {
    margin: 0;
}

/* ---- The summary mark beside the Readiness page title ----
   Sketchyicons' "summary", standing in for the six-dimension explainer button
   once there are no dimensions left to explain. Sized to match that button so
   the title row does not shift when the mode changes. */
#pacey-content .pacey-recap-mark {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.4rem;
    color: var(--pinboard-ink);
}

/* ==========================================================================
   No-goal note + next-goal suggestions

   When the runner explicitly trains without a race, the goal/readiness row's
   slot is filled by one paper note, and the same section can reveal a second
   sheet with the four fixed distance options. The paper, tape and tilt come
   from the shared sheet rules in pinboard-theme.css — only the layout that is
   particular to these sheets lives here.
   ========================================================================== */

#pacey-content .pacey-no-goal-note {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-sm);
    font-family: var(--font-fuzzy);
    padding: clamp(1.1rem, 2vw, 1.45rem) clamp(1rem, 1.8vw, 1.35rem) clamp(1rem, 1.8vw, 1.35rem);
}

#pacey-content .pacey-no-goal-title {
    margin: 0;
    font-family: var(--font-caveat);
    font-size: var(--pacey-text-heading);
    font-weight: 700;
    color: var(--pinboard-ink);
}

#pacey-content .pacey-no-goal-text {
    margin: 0;
    color: var(--pinboard-muted);
}

#pacey-content .pacey-no-goal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pacey-space-sm);
    margin-top: var(--pacey-space-xs);
}

/* The suggestions sheet — a compact list of distance options, each expanding
   in place to its own description and pick button. */
#pacey-content .pacey-goal-suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-sm);
    font-family: var(--font-fuzzy);
    padding: clamp(1rem, 1.8vw, 1.3rem) clamp(1rem, 1.8vw, 1.35rem);
    margin-top: var(--pacey-space-lg);
}

/* Sheet header — the section's accessible heading beside its dismiss. */
#pacey-content .pacey-goal-suggestions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pacey-space-sm);
}

#pacey-content .pacey-goal-suggestions-title {
    margin: 0;
    font-family: var(--font-caveat);
    font-size: 1.35rem;
    color: var(--pinboard-ink);
}

/* The sheet's X-close follows the modals' dismiss pattern — a fixed 44px
   touch target in muted ink, flat on the paper, no border or shadow, and it
   never moves. Its accessible name comes from aria-label. */
#pacey-content .pacey-goal-suggestions-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--pacey-radius-sm);
    box-shadow: none;
    background: none;
    color: var(--pinboard-muted);
    cursor: pointer;
    transition: color 0.18s ease-out;
}
#pacey-content .pacey-goal-suggestions-close:is(:hover, :focus) {
    color: var(--pinboard-ink);
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
}

#pacey-content .pacey-goal-suggestions-intro {
    margin: 0;
    font-size: 0.95rem;
    color: var(--pinboard-muted);
}

/* Demo sessions label the whole sheet once — the sample figures themselves
   read exactly like real ones, so the note carries the demo honesty alone. */
#pacey-content .pacey-goal-suggestions-demo {
    margin: 0;
    font-size: var(--pacey-text-label);
    color: var(--pinboard-muted);
}

#pacey-content .pacey-goal-suggestions-list {
    display: flex;
    flex-direction: column;
}

/* One ruled row per option — a list on the sheet rather than four identical
   cards, so the set reads as choices weighed together. */
#pacey-content .pacey-goal-suggestion + .pacey-goal-suggestion {
    border-top: 1px dashed var(--pinboard-line);
}

/* The row's grid keeps the choice on the left, its proposed time beside it
   and a dedicated chevron on the far right; the evidence label wraps on its
   own line so it can never overflow the paper. */
#pacey-content .pacey-goal-suggestion-toggle {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "main target chevron"
        "source source chevron";
    align-items: center;
    column-gap: var(--pacey-space-md);
    row-gap: 0.15rem;
    width: 100%;
    min-height: 44px;
    padding: var(--pacey-space-sm) 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pinboard-ink);
    text-align: left;
    cursor: pointer;
}

#pacey-content .pacey-goal-suggestion-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

/* Distance and purpose lead the row at the Plan card's subheading size;
   the title is the supporting line in the label size. */
#pacey-content .pacey-goal-suggestion-distance {
    font-size: var(--pacey-text-subheading);
    font-weight: 700;
}

#pacey-content .pacey-goal-suggestion-title {
    color: var(--pinboard-muted);
    font-size: var(--pacey-text-label);
}

#pacey-content .pacey-goal-suggestion-target {
    grid-area: target;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    min-width: 0;
}

#pacey-content .pacey-goal-suggestion-time {
    font-size: var(--pacey-text-body);
    font-weight: 700;
    color: var(--pinboard-pin-blue);
}

#pacey-content .pacey-goal-suggestion-pace {
    font-size: var(--pacey-text-label);
    color: var(--pinboard-muted);
}

/* The honest stand-in when no target exists — more data is needed before an
   estimate can be offered. */
#pacey-content .pacey-goal-suggestion-need {
    font-size: var(--pacey-text-body);
    color: var(--pinboard-muted);
    text-align: right;
    overflow-wrap: anywhere;
}

#pacey-content .pacey-goal-suggestion-source {
    grid-area: source;
    font-size: var(--pacey-text-label);
    line-height: 1.4;
    color: var(--pinboard-muted);
    overflow-wrap: anywhere;
}

/* The chevron sits in its own column and tips down when the row is open. */
#pacey-content .pacey-goal-suggestion-chevron {
    grid-area: chevron;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--pinboard-muted);
    transition: transform 0.2s ease;
}

#pacey-content .pacey-goal-suggestion-toggle[aria-expanded="true"] .pacey-goal-suggestion-chevron {
    transform: rotate(180deg);
}

/* The detail is a shared .pacey-disclosure — its padding lives on the
   clipped inner so a collapsed row folds to nothing. */
#pacey-content .pacey-goal-suggestion-detail-inner {
    padding: 0 0 var(--pacey-space-md) var(--pacey-space-sm);
}

/* The coach's-perspective slot: skeleton lines while the optional prose
   request is in flight, the labelled paragraph when it lands, and a plain
   note when it cannot be had — never invented text. */
#pacey-content .pacey-goal-suggestion-why {
    margin: 0 0 var(--pacey-space-sm);
}

#pacey-content .pacey-goal-suggestion-why-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--pinboard-muted);
}

/* A supporting label, not a handwritten heading — same label size and muted
   ink the rest of the sheet's secondary text uses. */
#pacey-content .pacey-goal-suggestion-why-label {
    display: block;
    font-size: var(--pacey-text-label);
    font-weight: 700;
    color: var(--pinboard-muted);
    margin-bottom: 0.15rem;
}

#pacey-content .pacey-goal-suggestion-why-text,
#pacey-content .pacey-goal-suggestion-why-unavailable {
    margin: 0;
    font-size: var(--pacey-text-body);
    line-height: 1.45;
    color: var(--pinboard-muted);
}

#pacey-content .pacey-goal-suggestions-status {
    margin: 0;
    color: var(--pinboard-muted);
}

/* The deterministic fetch uses the ordinary skeleton lines, in the sheet's
   ink so they sit correctly on the paper in either theme. */
#pacey-content .pacey-goal-suggestion-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--pacey-space-sm) 0;
    color: var(--pinboard-muted);
}

/* The failed opt-out save surfaces inline beside the button that ran it. */
#pacey-content .pacey-race-recap-nogoal-error {
    margin: 0;
    font-size: 0.95rem;
    color: var(--pacey-accent-red);
}

/* The recap's no-goal link lives on the paper — keep it quiet there too:
   no paper shadow, border or lift, just muted ink like its modal twins. */
#pacey-content .pacey-btn:is(#pacey-onboard-nogoal, #pacey-settings-nogoal-btn, #pacey-edit-goal-nogoal, #pacey-goal-reminder-nogoal, [data-recap-action="no-goal"]) {
    color: var(--pinboard-muted);
    background: none;
    border: none;
    border-radius: var(--pacey-radius-sm);
    box-shadow: none;
}
#pacey-content .pacey-btn:is(#pacey-onboard-nogoal, #pacey-settings-nogoal-btn, #pacey-edit-goal-nogoal, #pacey-goal-reminder-nogoal, [data-recap-action="no-goal"]):is(:hover, :focus) {
    color: var(--pinboard-ink);
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
}

@media (max-width: 48rem) {
    /* Narrow board: the note's actions and the suggestion rows stack — the
       target and the evidence line drop under the choice, the chevron keeps
       its own column so nothing wraps over it. */
    #pacey-content .pacey-no-goal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #pacey-content .pacey-goal-suggestion-toggle {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main chevron"
            "target chevron"
            "source chevron";
    }

    /* Target time and /km pace stay on ONE baseline-aligned line — the row
       never wraps its items and each compact value is nowrap; only the
       missing-data note may wrap, inside its own bounded element. */
    #pacey-content .pacey-goal-suggestion-target {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: nowrap;
        gap: var(--pacey-space-sm);
    }

    #pacey-content .pacey-goal-suggestion-time,
    #pacey-content .pacey-goal-suggestion-pace { white-space: nowrap; }

    #pacey-content .pacey-goal-suggestion-need {
        text-align: left;
        /* Shrinks inside the nowrap row and wraps internally, so a long
           data-needed note can never push the row wider than the column. */
        min-width: 0;
        max-width: 100%;
    }
}

/* =====================================================================
   OVERALL INSIGHT — the coach's top-level read (base presentation)
   ---------------------------------------------------------------------
   Moved from pacey.css: the readiness sheet, the review modal and the
   landing's Big Picture preview all render the same markup, so the base
   layout lives in the sheet the three share.
   ===================================================================== */

/* ---- Overall Insight ---- */
/* The coach's top-level synthesized assessment. A single prominent card
   that sits between Race Readiness and Training Vitals. Unlike the
   per-pillar Pre Race Insights grid, this is one cohesive narrative
   that tells the runner where they stand overall and what to focus on. */
.pacey-overall-insight {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

/* Override [hidden] — display:flex would otherwise prevent the hidden
   attribute from hiding the element during the skeleton loading state. */
.pacey-overall-insight[hidden] { display: none; }

/* Header row — verdict label on the left, score on the right */
.pacey-overall-insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pacey-space-sm);
}

.pacey-overall-insight-verdict {
    font-weight: 700;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-navy);
}

/* Score — large number with small /10 suffix. Color is set inline by JS
   based on the score value (green/amber/red from the AI score scale). */
.pacey-overall-insight-score {
    font-weight: 900;
    font-size: var(--pacey-text-heading);
    line-height: 1;
}

.pacey-overall-insight-score-max {
    font-size: var(--pacey-text-label);
    font-weight: 600;
    color: var(--pacey-muted);
    margin-left: 0.15rem;
}

/* Summary paragraph — the coach's opening assessment */
.pacey-overall-insight-summary {
    font-size: var(--pacey-text-body);
    line-height: 1.6;
    color: var(--pacey-text);
    margin: 0;
}

/* Takeaways — two-column grid on desktop, stacked on mobile.
   Shows the top strength and biggest gap side by side. */
.pacey-overall-insight-takeaways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pacey-space-md);
}

@media (max-width: 37.5rem) {
    .pacey-overall-insight-takeaways { grid-template-columns: 1fr; }
}

/* Individual takeaway card — tinted background distinguishes strength
   (green tint) from gap (amber tint), matching the pillar section labels */
.pacey-overall-insight-takeaway {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--pacey-space-sm) var(--pacey-space-md);
    border-radius: var(--pacey-radius-sm);
}

.pacey-overall-insight-takeaway--strength {
    background: color-mix(in srgb, var(--pacey-accent-green) 15%, var(--pacey-surface));
}

.pacey-overall-insight-takeaway--gap {
    background: color-mix(in srgb, var(--pacey-accent-amber) 8%, var(--pacey-surface));
}

.pacey-overall-insight-takeaway-label {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pacey-muted);
}

.pacey-overall-insight-takeaway-name {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
}

.pacey-overall-insight-takeaway-note {
    font-size: var(--pacey-text-label);
    line-height: 1.55;
    color: var(--pacey-text);
    margin: 0;
}

/* Focus callout — the single most impactful next action, highlighted
   with a left accent border to draw the eye */
.pacey-overall-insight-focus {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: var(--pacey-space-md);
    border-left: 0.1875rem solid var(--pacey-blue);
}

.pacey-overall-insight-focus-label {
    font-weight: 600;
    font-size: var(--pacey-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pacey-blue);
}

.pacey-overall-insight-focus-text {
    font-size: var(--pacey-text-body);
    line-height: 1.55;
    color: var(--pacey-text);
    margin: 0;
}

/* CTA under the overall insight — leads to the full race-readiness chart.
   Sized to content (not full-width) so it reads as an inline action. */
.pacey-overall-insight-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: var(--pacey-text-label);
    color: var(--pacey-btn-primary-text);
    background: var(--pacey-navy);
    border-radius: var(--pacey-radius-sm);
    padding: 0.55rem 1rem;
    text-decoration: none;
    transition: background var(--pacey-transition), transform var(--pacey-transition);
}
.pacey-overall-insight-cta:hover { background: var(--pacey-btn-primary-hover); }
.pacey-overall-insight-cta:active { transform: translateY(0.0625rem); }
.pacey-overall-insight-cta:focus-visible {
    outline: 0.125rem solid var(--pacey-blue);
    outline-offset: 0.125rem;
}
.pacey-overall-insight-cta svg { width: 0.9rem; height: 0.9rem; }

/* Skeleton loading state for the overall insight — mirrors the real
   card layout (header, summary, takeaways, focus) with animated
   skeleton lines inside the same card container so the loading
   state matches the shape of the final content. */
.pacey-overall-insight-skeleton {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    padding: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

.pacey-overall-insight-skeleton[hidden] { display: none; }

/* Header row — verdict placeholder on left, score on right */
.pacey-overall-insight-skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pacey-space-sm);
}

/* Summary paragraph — three lines of varying width */
.pacey-overall-insight-skeleton-summary {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Takeaways — two-column grid matching the real layout */
.pacey-overall-insight-skeleton-takeaways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pacey-space-md);
}

@media (max-width: 37.5rem) {
    .pacey-overall-insight-skeleton-takeaways { grid-template-columns: 1fr; }
}

/* Individual takeaway skeleton — tinted background matching the real
   takeaway cards so the loading state has the same visual rhythm */
.pacey-overall-insight-skeleton-takeaway {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: var(--pacey-space-sm) var(--pacey-space-md);
    border-radius: var(--pacey-radius-sm);
    background: var(--pacey-light);
}

/* Focus block skeleton — left accent border matching the real focus */
.pacey-overall-insight-skeleton-focus {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: var(--pacey-space-md);
    border-left: 0.1875rem solid var(--pacey-border);
}