/* ==========================================================================
   v3-dashboard.css — shared design system for the EXPERIMENTAL v3 dashboards
   Issue #553, Phase 1b.
   ==========================================================================

   WHY THIS FILE EXISTS
   --------------------
   The v3 templates currently @push the same predash.css / postdash.css that
   the PRODUCTION pre_camp / post_camp templates load. Issue #553's first
   guardrail is that production must remain byte-for-byte unchanged, so the
   dark v3 theme lives here, in a standalone stylesheet, instead of being
   bolted onto the light sheets.

   Consequently this file is SELF-SUFFICIENT: it assumes nothing from
   predash.css / postdash.css / dashboard.css. It only assumes what
   resources/views/layouts/app.blade.php already loads globally:
     - Bootstrap's grid + reset (bundled inside app.css)
     - Font Awesome 4 (use.fontawesome.com kit)

   TOKEN NAMESPACE
   ---------------
   Every custom property is prefixed --v3- so nothing collides with the
   --exact-* tokens defined in predash.css / postdash.css. Tokens are scoped
   to .v3-root rather than :root so that loading this sheet on a page that is
   not a v3 dashboard has no visual effect whatsoever.

   THEMING (§1)
   ------------
   One architecture, one component library, one status system. The event
   family only swaps tokens:
     .v3-theme-asg    dark navy/black + ASG gold accent + ASG red action
     .v3-theme-exact  same dark system + EXACT international orange (#FE5000)

   STATUS SEMANTICS (§13)
   ----------------------
   danger  red    action blocks participation or a required outcome
   warning amber  attention needed, participation not blocked
   success green  complete / active / available
   info    blue   guidance or current event information
   muted   gray   pending on EXACT, not applicable, unavailable
   gold           prestige / high-priority merit — NOT a generic warning

   Gold is kept unmistakable from amber by TREATMENT as well as hue: merit
   gold is the only FILLED chip with dark ink; every status chip is an
   outlined, translucent chip with light ink. That difference survives both
   colour blindness and greyscale printing.

   ACCESSIBILITY
   -------------
   - 44px minimum touch target on every interactive element
   - Status is never colour-only: each state carries an icon AND a text label
   - Visible :focus-visible ring on all interactive elements
   - prefers-reduced-motion honoured at the bottom of this file
   - No animated warning graphics (the legacy vibration-alert.gif pattern is
     deliberately not carried forward)

   Measured WCAG contrast (EXACT theme; ASG theme is darker so every ratio is
   equal or higher). Columns: --v3-bg / --v3-surface-1 / --v3-surface-2 /
   --v3-surface-3. AA normal text needs 4.5:1 — the worst case below is 4.75:1.

     --v3-text        #F2F6FA   17.81  16.10  14.22  12.14
     --v3-text-muted  #AEBCCC   10.01   9.05   7.99   6.82
     --v3-text-subtle #94A3B5    7.52   6.80   6.00   5.12
     --v3-danger-line #FF6B6B    6.97   6.30   5.56   4.75
     --v3-warning-line#FFB020   10.58   9.56   8.44   7.21
     --v3-success-line#3EDC9A   10.97   9.92   8.76   7.47
     --v3-info-line   #6FB6FF    9.04   8.17   7.21   6.16
     --v3-muted-line  #AEBCCC   10.01   9.05   7.99   6.82
     --v3-gold-line   #FFD24A   13.42  12.13  10.71   9.14
     --v3-focus-ring  #7FD4FF   11.75  10.63   9.38   8.01

   Ink on solid fills:
     --v3-accent-ink  #0A0E14 on EXACT orange #FE5000      5.86
     --v3-accent-ink  #0A0E14 on hover        #FF7A33      7.44
     --v3-accent-ink  #1A1200 on ASG gold     #FFC72C     11.90
     --v3-action-ink  #FFFFFF on ASG red      #C8102E      5.88
     --v3-gold-ink    #1A1200 on gold gradient          8.19-14.36
     --v3-danger-ink  #FFFFFF on #C8102E / warning #8F5500 5.88 / 6.06
     --v3-success-ink #FFFFFF on #10744F / info #1B4E86    5.78 / 8.47

   RESPONSIVE (§1, §17)
   --------------------
   Mobile-first from a 390px baseline. Desktop is an intentional adaptation,
   not a stretched column:
     - a page WITHOUT a rail is capped at --v3-content-max and centred, so
       measure stays readable instead of running to 1600px
     - a page WITH a .v3-shell__rail child becomes a real two-column app
       layout (main + sticky rail) capped at --v3-page-max
     - every module reflows internally: task list 1 -> 2 columns, fellow
       athletes 2 -> 4, coach grid 1 -> 3, utilities 1 -> 4, the primary
       action card and athlete header go horizontal
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

.v3-root {
    /* --- background / surface layers --- */
    --v3-bg: #0A0E14;
    --v3-surface-1: #131A24;
    --v3-surface-2: #1C2532;
    --v3-surface-3: #26313F;
    --v3-surface-inset: #0F141C;
    --v3-border: #2B3646;
    --v3-border-strong: #3C4A5D;

    /* --- typography --- */
    --v3-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --v3-font-display: var(--v3-font-sans);
    --v3-font-size-2xs: 11px;
    --v3-font-size-xs: 12px;
    --v3-font-size-sm: 13px;
    --v3-font-size-base: 15px;
    --v3-font-size-md: 17px;
    --v3-font-size-lg: 20px;
    --v3-font-size-xl: 24px;
    --v3-font-size-2xl: 30px;
    --v3-font-size-3xl: 36px;
    --v3-weight-regular: 400;
    --v3-weight-medium: 500;
    --v3-weight-semibold: 600;
    --v3-weight-bold: 700;
    --v3-weight-black: 800;
    --v3-leading-tight: 1.18;
    --v3-leading-snug: 1.34;
    --v3-leading-normal: 1.55;
    --v3-tracking-wide: 0.06em;
    --v3-tracking-wider: 0.12em;

    /* --- text colours (all AA on surfaces 1-3) --- */
    --v3-text: #F2F6FA;
    --v3-text-muted: #AEBCCC;
    --v3-text-subtle: #94A3B5;
    --v3-text-ink: #0A0E14;

    /* --- status colours --- */
    /* *-line = text/icon/border on dark; *-fill = solid; *-tint = wash */
    --v3-danger-line: #FF6B6B;
    --v3-danger-fill: #C8102E;
    --v3-danger-ink: #FFFFFF;
    --v3-danger-tint: rgba(255, 107, 107, 0.12);

    --v3-warning-line: #FFB020;
    --v3-warning-fill: #8F5500;
    --v3-warning-ink: #FFFFFF;
    --v3-warning-tint: rgba(255, 176, 32, 0.12);

    --v3-success-line: #3EDC9A;
    --v3-success-fill: #10744F;
    --v3-success-ink: #FFFFFF;
    --v3-success-tint: rgba(62, 220, 154, 0.12);

    --v3-info-line: #6FB6FF;
    --v3-info-fill: #1B4E86;
    --v3-info-ink: #FFFFFF;
    --v3-info-tint: rgba(111, 182, 255, 0.12);

    --v3-muted-line: #AEBCCC;
    --v3-muted-fill: #2B3646;
    --v3-muted-ink: #F2F6FA;
    --v3-muted-tint: rgba(174, 188, 204, 0.10);

    /* --- gold merit state (prestige, never a warning) --- */
    --v3-gold-line: #FFD24A;
    --v3-gold-deep: #C9A227;
    --v3-gold-fill: linear-gradient(135deg, #FFE082 0%, #FFC72C 52%, #D9A400 100%);
    --v3-gold-ink: #1A1200;
    --v3-gold-tint: rgba(255, 210, 74, 0.12);

    /* --- action red (high priority / true blocker) --- */
    --v3-action: #C8102E;
    --v3-action-strong: #9E0C24;
    --v3-action-ink: #FFFFFF;

    /* --- primary accent by event family (overridden per theme below) ---
       On a dark foundation the hover/active state LIGHTENS rather than darkens:
       --v3-accent-ink is near-black on the EXACT orange (white on #FE5000 is
       only 3.3:1), so darkening the fill would push the button below WCAG AA. */
    --v3-accent: #FE5000;
    --v3-accent-strong: #FF7A33;
    --v3-accent-text: #FF7A33;
    --v3-accent-ink: #0A0E14;
    --v3-accent-tint: rgba(254, 80, 0, 0.14);

    /* --- focus --- */
    --v3-focus-ring: #7FD4FF;
    --v3-focus-width: 3px;
    --v3-focus-offset: 2px;

    /* --- spacing (4px base) --- */
    --v3-space-1: 4px;
    --v3-space-2: 8px;
    --v3-space-3: 12px;
    --v3-space-4: 16px;
    --v3-space-5: 20px;
    --v3-space-6: 24px;
    --v3-space-7: 32px;
    --v3-space-8: 40px;
    --v3-space-9: 48px;
    --v3-space-10: 64px;

    /* --- radii --- */
    --v3-radius-sm: 8px;
    --v3-radius-md: 12px;
    --v3-radius-lg: 16px;
    --v3-radius-xl: 22px;
    --v3-radius-pill: 999px;

    /* --- shadows --- */
    --v3-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --v3-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --v3-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
    --v3-shadow-accent: 0 10px 26px rgba(0, 0, 0, 0.5);
    --v3-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* --- layout / desktop behaviour --- */
    --v3-mobile-base: 390px;
    --v3-content-max: 760px;
    --v3-page-max: 1160px;
    --v3-rail-width: 336px;
    --v3-gutter: var(--v3-space-4);
    --v3-gutter-lg: var(--v3-space-7);
    --v3-touch-min: 44px;
    /* Breakpoints are documented here; media queries below use the literals
       because custom properties are not valid inside @media conditions. */
    --v3-bp-sm: 480px;
    --v3-bp-md: 768px;
    --v3-bp-lg: 1024px;
    --v3-bp-xl: 1280px;

    /* --- motion --- */
    --v3-duration-fast: 120ms;
    --v3-duration-base: 200ms;
    --v3-easing: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- ASG: dark navy/black, gold premium accent, ASG red for blockers ------ */
.v3-theme-asg {
    --v3-bg: #05080E;
    --v3-surface-1: #101722;
    --v3-surface-2: #1A2331;
    --v3-surface-3: #24303F;
    --v3-accent: #FFC72C;
    --v3-accent-strong: #D9A400;
    --v3-accent-text: #FFC72C;
    --v3-accent-ink: #1A1200;
    --v3-accent-tint: rgba(255, 199, 44, 0.13);
    --v3-action: #C8102E;
    --v3-action-strong: #9E0C24;
    --v3-action-ink: #FFFFFF;
}

/* --- EXACT (X1 + All American): same system, international orange -------- */
.v3-theme-exact {
    --v3-accent: #FE5000;
    --v3-accent-strong: #FF7A33;
    --v3-accent-text: #FF7A33;
    --v3-accent-ink: #0A0E14;
    --v3-accent-tint: rgba(254, 80, 0, 0.14);
}

/* --------------------------------------------------------------------------
   2. ROOT / RESET (scoped — never leaks outside .v3-root)
   -------------------------------------------------------------------------- */

.v3-root {
    background: var(--v3-bg);
    color: var(--v3-text);
    font-family: var(--v3-font-sans);
    font-size: var(--v3-font-size-base);
    line-height: var(--v3-leading-normal);
    border-radius: var(--v3-radius-xl);
    padding: var(--v3-space-5) 0 var(--v3-space-9);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.v3-root *,
.v3-root *::before,
.v3-root *::after {
    box-sizing: border-box;
}

.v3-root h1,
.v3-root h2,
.v3-root h3,
.v3-root h4,
.v3-root p,
.v3-root ul,
.v3-root ol,
.v3-root figure {
    margin: 0;
}

.v3-root ul,
.v3-root ol {
    padding: 0;
    list-style: none;
}

.v3-root img {
    max-width: 100%;
    display: block;
}

/* Buttons are frequently rendered as anchors (e.g. the emphasized-opportunity
   and primary-action CTAs). Without :not(.v3-btn), this generic accent-text
   link colour (specificity 0-1-1) overrides each .v3-btn--* variant's own ink
   (specificity 0-1-0), producing WCAG-AA contrast failures — ASG gold-on-gold
   and danger accent-on-red. Scoping it off button anchors lets the button's
   own ink apply. */
.v3-root a:not(.v3-btn) {
    color: var(--v3-accent-text);
    text-decoration: none;
}

.v3-root a:not(.v3-btn):hover,
.v3-root a:not(.v3-btn):focus {
    color: var(--v3-accent-text);
    text-decoration: underline;
}

.v3-root :focus-visible {
    outline: var(--v3-focus-width) solid var(--v3-focus-ring);
    outline-offset: var(--v3-focus-offset);
    border-radius: var(--v3-radius-sm);
}

/* Fallback for engines without :focus-visible — never remove the ring. */
.v3-root :focus {
    outline-color: var(--v3-focus-ring);
}

.v3-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. SHELL / PAGE LAYOUT
   -------------------------------------------------------------------------- */

.v3-shell {
    padding-inline: var(--v3-gutter);
}

.v3-shell__inner {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-5);
    width: 100%;
    max-width: var(--v3-content-max);
    margin-inline: auto;
}

.v3-shell__main,
.v3-shell__rail {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-5);
    min-width: 0;
}

/* --------------------------------------------------------------------------
   4. BUTTONS / LINK AFFORDANCES
   -------------------------------------------------------------------------- */

.v3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v3-space-2);
    min-height: var(--v3-touch-min);
    padding: var(--v3-space-3) var(--v3-space-5);
    border: 1px solid transparent;
    border-radius: var(--v3-radius-pill);
    font-family: inherit;
    font-size: var(--v3-font-size-base);
    font-weight: var(--v3-weight-bold);
    line-height: var(--v3-leading-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--v3-duration-fast) var(--v3-easing),
        background-color var(--v3-duration-fast) var(--v3-easing),
        border-color var(--v3-duration-fast) var(--v3-easing);
}

.v3-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.v3-btn:active {
    transform: translateY(0);
}

.v3-btn--primary {
    background: var(--v3-accent);
    border-color: var(--v3-accent);
    color: var(--v3-accent-ink);
}

.v3-btn--primary:hover,
.v3-btn--primary:focus {
    background: var(--v3-accent-strong);
    border-color: var(--v3-accent-strong);
    color: var(--v3-accent-ink);
}

.v3-btn--danger {
    background: var(--v3-action);
    border-color: var(--v3-action);
    color: var(--v3-action-ink);
}

.v3-btn--danger:hover,
.v3-btn--danger:focus {
    background: var(--v3-action-strong);
    border-color: var(--v3-action-strong);
    color: var(--v3-action-ink);
}

.v3-btn--gold {
    background: var(--v3-gold-fill);
    border-color: var(--v3-gold-deep);
    color: var(--v3-gold-ink);
}

.v3-btn--gold:hover,
.v3-btn--gold:focus {
    color: var(--v3-gold-ink);
}

.v3-btn--ghost {
    background: transparent;
    border-color: var(--v3-border-strong);
    color: var(--v3-text);
}

.v3-btn--ghost:hover,
.v3-btn--ghost:focus {
    background: var(--v3-surface-3);
    color: var(--v3-text);
}

.v3-btn--block {
    display: flex;
    width: 100%;
}

/* --------------------------------------------------------------------------
   5. CARD PRIMITIVE
   -------------------------------------------------------------------------- */

.v3-card {
    background: var(--v3-surface-1);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow-sm), var(--v3-shadow-inset);
}

/* --------------------------------------------------------------------------
   6. ATHLETE / EVENT HEADER
   -------------------------------------------------------------------------- */

.v3-athlete-header {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
    padding: var(--v3-space-5);
    background: linear-gradient(160deg, var(--v3-surface-2) 0%, var(--v3-surface-1) 62%);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-shadow-md);
}

.v3-athlete-header__identity {
    display: flex;
    align-items: center;
    gap: var(--v3-space-3);
}

.v3-athlete-header__avatar,
.v3-athlete-header__initials {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: var(--v3-radius-pill);
    border: 2px solid var(--v3-accent);
    object-fit: cover;
    background: var(--v3-surface-3);
}

.v3-athlete-header__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--v3-font-size-md);
    font-weight: var(--v3-weight-bold);
    color: var(--v3-accent-text);
    letter-spacing: var(--v3-tracking-wide);
}

.v3-athlete-header__name {
    font-size: var(--v3-font-size-xs);
    font-weight: var(--v3-weight-bold);
    letter-spacing: var(--v3-tracking-wider);
    text-transform: uppercase;
    color: var(--v3-text-subtle);
}

.v3-athlete-header__headline {
    font-family: var(--v3-font-display);
    font-size: var(--v3-font-size-xl);
    font-weight: var(--v3-weight-black);
    line-height: var(--v3-leading-tight);
    color: var(--v3-text);
}

.v3-athlete-header__subline {
    font-size: var(--v3-font-size-base);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text-muted);
}

.v3-athlete-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-space-2) var(--v3-space-4);
    margin-top: var(--v3-space-1);
}

.v3-athlete-header__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    font-size: var(--v3-font-size-sm);
    font-weight: var(--v3-weight-medium);
    color: var(--v3-text-muted);
}

.v3-athlete-header__meta-item::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: var(--v3-radius-pill);
    background: var(--v3-accent);
}

/* --------------------------------------------------------------------------
   7. CHIPS — phase, status, merit
   -------------------------------------------------------------------------- */

.v3-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-space-2);
}

/* --- phase chip --- */
.v3-phase-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    padding: var(--v3-space-2) var(--v3-space-3);
    border: 1px solid var(--v3-border-strong);
    border-radius: var(--v3-radius-pill);
    background: var(--v3-surface-2);
    font-size: var(--v3-font-size-xs);
    font-weight: var(--v3-weight-bold);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
    color: var(--v3-text);
}

.v3-phase-chip__icon {
    color: var(--v3-accent-text);
}

.v3-phase-chip--camp-day {
    border-color: var(--v3-accent);
    background: var(--v3-accent-tint);
}

/* --- status chip: ALWAYS outlined + translucent, light ink.
       Merit gold is the only filled chip, which keeps prestige distinct
       from amber warning even in greyscale. --- */
.v3-status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    padding: var(--v3-space-1) var(--v3-space-3);
    min-height: 26px;
    border: 1px solid currentColor;
    border-radius: var(--v3-radius-pill);
    font-size: var(--v3-font-size-xs);
    font-weight: var(--v3-weight-bold);
    letter-spacing: 0.02em;
    line-height: var(--v3-leading-tight);
}

.v3-status-chip__icon {
    font-size: var(--v3-font-size-xs);
}

.v3-status-chip--complete {
    color: var(--v3-success-line);
    background: var(--v3-success-tint);
}

.v3-status-chip--action_needed {
    color: var(--v3-danger-line);
    background: var(--v3-danger-tint);
}

.v3-status-chip--processing {
    color: var(--v3-info-line);
    background: var(--v3-info-tint);
}

.v3-status-chip--pending {
    color: var(--v3-muted-line);
    background: var(--v3-muted-tint);
    border-style: dashed;
}

.v3-status-chip--not_applicable {
    color: var(--v3-text-subtle);
    background: transparent;
    border-style: dotted;
}

/* --- merit badge: filled metallic gold, dark ink --- */
.v3-merit-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    padding: var(--v3-space-1) var(--v3-space-3);
    min-height: 26px;
    border: 1px solid var(--v3-gold-deep);
    border-radius: var(--v3-radius-pill);
    background: var(--v3-gold-fill);
    color: var(--v3-gold-ink);
    font-size: var(--v3-font-size-2xs);
    font-weight: var(--v3-weight-black);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
    line-height: var(--v3-leading-tight);
    box-shadow: var(--v3-shadow-sm);
}

.v3-merit-badge__icon {
    font-size: var(--v3-font-size-2xs);
}

/* --------------------------------------------------------------------------
   8. ALERT STRIP
   -------------------------------------------------------------------------- */

.v3-alert {
    display: flex;
    gap: var(--v3-space-3);
    padding: var(--v3-space-4);
    border: 1px solid var(--v3-border);
    border-left-width: 4px;
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-1);
}

.v3-alert__icon {
    flex: 0 0 auto;
    font-size: var(--v3-font-size-md);
    line-height: var(--v3-leading-snug);
}

.v3-alert__body {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-2);
    min-width: 0;
}

.v3-alert__title {
    font-size: var(--v3-font-size-base);
    font-weight: var(--v3-weight-bold);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

.v3-alert__message {
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-normal);
    color: var(--v3-text-muted);
}

.v3-alert__cta {
    align-self: flex-start;
    margin-top: var(--v3-space-1);
}

.v3-alert--danger {
    border-left-color: var(--v3-danger-line);
    background: linear-gradient(90deg, var(--v3-danger-tint) 0%, var(--v3-surface-1) 55%);
}

.v3-alert--danger .v3-alert__icon {
    color: var(--v3-danger-line);
}

.v3-alert--warning {
    border-left-color: var(--v3-warning-line);
    background: linear-gradient(90deg, var(--v3-warning-tint) 0%, var(--v3-surface-1) 55%);
}

.v3-alert--warning .v3-alert__icon {
    color: var(--v3-warning-line);
}

.v3-alert--info {
    border-left-color: var(--v3-info-line);
    background: linear-gradient(90deg, var(--v3-info-tint) 0%, var(--v3-surface-1) 55%);
}

.v3-alert--info .v3-alert__icon {
    color: var(--v3-info-line);
}

.v3-alert--muted {
    border-left-color: var(--v3-muted-line);
}

.v3-alert--muted .v3-alert__icon {
    color: var(--v3-muted-line);
}

/* --------------------------------------------------------------------------
   9. PRIMARY ACTION CARD (§3.1 — one primary action per moment)
   -------------------------------------------------------------------------- */

/* The tone rail is a left border rather than a ::before pseudo-element: this
   card becomes a CSS grid at >=768px, and a pseudo-element on a grid container
   would be auto-placed as a phantom grid item and break the template areas. */
.v3-primary-action {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
    padding: var(--v3-space-5);
    border: 1px solid var(--v3-border-strong);
    border-left: 4px solid var(--v3-accent);
    border-radius: var(--v3-radius-lg);
    background: linear-gradient(150deg, var(--v3-surface-2) 0%, var(--v3-surface-1) 70%);
    box-shadow: var(--v3-shadow-lg);
}

.v3-primary-action--danger {
    border-left-color: var(--v3-danger-line);
}

.v3-primary-action--warning {
    border-left-color: var(--v3-warning-line);
}

.v3-primary-action--success {
    border-left-color: var(--v3-success-line);
}

.v3-primary-action--info {
    border-left-color: var(--v3-info-line);
}

.v3-primary-action--muted {
    border-left-color: var(--v3-muted-line);
}

.v3-primary-action--gold {
    border-left-color: var(--v3-gold-line);
}

.v3-primary-action__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    font-size: var(--v3-font-size-2xs);
    font-weight: var(--v3-weight-black);
    letter-spacing: var(--v3-tracking-wider);
    text-transform: uppercase;
    color: var(--v3-accent-text);
}

.v3-primary-action--danger .v3-primary-action__eyebrow {
    color: var(--v3-danger-line);
}

.v3-primary-action--warning .v3-primary-action__eyebrow {
    color: var(--v3-warning-line);
}

.v3-primary-action--gold .v3-primary-action__eyebrow {
    color: var(--v3-gold-line);
}

.v3-primary-action__title {
    font-size: var(--v3-font-size-lg);
    font-weight: var(--v3-weight-black);
    line-height: var(--v3-leading-tight);
    color: var(--v3-text);
}

.v3-primary-action__body {
    font-size: var(--v3-font-size-base);
    line-height: var(--v3-leading-normal);
    color: var(--v3-text-muted);
}

.v3-primary-action__meta {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-2);
    padding: var(--v3-space-3);
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-inset);
    border: 1px solid var(--v3-border);
}

.v3-primary-action__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v3-primary-action__meta-label {
    font-size: var(--v3-font-size-2xs);
    font-weight: var(--v3-weight-bold);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
    color: var(--v3-text-subtle);
}

.v3-primary-action__meta-value {
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

/* --------------------------------------------------------------------------
   10. READINESS COUNT (§3.3 — a count, never a percentage)
   -------------------------------------------------------------------------- */

.v3-readiness {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
    padding: var(--v3-space-4) var(--v3-space-5);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-1);
}

.v3-readiness__label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--v3-space-2);
    font-size: var(--v3-font-size-base);
    font-weight: var(--v3-weight-semibold);
    color: var(--v3-text);
}

.v3-readiness__count {
    font-size: var(--v3-font-size-lg);
    font-weight: var(--v3-weight-black);
    color: var(--v3-accent-text);
    letter-spacing: 0.01em;
}

.v3-readiness__unit {
    font-size: var(--v3-font-size-sm);
    font-weight: var(--v3-weight-semibold);
    color: var(--v3-text-muted);
}

.v3-readiness--complete .v3-readiness__count {
    color: var(--v3-success-line);
}

/* Segmented meter: one segment per requirement, so the visual is a COUNT.
   Deliberately not a percentage bar. */
.v3-readiness__segments {
    display: flex;
    gap: var(--v3-space-1);
}

.v3-readiness__segment {
    flex: 1 1 0;
    height: 6px;
    border-radius: var(--v3-radius-pill);
    background: var(--v3-surface-3);
}

.v3-readiness__segment--done {
    background: var(--v3-success-line);
}

.v3-readiness__note {
    font-size: var(--v3-font-size-xs);
    color: var(--v3-text-subtle);
}

/* --------------------------------------------------------------------------
   11. TASK LIST / TASK ROW (§6.3)
   -------------------------------------------------------------------------- */

.v3-task-list {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-2);
}

.v3-task-row {
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-1);
    overflow: hidden;
}

.v3-task-row__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--v3-space-3);
    width: 100%;
    min-height: var(--v3-touch-min);
    padding: var(--v3-space-3) var(--v3-space-4);
    color: var(--v3-text);
    text-decoration: none;
}

a.v3-task-row__inner:hover,
a.v3-task-row__inner:focus {
    background: var(--v3-surface-2);
    color: var(--v3-text);
    text-decoration: none;
}

.v3-task-row__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    font-size: var(--v3-font-size-md);
}

.v3-task-row__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.v3-task-row__label {
    font-size: var(--v3-font-size-base);
    font-weight: var(--v3-weight-semibold);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

.v3-task-row__status {
    font-size: var(--v3-font-size-xs);
    font-weight: var(--v3-weight-bold);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
}

.v3-task-row__note {
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text-muted);
}

.v3-task-row__chevron {
    flex: 0 0 auto;
    align-self: center;
    color: var(--v3-text-subtle);
}

.v3-task-row--complete .v3-task-row__icon,
.v3-task-row--complete .v3-task-row__status {
    color: var(--v3-success-line);
}

.v3-task-row--action_needed {
    border-color: var(--v3-danger-line);
    background: linear-gradient(90deg, var(--v3-danger-tint) 0%, var(--v3-surface-1) 45%);
}

.v3-task-row--action_needed .v3-task-row__icon,
.v3-task-row--action_needed .v3-task-row__status {
    color: var(--v3-danger-line);
}

.v3-task-row--processing .v3-task-row__icon,
.v3-task-row--processing .v3-task-row__status {
    color: var(--v3-info-line);
}

.v3-task-row--pending {
    border-style: dashed;
}

.v3-task-row--pending .v3-task-row__icon,
.v3-task-row--pending .v3-task-row__status {
    color: var(--v3-muted-line);
}

.v3-task-row--not_applicable {
    background: transparent;
    border-style: dotted;
}

.v3-task-row--not_applicable .v3-task-row__icon,
.v3-task-row--not_applicable .v3-task-row__status,
.v3-task-row--not_applicable .v3-task-row__label {
    color: var(--v3-text-subtle);
}

/* --------------------------------------------------------------------------
   12. SECTION (§5 — empty sections collapse; the component renders nothing)
   -------------------------------------------------------------------------- */

.v3-section {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
    padding: var(--v3-space-5);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-lg);
    background: var(--v3-surface-1);
}

.v3-section__title {
    font-size: var(--v3-font-size-md);
    font-weight: var(--v3-weight-black);
    letter-spacing: 0.01em;
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

.v3-section__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v3-space-3);
    min-height: var(--v3-touch-min);
    cursor: pointer;
    list-style: none;
}

.v3-section__summary::-webkit-details-marker {
    display: none;
}

.v3-section__marker {
    flex: 0 0 auto;
    color: var(--v3-text-subtle);
    transition: transform var(--v3-duration-base) var(--v3-easing);
}

.v3-section[open] .v3-section__marker {
    transform: rotate(180deg);
}

.v3-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
}

/* Opt-in multi-column body for later phases:
   <x-v3.section title="..." class="v3-section--columns"> */
.v3-section--columns .v3-section__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--v3-space-3);
}

/* --------------------------------------------------------------------------
   13. EXPERIENCE COMMITMENT (§6.2)
   -------------------------------------------------------------------------- */

.v3-commitment {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-4);
    padding: var(--v3-space-5);
    border: 1px solid var(--v3-border-strong);
    border-radius: var(--v3-radius-lg);
    background: var(--v3-surface-inset);
}

.v3-commitment__title {
    font-size: var(--v3-font-size-md);
    font-weight: var(--v3-weight-black);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
    color: var(--v3-text);
}

.v3-commitment__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v3-space-3);
    min-height: var(--v3-touch-min);
    cursor: pointer;
    list-style: none;
}

.v3-commitment__summary::-webkit-details-marker {
    display: none;
}

.v3-commitment__marker {
    color: var(--v3-text-subtle);
    transition: transform var(--v3-duration-base) var(--v3-easing);
}

.v3-commitment[open] .v3-commitment__marker {
    transform: rotate(180deg);
}

.v3-commitment__body {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-4);
}

.v3-commitment__group-title {
    display: flex;
    align-items: center;
    gap: var(--v3-space-2);
    font-size: var(--v3-font-size-sm);
    font-weight: var(--v3-weight-bold);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
    color: var(--v3-accent-text);
    margin-bottom: var(--v3-space-2);
}

.v3-commitment__group--asks .v3-commitment__group-title {
    color: var(--v3-text-muted);
}

.v3-commitment__list {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-2);
}

.v3-commitment__item {
    display: flex;
    gap: var(--v3-space-2);
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-normal);
    color: var(--v3-text-muted);
}

.v3-commitment__item::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 9px;
    border-radius: var(--v3-radius-pill);
    background: var(--v3-border-strong);
}

.v3-commitment__group--commits .v3-commitment__item::before {
    background: var(--v3-accent);
}

/* --------------------------------------------------------------------------
   14. OPPORTUNITY CARD (§6.6 — one emphasised, the rest compact)
   -------------------------------------------------------------------------- */

.v3-opportunity--emphasis {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
    padding: var(--v3-space-5);
    border: 1px solid var(--v3-border-strong);
    border-radius: var(--v3-radius-lg);
    background: linear-gradient(150deg, var(--v3-surface-2) 0%, var(--v3-surface-1) 72%);
    box-shadow: var(--v3-shadow-md);
}

.v3-opportunity__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    font-size: var(--v3-font-size-2xs);
    font-weight: var(--v3-weight-black);
    letter-spacing: var(--v3-tracking-wider);
    text-transform: uppercase;
    color: var(--v3-accent-text);
}

.v3-opportunity--gold .v3-opportunity__eyebrow {
    color: var(--v3-gold-line);
}

.v3-opportunity--emphasis.v3-opportunity--gold {
    border-color: var(--v3-gold-deep);
}

.v3-opportunity--danger .v3-opportunity__eyebrow {
    color: var(--v3-danger-line);
}

.v3-opportunity--emphasis.v3-opportunity--danger {
    border-color: var(--v3-danger-fill);
}

.v3-opportunity__headline {
    font-size: var(--v3-font-size-md);
    font-weight: var(--v3-weight-bold);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

.v3-opportunity__body {
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-normal);
    color: var(--v3-text-muted);
}

/* Compact variant: the whole card is one link/target, not a button card. */
.v3-opportunity--compact {
    display: flex;
    align-items: center;
    gap: var(--v3-space-3);
    min-height: var(--v3-touch-min);
    padding: var(--v3-space-3) var(--v3-space-4);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-1);
    color: var(--v3-text);
    text-decoration: none;
}

a.v3-opportunity--compact:hover,
a.v3-opportunity--compact:focus {
    background: var(--v3-surface-2);
    border-color: var(--v3-border-strong);
    color: var(--v3-text);
    text-decoration: none;
}

.v3-opportunity__compact-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.v3-opportunity__compact-cta {
    font-size: var(--v3-font-size-xs);
    font-weight: var(--v3-weight-bold);
    color: var(--v3-accent-text);
}

.v3-opportunity__chevron {
    flex: 0 0 auto;
    color: var(--v3-text-subtle);
}

/* --------------------------------------------------------------------------
   15. FELLOW ATHLETES (§6.5)
   -------------------------------------------------------------------------- */

.v3-fellow-athletes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v3-space-3);
}

.v3-fellow-athlete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v3-space-2);
    padding: var(--v3-space-3);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-2);
    text-align: center;
}

.v3-fellow-athlete__avatar,
.v3-fellow-athlete__initials {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: var(--v3-radius-pill);
    object-fit: cover;
    background: var(--v3-surface-3);
    border: 1px solid var(--v3-border-strong);
}

.v3-fellow-athlete__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--v3-weight-bold);
    color: var(--v3-text-muted);
}

.v3-fellow-athlete__name {
    font-size: var(--v3-font-size-sm);
    font-weight: var(--v3-weight-bold);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

.v3-fellow-athlete__meta {
    font-size: var(--v3-font-size-xs);
    color: var(--v3-text-muted);
}

.v3-fellow-athlete__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--v3-space-1);
}

/* --------------------------------------------------------------------------
   16. COACH GRID
   -------------------------------------------------------------------------- */

.v3-coach-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v3-space-3);
}

.v3-coach-card {
    display: flex;
    flex-direction: column;
    gap: var(--v3-space-3);
    padding: var(--v3-space-4);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-md);
    background: var(--v3-surface-2);
}

.v3-coach-card__identity {
    display: flex;
    align-items: center;
    gap: var(--v3-space-3);
}

.v3-coach-card__logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: contain;
    border-radius: var(--v3-radius-sm);
    background: var(--v3-surface-3);
    padding: 2px;
}

.v3-coach-card__names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v3-coach-card__name {
    display: block;
    font-size: var(--v3-font-size-base);
    font-weight: var(--v3-weight-bold);
    line-height: var(--v3-leading-snug);
    color: var(--v3-text);
}

.v3-coach-card__college {
    display: block;
    font-size: var(--v3-font-size-xs);
    color: var(--v3-text-muted);
}

.v3-coach-card__flag {
    display: inline-flex;
    align-items: center;
    gap: var(--v3-space-2);
    align-self: flex-start;
    padding: var(--v3-space-1) var(--v3-space-3);
    border: 1px dotted var(--v3-muted-line);
    border-radius: var(--v3-radius-pill);
    font-size: var(--v3-font-size-2xs);
    font-weight: var(--v3-weight-bold);
    letter-spacing: var(--v3-tracking-wide);
    text-transform: uppercase;
    color: var(--v3-muted-line);
}

.v3-coach-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v3-space-2);
}

.v3-coach-card__actions .v3-btn {
    flex: 1 1 auto;
    font-size: var(--v3-font-size-sm);
    padding-inline: var(--v3-space-4);
}

/* --------------------------------------------------------------------------
   17. UTILITY LINKS
   -------------------------------------------------------------------------- */

.v3-utility-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v3-space-2);
}

.v3-utility-links__item {
    display: block;
    min-width: 0;
}

.v3-utility-links__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.v3-utility-links__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v3-space-3);
    min-height: var(--v3-touch-min);
    padding: var(--v3-space-2) var(--v3-space-4);
    border: 1px solid var(--v3-border);
    border-radius: var(--v3-radius-sm);
    background: var(--v3-surface-2);
    font-size: var(--v3-font-size-sm);
    font-weight: var(--v3-weight-semibold);
    color: var(--v3-text-muted);
    text-decoration: none;
}

.v3-utility-links__link:hover,
.v3-utility-links__link:focus {
    background: var(--v3-surface-3);
    color: var(--v3-text);
    text-decoration: none;
}

.v3-utility-links__icon {
    flex: 0 0 auto;
    color: var(--v3-text-subtle);
    font-size: var(--v3-font-size-xs);
}

/* --------------------------------------------------------------------------
   18. DESKTOP ADAPTATION — intentional, not a stretched mobile column
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .v3-root {
        padding: var(--v3-space-7) 0 var(--v3-space-10);
    }

    .v3-shell {
        padding-inline: var(--v3-gutter-lg);
    }

    .v3-shell__inner {
        gap: var(--v3-space-6);
    }

    .v3-athlete-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "identity headline"
            "identity subline"
            "meta     meta";
        column-gap: var(--v3-space-5);
        row-gap: var(--v3-space-2);
        padding: var(--v3-space-6) var(--v3-space-7);
        align-items: center;
    }

    .v3-athlete-header__identity {
        grid-area: identity;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--v3-space-2);
    }

    .v3-athlete-header__avatar,
    .v3-athlete-header__initials {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    .v3-athlete-header__headline {
        grid-area: headline;
        font-size: var(--v3-font-size-2xl);
        align-self: end;
    }

    .v3-athlete-header__subline {
        grid-area: subline;
        align-self: start;
        font-size: var(--v3-font-size-md);
    }

    .v3-athlete-header__meta {
        grid-area: meta;
    }

    .v3-primary-action {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
        grid-template-areas:
            "eyebrow meta"
            "title   meta"
            "body    meta"
            "cta     meta";
        column-gap: var(--v3-space-6);
        row-gap: var(--v3-space-3);
        padding: var(--v3-space-6) var(--v3-space-7);
        align-items: start;
    }

    .v3-primary-action__eyebrow {
        grid-area: eyebrow;
    }

    .v3-primary-action__title {
        grid-area: title;
        font-size: var(--v3-font-size-xl);
    }

    .v3-primary-action__body {
        grid-area: body;
    }

    .v3-primary-action__meta {
        grid-area: meta;
        align-self: stretch;
    }

    .v3-primary-action__cta {
        grid-area: cta;
        justify-self: start;
        align-self: end;
    }

    .v3-task-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--v3-space-3);
    }

    .v3-section--columns .v3-section__body {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .v3-commitment__body {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--v3-space-4) var(--v3-space-7);
    }

    .v3-commitment__group {
        flex: 1 1 0;
        min-width: 0;
    }

    /* The closing callout is a flex sibling of the commits/asks columns, not
       one of them — without its own basis it competed with .v3-commitment__group
       for row space and squeezed the columns down to a sliver (issue #553
       regression). Force it onto its own full-width row instead. */
    .v3-commitment__closing {
        flex: 1 1 100%;
    }

    .v3-fellow-athletes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .v3-coach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v3-utility-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v3-opportunity--emphasis {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "eyebrow  cta"
            "headline cta"
            "body     cta";
        column-gap: var(--v3-space-6);
        row-gap: var(--v3-space-2);
        align-items: center;
    }

    .v3-opportunity--emphasis .v3-opportunity__eyebrow {
        grid-area: eyebrow;
    }

    .v3-opportunity--emphasis .v3-opportunity__headline {
        grid-area: headline;
        font-size: var(--v3-font-size-lg);
    }

    .v3-opportunity--emphasis .v3-opportunity__body {
        grid-area: body;
        font-size: var(--v3-font-size-base);
    }

    .v3-opportunity--emphasis .v3-opportunity__cta {
        grid-area: cta;
    }
}

@media (min-width: 1024px) {
    /* Two-column app layout — only when the page supplies a rail. Pages that
       do not use a rail stay capped at --v3-content-max above, so a wide
       viewport never turns body copy into a 1600px measure. */
    .v3-shell__inner:has(> .v3-shell__rail) {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--v3-space-7);
        max-width: var(--v3-page-max);
    }

    .v3-shell__inner:has(> .v3-shell__rail) > .v3-shell__main {
        flex: 1 1 0;
    }

    .v3-shell__inner:has(> .v3-shell__rail) > .v3-shell__rail {
        flex: 0 0 var(--v3-rail-width);
        position: sticky;
        top: var(--v3-space-6);
    }

    .v3-fellow-athletes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .v3-coach-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .v3-utility-links {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .v3-athlete-header__headline {
        font-size: var(--v3-font-size-3xl);
    }
}

/* Inside the narrower rail, modules fall back to a single column. */
@media (min-width: 1024px) {
    .v3-shell__rail .v3-task-list,
    .v3-shell__rail .v3-utility-links,
    .v3-shell__rail .v3-coach-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .v3-shell__rail .v3-fellow-athletes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION (§13)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .v3-root *,
    .v3-root *::before,
    .v3-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .v3-btn:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   20. FORCED COLORS / HIGH CONTRAST
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .v3-card,
    .v3-alert,
    .v3-section,
    .v3-task-row,
    .v3-primary-action,
    .v3-status-chip,
    .v3-merit-badge {
        border: 1px solid CanvasText;
    }
}

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */

@media print {
    .v3-root {
        background: #FFFFFF;
        color: #000000;
        box-shadow: none;
    }

    .v3-root .v3-btn,
    .v3-root .v3-task-row__chevron,
    .v3-root .v3-opportunity__chevron {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   22. EXPERIENCE COMMITMENT ADDITIONS (V3_UX_ALIGNMENT_SPEC.md B3)
   -------------------------------------------------------------------------- */

/* B3a: the leading "EX" of "EXperience" carries the EXACT accent. Only the
   exact theme passes highlight-ex, so ASG never renders this span. */
.v3-root .v3-commitment__ex {
    color: var(--v3-accent);
}

/* B3b: growth-mindset callout at the bottom of the commitment block. */
.v3-root .v3-commitment__closing {
    margin: var(--v3-space-4) 0 0;
    padding: var(--v3-space-3) var(--v3-space-4);
    border-left: 3px solid var(--v3-accent);
    background: var(--v3-surface-inset);
    border-radius: 0 var(--v3-radius-md) var(--v3-radius-md) 0;
    color: var(--v3-text-muted);
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-normal);
}

/* Merit badges as links (B10a/B10c) and image marks (B5). */
.v3-root a.v3-merit-badge--link {
    text-decoration: none;
    cursor: pointer;
}

.v3-root .v3-merit-badge__img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   PREPSPONSOR FUNDRAISING SECTION (EXACTsports/PrepSponsor#1168)

   An optional ecosystem offer, so it borrows the muted body treatment the
   opportunity cards use rather than introducing a second voice. The CTA is a
   form submit button, which is why .v3-btn (declared for both <a> and <button>)
   needs no new rules here — only the spacing between the three stacked parts.
   -------------------------------------------------------------------------- */

.v3-prepsponsor__body {
    margin: 0;
    font-size: var(--v3-font-size-sm);
    line-height: var(--v3-leading-normal);
    color: var(--v3-text-muted);
}

.v3-prepsponsor__form {
    margin: 0;
}

.v3-prepsponsor__cta {
    width: 100%;
}

@media (min-width: 640px) {
    .v3-prepsponsor__cta {
        width: auto;
    }
}