/* ---------- Tokens (light theme) ---------- */
  :root{
    --bg:        #f7f9fc;
    --bg-2:      #eaf0f7;
    --bg-3:      #dde7f2;
    --card:      #ffffff;
    --line:      #d8e2ee;
    --line-2:    #bccbdf;

    /* --gold and --text-dim were darkened from their original #9c6f13 /
       #5f7695 during the Phase 10 (P10-03) accessibility audit — the
       original shades failed WCAG 2.1 AA's 4.5:1 text-contrast threshold
       against several of this page's light background tones (as low as
       3.57:1), flagged by an automated axe-core scan. These new shades
       keep the same gold/slate-blue hue family (same brand identity) but
       clear 4.5:1 against every background token in this file. --gold-hi
       (used only for decorative borders/icons, never body text) is
       unchanged. See tests/phase10/a11y_scan.mjs + README's Phase 10
       section for the full audit. */
    --gold:      #7a5410;
    --gold-hi:   #c9982f;
    --gold-lo:   #6b4a0a;
    --gold-deep: #3d2e07;

    --red:       #d6303f;
    --red-hi:    #a3202c;
    --red-lo:    #b8232f;

    --track:     #123a63;
    --cream:     #0f2a4d;

    --text:      #111a2c;
    --text-mut:  #4a5b73;
    --text-dim:  #455673;

    --font-display: "Anton", "Oswald", Impact, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

    --pad-x: clamp(20px, 5vw, 72px);
    --section-y: clamp(64px, 9vw, 128px);
    --radius: 14px;

    --grad-gold: linear-gradient(180deg, #d9ad4a 0%, #a67c1f 35%, #7a5a12 65%, #4a3708 100%);
    --grad-gold-flat: linear-gradient(180deg, #e0b354 0%, #b8862a 100%);
    --grad-red:  linear-gradient(180deg, #ff5967 0%, #e63946 55%, #b8232f 100%);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }

  /* ---------- Layout helpers ---------- */
  .wrap{ max-width:1280px; margin:0 auto; padding:0 var(--pad-x); }
  .section{ padding: var(--section-y) 0; position:relative; }
  .section + .section{ border-top:1px solid var(--line); }

  /* ---------- Typography ---------- */
  h1,h2,h3,h4{ margin:0; letter-spacing:.01em; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold);
  }
  .eyebrow::before{
    content:""; width:22px; height:1px; background:var(--gold); opacity:.7;
  }
  .display{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    line-height:.92;
    letter-spacing:.005em;
  }
  .h1{ font-size: clamp(46px, 9vw, 112px); }
  .h2{ font-size: clamp(34px, 5.6vw, 68px); }
  .h3{ font-size: clamp(24px, 3.2vw, 34px); }
  .lede{
    font-size: clamp(16px, 1.6vw, 20px);
    color:var(--text-mut);
    max-width: 60ch;
    line-height:1.55;
  }

  /* Varsity outlined red headline treatment (echoes logo wordmark) */
  .varsity{
    color:var(--red);
    -webkit-text-stroke: 1.5px #0f2a4d;
    text-shadow:
      0 1px 0 rgba(255,255,255,.7),
      0 2px 4px rgba(17,26,44,.18);
  }
  /* Metallic gold text */
  .gold-text{
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip:text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 22px;
    border-radius: 10px;
    font-weight:700; font-size:15px; letter-spacing:.02em;
    border:0; cursor:pointer;
    min-height:48px;
    white-space:nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-red{
    background: var(--grad-red);
    color:#fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 8px 24px -8px rgba(230,57,70,.5);
  }
  .btn-red:hover{ background: linear-gradient(180deg,#ff6d78,#e63946 60%,#c4262f); }
  .btn-gold{
    background: var(--grad-gold-flat);
    color:#221a04;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 24px -10px rgba(232,193,90,.4);
  }
  .btn-gold:hover{ filter: brightness(1.05); }
  .btn-ghost{
    background: transparent;
    color: var(--text);
    border:1px solid var(--line-2);
  }
  .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

  /* ---------- Lane stripe (recurring divider) ---------- */
  .lane{
    height:14px;
    background:
      linear-gradient(90deg, transparent 0, transparent 4px, var(--gold-lo) 4px, var(--gold-lo) 5px, transparent 5px) 0/24px 100% repeat-x,
      linear-gradient(180deg, transparent 5px, var(--gold) 5px, var(--gold) 6px, transparent 6px, transparent 8px, var(--gold-lo) 8px, var(--gold-lo) 9px, transparent 9px);
    opacity:.7;
  }
  .lane-thin{
    height:1px;
    background: linear-gradient(90deg, transparent, var(--gold-lo) 15%, var(--gold) 50%, var(--gold-lo) 85%, transparent);
    opacity:.55;
  }

  /* ---------- Header / Nav ---------- */
  .nav{
    position:sticky; top:0; z-index:80;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    background: rgba(247,249,252,.82);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 0;
    gap:16px;
  }
  .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
  .brand img{ height:44px; width:auto; }
  .brand-txt{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:20px; letter-spacing:.06em;
    color:var(--gold);
    line-height:1;
  }
  .brand-txt small{
    display:block; font-family:var(--font-mono);
    font-size:9px; letter-spacing:.32em; color:var(--text-dim);
    margin-top:4px;
  }
  .nav-links{
    display:flex; gap:6px; align-items:center;
  }
  .nav-links a{
    padding:8px 12px; border-radius:8px;
    font-size:14px; font-weight:500; color:var(--text-mut);
  }
  .nav-links a:hover{ color:var(--gold); }
  .nav-cta{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }
  .nav-cta .btn{ padding:10px 16px; min-height:40px; font-size:14px; }

  /* Org/role context switcher (P3-08 write side; polished visual pass Stage 3).
     Lets a user with 2+ active org roles pick which org's scope the app is
     currently acting under — mirrors the "Acting as" pattern of the drawer's
     copy below. Hidden by default (app.js only reveals it once it confirms
     the visitor holds 2+ active org role assignments); a lone role never
     needs a switcher since there's nothing to switch to. */
  .nav-context-switcher{
    display:flex; align-items:center; gap:8px;
    padding:6px 4px 6px 12px; border-radius:10px;
    background: rgba(156,111,19,.07);
    border:1px solid rgba(156,111,19,.22);
  }
  .nav-context-switcher::before{
    content:""; flex:none; width:7px; height:7px; border-radius:50%;
    background: var(--gold-hi);
    box-shadow: 0 0 0 3px rgba(156,111,19,.16);
  }
  .nav-context-switcher select{
    appearance:none; -webkit-appearance:none;
    padding:8px 30px 8px 4px; min-height:36px; border-radius:6px;
    border:0; background:transparent; color:var(--text);
    font-size:13px; font-weight:600; font-family:var(--font-body);
    max-width:180px; white-space:nowrap; text-overflow:ellipsis;
    cursor:pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c6f13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px 14px;
  }
  .nav-context-switcher select:focus-visible{
    outline: 2px solid var(--gold); outline-offset:2px; border-radius:6px;
  }
  .nav-context-switcher select:disabled{ opacity:.55; cursor:wait; }

  .hamburger{
    display:none;
    width:44px; height:44px; border-radius:10px;
    background:transparent; border:1px solid var(--line-2);
    align-items:center; justify-content:center;
    color:var(--gold);
  }
  .hamburger svg{ width:22px; height:22px; }
  /* Notification badge on the hamburger (UX Upgrade Phase 2 follow-up,
     2026-08-21): mirrors .nav-bell-badge exactly. Needed because below
     960px the desktop bell (.nav-cta .btn-ghost) is hidden and the
     720px-and-under bottom-nav has no notification tab, so without this a
     mobile/tablet visitor had no "do I have a notification?" affordance. */
  .hamburger-badge{
    position:absolute; top:2px; right:2px; min-width:16px; height:16px; border-radius:999px;
    background:var(--red); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:700;
    display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1;
  }

  @media (max-width: 960px){
    .nav-links, .nav-cta .btn-ghost{ display:none; }
    .nav-context-switcher{ display:none !important; }
    .hamburger{ display:inline-flex; }
  }
  @media (max-width: 520px){
    .brand-txt{ font-size:16px; }
    .brand img{ height:36px; }
  }

  /* Mobile drawer */
  .drawer{
    position:fixed; inset:0; z-index:90;
    background: rgba(15,24,40,.55);
    backdrop-filter: blur(8px);
    display:none;
  }
  .drawer.open{ display:block; }
  .drawer-panel{
    position:absolute; right:0; top:0; bottom:0;
    width: min(84vw, 340px);
    background: var(--bg-2);
    border-left:1px solid var(--line);
    padding: 24px;
    display:flex; flex-direction:column; gap:6px;
    overflow-y:auto;
  }
  .drawer-close{
    align-self:flex-end;
    background:transparent; border:1px solid var(--line-2); color:var(--gold);
    width:40px; height:40px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    margin-bottom:12px;
  }
  .drawer a, .drawer-link-btn{
    padding:14px 12px; border-radius:10px;
    font-size:18px; font-weight:600;
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .drawer a:hover, .drawer-link-btn:hover{ color:var(--gold); }
  .drawer .btn{ margin-top:16px; }
  /* Account/dashboard/logout links, injected by app.js only for authenticated
     visitors — kept visually distinct (gold) from the always-visible marketing
     links above them so a logged-in user's own account actions stand out. */
  .drawer a#drawer-dashboard-link, .drawer a#drawer-account-link{ color:var(--gold); }
  .drawer-link-btn{
    width:100%; text-align:left;
    background:transparent; border:0; border-bottom:1px solid var(--line);
    color:var(--red-hi); font-family:inherit; cursor:pointer;
  }
  #drawer-guest-actions{ display:flex; flex-direction:column; gap:6px; }

  /* Drawer's own copy of the org/role context switcher (Stage 3 polish pass):
     the desktop .nav-context-switcher is hidden entirely below 960px (its
     compact select doesn't fit alongside the hamburger at that width), so
     without this the switcher was unreachable on any phone/tablet even
     though the underlying multi-org-role feature works fine there. app.js
     builds both selects from the same fetched assignment list and keeps
     their selected value in sync with each other (picking one updates the
     other immediately, no page reload). */
  .drawer-context-switcher{
    display:flex; flex-direction:column; gap:6px;
    padding:14px 12px; margin:4px 0;
    border-radius:10px;
    background: rgba(156,111,19,.07);
    border:1px solid rgba(156,111,19,.22);
  }
  .drawer-context-label{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold);
  }
  .drawer-context-label::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background: var(--gold-hi);
    box-shadow: 0 0 0 3px rgba(156,111,19,.16);
  }
  .drawer-context-switcher select{
    width:100%; padding:10px 12px; min-height:44px; border-radius:8px;
    border:1px solid var(--line-2); background:#fff; color:var(--text);
    font-size:15px; font-weight:600; font-family:var(--font-body);
    cursor:pointer;
  }
  .drawer-context-switcher select:disabled{ opacity:.55; cursor:wait; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    /* Public-launch hardening (Section 2): tightened from
       clamp(56px,8vw,96px)/clamp(48px,6vw,72px) so both hero CTAs land
       in the first viewport at 1366x768 and 1440x900 without reducing
       the headline/logo font sizes (brand impact preserved). Combined
       with the align-items:start fix on .hero-grid and the trimmed
       margins below. */
    padding: 32px 0 32px;
    overflow:hidden;
    background-image:
      linear-gradient(180deg, rgba(247,249,252,.94) 0%, rgba(247,249,252,.88) 45%, rgba(247,249,252,.97) 100%),
      url('/static/img/hero-track.jpg');
    background-size: cover;
    background-position: center 30%;
  }
  .hero::before{
    content:""; position:absolute; inset:-20% -10% auto -10%;
    height: 70%;
    background: radial-gradient(60% 80% at 50% 10%, rgba(156,111,19,.14), transparent 65%);
    pointer-events:none;
  }
  .hero::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--gold-lo) 20%, var(--gold) 50%, var(--gold-lo) 80%, transparent);
    opacity:.6;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 64px);
    /* Public-launch hardening (Section 2): align to the top of the row
       instead of centering. The right-column demo stack is much taller
       than the left-column copy; center-alignment was pushing the
       headline/CTAs down by ~350px and forcing them below the fold at
       1366x768/1440x900. Top-alignment keeps both columns starting at
       the same baseline without changing either column's own content. */
    align-items:start;
  }
  @media (max-width: 960px){
    .hero-grid{ grid-template-columns: 1fr; }
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    padding:6px 12px; border-radius:999px;
    background: rgba(255,255,255,.75);
    border:1px solid rgba(156,111,19,.3);
    color:var(--gold);
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    margin-bottom: 14px;
  }
  .hero-tag .dot{
    width:6px; height:6px; border-radius:50%; background:var(--red);
    box-shadow:0 0 0 3px rgba(230,57,70,.25);
  }
  .hero h1{ margin-bottom: 12px; }
  .hero h1 .line-1{ display:block; }
  .hero h1 .line-2{ display:block; }
  .hero-actions{
    display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;
  }
  .hero-strip{
    display:flex; gap:24px; flex-wrap:wrap;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px dashed var(--line-2);
    color:var(--text-mut);
    font-size:13px;
  }
  .hero-strip .k{
    color: var(--gold);
    font-family:var(--font-mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:11px;
    margin-right:8px;
  }

  /* Hero card: 3-pillar preview */
  .hero-card{
    background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    box-shadow:
      0 30px 60px -24px rgba(17,26,44,.22),
      inset 0 1px 0 rgba(255,255,255,.6);
    position:relative;
  }
  .hero-card::before{
    content:""; position:absolute; left:22px; right:22px; top:0;
    height:1px; background: var(--grad-gold);
    opacity:.7;
  }
  .hc-title{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:14px;
  }
  .hc-title .label{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--text-dim);
  }
  .hc-title .live{
    display:inline-flex; align-items:center; gap:6px;
    color: var(--red-hi);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  }
  .hc-title .live::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background: var(--red);
    box-shadow: 0 0 0 3px rgba(230,57,70,.25);
    animation: pulse 1.6s infinite;
  }
  @keyframes pulse{
    0%,100%{ box-shadow: 0 0 0 3px rgba(230,57,70,.25); }
    50%{ box-shadow: 0 0 0 6px rgba(230,57,70,0); }
  }
  .hc-meet{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:22px; letter-spacing:.02em; color:var(--cream);
    margin-bottom:2px;
  }
  .hc-sub{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--text-mut);
    margin-bottom:16px;
  }
  .hc-row{
    display:flex; justify-content:space-between; align-items:center;
    padding: 12px 14px;
    border-radius:10px;
    background: #e9eff8;
    border:1px solid var(--line);
    margin-bottom:8px;
  }
  .hc-row .left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .hc-lane{
    width:28px; height:28px; border-radius:8px;
    background: linear-gradient(180deg,#ffffff,#dfe9f5);
    border:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-family:var(--font-mono); font-size:12px; font-weight:600;
  }
  .hc-athlete{ font-weight:600; font-size:14px; color:var(--text); }
  .hc-team{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); letter-spacing:.08em; }
  .hc-time{
    font-family:var(--font-mono); font-weight:600; font-size:15px;
  }
  .hc-time.gold{ color:var(--gold); }
  .hc-time.red{ color:var(--red-hi); }
  .hc-foot{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-mut);
  }
  .hc-foot .ok{ color: var(--gold); }

  /* ---------- Pillars strip ---------- */
  .pillars{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
    margin-top: 40px;
  }
  @media (max-width:720px){ .pillars{ grid-template-columns:1fr; } }
  .pill{
    display:flex; align-items:center; gap:14px;
    padding: 16px 18px;
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 12px;
  }
  .pill .n{
    font-family:var(--font-display); font-size:28px;
    color:transparent; -webkit-text-stroke: 1.2px var(--gold);
    line-height:1;
  }
  .pill .t{ font-weight:700; font-size:15px; color:var(--text); }
  .pill .s{ font-size:12px; color:var(--text-mut); }

  /* ---------- Section header ---------- */
  .sh{ margin-bottom: 44px; max-width:820px; }
  .sh .h2{ margin-top:14px; margin-bottom:14px; }

  /* ---------- Doors (4 audiences) ---------- */
  .doors{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  }
  @media (max-width: 1024px){ .doors{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .doors{ grid-template-columns: 1fr; } }
  .door{
    position:relative;
    background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
    border:1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px 22px;
    overflow:hidden;
    transition: border-color .2s ease, transform .2s ease;
    box-shadow: 0 20px 40px -28px rgba(17,26,44,.18);
  }
  .door:hover{ border-color: var(--gold-lo); transform: translateY(-2px); }
  .door::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: var(--grad-gold); opacity:.9;
  }
  .door .num{
    font-family:var(--font-display); font-size:56px; line-height:1;
    color:transparent; -webkit-text-stroke: 1.5px var(--gold-lo);
    position:absolute; top:16px; right:20px;
  }
  .door .badge{
    display:inline-block; padding:4px 10px;
    background: var(--grad-red); color:#fff;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    border-radius: 4px;
    margin-bottom:14px;
  }
  .door h3{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:26px; letter-spacing:.02em; color:var(--cream);
    margin-bottom:8px;
  }
  .door p{
    color:var(--text-mut); font-size:14px; line-height:1.5;
    margin-bottom: 18px;
  }
  .door ul{ list-style:none; padding:0; margin:0 0 8px; }
  .door li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:13px; color:var(--text);
    padding: 6px 0;
    border-top:1px dashed var(--line);
  }
  .door li::before{
    content:""; flex-shrink:0;
    width:6px; height:6px; margin-top:8px;
    background: var(--gold); border-radius:1px;
    transform: rotate(45deg);
  }

  /* ---------- Three pillars big ---------- */
  .three{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    align-items: stretch;
  }
  @media (max-width: 880px){ .three{ grid-template-columns:1fr; } }
  .pcol{
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    position:relative;
  }
  .pcol .pn{
    font-family:var(--font-display); font-size:96px; line-height:.9;
    color:transparent; -webkit-text-stroke: 1.6px var(--gold);
    letter-spacing:.02em;
    margin-bottom: 8px;
  }
  .pcol h3{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:34px; color:var(--red);
    -webkit-text-stroke: 1px #e0b354;
    margin-bottom: 8px;
    letter-spacing:.01em;
  }
  .pcol p{ color:var(--text-mut); font-size:14.5px; margin:0 0 16px; }
  .pcol .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding: 6px 12px; border-radius:999px;
    background: rgba(232,193,90,.08); border:1px solid rgba(232,193,90,.28);
    color: var(--gold);
    font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  }

  /* ---------- Features section background (long jump action photo) ---------- */
  #features{
    position:relative;
    background-image:
      linear-gradient(180deg, rgba(247,249,252,.95) 0%, rgba(247,249,252,.9) 30%, rgba(247,249,252,.97) 100%),
      url('/static/img/features-longjump.jpg');
    background-size: cover;
    background-position: center 35%;
  }

  /* ---------- Feature grid ---------- */
  .fgrid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
  }
  @media (max-width: 900px){ .fgrid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .fgrid{ grid-template-columns: 1fr; } }
  .feat{
    background: var(--card);
    border:1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    position:relative;
    transition: border-color .2s ease;
  }
  .feat:hover{ border-color: var(--gold-lo); }
  .feat::before{
    content:""; position:absolute; left:22px; right:22px; top:0; height:1px;
    background: var(--gold); opacity:.4;
  }
  .feat .ic{
    width:40px; height:40px; border-radius:10px;
    background: rgba(232,193,90,.08);
    border:1px solid rgba(232,193,90,.3);
    color: var(--gold);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    font-family:var(--font-mono); font-weight:600; font-size:14px;
  }
  .feat h4{
    font-family:var(--font-display); text-transform:uppercase;
    color:var(--cream); font-size:20px; margin-bottom:6px; letter-spacing:.02em;
  }
  .feat p{ color:var(--text-mut); font-size:14px; margin:0; }

  /* ---------- Split sections ---------- */
  .split{
    display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
    align-items:center;
  }
  @media (max-width: 900px){ .split{ grid-template-columns:1fr; } }
  .split.reverse .split-copy{ order:2; }
  @media (max-width: 900px){ .split.reverse .split-copy{ order:0; } }
  .split-copy h2{ margin: 12px 0 14px; }
  .split-copy .checks{ list-style:none; padding:0; margin: 20px 0 24px; }
  .split-copy .checks li{
    display:flex; gap:12px; align-items:flex-start;
    padding: 10px 0; border-top:1px dashed var(--line);
    font-size:15px;
  }
  .split-copy .checks li:first-child{ border-top:0; }
  .split-copy .checks li::before{
    content:"✓"; color: var(--gold);
    font-weight:800; font-size:15px; margin-top:1px;
  }

  /* Meet-day mock */
  .mock{
    background: linear-gradient(180deg,#ffffff,#eef3fa);
    border:1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 30px 60px -24px rgba(17,26,44,.2);
  }
  .mock-head{
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom: 14px;
    border-bottom:1px solid var(--line);
    margin-bottom:14px;
  }
  .mock-head .t{
    font-family:var(--font-display); font-size:22px; color:var(--cream);
    text-transform:uppercase; letter-spacing:.02em;
  }
  .mock-head .s{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.18em; text-transform:uppercase;
  }
  .step-list{ display:flex; flex-direction:column; gap:8px; }
  .step{
    display:flex; align-items:center; gap:14px;
    padding: 12px 14px;
    background: #e9eff8;
    border:1px solid var(--line);
    border-radius: 10px;
  }
  .step .s-n{
    font-family:var(--font-mono); font-size:12px; color: var(--gold);
    width:34px;
    /* Public-launch hardening (Section 2): classic flexbox overflow bug
       — a flex item's default min-width is `auto` (its content's
       min-content size), which can exceed a fixed `width` for long
       unbreakable text (e.g. "Eastside Elite") and force the item —
       and the whole page — wider than the viewport on narrow screens. */
    min-width:0; overflow-wrap:anywhere; word-break:break-word;
  }
  .step .s-t{ flex:1; font-size:14px; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
  .step .s-tag{
    font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
    text-transform:uppercase;
    padding: 4px 8px; border-radius: 4px;
  }
  .s-tag.done{ background: rgba(156,111,19,.14); color: var(--gold-lo); border:1px solid rgba(156,111,19,.35); }
  .s-tag.live{ background: rgba(214,48,63,.1); color: var(--red-hi); border:1px solid rgba(214,48,63,.32); }
  .s-tag.next{ background: #e2e9f3; color: var(--text-mut); border:1px solid var(--line-2); }

  /* Parent notification mock */
  .phone{
    background: linear-gradient(180deg,#ffffff,#e6edf7);
    border:1px solid var(--line);
    border-radius: 28px;
    padding: 22px;
    max-width: 380px;
    margin: 0 auto;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  }
  .phone-time{
    text-align:center;
    font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
    letter-spacing:.2em; text-transform:uppercase;
    margin-bottom: 16px;
  }
  .notif{
    background: #e9eff8;
    border:1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
  }
  .notif-head{
    display:flex; align-items:center; gap:10px;
    margin-bottom:8px;
  }
  .notif-ic{
    width:26px; height:26px; border-radius:6px;
    background: var(--grad-gold-flat);
    display:flex; align-items:center; justify-content:center;
    color:#221a04; font-family:var(--font-display); font-size:14px;
  }
  .notif-app{ font-size:12px; font-weight:600; color:var(--text); }
  .notif-t{
    font-size:11px; color:var(--text-dim); margin-left:auto;
    font-family:var(--font-mono); letter-spacing:.08em;
  }
  .notif p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--text); }
  .notif p b{ color: var(--gold); font-weight:600; }

  /* Athlete card mock */
  .athlete-card{
    background: linear-gradient(180deg,#ffffff 0%,#eef3fa 100%);
    border:1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    max-width: 420px; margin: 0 auto;
    position:relative;
    overflow:hidden;
    box-shadow: 0 30px 60px -24px rgba(17,26,44,.2);
  }
  .athlete-card::before{
    content:""; position:absolute; inset: -30% -30% auto auto;
    width: 260px; height:260px; border-radius:50%;
    background: radial-gradient(circle, rgba(214,48,63,.18), transparent 60%);
  }
  .ac-head{ display:flex; justify-content:space-between; margin-bottom:20px; position:relative; }
  .ac-name{ font-family:var(--font-display); text-transform:uppercase; font-size:22px; color:var(--cream); }
  .ac-team{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); letter-spacing:.16em; text-transform:uppercase; margin-top:2px; }
  .ac-num{
    font-family:var(--font-display); font-size:44px;
    color:transparent; -webkit-text-stroke:1.4px var(--gold);
    line-height:1;
  }
  .ac-stats{
    display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-bottom:20px; position:relative;
  }
  .ac-stat{
    background: #e9eff8; border:1px solid var(--line); border-radius:10px;
    padding:10px;
  }
  .ac-stat .l{ font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
  .ac-stat .v{ font-family:var(--font-mono); font-size:16px; color:var(--gold); font-weight:600; margin-top:2px; }
  .ac-next{
    background: rgba(214,48,63,.06); border:1px solid rgba(214,48,63,.28);
    border-radius:12px; padding:14px; position:relative;
  }
  .ac-next .l{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--red-hi); margin-bottom:4px; }
  .ac-next .e{ font-family:var(--font-display); text-transform:uppercase; font-size:20px; color:var(--cream); }
  .ac-next .m{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); letter-spacing:.1em; margin-top:2px; }

  /* Coach roster mock */
  .roster{
    background: linear-gradient(180deg,#ffffff,#eef3fa);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 30px 60px -24px rgba(17,26,44,.2);
  }
  .roster-head{
    display:grid; grid-template-columns: 30px 1fr 80px 80px;
    padding: 8px 12px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--text-dim);
    border-bottom:1px solid var(--line);
  }
  .r-row{
    display:grid; grid-template-columns: 30px 1fr 80px 80px;
    align-items:center;
    padding: 12px;
    border-bottom:1px dashed var(--line);
    font-size:14px;
  }
  .r-row:last-child{ border-bottom:0; }
  .r-row .lane{
    height:auto; background:none; opacity:1;
    font-family:var(--font-mono); font-size:12px; color:var(--gold);
  }
  .r-row .ev{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.06em;
  }
  .r-row .st{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  }
  .r-row .st.in{ color: var(--gold); }
  .r-row .st.out{ color: var(--red-hi); }
  .r-row .st.pending{ color: var(--text-mut); }

  /* ---------- Marquee statement ---------- */
  .statement{
    position:relative;
    padding: clamp(80px, 12vw, 160px) 0;
    text-align:center;
    background-image:
      radial-gradient(60% 80% at 50% 50%, rgba(156,111,19,.05), transparent 60%),
      linear-gradient(180deg, rgba(247,249,252,.93), rgba(247,249,252,.93)),
      url('/static/img/footer-lanes.jpg');
    background-size: auto, cover, cover;
    background-position: center, center, center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .statement .h2{
    margin: 0 auto 16px;
    max-width: 16ch;
  }
  .statement .h2 span{ display:block; }
  .statement .h2 .a{ color:var(--cream); }
  .statement .h2 .b{ color: var(--red); -webkit-text-stroke: 1px #ffd76a; }
  .statement p{
    color:var(--text-mut); max-width: 48ch; margin: 0 auto;
  }

  /* ---------- Pricing ---------- */
  .price-grid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch;
  }
  @media (max-width: 900px){ .price-grid{ grid-template-columns:1fr; } }
  .price{
    background: var(--card);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 28px 26px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .price.featured{
    border-color: transparent;
    background:
      linear-gradient(var(--card),var(--card)) padding-box,
      var(--grad-gold) border-box;
    border:1px solid transparent;
    transform: translateY(-6px);
  }
  @media (max-width: 900px){ .price.featured{ transform: none; } }
  .price .ribbon{
    position:absolute; top:-14px; right:22px;
    background: var(--grad-red);
    color:#fff;
    font-family:var(--font-mono);
    font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 20px -8px rgba(230,57,70,.6);
  }
  .price h3{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:28px; color:var(--cream);
    margin-bottom:6px; letter-spacing:.02em;
  }
  .price .desc{ font-size:13.5px; color:var(--text-mut); min-height:44px; margin-bottom:20px; }
  .price .amt{
    display:flex; align-items:baseline; gap:6px; margin-bottom: 4px;
  }
  .price .amt .n{
    font-family:var(--font-display); font-size:60px; color:var(--cream);
    line-height:1;
  }
  .price .amt .cur{
    font-family:var(--font-display); font-size:24px; color:var(--gold);
    line-height:1;
  }
  .price .per{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.16em; text-transform:uppercase;
    margin-bottom: 20px;
  }
  .price ul{ list-style:none; padding:0; margin: 0 0 24px; }
  .price li{
    display:flex; gap:10px; align-items:flex-start;
    font-size:14px; color:var(--text);
    padding: 8px 0;
    border-top:1px dashed var(--line);
  }
  .price li:first-child{ border-top:0; }
  .price li::before{
    content:"→"; color: var(--gold); flex-shrink:0; font-family:var(--font-mono); margin-top:1px;
  }
  .price .btn{ margin-top:auto; width:100%; }

  /* ---------- TOE Pricing/Billing Update: 4-card grid, toggle, Family
     Calculator, comparison table. Reuses existing tokens/.price/.btn/.faq
     patterns above — no new colors, fonts, or spacing scale introduced. */
  .price-grid{ grid-template-columns: repeat(4,1fr); }
  @media (max-width: 1100px){ .price-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 640px){ .price-grid{ grid-template-columns: 1fr; } }

  .price-toggle{
    display:flex; justify-content:center; gap:4px;
    max-width:340px; margin: 0 auto 32px;
    background: var(--bg-2); border:1px solid var(--line); border-radius: 999px;
    padding: 4px;
  }
  .price-toggle-opt{
    flex:1; border:0; background:transparent; cursor:pointer;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-mut); padding: 10px 14px; border-radius: 999px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: background .15s ease, color .15s ease;
  }
  .price-toggle-opt.is-active{
    background: var(--card); color:var(--text); box-shadow: 0 2px 8px -2px rgba(0,0,0,.15);
  }
  .price-toggle-badge{
    background: var(--grad-red); color:#fff; font-size:9.5px; letter-spacing:.14em;
    padding: 3px 7px; border-radius: 5px;
  }

  .price-founding-note{
    text-align:center; max-width:64ch; margin: -10px auto 32px;
    font-size:13.5px; color:var(--text-mut); font-style:italic;
  }

  .family-calc{
    margin: 56px 0 0;
    background: var(--card); border:1px solid var(--line); border-radius: 18px;
    padding: 28px 26px;
  }
  .family-calc-head h3{
    font-family:var(--font-display); text-transform:uppercase; font-size:22px;
    color:var(--cream); margin: 0 0 6px; letter-spacing:.02em;
  }
  .family-calc-head p{ font-size:13.5px; color:var(--text-mut); margin:0 0 20px; max-width:60ch; }
  .family-calc-body{
    display:grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items:center;
  }
  @media (max-width: 720px){ .family-calc-body{ grid-template-columns: 1fr; } }
  .family-calc-control label{
    display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--text-mut); margin-bottom:8px;
  }
  .family-calc-control select{
    width:100%; padding: 10px 12px; border-radius: 10px; border:1px solid var(--line-2);
    background: var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px;
  }
  .family-calc-help{ font-size:12px; color:var(--text-mut); margin: 8px 0 0; }
  .family-calc-total{
    font-family:var(--font-display); font-size:44px; color:var(--gold); line-height:1;
  }
  .family-calc-total .per{
    font-family:var(--font-mono); font-size:14px; color:var(--text-mut); margin-left:6px;
  }
  .family-calc-breakdown{
    font-size:13px; color:var(--text-mut); margin-top:10px; line-height:1.7;
  }
  .family-calc-breakdown .row{ display:flex; justify-content:space-between; gap:12px; max-width:340px; }

  .price-compare-wrap{ margin: 56px 0 0; }
  .price-compare-title{
    font-family:var(--font-display); text-transform:uppercase; font-size:22px;
    color:var(--cream); margin: 0 0 16px; letter-spacing:.02em; text-align:center;
  }
  .price-compare-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius: 14px; }
  table.price-compare{
    width:100%; border-collapse:collapse; min-width: 720px; font-size:13.5px;
  }
  table.price-compare th, table.price-compare td{
    padding: 12px 16px; text-align:left; border-bottom:1px solid var(--line);
    color:var(--text);
  }
  table.price-compare thead th{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-mut); background: var(--bg-2);
  }
  table.price-compare tbody th{
    font-weight:600; white-space:nowrap; background: var(--bg-2);
  }
  table.price-compare tbody tr:last-child th, table.price-compare tbody tr:last-child td{ border-bottom:0; }

  /* ---------- About section background (hurdles race photo) ---------- */
  #about{
    position:relative;
    background-image:
      linear-gradient(180deg, rgba(247,249,252,.95) 0%, rgba(247,249,252,.9) 35%, rgba(247,249,252,.97) 100%),
      url('/static/img/about-hurdles.jpg');
    background-size: cover;
    background-position: center 40%;
  }

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 56px);
    align-items:flex-start;
  }
  @media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }
  .about-copy p{ color:var(--text); font-size:16px; line-height:1.65; }
  .about-copy p + p{ margin-top: 14px; }
  .stats{
    display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
  }
  .stat{
    background: var(--bg-2); border:1px solid var(--line);
    border-radius:14px; padding:20px;
  }
  .stat .v{
    font-family:var(--font-display); font-size:44px; color:var(--gold);
    line-height:1;
  }
  .stat .l{
    font-family:var(--font-mono); font-size:11px; color:var(--text-mut);
    letter-spacing:.18em; text-transform:uppercase; margin-top:8px;
  }

  /* ---------- FAQ ---------- */
  .faq{ max-width: 820px; margin: 0 auto; }
  .qa{
    border-top:1px solid var(--line);
    padding: 4px 0;
  }
  .qa:last-child{ border-bottom:1px solid var(--line); }
  .qa summary{
    list-style:none;
    display:flex; justify-content:space-between; align-items:center;
    padding: 20px 8px;
    cursor:pointer;
    font-weight:600; font-size:17px;
    color:var(--text);
  }
  .qa summary::-webkit-details-marker{ display:none; }
  .qa summary::after{
    content:"+";
    font-family:var(--font-mono); color: var(--gold);
    font-size: 22px; font-weight: 300;
    transition: transform .2s ease;
  }
  .qa[open] summary::after{ content:"−"; }
  .qa .a{
    padding: 0 8px 20px;
    color: var(--text-mut); font-size:15px; line-height:1.6;
    max-width: 70ch;
  }

  /* ---------- Contact / Signup ---------- */
  .form-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px);
  }
  @media (max-width: 900px){ .form-grid{ grid-template-columns:1fr; } }
  .form{
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
  }
  .fld{ margin-bottom:16px; }
  .fld label{
    display:block; font-family:var(--font-mono);
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--gold); margin-bottom:8px;
  }
  .fld input, .fld select, .fld textarea{
    width:100%; padding: 14px 14px;
    background: #ffffff;
    border:1px solid var(--line-2);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    outline:none;
    min-height: 48px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .fld input:focus, .fld select:focus, .fld textarea:focus{
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,193,90,.15);
  }
  .fld textarea{ min-height: 120px; resize:vertical; }
  .fld-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
  @media (max-width:520px){ .fld-row{ grid-template-columns:1fr; } }
  .fld-hint{ font-size:.85rem; color: var(--text-mut); margin: 4px 0 0; line-height:1.4; }
  .contact-side .row{
    display:flex; gap:14px; align-items:flex-start;
    padding: 18px 0; border-top:1px dashed var(--line);
  }
  .contact-side .row:first-child{ border-top:0; }
  .contact-side .row .lbl{
    font-family:var(--font-mono); font-size:10px; color:var(--text-mut);
    letter-spacing:.2em; text-transform:uppercase;
    width: 96px; flex-shrink:0; margin-top:4px;
  }
  /* min-width:0 + overflow-wrap fixes a classic flexbox bug: a long
     unbreakable string (e.g. an email address) in a flex item otherwise
     forces the item — and the whole page — wider than the viewport,
     causing horizontal scroll on narrow screens (Section 2 requirement:
     no horizontal scrolling at any breakpoint). */
  .contact-side .row .val{ font-size:16px; color:var(--text); min-width:0; flex:1 1 auto; overflow-wrap:anywhere; word-break:break-word; }
  .contact-side .row .val a{ color: var(--gold); }
  .contact-side .row .val a:hover{ text-decoration: underline; }

  /* ---------- Final CTA ---------- */
  .final-cta{
    position:relative;
    text-align:center;
    padding: clamp(72px, 10vw, 128px) 0;
    background-image:
      radial-gradient(60% 70% at 50% 0%, rgba(214,48,63,.1), transparent 70%),
      radial-gradient(60% 70% at 50% 100%, rgba(156,111,19,.07), transparent 60%),
      linear-gradient(180deg, rgba(247,249,252,.92), rgba(247,249,252,.96)),
      url('/static/img/cta-track.jpg');
    background-size: auto, auto, cover, cover;
    background-position: center, center, center, center 20%;
  }
  .final-cta .kicker{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.24em;
    color: var(--gold); text-transform:uppercase; margin-bottom:14px;
  }
  .final-cta .h2{ margin: 0 auto 20px; max-width: 18ch; }
  .final-cta .lede{ margin: 0 auto 32px; text-align:center; }
  .final-cta .actions{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  }

  /* ---------- Footer ---------- */
  .footer{
    background: var(--bg-3);
    border-top:1px solid var(--line);
    padding: 48px 0 24px;
    font-size:14px;
  }
  .footer-top{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 32px;
    border-bottom:1px solid var(--line);
    margin-bottom: 20px;
  }
  @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
  .footer-brand p{ color:var(--text-mut); margin-top:14px; max-width: 30ch; }
  .fcol h5{
    font-family:var(--font-mono);
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--gold); margin: 0 0 14px;
  }
  .fcol a{
    display:block; padding: 6px 0; color:var(--text-mut);
  }
  .fcol a:hover{ color: var(--gold); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    flex-wrap:wrap;
    color: var(--text-dim); font-size:12px;
    font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  }

  /* ---------- Utility ---------- */
  .hide-mobile{ }
  @media (max-width: 720px){ .hide-mobile{ display:none; } }

  /* ---------- Mobile bottom tab bar (UX Upgrade Phase 2, 2026-08-21) ----------
     App-like fixed bottom nav shown only under the same 720px breakpoint
     where .hide-mobile kicks in. Fixed 5 items every role sees in the same
     order — Home, Team, Calendar, Messages, Profile — per the "consistent
     navigation" mandate; role-specific admin tools live inside the
     dashboard itself or behind the hamburger drawer (still available at
     this breakpoint), never in this bar. Desktop never renders this;
     see the max-width:720px query that turns it on below. */
  .bottom-nav{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:85;
    background: rgba(247,249,252,.96);
    border-top:1px solid var(--line);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    justify-content: space-around;
    align-items: stretch;
  }
  .bn-item{
    flex: 1 1 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:6px 4px;
    min-height:44px; min-width:44px; /* touch-target floor, UX Upgrade Phase 2 */
    background:transparent; border:0;
    color: var(--text-mut);
    font-family: var(--font-body);
    font-size:10.5px; font-weight:600; letter-spacing:.02em;
    cursor:pointer;
    text-decoration:none;
  }
  .bn-item svg{ width:22px; height:22px; }
  .bn-item:hover, .bn-item:active{ color: var(--gold); }
  .bn-item.active{ color: var(--gold); }
  @media (max-width: 720px){
    .bottom-nav{ display:flex; }
    /* Reserve room so page content and the footer never sit underneath the
       fixed bar; also nudges Coach Ace's launcher up so the two floating
       elements never overlap (see .ace-launcher's own mobile rule). */
    body{ padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .hc-title .live::before{ animation:none; }
  }

/* ---------- Status labels (feature/vendor status) ---------- */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--text-dim);
  color:var(--text-mut); white-space:nowrap;
}
.status-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex:none; }
.status-available{ border-color:#2f9c4c; color:#1f7a3d; }
.status-available::before{ background:#2f9c4c; }
.status-development{ border-color:var(--gold-lo); color:var(--gold); }
.status-development::before{ background:var(--gold); }
.status-planned{ border-color:var(--text-dim); color:var(--text-mut); }
.status-planned::before{ background:var(--text-dim); }
.status-vendor{ border-color:var(--red-lo); color:var(--red-hi); }
.status-vendor::before{ background:var(--red); }

/* ---------- Legal / simple content pages ---------- */
.legal-page{ padding:120px 0 100px; }
.legal-page .wrap{ max-width:760px; }
.legal-page h1{ margin-bottom:8px; }
.legal-page .updated{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:40px;
}
.legal-page h2{ font-size:20px; margin:36px 0 12px; color:var(--gold); }
.legal-page p, .legal-page li{ color:var(--text-mut); line-height:1.7; margin-bottom:14px; }
.legal-page ul{ padding-left:20px; }
/* Underlined (not just color) so links are distinguishable from surrounding
   prose without relying on color alone -- axe-core "link-in-text-block",
   flagged in the Phase 10 (P10-03) accessibility audit. */
.legal-page a{ color:var(--gold); text-decoration:underline; }
.legal-page a:hover{ color:var(--gold-lo); }
.legal-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:32px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mut);
}
.legal-back:hover{ color:var(--gold); }

/* ---------- Meet Coach Ace flyer page ---------- */
.ace-flyer{ padding:100px 0 100px; }
.ace-flyer .wrap{ max-width:1080px; }
.ace-flyer-hero{
  display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px,4vw,56px);
  align-items:center; margin-bottom:56px;
}
@media (max-width:760px){ .ace-flyer-hero{ grid-template-columns:1fr; } }
.ace-flyer-hero-art{
  position:relative; display:flex; justify-content:center;
}
.ace-flyer-hero-art img{
  width:100%; max-width:280px; border-radius:20px;
  background: linear-gradient(180deg, #1c1712, #0f0c09);
  box-shadow: 0 30px 60px -30px rgba(17,26,44,.4);
}
.ace-flyer-title{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin: 6px 0 18px;
}
.ace-flyer-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }

.ace-flyer-section{ padding: 48px 0; border-top:1px solid var(--line); }
.ace-flyer-grid{ margin-top:32px; }

.ace-flyer-scope-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px);
}
@media (max-width:760px){ .ace-flyer-scope-grid{ grid-template-columns:1fr; } }
.ace-flyer-scope-col{
  border-radius:16px; padding: 28px 26px; border:1px solid var(--line);
  background: var(--card);
}
.ace-flyer-scope-col img{
  width:64px; height:64px; border-radius:12px; object-fit:cover; margin-bottom:16px;
  background: linear-gradient(180deg, #1c1712, #0f0c09);
}
.ace-flyer-scope-col h3{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:20px; color:var(--cream); margin-bottom:14px;
}
.ace-flyer-scope-col ul{ list-style:none; padding:0; margin:0; }
.ace-flyer-scope-col li{
  font-size:14.5px; color:var(--text-mut); line-height:1.55;
  padding: 10px 0; border-top:1px dashed var(--line);
}
.ace-flyer-scope-col li:first-child{ border-top:0; }
.ace-flyer-scope-can{ border-color: rgba(47,156,76,.28); }
.ace-flyer-scope-can h3{ color:#1f7a3d; }
.ace-flyer-scope-cant{ border-color: rgba(214,48,63,.22); }
.ace-flyer-scope-cant h3{ color:var(--red-hi); }

.ace-flyer-final{
  text-align:center; padding-top:56px;
}
.ace-flyer-final img{
  width:110px; height:110px; border-radius:50%; object-fit:cover; margin: 0 auto 20px;
  background: linear-gradient(180deg, #1c1712, #0f0c09);
}
.ace-flyer-final .lede{ margin: 10px auto 26px; }

/* ---------- Contact form: consent + confirmation ---------- */
.consent-row{
  display:flex; align-items:flex-start; gap:10px; margin: 18px 0;
  font-size:13px; color:var(--text-mut); line-height:1.5;
}
.consent-row input[type="checkbox"]{
  margin-top:3px; width:16px; height:16px; accent-color:var(--gold); flex:none;
}
.consent-row a{ color:var(--gold); text-decoration:underline; }

.form-error{
  display:none; margin-bottom:16px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--red-lo); background:rgba(214,48,63,.06); color:var(--red-hi);
  font-size:13px; line-height:1.5;
}
.form-error.show{ display:block; }

.form-success{
  display:none; margin-bottom:16px; padding:12px 14px; border-radius:8px;
  border:1px solid var(--gold-lo); background:rgba(156,111,19,.08); color:var(--gold);
  font-size:13px; line-height:1.5;
}
.form-success.show{ display:block; }

.confirm-panel{
  display:none; text-align:center; padding:56px 24px;
  border:1px solid var(--gold-lo); border-radius:16px; background:var(--bg-2);
}
.confirm-panel.show{ display:block; }
.confirm-panel .ic{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800;
}
.confirm-panel h3{ margin-bottom:10px; }
.confirm-panel p{ color:var(--text-mut); max-width:44ch; margin:0 auto; }

/* honeypot field - hidden from real users, visible to bots that fill every field */
.hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden; }

/* ---------- Auth pages (register / login / verify / forgot / reset) ---------- */
.auth-page .wrap{ max-width:480px; }
.auth-page .auth-head{ text-align:center; margin-bottom:32px; }
.auth-page .auth-head .lede{ margin:14px auto 0; text-align:center; }

/* Public-launch hardening (Section 3): the register page gets a wider,
   responsive two-column desktop layout (form + step-indicator/context
   panel) instead of the narrow 480px single column shared by the other
   4 auth pages. Scoped to #register-page only via the extra .wrap
   max-width override below, so login/verify/forgot/reset are untouched. */
#register-page .wrap{ max-width:1000px; }
#register-page .auth-head{ text-align:left; max-width:640px; margin-bottom:28px; }
#register-page .auth-head .lede{ margin:14px 0 0; text-align:left; }
.auth-grid{
  display:grid; grid-template-columns: 1.35fr .65fr; gap: clamp(24px, 4vw, 48px);
  align-items:start;
}
@media (max-width: 900px){ .auth-grid{ grid-template-columns: 1fr; } }
.auth-main{ min-width:0; }
.auth-side{
  min-width:0;
  border:1px solid var(--line); border-radius:16px; background:var(--bg-2);
  padding:24px; position:sticky; top:96px;
}
@media (max-width: 900px){ .auth-side{ position:static; order:-1; } }
.reg-steps{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed var(--line); }
.reg-step{ display:flex; align-items:flex-start; gap:12px; opacity:.5; transition:opacity .15s ease; }
.reg-step.is-active{ opacity:1; }
.reg-step.is-done{ opacity:.85; }
.reg-step-n{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  background:var(--line-2); color:var(--text-mut);
}
.reg-step.is-active .reg-step-n{ background:var(--gold); color:#1c1712; }
.reg-step.is-done .reg-step-n{ background:var(--gold-lo); color:#1c1712; }
.reg-step-t{ font-size:14px; font-weight:600; color:var(--text); line-height:1.4; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.reg-step-t small{ font-weight:400; color:var(--text-mut); font-size:12px; }
.reg-side-notes{ display:flex; flex-direction:column; gap:16px; }
.reg-side-note strong{ display:block; font-size:13px; color:var(--text); margin-bottom:4px; }
.reg-side-note p{ font-size:13px; color:var(--text-mut); line-height:1.5; margin:0; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.account-signed-in-as{
  margin:14px auto 0; font-size:13px; color:var(--text-mut); font-family:var(--font-mono);
}
.account-signed-in-as strong{ color:var(--text); font-family:var(--font-body); font-weight:700; }
.auth-page .form{ margin-bottom:0; }
.auth-page .mfa-row{ display:none; margin-top:16px; }
.auth-page .mfa-row.show{ display:block; }
.auth-page .auth-foot{
  text-align:center; margin-top:24px; font-size:13px; color:var(--text-mut);
}
.auth-page .auth-foot a{ color:var(--gold); text-decoration:underline; }
.auth-page .auth-foot a:hover{ color:var(--gold-lo); }
.auth-page .auth-foot p{ margin:6px 0; }
.auth-page .confirm-panel{ margin-top:0; }
.auth-page .confirm-panel .ic.pending{
  background: linear-gradient(180deg, var(--text-mut), var(--text-dim));
  font-size:22px;
}

/* ---------- Account security / MFA settings page ---------- */
.account-page .mfa-panel{
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  padding:28px; margin-bottom:20px;
}
.mfa-state-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.mfa-state-row p{ color:var(--text-mut); line-height:1.6; margin:0; }
.mfa-state-row strong{ color:var(--text); }
.mfa-email{ font-family:var(--font-mono); font-size:13px; color:var(--gold-lo); }
.mfa-state-badge{
  flex:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; font-weight:600;
}
.mfa-state-badge.off{ background:rgba(74,91,115,.1); color:var(--text-mut); border:1px solid var(--line-2); }
.mfa-state-badge.on{ background:rgba(156,111,19,.12); color:var(--gold-lo); border:1px solid var(--gold-hi); }
.mfa-secret-box{
  font-family:var(--font-mono); font-size:15px; letter-spacing:.06em; word-break:break-all;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; padding:14px 16px;
  margin:12px 0; color:var(--gold-lo); text-align:center;
}
.mfa-reverify-note{
  margin-top:14px; font-size:13px; color:var(--text-mut); line-height:1.6;
}

/* ---------- Phase 3: Organizations / roles admin pages ---------- */
.admin-page .wrap{ max-width:760px; }
.admin-head{ text-align:center; margin-bottom:32px; }
.admin-head .lede{ margin:14px auto 0; text-align:center; }
.admin-head .eyebrow a{ color:var(--gold); }
.admin-panel{
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  padding:28px; margin-bottom:24px;
}
.admin-panel-title{ font-size:18px; margin-bottom:6px; }
.admin-panel-sub{ color:var(--text-mut); font-size:13px; line-height:1.6; margin-bottom:18px; }
.admin-panel-subtitle{ font-size:15px; margin:0 0 6px; }
.admin-divider{ border:none; border-top:1px solid var(--line); margin:22px 0; }
/* Self-Serve Club/League Creation: simple two-tab switcher between the
   "Create a Club" and "Create a League" forms sharing one panel. */
.self-serve-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.self-serve-tab{ opacity:.6; }
.self-serve-tab.active{ opacity:1; border-color:var(--gold-hi); color:var(--gold-lo); }
.self-serve-duplicate-list{ margin:10px 0 0; padding-left:18px; font-size:13px; }
.self-serve-duplicate-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.admin-empty{ color:var(--text-mut); font-size:14px; }

/* ChatGPT external retest, usability finding #7: the Meet Director
   dashboard used to render an almost-entirely-blank page (no wrap/shell,
   no message) while its initial /api/auth/me + /api/me/role-assignments
   gate calls were in flight. .md-dash-loading-state gives that wait a
   visible, honest "Loading…" state with a spinner instead of a blank
   page; shown by default (in the page's HTML) and hidden by
   meetDirectorDashboard's init() once the real no-access/content state is
   determined \u2014 same three-way admin-empty/no-access/content pattern used
   by every other role-gated dashboard on the site, just with an explicit
   initial "loading" member added instead of an implicit blank gap. */
.md-dash-loading-state{ text-align:center; padding:40px 0; }
.md-dash-spinner{
  width:28px; height:28px; margin:0 auto 12px; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--gold);
  animation:md-dash-spin 0.8s linear infinite;
}
@keyframes md-dash-spin{ to{ transform:rotate(360deg); } }

/* Section 6 (Genspark Correction Handoff — TOE Live Retest Findings,
   2026-08-23): the Meet Director Command Center's inner loading/empty/error
   states (#md-cc-loading/#md-cc-no-meets/#md-cc-error), distinct from the
   outer .md-dash-loading-state page gate above. Reuses the same spinner
   visual and the site's existing .form-error tone for the error state so no
   new visual language is introduced. */
.md-cc-loading-state{ text-align:center; padding:40px 0; }
.md-cc-empty-state{ text-align:center; padding:32px 20px; }
.md-cc-empty-state p{ margin:0 0 10px; }
.md-cc-empty-state p:last-child{ margin-bottom:0; }
.md-cc-error-state{ text-align:center; }
.md-cc-error-state p{ margin:0 0 10px; }
#md-cc-retry-btn{ margin:0 auto; }

.admin-role-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.admin-role-chip{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--bg-2);
  color:var(--text);
}
.admin-role-chip .org{ color:var(--gold-lo); font-weight:600; }
.admin-role-chip.pending{ border-color:var(--line-2); opacity:.7; }
.admin-role-chip .tag{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:2px 7px; border-radius:999px;
  background:rgba(74,91,115,.12); color:var(--text-mut);
}
.admin-role-chip .tag.active{ background:rgba(156,111,19,.14); color:var(--gold-lo); }

/* My Profile hub page (Section: self-serve club/league/parent/athlete
   creation entry points) — a simple responsive card grid, one card per
   creation option. */
.my-profile-create-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.my-profile-create-card{
  border:1px solid var(--line-2); border-radius:14px; padding:18px; background:var(--bg-2);
  display:flex; flex-direction:column; gap:10px;
}
.my-profile-create-card h3{ margin:0; font-size:16px; }
.my-profile-create-card p{ margin:0; color:var(--text-mut); font-size:13px; line-height:1.55; flex:1; }
.my-profile-create-card .form{ margin-top:4px; }
.my-profile-card-title-row{ display:flex; align-items:center; gap:10px; }

/* TOE Live Retest Findings, Section 5 (2026-08-23): pagination controls
   for the Platform Admin Users directory and Audit log panels — both
   previously returned a single flat, silently-truncated list with no way
   to reach rows past the cutoff. */
.admin-pagination{
  display:flex; align-items:center; justify-content:center; gap:16px; padding-top:14px; margin-top:6px;
  border-top:1px solid var(--line);
}
.admin-pagination span{ font-family:var(--font-mono); font-size:12px; color:var(--text-mut); }
.admin-pagination button:disabled{ opacity:.4; cursor:not-allowed; }

.admin-org-list, .admin-role-list{ display:flex; flex-direction:column; gap:0; }
.admin-org-row, .admin-role-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.admin-org-row:last-child, .admin-role-row:last-child{ border-bottom:none; }
/* TOE Live Retest Findings, Section 10 (2026-08-24): on narrow viewports
   this row's fixed-width info/status/action-button children (Users, Orgs,
   and every other admin-role-row consumer across the site) push wider
   than the viewport, causing page-level horizontal scroll — confirmed via
   a real 390px-viewport Playwright measurement on the Platform Admin
   dashboard's Users panel (scrollWidth 878 vs clientWidth 390). Letting
   the row wrap onto a second line, rather than forcing everything onto
   one row, fixes the overflow without touching desktop layout (the
   min-width:0 lets the info column's long name/email text actually
   shrink+wrap instead of forcing the row wider). */
@media (max-width:520px){
  .admin-org-row, .admin-role-row{ flex-wrap:wrap; }
  .admin-role-row-info{ min-width:0; flex:1 1 100%; }
  .admin-role-row-actions{ flex-wrap:wrap; flex:1 1 100%; }
  /* The status-pill/action-buttons wrapper is an unnamed inline-styled
     flex div (rendered client-side in app.js) sitting between
     .admin-role-row-info and the row's border — also needs to wrap and
     be allowed to shrink below its content's natural width, or its own
     flex children (the pill + .admin-role-row-actions) stay pinned to
     one non-wrapping line and keep forcing the row wider than the
     viewport. */
  .admin-role-row > div{ min-width:0; flex-wrap:wrap; flex:1 1 100%; }
}
.admin-org-row a{ color:var(--text); font-weight:600; }
.admin-org-row a:hover{ color:var(--gold); }
.admin-org-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; }
.admin-status-pill{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 10px; border-radius:999px; flex:none; border:1px solid var(--line-2); color:var(--text-mut);
}
.admin-status-pill.approved{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.draft, .admin-status-pill.pending_review{ background:rgba(74,91,115,.08); }
.admin-status-pill.suspended, .admin-status-pill.archived{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
.admin-status-pill.active{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.pending{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.revoked{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
/* Correction 6 (TOE Final Pilot, 2026-08-31) — Checked-In visual defect
   fix: Household (Parent/Athlete) check-in panel — same green/red
   check-in vs DNS scheme as Clerk/Coach/MD, so this last remaining role
   view is visually consistent with the other five. */
.admin-status-pill.checked_in{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); border-color:var(--clerk-green, #1f7a3d); }
.admin-status-pill.dns{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); border-color:var(--red-lo); }
/* TOE Production QA Correction 1 (2026-08-28): Users directory shows this
   in place of Activate/Suspend/Archive buttons for a viewer who holds
   user.view but not user.manage (e.g. support_admin) — see statusActions()
   in app.js. Read-only, not interactive; deliberately understated so it
   reads as a capability note rather than a status pill. */
.admin-role-row-viewonly{ font-size:11px; color:var(--text-mut); font-style:italic; }
/* Self-Serve Club/League Creation: a league created via the self-serve flow
   sits in this status until Stripe's webhook confirms the $299 setup fee —
   distinct from plain "draft" so it's clear payment, not admin review, is
   what's outstanding. */
.admin-status-pill.payment_pending{ background:rgba(214,158,48,.12); color:#a5731a; border-color:rgba(214,158,48,.5); }
/* P2-09: org-invitation lifecycle pills — reuses the same color language. */
.admin-status-pill.pending_approval{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.accepted{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.cancelled, .admin-status-pill.expired{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
/* Stage 6: connection/payment/order status pills — reuse the same
   approved/pending/archived color language established above rather than
   inventing new colors, so "connected"/"paid"/"fulfilled" read as the same
   kind of positive state as "approved"/"active" elsewhere on the site. */
.admin-status-pill.not_connected{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.connected, .admin-status-pill.paid, .admin-status-pill.fulfilled{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.placed{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.canceled, .admin-status-pill.disabled{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
/* Stage 7: correction-request review status — reuses the same
   approved/pending/rejected color language as everything above. */
.admin-status-pill.rejected{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
.admin-status-pill-warn{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
/* CORRECTION 2 (2026-08-27): club_league relationship statuses that
   previously never reached a status-pill rendering path because the
   League Dashboard's Member Clubs panel only ever showed
   approved/probation/suspended rows. Reuses the same three-color
   language (amber=attention-needed, grey=neutral/in-progress,
   red=negative) established above rather than inventing a fourth. */
.admin-status-pill.requested, .admin-status-pill.pending_info{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.probation{ background:rgba(214,158,48,.12); color:#a5731a; border-color:rgba(214,158,48,.5); }
.admin-status-pill.withdrawn, .admin-status-pill.left_voluntarily{ background:rgba(74,91,115,.08); color:var(--text-mut); }

/* Stage 7 (P11-07): athlete PR/media card. Photo/boomerang preview is a
   fixed square so a mismatched aspect-ratio upload never distorts the
   layout; the boomerang <video> is muted/loop/playsinline (never
   autoplays with sound, and JS withholds the `autoplay` attribute entirely
   when prefers-reduced-motion is set — see loadAthleteMediaSlot). */
.athlete-record-card{ border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.athlete-record-media{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.athlete-record-media-slot{ width:96px; height:96px; border-radius:10px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line-2); flex:none; display:flex; align-items:center; justify-content:center; }
.athlete-record-media-slot img, .athlete-record-media-slot video{ width:100%; height:100%; object-fit:cover; display:block; }
.athlete-record-media-slot .admin-empty{ font-size:10px; text-align:center; padding:0 6px; }
.athlete-record-media-actions{ display:flex; flex-direction:column; gap:6px; justify-content:center; }
.athlete-record-media-actions input[type="file"]{ font-size:12px; max-width:220px; }
.athlete-pr-row{ border-top:1px solid var(--line-2); padding:10px 0; }
.athlete-pr-row:first-of-type{ border-top:none; }
.athlete-pr-history{ margin:8px 0 0 0; padding-left:18px; font-size:12px; color:var(--text-mut); }
.athlete-pr-history li{ margin-bottom:2px; }

.admin-role-row-info{ font-size:14px; word-break:break-word; }
.admin-role-row-info .email{ font-family:var(--font-mono); font-size:12px; color:var(--text-mut); }
.admin-role-row-actions{ display:flex; gap:8px; flex:none; }
.admin-role-row-actions button{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 12px; border-radius:8px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer;
}
.admin-role-row-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.admin-role-row-actions button.danger:hover{ border-color:var(--red); color:var(--red); }

/* CORRECTION 2 (2026-08-27, TOE CONTROLLED PILOT — VERIFIED CORRECTIONS
   ONLY): compact/expandable club rows + consolidated per-row "Actions"
   dropdown for the League Dashboard's Member Clubs panel. Previously
   every club row rendered a full horizontal strip of always-visible
   status-transition buttons (Probation/Suspend/Reinstate/Revoke/
   Visibility settings all at once) with no way to see request notes or
   proposed-admin details without leaving the page — unusable once a
   league has more than a handful of clubs (the disposable QA fixture
   league has 18). The row itself stays an .admin-role-row for spacing/
   border consistency with every other admin list on the site; only the
   inner layout is new. */
.league-club-row{ flex-wrap:wrap; align-items:center; }
.league-club-row-toggle{
  display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0;
  background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left;
  font:inherit; color:var(--text);
}
.league-club-row-toggle:hover .league-club-row-name{ color:var(--gold); }
.league-club-chevron{ flex:none; transition:transform .15s ease; color:var(--text-mut); }
.league-club-row-toggle.expanded .league-club-chevron{ transform:rotate(90deg); }
.league-club-row-name{ font-size:14px; font-weight:600; word-break:break-word; }
.league-club-row-right{ display:flex; align-items:center; gap:10px; flex:none; }

/* The Actions dropdown reuses the exact positioning recipe already
   established by .nav-account-menu/.nav-account-panel (style.css, Real-
   world-testing fix 2026-07-31) — a relatively-positioned trigger with an
   absolutely-positioned panel anchored under it — so the interaction
   pattern is familiar rather than inventing a new one. */
.league-club-actions-menu{ position:relative; }
.league-club-actions-btn{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 12px; border-radius:8px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer;
}
.league-club-actions-btn:hover, .league-club-actions-btn[aria-expanded="true"]{ border-color:var(--gold); color:var(--gold); }
.league-club-actions-panel{
  position:absolute; top:100%; right:0; margin-top:6px; min-width:190px;
  background:var(--card); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  z-index:40; overflow:hidden; display:flex; flex-direction:column;
}
.league-club-actions-panel button{
  display:block; width:100%; text-align:left; font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; padding:10px 14px; border:none; background:none;
  color:var(--text); cursor:pointer;
}
.league-club-actions-panel button:hover{ background:rgba(156,111,19,.08); color:var(--gold); }
.league-club-actions-panel button.danger:hover{ background:rgba(214,48,63,.08); color:var(--red); }
.league-club-no-actions{ display:block; padding:10px 14px; font-family:var(--font-mono); font-size:11px; color:var(--text-mut); }

.league-club-detail{
  flex:1 1 100%; margin-top:10px; padding:12px 14px; border-radius:10px;
  background:var(--bg-2); border:1px solid var(--line);
}
.league-club-detail p{ margin:0 0 6px; font-size:13px; color:var(--text-mut); line-height:1.5; }
.league-club-detail p:last-child{ margin-bottom:0; }
.league-club-detail-label{ font-weight:700; color:var(--text); }
.league-club-detail .club-visibility-form{ padding-top:10px; margin-top:10px; border-top:1px dashed var(--line-2); }
.league-club-detail .club-visibility-form:empty{ display:none; }

@media (max-width:520px){
  .league-club-row-right{ flex-wrap:wrap; }
}

.admin-panel .btn-ghost{ margin-top:12px; margin-left:10px; }

/* Phase 4: admin dashboard additions */
.admin-metrics-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; }
.admin-metric-card{
  border:1px solid var(--line-2); border-radius:12px; padding:16px; text-align:center;
}
.admin-metric-card .num{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--gold-lo); display:block; }
.admin-metric-card .label{ font-size:12px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; display:block; }
/* Correction 10 sub-req 4: metric cards are now <button> elements (clickable
   drill-down), not plain <div>s — reset default button chrome so they keep
   looking identical to the original static cards, plus a hover/focus cue
   so the new clickability is discoverable. */
.admin-metric-card-clickable{
  background:var(--surface-1, transparent); font-family:inherit; cursor:pointer; width:100%;
  transition:border-color .15s ease, background .15s ease;
}
.admin-metric-card-clickable:hover, .admin-metric-card-clickable:focus-visible{
  border-color:var(--gold-hi); background:rgba(156,111,19,.06);
}
.admin-status-pill.new{ background:rgba(74,91,115,.08); color:var(--text-mut); }
.admin-status-pill.contacted, .admin-status-pill.qualified{ background:rgba(156,111,19,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.admin-status-pill.closed{ background:rgba(74,91,115,.08); }
.admin-status-pill.spam{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
.admin-audit-row{ padding:12px 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.admin-audit-row:last-child{ border-bottom:none; }
.admin-audit-row .action{ font-family:var(--font-mono); font-weight:600; color:var(--gold-lo); word-break:break-word; }
.admin-audit-row .meta{ color:var(--text-mut); font-size:12px; margin-top:2px; }
.admin-audit-row .details{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; word-break:break-word; }

/* Phase 9 (P9-03): expandable meet schedule/results (shared across the
   Meet Director, Coach, Timing Partner, and Club dashboards). */
.toe-meet-detail{ padding-top:6px; border-top:1px solid var(--line-2); }
.toe-event-block{ padding:10px 0; border-bottom:1px solid var(--line-2); }
.toe-event-block:last-child{ border-bottom:none; }
.toe-heat-block{ margin:8px 0 0 14px; }
.toe-heat-results .admin-role-row{ padding:8px 0; }

/* ==========================================================================
   Coach Ace — AI assistant widget (site-wide launcher + chat panel)
   Lives in every page via the shared layout (src/lib/layout.ts).
   ========================================================================== */
.ace-launcher{
  position:fixed; right:20px; bottom:20px; z-index:9990;
  width:64px; height:64px; border-radius:50%;
  border:2px solid var(--red);
  background:#181410 center/cover no-repeat;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45), 0 0 0 4px rgba(214,48,63,.12);
  cursor:pointer; padding:0; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ace-launcher:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px -8px rgba(0,0,0,.5), 0 0 0 5px rgba(214,48,63,.16); }
.ace-launcher img{ width:100%; height:100%; object-fit:cover; display:block; }
.ace-launcher .ace-ping{
  position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%;
  background:var(--red); border:2px solid #fff; display:none;
}
.ace-launcher.has-badge .ace-ping{ display:block; }
.ace-launcher-label{
  position:fixed; right:92px; bottom:34px; z-index:9990;
  background:#181410; color:#fff; font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transform:translateX(6px);
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;
}
.ace-launcher-label.show{ opacity:1; transform:translateX(0); }
body.ace-open .ace-launcher, body.ace-open .ace-launcher-label{ display:none; }
/* Guided Tour (2026-08-24): hide the site-wide Coach Ace launcher while the
   tour is active — it is fixed bottom-right at z-index:9990 and can sit
   above the tour's own tooltip/controls (z-index 2000-2001), intercepting
   clicks meant for Next/Skip/Back. Same mechanism as body.ace-open above. */
body.clerk-tour-active .ace-launcher, body.clerk-tour-active .ace-launcher-label{ display:none; }
/* Stage 3: the mobile drawer/bottom-nav "More" panel is a full-height
   overlay too — hide the floating launcher while it's open so it can't sit
   on top of the drawer's Sign up button (same treatment as ace-open above). */
.drawer.open ~ .ace-launcher, .drawer.open ~ .ace-launcher-label{ display:none; }

.ace-panel{
  position:fixed; right:20px; bottom:20px; z-index:9995;
  width:min(400px, calc(100vw - 32px));
  height:min(620px, calc(100vh - 100px));
  background:#14110d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.6);
  display:none;
  flex-direction:column;
  overflow:hidden;
  font-family:var(--font-body);
}
body.ace-open .ace-panel{ display:flex; }

.ace-header{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, #1c1712 0%, #14110d 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex:none;
}
.ace-header img{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--red); flex:none; }
.ace-header-text{ flex:1; min-width:0; }
.ace-header-text .name{ color:#fff; font-weight:800; font-size:14px; letter-spacing:.01em; }
.ace-header-text .title{ color:#9c9488; font-size:11px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }
.ace-header-actions{ display:flex; gap:6px; flex:none; }
.ace-header-actions button{
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:transparent; color:#c9c2b4; display:flex; align-items:center; justify-content:center;
}
.ace-header-actions button:hover{ border-color:var(--red); color:#fff; }

.ace-body{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  background:#14110d;
}
.ace-msg{ display:flex; gap:10px; align-items:flex-start; max-width:100%; }
.ace-msg img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; margin-top:2px; }
.ace-msg-bubble{
  background:#221b13; color:#f2ede2; border-radius:12px; padding:10px 14px;
  font-size:14px; line-height:1.5; max-width:82%;
  border:1px solid rgba(255,255,255,.06);
}
.ace-msg.user{ flex-direction:row-reverse; }
.ace-msg.user .ace-msg-bubble{ background:var(--red); color:#fff; border-color:transparent; }
.ace-msg-bubble a{ color:var(--gold-hi); text-decoration:underline; }
.ace-msg-bubble .ace-nav-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  background:transparent; border:1px solid var(--gold-hi); color:var(--gold-hi);
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; text-decoration:none;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em;
}
.ace-msg-bubble .ace-nav-btn:hover{ background:var(--gold-hi); color:#181410; }
.ace-msg-bubble .ace-source{
  display:block; margin-top:6px; font-size:11px; color:#8a8276; font-family:var(--font-mono);
}

.ace-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; flex:none; }
.ace-quick button{
  background:#221b13; border:1px solid rgba(255,255,255,.1); color:#e8e2d4;
  font-size:12.5px; padding:8px 12px; border-radius:999px; white-space:nowrap;
}
.ace-quick button:hover{ border-color:var(--red); color:#fff; }

.ace-footer{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08); flex:none; background:#181410;
}
.ace-footer input{
  flex:1; background:#221b13; border:1px solid rgba(255,255,255,.1); color:#fff;
  border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit;
  min-width:0;
}
.ace-footer input:focus{ outline:none; border-color:var(--red); }
.ace-footer input::placeholder{ color:#7a7367; }
.ace-footer button{
  flex:none; width:40px; height:40px; border-radius:10px; border:0;
  background:var(--grad-red); color:#fff; display:flex; align-items:center; justify-content:center;
}
.ace-footer button:disabled{ opacity:.5; }
.ace-footer .ace-mic{ background:transparent; border:1px solid rgba(255,255,255,.1); color:#7a7367; }

.ace-disclaimer{
  /* Phase 10 (P10-03) accessibility audit: #6b655a on this panel's #14110d
     dark background only reached 3.26:1 (fails WCAG AA's 4.5:1) -- swapped
     for the same lighter grey already used elsewhere in this dark panel
     (.ace-header-text .title, 6.28:1 here). */
  padding:0 16px 10px; flex:none; font-size:10.5px; color:#9c9488; font-family:var(--font-mono);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
/* --gold-hi (not the darkened --gold) -- --gold only reaches 2.78:1 against
   this dark panel background; --gold-hi reaches 7.18:1. */
.ace-disclaimer a{ color:var(--gold-hi); white-space:nowrap; }
.ace-disclaimer a:hover{ text-decoration:underline; }

/* Below the 720px breakpoint the new fixed .bottom-nav (Stage 3) occupies
   the bottom of the viewport — lift the launcher above it so the two
   floating elements never overlap. The chat panel itself still goes full
   screen at <=480px (below), which already covers the bottom nav's z-index
   of 85 with its own z-index of 9995, so no change needed there. */
@media (max-width:720px){
  .ace-launcher{ bottom: calc(58px + 12px + env(safe-area-inset-bottom)); }
  .ace-launcher-label{ bottom: calc(58px + 26px + env(safe-area-inset-bottom)); }
  body.ace-open .bottom-nav{ display:none; }
}

/* Stage 5 visual QA finding: the rules above only keep .ace-launcher off
   the .bottom-nav bar itself — they don't stop it floating on top of
   ordinary page CONTENT that happens to render at that same fixed height
   (confirmed via a real, non-full-page viewport screenshot + a
   getBoundingClientRect() measurement showing a genuine ~31x55px overlap
   with the first card on the mobile /calendar page — not a full-page
   screenshot-stitching artifact like the similar-looking Stage 3 Part 1c
   finding). Reserve the same vertical space at the bottom of any
   scrollable content list so the last visible content never sits under
   the launcher's footprint. */
@media (max-width:720px){
  .calendar-event-list{
    padding-bottom: calc(64px + 12px + env(safe-area-inset-bottom));
  }
}

/* Stage 6 visual QA finding (same class of bug as the Stage 5 finding
   above, disambiguated with the identical method: window.scrollTo(0,0) +
   getBoundingClientRect() measurement on a real, non-full-page viewport
   screenshot at an 844px-tall mobile viewport — not a screenshot-stitching
   artifact; confirmed the overlap clears with as little as 50px of scroll,
   but is genuinely present at the initial scroll-position-0 paint, i.e.
   the very first thing a mobile visitor sees). Unlike the Stage 5 fix
   above (a scrollable list's LAST item colliding with the launcher's
   bottom-fixed footprint), this is a right-edge collision: the "Merchant
   connection" status text on /payments and /store is wide enough on a
   narrow viewport that it visually runs under .ace-launcher's fixed
   64px-wide circle in the bottom-right corner (confirmed ~31x27px overlap
   between .ace-launcher and #payments-connection-status /
   #store-connection-status at scroll 0). Reserve the launcher's column
   width as right padding on the status text itself so it always wraps
   before reaching that corner, regardless of scroll position. */
@media (max-width:720px){
  #payments-connection-status, #store-connection-status{
    padding-right: calc(64px + 12px);
  }
}

@media (max-width:480px){
  .ace-panel{ right:0; bottom:0; width:100vw; height:100vh; border-radius:0; }
  .ace-launcher{ right:16px; }
  .ace-launcher-label{ display:none; }
}

/* Reduced motion / accessibility */
@media (prefers-reduced-motion: reduce){
  .ace-launcher, .ace-launcher-label{ transition:none; }
}
body.ace-reduced-motion .ace-launcher{ transition:none; }
body.ace-reduced-motion .ace-launcher:hover{ transform:none; }

/* ---------- Stage 3: public league/club page (src/pages/publicOrg.ts) ---------- */
.public-org-page .wrap{ max-width:820px; }
.public-org-banner{
  position:relative; overflow:hidden;
  border-radius:16px; background:linear-gradient(135deg, var(--bg-2), var(--bg-3));
  background-size:cover; background-position:center;
  border:1px solid var(--line); padding:32px; margin-top:8px;
}
/* A photo banner_url (org.bio's photo, not this gradient) can land behind
   this same element at any brightness/contrast — a dark runner-track photo
   with dark-navy `--text` name/eyebrow text on top (as caught by visual QA)
   reads as near-illegible. This scrim + light-on-dark text treatment makes
   the overlaid name/eyebrow/status always readable regardless of what the
   org uploaded as their banner photo, the same "never depend on unknown
   background contrast" reasoning as the hero section's own ::before overlay
   above. Applies whenever a banner_url is set (data-has-banner, toggled by
   app.js) — with no banner photo, the plain gradient behind is already
   light, so the original dark text stays as-is for that case. */
.public-org-banner[data-has-banner="true"]::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,26,.35), rgba(10,14,26,.72));
}
.public-org-banner-inner{ position:relative; z-index:1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.public-org-logo{ height:64px; width:64px; border-radius:12px; object-fit:cover; border:1px solid var(--line-2); background:#fff; }
#public-org-name{ margin-top:6px; }
#public-org-status-pill{ margin-top:8px; }
.public-org-banner[data-has-banner="true"] #public-org-kind-label{ color:var(--gold-hi); }
.public-org-banner[data-has-banner="true"] #public-org-kind-label::before{ background:var(--gold-hi); }
.public-org-banner[data-has-banner="true"] #public-org-name{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.public-org-banner[data-has-banner="true"] #public-org-status-pill.approved{
  background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4);
}

/* ---------- Phase 11 Stage 4: Community (board/channels) & Messages (DM) ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.board-post{
  border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px; background:var(--bg-2);
}
.board-post.pinned{ border-color:var(--gold-hi); background:rgba(156,111,19,.05); }
.board-post-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.board-post-title{ font-size:16px; font-weight:700; margin:0; }
.board-post-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; }
.board-post-body{ font-size:14px; line-height:1.6; color:var(--text); margin-bottom:12px; white-space:pre-wrap; }
.board-post-actions{ display:flex; gap:8px; flex:none; }
.board-post-actions button{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 10px; border-radius:8px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer;
}
.board-post-actions button:hover{ border-color:var(--gold); color:var(--gold); }

.board-poll{
  border:1px solid var(--line-2); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:var(--card);
}
.board-poll-question{ font-weight:600; font-size:14px; margin-bottom:10px; }
.board-poll-option{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.board-poll-option .bar-track{ flex:1; height:8px; border-radius:999px; background:var(--bg-3); overflow:hidden; }
.board-poll-option .bar-fill{ height:100%; background:var(--gold); border-radius:999px; }
.board-poll-option .pct{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); width:40px; text-align:right; flex:none; }
.board-poll-option.voted{ font-weight:700; color:var(--gold-lo); }
.board-poll-vote-btn{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:6px; border:1px solid var(--line-2); background:transparent;
  color:var(--text-mut); cursor:pointer; flex:none;
}
.board-poll-vote-btn:hover{ border-color:var(--gold); color:var(--gold); }

.board-comments{ border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.board-comment{ font-size:13px; line-height:1.5; padding:8px 0; border-bottom:1px dashed var(--line); }
.board-comment:last-child{ border-bottom:none; }
.board-comment .author{ font-weight:600; color:var(--text); }
.board-comment .meta{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); margin-left:6px; }
.board-comment-form{ display:flex; gap:8px; margin-top:10px; }
.board-comment-form input{
  flex:1; padding:8px 12px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); font-size:13px;
}

.channel-list{ display:flex; flex-direction:column; gap:2px; }
.channel-list-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text-mut);
}
.channel-list-item:hover{ background:var(--bg-2); color:var(--text); }
.channel-list-item.active{ background:rgba(156,111,19,.1); color:var(--gold-lo); font-weight:600; }
.channel-list-item .archived-tag{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--text-mut); }

.chat-message-list{
  display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg-2); margin-bottom:0;
}
.chat-message{ font-size:13px; line-height:1.5; }
.chat-message.own .chat-message-bubble{ background:rgba(156,111,19,.12); border-color:var(--gold-hi); }
.chat-message-sender{ font-weight:600; color:var(--text); }
.chat-message-time{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); margin-left:6px; }
.chat-message-bubble{
  display:inline-block; margin-top:3px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--card); color:var(--text); max-width:100%; word-break:break-word;
}
.chat-message.pinned .chat-message-bubble{ border-color:var(--gold-hi); }
.chat-message-actions{ display:inline-flex; gap:6px; margin-left:8px; }
.chat-message-actions button{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 6px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.chat-message-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.chat-empty{ color:var(--text-mut); font-size:13px; text-align:center; padding:20px 0; }

.dm-thread-list{ display:flex; flex-direction:column; gap:2px; }
.dm-thread-item{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; cursor:pointer;
}
.dm-thread-item:hover{ background:var(--bg-2); }
.dm-thread-item.active{ background:rgba(156,111,19,.1); }
.dm-thread-item .name{ font-size:13px; font-weight:600; color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dm-thread-item .preview{ font-size:12px; color:var(--text-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-unread-badge{
  /* white text, not #1a1206 (dark-on-dark against the darkened --gold
     background fails contrast) -- see the --gold token comment above. */
  font-family:var(--font-mono); font-size:10px; background:var(--gold); color:#fff; border-radius:999px;
  padding:1px 7px; flex:none;
}

/* ---- Notification bell (Stage 5) ---- */
.nav-bell{ padding:8px !important; }
.nav-bell-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; border-radius:999px;
  background:var(--red); color:#fff; font-family:var(--font-mono); font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1;
}
.nav-bell-panel{
  position:absolute; top:100%; right:0; margin-top:8px; width:320px; max-height:400px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  z-index:60;
}
.nav-bell-panel-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text);
}
.nav-bell-mark-all{
  font-family:var(--font-mono); font-size:10px; text-transform:none; letter-spacing:0; font-weight:500;
  background:none; border:none; color:var(--gold); cursor:pointer; padding:0;
}
.nav-bell-mark-all:hover{ text-decoration:underline; }
.nav-bell-list{ padding:6px; }
.nav-bell-item{
  display:block; padding:10px 8px; border-radius:8px; font-size:12px; line-height:1.4; color:var(--text-mut);
  border-bottom:1px dashed var(--line);
}
.nav-bell-item:last-child{ border-bottom:none; }
.nav-bell-item.unread{ background:rgba(156,111,19,.08); color:var(--text); }
.nav-bell-item .title{ font-weight:600; color:var(--text); display:block; margin-bottom:2px; }
.nav-bell-item .time{ font-family:var(--font-mono); font-size:9px; color:var(--text-mut); }

/* ---- Account menu dropdown (Real-world-testing fix 2026-07-31) ----
   Replaces the old separate always-on "Account" + "Log out" nav buttons.
   Mirrors the notification-bell dropdown pattern above (sibling panel,
   absolutely positioned under the sticky nav bar) for visual/behavioral
   consistency. */
.nav-account-menu{ position:relative; }
.nav-account-btn{ gap:6px; max-width:170px; }
.nav-account-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.nav-account-btn svg{ flex:none; opacity:.7; }
.nav-account-panel{
  position:absolute; top:100%; right:0; margin-top:8px; min-width:230px;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.18);
  z-index:60; overflow:hidden;
}
.nav-account-panel-head{ padding:12px 14px; border-bottom:1px solid var(--line); }
.nav-account-name{ display:block; font-weight:700; font-size:13px; color:var(--text); }
.nav-account-email{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:2px; word-break:break-all; }
.nav-account-panel a, .nav-account-panel button{
  display:block; width:100%; text-align:left; padding:10px 14px; font-size:13px; color:var(--text);
  background:none; border:none; cursor:pointer;
}
.nav-account-panel a:hover, .nav-account-panel button:hover{ background:rgba(156,111,19,.08); color:var(--gold); }

/* ---- Drawer account identity block (same fix, mobile drawer) ---- */
.drawer-account-info{ padding:0 0 14px; margin-bottom:6px; border-bottom:1px dashed var(--line-2); }
.drawer-account-name{ display:block; font-weight:700; font-size:15px; color:var(--text); }
.drawer-account-email{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:2px; word-break:break-all; }

/* ---- Drawer notifications section (UX Upgrade Phase 2 follow-up,
   2026-08-21): mobile/tablet equivalent of the desktop .nav-bell-panel, so
   a phone/tablet user can actually see and clear notifications, not just a
   badge. Reuses the same list-item look as .nav-bell-item. ---- */
.drawer-notif-section{
  padding:0 0 14px; margin-bottom:6px; border-bottom:1px dashed var(--line-2);
}
.drawer-notif-head{
  display:flex; align-items:center; justify-content:space-between; padding:0 12px 8px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text);
}
.drawer-notif-mark-all{
  font-family:var(--font-mono); font-size:10px; text-transform:none; letter-spacing:0; font-weight:500;
  background:none; border:none; color:var(--gold); cursor:pointer; padding:0;
}
.drawer-notif-mark-all:hover{ text-decoration:underline; }
.drawer-notif-list{ max-height:260px; overflow-y:auto; padding:0 4px; }
.drawer-notif-item{
  display:block; padding:10px 8px; border-radius:8px; font-size:13px; line-height:1.4; color:var(--text-mut);
  border-bottom:1px dashed var(--line);
}
.drawer-notif-item:last-child{ border-bottom:none; }
.drawer-notif-item.unread{ background:rgba(156,111,19,.08); color:var(--text); }
.drawer-notif-item .title{ font-weight:600; color:var(--text); display:block; margin-bottom:2px; }
.drawer-notif-item .time{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); }

/* ---- Calendar events (Stage 5) ---- */
.calendar-event-list{ display:flex; flex-direction:column; gap:10px; }
.calendar-event-card{
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; background:var(--card);
}
.calendar-event-card.cancelled{ opacity:.6; }
.calendar-event-card .cal-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.calendar-event-card .cal-title{ font-weight:700; font-size:14px; color:var(--text); }
.calendar-event-card .cal-type{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-lo);
  border:1px solid var(--gold-hi); border-radius:6px; padding:2px 6px; flex:none;
}
.calendar-event-card .cal-when{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:4px; }
.calendar-event-card .cal-location{ font-size:12px; color:var(--text-mut); margin-top:2px; }
.calendar-event-card .cal-desc{ font-size:13px; color:var(--text); margin-top:8px; }
.calendar-event-card .cal-rsvp-row{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.calendar-event-card .cal-rsvp-btn{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.calendar-event-card .cal-rsvp-btn:hover{ border-color:var(--gold); color:var(--gold); }
.calendar-event-card .cal-rsvp-btn.active{ background:var(--gold); border-color:var(--gold); color:#fff; font-weight:700; }
.calendar-event-card .cal-rsvp-summary{ font-family:var(--font-mono); font-size:10px; color:var(--text-mut); }
.calendar-event-card .cal-actions{ display:inline-flex; gap:6px; margin-left:auto; }
.calendar-event-card .cal-actions button{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 6px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.calendar-event-card .cal-actions button:hover{ border-color:var(--gold); color:var(--gold); }

/* ---- Payments & Store (Stage 6) ---- */
/* Shared list/card styling for payment items/requests and store products/
   orders — mirrors .calendar-event-list/.calendar-event-card's structure
   exactly (list = column flex with gap, card = bordered rounded panel),
   so these two new Stage 6 pages visually match every existing dashboard
   list on the site rather than introducing a new pattern. */
.pay-item-list, .pay-request-list, .store-product-list, .store-order-list{ display:flex; flex-direction:column; gap:10px; }
.pay-item-card, .pay-request-card, .store-product-card, .store-order-card{
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; background:var(--card);
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;
}
.pay-item-card.archived, .store-product-card.archived{ opacity:.6; }
.pay-request-card.canceled, .store-order-card.canceled{ opacity:.6; }
.pay-item-title, .pay-request-title, .store-product-name{ font-weight:700; font-size:14px; color:var(--text); }
.pay-item-amount, .pay-request-amount, .store-product-price{ font-family:var(--font-mono); font-size:13px; color:var(--gold-lo); margin-top:4px; }
.pay-item-desc, .pay-request-desc, .store-product-desc{ font-size:12px; color:var(--text-mut); margin-top:4px; }
.pay-request-payer, .store-order-buyer{ font-size:12px; color:var(--text-mut); margin-top:2px; }
.pay-actions, .store-actions{ display:inline-flex; gap:6px; flex:none; }
.pay-actions button, .store-actions button{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 6px; border-radius:6px; border:1px solid var(--line-2); background:transparent; color:var(--text-mut); cursor:pointer;
}
.pay-actions button:hover, .store-actions button:hover{ border-color:var(--gold); color:var(--gold); }
.connection-status-box{
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; background:var(--card);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.connection-status-box .connection-note{ font-size:12px; color:var(--text-mut); }

/* ---------- Athlete Profile "trading card" page (format/width/no-scroll
   redesign) ----------
   Reuses the EXISTING light-theme token set only (--card/--line/--line-2
   for surfaces, --text/--text-mut for type, --gold-prefixed/--red-prefixed for accents,
   --track for the photo-column seam) — no new colors introduced.
   Restructured to match the approved reference exactly, at a DENSE,
   single-viewport density: wide bordered LIGHT card (#ap-share-card) —
   name in huge bold uppercase display type, gold club/city-state line, a
   red-outlined "VERIFIED ATHLETE" pill, 3 icon-LEFT stat tiles, a
   "Personal Records" section as 3 borderless columns divided by thin
   vertical rules (lightning-bolt header, red stopwatch chip per column),
   an "Event History" table (calendar header, EVENT/MEET/DATE/MARK/PLACE —
   5 columns, no separate Status column, top-3 places in bold red) capped
   to a fixed, internally-scrolling height, two big CTA buttons (solid red
   "View Calendar", outlined "Team Message Board") on the left ~3/5, and on
   the right ~2/5 the athlete's photo transposed over a track-texture
   background with a large, faint "TOE" watermark — like a sports trading
   card. The whole card (#ap-root) is height-capped to the viewport on
   desktop (≥1025px) so the page needs NO scrolling to see the entire card
   at once; only the Event History rows scroll internally if there are
   more than fit. Below 1025px this reverts to the original natural-height,
   page-scrolls layout (a dense no-scroll card doesn't make sense on a
   phone-sized viewport). */
/* BUGFIX (owner report 2026-08-18, "web version of the athlete profile
   page needs to be wider"): this page's <main> carries BOTH .admin-page
   and .ap-card-wrap (see athleteProfile.ts), and .admin-page .wrap{
   max-width:760px } (line ~1470) has the exact same specificity
   (0,0,2,0) as this rule — despite appearing later in the file, that tie
   was resolving inconsistently and the narrower 760px rule was winning,
   capping this page's wide trading-card layout down to a narrow column
   with a huge empty gutter on desktop. Selector strengthened to
   .admin-page.ap-card-wrap .wrap (specificity 0,0,3,0) so it
   unambiguously beats the generic .admin-page .wrap rule, regardless of
   source order. */
.admin-page.ap-card-wrap .wrap{ max-width:1400px; }
.ap-card-wrap{ padding:14px 0 24px; }
/* Height-cap the callout + card together (inside #ap-card-viewport) so
   BOTH the "unattached athlete" banner (when shown) and the card itself
   always fit within one viewport, minus the sticky nav (measured 73px)
   and this wrap's own padding — see .ap-card-wrap's padding-top (14px)
   plus a small buffer, giving ~91px total subtracted below.
   IMPORTANT: this cap/flex treatment applies ONLY to #ap-card-viewport
   (the shareable card + its callout), NOT to #ap-root as a whole — #ap-root
   also contains the owner-only privacy-settings panel below the card,
   which is a normal settings section and is allowed to require a page
   scroll to reach; it must NOT be squeezed into the same one-screen
   budget as the card itself (that previously crushed the card down to a
   sliver — see the git history for that regression's fix). */
#ap-root{ display:block; }
#ap-card-viewport{ display:flex; flex-direction:column; }
@media (min-width:1025px){
  #ap-card-viewport{ max-height: calc(100vh - 91px); }
  body.athlete-card-page .footer,
  body.athlete-card-page .bottom-nav{ display:none; }
}
.unattached-callout{ flex:none; padding:8px 12px !important; margin-bottom:8px !important; }
.unattached-callout p{ font-size:11px !important; }
.ap-share-card{
  position:relative; overflow:hidden; border-radius:22px;
  background: var(--card); color:var(--text);
  border:1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(17,26,44,.22);
  display:flex; flex-direction:column; min-height:0;
}
@media (min-width:1025px){ .ap-share-card{ flex:1; } }
.ap-card-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 3fr 2fr; align-items:stretch; flex:1; min-height:0; }

/* ---- Left: identity + stats + PRs + Event History ---- */
.ap-card-left{ padding:14px 18px 12px 24px; display:flex; flex-direction:column; min-width:0; min-height:0; }
.ap-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lo); font-weight:700; }
.ap-name{ font-family:var(--font-display); font-size:clamp(22px,2.6vw,36px); line-height:1.0; margin:4px 0 1px; text-transform:uppercase; letter-spacing:.01em; color:var(--text); }
.ap-name .nick{ color:var(--gold-lo); }
.ap-team-line{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--gold-lo); margin-top:2px; letter-spacing:.03em; }
.ap-team-line.unattached{ color:var(--text-mut); }
.ap-meta-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; align-items:center; }
.ap-verified-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; padding:5px 13px; border-radius:999px;
  background:#fff; border:1.5px solid var(--red); color:var(--red);
}
.ap-verified-badge svg{ width:12px; height:12px; flex:none; }
.ap-pill{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-mut); background:var(--bg-2);
}

/* ---- Stat tiles: icon LEFT (own chip, full tile height), label+value
   stacked to its right — matches the reference; replaces the earlier
   icon-inline-with-label/value-below layout. ---- */
.ap-scorecard-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.sc-card{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:7px 10px; background:var(--bg); text-align:left; }
.sc-icon{
  flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); color:var(--gold-lo);
}
.sc-icon svg{ width:13px; height:13px; }
.sc-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sc-card .lbl{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-mut); font-weight:700; }
.sc-card .val{ font-family:var(--font-display); font-size:17px; color:var(--text); line-height:1.1; }
.sc-card.hidden-priv .val{ font-size:12px; color:var(--text-mut); font-family:var(--font-body); font-weight:600; }

/* TOE Final Corrections (Correction #1, 2026-08-21): household dashboard
   CSS-order reorder hook. #household-content-flow is a flex column whose
   children carry an inline order (1-9) matching their ORIGINAL document
   position — so with NO class applied, a parent/guardian's layout is
   byte-for-byte identical to before this pass. app.js's
   applySelfAthleteFraming() toggles .household-athlete-first-order onto
   this same wrapper ONLY for the detected self/linked-athlete account
   shape; this rule then overrides those order values to realize the
   13-item athlete-first sequence: (1) profile/photo + (2) name/nickname +
   (3) team/city/state + (4) age group + (5) height/weight all live inside
   my-athlete-profile-panel's #my-athlete-snapshot block (already in
   correct internal order, so that whole panel goes first) -> (6) PRs +
   (7) event history (household-athlete-records-panel) -> (8) upcoming
   meets (household-meets-panel) -> (10) check-in status
   (household-checkin-panel). Items #9/#11/#12/#13 (calendar/Community/
   DMs/notifications) are the global header nav on every page (layout.ts)
   and need no panel/order here. Account & Family Settings (create
   household, guardians/athletes, billing, correction requests) moves
   after everything else, matching the spec's "secondary section". */
#household-content-flow{ display:flex; flex-direction:column; }
.household-athlete-first-order #my-athlete-profile-panel{ order:1 !important; }
.household-athlete-first-order #household-athlete-records-panel{ order:2 !important; }
.household-athlete-first-order #household-meets-panel{ order:3 !important; }
.household-athlete-first-order #household-checkin-panel{ order:4 !important; }
.household-athlete-first-order #household-create-panel{ order:5 !important; }
.household-athlete-first-order #household-account-family-group{ order:6 !important; }
.household-athlete-first-order #household-billing-panel{ order:7 !important; }
.household-athlete-first-order #household-correction-requests-panel{ order:8 !important; }
.household-athlete-first-order #household-dash-no-access{ order:9 !important; }

/* PROFILE CORRECTIONS + MEET-RESULTS IMPORT HANDOFF (2026-08-25), A5:
   this page's <main> carries the generic `.admin-page section` pair like
   every other dashboard, but `.section{ padding: var(--section-y) 0 }`
   (var(--section-y) = clamp(64px, 9vw, 128px)) was designed for the
   public marketing homepage's large hero/feature sections, not a
   dashboard directly under the sticky nav — on this page (the one both
   "Athlete Dashboard" and "Parent Dashboard" resolve to, see
   dashboardRouting.ts) that reads as a large empty gap between the nav
   and the dashboard content. Scoped ONLY to `.household-dash-page` (the
   class added alongside `.admin-page section` in
   householdDashboardPageHtml()) so no other dashboard's spacing is
   touched — mirrors the existing `.coach-dash-page`/`.clerk-dash-page`
   pattern of a page-specific override class rather than editing the
   shared `.section` rule. Bottom padding is left untouched (unaffected
   by the reported issue, and `.section + .section` bottom-border/spacing
   assumptions elsewhere on the site rely on it). */
.household-dash-page{ padding-top:20px; }
@media (max-width: 640px){
  .household-dash-page{ padding-top:16px; }
}

/* ---------------------------------------------------------------------
   Shared "primary action card" row (UX Upgrade Phase 1, 2026-08-21).
   Every role dashboard gets AT MOST 6 of these, large icon+label tiles
   that jump straight to that dashboard's most-used existing feature —
   nothing new is built behind them, they are simply big, obvious
   shortcuts to panels/pages that already exist elsewhere on the page
   or site. Reuses only existing color tokens (--card/--line/--track/
   --gold/--red per role) and the same >=44px touch-target rule as the
   bottom nav. Works inside both the plain `.admin-page` shell (household
   dashboard) and the `.toe-cc-main` Command Center shell (every other
   role dashboard) since it only relies on --card/--line/--text tokens
   that are defined globally, not scoped to either shell. -------------- */
.toe-action-cards{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  margin-bottom:22px;
}
.toe-action-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 14px; text-align:left; text-decoration:none; color:var(--text);
  min-height:96px; cursor:pointer;
  box-shadow:0 1px 3px rgba(17,26,44,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.toe-action-card:hover, .toe-action-card:focus-visible{
  border-color:var(--gold-hi); box-shadow:0 4px 12px rgba(17,26,44,.08); transform:translateY(-1px);
}
.toe-action-card:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
.toe-action-card-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--track) 14%, #fff); color:var(--track);
}
.toe-action-card-icon svg{ width:19px; height:19px; }
.toe-action-card-label{ font-family:var(--font-display); font-size:15px; letter-spacing:.01em; color:var(--text); }
.toe-action-card-sub{ font-size:12px; color:var(--text-mut); line-height:1.35; }
.toe-action-card-badge{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono);
  font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:999px;
  background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi);
}
@media (max-width: 900px){
  .toe-action-cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .toe-action-cards{ grid-template-columns:1fr 1fr; gap:10px; }
  .toe-action-card{ padding:13px 13px 11px; min-height:88px; }
}

/* ---------------------------------------------------------------------
   "Getting Started" checklist (UX Upgrade Phase 3, 2026-08-21) — household
   dashboard only. Reuses --card/--line/--text/--text-mut/--gold-hi tokens,
   same >=44px touch-target rule as the action cards above. A done item's
   circle fills solid green (--tcc-green's value, inlined here since this
   panel lives outside the .toe-cc scope) with a check mark; a not-done
   item stays an outlined circle and its label/button stay actionable. */
.toe-gs-list{ display:flex; flex-direction:column; gap:10px; }
.toe-gs-item{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; min-height:44px;
}
.toe-gs-item.done{ opacity:.7; }
.toe-gs-check{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); color:transparent; background:transparent;
}
.toe-gs-item.done .toe-gs-check{ border-color:#16A34A; background:#16A34A; color:#fff; }
.toe-gs-check svg{ width:14px; height:14px; }
.toe-gs-item-body{ flex:1 1 220px; min-width:0; }
.toe-gs-item-title{ font-family:var(--font-display); font-size:14px; letter-spacing:.01em; color:var(--text); }
.toe-gs-item.done .toe-gs-item-title{ text-decoration:line-through; }
.toe-gs-item-sub{ font-size:12px; color:var(--text-mut); line-height:1.35; }
.toe-gs-item .btn{ flex:none; }
@media (max-width: 560px){
  .toe-gs-item{ padding:11px 12px; }
}

/* My-athlete-profile snapshot block (household dashboard only): photo +
   name/team/age-group/height-weight side-by-side, reusing ap-* classes
   already defined above verbatim. */
.hh-snapshot-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.hh-snapshot-photo{
  flex:none; width:96px; height:96px; border-radius:12px; overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.hh-snapshot-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hh-snapshot-photo svg{ width:40%; height:40%; color:var(--text-mut); }
.hh-snapshot-info{ flex:1; min-width:200px; }
@media (max-width:520px){
  .hh-snapshot-row{ flex-direction:column; align-items:center; text-align:center; }
  .hh-snapshot-info{ width:100%; }
}

/* ---- Bio / events caption: one compact line, no section header (the
   dense single-screen format has no room for a full "About" section) ---- */
.ap-bio-text{ font-size:11px; line-height:1.35; color:var(--text-mut); margin:5px 0 0; max-height:30px; overflow:hidden; }

/* PROFILE CORRECTIONS + MEET-RESULTS IMPORT HANDOFF (2026-08-25), A4:
   reusable per-section shimmer skeleton + retry-on-failure utility classes
   for the Athlete Profile page's 4 target sections (photo, PR cards, Event
   History, Connected Results Sources). This page's #ap-loading/#ap-root
   page-wide toggle (app.js's load()) is UNCHANGED — it still gates the
   very first paint of the whole page exactly as before. These classes are
   an ADDITIONAL, more granular layer scoped inside #ap-root: once the
   initial /profile-page fetch resolves, each of the 4 sections gets its
   own brief "still populating" skeleton (photo/PRs/Event History render
   synchronously from the same payload so their skeleton is only visible
   for a frame in practice, but Connected Results Sources performs its own
   separate fetch via loadConnections() and can legitimately take longer,
   fail independently, or need a retry) — never blocking or being blocked
   by the other 3 sections. A shared `.toe-skel-retry` state (message +
   Retry button) mirrors the existing `#md-cc-error`/`#md-cc-retry-btn`
   pattern already used by the Meet Director dashboard (see
   meetDirectorDashboard.ts + this file's own .md-cc-error-state rules)
   rather than inventing a new visual language. */
.toe-skel{
  position:relative; overflow:hidden; border-radius:8px; background:var(--bg-2);
}
.toe-skel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: toe-skel-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .toe-skel::after{ animation:none; }
}
@keyframes toe-skel-shimmer{ 100%{ transform: translateX(100%); } }

.toe-skel-line{ height:12px; margin:6px 0; }
.toe-skel-line.sm{ height:9px; width:60%; }
.toe-skel-line.lg{ height:22px; width:70%; }

/* Photo skeleton fills the whole photo frame in place of the silhouette. */
.toe-skel-photo{ position:absolute; inset:0; z-index:3; border-radius:0; }

/* PR-card skeleton: 3 placeholder columns matching .pr-grid's own layout. */
.toe-skel-pr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.toe-skel-pr-grid .toe-skel-pr-card{ padding:0 14px; border-left:1px solid var(--line); }
.toe-skel-pr-grid .toe-skel-pr-card:first-child{ border-left:none; padding-left:0; }

/* Event History skeleton: a handful of placeholder rows the same height as
   a real .eh-table row. */
.toe-skel-eh-row{ display:flex; gap:10px; align-items:center; padding:7px 8px; border-bottom:1px solid var(--line); }
.toe-skel-eh-row .toe-skel-line{ flex:1; margin:0; }

/* Connected Results Sources skeleton: placeholder rows matching .crs-row. */
.toe-skel-crs-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.toe-skel-crs-row:first-of-type{ border-top:none; }
.toe-skel-crs-row .toe-skel-line{ margin:0; }

/* Shared retry-on-failure state — same message+button pattern as
   #md-cc-error/#md-cc-retry-btn, scoped generically via a reusable class
   so any of A4's 4 sections can show it without a bespoke id per section. */
.toe-skel-retry{
  padding:14px; border-radius:8px; border:1px solid var(--red-lo); background:rgba(214,48,63,.06);
  color:var(--red-hi); font-size:12.5px; line-height:1.5; text-align:center;
}
.toe-skel-retry p{ margin:0 0 8px; }
.toe-skel-retry .btn{ margin:0 auto; }
/* On the dark photo panel, the red-on-white error card would look out of
   place over the track-texture background — a lighter, higher-contrast
   variant keeps it legible there. */
.ap-card-photo-col .toe-skel-retry{
  position:absolute; inset:12px; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(15,25,45,.72); border-color:rgba(255,255,255,.25); color:#fff;
}

/* ---- Personal Records + Event History ---- */
.ap-section{ margin-top:8px; }
.ap-section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; flex-wrap:wrap; gap:8px; padding-bottom:4px; border-bottom:1.5px solid var(--gold-hi); }
.ap-section-title h2{ font-size:12px; margin:0; display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); font-family:var(--font-mono); font-weight:800; }
.ap-section-title h2 svg{ width:14px; height:14px; flex:none; color:var(--red); }

/* Borderless columns divided by a thin vertical rule (matches the
   reference — NOT individually boxed/backed cards like before). */
.pr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.pr-card{ padding:0 14px; border-left:1px solid var(--line); }
.pr-card:first-child{ border-left:none; padding-left:0; }
/* A1 (Profile Corrections handoff, 2026-08-24): the "View All PRs"
   expansion grid. Separate top border/margin so it reads as a distinct,
   deliberately-revealed second row rather than an accidental continuation
   of the always-visible first row. */
.pr-grid-extra{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
#ap-pr-viewall-btn{ font-size:10px; padding:4px 10px; }
.pr-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.pr-card .ev{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--gold-lo); letter-spacing:.05em; font-weight:700; }
.pr-icon{ flex:none; width:20px; height:20px; border-radius:50%; background:rgba(214,48,63,.08); color:var(--red); display:flex; align-items:center; justify-content:center; }
.pr-icon svg{ width:11px; height:11px; }
.pr-card .mark{ font-family:var(--font-display); font-size:18px; color:var(--text); margin:2px 0; }
.pr-card .meet{ font-size:9px; color:var(--text-mut); }
.pr-card .flags{ margin-top:3px; display:flex; gap:4px; flex-wrap:wrap; }
.ap-flag{ font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-mut); }
.ap-flag.verified{ background:rgba(201,152,47,.12); color:var(--gold-lo); border-color:var(--gold-hi); }
.ap-flag.unverified{ background:rgba(214,48,63,.08); color:var(--red-hi); border-color:var(--red-lo); }
.ap-flag.wind{ background:var(--bg-2); color:var(--text-mut); border-color:var(--line-2); }
/* "Imported" = a pre-TOE/historical result the athlete linked/claimed via
   the Find and Claim Previous Athlete Results feature (see
   computeExtendedAthletePRs() in athleteRecords.ts) — distinct from a
   TOE-native official result, so it gets its own neutral badge rather
   than being lumped into verified/unverified. */
.ap-flag.imported{ background:rgba(11,99,197,.08); color:var(--tcc-blue, #0B63C5); border-color:rgba(11,99,197,.35); }

/* Event History gets a fixed, internally-scrolling viewport on desktop so
   a long history never grows the card past the single-screen budget —
   flex:1 lets it absorb whatever vertical space is left after the header/
   stats/PRs/CTAs, min-height:0 is required for the flex-child to actually
   be allowed to shrink/scroll instead of overflowing its parent. */
#ap-eh-section{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.ap-eh-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
table.eh-table{ width:100%; border-collapse:collapse; font-size:12px; color:var(--text); }
table.eh-table th{ text-align:left; font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-mut); border-bottom:1px solid var(--line); padding:6px 8px; cursor:pointer; position:sticky; top:0; background:var(--card); }
table.eh-table td{ padding:6px 8px; border-bottom:1px solid var(--line); }
table.eh-table tbody tr:nth-child(even) td{ background:var(--bg-2); }
table.eh-table tr.pr-row td{ background:rgba(201,152,47,.1); }
table.eh-table tr.sb-row td{ background:var(--bg-2); }
.eh-place-top{ color:var(--red); font-weight:800; }
.eh-place-nonfinish{ color:var(--text-mut); font-style:italic; font-weight:600; }
.eh-tag{ font-family:var(--font-mono); font-size:8px; text-transform:uppercase; padding:2px 5px; border-radius:6px; border:1px solid var(--gold-hi); color:var(--gold-lo); margin-left:5px; }

.eh-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:5px; }
.eh-filters select, .eh-filters input{ font-family:var(--font-body); font-size:11px; padding:5px 8px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg); color:var(--text); }

/* ---- CTA buttons row (View Calendar / Team Message Board) ---- */
.ap-cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; flex:none; }
.ap-cta-row .btn{
  flex:1; justify-content:center; min-width:150px; font-size:11px; padding:8px 14px;
  text-transform:uppercase; letter-spacing:.04em;
  /* Override the base .btn's white-space:nowrap — the disabled
     message-board label ("Join a Team to Access the Message Board") is
     far too long for this row's per-button width and was overflowing
     its own box, visually smearing across the Event History table above
     it. Let long labels wrap onto a 2nd line instead; min-height keeps
     both buttons the same height even when only one wraps. */
  white-space:normal; line-height:1.2; text-align:center; min-height:40px;
}
.ap-cta-row .btn svg{ width:14px; height:14px; flex:none; }
.btn-ghost-dark{ background:transparent; border:1.5px solid var(--line-2); color:var(--text); }
.btn-ghost-dark:hover{ border-color:var(--gold); color:var(--gold-lo); }
.btn-ghost-dark.disabled, .btn-ghost-dark[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---- Share row: Share as Image ONLY (see athleteProfile.ts's header
   comment on this row — no link-based share/copy on this gated page, by
   design; a plain URL would either dead-end a logged-out recipient or
   require handing out session access). ---- */
.ap-share-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; align-items:center; flex:none; }
.ap-share-btn{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--bg-2); color:var(--text); cursor:pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ap-share-btn:hover{ border-color:var(--gold); color:var(--gold-lo); background:var(--bg-3); }
.ap-share-btn svg{ width:14px; height:14px; flex:none; }
.ap-share-btn-primary{
  border-color:var(--red); background:var(--red); color:#fff;
}
.ap-share-btn-primary:hover{ border-color:var(--red-hi); background:var(--red-hi); color:#fff; }
.ap-share-btn-primary[disabled]{ opacity:.6; cursor:wait; }
.ap-share-copied{ font-family:var(--font-mono); font-size:11px; color:var(--gold-lo); opacity:0; transition:opacity .2s ease; font-weight:700; }
.ap-share-copied.show{ opacity:1; }
#ap-share-image-error.show{ opacity:1; color:var(--red); }
.ap-share-note{ font-size:9px; color:var(--text-mut); margin:2px 0 0; flex:none; line-height:1.3; }

/* While the card is being captured to an image, hide interactive chrome
   that shouldn't appear in the exported graphic (filters/sort selects,
   Load More, the upload input, and the share-row buttons themselves) -
   toggled via this class on #ap-share-card, not inline styles, so the
   capture code only needs to add/remove one class. */
.ap-share-card.ap-capturing .eh-filters,
.ap-share-card.ap-capturing #ap-eh-load-more,
.ap-share-card.ap-capturing .ap-photo-upload,
.ap-share-card.ap-capturing .ap-share-row{
  display:none !important;
}
/* The format/width/no-scroll redesign caps Event History to a fixed,
   internally-scrolling height so the on-screen card fits one viewport —
   but an exported "Share as Image" PNG should show the FULL history, not
   whatever happened to be scrolled into view. Unclamp during capture only
   (only #ap-share-card itself is passed to html2canvas, so #ap-root's own
   height cap never affects the captured bitmap and doesn't need
   overriding here) so html2canvas walks the complete, natural-height
   content instead of clipping it. */
.ap-share-card.ap-capturing{
  max-height:none !important; flex:none !important; overflow:visible !important;
}
.ap-share-card.ap-capturing #ap-eh-section{
  flex:none !important;
}
.ap-share-card.ap-capturing .ap-eh-scroll{
  max-height:none !important; overflow:visible !important; flex:none !important;
}
/* html2canvas has known rendering artifacts with position:sticky (it can
   duplicate/misplace the stuck element in the captured canvas) - pin the
   photo column to position:relative (NOT static - its img/watermark/
   silhouette children are position:absolute and need this element to stay
   their containing block, or they escape to cover the whole card) for the
   duration of the capture only. Harmless no-op now that the redesign's
   default is already position:relative (no more position:sticky on this
   column), kept for defense-in-depth in case that ever changes back. */
.ap-share-card.ap-capturing .ap-card-photo-col{
  position:relative !important; top:auto !important;
}
/* html2canvas has a known bug where inset:0 pseudo-elements on a column
   that just switched off position:sticky get their containing-block width
   miscomputed, stretching the fade-gradient overlay across neighboring
   grid columns instead of staying confined to the photo column. Disable
   both fade pseudo-elements for the capture only - the photo still reads
   fine without the seam-fade in a static exported image. */
.ap-share-card.ap-capturing .ap-card-photo-col::before,
.ap-share-card.ap-capturing .ap-card-photo-col::after{
  content:none !important; display:none !important;
}
/* html2canvas also mis-renders box-shadow combined with overflow:hidden on
   the outer card (paints a soft gray diagonal smear into the card's own
   content instead of casting the shadow outside its bounds) - drop the
   shadow for the capture only; a flat-bordered card still looks clean as
   a standalone exported image. */
.ap-share-card.ap-capturing{
  box-shadow:none !important;
}

.unattached-callout{
  border:1px dashed var(--gold-hi); border-radius:10px; padding:10px 14px; background:rgba(201,152,47,.06);
  margin-top:0; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.unattached-callout p{ margin:0; font-size:12px; color:var(--text-mut); }

/* ---- Right: full-bleed photo, transposed over the track background ----
   The card's right column is a photo of the track (background-image),
   with the athlete's own cut-out photo absolutely positioned ON TOP and
   allowed to bleed slightly past the card's own edges (the "transposed
   photo over track image" trading-card effect the reference shows) — a
   soft gradient seam blends it back into the card's light surface on the
   left edge so there's no hard cut line. A large, very faint "TOE"
   wordmark sits behind the photo as a watermark. Falls back to an inline
   SVG silhouette centered on the track photo when no photo is uploaded. */
.ap-card-photo-col{
  /* Stretches to match the left column's height exactly (the whole card
     is now height-capped to fit one viewport — see #ap-root above — so
     the earlier fixed-height/position:sticky "peek over a taller, page-
     scrolling column" treatment no longer applies; both columns fit
     entirely on screen together, so a simple full-height stretch reads
     correctly here). */
  position:relative; align-self:stretch; overflow:hidden; min-height:260px;
  background-image: url('/static/athlete-track-bg.jpg');
  background-size: cover; background-position: center;
}
.ap-card-photo-col::before{
  /* left-edge fade so the track photo dissolves into the card's own light
     surface rather than showing a hard seam */
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, var(--card) 0%, rgba(255,255,255,.5) 8%, rgba(255,255,255,0) 30%);
}
.ap-card-photo-col::after{
  /* bottom fade so text/caption below always reads clearly */
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(0deg, rgba(15,25,45,.55) 0%, rgba(15,25,45,0) 40%);
}
.ap-card-watermark{
  position:absolute; z-index:2; right:10px; bottom:-6px; font-family:var(--font-display); font-size:96px;
  color:rgba(255,255,255,.14); letter-spacing:.02em; line-height:1; pointer-events:none; user-select:none;
}
.ap-card-photo-col img{
  /* object-fit:cover (not contain) deliberately — athlete uploads are
     ordinary rectangular photos with real backgrounds, not pre-cutout
     transparent PNGs, so this must look intentional for ANY uploaded
     photo's aspect ratio, not just a designer's isolated cutout. Fills
     the frame edge-to-edge; object-position favors the upper-third
     (face/head sits there for most portrait AND landscape uploads)
     without cropping in so tight it isolates a single facial feature. */
  position:absolute; z-index:3; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: center 22%;
}
.ap-card-photo-col .silhouette-wrap{
  position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:center;
}
.ap-card-photo-col .silhouette{ width:42%; opacity:.85; color:rgba(255,255,255,.75); filter: drop-shadow(0 12px 20px rgba(15,25,45,.3)); }
.ap-photo-caption{ position:relative; z-index:4; text-align:center; font-family:var(--font-mono); font-size:11px; color:#fff; padding:10px 12px 0; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.ap-photo-upload{ position:absolute; z-index:4; left:0; right:0; bottom:10px; margin-top:0; text-align:center; padding:0 12px; }
/* TOE Athlete Profile Correction Handoff (2026-08-24), Section 8: the raw
   OS file-picker control (<input type="file">) is never shown directly —
   it's visually hidden (kept in the DOM and natively focusable/operable
   for accessibility, per the standard "hidden input + styled label"
   pattern) behind a small pill-shaped "Change Photo" button that matches
   the card's existing dark-glass button treatment used elsewhere on the
   photo column (e.g. the caption/silhouette styling above). */
.ap-photo-file-input-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ap-photo-change-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff;
  background:rgba(15,25,45,.6); border:1px solid rgba(255,255,255,.35); border-radius:20px; padding:7px 14px;
  transition:background .15s ease, border-color .15s ease;
}
.ap-photo-change-btn:hover{ background:rgba(15,25,45,.8); border-color:rgba(255,255,255,.6); }
.ap-photo-change-btn:focus-within{ outline:2px solid var(--gold-hi); outline-offset:2px; }
.ap-photo-change-btn.is-busy{ opacity:.6; pointer-events:none; }
.ap-photo-upload-status{
  margin:6px 0 0; font-family:var(--font-mono); font-size:10.5px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); min-height:14px;
}
.ap-photo-upload-status.is-error{ color:#ffb4b4; }
.ap-photo-upload-status.is-success{ color:#b8e6a0; }

.ap-privacy-note{
  font-family:var(--font-mono); font-size:11px; color:var(--text-mut); text-align:center; padding:20px 0 12px;
}

/* Owner-only privacy controls (light card below the hero, unchanged palette) */
.ap-privacy-panel{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:24px; margin-top:24px; }
.ap-privacy-panel .fld-row{ grid-template-columns: 1fr 1fr; }
.ap-privacy-panel .fld{ margin-bottom:10px; }
.ap-privacy-save-note{ font-size:12px; color:var(--gold-lo); margin-top:6px; display:none; }
.ap-privacy-save-note.show{ display:block; }

/* ---- Responsive: tablet ---- (below 1025px the single-screen height cap
   on #ap-root doesn't apply — see the ≥1025px rule above — so this reverts
   to the original natural-height, page-scrolling layout; a dense
   no-scroll trading card doesn't make sense on a tablet/phone viewport.) */
@media (max-width: 1024px){
  .ap-card-grid{ grid-template-columns: 1fr; }
  .ap-card-photo-col{ order:-1; min-height:340px; flex:none; }
  .ap-card-photo-col::before{ background: linear-gradient(180deg, var(--card) 0%, rgba(255,255,255,.4) 10%, rgba(255,255,255,0) 30%); }
  .ap-card-photo-col img{ object-position: center 18%; }
  .ap-card-left{ padding:28px 24px 28px; }
  .ap-name{ font-size:clamp(28px,5vw,44px); }
  .ap-section{ margin-top:24px; }
  .ap-eh-scroll{ overflow-y:visible; }
  table.eh-table th{ position:static; }
  .pr-grid{ grid-template-columns:repeat(2,1fr); row-gap:14px; }
  .pr-card:nth-child(2n+1){ border-left:none; padding-left:0; }
  table.eh-table{ display:block; overflow-x:auto; white-space:nowrap; }
}
/* ---- Responsive: mobile ---- */
@media (max-width: 640px){
  .ap-card-wrap{ padding:16px 0 40px; }
  .ap-share-card{ border-radius:16px; }
  .ap-card-photo-col{ min-height:280px; }
  .ap-card-left{ padding:24px 18px; }
  .ap-name{ font-size:26px; }
  .ap-cta-row{ flex-direction:column; }
  .ap-cta-row .btn{ min-width:0; }
  .ap-scorecard-cards{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .sc-card{ padding:8px; flex-direction:column; text-align:center; gap:4px; }
  .sc-icon{ width:26px; height:26px; }
  .sc-card .lbl{ display:none; }
  .sc-card .val{ font-size:15px; }
  .pr-grid{ grid-template-columns:1fr; }
  .pr-grid.swipe{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px; }
  .pr-grid.swipe .pr-card{ min-width:78%; scroll-snap-align:start; flex:none; border-left:none; padding-left:0; }
  table.eh-table{ display:none; }
  .eh-cards{ display:block; }
  .eh-card{ border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--bg); }
  .eh-card .row1{ display:flex; justify-content:space-between; font-weight:600; font-size:13px; color:var(--text); }
  .eh-card .row2{ font-size:12px; color:var(--text-mut); margin-top:4px; }
}
@media (min-width: 641px){ .eh-cards{ display:none; } }

/* ---- Signup form: dynamic Athlete-specific section + team search combobox
   (Section 2/3/4/13). Reuses .fld/.fld-row/.form-error exactly — no new
   form-field visual language introduced. ---- */
.reg-role-section{ display:none; }
.reg-role-section.show{ display:block; }
.reg-placeholder-note{
  font-size:13px; color:var(--text-mut); line-height:1.6; padding:14px 16px;
  border:1px dashed var(--line-2); border-radius:10px; margin-top:6px;
}
.team-search-wrap{ position:relative; }
.team-search-results{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:var(--card); border:1px solid var(--line-2); border-radius:10px;
  box-shadow: 0 14px 32px -12px rgba(17,26,44,.28); max-height:260px; overflow-y:auto;
  display:none;
}
.team-search-results.show{ display:block; }
.team-search-option{
  padding:10px 14px; cursor:pointer; font-size:14px; border-bottom:1px solid var(--line);
}
.team-search-option:last-child{ border-bottom:none; }
.team-search-option:hover, .team-search-option.active{ background:var(--bg-2); }
.team-search-option .meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:2px; }
.team-search-option.unattached-option{ color:var(--gold-lo); font-weight:600; }
.team-selected-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:6px 12px;
  border-radius:999px; border:1px solid var(--gold-hi); background:rgba(201,152,47,.08);
  font-size:13px; color:var(--gold-lo);
}
.team-selected-chip button{
  background:none; border:none; color:var(--text-mut); cursor:pointer; font-size:14px; line-height:1;
}

/* ---------------------------------------------------------------------
   Phase 12 (Meet Clerk Dashboard) — Task 8: Clerk/Timer dashboard layout.
   Ported (structure + class names) from previews/clerk-dashboard-preview.html
   — that file's own header comment notes it reuses TOE tokens verbatim
   with only 4 new clerk-specific status colors, introduced here as CSS
   variables on .clerk-dash-page/.timer-dash-page so they never leak into
   the rest of the site. Every rule below is scoped under one of those two
   page wrapper classes (never bare .panel/.workspace/etc.) so this
   dashboard-specific layout language can never collide with an unrelated
   future ".panel" class elsewhere on the site.
   --------------------------------------------------------------------- */
.clerk-dash-page, .timer-dash-page{
  --clerk-green: #1f7a3d;
  --clerk-green-bg: #e4f4ea;
  --clerk-red-bg: #fbe6e8;
  --clerk-grey-bg: #eef2f7;
}
/* TOE Clerk Dashboard Layout Correction Handoff (2026-08-24): the Clerk
   Dashboard's max-width is now split into its OWN rule (was previously a
   shared `.clerk-dash-page .wrap, .timer-dash-page .wrap{ max-width:1280px }`
   comma-selector) so widening the Clerk workspace never affects the Timer
   Dashboard, whose 1280px rule is preserved unchanged immediately below. */
.timer-dash-page .wrap{ max-width:1280px; }
.clerk-dash-page .wrap{ max-width:1280px; }
@media (min-width: 1200px){
  /* ~95% of desktop width, capped so it never runs edge-to-edge on very
     wide monitors. Only .clerk-dash-page is affected — every other
     dashboard (incl. Timer, immediately above) keeps its own unchanged
     .wrap rule. */
  .clerk-dash-page .wrap{ max-width:min(95vw, 1680px); }
}

/* ---- Clerk Topnav (replaces the removed `.toe-cc-sidebar` on this page
   ONLY — see clerkDashboard.ts's header comment). Sticky on desktop/
   tablet; horizontally-scrollable single row with a fade-edge indicator
   on narrow/mobile widths instead of wrapping or clipping. ---- */
.clerk-no-sidebar .toe-cc-main{ padding-top:12px; }
.clerk-topnav{
  position:sticky; top:0; z-index:40; background:var(--tcc-bg);
  border-bottom:1px solid var(--tcc-line); margin:0 -22px 16px; padding:0 22px;
}
.clerk-topnav-scroll{
  display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.clerk-topnav-link{
  flex:0 0 auto; display:inline-flex; align-items:center; white-space:nowrap;
  padding:12px 14px; min-height:44px; font-size:12.5px; font-weight:700;
  color:var(--tcc-text-mut); text-decoration:none; border-bottom:3px solid transparent;
}
.clerk-topnav-link:hover{ color:var(--tcc-text); }
.clerk-topnav-link:focus-visible{ outline:2px solid var(--tcc-gold-hi); outline-offset:2px; }
.clerk-topnav-link.active{ color:var(--tcc-navy); border-bottom-color:var(--tcc-gold-hi); }
@media (max-width: 700px){
  .clerk-topnav{ margin:0 -14px 12px; padding:0 14px; }
  .clerk-topnav-link{ padding:11px 12px; font-size:12px; }
}

.clerk-meet-header{
  background:var(--grad-gold); color:#2a1c04; padding:16px 20px; border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px;
}
.clerk-meet-header-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.clerk-meet-header h2{
  font-family:var(--font-display); font-size:20px; margin:0; letter-spacing:.02em;
  text-transform:uppercase; color:#241703;
}
.clerk-meet-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; font-weight:700; color:#3a2807; }
.clerk-meet-meta span{ display:inline-flex; align-items:center; gap:5px; }
.clerk-live-pill{
  background:var(--red-hi); color:#fff; font-weight:800; font-size:12px; padding:8px 14px;
  border-radius:8px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.05em;
}
.clerk-signed-in-as{ font-family:var(--font-mono); font-size:10px; color:#3a2807; font-weight:700; }

.clerk-meet-select-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.clerk-meet-select-row select{ padding:8px 10px; border:1px solid var(--line-2); border-radius:8px; font-size:13px; background:#fff; min-width:220px; }
.clerk-meet-select-row label{ font-size:12px; font-weight:700; color:var(--text-dim); }

.clerk-source-strip{
  background:#fffaf0; border:1px solid var(--line); border-radius:10px;
  padding:8px 16px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-mut);
  display:flex; gap:18px; flex-wrap:wrap; margin-bottom:12px;
}

.clerk-disclaimer{
  background:#fff7e6; border:1px solid var(--line); border-radius:10px; padding:10px 16px;
  font-size:12px; color:#5a4207; display:flex; gap:8px; align-items:flex-start; margin-bottom:16px;
}
.clerk-disclaimer .ic{ flex:0 0 auto; font-size:14px; }

/* TOE Clerk Dashboard Layout Correction Handoff (2026-08-24): converted
   from a fixed-px 3-column grid (300px 1fr 300px — which forced a
   horizontally-scrolling page on many laptop/tablet widths once the
   sidebar's space was reclaimed and the workspace widened) to the spec's
   recommended percentage-based split: Order of Events ~23%, Heat
   Workspace ~54%, Call Board ~23%. `minmax(0, ...)` keeps every column
   able to shrink below its content's natural width instead of forcing
   the grid — and therefore the page — wider than the viewport. */
.clerk-workspace{
  display:grid; gap:16px; align-items:start;
  grid-template-columns: minmax(0,23%) minmax(0,54%) minmax(0,23%);
}
@media (max-width: 1100px){
  .clerk-workspace{ grid-template-columns: 1fr; }
  .clerk-col-order{ order:1; }
  .clerk-col-heat{ order:2; }
  .clerk-col-call{ order:3; }
}
/* Hide/Show Events, Hide/Show Call Board, Expand Heat Workspace toggles
   (session-only preference via sessionStorage — see app.js's
   initClerkLayoutToggles()). Purely additive classes on #clerk-workspace;
   collapsing a column removes its grid track entirely rather than just
   hiding its content, so the freed space goes to the remaining column(s). */
.clerk-workspace.clerk-hide-order{ grid-template-columns: minmax(0,68%) minmax(0,23%); }
.clerk-workspace.clerk-hide-order .clerk-col-order{ display:none; }
.clerk-workspace.clerk-hide-call{ grid-template-columns: minmax(0,23%) minmax(0,68%); }
.clerk-workspace.clerk-hide-call .clerk-col-call{ display:none; }
.clerk-workspace.clerk-hide-order.clerk-hide-call{ grid-template-columns: 1fr; }
.clerk-workspace.clerk-expand-heat{ grid-template-columns: 1fr; }
.clerk-workspace.clerk-expand-heat .clerk-col-order,
.clerk-workspace.clerk-expand-heat .clerk-col-call{ display:none; }
@media (max-width: 1100px){
  /* Below the tablet breakpoint the workspace is already single-column
     (stacked); the collapse toggles still work (they just hide/show a
     stacked panel instead of a grid track) so they stay useful on
     tablet/mobile too, per the spec's tablet-layout requirement. */
  .clerk-workspace.clerk-hide-order,
  .clerk-workspace.clerk-hide-call,
  .clerk-workspace.clerk-expand-heat{ grid-template-columns: 1fr; }
}

.clerk-layout-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.clerk-layout-btn{
  border:1px solid var(--line-2); background:#fff; color:var(--text-dim);
  border-radius:8px; padding:8px 12px; font-size:11.5px; font-weight:700; cursor:pointer;
  min-height:44px;
}
.clerk-layout-btn[aria-pressed="false"]{ background:var(--bg-2); color:var(--text-mut); }
.clerk-layout-btn:focus-visible{ outline:2px solid var(--tcc-gold-hi, var(--gold-hi)); outline-offset:1px; }

/* =====================================================================
   Guided Tour (2026-08-24, TOE Clerk Dashboard Layout & Ease-of-Use
   Correction Handoff) — a lightweight, first-visit, dismissible
   walkthrough built from 3 pieces only, no third-party library:
     .clerk-tour-overlay  — a dim full-viewport backdrop, click-through
       disabled only on itself (never blocks the highlighted control,
       which is lifted above it via z-index — see .clerk-tour-highlight).
     .clerk-tour-tooltip  — the step card (title/body/step-count/
       controls), positioned in JS next to the current target, flipping
       side automatically so it never covers the target or runs off any
       of the 7 required viewports.
     .clerk-tour-offer    — a small non-blocking banner offered once,
       automatically, on a Meet Clerk's first visit only.
   Reuses only existing TOE color/font/radius tokens; no new palette. ===
   ===================================================================== */
.clerk-tour-overlay{
  position:fixed; inset:0; background:rgba(11,35,69,.55); z-index:2000;
}
.clerk-tour-tooltip{
  position:fixed; z-index:2001; max-width:320px; background:#fff;
  border:1px solid var(--line-2); border-radius:12px; padding:16px 18px;
  box-shadow:0 12px 32px rgba(11,35,69,.35);
  font-family:var(--font-body);
}
.clerk-tour-step-count{
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tcc-gold, var(--gold)); margin-bottom:4px;
}
.clerk-tour-title{ margin:0 0 6px; font-size:15px; font-weight:800; color:var(--text); }
.clerk-tour-body{ margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--text-dim); }
.clerk-tour-controls{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.clerk-tour-controls-right{ display:flex; gap:8px; }
.clerk-tour-btn{
  border:1px solid var(--line-2); background:#fff; color:var(--text-dim);
  border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer;
  min-height:40px; min-width:40px;
}
.clerk-tour-btn.primary{ background:var(--tcc-navy, #0B2345); border-color:var(--tcc-navy, #0B2345); color:#fff; }
.clerk-tour-btn.primary:hover{ background:var(--tcc-navy-2, #061D3D); }
.clerk-tour-btn:disabled{ opacity:.4; cursor:not-allowed; }
.clerk-tour-btn:focus-visible{ outline:2px solid var(--tcc-gold-hi, var(--gold-hi)); outline-offset:2px; }
@media (max-width: 480px){
  .clerk-tour-tooltip{ max-width:calc(100vw - 24px); left:12px !important; right:12px; }
}
/* The single element currently being explained is lifted above the dim
   overlay (never covered by it, per spec) and gets a visible highlight
   ring; JS toggles this class onto exactly one element at a time. */
.clerk-tour-highlight{
  position:relative; z-index:2000; outline:3px solid var(--tcc-gold-hi, var(--gold-hi));
  outline-offset:3px; border-radius:6px;
  box-shadow:0 0 0 6000px rgba(11,35,69,.55);
}
.clerk-tour-offer{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:1999;
  background:#fff; border:1px solid var(--line-2); border-radius:12px;
  box-shadow:0 8px 24px rgba(11,35,69,.3); padding:12px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; max-width:min(92vw,480px);
  font-size:12.5px; color:var(--text-dim);
}
.clerk-tour-offer-actions{ display:flex; gap:8px; flex:none; }
@media (max-width: 480px){
  .clerk-tour-offer{ left:12px; right:12px; transform:none; max-width:none; }
}

/* Ease-of-Use Improvement #1: Current Task Banner. */
.clerk-task-banner{
  background:var(--tcc-navy, #0B2345); color:#fff; border-radius:10px; padding:10px 16px;
  font-size:12.5px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:14px;
}
.clerk-task-banner-label{ font-weight:800; text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; color:#cbd8ee; flex:none; }
.clerk-task-banner-text{ font-weight:600; }

/* Ease-of-Use Improvement #7: "How clerking works" expandable panel. */
.clerk-howto-toggle{
  margin-left:auto; background:none; border:none; color:var(--track); font-weight:700;
  font-size:11.5px; cursor:pointer; padding:4px 6px; min-height:32px; text-decoration:underline;
}
.clerk-howto-panel{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  font-size:12px; color:var(--text-dim); margin-bottom:16px;
}
.clerk-howto-panel ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }

/* Ease-of-Use Improvement #4: confirmation toast + recent-activity log. */
.clerk-toast{
  background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d);
  border:1px solid var(--clerk-green, #1f7a3d); border-radius:8px; padding:8px 12px;
  font-size:12.5px; font-weight:700; margin-bottom:10px;
}
.clerk-toast.err{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); border-color:var(--red-hi); }
.clerk-recent-activity{ margin-top:12px; font-size:11.5px; color:var(--text-mut); }
.clerk-recent-activity summary{ cursor:pointer; font-weight:700; }
.clerk-recent-activity ul{ margin:8px 0 0; padding-left:18px; max-height:160px; overflow-y:auto; }
.clerk-recent-activity li{ margin-bottom:4px; }
.clerk-panel{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0;
}
.clerk-roster-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 700px){
  /* Scoped to the actual scrollable Clerk Dashboard roster only —
     must NOT apply to the compact demo tables reused on the homepage
     (.tmc-hero-clerk-table, Core Capabilities shot), which caused a
     mobile horizontal-overflow bug when this rule was unscoped. */
  .clerk-roster-scroll table.clerk-roster{ min-width:640px; }
  .clerk-search-row select{ max-width:110px; }
}
.clerk-panel h3{
  font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  margin:0 0 10px; color:var(--track);
}

.clerk-search-row{ display:flex; gap:8px; margin-bottom:10px; }
.clerk-search-row input{ flex:1; padding:8px 10px; border:1px solid var(--line-2); border-radius:8px; font-size:12.5px; }
.clerk-search-row select{ padding:8px 8px; border:1px solid var(--line-2); border-radius:8px; font-size:12px; background:#fff; }
.clerk-event-card{
  border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px;
  display:flex; align-items:flex-start; gap:10px; background:#fbfcfe; cursor:pointer;
}
.clerk-event-card.active{ background:var(--track); color:#fff; border-color:var(--track); }
.clerk-event-badge{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--gold-hi); color:#221500;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px;
}
.clerk-event-card.active .clerk-event-badge{ background:#fff; color:var(--track); }
.clerk-event-body{ flex:1; min-width:0; }
.clerk-event-body .ename{ font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; }
.clerk-event-body .esub{ font-size:11px; color:var(--text-mut); margin-top:2px; }
.clerk-event-card.active .esub{ color:#c9d7ea; }
.clerk-event-row2{ display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.clerk-status-pill{
  font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
}
.clerk-status-pill.complete{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); }
.clerk-status-pill.upcoming{ background:var(--clerk-grey-bg, #eef2f7); color:var(--text-mut); }
.clerk-status-pill.active-badge, .clerk-status-pill.on_hold{ background:var(--red-hi); color:#fff; }
.clerk-status-pill.dns{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); }
.clerk-progress-frac{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); }
.clerk-event-card.active .clerk-progress-frac{ color:#fff; }

.clerk-heat-title{ color:var(--track); font-family:var(--font-display); font-size:17px; margin:0; letter-spacing:.01em; }
.clerk-heat-sub-row{ display:flex; justify-content:space-between; align-items:center; margin:6px 0 12px; flex-wrap:wrap; gap:8px; }
.clerk-heat-sub{ font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }

table.clerk-roster{ width:100%; border-collapse:collapse; font-size:12px; }
table.clerk-roster th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mut);
  padding:6px 6px; border-bottom:2px solid var(--line);
}
table.clerk-roster td{ padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.clerk-roster tr.scratched td{ background:var(--clerk-red-bg, #fbe6e8); }
/* Correction 6 (TOE Final Pilot, 2026-08-31) — Checked-In visual defect
   fix: a resolved-Checked-In row gets its OWN light-green row background
   (mirrors the existing tr.scratched red-row pattern exactly), distinct
   from — and in addition to — the .btn-checkedin button's own selected
   state, so the resolved state is visible at a glance across the whole
   row, not just on the button. Never applied to a DNS row (kept
   unambiguously red via tr.scratched/.clerk-dns-row below) or an
   unresolved row (no background override; text+icon carries the
   information in all cases, per "text and an icon — not color alone"). */
table.clerk-roster tr.checked-in-row td{ background:var(--clerk-green-bg, #e4f4ea); }
table.clerk-roster tr.clerk-dns-row td{ background:var(--clerk-red-bg, #fbe6e8); }
/* The bold "✓ CHECKED IN" badge itself — a separate element from the
   Checked In/DNS action buttons, always rendered (never relies on color
   alone: bold uppercase text + a check icon glyph). */
.clerk-checkedin-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--clerk-green, #1f7a3d); margin-top:4px;
}
.clerk-checkedin-badge::before{ content:'✓'; font-weight:900; }
/* "Immediate save confirmation" — a small inline confirmation that
   flashes next to the row's actions right after a successful save,
   distinct from (and in addition to) the existing session toast. */
.clerk-save-confirm{
  display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:var(--clerk-green, #1f7a3d);
  margin-left:6px; animation: toeClerkSaveConfirmFade 2.4s ease forwards;
}
.clerk-save-confirm::before{ content:'✓'; }
@keyframes toeClerkSaveConfirmFade{ 0%{ opacity:1; } 70%{ opacity:1; } 100%{ opacity:0; } }
.clerk-lane-num{ font-family:var(--font-mono); font-weight:800; color:var(--track); }
.clerk-bib{ font-family:var(--font-mono); color:var(--text-mut); }
.clerk-athlete-name{ font-weight:700; }
.clerk-team-name{ color:var(--text-mut); font-size:11.5px; }
.clerk-coach-pill{ font-size:10px; font-weight:800; padding:3px 7px; border-radius:999px; text-transform:uppercase; }
.clerk-coach-pill.present{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); }
.clerk-coach-pill.not_marked{ background:var(--clerk-grey-bg, #eef2f7); color:var(--text-mut); }
.clerk-coach-pill.scratched{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); }
.clerk-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.btn-checkedin{ background:var(--clerk-green); color:#fff; border:none; border-radius:6px; padding:6px 10px; font-size:10.5px; font-weight:800; cursor:pointer; }
.btn-checkedin.selected{ box-shadow:0 0 0 2px var(--clerk-green) inset; }
.btn-dns{ background:#fff; color:var(--red-hi); border:1px solid var(--red-hi); border-radius:6px; padding:6px 10px; font-size:10.5px; font-weight:800; cursor:pointer; }
.btn-dns.selected{ box-shadow:0 0 0 2px var(--red-hi) inset; }
.clerk-locked-tag{ font-size:10.5px; font-weight:800; color:var(--red-hi); display:flex; align-items:center; gap:4px; }
.btn-restore-scratch{ font-size:10px; font-weight:700; color:var(--track); background:none; border:1px solid var(--line-2); border-radius:6px; padding:4px 8px; cursor:pointer; margin-left:6px; }

.clerk-footer-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
@media (max-width: 700px){ .clerk-footer-row{ grid-template-columns:1fr 1fr; } }
.clerk-footer-card{
  border-radius:10px; padding:10px; text-align:center; font-size:11px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:56px;
  border:none; cursor:pointer;
}
/* UX Upgrade Phase 1 (2026-08-21): Meet Clerk is TOE's tablet-first,
   high-contrast surface — a Clerk works on their feet, at arm's length,
   often in bright sun. These rules raise touch-target size and contrast
   on the interactive controls a Clerk taps most (check-in/DNS toggles,
   footer action row, call buttons) without changing any color TOKEN or
   layout — same variables as the rest of the app, just applied with a
   firmer touch on this one workspace. */
.btn-checkedin, .btn-dns{ min-height:44px; min-width:44px; padding:9px 14px; font-size:12px; }
.clerk-footer-card{ min-height:60px; font-size:12px; }
.clerk-call-btn{ min-height:48px; padding:14px 8px; font-size:13px; }
/* Correction 10 responsive/accessibility sweep (2026-09-01): this rule
   previously set min-height:36px, below the 44px touch-target minimum
   this same UX Upgrade Phase 1 pass already applies to .btn-checkedin/
   .btn-dns/.clerk-call-btn above. Only the .meet-day-mode-scoped override
   at 44px (search .toe-cc.meet-day-mode .btn-restore-scratch below) met
   the bar — a plain (non-meet-day-mode) Clerk view's Restore/Reverse
   button did not. Raised to 44px here so every rendering context meets
   the bar without relying on meet-day-mode being active. */
.btn-restore-scratch{ min-height:44px; padding:6px 10px; }
@media (min-width: 701px) and (max-width: 1100px){
  /* Tablet band: the Clerk's primary device. Bump text + targets further
     without touching the desktop (>1100px) or phone (<=700px) rules
     above/below. */
  table.clerk-roster{ font-size:13px; }
  table.clerk-roster th{ font-size:11px; }
  .btn-checkedin, .btn-dns{ min-height:48px; font-size:13px; padding:10px 16px; }
  .clerk-call-btn{ min-height:52px; font-size:14px; }
  .clerk-footer-card{ min-height:64px; font-size:12.5px; }
}
.fc-info{ background:var(--bg-2); color:var(--text-dim); border:1px solid var(--line); cursor:default; }
.fc-undo{ background:#fff; color:var(--text-dim); border:1px solid var(--line-2); }
.fc-save{ background:var(--grad-red); color:#fff; }
.fc-complete{ background:var(--track); color:#fff; }
.clerk-lock-note{ font-size:11px; color:var(--text-mut); margin-top:10px; display:flex; gap:6px; align-items:center; }

/* Genspark Correction Handoff — Clerk Override of Coach Scratch (2026-08-23) */
.clerk-scratch-warning{ font-size:10.5px; font-weight:700; color:var(--red-hi); display:block; margin-bottom:4px; }
.btn-override-scratch{ font-size:10px; font-weight:800; color:#fff; background:var(--grad-red); border:none; border-radius:6px; padding:6px 10px; cursor:pointer; min-height:36px; }
.clerk-override-badge{ font-size:10px; font-weight:800; padding:3px 7px; border-radius:999px; background:#fff3cd; color:#7a5b00; border:1px solid #f0d68a; text-transform:uppercase; letter-spacing:.02em; display:inline-flex; align-items:center; gap:3px; }
.clerk-override-panel{ position:fixed; inset:0; background:rgba(20,20,30,.55); display:flex; align-items:center; justify-content:center; z-index:500; padding:16px; }
.clerk-override-panel-inner{ background:#fff; border-radius:12px; padding:20px; max-width:420px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.clerk-override-panel-inner h4{ margin:0 0 8px; color:var(--red-hi); font-size:15px; }
.clerk-override-panel-inner p{ font-size:12.5px; color:var(--text-dim); margin:0 0 12px; }
.clerk-override-panel-inner label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-mut); display:block; margin-bottom:4px; }
.clerk-override-panel-inner select, .clerk-override-panel-inner textarea{ width:100%; padding:8px; border:1px solid var(--line-2); border-radius:8px; font-size:13px; margin-bottom:10px; font-family:inherit; }

.clerk-call-select{ width:100%; padding:8px; border:1px solid var(--line-2); border-radius:8px; font-size:12px; margin-bottom:10px; }
/* Correction 6 (TOE Final Pilot, 2026-08-31) — Call Board state defect
   fix: light-theme counterpart to .md-live-call-pill (the Meet Director
   dashboard's dark-card pill) — same server-persisted current_call_stage
   value, just themed for the Clerk dashboard's light card background. */
.clerk-call-stage-pill{
  display:inline-block; background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:5px 12px; margin-bottom:10px;
}
.clerk-call-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.clerk-call-btn{ border-radius:8px; padding:12px 8px; font-weight:800; font-size:12px; text-align:center; border:none; cursor:pointer; }
.clerk-call-btn.primary{ background:var(--grad-red); color:#fff; }
.clerk-call-btn.secondary{ background:#fff; border:1px solid var(--line-2); color:var(--text-dim); }
.clerk-ann-item{ font-size:11.5px; color:var(--text-mut); padding:6px 0; border-bottom:1px solid var(--line); }
.clerk-ann-item b{ color:var(--text); }
.clerk-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.clerk-sum-box{ border:1px solid var(--line); border-radius:8px; padding:10px; text-align:center; }
.clerk-sum-num{ font-family:var(--font-display); font-size:18px; }
.clerk-sum-num.green{ color:var(--clerk-green); }
.clerk-sum-num.red{ color:var(--red-hi); }
.clerk-sum-num.grey{ color:var(--text-mut); }
.clerk-sum-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-mut); }
.clerk-notif-note{ margin-top:10px; font-size:11px; color:var(--text-mut); background:var(--bg-2); border-radius:8px; padding:8px 10px; }
.clerk-disclaimer-inline{ margin-top:14px; font-size:10.5px; color:var(--text-mut); border-top:1px dashed var(--line); padding-top:10px; }

/* Timer dashboard: simpler single-column layout, no roster/call-board —
   just the current heat's status + a start/lap-adjacent view of clerk
   check-in progress (Timer holds meet_document.upload only, never
   meet_clerking.manage/call_board.send — see permissions.ts's Phase 12
   header comment on the 'timer' assignment role's authority scope). */
.timer-heat-card{
  border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px; background:#fbfcfe;
}
.timer-heat-card.active{ border-color:var(--track); background:rgba(18,58,99,.04); }

/* Correction 6 (TOE Final Pilot, 2026-08-31) — Call Board state defect
   fix: same server-persisted current_call_stage pill the MD/Clerk/Coach
   dashboards show, themed to sit inline within a .timer-heat-card row. */
.timer-call-stage-pill{
  display:inline-block; background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); font-size:10px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:3px 9px; margin-left:6px;
}

/* Part C — Meet Results Import wizard (timerDashboard.ts #timer-resultsimport-panel).
   Scoped entirely under .timer-ri-* so it can never collide with any other
   panel's CSS. Reuses existing brand tokens only (--track/--gold/--red),
   no new colors introduced. */
.timer-ri-steps{
  display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 20px;
}
.timer-ri-step{
  font-size:12px; font-weight:700; letter-spacing:.02em; padding:6px 12px; border-radius:999px;
  background:var(--clerk-grey-bg, #eef2f7); color:var(--text-mut); border:1px solid transparent;
}
.timer-ri-step.active{ background:var(--track); color:#fff; }
.timer-ri-step.done{ background:rgba(31,122,61,.12); color:#1f7a3d; border-color:rgba(31,122,61,.3); }
.timer-ri-summary-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-bottom:8px;
}
.timer-ri-summary-cell{
  border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center; background:#fbfcfe;
}
.timer-ri-summary-cell .timer-ri-summary-num{ display:block; font-size:22px; font-weight:800; color:var(--track); }
.timer-ri-summary-cell.warn .timer-ri-summary-num{ color:var(--red-hi); }
.timer-ri-summary-cell .timer-ri-summary-label{ display:block; font-size:11px; color:var(--text-mut); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.timer-ri-match-group{ margin-bottom:16px; }
.timer-ri-match-group-title{ font-size:13px; font-weight:700; margin:0 0 6px; }
.timer-ri-row{
  display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);
  font-size:13px;
}
.timer-ri-row:last-child{ border-bottom:none; }
.timer-ri-unmatched-row{
  border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:#fbfcfe;
}
.timer-ri-unmatched-row .timer-ri-unmatched-meta{ font-size:12px; color:var(--text-mut); margin:4px 0 8px; }
.timer-ri-unmatched-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.timer-ri-unmatched-actions input[type="text"]{
  padding:6px 8px; border:1px solid var(--line-2); border-radius:6px; width:140px;
}

/* ---------------------------------------------------------------------
   Coach Dashboard layout redesign (2026-08-09) — controlled layout
   improvement only, scoped entirely under .coach-dash-page so nothing
   here can leak into or collide with any other page's CSS. Reuses TOE's
   existing brand tokens verbatim (--track for navy, --gold/--gold-lo for
   gold, --red/--red-hi for the coral/red accent) rather than introducing
   new hex values, so this page can never visually drift from the rest of
   the site. No gradients besides the site's own --grad-gold/--grad-red;
   no stock photography; card surfaces are plain var(--card) white.
   --------------------------------------------------------------------- */
.coach-dash-page{
  --clerk-green: #1f7a3d;
  --clerk-green-bg: #e4f4ea;
  --clerk-red-bg: #fbe6e8;
  --clerk-grey-bg: #eef2f7;
}
.coach-dash-page .wrap{ max-width:1280px; }

.coach-head{
  position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px;
  padding:24px 24px 20px; margin-bottom:20px; border-radius:14px;
  background:var(--card); border:1px solid var(--line);
  overflow:hidden;
}
.coach-head-close{
  position:absolute; top:16px; right:16px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  color:var(--text-mut); border:1px solid var(--line-2); background:var(--bg);
}
.coach-head-close:hover{ color:var(--gold); border-color:var(--gold-hi); }
.coach-head-main{ flex:1 1 320px; min-width:0; }
.coach-head-title{ margin:8px 0 6px; }
.coach-head-lede{ margin:0 0 14px; }
.coach-badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.coach-badge{
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line-2);
}
.coach-badge-delegated{ background:rgba(122,84,16,.1); color:var(--gold-lo); border-color:var(--gold-hi); }
.coach-badge-notfull{ background:var(--bg-2); color:var(--text-mut); }

.coach-head-selector{
  flex:0 0 auto; display:flex; flex-direction:column; gap:6px; min-width:240px;
  margin-left:auto; padding-top:6px;
}
.coach-head-selector label{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mut);
}
.coach-head-selector select{
  padding:10px 12px; border:1px solid var(--line-2); border-radius:8px; font-size:14px; background:#fff; min-height:44px;
}
.coach-head-selector select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* CSS-only "track lane" motif — a thin decorative lane-stripe band along
   the header's bottom edge, reusing the site's own existing .lane
   gradient recipe (see the top of this file) rather than a new image
   asset, so no image dependency was added for this purely visual touch. */
.coach-lane{
  position:absolute; left:0; right:0; bottom:0; height:8px;
  background:
    linear-gradient(90deg, transparent 0, transparent 4px, var(--gold-lo) 4px, var(--gold-lo) 5px, transparent 5px) 0/24px 100% repeat-x,
    linear-gradient(180deg, transparent 3px, var(--gold) 3px, var(--gold) 4px, transparent 4px, transparent 5px, var(--gold-lo) 5px, var(--gold-lo) 6px, transparent 6px);
  opacity:.55;
}
@media (prefers-reduced-motion: reduce){ .coach-lane{ opacity:.4; } }

.coach-summary-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:20px;
}
.coach-summary-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  display:flex; flex-direction:row; align-items:center; gap:12px; box-shadow:0 1px 3px rgba(17,26,44,.04);
}
.coach-summary-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.coach-summary-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mut); }
.coach-summary-value{ font-family:var(--font-display); font-size:26px; color:var(--track); text-transform:capitalize; }

/* Summary card icon badges (NEW, product-dashboard visual pass) — a small
   circular glyph beside each card's label/value, purely decorative
   (aria-hidden on the wrapping <span> in coachDashboard.ts). Colors are
   derived ONLY from existing tokens: -present/-attention reuse the exact
   same --clerk-green-bg/--clerk-red-bg + --clerk-green/--red-hi pairs the
   rest of this dashboard's status pills already use; -meet/-athletes use
   color-mix() to tint --track/--gold with white rather than introducing
   any new hex value (graceful no-op in browsers without color-mix support
   — the icon glyph itself, colored via currentColor, is unaffected). */
.coach-summary-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.coach-summary-icon-meet{ background:color-mix(in srgb, var(--track) 14%, #fff); color:var(--track); }
.coach-summary-icon-athletes{ background:color-mix(in srgb, var(--gold) 16%, #fff); color:var(--gold); }
.coach-summary-icon-present{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); }
.coach-summary-icon-attention{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); }

/* ---------------------------------------------------------------------
   Coach dashboard quick-jump side nav shell (NEW, product-dashboard
   visual pass, 2026-08-09). `.coach-shell` is a simple flex row pairing
   the new `.coach-side-nav` rail with `.coach-main` (which wraps the
   summary cards + `.coach-grid` below, both untouched by this rule set).
   Desktop/Tablet: a sticky vertical rail of plain #section-id anchor
   links (native browser jump-to-section — no JS required for the core
   behavior). Mobile (<768px, further below): the rail collapses into a
   horizontal SCROLLABLE CHIP STRIP positioned above the page content —
   deliberately NOT `position:fixed` so it never duplicates or collides
   with the site's own fixed `.bottom-nav` bar (Home/Team/Calendar/
   Messages/Profile, shown <=720px) or with Coach Ace's floating `.ace-launcher`
   bubble; it simply scrolls away with the rest of the page. Every chip
   keeps the same >=44px min-height touch target as the desktop rail.
   Colors reuse existing tokens only (--card/--line/--bg-2/--track/
   --gold) — no new hex values. --------------------------------------- */
.coach-shell{ display:flex; align-items:flex-start; gap:24px; }
.coach-main{ flex:1 1 auto; min-width:0; }
.coach-side-nav{
  flex:0 0 196px; position:sticky; top:20px;
  display:flex; flex-direction:column; gap:2px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px; align-self:flex-start;
}
.coach-nav-link{
  display:flex; align-items:center; gap:10px; min-height:44px;
  padding:8px 12px; border-radius:8px; text-decoration:none;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:var(--text-dim); border-left:3px solid transparent;
}
.coach-nav-link svg{ flex:none; }
.coach-nav-link:hover{ background:var(--bg-2); color:var(--track); }
.coach-nav-link:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.coach-nav-link.active{ background:var(--bg-2); color:var(--track); border-left-color:var(--gold); }
@media (prefers-reduced-motion: no-preference){ .coach-nav-link{ transition:background-color .15s ease, color .15s ease; } }

@media (max-width: 1199px){
  .coach-side-nav{ flex-basis:168px; padding:8px; }
  .coach-nav-link{ font-size:11.5px; padding:8px 10px; gap:8px; }
}

/* ---------------------------------------------------------------------
   Coach dashboard main grid (redesigned 2026-08-09, "look more like a
   dashboard" pass). Replaces the old two-independent-vertical-stacks
   layout (.coach-col-primary/.coach-col-secondary) with a true CSS Grid
   using named areas that PAIRS the 6 existing cards into rows — the two
   real-time/live cards (Current meet + Team meet attendance) share a
   hero row, then Roster+Team profile, then Schedule&results+Announcements
   — so Desktop and Tablet both render an actual widget grid rather than
   one card stacked directly under another. No card/id/data changed here,
   only its grid placement (see coachDashboard.ts's coach-area-* classes).
   Mobile (<767px, further below) falls back to a single column in the
   original reading order via the `order` property, same as before. All
   sizes/colors reuse existing tokens (--track/--gold/--card/--line/etc.);
   no new hex values introduced. --------------------------------------- */
.coach-grid{
  display:grid; gap:20px; align-items:start;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "current-meet  attendance"
    "roster        profile"
    "schedule      announcements";
}
.coach-area-current-meet{ grid-area: current-meet; }
.coach-area-attendance{ grid-area: attendance; }
.coach-area-roster{ grid-area: roster; }
.coach-area-profile{ grid-area: profile; }
.coach-area-schedule{ grid-area: schedule; }
.coach-area-announcements{ grid-area: announcements; }
.coach-card{ margin-bottom:0; min-width:0; }

.coach-roster-controls{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.coach-roster-controls input[type="text"]{
  flex:1 1 220px; padding:10px 12px; border:1px solid var(--line-2); border-radius:8px; font-size:13px; min-height:44px;
}
.coach-roster-controls select{
  flex:0 0 auto; padding:10px 12px; border:1px solid var(--line-2); border-radius:8px; font-size:13px; background:#fff; min-height:44px;
}
.coach-roster-controls input:focus-visible, .coach-roster-controls select:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
/* Correction 10 sub-req 1 (Universal profile navigation, TOE Final Pilot,
   2026-08-31): shared style for toeAthleteLinkHtml()'s <a class="athlete-link">
   anchors, used across every roster/membership/correction-request/results-
   import row that links an athlete's name to their Athlete Stat Card
   (/athletes/:id). Deliberately inherits color/weight from its context
   (bold inside <strong>, plain elsewhere) rather than looking like a
   generic blue hyperlink, since it's meant to read as "the athlete's
   name" first and "a link" second — an underline on hover/focus is the
   only always-visible affordance, plus a visible focus ring for keyboard
   navigation. */
.athlete-link{ color:inherit; text-decoration:none; }
.athlete-link:hover, .athlete-link:focus{ text-decoration:underline; }
.athlete-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:2px; }

.coach-roster-row{ gap:12px; }
.coach-roster-avatar{
  flex:none; width:36px; height:36px; border-radius:50%; background:var(--bg-2); color:var(--gold-lo);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12px;
  border:1px solid var(--line-2);
}

.coach-profile-body{ display:flex; gap:14px; align-items:flex-start; }
.coach-profile-avatar{
  flex:none; width:52px; height:52px; border-radius:12px; background:var(--bg-2); color:var(--gold-lo);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:16px;
  border:1px solid var(--line-2);
}
.coach-profile-info{ flex:1; min-width:0; }
.coach-profile-location{ font-size:12px; color:var(--text-mut); margin:0 0 8px; }

.coach-ann-scroll{ max-height:420px; overflow-y:auto; }

/* ---------- Tablet (768-1199px): explicitly a primary experience — keeps
   its OWN genuine 2-column dashboard grid (equal-width, same paired areas
   as desktop) instead of collapsing straight to a single stacked column;
   only the column proportions change (2fr/1fr -> 1fr/1fr) since there's
   less width to spare for the wider primary column's tables. The
   4-summary-card row drops to 2x2 at the narrower end of this range
   (<=900px, below) before it ever gets cramped. ---------- */
@media (max-width: 1199px){
  .coach-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px){
  .coach-summary-grid{ grid-template-columns:repeat(2, 1fr); }
  .coach-head-selector{ margin-left:0; width:100%; }
}

/* ---------- Mobile (<768px): 44x44 minimum touch targets, no horizontal
   overflow, header stacks single-column, close control stays reachable. ---------- */
@media (max-width: 767px){
  .coach-head{ padding:20px 16px 16px; flex-direction:column; }
  .coach-head-close{ top:12px; right:12px; width:40px; height:40px; }
  .coach-summary-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .coach-summary-card{ padding:12px 14px; }
  .coach-summary-value{ font-size:20px; }
  .coach-summary-icon{ width:32px; height:32px; }
  .coach-summary-icon svg{ width:15px; height:15px; }
  .coach-roster-controls{ flex-direction:column; }
  .coach-roster-controls input[type="text"], .coach-roster-controls select{ width:100%; }
  .coach-badge{ font-size:9.5px; padding:5px 9px; }
  /* Quick-jump side nav collapses into a horizontal scrollable chip strip
     ABOVE the content — see the .coach-shell rule block above for why
     this is deliberately not `position:fixed` (avoids duplicating/
     colliding with the site's own fixed .bottom-nav bar or Coach Ace's
     floating launcher). Each chip keeps a >=44px min-height/min-width
     touch target; the strip scrolls horizontally with a small right-edge
     fade cue instead of wrapping, so it never forces page-level
     horizontal overflow (only the strip itself scrolls, via
     overflow-x:auto + -webkit-overflow-scrolling:touch). */
  .coach-shell{ flex-direction:column; gap:12px; }
  .coach-side-nav{
    flex:none; position:static; width:100%; max-width:100%;
    flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:6px; padding:8px; scrollbar-width:thin;
  }
  .coach-nav-link{
    flex:none; min-width:44px; min-height:44px; white-space:nowrap;
    border-left:none; border-bottom:3px solid transparent; border-radius:8px;
  }
  .coach-nav-link.active{ border-left-color:transparent; border-bottom-color:var(--gold); }
  /* Single-column fallback, same reading order as the pre-redesign
     stacked layout (Current meet, Roster, Schedule&results, Attendance,
     Team profile, Announcements) — the paired desktop/tablet grid areas
     don't apply below 768px. grid-area is reset to auto (rather than
     relying on an undefined named area falling back safely) so every
     card auto-places into its own row, ordered purely by `order`. */
  .coach-grid{ grid-template-columns:1fr; grid-template-areas:none; }
  .coach-area-current-meet, .coach-area-roster, .coach-area-schedule,
  .coach-area-attendance, .coach-area-profile, .coach-area-announcements{ grid-area:auto; }
  .coach-area-current-meet{ order:1; }
  .coach-area-roster{ order:2; }
  .coach-area-schedule{ order:3; }
  .coach-area-attendance{ order:4; }
  .coach-area-profile{ order:5; }
  .coach-area-announcements{ order:6; }
}

@media (prefers-reduced-motion: reduce){
  .coach-head-close, .coach-summary-card{ transition:none; }
}

.coach-summary-value-text{ font-size:16px; text-transform:none; }
.coach-summary-value-green{ color:var(--clerk-green, #1f7a3d); }
.coach-summary-value-red{ color:var(--red-hi); }
/* Phase 7 (Visual Hierarchy, 2026-08-21): "Needs attention" is only
   genuinely alarming when the count is >0. A count of 0 is good news and
   must not be shown in the same red used for a real problem — that reads
   as a false alarm to a first-time athlete. JS (renderSummary in app.js)
   toggles `.is-clear` on both the value and its icon badge when the count
   is exactly 0; no color tokens are introduced beyond the existing
   --clerk-green/-green-bg pair already used by the "Present" card above. */
.coach-summary-value-red.is-clear{ color:var(--clerk-green, #1f7a3d); }
.coach-summary-icon-attention.is-clear{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); }

/* ---------------------------------------------------------------------
   Current Meet + Team Meet Attendance (Option-1 pass, 2026-08-09) — the
   two new coach-facing, ownership-scoped cards. Reuses the SAME clerk-*
   status-color tokens defined above (--clerk-green/-green-bg/-red-bg/
   -grey-bg) rather than inventing new ones, and the site's own .btn/
   .btn-gold for the Save button, so this stays visually identical in kind
   to the rest of TOE's admin surfaces (no gradients besides --grad-gold,
   no stock imagery).
   --------------------------------------------------------------------- */
.coach-card-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.coach-card-head-row .admin-panel-title{ margin:0; }

.coach-live-pill{
  display:inline-flex; align-items:center; gap:5px; background:var(--red-hi); color:#fff;
  font-family:var(--font-mono); font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
@media (prefers-reduced-motion: no-preference){
  .coach-live-pill{ animation:coach-live-pulse 2.2s ease-in-out infinite; }
}
@keyframes coach-live-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.65; } }

.coach-cm-identity{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:10px 0 6px; }
.coach-cm-name{ font-family:var(--font-display); font-size:18px; color:var(--track); }
.coach-cm-venue{ font-size:12.5px; color:var(--text-mut); }

.coach-now-clerking-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--clerk-red-bg, #fbe6e8); border:1px solid var(--red-lo); border-radius:10px;
  padding:10px 14px; margin:12px 0; font-size:13px; color:var(--text);
}
.coach-now-clerking-tag{
  font-family:var(--font-mono); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--red-hi); padding:4px 9px; border-radius:6px; flex:none;
}
.coach-up-next-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; margin:0 0 14px; font-size:12.5px; color:var(--text-dim);
}
.coach-up-next-tag{
  font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-mut); flex:none;
}

/* Correction 6 (TOE Final Pilot, 2026-08-31) — Call Board state defect
   fix: light-theme pill matching the Clerk dashboard's own
   .clerk-call-stage-pill (and the MD dashboard's dark-card
   .md-live-call-pill) — same server-persisted current_call_stage value,
   just themed for the Coach dashboard's light card background. */
.coach-call-stage-pill{
  display:inline-block; background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:5px 12px; margin:0 0 10px;
}

/* TOE Live Retest Findings — Section 3 (Coach "Current Meet" Workflow,
   2026-08-23). Two new elements on the Current Meet card:
   1) .coach-cm-meet-picker — only shown (JS toggles display) when a coach
      has more than one accessible meet for the selected team, satisfying
      requirement #5 ("clear meet selector"). Styled as a plain label+select
      row, matching the site's existing .coach-head-selector proportions
      rather than inventing a new control style.
   2) .coach-call-board* — read-only echo of the meet's Call Board
      announcements (reuses GET /api/meets/:meetId/call-board, no new
      backend). Styled as a simple stacked list, reusing the same
      --bg-2/--line/--text-mut tokens as .coach-up-next-row above so it
      reads as "part of the same card" rather than a new visual language. */
.coach-cm-meet-picker{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:8px 0 4px; font-size:12.5px; color:var(--text-dim);
}
.coach-cm-meet-picker label{ font-weight:700; color:var(--text-mut); }
.coach-cm-meet-picker select{
  font:inherit; font-size:12.5px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg-1, #fff); color:var(--text);
  max-width:100%;
}

.coach-call-board{
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; margin:0 0 14px;
}
.coach-call-board-title{
  margin:0 0 8px; font-family:var(--font-display); font-size:13px; color:var(--track);
}
.coach-call-board-list{ display:flex; flex-direction:column; gap:8px; }
.coach-call-board-item{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text); padding:6px 0;
  border-bottom:1px solid var(--line);
}
.coach-call-board-item:last-child{ border-bottom:none; padding-bottom:0; }
.coach-call-board-type{
  font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--track, #274b6d);
  padding:3px 8px; border-radius:6px; flex:none;
}
.coach-call-board-msg{ flex:1 1 200px; min-width:0; }
.coach-call-board-time{ font-size:11px; color:var(--text-mut); flex:none; }

/* position:relative establishes this wrapper as the CSS containing block for any
   position:absolute descendant (e.g. the .sr-only accessibility spans rendered inside
   the attendance table's Save-status cells). Without it, such descendants' containing
   block resolves to <html>, so their static-position offset (computed from the table's
   full unclipped width) escapes this wrapper's overflow-x:auto clipping and inflates
   document.documentElement.scrollWidth even though they are visually invisible. */
.coach-table-scroll{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.coach-attendance-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.coach-attendance-table th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mut);
  padding:6px 8px; border-bottom:2px solid var(--line); white-space:nowrap;
}
table.coach-attendance-table td{ padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.coach-attendance-table tr.coach-row-scratched td{ background:var(--clerk-red-bg, #fbe6e8); }
/* Correction 6 (TOE Final Pilot, 2026-08-31) — Checked-In visual defect
   fix: same light-green resolved-row treatment as the Clerk Dashboard's
   tr.checked-in-row, synced onto the Coach Dashboard's own attendance
   table so a Coach sees the identical visual state for an athlete the
   Clerk has checked in. */
table.coach-attendance-table tr.coach-row-checked-in td, .md-live-roster-table tr.coach-row-checked-in td{ background:var(--clerk-green-bg, #e4f4ea); }
.coach-athlete-name{ font-weight:700; color:var(--text); }
.coach-athlete-name.coach-athlete-name-alert{ color:var(--red-hi); }

.coach-status-dot{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; }
.coach-status-dot::before{ content:''; width:7px; height:7px; border-radius:50%; flex:none; }
.coach-status-dot.present::before{ background:var(--clerk-green, #1f7a3d); }
.coach-status-dot.present{ color:var(--clerk-green, #1f7a3d); }
.coach-status-dot.scratched::before{ background:var(--red-hi); }
.coach-status-dot.scratched{ color:var(--red-hi); }
.coach-status-dot.not_marked::before{ background:var(--text-mut); }
.coach-status-dot.not_marked{ color:var(--text-mut); }

.coach-clerk-pill{
  display:inline-flex; align-items:center; font-size:10px; font-weight:800; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; text-transform:uppercase;
}
.coach-clerk-pill.checked_in{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); }
.coach-clerk-pill.dns, .coach-clerk-pill.discrepancy_hold{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); }
.coach-clerk-pill.unresolved{ background:#fff7e6; color:#8a5a07; }

.coach-lock-note{ font-size:11px; color:var(--text-mut); margin-top:10px; display:flex; gap:6px; align-items:center; }

/* Genspark Correction Handoff — Clerk Override of Coach Scratch (2026-08-23) */
.coach-effective-pill{
  display:inline-flex; align-items:center; font-size:10px; font-weight:800; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; text-transform:uppercase;
}
.coach-effective-pill.checked_in, .coach-effective-pill.present_clerk_override{ background:var(--clerk-green-bg, #e4f4ea); color:var(--clerk-green, #1f7a3d); }
.coach-effective-pill.dns, .coach-effective-pill.discrepancy_hold, .coach-effective-pill.coach_scratched{ background:var(--clerk-red-bg, #fbe6e8); color:var(--red-hi); }
.coach-effective-pill.unresolved{ background:#fff7e6; color:#8a5a07; }
/* Correction 6 (TOE Final Pilot, 2026-08-31) — Checked-In visual defect
   fix: "text and an icon — not color alone" — every checked-in-equivalent
   pill (Coach's own .coach-effective-pill AND, since MD's
   .md-live-roster-table reuses this exact same class, the Meet Director's
   Live Roster too) gets a leading check icon glyph, matching the Clerk
   Dashboard's own .clerk-checkedin-badge::before treatment. */
.coach-effective-pill.checked_in::before, .coach-effective-pill.present_clerk_override::before{ content:'✓ '; }
.coach-override-note{ font-size:10.5px; color:var(--text-mut); display:block; margin-top:2px; }

/* --- Team Meet Attendance card --- */
.coach-progress-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.coach-progress-label{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--text-dim); white-space:nowrap; }
.coach-progress-bar{ flex:1; height:8px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.coach-progress-fill{ height:100%; background:var(--clerk-green, #1f7a3d); border-radius:999px; transition:width .3s ease; }
@media (prefers-reduced-motion: reduce){ .coach-progress-fill{ transition:none; } }

/* Headline percentage treatment (NEW, product-dashboard visual pass) —
   turns the existing "X of Y present" label + bar into a bold "X of Y
   Present · Z%" call-out, matching the approved reference mock. The SAME
   .coach-progress-row/-bar/-fill above are reused unchanged; this only
   adds the wrap behavior (label+% on one line, bar filling the full
   width on the next) and the bold %, via color-mix()'d --clerk-green so
   no new hex value is introduced. */
.coach-progress-row-headline{ flex-wrap:wrap; gap:6px 12px; }
.coach-progress-label-headline{ font-size:13px; }
.coach-progress-pct{
  font-family:var(--font-display); font-size:24px; line-height:1;
  color:var(--clerk-green, #1f7a3d); margin-left:auto;
}
.coach-progress-row-headline .coach-progress-bar{ flex-basis:100%; height:10px; }
@media (max-width: 767px){
  .coach-progress-pct{ margin-left:0; font-size:20px; }
}

.coach-att-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.coach-att-btn{
  border-radius:6px; padding:7px 11px; font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  cursor:pointer; min-height:32px; border:1px solid var(--line-2); background:#fff; color:var(--text-dim);
}
.coach-att-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.coach-att-btn.present.active{ background:var(--clerk-green, #1f7a3d); border-color:var(--clerk-green, #1f7a3d); color:#fff; }
.coach-att-btn.scratched.active{ background:var(--red-hi); border-color:var(--red-hi); color:#fff; }
.coach-att-btn.not_marked.active{ background:var(--text-mut); border-color:var(--text-mut); color:#fff; }
.coach-att-btn[disabled]{ opacity:.5; cursor:not-allowed; }

.coach-att-save-btn{ width:100%; margin-top:16px; }
.coach-att-save-note{ font-size:11px; color:var(--text-mut); margin-top:8px; text-align:center; }

/* Genspark Correction 7 (2026-08-28): per-athlete save-status indicator —
   Saving…/Saved/No change/Failed — Retry, shown in the row's own "Save
   status" cell so a coach never has to guess whether a click reached the
   server. Colors deliberately reuse existing tokens (no new palette). */
.coach-att-save-status{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; white-space:nowrap; }
.coach-att-save-status::before{ content:''; width:7px; height:7px; border-radius:50%; flex:none; }
.coach-att-save-status.saving{ color:var(--text-mut); }
.coach-att-save-status.saving::before{ background:var(--text-mut); animation:coach-att-save-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .coach-att-save-status.saving::before{ animation:none; } }
@keyframes coach-att-save-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.coach-att-save-status.saved{ color:var(--clerk-green, #1f7a3d); }
.coach-att-save-status.saved::before{ background:var(--clerk-green, #1f7a3d); }
.coach-att-save-status.nochange{ color:var(--text-mut); }
.coach-att-save-status.nochange::before{ background:var(--text-mut); }
.coach-att-save-status.failed{ color:var(--red-hi); }
.coach-att-save-status.failed::before{ background:var(--red-hi); }
.coach-att-save-status-retry{
  border:none; background:none; padding:0; margin-left:2px; font-size:11px; font-weight:800;
  color:var(--red-hi); text-decoration:underline; cursor:pointer;
}
.coach-att-save-status-retry:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

@media (max-width: 767px){
  table.coach-attendance-table{ min-width:560px; }
  .coach-progress-row{ flex-direction:column; align-items:stretch; gap:6px; }
}

@media (prefers-reduced-motion: reduce){
  .coach-live-pill{ animation:none; }
}

/* =========================================================================
   Meet Director Command Center (dashboard visual redesign, 2026-08-10).
   Page-scoped tokens/rules only — everything below lives under `.md-cc`,
   this page's own shell. Deliberately does NOT touch or redefine the
   site-wide :root tokens (--track/--gold/etc., WCAG-AA-audited in the
   Phase 10 pass) — every other dashboard keeps its existing appearance.
   Palette matches the approved reference mockup ("MEET DIRECTOR COMMAND
   CENTER") as closely as technically possible while still clearing WCAG
   2.1 AA contrast against this page's own backgrounds (verified below).
   ========================================================================= */
.md-cc{
  --mdcc-navy:      #0B2345;
  --mdcc-navy-2:    #061D3D;
  --mdcc-navy-3:    #081730;
  --mdcc-gold:      #B78616;
  --mdcc-gold-hi:   #E8A900;
  --mdcc-red:       #EF3340;
  --mdcc-green:     #16A34A;
  --mdcc-blue:      #0B63C5;
  --mdcc-bg:        #F7F9FC;
  --mdcc-text:      #16233B;
  --mdcc-text-mut:  #435775;
  --mdcc-line:      #DCE4EF;
  --mdcc-card:      #ffffff;
  background:var(--mdcc-bg);
  color:var(--mdcc-text);
  font-family:var(--font-body);
  border-radius:16px;
  overflow:hidden;
  margin:0 calc(var(--pad-x) * -1);
}
@media (max-width: 1199px){
  .md-cc{ margin:0; border-radius:12px; }
}
.md-cc *{ box-sizing:border-box; }
.md-cc .admin-panel{ background:var(--mdcc-card); border:1px solid var(--mdcc-line); border-radius:12px; padding:18px 20px; }
.md-cc .admin-panel-title{ font-family:var(--font-display); font-size:15px; letter-spacing:.02em; color:var(--mdcc-text); }
.md-cc .admin-panel-sub{ color:var(--mdcc-text-mut); }
.md-cc .admin-empty{ color:var(--mdcc-text-mut); }
.md-cc .form-error{ color:var(--mdcc-red); }

.md-shell{ display:flex; align-items:stretch; min-height:640px; }

/* ---- Sidebar ---- */
.md-sidebar{
  flex:none; width:210px; background:var(--mdcc-navy); color:#cbd8ee;
  display:flex; flex-direction:column; padding:18px 12px;
}
.md-sidebar-brand{ padding:6px 8px 18px; }
.md-sidebar-logo{ height:34px; width:auto; display:block; filter:brightness(1.15); }
.md-nav-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:#aebeda; text-decoration:none; font-size:13px; font-weight:600; margin-bottom:2px;
  border-left:3px solid transparent; cursor:pointer;
}
.md-nav-link svg{ flex:none; }
.md-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.md-nav-link:focus-visible{ outline:2px solid var(--mdcc-gold-hi); outline-offset:1px; }
.md-nav-link.active{ background:rgba(232,169,0,.14); color:#fff; border-left-color:var(--mdcc-gold-hi); }
.md-nav-disabled{ opacity:.5; cursor:not-allowed; position:relative; }
.md-nav-disabled:hover{ background:none; color:#aebeda; }
.md-nav-soon{
  margin-left:auto; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.1); color:#cbd8ee; border-radius:999px; padding:2px 6px;
}
.md-sidebar-foot{
  margin-top:auto; padding:14px 10px 4px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:6px; font-size:11px; color:#93a5c4;
}
.md-sidebar-conn{ display:flex; align-items:center; gap:6px; font-weight:700; }
.md-dot{ width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
.md-dot-green{ background:var(--mdcc-green); }
.md-dot-red{ background:var(--mdcc-red); }
.md-dot-grey{ background:#93a5c4; }

.md-main{ flex:1 1 auto; min-width:0; padding:20px 22px 32px; }

/* ---- Header ---- */
.md-cc-head{ margin-bottom:18px; }
.md-cc-head-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.md-cc-head-dot{ width:9px; height:9px; border-radius:50%; background:var(--mdcc-red); flex:none; }
@media (prefers-reduced-motion: no-preference){
  .md-cc-head-dot{ animation:md-pulse 2s ease-in-out infinite; }
}
@keyframes md-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.md-cc-head-shield{ color:var(--mdcc-navy); flex:none; }
.md-cc-head-title{ font-family:var(--font-display); font-size:clamp(18px,2vw,24px); letter-spacing:.01em; margin:0; color:var(--mdcc-navy); }
.md-cc-live-badge{
  background:var(--mdcc-red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em;
  border-radius:999px; padding:4px 10px; margin-left:auto;
}
.md-cc-head-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:8px; }
.md-cc-head-meta{ font-size:13px; color:var(--mdcc-text-mut); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.md-cc-head-meta-sep{ opacity:.5; }
.md-cc-head-status{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--mdcc-text-mut); flex-wrap:wrap; }
.md-cc-sync-pill{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--mdcc-green); }
.md-cc-head-actions{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.md-cc-meet-selector select{ padding:8px 10px; border-radius:8px; border:1px solid var(--mdcc-line); font-size:13px; min-height:38px; }
.md-cc-btn-announce{ background:var(--mdcc-gold-hi); border-color:var(--mdcc-gold-hi); color:#1a1200; }
.md-cc-btn-emergency{ border-color:var(--mdcc-red); color:var(--mdcc-red); }
.md-cc-btn-emergency:hover{ background:var(--mdcc-red); color:#fff; }

/* ---- 6 summary cards ---- */
.md-summary-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-bottom:18px; }
.md-summary-card{
  background:var(--mdcc-card); border:1px solid var(--mdcc-line); border-radius:12px; padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.md-summary-icon{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.md-summary-icon-navy{ background:color-mix(in srgb, var(--mdcc-navy) 12%, #fff); color:var(--mdcc-navy); }
.md-summary-icon-green{ background:color-mix(in srgb, var(--mdcc-green) 14%, #fff); color:var(--mdcc-green); }
.md-summary-icon-blue{ background:color-mix(in srgb, var(--mdcc-blue) 14%, #fff); color:var(--mdcc-blue); }
.md-summary-icon-red{ background:color-mix(in srgb, var(--mdcc-red) 12%, #fff); color:var(--mdcc-red); }
.md-summary-icon-gold{ background:color-mix(in srgb, var(--mdcc-gold-hi) 18%, #fff); color:var(--mdcc-gold); }
.md-summary-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--mdcc-text-mut); }
.md-summary-value{ font-family:var(--font-display); font-size:26px; line-height:1.1; color:var(--mdcc-navy); }
.md-summary-value-green{ color:var(--mdcc-green); }
.md-summary-value-blue{ color:var(--mdcc-blue); }
.md-summary-value-red{ color:var(--mdcc-red); }
/* Phase 7 (Visual Hierarchy, 2026-08-21): a "Scratched" count of 0 is good
   news, not a warning — shown in the same calm green as "Present" via the
   `.is-clear` modifier JS toggles onto both the value and its icon badge
   (see md-cc-summary population in app.js). Reuses only the existing
   --mdcc-green / --mdcc-green-text tokens already used by "Present" above. */
.md-summary-value-red.is-clear{ color:var(--mdcc-green); }
.md-summary-icon-red.is-clear{ background:color-mix(in srgb, var(--mdcc-green) 14%, #fff); color:var(--mdcc-green); }
.md-summary-sub{ font-size:11px; color:var(--mdcc-text-mut); }
.md-summary-progress{ height:6px; border-radius:999px; background:var(--mdcc-line); overflow:hidden; margin-top:4px; }
.md-summary-progress-fill{ height:100%; background:var(--mdcc-green); border-radius:999px; transition:width .3s ease; }
@media (prefers-reduced-motion: reduce){ .md-summary-progress-fill{ transition:none; } }

/* ---- Main 12-col grid ---- */
.md-cc-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:18px; align-items:start; }
.md-cc-col-left, .md-cc-col-right{ display:flex; flex-direction:column; gap:18px; min-width:0; }

/* ---- Live Meet Control hero card ---- */
.md-live-card{
  background:var(--mdcc-navy-3); color:#e7edf8; border-radius:12px; padding:18px 20px 20px; position:relative;
}
.md-live-banner{
  display:inline-block; background:var(--mdcc-gold-hi); color:#1a1200; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; border-radius:6px; padding:4px 10px; margin-bottom:12px;
}
.md-live-empty{ color:#9fb0cc; font-size:13px; padding:12px 0; }
.md-live-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.md-live-event-name{ font-family:var(--font-display); font-size:clamp(18px,2.2vw,24px); color:#fff; }
.md-live-heat-sub{ font-size:12.5px; color:#9fb0cc; margin-top:2px; }
.md-live-call-pill{
  background:var(--mdcc-gold-hi); color:#1a1200; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  border-radius:999px; padding:5px 12px; flex:none;
}
.md-live-meta-row{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:#9fb0cc; margin:10px 0 16px; }
.md-live-actions{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px; }
.md-live-btn{
  border-radius:8px; padding:11px 10px; font-size:12.5px; font-weight:700; cursor:pointer; min-height:44px;
  text-align:center;
}
.md-live-btn-outline{ background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; }
.md-live-btn-outline:hover{ border-color:var(--mdcc-gold-hi); color:var(--mdcc-gold-hi); }
.md-live-btn-solid{ background:var(--mdcc-gold-hi); border:1px solid var(--mdcc-gold-hi); color:#1a1200; grid-column: span 1; }
.md-live-btn-solid:hover{ filter:brightness(1.05); }
.md-live-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.md-live-complete-btn{
  width:100%; background:var(--mdcc-green); border:none; color:#fff; border-radius:8px; padding:13px; font-size:13px;
  font-weight:800; cursor:pointer; min-height:44px;
}
.md-live-complete-btn:hover{ filter:brightness(1.06); }
.md-live-complete-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.md-live-note{ font-size:11.5px; color:#9fb0cc; margin:10px 0 0; }

/* ---- Genspark Correction Handoff — Clerk Override of Coach Scratch (2026-08-23):
   current-heat roster mini-table inside the Live Meet Control card, plus the
   summary card's override sub-note. Reuses .coach-effective-pill / .clerk-override-badge
   color language already established on the Coach/Clerk dashboards. ---- */
.md-sum-override-note{ color:var(--mdcc-gold-hi, #e0b23c); }
.md-live-roster-wrap{ margin:4px 0 16px; }
.md-live-roster-head{ font-size:11.5px; font-weight:700; color:#9fb0cc; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.md-live-roster-table{ width:100%; border-collapse:collapse; font-size:12px; color:#e7edf7; }
.md-live-roster-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#9fb0cc; padding:4px 8px; border-bottom:1px solid rgba(255,255,255,.12); }
.md-live-roster-table td{ padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:middle; }
.md-live-roster-table .coach-effective-pill{ font-size:10.5px; }
.md-live-roster-reverse-btn{
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:6px;
  padding:4px 8px; font-size:10.5px; font-weight:700; cursor:pointer;
}
.md-live-roster-reverse-btn:hover{ border-color:var(--mdcc-gold-hi); color:var(--mdcc-gold-hi); }

/* ---- Next Event ---- */
.md-next-name{ font-family:var(--font-display); font-size:16px; color:var(--mdcc-navy); }
.md-next-sub{ font-size:12.5px; color:var(--mdcc-text-mut); margin-top:2px; }

/* ---- Order of Events table ---- */
.md-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.md-ooe-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.md-ooe-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--mdcc-text-mut);
  padding:8px 8px; border-bottom:1px solid var(--mdcc-line);
}
table.md-ooe-table td{ padding:10px 8px; border-bottom:1px solid var(--mdcc-line); vertical-align:middle; }
table.md-ooe-table tr.md-ooe-current td{ background:color-mix(in srgb, var(--mdcc-blue) 8%, #fff); }
.md-ooe-status-pill{ display:inline-block; border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:800; letter-spacing:.02em; }
.md-ooe-status-pill.complete{ background:color-mix(in srgb, var(--mdcc-green) 14%, #fff); color:var(--mdcc-green); }
.md-ooe-status-pill.clerking{ background:color-mix(in srgb, var(--mdcc-blue) 14%, #fff); color:var(--mdcc-blue); }
.md-ooe-status-pill.upcoming{ background:var(--mdcc-line); color:var(--mdcc-text-mut); }
.md-ooe-status-pill.delayed{ background:color-mix(in srgb, var(--mdcc-red) 12%, #fff); color:var(--mdcc-red); }

/* ---- Attention Required ---- */
.md-attn-card{ border-color:color-mix(in srgb, var(--mdcc-red) 35%, var(--mdcc-line)) !important; }
.md-attn-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.md-attn-head .admin-panel-title{ margin:0; }
.md-attn-count{
  background:var(--mdcc-red); color:#fff; font-size:12px; font-weight:800; border-radius:999px;
  min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}
.md-attn-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--mdcc-line); }
.md-attn-row:last-child{ border-bottom:none; }
.md-attn-row-text{ font-size:12.5px; color:var(--mdcc-text); }
.md-attn-row-sev{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.md-attn-row-sev.high{ color:var(--mdcc-red); }
.md-attn-row-sev.medium{ color:var(--mdcc-gold); }
.md-attn-view-btn{
  flex:none; font-size:11px; font-weight:700; color:var(--mdcc-navy); background:none; border:1px solid var(--mdcc-line);
  border-radius:6px; padding:5px 10px; cursor:pointer; min-height:32px;
}
.md-attn-view-btn:hover{ border-color:var(--mdcc-gold-hi); color:var(--mdcc-gold); }
.md-attn-empty-ok{ color:var(--mdcc-green); font-size:12.5px; font-weight:700; }

/* ---- Call Board ---- */
.md-cb-field{ margin-bottom:10px; }
.md-cb-field label{ display:block; font-size:11px; font-weight:700; color:var(--mdcc-text-mut); margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em; }
.md-cb-field select, .md-cb-field textarea{
  width:100%; border:1px solid var(--mdcc-line); border-radius:8px; padding:8px 10px; font-size:12.5px; font-family:var(--font-body);
}
.md-cb-field textarea{ resize:vertical; min-height:64px; }
.md-cb-send-btn{
  width:100%; background:var(--mdcc-gold-hi); color:#1a1200; border:none; border-radius:8px; padding:11px; font-size:13px;
  font-weight:800; cursor:pointer; min-height:44px;
}
.md-cb-send-btn:hover{ filter:brightness(1.05); }
.md-cb-send-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.md-cb-confirm{ margin-top:10px; font-size:12px; background:var(--mdcc-bg); border:1px solid var(--mdcc-line); border-radius:8px; padding:10px; }
.md-cb-confirm-actions{ display:flex; gap:8px; margin-top:8px; }
.md-cb-confirm-actions button{ flex:1; border-radius:6px; padding:8px; font-size:12px; font-weight:700; cursor:pointer; min-height:36px; }
.md-cb-confirm-send{ background:var(--mdcc-green); color:#fff; border:none; }
.md-cb-confirm-cancel{ background:none; border:1px solid var(--mdcc-line); color:var(--mdcc-text-mut); }
.md-cb-recent{ margin-top:12px; font-size:11.5px; color:var(--mdcc-text-mut); max-height:120px; overflow-y:auto; }
.md-cb-recent-item{ padding:6px 0; border-top:1px solid var(--mdcc-line); }
.md-cb-recent-item:first-child{ border-top:none; }

/* ---- Meet Staff ---- */
.md-staff-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.md-staff-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:10px 6px; border-radius:10px; background:var(--mdcc-bg); }
.md-staff-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--mdcc-navy); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-size:14px; position:relative; flex:none; margin:0;
}
/* Correction 10 sub-req 2: wrapper for toeUserAvatarHtml()'s .md-staff-avatar
   span so the "Assigned" green dot stays correctly anchored regardless of
   whether that helper renders a photo <img> or an initials-only span. */
.md-staff-avatar-wrap{ position:relative; display:inline-flex; }
.md-staff-avatar-wrap .md-dot{ position:absolute; bottom:0; right:0; border:2px solid var(--mdcc-bg); }
.md-staff-name{ font-size:11.5px; font-weight:700; color:var(--mdcc-text); line-height:1.2; }
.md-staff-role{ font-size:10px; color:var(--mdcc-text-mut); }

/* ---- Recent Meet Activity ---- */
.md-activity-scroll{ max-height:280px; overflow-y:auto; }
.md-activity-row{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--mdcc-line); font-size:12.5px; }
.md-activity-row:last-child{ border-bottom:none; }
.md-activity-time{ flex:none; width:78px; color:var(--mdcc-text-mut); font-size:11px; font-family:var(--font-mono); }
.md-activity-text{ color:var(--mdcc-text); }
.md-activity-actor{ color:var(--mdcc-text-mut); font-size:11px; }

/* ---- Relocated "More tools" section ---- */
.md-more-section{ margin-top:22px; }
.md-more-summary{
  cursor:pointer; font-family:var(--font-display); font-size:14px; letter-spacing:.02em; color:var(--text-dim);
  padding:12px 4px; list-style:none;
}
.md-more-summary::-webkit-details-marker{ display:none; }
.md-more-summary::before{ content:'▸ '; color:var(--gold); }
.md-more-section[open] .md-more-summary::before{ content:'▾ '; }
.md-more-body{ display:flex; flex-direction:column; gap:16px; margin-top:10px; }

/* ---- Responsive: Tablet (768–1199px) ---- */
@media (min-width: 768px) and (max-width: 1199px){
  .md-summary-grid{ grid-template-columns:repeat(3, 1fr); }
  .md-cc-grid{ grid-template-columns: 1fr; }
  .md-sidebar{ width:64px; padding:14px 6px; }
  .md-sidebar-brand{ display:flex; justify-content:center; padding:4px 0 14px; }
  .md-sidebar-logo{ height:26px; }
  .md-nav-link span, .md-nav-soon, .md-sidebar-foot span.md-sidebar-version{ display:none; }
  .md-nav-link{ justify-content:center; padding:12px 6px; }
  .md-sidebar-foot{ align-items:center; }
  .md-live-actions{ grid-template-columns:repeat(2, 1fr); }
}

/* ---- Responsive: Mobile (<768px) ---- */
@media (max-width: 767px){
  .md-shell{ flex-direction:column; min-height:0; }
  .md-sidebar{
    width:100%; flex-direction:row; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:10px 10px; gap:2px;
  }
  .md-sidebar-brand{ display:none; }
  .md-nav-link{ flex:none; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; padding:8px 10px; min-height:44px; }
  .md-nav-link.active{ border-left-color:transparent; border-bottom-color:var(--mdcc-gold-hi); }
  .md-sidebar-foot{ display:none; }
  .md-main{ padding:16px 14px 26px; }
  .md-cc-head-title{ font-size:16px; }
  .md-cc-live-badge{ margin-left:0; }
  .md-cc-head-actions{ flex-direction:column; align-items:stretch; }
  .md-cc-head-actions .btn{ width:100%; justify-content:center; min-height:44px; }
  .md-summary-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .md-summary-card{ padding:11px 12px; }
  .md-summary-value{ font-size:21px; }
  .md-cc-grid{ grid-template-columns:1fr; gap:14px; }
  .md-live-actions{ grid-template-columns:repeat(2, 1fr); }
  .md-live-btn, .md-live-complete-btn, .md-cb-send-btn, .md-attn-view-btn{ min-height:44px; }
  table.md-ooe-table{ min-width:520px; }
  .md-staff-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  .md-cc-head-dot{ animation:none; }
  .md-summary-progress-fill{ transition:none; }
}

/* ---- AA text-contrast fixes (small/normal text on white or --mdcc-bg only;
   icons, badges, and white-on-color buttons above are unaffected — those
   already clear 3:1 non-text / 4.5:1 white-on-solid thresholds). Verified via
   WCAG relative-luminance contrast-ratio formula: green/red/gold text on
   white originally measured 3.30:1 / 4.02:1 / 3.26:1 (all below the 4.5:1
   AA text threshold) — these darker text-only shades clear >=4.4:1 while
   keeping the same hue family as the brand tokens above. ---- */
.md-cc{ --mdcc-green-text:#0D7A3A; --mdcc-red-text:#B71C2A; --mdcc-gold-text:#7A5A0E; }
.md-summary-value-green{ color:var(--mdcc-green-text); }
.md-summary-value-red{ color:var(--mdcc-red-text); }
/* Phase 7 (Visual Hierarchy): re-assert the "0 = good news, show green"
   override at this later AA-contrast cascade point too, so it wins over
   the plain .md-summary-value-red rule above regardless of source order. */
.md-summary-value-red.is-clear{ color:var(--mdcc-green-text); }
.md-summary-icon-red.is-clear{ background:color-mix(in srgb, var(--mdcc-green) 14%, #fff); color:var(--mdcc-green-text); }
.md-ooe-status-pill.complete{ color:var(--mdcc-green-text); }
.md-ooe-status-pill.delayed{ color:var(--mdcc-red-text); }
.md-attn-row-sev.high{ color:var(--mdcc-red-text); }
.md-attn-row-sev.medium{ color:var(--mdcc-gold-text); }
.md-attn-empty-ok{ color:var(--mdcc-green-text); }
.md-cc-sync-pill{ color:var(--mdcc-green-text); }

/* =========================================================================
   Shared "Command Center" dashboard shell (2026-08-10) — generalized from
   the Meet Director Command Center's `.md-cc` page-scoped tokens/structure
   (above) into a REUSABLE set of classes so every other admin dashboard
   (Meet Clerk/Timer/Timing Partner/Club/League/Household) can adopt the
   SAME navy-sidebar/gold-accent visual language ("match the look" per the
   approved Meet Director redesign) without duplicating hundreds of lines
   of CSS per page, and without touching `.md-cc` itself (already shipped,
   unchanged). Exactly like `.md-cc`, every rule below lives ONLY under the
   `.toe-cc` page-scoped ancestor class — it never redefines the site-wide
   `:root` tokens, so any dashboard that does NOT opt into `.toe-cc` keeps
   its current, already-audited appearance untouched. Same WCAG 2.1 AA
   contrast-fixed text-color tokens as `.md-cc` (verified via the same
   relative-luminance formula — the fixes are palette-level, not per-page,
   so they apply identically here).
   ========================================================================= */
.toe-cc{
  --tcc-navy:      #0B2345;
  --tcc-navy-2:    #061D3D;
  --tcc-navy-3:    #081730;
  --tcc-gold:      #B78616;
  --tcc-gold-hi:   #E8A900;
  --tcc-red:       #EF3340;
  --tcc-green:     #16A34A;
  --tcc-blue:      #0B63C5;
  --tcc-bg:        #F7F9FC;
  --tcc-text:      #16233B;
  --tcc-text-mut:  #435775;
  --tcc-line:      #DCE4EF;
  --tcc-card:      #ffffff;
  /* AA text-contrast-fixed variants (same derivation as .md-cc's fix) */
  --tcc-green-text:#0D7A3A;
  --tcc-red-text:  #B71C2A;
  --tcc-gold-text: #7A5A0E;
  background:var(--tcc-bg);
  color:var(--tcc-text);
  font-family:var(--font-body);
  border-radius:16px;
  overflow:hidden;
  margin:0 calc(var(--pad-x) * -1);
}
@media (max-width: 1199px){
  .toe-cc{ margin:0; border-radius:12px; }
}
.toe-cc *{ box-sizing:border-box; }
.toe-cc .admin-panel{ background:var(--tcc-card); border:1px solid var(--tcc-line); border-radius:12px; padding:18px 20px; }
.toe-cc .admin-panel-title{ font-family:var(--font-display); font-size:15px; letter-spacing:.02em; color:var(--tcc-text); }
.toe-cc .admin-panel-sub{ color:var(--tcc-text-mut); }
.toe-cc .admin-empty{ color:var(--tcc-text-mut); }
.toe-cc .form-error{ color:var(--tcc-red); }
.toe-cc .admin-role-row{ border-bottom-color:var(--tcc-line); }
.toe-cc .status-badge{ border-color:var(--tcc-line); }

.toe-cc-shell{ display:flex; align-items:stretch; min-height:560px; }

/* ---- Sidebar ---- */
.toe-cc-sidebar{
  flex:none; width:210px; background:var(--tcc-navy); color:#cbd8ee;
  display:flex; flex-direction:column; padding:18px 12px;
}
/* CORRECTION 2 (2026-08-27): sticky sidebar nav, scoped ONLY to the
   League Dashboard page (#league-dashboard-page) rather than the shared
   .toe-cc-sidebar rule, so this doesn't change behavior on any other
   page reusing the same Command Center shell (Club/Meet Director/Coach
   dashboards, etc. — smallest safe correction, Rule #4). Long club lists
   made the sidebar scroll out of view on desktop; sticky keeps nav
   reachable without needing to scroll back to the top. Desktop/tablet
   only — the responsive breakpoints below already convert the sidebar to
   a horizontal top strip on narrow viewports where sticky doesn't apply. */
@media (min-width: 1200px){
  #league-dashboard-page .toe-cc-sidebar{ position:sticky; top:20px; align-self:flex-start; max-height:calc(100vh - 40px); overflow-y:auto; }
}
.toe-cc-sidebar-brand{ padding:6px 8px 18px; }
.toe-cc-sidebar-logo{ height:34px; width:auto; display:block; filter:brightness(1.15); }
.toe-cc-nav-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:#aebeda; text-decoration:none; font-size:13px; font-weight:600; margin-bottom:2px;
  border-left:3px solid transparent; cursor:pointer;
}
.toe-cc-nav-link svg{ flex:none; }
.toe-cc-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.toe-cc-nav-link:focus-visible{ outline:2px solid var(--tcc-gold-hi); outline-offset:1px; }
.toe-cc-nav-link.active{ background:rgba(232,169,0,.14); color:#fff; border-left-color:var(--tcc-gold-hi); }
.toe-cc-nav-disabled{ opacity:.5; cursor:not-allowed; position:relative; }
.toe-cc-nav-disabled:hover{ background:none; color:#aebeda; }
.toe-cc-nav-soon{
  margin-left:auto; font-style:normal; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.1); color:#cbd8ee; border-radius:999px; padding:2px 6px;
}
/* CORRECTION 2 (2026-08-27): sidebar nav pending-action count badge —
   e.g. "3" next to "Member Clubs" when 3 club affiliation requests are
   awaiting review. Reuses the gold accent color already used for
   .active nav links, so it reads as "needs your attention" without
   introducing a new color to the sidebar's palette. */
.toe-cc-nav-badge{
  margin-left:auto; font-style:normal; font-size:11px; font-weight:800;
  background:var(--tcc-gold-hi); color:#1a1200; border-radius:999px;
  padding:1px 7px; min-width:18px; text-align:center; line-height:1.5;
}
.toe-cc-sidebar-foot{
  margin-top:auto; padding:14px 10px 4px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:6px; font-size:11px; color:#93a5c4;
}
.toe-cc-sidebar-conn{ display:flex; align-items:center; gap:6px; font-weight:700; }
.toe-cc-dot{ width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
.toe-cc-dot-green{ background:var(--tcc-green); }
.toe-cc-dot-red{ background:var(--tcc-red); }
.toe-cc-dot-grey{ background:#93a5c4; }

.toe-cc-main{ flex:1 1 auto; min-width:0; padding:20px 22px 32px; }

/* ---- Header ---- */
.toe-cc-head{ margin-bottom:18px; }
.toe-cc-head-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toe-cc-head-dot{ width:9px; height:9px; border-radius:50%; background:var(--tcc-red); flex:none; }
@media (prefers-reduced-motion: no-preference){
  .toe-cc-head-dot{ animation:toe-cc-pulse 2s ease-in-out infinite; }
}
@keyframes toe-cc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.toe-cc-head-shield{ color:var(--tcc-navy); flex:none; }
.toe-cc-head-title{ font-family:var(--font-display); font-size:clamp(18px,2vw,24px); letter-spacing:.01em; margin:0; color:var(--tcc-navy); }
.toe-cc-live-badge{
  background:var(--tcc-red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em;
  border-radius:999px; padding:4px 10px; margin-left:auto;
}
.toe-cc-head-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:8px; }
.toe-cc-head-meta{ font-size:13px; color:var(--tcc-text-mut); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toe-cc-head-meta-sep{ opacity:.5; }
.toe-cc-head-status{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--tcc-text-mut); flex-wrap:wrap; }
.toe-cc-sync-pill{ display:flex; align-items:center; gap:6px; font-weight:700; color:var(--tcc-green-text); }
.toe-cc-head-actions{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.toe-cc-selector select{ padding:8px 10px; border-radius:8px; border:1px solid var(--tcc-line); font-size:13px; min-height:38px; }
.toe-cc-btn-primary{ background:var(--tcc-gold-hi); border-color:var(--tcc-gold-hi); color:#1a1200; }
.toe-cc-btn-outline-red{ border-color:var(--tcc-red); color:var(--tcc-red); }
.toe-cc-btn-outline-red:hover{ background:var(--tcc-red); color:#fff; }

/* ---- Summary cards (2/3/4/6-up, responsive via inline --tcc-cols) ---- */
.toe-cc-summary-grid{ display:grid; grid-template-columns:repeat(var(--tcc-cols, 4), 1fr); gap:14px; margin-bottom:18px; }
.toe-cc-summary-card{
  background:var(--tcc-card); border:1px solid var(--tcc-line); border-radius:12px; padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
.toe-cc-summary-icon{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.toe-cc-summary-icon-navy{ background:color-mix(in srgb, var(--tcc-navy) 12%, #fff); color:var(--tcc-navy); }
.toe-cc-summary-icon-green{ background:color-mix(in srgb, var(--tcc-green) 14%, #fff); color:var(--tcc-green); }
.toe-cc-summary-icon-blue{ background:color-mix(in srgb, var(--tcc-blue) 14%, #fff); color:var(--tcc-blue); }
.toe-cc-summary-icon-red{ background:color-mix(in srgb, var(--tcc-red) 12%, #fff); color:var(--tcc-red); }
.toe-cc-summary-icon-gold{ background:color-mix(in srgb, var(--tcc-gold-hi) 18%, #fff); color:var(--tcc-gold); }
.toe-cc-summary-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--tcc-text-mut); }
.toe-cc-summary-value{ font-family:var(--font-display); font-size:26px; line-height:1.1; color:var(--tcc-navy); }
.toe-cc-summary-value-green{ color:var(--tcc-green-text); }
.toe-cc-summary-value-blue{ color:var(--tcc-blue); }
.toe-cc-summary-value-red{ color:var(--tcc-red-text); }
.toe-cc-summary-sub{ font-size:11px; color:var(--tcc-text-mut); }
.toe-cc-summary-progress{ height:6px; border-radius:999px; background:var(--tcc-line); overflow:hidden; margin-top:4px; }
.toe-cc-summary-progress-fill{ height:100%; background:var(--tcc-green); border-radius:999px; transition:width .3s ease; }

/* ---- Main content grid (2-col by default; a page can override
   --tcc-grid-cols, or just use 1 column by omitting .toe-cc-grid). ---- */
.toe-cc-grid{ display:grid; grid-template-columns: var(--tcc-grid-cols, 2fr 1fr); gap:18px; align-items:start; }
.toe-cc-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }

/* ---- A dark "hero" card (mirrors Meet Director's Live Meet Control
   card) any dashboard can reuse for its own most-important live status. ---- */
.toe-cc-hero-card{ background:var(--tcc-navy-3); color:#e7edf8; border-radius:12px; padding:18px 20px 20px; position:relative; }
.toe-cc-hero-banner{
  display:inline-block; background:var(--tcc-gold-hi); color:#1a1200; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; border-radius:6px; padding:4px 10px; margin-bottom:12px;
}
.toe-cc-hero-title{ font-family:var(--font-display); font-size:clamp(16px,2vw,20px); color:#fff; }
.toe-cc-hero-sub{ font-size:12.5px; color:#9fb0cc; margin-top:2px; }
.toe-cc-hero-note{ font-size:11.5px; color:#9fb0cc; margin:10px 0 0; }

/* ---- Status pills (generic; reuses the same color language as
   .md-ooe-status-pill) ---- */
.toe-cc-pill{ display:inline-block; border-radius:999px; padding:4px 10px; font-size:10.5px; font-weight:800; letter-spacing:.02em; }
.toe-cc-pill.good{ background:color-mix(in srgb, var(--tcc-green) 14%, #fff); color:var(--tcc-green-text); }
.toe-cc-pill.info{ background:color-mix(in srgb, var(--tcc-blue) 14%, #fff); color:var(--tcc-blue); }
.toe-cc-pill.neutral{ background:var(--tcc-line); color:var(--tcc-text-mut); }
.toe-cc-pill.warn{ background:color-mix(in srgb, var(--tcc-red) 12%, #fff); color:var(--tcc-red-text); }

/* ---- Staff-tile grid (reused by any "assigned people" card) ---- */
.toe-cc-tile-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.toe-cc-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:10px 6px; border-radius:10px; background:var(--tcc-bg); }
.toe-cc-tile-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--tcc-navy); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-size:14px; position:relative; flex:none;
}
.toe-cc-tile-avatar .toe-cc-dot{ position:absolute; bottom:0; right:0; border:2px solid var(--tcc-bg); }
.toe-cc-tile-name{ font-size:11.5px; font-weight:700; color:var(--tcc-text); line-height:1.2; }
.toe-cc-tile-role{ font-size:10px; color:var(--tcc-text-mut); }

/* ---- Relocated "more tools" collapsible section (reused by every
   dashboard that preserves legacy panels below the new redesign) ---- */
.toe-cc-more-section{ margin-top:22px; }
.toe-cc-more-summary{
  cursor:pointer; font-family:var(--font-display); font-size:14px; letter-spacing:.02em; color:var(--text-dim);
  padding:12px 4px; list-style:none;
}
.toe-cc-more-summary::-webkit-details-marker{ display:none; }
.toe-cc-more-summary::before{ content:'▸ '; color:var(--gold); }
.toe-cc-more-section[open] .toe-cc-more-summary::before{ content:'▾ '; }
.toe-cc-more-body{ display:flex; flex-direction:column; gap:16px; margin-top:10px; }

/* ---- Responsive: Tablet (768–1199px) ---- */
@media (min-width: 768px) and (max-width: 1199px){
  .toe-cc-summary-grid{ grid-template-columns:repeat(3, 1fr); }
  .toe-cc-grid{ grid-template-columns: 1fr; }
  .toe-cc-sidebar{ width:64px; padding:14px 6px; }
  .toe-cc-sidebar-brand{ display:flex; justify-content:center; padding:4px 0 14px; }
  .toe-cc-sidebar-logo{ height:26px; }
  .toe-cc-nav-link span, .toe-cc-nav-soon, .toe-cc-sidebar-foot span.toe-cc-sidebar-version{ display:none; }
  .toe-cc-nav-link{ justify-content:center; padding:12px 6px; }
  .toe-cc-sidebar-foot{ align-items:center; }
}

/* ---- Responsive: Mobile (<768px) ---- */
@media (max-width: 767px){
  .toe-cc-shell{ flex-direction:column; min-height:0; }
  .toe-cc-sidebar{
    width:100%; flex-direction:row; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:10px 10px; gap:2px;
  }
  .toe-cc-sidebar-brand{ display:none; }
  .toe-cc-nav-link{ flex:none; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; padding:8px 10px; min-height:44px; }
  .toe-cc-nav-link.active{ border-left-color:transparent; border-bottom-color:var(--tcc-gold-hi); }
  .toe-cc-sidebar-foot{ display:none; }
  .toe-cc-main{ padding:16px 14px 26px; }
  .toe-cc-head-title{ font-size:16px; }
  .toe-cc-live-badge{ margin-left:0; }
  .toe-cc-head-actions{ flex-direction:column; align-items:stretch; }
  .toe-cc-head-actions .btn{ width:100%; justify-content:center; min-height:44px; }
  .toe-cc-summary-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .toe-cc-summary-card{ padding:11px 12px; }
  .toe-cc-summary-value{ font-size:21px; }
  .toe-cc-grid{ grid-template-columns:1fr; gap:14px; }
  .toe-cc-tile-grid{ grid-template-columns:repeat(2, 1fr); }
  .toe-cc-hero-card .btn, .toe-cc-hero-card button{ min-height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .toe-cc-head-dot{ animation:none; }
  .toe-cc-summary-progress-fill{ transition:none; }
}

/* =========================================================================
   PHASE 5: MEET-DAY MODE (2026-08-21)
   ---------------------------------------------------------------------
   A per-device (localStorage, not per-account) toggle for the 3 "meet
   day" Command Center dashboards — Meet Clerk (.toe-cc), Timer (.toe-cc),
   and Meet Director (.md-cc) — that goes one step further than the
   existing permanent "Meet Clerk tablet-first" baseline (search this file
   for .btn-checkedin/.btn-dns/.clerk-call-btn above) for the moments that
   baseline wasn't designed for: a Clerk/Timer/Director standing at a
   table in full sun, gloved or cold-fingered, glancing at a shared
   tablet for a few seconds at a time between heats. Turning it on:
     1. Hides the .toe-action-cards / .toe-action-cards row (orientation
        shortcuts a first-time user needs once, not mid-meet noise).
     2. Collapses the sidebar nav to icon-only at ANY viewport (already
        the existing tablet/mobile behavior — this just also applies it
        on desktop, since a Meet-Day laptop is still typically at
        arm's length, not lap-height).
     3. Raises the same interactive controls the pre-existing tablet band
        already targets (.btn-checkedin/.btn-dns/.clerk-call-btn/
        .clerk-footer-card/.btn-restore-scratch/.coach-att-btn/
        .md-cc-btn-announce/.md-cc-btn-emergency) one more size/contrast
        step, and widens body text slightly for at-a-glance legibility.
   No color TOKEN is invented — every rule below reuses --tcc-*/--mdcc-*/
   --clerk-*/--red-hi/--track already defined elsewhere in this file, just
   applied more forcefully. No markup is removed, no route/permission/
   data-shape changes — toggling this class only ever changes CSS. See
   app.js's toeMeetDayMode IIFE for the toggle/persistence logic and
   clerkDashboard.ts/timerDashboard.ts/meetDirectorDashboard.ts for the
   toggle button markup (id="<page>-meetday-toggle" / "md-cc-meetday-toggle").
   ========================================================================= */
.toe-meetday-toggle{
  display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 12px;
  border-radius:8px; border:1px solid var(--tcc-line); background:var(--tcc-card);
  color:var(--tcc-text-mut); font-family:var(--font-display); font-size:12px; letter-spacing:.01em;
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.toe-meetday-toggle:hover{ border-color:var(--tcc-gold-hi); color:var(--tcc-text); }
.toe-meetday-toggle:focus-visible{ outline:2px solid var(--tcc-gold-hi); outline-offset:1px; }
.toe-meetday-toggle svg{ flex:none; }
.toe-meetday-toggle[aria-pressed="true"]{
  background:var(--tcc-gold-hi); border-color:var(--tcc-gold-hi); color:#1a1200; font-weight:800;
}
/* Meet Director's header sits on .md-cc, a separate custom-property
   namespace from .toe-cc — reuse its own tokens for the same look. */
.md-cc .toe-meetday-toggle{ border-color:var(--mdcc-line); background:var(--mdcc-card); color:var(--mdcc-text-mut); }
.md-cc .toe-meetday-toggle:hover{ border-color:var(--mdcc-gold-hi); color:var(--mdcc-text); }
.md-cc .toe-meetday-toggle[aria-pressed="true"]{ background:var(--mdcc-gold-hi); border-color:var(--mdcc-gold-hi); color:#1a1200; }
@media (max-width: 767px){
  .toe-meetday-toggle{ width:100%; justify-content:center; }
}

/* ---- The mode itself: applied by adding .meet-day-mode to the page's
   .toe-cc / .md-cc root element (never removed/re-added anywhere but by
   the toggle button's own click handler). ---- */
.toe-cc.meet-day-mode .toe-action-cards,
.md-cc.meet-day-mode .toe-action-cards{ display:none; }

.toe-cc.meet-day-mode .toe-cc-sidebar{ width:64px; padding:14px 6px; }
.toe-cc.meet-day-mode .toe-cc-sidebar-brand{ display:flex; justify-content:center; padding:4px 0 14px; }
.toe-cc.meet-day-mode .toe-cc-sidebar-logo{ height:26px; }
.toe-cc.meet-day-mode .toe-cc-nav-link span,
.toe-cc.meet-day-mode .toe-cc-nav-soon,
.toe-cc.meet-day-mode .toe-cc-sidebar-foot span.toe-cc-sidebar-version{ display:none; }
.toe-cc.meet-day-mode .toe-cc-nav-link{ justify-content:center; padding:14px 6px; min-height:52px; }
.toe-cc.meet-day-mode .toe-cc-sidebar-foot{ align-items:center; }

.md-cc.meet-day-mode .md-sidebar{ width:64px; padding:14px 6px; }
.md-cc.meet-day-mode .md-sidebar-brand{ display:flex; justify-content:center; padding:4px 0 14px; }
.md-cc.meet-day-mode .md-sidebar-logo{ height:26px; }
.md-cc.meet-day-mode .md-nav-link span,
.md-cc.meet-day-mode .md-nav-soon,
.md-cc.meet-day-mode .md-sidebar-foot span.md-sidebar-version{ display:none; }
.md-cc.meet-day-mode .md-nav-link{ justify-content:center; padding:14px 6px; min-height:52px; }
.md-cc.meet-day-mode .md-sidebar-foot{ align-items:center; }

/* Bigger touch targets/text on the highest-frequency meet-day controls,
   one notch past the existing permanent tablet-band values. */
.toe-cc.meet-day-mode .btn-checkedin,
.toe-cc.meet-day-mode .btn-dns{ min-height:56px; font-size:15px; padding:14px 18px; }
.toe-cc.meet-day-mode .clerk-call-btn{ min-height:60px; font-size:16px; padding:16px 10px; }
.toe-cc.meet-day-mode .clerk-footer-card{ min-height:72px; font-size:14px; }
.toe-cc.meet-day-mode .btn-restore-scratch{ min-height:44px; font-size:12px; padding:8px 12px; }
.toe-cc.meet-day-mode table.clerk-roster{ font-size:15px; }
.toe-cc.meet-day-mode table.clerk-roster th{ font-size:12px; }
.toe-cc.meet-day-mode .clerk-heat-title{ font-size:20px; }
.toe-cc.meet-day-mode .admin-panel-title{ font-size:17px; }

/* NOTE (scope decision, documented in README's Phase 5 section): Coach's
   own Team Meet Attendance card (.coach-dash-page, a separate scoping
   from .toe-cc/.md-cc) was evaluated for inclusion but intentionally
   left OUT of this pass — the Coach dashboard is used well before/after
   meet day too (rosters, schedules, announcements), not primarily AT
   the table during a meet the way Clerk/Timer/Meet-Director are, so a
   sidebar-collapsing/action-cards-hiding mode would fit it less
   naturally. No .meet-day-mode toggle button exists on coachDashboard.ts;
   nothing here targets .coach-dash-page. */

.md-cc.meet-day-mode .md-cc-btn-announce,
.md-cc.meet-day-mode .md-cc-btn-emergency{ min-height:52px; font-size:14px; padding:12px 18px; }
.md-cc.meet-day-mode .md-cc-head-title{ font-size:clamp(20px,2.4vw,26px); }

@media (prefers-reduced-motion: reduce){
  .toe-meetday-toggle{ transition:none; }
}

/* =========================================================================
   FEATURE: FIND AND CLAIM PREVIOUS ATHLETE RESULTS
   Styles for: (1) the "Find Your Previous Results" signup step (reuses the
   existing .reg-role-section reveal-in-place convention — no new show/hide
   mechanism), (2) the "Possible Athlete Matches" review list, (3) the
   review-before-import screen, and (4) the athlete profile's "Connected
   Results Sources" card. Ported verbatim from the approved preview
   (previews/find-previous-results-preview.html) — same classnames, same
   real :root tokens (--gold/--gold-hi/--gold-lo/--track/--bg-2/--bg-3/
   --line-2/--red-hi/--red-lo/--text-dim/--text-mut/--font-mono/
   --font-display), no new colors/fonts introduced. .btn-sm is a new small
   size modifier for the existing .btn/.btn-gold/.btn-ghost primitives
   (those don't have a compact variant yet); everything else here is
   feature-specific and additive only.
   ========================================================================= */

.btn-sm{ padding:8px 14px; min-height:0; font-size:11px; border-radius:8px; }

/* ---------- Section 1: "Find Your Previous Results" signup step ---------- */
.fpr-step-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lo); background:rgba(201,152,47,.1);
  border:1px solid var(--gold-hi); border-radius:999px; padding:6px 14px; margin-bottom:14px;
}
.fpr-intro-card{ background:var(--bg-3); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:22px; }
.fpr-intro-card p{ margin:0; color:var(--text-dim); font-size:14.5px; }
.fpr-action-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
@media (max-width:640px){ .fpr-action-grid{ grid-template-columns:1fr; } }
.fpr-action-card{
  background:#fff; border:1px solid var(--line-2); border-radius:14px; padding:20px; text-align:left;
  display:flex; flex-direction:column; gap:8px; cursor:pointer; width:100%; font-family:inherit;
}
.fpr-action-card:hover{ border-color:var(--gold-hi); }
.fpr-action-card.active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,152,47,.18) inset; }
.fpr-action-icon{ width:38px; height:38px; border-radius:10px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; color:var(--gold-lo); font-size:18px; }
.fpr-action-title{ font-family:var(--font-mono); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text); }
.fpr-action-sub{ font-size:12.5px; color:var(--text-mut); }
.fpr-skip-row{ text-align:center; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.fpr-skip-row a{ font-family:var(--font-mono); font-size:12.5px; text-decoration:underline; color:var(--text-mut); cursor:pointer; }
.fpr-skip-row p{ font-size:11.5px; color:var(--text-mut); margin-top:6px; }

.fpr-provider-note{
  display:flex; gap:10px; align-items:flex-start; margin-top:20px; padding:12px 14px;
  border:1px dashed var(--line-2); border-radius:10px; font-size:12px; color:var(--text-mut);
}
.fpr-provider-note svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--gold); }

.fpr-inline-panel{ display:none; margin-top:22px; padding-top:22px; border-top:1px dashed var(--line-2); }
.fpr-inline-panel.show{ display:block; }
.fpr-panel-title{ font-family:var(--font-display); font-size:18px; text-transform:uppercase; letter-spacing:.01em; color:var(--text); margin:0 0 6px; }
.fpr-panel-lede{ color:var(--text-mut); font-size:13px; margin:0 0 14px; }

/* ---------- ATHLETE PROFILE CORRECTION HANDOFF — Section 5: CSV format
   requirements box + import summary, shown next to the CSV upload control. ---------- */
.csv-req-box{
  margin-bottom:16px; padding:14px 16px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:10px;
}
.csv-req-title{ font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.02em; color:var(--text); margin:0 0 10px; }
.csv-req-table{ width:100%; border-collapse:collapse; font-size:11.5px; margin-bottom:12px; }
.csv-req-table th{ text-align:left; color:var(--text-mut); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line-2); }
.csv-req-table td{ padding:5px 8px; border-bottom:1px solid var(--line-2); color:var(--text); vertical-align:top; }
.csv-req-table code{ background:rgba(255,255,255,.06); padding:1px 5px; border-radius:4px; font-size:11px; }
.csv-req-yes{ color:var(--gold); font-weight:700; white-space:nowrap; }
.csv-req-opt{ color:var(--text-mut); white-space:nowrap; }
.csv-req-sample-title{ font-size:11.5px; font-weight:700; color:var(--text-mut); margin:0 0 6px; text-transform:uppercase; letter-spacing:.02em; }
.csv-req-sample{
  font-family:var(--font-mono); font-size:11px; color:var(--text); background:rgba(0,0,0,.25); border:1px solid var(--line-2);
  border-radius:8px; padding:10px 12px; overflow-x:auto; margin:0 0 12px; white-space:pre;
}
.csv-import-summary{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); }
.csv-import-totals{ display:flex; flex-wrap:wrap; gap:10px; font-size:12px; margin-bottom:10px; }
.csv-import-totals span{ padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.06); }
.csv-import-totals .ok{ color:#b8e6a0; }
.csv-import-totals .warn{ color:#ffd27a; }
.csv-import-totals .bad{ color:#ffb4b4; }
.csv-import-row-errors{ list-style:none; margin:0; padding:0; font-size:11.5px; color:var(--text-mut); max-height:180px; overflow-y:auto; }
.csv-import-row-errors li{ padding:4px 0; border-bottom:1px solid var(--line-2); }
.csv-import-row-errors li:last-child{ border-bottom:none; }
#ap-csv-error-report-btn{ margin-top:10px; }

/* PROFILE CORRECTIONS + MEET-RESULTS IMPORT HANDOFF (2026-08-24), A3:
   visible CSV upload limits + import-preview dashboard + upload-button row. */
.csv-req-limits{ font-size:11.5px; color:var(--text-mut); margin:0 0 10px; }
.crs-upload-btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.csv-import-preview{ margin-top:14px; padding:14px 16px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:10px; }
.csv-import-preview-title{ font-size:11.5px; font-weight:700; color:var(--gold); margin:0 0 10px; text-transform:uppercase; letter-spacing:.02em; }
.csv-preview-table{ width:100%; border-collapse:collapse; font-size:11.5px; margin-top:10px; }
.csv-preview-table th{ text-align:left; color:var(--text-mut); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line-2); }
.csv-preview-table td{ padding:5px 8px; border-bottom:1px solid var(--line-2); color:var(--text); vertical-align:top; }

/* ---------- Section 2: Possible Athlete Matches ---------- */
.fpr-searching-note{
  display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px;
  color:var(--text-mut); margin-bottom:18px;
}
.fpr-searching-note svg{ width:18px; height:18px; flex:none; color:#1f7a3d; }
.fpr-spin{ width:14px; height:14px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--gold); animation:fpr-spin 1s linear infinite; display:inline-block; }
@keyframes fpr-spin{ to{ transform:rotate(360deg); } }

.match-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:14px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start;
}
.match-card-main{ flex:1 1 320px; min-width:0; }
.match-conf{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:8px;
}
.match-conf.strong{ background:rgba(31,122,61,.12); color:#1f7a3d; border:1px solid rgba(31,122,61,.35); }
.match-conf.possible{ background:rgba(201,152,47,.14); color:var(--gold-lo); border:1px solid var(--gold-hi); }
.match-conf.more-info{ background:var(--bg-2); color:var(--text-mut); border:1px solid var(--line-2); }
.match-name{ font-family:var(--font-display); font-size:19px; text-transform:uppercase; letter-spacing:.01em; color:var(--text); }
.match-meta{ font-size:12.5px; color:var(--text-mut); margin-top:4px; line-height:1.6; }
.match-meta strong{ color:var(--text-dim); font-weight:600; }
.match-source{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-mut); margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.match-source .src-pill{ background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
.match-actions{ display:flex; flex-direction:column; gap:8px; min-width:170px; }
.match-actions .btn{ width:100%; }
.match-view-source{ font-size:11px; text-align:center; color:var(--text-mut); text-decoration:underline; cursor:pointer; }

.fpr-no-matches, .fpr-too-many{
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:26px; text-align:center;
}
.fpr-no-matches h3, .fpr-too-many h3{ font-family:var(--font-display); font-size:18px; text-transform:uppercase; margin:6px 0; color:var(--text); }
.fpr-no-matches p, .fpr-too-many p{ color:var(--text-mut); font-size:13.5px; max-width:52ch; margin:0 auto 16px; }
.fpr-match-note{ font-size:11.5px; color:var(--text-mut); margin-top:18px; }

/* ---------- Section 3: Review-before-import ---------- */
.import-summary{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.import-summary .who{ font-family:var(--font-mono); font-size:12px; color:var(--text-mut); }
.import-summary .who b{ color:var(--text); }

.import-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.import-toolbar label{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-mut); display:flex; align-items:center; gap:6px; }
.import-toolbar a{ font-size:12px; color:var(--red-hi); text-decoration:underline; cursor:pointer; }

.import-row{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px;
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start;
}
.import-row.excluded{ opacity:.5; }
.import-row input[type="checkbox"]{ margin-top:4px; width:16px; height:16px; accent-color:var(--gold); }
.import-row-main{ min-width:0; }
.import-row-event{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--track); text-transform:uppercase; }
.import-row-mark{ font-family:var(--font-display); font-size:22px; color:var(--text); margin:2px 0; }
.import-row-meet{ font-size:12.5px; color:var(--text-mut); }
.import-row-flags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.flag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--text-mut);
}
.flag.pr{ background:rgba(214,48,63,.08); border-color:var(--red-lo); color:var(--red-hi); font-weight:700; }
.flag.official{ background:rgba(31,122,61,.1); border-color:rgba(31,122,61,.35); color:#1f7a3d; }
.flag.unofficial{ background:var(--bg-2); }
.import-row-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.import-row-actions a{ font-size:11px; color:var(--text-mut); text-decoration:underline; cursor:pointer; }
.import-row-source{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-mut); margin-top:8px; }

.import-confirm-box{
  margin-top:22px; padding:18px 20px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
}
.import-confirm-box label{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-dim); cursor:pointer; }
.import-confirm-box input{ margin-top:3px; width:16px; height:16px; accent-color:var(--gold); flex:none; }
.import-guardian-note{
  margin-top:10px; padding:10px 12px; background:rgba(201,152,47,.1); border:1px solid var(--gold-hi);
  border-radius:8px; font-size:12px; color:var(--gold-lo);
}
.import-actions-row{ display:flex; gap:12px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }
.import-actions-row .btn-text{ background:none; border:none; color:var(--text-mut); text-decoration:underline; font-family:var(--font-mono); font-size:12.5px; cursor:pointer; padding:0; }

/* ---------- Section 4: Connected Results Sources (profile page addition) ---------- */
.crs-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; margin-top:22px;
}
.crs-title{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:16px; text-transform:uppercase; letter-spacing:.02em; color:var(--track); margin-bottom:4px; }
.crs-sub{ font-size:12.5px; color:var(--text-mut); margin-bottom:16px; }
.crs-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-top:1px solid var(--line);
}
.crs-row:first-of-type{ border-top:none; }
.crs-provider{ display:flex; align-items:center; gap:12px; min-width:220px; }
.crs-provider-icon{
  width:38px; height:38px; border-radius:10px; background:var(--bg-2); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-size:13px; color:var(--gold-lo); flex:none;
}
.crs-provider-name{ font-weight:700; font-size:14px; color:var(--text); }
.crs-provider-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-mut); margin-top:2px; }
.crs-status{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.crs-status.connected{ background:rgba(31,122,61,.1); color:#1f7a3d; border:1px solid rgba(31,122,61,.35); }
.crs-status.linked{ background:var(--bg-2); color:var(--text-mut); border:1px solid var(--line-2); }
.crs-status.attention{ background:rgba(214,48,63,.08); color:var(--red-hi); border:1px solid var(--red-lo); }
.crs-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.crs-actions a, .crs-actions button{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.03em; background:none; border:1px solid var(--line-2); border-radius:8px; padding:6px 12px; cursor:pointer; color:var(--text-mut); text-decoration:none; }
.crs-actions a:hover, .crs-actions button:hover{ border-color:var(--gold-hi); color:var(--gold-lo); }
.crs-add-btn{ margin-top:16px; }
.crs-empty{ font-size:13px; color:var(--text-mut); padding:8px 0 4px; }

/* Add-Previous-Results mini-panel (opened by .crs-add-btn on the profile page) */
.crs-add-panel{ display:none; margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-2); }
.crs-add-panel.show{ display:block; }
.crs-add-panel .fpr-action-grid{ margin-top:0; }

/* PROFILE CORRECTIONS + MEET-RESULTS IMPORT HANDOFF (2026-08-24), A2:
   "Enter a Result Manually" submission list — one row per self-reported
   submission, with a status badge (Pending/Approved/Rejected/More Info
   Needed) and a Resubmit action for rejected/needs_info rows. Reuses the
   existing .crs-row/.status-badge visual language rather than inventing a
   new card style, so this list feels native to the rest of the page. */
.ap-manual-row{
  display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--line-2);
}
.ap-manual-row:last-child{ border-bottom:none; }
.ap-manual-row-main{ flex:1 1 240px; min-width:0; }
.ap-manual-row-title{ font-weight:700; color:var(--text); font-size:13.5px; }
.ap-manual-row-meta{ font-size:12px; color:var(--text-mut); margin-top:2px; }
.ap-manual-row-note{ font-size:11.5px; color:var(--text-mut); margin-top:4px; font-style:italic; }
.status-pending_verification, .status-mrv-pending{ border-color:var(--gold-lo); color:var(--gold); }
.status-pending_verification::before, .status-mrv-pending::before{ background:var(--gold); }
.status-mrv-approved{ border-color:#2f9c4c; color:#1f7a3d; }
.status-mrv-approved::before{ background:#2f9c4c; }
.status-mrv-rejected{ border-color:var(--red-lo); color:var(--red-hi); }
.status-mrv-rejected::before{ background:var(--red); }
.status-mrv-needs_info{ border-color:var(--gold-lo); color:var(--gold); }
.status-mrv-needs_info::before{ background:var(--gold); }
.ap-manual-row-actions{ display:flex; gap:8px; flex:none; }
.ap-manual-row-actions button{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  background:none; border:1px solid var(--line-2); border-radius:8px; padding:6px 12px;
  cursor:pointer; color:var(--text-mut);
}
.ap-manual-row-actions button:hover{ border-color:var(--gold-hi); color:var(--gold-lo); }

/* =========================================================================
   "Track Meet Command Center" homepage redesign (2026-08-12) — new .tmc-*
   classes used exclusively by src/pages/home.ts's redesigned sections.
   Reuses existing tokens (--gold/--red/--track/--cream/--line/--card/etc.,
   plus the .toe-cc-*/.clerk-*/.coach-*/.ac-*/.notif/.phone/.checks/.qa/
   .athlete-card component families already defined above) — no new colors
   introduced. Scoped entirely under this "TMC" prefix so nothing here can
   collide with any existing page.
   ========================================================================= */

/* ---- Hero 3-color headline treatment ---- */
.tmc-hero-h1{ display:flex; flex-direction:column; gap:2px; }
.tmc-navy{ color:var(--cream); }
.tmc-gold{ color:var(--gold); }
.tmc-red{ color:var(--red); }

/* ---- Hero layered product composition (League CC + Clerk tablet + phone) ---- */
.tmc-hero-stack{
  position:relative;
  display:flex; flex-direction:column; gap:18px;
  padding-top:8px;
}
.tmc-demo-tag{
  position:absolute; top:-14px; right:6px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:var(--cream); color:#fff;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 6px 16px -6px rgba(15,42,77,.5);
}
.tmc-hero-main.toe-cc{ border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(17,26,44,.28); border:1px solid var(--line); }
.tmc-hero-cc-shell{ min-height:0; }
.tmc-hero-cc-shell .toe-cc-main{ padding:18px 20px 22px; }
.tmc-hero-cc-sidebar{ width:168px; padding:16px 10px; }
.tmc-hero-cc-sidebar .toe-cc-sidebar-brand{ padding:2px 6px 14px; }
.tmc-hero-cc-sidebar .toe-cc-sidebar-logo{ height:26px; }
.tmc-hero-cc-sidebar .toe-cc-nav-link{ font-size:12.5px; padding:9px 10px; }
@media (max-width: 640px){
  .tmc-hero-cc-sidebar{ display:none; }
}

.tmc-hero-tablet{
  background:linear-gradient(180deg,#ffffff,#eef3fa);
  border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 18px;
  box-shadow:0 24px 48px -24px rgba(17,26,44,.22);
  max-width:460px;
}
.tmc-hero-tablet-head{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:14px; color:var(--track); margin-bottom:10px;
}
.tmc-hero-clerk-table{ width:100%; }
.tmc-hero-clerk-table td{ padding:7px 5px; }

.tmc-hero-phone{ max-width:280px; padding:16px; margin:0; }
.tmc-hero-phone .notif{ margin-bottom:0; }

@media (max-width: 960px){
  .tmc-hero-stack{ padding-top:36px; }
  .tmc-hero-tablet, .tmc-hero-phone{ max-width:100%; }
}

/* ---- Role Selector tabs + panel ---- */
.tmc-roletabs{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-bottom:32px;
}
@media (max-width: 640px){
  .tmc-roletabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:4px;
    scrollbar-width:none;
  }
  .tmc-roletabs::-webkit-scrollbar{ display:none; }
}
.tmc-roletab{
  flex:none;
  padding:12px 20px; border-radius:999px;
  background:var(--card); border:1px solid var(--line-2);
  color:var(--text-mut); font-weight:700; font-size:14px;
  white-space:nowrap; min-height:44px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tmc-roletab:hover{ border-color:var(--gold-hi); color:var(--gold-lo); }
.tmc-roletab:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tmc-roletab.is-active{
  background:var(--track); border-color:var(--track); color:#fff;
}
.tmc-rolepanel{
  display:grid; grid-template-columns: 1fr 1fr; gap:clamp(24px,4vw,56px);
  align-items:center;
  background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
  padding:clamp(24px,4vw,44px);
}
@media (max-width: 900px){ .tmc-rolepanel{ grid-template-columns:1fr; } }
.tmc-rolepanel-copy h3{ margin-bottom:16px; }
.tmc-rolepanel-shot{ display:flex; justify-content:center; }
.tmc-rolepanel-phone{ margin:0; max-width:320px; }
.tmc-rolepanel-cc{ width:100%; max-width:440px; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 40px -22px rgba(17,26,44,.22); }
.tmc-rolepanel-cc .toe-cc-shell{ min-height:0; }
.tmc-rolepanel-cc .toe-cc-main{ padding:16px 18px 20px; }
.tmc-rolepanel-cc .toe-cc-sidebar{ display:none; }
.tmc-rolepanel-mock{ width:100%; max-width:440px; }

/* ---- Season Overview callouts + calendar mock ---- */
.tmc-callouts{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.tmc-callout{ display:flex; gap:16px; align-items:flex-start; }
.tmc-callout .n{
  font-family:var(--font-display); font-size:22px; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px var(--gold); flex:none; width:36px;
}
.tmc-callout .t{ font-weight:700; font-size:15px; color:var(--text); }
.tmc-callout .s{ font-size:13px; color:var(--text-mut); margin-top:2px; }

.tmc-calendar-mock{
  background:linear-gradient(180deg,#ffffff,#eef3fa);
  border:1px solid var(--line); border-radius:18px;
  padding:20px 22px 12px;
  box-shadow:0 30px 60px -24px rgba(17,26,44,.2);
}
.tmc-cal-row{
  display:grid; grid-template-columns: 52px 132px 1fr;
  align-items:center; gap:10px;
  padding:11px 0; border-top:1px dashed var(--line);
  font-size:13.5px;
}
.tmc-cal-row:first-of-type{ border-top:0; }
.tmc-cal-day{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim);
}
.tmc-cal-tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
}
.tmc-cal-tag.practice{ background:rgba(18,58,99,.1); color:var(--track); }
.tmc-cal-tag.deadline{ background:rgba(214,48,63,.1); color:var(--red-hi); }
.tmc-cal-tag.meeting{ background:var(--bg-2); color:var(--text-mut); border:1px solid var(--line-2); }
.tmc-cal-tag.meet{ background:rgba(122,84,16,.14); color:var(--gold-lo); }
.tmc-cal-tag.staff{ background:rgba(31,122,61,.1); color:#1f7a3d; }
@media (max-width: 560px){
  .tmc-cal-row{ grid-template-columns: 44px 100px 1fr; font-size:12.5px; }
}

/* ---- Core Product Capabilities grid ---- */
.tmc-capgrid{
  display:grid;
  /* Public-launch hardening (Section 2): minmax(0,...) lets each grid
     track shrink below its content's intrinsic min-content width.
     Plain `1fr` tracks default to `minmax(auto,1fr)`, so a wide child
     (e.g. an unbreakable "toe-cc" mock screenshot) was forcing the
     track — and the whole page — a few px wider than a 320px viewport,
     causing horizontal scroll. */
  grid-template-columns:minmax(0,1fr); gap:24px;
}
@media (min-width: 901px){ .tmc-capgrid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.tmc-cap{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 24px;
}
.tmc-cap-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.tmc-cap-num{
  font-family:var(--font-display); font-size:26px; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px var(--gold); flex:none;
}
.tmc-cap-head h3{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:22px; color:var(--cream);
}
.tmc-cap ul.checks{ list-style:none; padding:0; margin:0 0 18px; }
.tmc-cap ul.checks li{
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 0; border-top:1px dashed var(--line);
  font-size:13.5px;
}
.tmc-cap ul.checks li:first-child{ border-top:0; }
.tmc-cap ul.checks li::before{ content:"✓"; color:var(--gold); font-weight:800; font-size:13px; margin-top:1px; }
.tmc-cap-shot{
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:16px;
}
.tmc-cap-shot-cc{ border-radius:12px; }
.tmc-cap-shot-athlete .ac-head{ margin-bottom:12px; }
.tmc-cap-shot-athlete .ac-stats{ margin-bottom:0; grid-template-columns:repeat(2,1fr); }

/* ---- Meet-Day Workflow ---- */
.tmc-workflow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-bottom:36px;
}
@media (max-width: 900px){ .tmc-workflow{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .tmc-workflow{ grid-template-columns:1fr; } }
.tmc-wf-step{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px;
  display:flex; flex-direction:column; gap:8px;
}
.tmc-wf-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--track); color:#fff;
  font-family:var(--font-display); font-size:14px;
  margin-bottom:4px;
}
.tmc-wf-step h4{ font-size:15.5px; margin:0; color:var(--text); }
.tmc-wf-step p{ font-size:13px; color:var(--text-mut); margin:0; }
.tmc-wf-shot{ margin-top:6px; }
.tmc-wf-note{
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; font-size:13.5px; color:var(--text-mut);
  max-width:900px;
}

/* ---- Coach Ace mockup ---- */
.tmc-ace-disclaimer{ font-size:13px; color:var(--text-mut); margin:0 0 20px; }
.tmc-ace-shot{ display:flex; flex-direction:column; gap:14px; }
.tmc-ace-bubble{
  align-self:flex-end;
  background:var(--track); color:#fff;
  border-radius:14px 14px 4px 14px;
  padding:12px 16px; font-size:13.5px; line-height:1.4;
  max-width:88%;
}
.tmc-ace-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px;
}
.tmc-ace-card p{ font-size:13px; color:var(--text-mut); margin:0 0 12px; }
.tmc-ace-card-title{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em;
  font-size:14px; color:var(--track); margin-bottom:6px;
}
.tmc-ace-card-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-top:1px dashed var(--line);
  font-size:12.5px;
}
.tmc-ace-card-row:first-of-type{ border-top:0; }
.tmc-ace-card-row span:first-child{ color:var(--text-dim); font-weight:600; flex:none; }
.tmc-ace-card-row span:last-child{ color:var(--text); text-align:right; }
.tmc-ace-card-actions{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.tmc-ace-card-actions .btn{ font-size:12px; padding:9px 14px; min-height:auto; }
.tmc-ace-card-rules{ background:var(--bg-2); }

/* ---- Parent Experience ---- */
.tmc-parent-phone{ max-width:400px; }
.tmc-parent-athletes{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.tmc-parent-chip{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:999px;
  padding:6px 12px; font-size:11.5px; font-weight:600; color:var(--text-mut);
}

/* ---- Athlete Scorecard extras ---- */
.tmc-scorecard{ max-width:560px; }
.tmc-scorecard-prs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px; position:relative;
}
.tmc-scorecard-pr{
  background:#e9eff8; border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center;
}
.tmc-scorecard-pr .l{ font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.tmc-scorecard-pr .v{ font-family:var(--font-display); font-size:20px; color:var(--gold); margin-top:2px; }
.tmc-scorecard-history{
  border-top:1px solid var(--line); padding-top:14px; margin-bottom:18px; position:relative;
}
.tmc-scorecard-hist-row{
  display:grid; grid-template-columns:1fr 60px 70px 70px; gap:8px; align-items:center;
  padding:9px 0; border-top:1px dashed var(--line); font-size:12px;
}
.tmc-scorecard-hist-row:first-child{ border-top:0; }
.tmc-scorecard-hist-row span:first-child{ color:var(--text); font-weight:600; }
.tmc-scorecard-hist-row span:nth-child(2){ color:var(--text-mut); font-family:var(--font-mono); }
.tmc-scorecard-hist-row span:nth-child(3){ color:var(--gold); font-family:var(--font-mono); font-weight:700; }
.tmc-verified{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#1f7a3d; text-align:right;
}
.tmc-demo-caption{
  font-size:11.5px; color:var(--text-dim); text-align:center; margin:16px 0 0; position:relative;
}
@media (max-width: 480px){
  .tmc-scorecard-hist-row{ grid-template-columns:1fr 44px 56px 56px; font-size:11px; }
}

/* ---- Pricing summary line ---- */
.tmc-price-summary{
  font-size:14px; color:var(--text-mut); margin-top:14px;
}
.tmc-price-details{ margin-top:20px; }
.tmc-price-details .price-compare-wrap{ margin-top:0; }

/* toe-cc summary card sentence-style value (used by the hero League CC
   Latest Announcement / This Week cards, whose content is a short phrase
   rather than a big number — reuses the same card/label styling but a
   smaller, non-display value font so long phrases wrap cleanly). */
.toe-cc-summary-value-text{
  font-size:13px; line-height:1.35; color:var(--tcc-navy); font-weight:600;
}

/* =========================================================================
   Reference-image reconciliation pass (2026-08-12, same day) — additional
   .tmc-* components added so the homepage matches the user-supplied exact
   reference screenshot: hero feature-strip icons, a rebuilt light "League
   Command Center" hero card (countdown + roster stats + announcements +
   calendar list), a red CTA button on the hero phone notification, icons
   on the 4 Role Selector tabs, a compact "Meet Director" dashboard mockup
   (live call board / check-in donut / meet-progress gauge / recent
   activity / weather), and a full month-view Season Timeline calendar
   grid replacing the old flat weekly list. All new rules stay under the
   existing --gold/--red/--track/--cream/--line/--card token palette — no
   new brand colors introduced.
   ========================================================================= */

/* ---- Hero feature-strip icons ---- */
.tmc-strip-item{ display:inline-flex; align-items:center; gap:8px; }
.tmc-strip-item svg{ flex:none; color:var(--gold); }

/* ---- Hero "League Command Center" card (light, replaces the dark .toe-cc
   sidebar shell that was here before — the reference shows a light card,
   not the internal admin dashboard chrome) ---- */
.tmc-cc-card{
  position:relative;
  background:#ffffff; border:1px solid var(--line); border-radius:16px;
  padding:20px 22px 18px;
  box-shadow:0 30px 60px -28px rgba(17,26,44,.22);
}
.tmc-cc-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.tmc-cc-card-head h3{ font-family:var(--font-display); font-size:16px; letter-spacing:.01em; color:var(--track); margin:0; }
.tmc-cc-card-who{ display:flex; align-items:center; gap:8px; flex:none; }
.tmc-cc-avatar{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--bg-2); color:var(--track);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:11px;
}
.tmc-cc-card-who .name{ font-size:11px; color:var(--text-mut); line-height:1.25; }
.tmc-cc-card-who .name b{ display:block; color:var(--text); font-weight:700; font-size:12px; }
.tmc-demo-tag-inline{ position:static; top:auto; right:auto; background:var(--red); }

.tmc-cc-meet{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap;
  background:var(--bg-2); border-radius:12px; padding:14px 16px; margin-bottom:16px;
}
.tmc-cc-meet-label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }
.tmc-cc-meet-name{ font-family:var(--font-display); font-size:17px; color:var(--cream); margin-top:3px; }
.tmc-cc-meet-meta{ font-size:11.5px; color:var(--text-mut); margin-top:3px; }
.tmc-cc-countdown{ display:flex; gap:8px; flex:none; align-items:center; }
.tmc-cc-countdown-lbl{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-right:2px; }
.tmc-cc-countdown-box{
  text-align:center; background:var(--track); color:#fff; border-radius:8px;
  padding:7px 10px; min-width:42px;
}
.tmc-cc-countdown-box .v{ font-family:var(--font-display); font-size:18px; line-height:1; }
.tmc-cc-countdown-box .u{ font-family:var(--font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-top:2px; }

.tmc-cc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.tmc-cc-stat{ text-align:center; background:var(--bg-2); border-radius:10px; padding:9px 4px; }
.tmc-cc-stat .v{ font-family:var(--font-display); font-size:17px; color:var(--track); line-height:1.1; }
.tmc-cc-stat .l{ font-size:9px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-mut); margin-top:3px; }

.tmc-cc-body{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
@media (max-width: 560px){ .tmc-cc-body{ grid-template-columns:1fr; } }
.tmc-cc-col-title{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.tmc-cc-ann-item{ padding:7px 0; border-top:1px dashed var(--line); font-size:11.5px; }
.tmc-cc-ann-item:first-child{ border-top:0; }
.tmc-cc-ann-item .t{ color:var(--text); font-weight:600; display:block; }
.tmc-cc-ann-item .d{ color:var(--text-dim); font-family:var(--font-mono); font-size:9.5px; margin-top:2px; display:block; }
.tmc-cc-more{ display:inline-block; margin-top:8px; font-size:11px; font-weight:700; color:var(--gold-lo); }
.tmc-cc-cal-month{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--text-dim); margin-bottom:4px; }
.tmc-cc-cal-item{ display:flex; gap:10px; align-items:baseline; padding:6px 0; font-size:11.5px; border-top:1px dashed var(--line); }
.tmc-cc-cal-item:first-child{ border-top:0; }
.tmc-cc-cal-date{ font-family:var(--font-display); font-size:15px; color:var(--red); flex:none; width:24px; }

/* Hero clerk tablet: allow more rows without ballooning row height */
.tmc-hero-clerk-table.dense td{ padding:5px 5px; font-size:11.5px; }

/* Hero phone: red CTA button under the notification text */
.tmc-hero-phone .notif-actions{ margin-top:10px; }
.tmc-hero-phone .notif-actions .btn{
  display:block; width:100%; text-align:center; font-size:12.5px; padding:10px 12px; min-height:auto;
}
.tmc-hero-phone .notif-eyebrow{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--red-hi); margin-bottom:2px;
}
.tmc-hero-phone .notif-event{ font-family:var(--font-display); font-size:18px; color:var(--cream); }
.tmc-hero-phone .notif-heat{ font-size:11.5px; color:var(--text-mut); margin-top:1px; margin-bottom:8px; }

/* ---- Role Selector tab icons ---- */
.tmc-roletab{ display:inline-flex; align-items:center; gap:8px; }
.tmc-roletab svg{ flex:none; }
.tmc-roletab.is-active svg{ color:#fff; }
.tmc-roletab:not(.is-active) svg{ color:var(--text-dim); }

/* ---- Meet Director rich dashboard mockup (role panel + reused in the
   Meet-Day Workflow section) ---- */
.tmc-md-dash{
  width:100%; max-width:460px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:0 24px 48px -24px rgba(17,26,44,.2);
}
.tmc-md-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:10px; }
.tmc-md-head h4{ font-family:var(--font-display); font-size:14px; color:var(--track); margin:0; }
.tmc-md-head .sub{ font-size:10.5px; color:var(--text-mut); margin-top:2px; }
.tmc-md-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tmc-md-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:0; }
.tmc-md-card.wide{ grid-column:1 / -1; }
.tmc-md-card-title{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;
}
.tmc-md-call-item{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:5px 0; border-top:1px dashed var(--line); }
.tmc-md-call-item:first-child{ border-top:0; }
.tmc-md-call-item .e{ font-size:11px; font-weight:600; color:var(--text); }
.tmc-md-call-item .sub{ font-size:9.5px; color:var(--text-mut); }
.tmc-md-call-badge{ font-size:8.5px; font-weight:800; padding:2px 7px; border-radius:999px; text-transform:uppercase; white-space:nowrap; flex:none; }
.tmc-md-call-badge.final{ background:var(--red); color:#fff; }
.tmc-md-call-badge.next{ background:rgba(11,99,197,.14); color:#0b63c5; }
.tmc-md-call-badge.time{ background:var(--bg-2); color:var(--text-mut); }

.tmc-donut{
  width:64px; height:64px; border-radius:50%; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:conic-gradient(#0b63c5 0% 78%, #e2a63a 78% 95.6%, #d6303f 95.6% 100%);
}
.tmc-donut::before{ content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.tmc-donut span{ position:relative; font-family:var(--font-display); font-size:13px; color:var(--track); }
.tmc-donut-legend{ display:flex; flex-direction:column; gap:3px; }
.tmc-donut-legend-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:9.5px; color:var(--text-mut); }
.tmc-donut-legend-row .k{ display:inline-flex; align-items:center; gap:5px; }
.tmc-donut-dot{ width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }

.tmc-md-progress-row{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-mut); margin-bottom:6px; }
.tmc-md-progress-row b{ color:var(--text); }
.tmc-md-ontrack{ display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:#0d7a3a; margin-top:8px; }

.tmc-weather{ display:flex; align-items:center; gap:10px; }
.tmc-weather svg{ flex:none; color:var(--gold-hi); }
.tmc-weather .t{ font-family:var(--font-display); font-size:16px; color:var(--track); line-height:1; }
.tmc-weather .s{ font-size:9.5px; color:var(--text-mut); margin-top:2px; }
.tmc-weather-meta{ display:flex; gap:10px; margin-top:8px; font-size:9.5px; color:var(--text-mut); }

.tmc-md-activity-item{ font-size:10px; padding:5px 0; border-top:1px dashed var(--line); color:var(--text-mut); line-height:1.4; }
.tmc-md-activity-item:first-child{ border-top:0; }
.tmc-md-activity-item b{ color:var(--text); }
.tmc-md-activity-item .time{ font-family:var(--font-mono); color:var(--text-dim); margin-right:4px; }

/* ---- Season Overview: full month-view Season Timeline calendar grid,
   replacing the old flat single-week .tmc-calendar-mock list. ---- */
.tmc-timeline{
  background:#ffffff; border:1px solid var(--line); border-radius:18px;
  padding:20px 20px 16px;
  box-shadow:0 30px 60px -24px rgba(17,26,44,.2);
  overflow-x:auto;
}
.tmc-timeline-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.tmc-timeline-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tmc-timeline-title-row h3{ font-family:var(--font-display); font-size:15px; color:var(--track); margin:0; }
.tmc-timeline-range{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-mut); margin-top:6px; }
.tmc-timeline-nav-btn{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); background:#fff;
  display:inline-flex; align-items:center; justify-content:center; color:var(--text-mut);
  padding:0; flex:none;
}
.tmc-timeline-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tmc-timeline-view-toggle{ display:flex; background:var(--bg-2); border-radius:8px; padding:3px; gap:2px; }
.tmc-timeline-view-toggle span{ padding:5px 10px; border-radius:6px; font-size:10.5px; font-weight:700; color:var(--text-mut); }
.tmc-timeline-view-toggle span.active{ background:#fff; color:var(--track); box-shadow:0 1px 3px rgba(17,26,44,.15); }
.tmc-timeline-btn{ font-size:11px; font-weight:700; padding:7px 12px; border-radius:8px; border:1px solid var(--line-2); background:#fff; color:var(--text-mut); white-space:nowrap; }
.tmc-timeline-btn.primary{ background:var(--track); border-color:var(--track); color:#fff; }

.tmc-timeline-grid{ min-width:660px; }
.tmc-timeline-cols{ display:grid; grid-template-columns: 150px repeat(6, 1fr); }
.tmc-timeline-col-head{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-align:center; padding:4px 4px 8px; border-left:1px solid var(--line); }
.tmc-timeline-col-head .dow{ display:block; font-size:8px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-bottom:2px; }
.tmc-timeline-group-label{
  grid-column:1 / -1; background:var(--bg-2);
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);
  padding:7px 10px; border-top:1px solid var(--line);
}
.tmc-timeline-row{ grid-column: 1 / -1; display:grid; grid-template-columns: 150px repeat(6, 1fr); border-top:1px solid var(--line); min-height:38px; align-items:center; }
.tmc-timeline-row-label{ font-size:11px; color:var(--text-mut); padding:6px 10px; }
.tmc-timeline-track{
  grid-column: 2 / -1; position:relative;
  display:grid; grid-template-columns:repeat(6,1fr); min-height:32px; align-items:center;
}
.tmc-timeline-chip{
  border-radius:6px; padding:5px 8px; font-size:10px; font-weight:700; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:2px 3px;
}
.tmc-timeline-chip.blue{ background:#0b63c5; }
.tmc-timeline-chip.gold{ background:var(--gold-hi); color:#3a2807; }
.tmc-timeline-chip.navy{ background:var(--track); }
.tmc-timeline-tag{
  display:inline-flex; border-radius:5px; padding:3px 7px; font-size:9.5px; font-weight:800;
  background:rgba(214,48,63,.12); color:var(--red-hi); margin:2px 3px; white-space:nowrap;
}
.tmc-timeline-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:10.5px; color:var(--text-mut); }
.tmc-timeline-legend span{ display:inline-flex; align-items:center; gap:6px; }
.tmc-timeline-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
@media (max-width: 640px){
  .tmc-timeline{ padding:16px 14px 12px; }
}

/* =====================================================================
   Coach Ace demonstration video series: shared help widgets
   (Website-Placement package implementation). Two reusable patterns:
   1. .ca-tour-link — a small "Take a tour" text-link used on dashboard
      panels; opens the video modal below.
   2. .ca-tip — an inline "?" help-bubble trigger used next to a specific
      UI control; opens the same modal with a micro-short + caption note.
   Both funnel into one shared lightbox (#ca-video-modal, built by
   coach-ace-video.js) so there is only one video player instance/markup
   pattern to maintain across ~20 pages.
   ===================================================================== */
.ca-tour-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--track);
  background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:6px 14px; cursor:pointer; white-space:nowrap;
}
.ca-tour-link:hover{ border-color:var(--gold); color:var(--gold-lo); }
.ca-tour-link svg{ flex:none; }

.ca-tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--text-mut);
  font-size:11px; font-weight:800; cursor:pointer; line-height:1; padding:0;
  vertical-align:middle; margin-left:6px;
}
.ca-tip:hover{ border-color:var(--gold); color:var(--gold-lo); background:#fff; }

.ca-video-modal{
  position:fixed; inset:0; background:rgba(9,16,30,.72);
  display:none; align-items:center; justify-content:center;
  z-index:10000; padding:20px;
}
.ca-video-modal.open{ display:flex; }
.ca-video-modal-panel{
  background:#fff; border-radius:16px; padding:20px;
  max-width:720px; width:100%; max-height:92vh; overflow:auto;
  box-shadow:0 40px 90px -20px rgba(6,12,24,.5);
}
.ca-video-modal-panel.is-vertical{ max-width:380px; }
.ca-video-modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.ca-video-modal-title{ font-family:var(--font-display); font-size:16px; color:var(--track); margin:0 0 4px; }
.ca-video-modal-sub{ font-size:12.5px; color:var(--text-mut); margin:0; }
.ca-video-modal-close{
  flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-2);
  background:#fff; color:var(--text-mut); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ca-video-modal-close:hover{ border-color:var(--red); color:var(--red); }
.ca-video-modal video{
  width:100%; border-radius:12px; background:#0b1220; display:block;
}
.ca-video-modal-panel.is-vertical video{ max-height:70vh; margin:0 auto; }

/* Pilot Phase 2 additions (2026-08-26): Replay control, per-user "Watched"
   badge, and the "View text version" transcript toggle/panel — see
   coach-ace-video.js's file-header comment for the full rationale. Reuses
   the same tokens as the rest of this block (--line-2/--gold/--track/
   --text-mut/--bg-2/--font-display); no new colors introduced. */
.ca-video-modal-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.ca-video-watched-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:700; color:#1a7a3c;
  background:#e8f7ee; border:1px solid #b7e6c6; border-radius:999px;
  padding:4px 10px;
}
.ca-video-replay-btn, .ca-video-transcript-toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--track);
  background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:6px 14px; cursor:pointer; white-space:nowrap;
}
.ca-video-replay-btn:hover, .ca-video-transcript-toggle:hover{ border-color:var(--gold); color:var(--gold-lo); }
.ca-video-transcript-panel{
  margin-top:12px; padding:14px 16px; max-height:260px; overflow:auto;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:12px;
  font-size:13.5px; line-height:1.6; color:var(--text-mut);
}
.ca-video-transcript-panel p{ margin:0 0 10px; }
.ca-video-transcript-panel p:last-child{ margin-bottom:0; }

/* ---------- FEATURE: Temporary QA Role Switcher — site-wide banner ---------- */
/* Deliberately NOT position:fixed (same reasoning as the other "sticky
   duplicate content" call-outs already documented above in this file) — it
   pushes the nav down instead of overlapping it, and never needs its own
   scroll-offset handling. */
.qa-mode-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:repeating-linear-gradient(135deg, #fff3cd, #fff3cd 12px, #ffe69c 12px, #ffe69c 24px);
  border-bottom:2px solid #b8860b;
  color:#5c4400; font-family:var(--font-body); font-size:13px; font-weight:700;
  padding:8px var(--pad-x); position:relative; z-index:80;
}
.qa-mode-banner-label{ letter-spacing:.02em; }
.qa-mode-banner-expiry{ font-weight:500; color:#6b4a0a; }
.qa-mode-banner-switcher{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.qa-mode-banner-switcher select{
  font-size:12.5px; padding:4px 8px; border-radius:6px; border:1px solid #b8860b;
  background:#fffdf5; color:#3d2e07; max-width:280px;
}
.qa-mode-banner-switcher .btn{ padding:4px 12px; font-size:12.5px; }
@media (max-width: 720px){
  .qa-mode-banner{ font-size:12px; padding:8px 16px; }
  .qa-mode-banner-switcher{ width:100%; margin-left:0; }
  /* SJTFA Phase 9 fix (2026-08-23): a bare `flex:1` on a <select> does NOT
     let it shrink below its intrinsic (longest-<option>-text) content
     width — flex items default to `min-width:auto`, not 0 — so on any
     viewport <=720px this select's real rendered width followed its
     longest option string (e.g. "club1.admin@toe-meet-fixture.test —
     Club Administrator @ Amaysing Speed"), overflowing the banner and
     causing REAL page-level horizontal scroll for every logged-in
     fixture/QA account on mobile (confirmed live at 390px: page
     scrollWidth 969px vs a 390px viewport). `max-width:none` alone (the
     pre-existing rule) does nothing to fix this — the fix is forcing
     `min-width:0` so the flex item is actually allowed to shrink to the
     row's available width, with `overflow:hidden`+`text-overflow:ellipsis`
     so a long selected option's text truncates cleanly instead of forcing
     the box wider. Only ever reachable by an authenticated
     @toe-meet-fixture.test/@toe-demo-fixture.test account while QA Mode is
     active (GET /api/qa-mode/accounts requires auth + a fixture-domain
     email — anonymous visitors and real users never see this control, per
     src/lib/qaMode.ts's handleListQaModeAccounts), so this was never
     visible to a real production user — but it is a genuine, reproducible
     mobile-usability defect against this phase's own fixture accounts and
     is fixed here as a pure CSS change (no JS/behavior/permission
     impact). */
  .qa-mode-banner-switcher select{ flex:1; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* QA Mode admin panel (platform_admin dashboard) status pill variants. */
.qa-mode-status-pill.active{ background:#fff3cd; color:#5c4400; border:1px solid #b8860b; }
.qa-mode-status-pill.inactive{ background:var(--bg-2); color:var(--text-mut); border:1px solid var(--line-2); }

/* Correction 10 sub-req 2 ("Profile pictures for every role") — the
   `users`-table half: My Profile's own "Your profile picture" panel
   (myProfile.ts #my-profile-photo-panel), plus the shared small-avatar
   class (.toe-user-avatar-sm) used by toeUserAvatarHtml() wherever a
   user's name is rendered elsewhere in the app (see app.js). Deliberately
   its own .mp-photo-* namespace (mirrors the athlete Stat Card's
   .ap-photo-* pattern) so it can never collide with any other panel. */
.mp-photo-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.mp-photo-avatar-wrap{
  position:relative; flex:none; width:88px; height:88px; border-radius:50%; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.mp-photo-avatar{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mp-photo-initials{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--gold-lo);
}
.mp-photo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.mp-photo-file-input-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#mp-photo-upload-label{ cursor:pointer; }
#mp-photo-upload-label.is-busy, #mp-photo-remove-btn.is-busy{ opacity:.6; pointer-events:none; }
.mp-photo-status{ margin:0; font-family:var(--font-mono); font-size:11px; color:var(--text-mut); min-height:14px; }
.mp-photo-status.is-error{ color:var(--red-hi); }
.mp-photo-status.is-success{ color:var(--gold-lo); }

/* Small round avatar used inline wherever a coach/staff/admin/parent name
   is rendered platform-wide (toeUserAvatarHtml() in app.js) — the
   users-table-photo counterpart to .comm-avatar-sm/.coach-roster-avatar,
   unified into one shared helper+class rather than duplicating yet
   another bespoke avatar style per surface. */
.toe-user-avatar-sm{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:50%; overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line-2); font-family:var(--font-mono); font-weight:700; font-size:10px;
  color:var(--gold-lo); vertical-align:middle; margin-right:6px;
}
.toe-user-avatar-sm img{ width:100%; height:100%; object-fit:cover; }
/* toeUserAvatarHtml()'s optional 4th `extraClass` arg lets a caller add a
   surface-specific class alongside .toe-user-avatar-sm so each surface
   keeps its own pre-existing size/margin instead of the 26px default
   (declared above, so it would otherwise win the cascade on shared-class
   elements — these compound overrides restore each surface's own look). */
.toe-user-avatar-sm.coach-roster-avatar{ width:36px; height:36px; font-size:12px; margin-right:0; }
.toe-user-avatar-sm.comm-avatar-sm{ width:38px; height:38px; font-size:13px; margin-right:0; }
.comm-post-head .toe-user-avatar-sm.comm-avatar-sm{ width:40px; height:40px; }
.comm-huddle-row .toe-user-avatar-sm.comm-avatar-sm{ width:32px; height:32px; font-size:11px; }
.comm-member-row .toe-user-avatar-sm.comm-avatar-sm{ width:30px; height:30px; font-size:11px; }
.toe-user-avatar-sm.md-staff-avatar{ width:40px; height:40px; font-size:14px; margin-right:0; }

/* Lightweight canvas-based crop dialog (no CDN cropper library exists in
   this codebase — see app.js's toeOpenPhotoCropDialog() header comment
   for why one was written from scratch rather than adding a dependency).
   Reuses the same fixed-overlay pattern as .clerk-override-panel. */
.mp-crop-overlay{ position:fixed; inset:0; background:rgba(20,20,30,.6); display:flex; align-items:center; justify-content:center; z-index:2100; padding:16px; }
.mp-crop-dialog{ background:#fff; border-radius:12px; padding:20px; max-width:420px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.mp-crop-dialog h4{ margin:0 0 10px; font-size:15px; }
.mp-crop-canvas-wrap{ display:flex; justify-content:center; margin-bottom:10px; touch-action:none; }
.mp-crop-canvas-wrap canvas{ border-radius:50%; cursor:grab; background:var(--bg-2); max-width:100%; }
.mp-crop-canvas-wrap canvas:active{ cursor:grabbing; }
.mp-crop-controls{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.mp-crop-controls label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-mut); }
.mp-crop-controls input[type="range"]{ flex:1; }
.mp-crop-actions{ display:flex; justify-content:flex-end; gap:10px; }