/* ═══════════════════════════════════════════════════════════════════
   Coach Tier preview — VolleyElite Jump Analyzer · Powered by The Art of Jumping
   Loads after theme-app.css + theme-aoj.css. Same app language (Geist, cards, floating tabs);
   the diagnostic layer (lenses, film checks, athlete type) wears AOJ blue / navy.
   ═══════════════════════════════════════════════════════════════════ */
body.ct { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-ink); font-family: var(--a-font); }
body.ct *, body.ct *::before, body.ct *::after { box-sizing: border-box; }
.ct h1, .ct h2, .ct h3, .ct p { margin: 0; }
.ct a { color: inherit; }
.ct svg { flex-shrink: 0; }
.ct button svg, .ct a svg, .ct .lim-lab svg, .ct .watch svg, .ct .tag-seen svg, .ct .tag-test svg, .ct .sh-wins svg, .ct .cl h3 svg, .ct .pl-card li svg, .ct .pl-cmp svg,
.ct .due-chip svg, .ct .nw-zone svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--a-ink); color: var(--a-bg) !important; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.ct-skip:focus { top: 12px; }
.muted { color: var(--a-ink2); }
.muted.sm { font-size: 13.5px; line-height: 1.45; margin: 4px 0 10px; }

/* Header extras */
.ct-pv { height: 30px; padding: 0 11px; border-radius: 99px; border: 1px dashed var(--aoj-edge); background: var(--aoj-soft); color: var(--aoj-ink);
  font: 700 11.5px var(--a-font); letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.ct-pv:hover { background: var(--aoj-soft2); }
@media (max-width: 520px) { .ct-pv span { display: none; } }
.ct-pv { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a club's name in the pill (clubs.js) never squeezes the logo */
.ct-coach-av { display: grid !important; background: var(--aoj-blue) !important; color: #fff !important; font-size: 12px !important; }
@media (max-width: 400px) { .ct-coach-av { display: none !important; } }

/* Layout */
.ct-main { outline: none; }
.ct-wrap { max-width: 560px; margin: 0 auto; padding: 14px 18px 30px; }
@media (min-width: 1024px) { .ct-wrap { max-width: 1120px; padding: 22px 32px 40px; } .ct-wrap.share, .ct-wrap.nw { max-width: 640px; } .ct-wrap.pl { max-width: 960px; } }
.ct-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ct-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .ct-grid2 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; } .ct-col { gap: 18px; } }

/* Greeting */
.ct-hello { padding: 6px 2px 4px; }
.ct-hello.sm { padding-top: 2px; }
.ct-hello.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ct-date { font: 600 13.5px var(--a-font); color: var(--a-ink2); }
.ct-hello h1 { font: 800 32px/1.08 var(--a-font); letter-spacing: -.03em; margin-top: 4px; }
.ct-org { margin-top: 6px !important; font: 500 14px/1.4 var(--a-font); color: var(--a-ink2); }
.ct-hello .aoj-pb { margin-top: 14px; }

/* Buttons */
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 99px; border: 0;
  background: var(--a-card2); color: var(--a-ink) !important; font: 650 14.5px var(--a-font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--a-ease), filter .2s, background .2s; }
.ct-btn svg { width: 18px; height: 18px; }
.ct-btn:hover { filter: brightness(1.08); }
.ct-btn:active { transform: scale(.98); }
.ct-btn.primary { background: linear-gradient(165deg, #1ca0ef, #0b74c4); color: #fff !important; }
.ct-btn.sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.ct-btn.sm svg { width: 16px; height: 16px; }
.ct-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--a-line); }
.ct-btn:focus-visible, .f-chip:focus-visible, .ct-ath:focus-visible, .ct-link:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.ct-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 4px; color: var(--a-blue); font: 650 13.5px var(--a-font); cursor: pointer; }
.ct-link svg { width: 16px; height: 16px; }
.ct-link:disabled { color: var(--a-ink3); cursor: default; }
.ct-back { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 10px -6px; padding: 6px 8px 6px 4px; border-radius: 10px; text-decoration: none;
  color: var(--a-ink2) !important; font: 600 14px var(--a-font); }
.ct-back svg { width: 18px; height: 18px; }
.ct-back:hover { color: var(--a-ink) !important; background: var(--a-card); }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
@media (max-width: 520px) { .ct-actions .ct-btn { flex: 1 1 auto; } }

/* Cards */
.ct-card { background: var(--a-card); border-radius: 24px; padding: 18px; box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .ct-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.ct-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ct-card-h h2 { font: 700 17px var(--a-font); letter-spacing: -.01em; }
.ct-card-h small { font: 500 12.5px var(--a-font); color: var(--a-ink3); }
.ct-kick { display: flex; align-items: center; gap: 7px; font: 800 11px var(--a-font); letter-spacing: .14em; text-transform: uppercase; color: var(--a-ink3); margin-bottom: 10px; }
.ct-kick.aoj { color: var(--aoj-ink); }
.ct-kick .aoj-mark { width: 15px; height: 12px; }
.sec-h { font: 750 19px var(--a-font); letter-spacing: -.015em; margin: 8px 2px 0; }
.sec-h small { font: 500 13px var(--a-font); color: var(--a-ink3); margin-left: 6px; letter-spacing: 0; }

/* Plan strip */
.ct-plan { display: flex; align-items: center; gap: 14px; margin: 16px 0 12px; padding: 16px 16px 16px 18px; border-radius: 22px;
  background: linear-gradient(135deg, #0a1340 0%, var(--aoj-navy) 70%); color: #fff; box-shadow: inset 0 0 0 1px rgba(110, 126, 255, .25); }
.ct-plan-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-plan-name { font: 800 10.5px var(--a-font); letter-spacing: .16em; text-transform: uppercase; color: #9fb0ff; }
.ct-plan-l b { font: 750 17px var(--a-font); color: #fff; }
.ct-plan-l small { font: 500 12.5px var(--a-font); color: rgba(255, 255, 255, .66); }
.ct-meter { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); margin-top: 8px; overflow: hidden; max-width: 260px; }
.ct-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--aoj-blue), #6f84ff); }
@media (max-width: 520px) { .ct-plan { flex-direction: column; align-items: stretch; } .ct-plan .ct-btn { width: 100%; } .ct-meter { max-width: none; } }

/* Snapshot tiles */
.ct-snap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.snap-tile { background: var(--a-card); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .snap-tile { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.snap-tile.aoj { grid-column: 1 / -1; order: 3; background: linear-gradient(160deg, var(--aoj-surface), var(--a-card)); box-shadow: inset 0 0 0 1px var(--aoj-edge); }
.snap-l { display: flex; align-items: center; gap: 6px; font: 700 11px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink3); }
.snap-tile.aoj .snap-l { color: var(--aoj-ink); }
.snap-l .aoj-mark { width: 14px; height: 11px; }
.snap-tile > b { font: 800 30px/1.05 var(--a-font); letter-spacing: -.03em; color: var(--a-ink); }
.snap-tile.aoj > b { font-size: 22px; margin-bottom: 6px; }
.snap-tile small { font: 500 12.5px/1.35 var(--a-font); color: var(--a-ink2); }
.snap-bars { display: grid; gap: 6px; }
.snap-bars > div { display: grid; grid-template-columns: 118px 1fr 18px; align-items: center; gap: 8px; font: 600 12.5px var(--a-font); color: var(--a-ink2); }
.snap-bars i { height: 8px; border-radius: 99px; background: var(--a-track); overflow: hidden; display: block; }
.snap-bars em { display: block; height: 100%; border-radius: 99px; background: var(--aoj-blue); }
.snap-bars b { font: 750 13px var(--a-font); color: var(--a-ink); text-align: right; }
@media (min-width: 1024px) { .ct-snap { grid-template-columns: 1fr 1.6fr 1fr; } .snap-tile.aoj { grid-column: auto; order: 0; } }
.snap-spark { margin-top: auto; padding-top: 10px; }
.snap-spark svg { display: block; width: 100%; height: auto; overflow: visible; }
.snap-spark .spk-l { fill: none; stroke: #1ca0ee; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.snap-spark .spk-d { fill: var(--a-card); stroke: #1ca0ee; stroke-width: 2; vector-effect: non-scaling-stroke; }
.snap-spark .spk-d.on { fill: #1ca0ee; }
.spk-x { display: flex; justify-content: space-between; margin-top: 4px; font: 600 11px var(--a-font); color: var(--a-ink3); }
.snap-due { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.snap-due a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--a-card2); color: var(--a-ink); text-decoration: none; min-height: 44px; }
.snap-due a:hover { background: var(--a-card3); }
.snap-due a:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.snap-next { margin: 10px 0 0 !important; font: 500 12.5px/1.5 var(--a-font); color: var(--a-ink2); }
.snap-next .sn-h { display: block; font: 700 10.5px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink3); margin-bottom: 2px; }
.snap-next i { display: flex; justify-content: space-between; gap: 8px; font-style: normal; padding: 3px 0; border-top: 1px solid var(--a-line); }
.snap-next i:first-of-type { border-top: 0; }
.snap-next b { color: var(--a-ink); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-av.sm { width: 30px; height: 30px; font-size: 11px; border-radius: 10px; flex-shrink: 0; }
.sd-m { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sd-m b { font: 700 13px var(--a-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-m small { font: 500 11.5px var(--a-font) !important; color: var(--a-ink3) !important; }
.sd-go { display: inline-flex; align-items: center; gap: 2px; font: 700 12px var(--a-font); color: var(--a-blue); white-space: nowrap; }
.sd-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1023px) { .snap-due .sd-go, .sn-ln { display: none; } .snap-due a { padding: 7px 8px; gap: 8px; } }

/* Filters */
.ct-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; }
.f-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--a-card2);
  color: var(--a-ink2); font: 650 13.5px var(--a-font); cursor: pointer; white-space: nowrap; }
.f-chip span { font: 700 11.5px var(--a-font); color: var(--a-ink3); background: var(--a-card3); padding: 2px 7px; border-radius: 99px; }
.f-chip.on { background: var(--a-ink); color: var(--a-bg); }
.f-chip.on span { background: rgba(127, 127, 127, .25); color: inherit; }

/* Roster */
.ct-roster { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 760px) { .ct-roster { grid-template-columns: 1fr 1fr; } }
.ct-ath { display: flex; align-items: center; gap: 13px; padding: 14px 14px 14px 14px; border-radius: 20px; background: var(--a-card); text-decoration: none; color: inherit;
  box-shadow: var(--a-card-shadow); transition: transform .15s var(--a-ease), background .2s; min-width: 0; }
[data-theme="dark"] .ct-ath { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.ct-ath:hover { background: var(--a-card2); }
.ct-ath:active { transform: scale(.99); }
.ct-ath.add { border: 1.5px dashed var(--a-line); background: transparent; box-shadow: none; }
.ct-ath.add .ct-av { background: var(--a-card2); color: var(--a-blue); }
.ct-ath.add .ct-av svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ct-ath.sm { padding: 12px 14px; }
.ct-ath.sm > svg { width: 18px; height: 18px; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; }
.ct-av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--a-card3); color: var(--a-ink);
  font: 750 14px var(--a-font); letter-spacing: .02em; }
.ct-av.lg { width: 64px; height: 64px; border-radius: 20px; font-size: 20px; background: linear-gradient(150deg, #1ca0ef, #0b6fbd); color: #fff; }
.ct-ath-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-ath-m > b { font: 700 15.5px var(--a-font); color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ath-m > span { font: 500 12.5px var(--a-font); color: var(--a-ink2); }
.ct-ath-c { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ct-ath-s { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.ct-ath-s b { font: 800 26px/1 var(--a-font); letter-spacing: -.03em; }
.ct-ath-s small { font: 500 11.5px var(--a-font); color: var(--a-ink3); }
.ct-empty { color: var(--a-ink2); padding: 16px 4px; }
.dl { font: 750 12px var(--a-font); }
.dl.up { color: var(--a-good-ink); } .dl.down { color: var(--a-bad-ink); } .dl.flat { color: var(--a-ink3); }

/* Chips */
.lens-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 3px; border-radius: 8px; background: var(--aoj-soft2); color: var(--aoj-ink);
  font: 700 11.5px var(--a-font); white-space: nowrap; }
.lens-chip::before { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--aoj-blue); color: #fff; font: 900 11px var(--a-font); }
.lc-velocity::before { content: "V"; } .lc-rhythm::before { content: "R"; } .lc-force::before { content: "F"; }
.lens-chip.lc-clean { background: rgba(61, 220, 132, .14); color: var(--a-good-ink); padding-left: 9px; }
.lens-chip.lc-clean::before { display: none; }
.type-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--a-card3); color: var(--a-ink2); font: 650 11.5px var(--a-font); white-space: nowrap; }
.type-chip.muted { color: var(--a-ink3); }
.due-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; background: rgba(255, 181, 71, .14); color: var(--a-warn-ink); font: 700 11.5px var(--a-font); }
.due-chip svg { width: 13px; height: 13px; }
.new-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--a-blue); color: #fff; font: 800 10.5px var(--a-font); letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; margin-left: 6px; }
.sev-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font: 750 11px var(--a-font); letter-spacing: .02em; }
.sev-major { background: rgba(255, 107, 94, .16); color: var(--a-bad-ink); }
.sev-moderate { background: rgba(255, 181, 71, .16); color: var(--a-warn-ink); }
.sev-minor { background: var(--a-card3); color: var(--a-ink2); }
.root-tag, .driven-tag, .top-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font: 750 11px var(--a-font); white-space: nowrap; }
.root-tag, .top-tag { background: var(--aoj-blue); color: #fff; }
.driven-tag { background: var(--a-card3); color: var(--a-ink2); }

/* Profile */
.ct-prof { display: flex; align-items: center; gap: 14px; }
.ct-prof-m { flex: 1; min-width: 0; }
.ct-prof-m h1 { font: 800 26px/1.1 var(--a-font); letter-spacing: -.025em; }
.ct-prof-m p { margin-top: 3px !important; font: 500 13.5px var(--a-font); color: var(--a-ink2); }
.ct-prof-s { display: flex; flex-direction: column; align-items: flex-end; }
.ct-prof-s b { font: 800 40px/1 var(--a-font); letter-spacing: -.04em; color: var(--a-ink); }
.ct-prof-s small { font: 500 12px var(--a-font); color: var(--a-ink2); margin-top: 2px; white-space: nowrap; }
@media (max-width: 420px) { .ct-prof { flex-wrap: wrap; } .ct-prof-s { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; padding-left: 78px; } }
.pc { width: 100%; height: auto; display: block; overflow: visible; }
.pc-line { fill: none; stroke: #1ca0ef; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-dot { fill: var(--a-card); stroke: #1ca0ef; stroke-width: 2.6; }
.pc-v { font: 750 11px var(--a-font); fill: var(--a-ink); text-anchor: middle; }
.pc-d { font: 500 9.5px var(--a-font); fill: var(--a-ink3); text-anchor: middle; }
.pc-one { font: 500 14px/1.5 var(--a-font); color: var(--a-ink2); padding: 4px 0; }
.pc-sum { font: 600 12.5px var(--a-font); color: var(--a-ink2); }
.lens-hist { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--a-line); }
.lh-row { display: grid; grid-template-columns: 120px 1fr; align-items: end; gap: 10px; }
.lh-row > span { font: 650 12.5px var(--a-font); color: var(--a-ink2); padding-bottom: 2px; }
.lh-bars { display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.lh-bars i { width: 16px; border-radius: 4px 4px 2px 2px; background: var(--aoj-blue); opacity: .55; }
.lh-bars i.full { opacity: .95; } .lh-bars i.low { background: var(--a-bad); opacity: .8; }
.asmt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.asmt-list li { display: flex; align-items: center; gap: 4px; border-radius: 14px; }
.asmt-list li:hover { background: var(--a-card2); }
.asmt-pick { display: grid; place-items: center; width: 34px; height: 44px; cursor: pointer; flex-shrink: 0; }
.asmt-pick input { width: 18px; height: 18px; accent-color: var(--aoj-blue); cursor: pointer; }
.asmt-list a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 6px; text-decoration: none; min-width: 0; }
.asmt-list a > div { flex: 1; min-width: 0; }
.asmt-list a b { font: 650 14.5px var(--a-font); }
.asmt-list a small { display: block; font: 500 12.5px var(--a-font); color: var(--a-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asmt-s { font: 800 18px var(--a-font); display: inline-flex; align-items: baseline; gap: 6px; }
.asmt-list a > svg { width: 18px; height: 18px; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; }
.note-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.note-list li { padding: 10px 12px; border-radius: 14px; background: var(--a-card2); }
.note-list li small { font: 650 11.5px var(--a-font); color: var(--a-ink3); }
.note-list li p { font: 500 14px/1.45 var(--a-font); color: var(--a-ink); margin-top: 2px; }
.note-list li.muted p { color: var(--a-ink3); }
.note-form { display: grid; gap: 8px; }
.note-form textarea { width: 100%; resize: vertical; min-height: 64px; border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-card2); color: var(--a-ink);
  padding: 10px 12px; font: 500 14.5px/1.4 var(--a-font); }
.note-form textarea:focus { outline: 2px solid var(--a-blue); outline-offset: 0; border-color: transparent; }
.note-form .ct-btn { justify-self: start; }
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rec-list li { display: flex; gap: 10px; align-items: flex-start; }
.rec-n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; background: var(--a-card3); color: var(--a-ink); font: 800 11.5px var(--a-font); margin-top: 1px; }
.rec-list b { font: 650 14px/1.35 var(--a-font); display: block; }
.rec-list small { font: 500 12px var(--a-font); color: var(--a-ink2); }

/* Athlete type */
.type-card { background: linear-gradient(170deg, var(--aoj-surface), var(--a-card) 55%); box-shadow: inset 0 0 0 1px var(--aoj-edge) !important; }
.type-card h3 { font: 750 22px var(--a-font); letter-spacing: -.02em; }
.ty-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.ty-tag { font: 600 13.5px var(--a-font); color: var(--aoj-ink); }
.type-scale { margin: 14px 0 6px; }
.ts-track { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #1ca0ef, #5b6dff 50%, var(--aoj-blue)); }
.ts-track i { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 0 4px var(--aoj-blue), 0 4px 12px rgba(0, 0, 0, .35); }
.ts-l { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 8px; font: 750 11px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink3); }
.ty-sec { margin-top: 14px; }
.ty-lab { display: flex; align-items: center; gap: 7px; font: 750 11px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink2); margin-bottom: 7px; }
.ty-lab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ty-obs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ty-obs li { position: relative; padding: 9px 12px 9px 28px; border-radius: 12px; background: var(--a-card2); font: 550 14px/1.4 var(--a-font); color: var(--a-ink); }
.ty-obs li::before { content: ""; position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--aoj-blue); }
.ty-note { font: 500 13.5px/1.5 var(--a-font); color: var(--a-ink); padding: 10px 12px; border-radius: 12px; background: var(--a-card2); }
.ty-emph { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--a-card2); }
.ty-emph .ty-lab { margin-bottom: 9px; }
.ty-bar { display: flex; gap: 3px; height: 12px; border-radius: 99px; overflow: hidden; }
.ty-bar i:first-child { background: #1ca0ef; } .ty-bar i:last-child { background: var(--aoj-blue); }
.ty-leg { display: grid; gap: 4px; margin-top: 9px; }
.ty-leg span { display: flex; align-items: center; gap: 8px; font: 550 13.5px var(--a-font); color: var(--a-ink); }
.ty-leg b { font: 800 14px var(--a-font); min-width: 38px; }
.ty-leg i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .ty-leg i.s { background: #1ca0ef; } .ty-leg i.p { background: var(--aoj-blue); }
.ty-emph small { display: block; margin-top: 8px; font: 500 12px/1.4 var(--a-font); color: var(--a-ink3); }
.type-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--a-line); }
.tf-h { font: 650 13.5px var(--a-font); color: var(--a-ink); margin-bottom: 10px !important; }
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tf { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tf.wide { grid-column: 1 / -1; }
.tf > span:first-child { font: 600 12px var(--a-font); color: var(--a-ink2); }
.tf-in { display: flex; align-items: center; height: 44px; border-radius: 12px; background: var(--a-card2); border: 1px solid var(--a-line); padding: 0 10px 0 12px; }
.tf-in:focus-within { outline: 2px solid var(--a-blue); border-color: transparent; }
.tf-in input, .tf-in select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--a-ink); font: 600 15px var(--a-font); outline: none; height: 100%; }
.tf-in select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.tf-in em { font: 600 12px var(--a-font); font-style: normal; color: var(--a-ink3); }
.tf-in select[name="sjUnit"] { flex: 0 0 auto; width: auto; padding: 0 2px 0 8px; font: 650 13px var(--a-font); color: var(--a-ink2); border-left: 1px solid var(--a-line); height: 26px; }
.tf-ref { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tf-ref > span { font: 600 12px var(--a-font); color: var(--a-ink2); margin-right: 2px; }
.tf-pill { position: relative; cursor: pointer; }
.tf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tf-pill span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--a-card2); border: 1px solid var(--a-line); font: 650 13.5px var(--a-font); color: var(--a-ink2); }
.tf-pill input:checked + span { background: var(--a-ink); border-color: var(--a-ink); color: var(--a-bg); }
.tf-pill input:focus-visible + span { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.type-foot { font: 500 12px/1.5 var(--a-font); color: var(--a-ink3); margin-top: 12px !important; }

/* Coach report header */
.rep-head { position: relative; padding: 18px 20px 20px; border-radius: 28px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(35, 61, 255, .55), transparent 55%), linear-gradient(160deg, #0b1650, var(--aoj-navy) 72%); }
.rep-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rep-ve { display: inline-flex; align-items: center; gap: 8px; font: 750 13px var(--a-font); color: #fff; }
.rep-ve img { height: 16px; width: auto; }
.rep-brand .aoj-pb { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.rep-main { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.rep-id { flex: 1; min-width: 0; }
.rep-kind { font: 800 11px var(--a-font); letter-spacing: .16em; text-transform: uppercase; color: #9fb0ff; }
.rep-head h1 { font: 800 30px/1.08 var(--a-font); letter-spacing: -.03em; color: #fff; margin-top: 4px; }
.rep-sub { font: 500 13.5px/1.4 var(--a-font); color: rgba(255, 255, 255, .72); margin-top: 5px !important; }
.rep-score { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.rep-ring-l { font: 700 9.5px var(--a-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-top: 2px; white-space: nowrap; }
.rep-lvl { font: 650 12.5px/1.35 var(--a-font); color: rgba(255, 255, 255, .85); text-align: center; }
.rep-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rep-head .ct-btn { background: rgba(255, 255, 255, .12); color: #fff !important; }
.rep-head .ct-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.rep-head .dl.up { color: #6ef0a6; } .rep-head .dl.down { color: #ff9b91; }
@media (max-width: 600px) { .rep-head h1 { font-size: 25px; } .rep-score .ct-ring { --sz: 104px !important; } .rep-acts .ct-btn { flex: 1 1 auto; } }
.ct-ring { position: relative; width: var(--sz); height: var(--sz); flex-shrink: 0; }
.ct-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ct-ring .trk { fill: none; stroke: rgba(127, 127, 127, .22); stroke-width: 7; }
.ct-ring .fill { fill: none; stroke: #1ca0ef; stroke-width: 7; stroke-linecap: round; }
.ct-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ct-ring b { font: 800 calc(var(--sz) * .3)/1 var(--a-font); letter-spacing: -.035em; }
.ct-ring.bare b { font-size: calc(var(--sz) * .36); }
.ct-ring span { font: 600 calc(var(--sz) * .066) var(--a-font); color: inherit; opacity: .7; margin-top: calc(var(--sz) * .04); white-space: nowrap; letter-spacing: .01em; }
.rep-grid { margin-top: 14px; }

/* Three lenses */
.lens-card .syn { font: 500 15.5px/1.5 var(--a-font); color: var(--a-ink); margin-bottom: 14px !important; }
.lens-card .syn b { color: var(--aoj-ink); }
.lens-bars { display: grid; gap: 10px; }
.lens-row { padding: 12px 14px; border-radius: 16px; background: var(--a-card2); }
.lens-row.is-top { background: linear-gradient(150deg, var(--aoj-soft2), var(--a-card2)); box-shadow: inset 0 0 0 1.5px var(--aoj-blue); }
.lens-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lens-head b { font: 750 15px var(--a-font); }
.lens-short { font: 500 12.5px var(--a-font); color: var(--a-ink3); }
.lens-status { margin-left: auto; font: 750 11.5px var(--a-font); letter-spacing: .03em; padding: 3px 8px; border-radius: 7px; }
.s-strength .lens-status { background: rgba(61, 220, 132, .14); color: var(--a-good-ink); }
.s-watch .lens-status { background: rgba(255, 181, 71, .16); color: var(--a-warn-ink); }
.s-limiter .lens-status { background: rgba(255, 107, 94, .16); color: var(--a-bad-ink); }
.lens-track { height: 10px; border-radius: 99px; background: var(--a-track); overflow: hidden; }
.lens-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3a52ff, var(--aoj-blue)); }
.s-strength .lens-track i { background: linear-gradient(90deg, #3a52ff, #6f84ff); }
.lens-track.before i { background: var(--a-ink3); opacity: .6; }
.lens-meta { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
.lens-meta span { font: 800 15px var(--a-font); }
.lens-meta small { font: 500 12px var(--a-font); color: var(--a-ink3); }
/* Ty's four lenses (2026-10-19): weights, estimated vertical + AOJ designation, set-sex prompt, development opportunity */
.lens-w { font: 650 11.5px var(--a-font); color: var(--a-ink3); margin-left: 4px; }
.lens-row.s-na .lens-track i { width: 0 !important; }
.q-vert { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--a-card2); }
.q-vert b { font: 800 24px var(--a-font); letter-spacing: -.02em; }
.q-vert b small { font: 700 12px var(--a-font); color: var(--a-ink2); }
.q-vert span { font: 600 12.5px var(--a-font); color: var(--a-ink2); }
.q-desig { margin-left: auto; font: 700 12px var(--a-font); font-style: normal; color: #fff; background: var(--a-blue); padding: 5px 10px; border-radius: 99px; }
.q-desig small { font: 800 9.5px var(--a-font); letter-spacing: .08em; opacity: .8; margin-right: 3px; }
.q-desig.d-developing { background: var(--a-card3); color: var(--a-ink); }
.q-sex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--a-blue); font: 500 13px/1.4 var(--a-font); color: var(--a-ink2); }
.q-sex span { flex: 1 1 220px; }
.q-opp { display: grid; gap: 2px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(28, 160, 239, .35); background: rgba(28, 160, 239, .08); }
.q-opp span { font: 700 10.5px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-blue); }
.q-opp b { font: 700 15px var(--a-font); color: var(--a-ink); }
.q-opp small { font: 500 13px/1.4 var(--a-font); color: var(--a-ink2); }
.lens-bars.compact .lens-row { padding: 10px 12px; }
.lens-bars.compact .lens-head { margin-bottom: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; font: 600 12px var(--a-font); color: var(--a-ink2); align-items: center; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 22px; height: 22px; border-radius: 7px; }
.legend i svg { width: 13px; height: 13px; }
.legend .lg-n { color: var(--a-ink3); font-weight: 500; }

/* Key positions */
.kp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kp { margin: 0; border-radius: 14px; background: var(--aoj-navy); padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; }
[data-theme="light"] .kp { background: #0a1236; }
.kp svg { width: 100%; aspect-ratio: 1; display: block; }
.kp .b { stroke: #6f84ff; stroke-linecap: round; }
.kp .b.far { stroke: #3a4cc9; opacity: .75; }
.kp .hd { fill: #6f84ff; }
.kp .j { fill: #fff; }
.kp .floor { stroke: rgba(255, 255, 255, .18); }
.kp.has-fault { box-shadow: inset 0 0 0 1.5px var(--a-bad); }
.kp figcaption { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.kp figcaption b { font: 700 11.5px var(--a-font); color: #fff; }
.kp figcaption span { font: 500 10.5px var(--a-font); color: rgba(255, 255, 255, .55); }
.kp figcaption em { font: 700 10px/1.2 var(--a-font); font-style: normal; color: #ff9b91; margin-top: 2px; }
.kp-note { font: 500 12px/1.45 var(--a-font); color: var(--a-ink3); margin-top: 10px !important; }

/* Limiters */
.lim { background: var(--a-card); border-radius: 24px; padding: 18px; box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .lim { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.lim.root { box-shadow: inset 0 0 0 1.5px var(--aoj-edge), var(--a-card-shadow); }
.lim-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lim-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--a-ink); color: var(--a-bg); font: 800 14px var(--a-font); margin-right: 2px; }
.lim h3 { font: 750 21px/1.2 var(--a-font); letter-spacing: -.02em; margin-top: 12px; }
.lim-sec { margin-top: 14px; }
.lim-lab { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 800 11px var(--a-font); letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink3); margin-bottom: 5px; }
.lim-lab > svg { width: 15px; height: 15px; }
.tag-txt { font: 700 11px var(--a-font); letter-spacing: 0; text-transform: none; padding: 2px 7px; border-radius: 6px; }
.tag-txt.seen { background: rgba(28, 160, 239, .14); color: #1ca0ef; }
.lim-sec > p { font: 500 15px/1.5 var(--a-font); color: var(--a-ink); }
.cause-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.cause-list li { display: flex; gap: 10px; align-items: flex-start; }
.cause-list li p { font: 500 14.5px/1.45 var(--a-font); color: var(--a-ink); }
.cause-list li small { display: block; font: 500 12.5px/1.4 var(--a-font); color: var(--a-ink2); margin-top: 2px; }
.lim-prio { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--a-card2); }
.lim-prio span { display: block; font: 800 11px var(--a-font); letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink3); margin-bottom: 3px; }
.lim-prio p { font: 650 15px/1.45 var(--a-font); color: var(--a-ink); }
.lim .p-cue { margin-top: 12px; border-radius: 16px; padding: 12px 14px; font: 600 15.5px/1.4 var(--a-font); }
.lim .p-cue span, .sh-focus .p-cue span { font: 650 12px var(--a-font); }
.also summary { cursor: pointer; font: 700 15px var(--a-font); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.also summary::-webkit-details-marker { display: none; }
.also summary::after { content: "+"; font: 600 20px var(--a-font); color: var(--a-ink3); }
.also[open] summary::after { content: "–"; }
.also ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.also li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 14px var(--a-font); }
.also li small { color: var(--a-ink3); font-size: 12px; }

.ve-tile { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(150deg, #1ca0ef, #0b6fbd); flex-shrink: 0; }
.ve-tile img { width: 16px; height: auto; display: block; }

/* Fixes: one list under the Jump Analyzer (no "who gives what") */
.fix { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--a-card2); margin-top: 10px; }
.fix-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(150deg, #1ca0ef, #0b6fbd); color: #fff; font: 800 13px var(--a-font); }
.fix-b { min-width: 0; }
.fix-t { display: block; font: 700 15.5px/1.3 var(--a-font); }
.fix-type { display: block; font: 600 11.5px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.fix p { font: 500 13.5px/1.45 var(--a-font); color: var(--a-ink2); margin-top: 6px !important; }
.watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.watch li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.45 var(--a-font); }
.watch li svg { width: 17px; height: 17px; color: #1ca0ef; margin-top: 2px; }

/* Going deeper */
.deeper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.deep { border-radius: 24px; padding: 18px; color: #fff; }
.deep.aoj { background: radial-gradient(120% 120% at 100% 0%, rgba(35, 61, 255, .6), transparent 60%), var(--aoj-navy); box-shadow: inset 0 0 0 1px rgba(110, 126, 255, .3); }
.deep.ve { background: radial-gradient(120% 100% at 0% 0%, #3fb5f6 0%, rgba(63, 181, 246, 0) 60%), linear-gradient(165deg, #1ca0ef 0%, #1388d9 55%, #0b6fbd 100%); }
.deep-h { display: flex; align-items: center; gap: 9px; font: 800 11.5px var(--a-font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.deep.ve .ve-tile { background: rgba(255, 255, 255, .2); }
.deep h3 { font: 750 20px/1.2 var(--a-font); margin-top: 12px; color: #fff; }
.deep p { font: 500 14px/1.5 var(--a-font); color: rgba(255, 255, 255, .86); margin: 6px 0 14px !important; }
.deep .aoj-btn, .deep .ct-btn { width: 100%; }
.deep.ve .ct-btn.primary { background: #fff; color: var(--a-blue-ink) !important; }

/* Compare */
.cmp-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.cmp-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.cmp-lab { font: 800 11px var(--a-font); letter-spacing: .14em; text-transform: uppercase; color: var(--a-ink3); }
.cmp-d { font: 650 14px var(--a-font); }
.cmp-lim { min-height: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cmp-lim small { font: 600 11px var(--a-font); color: var(--a-ink3); }
.cmp-arrow svg { width: 26px; height: 26px; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; }
.cmp-lenses { display: grid; gap: 14px; }
.cl-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.cl-row > b { font: 700 14.5px var(--a-font); }
.cl-bars { display: grid; gap: 5px; }
.cl-bars .lens-track { height: 8px; }
.cl-v { font: 650 13px var(--a-font); color: var(--a-ink2); }
.cmp-lists { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .cmp-lists { grid-template-columns: repeat(3, 1fr); } }
.cl h3 { display: flex; align-items: center; gap: 8px; font: 750 16px var(--a-font); margin-bottom: 10px; }
.cl h3 svg { width: 18px; height: 18px; }
.cl h3 span { margin-left: auto; font: 800 13px var(--a-font); color: var(--a-ink3); }
.cl.fixed h3 svg { color: var(--a-good-ink); } .cl.still h3 svg { color: var(--a-warn-ink); } .cl.fresh h3 svg { color: var(--a-bad-ink); }
.cl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cl li { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font: 500 14px/1.35 var(--a-font); }
.cl li small { font: 650 12px var(--a-font); color: var(--a-ink3); }
.cl li small.up { color: var(--a-good-ink); }

/* Shareable athlete report */
.share-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--a-card2); margin-bottom: 14px;
  font: 600 13.5px var(--a-font); color: var(--a-ink2); }
.share-bar > span { display: inline-flex; align-items: center; gap: 8px; }
.share-bar > span svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-card { background: var(--a-card); border-radius: 28px; padding: 20px; box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .sh-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.sh-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sh-brand .rep-ve { color: var(--a-ink); }
[data-theme="light"] .sh-brand .rep-ve img { filter: brightness(0); }
.sh-hi { font: 750 22px/1.2 var(--a-font); letter-spacing: -.02em; margin-top: 18px !important; }
.sh-score { display: flex; align-items: center; gap: 18px; margin: 14px 0 16px; }
.sh-score > div:last-child b { display: block; font: 750 20px var(--a-font); }
.sh-score > div:last-child span { font: 600 13.5px var(--a-font); color: var(--a-ink2); }
.sh-card h2 { font: 750 17px var(--a-font); margin: 20px 0 10px; }
.sh-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-wins li { display: flex; align-items: center; gap: 10px; font: 550 14.5px var(--a-font); }
.sh-wins svg { width: 18px; height: 18px; color: var(--a-good-ink); background: rgba(61, 220, 132, .14); border-radius: 50%; padding: 3px; box-sizing: content-box; }
.sh-focus { margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--a-card2); }
.sh-focus.next { background: transparent; box-shadow: inset 0 0 0 1px var(--a-line); }
.sh-lab { font: 800 11px var(--a-font); letter-spacing: .14em; text-transform: uppercase; color: #1ca0ef; }
.sh-focus h3 { font: 750 19px/1.25 var(--a-font); margin-top: 6px; }
.sh-focus > p { font: 500 14.5px/1.5 var(--a-font); color: var(--a-ink2); margin-top: 6px !important; }
.sh-focus .p-cue { margin-top: 12px; border-radius: 14px; padding: 11px 13px; font: 600 15px/1.4 var(--a-font); }
.sh-note { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(28, 160, 239, .14), transparent); box-shadow: inset 0 0 0 1px rgba(28, 160, 239, .25); }
.sh-note span { font: 750 12px var(--a-font); color: #1ca0ef; }
.sh-note p { font: 550 15px/1.45 var(--a-font); margin-top: 4px !important; }
.sh-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--a-line); font: 650 12px var(--a-font); color: var(--a-ink3); }

/* New assessment */
.nw-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 14px 0 16px; }
.nw-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; background: var(--a-card); font: 650 13px var(--a-font); color: var(--a-ink3); }
.nw-steps span { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--a-card3); font: 800 12px var(--a-font); }
.nw-steps li.on { color: var(--a-ink); box-shadow: inset 0 0 0 1.5px #1ca0ef; }
.nw-steps li.on span { background: #1ca0ef; color: #fff; }
.nw-steps li.done span { background: var(--a-good); color: #04210f; }
.nw-pick { display: grid; gap: 8px; }
.add-form { margin-top: 10px; }
.nw-up { display: flex; flex-direction: column; gap: 12px; }
.nw-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border-radius: 20px; border: 2px dashed var(--a-line); }
.nw-zone svg { width: 30px; height: 30px; color: #1ca0ef; }
.nw-zone b { font: 700 16px var(--a-font); }
.nw-zone span { font: 500 13px var(--a-font); color: var(--a-ink2); }
.nw-pv { font: 500 13px/1.45 var(--a-font); color: var(--aoj-ink); background: var(--aoj-soft); padding: 10px 12px; border-radius: 12px; }
.nw-tips { margin: 2px 0 0; padding-left: 18px; font: 500 13.5px/1.6 var(--a-font); color: var(--a-ink2); }
.nw-run { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 28px 18px; }
.nw-run[hidden], .nw-up[hidden] { display: none; }
.nw-anim .nw-ve { width: 64px; height: 64px; border-radius: 20px; animation: ctPulse 1.2s var(--a-ease) infinite; }
.nw-anim .nw-ve img { width: 38px; }
@keyframes ctPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(35, 61, 255, .5); } 50% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(35, 61, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .nw-anim .nw-ve { animation: none; } }
.nw-run > b { font: 750 18px var(--a-font); }
.nw-prog { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; width: 100%; max-width: 320px; text-align: left; }
.nw-prog li { display: flex; align-items: center; gap: 10px; font: 600 14px var(--a-font); color: var(--a-ink3); }
.nw-prog li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--a-card3); flex-shrink: 0; }
.nw-prog li.on { color: var(--a-ink); } .nw-prog li.on::before { background: var(--aoj-blue); box-shadow: 0 0 0 4px var(--aoj-soft2); }
.nw-prog li.done { color: var(--a-ink2); } .nw-prog li.done::before { background: var(--a-good); }

/* Plans */
.pl-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--a-card2); margin: 18px auto 16px; width: max-content; }
.pl-toggle button { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 99px; border: 0; background: transparent; color: var(--a-ink2);
  font: 700 14px var(--a-font); cursor: pointer; }
.pl-toggle button svg { width: 17px; height: 17px; }
.pl-toggle button.on { background: var(--a-ink); color: var(--a-bg); }
.pl-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .pl-grid.n3 { grid-template-columns: repeat(3, 1fr); } .pl-grid.n2 { grid-template-columns: repeat(2, 1fr); } }
.pl-card { position: relative; display: flex; flex-direction: column; background: var(--a-card); border-radius: 24px; padding: 20px; box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .pl-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.pl-card.pop { box-shadow: inset 0 0 0 2px #1ca0ef; }
.pl-pop { position: absolute; top: -11px; right: 18px; height: 22px; padding: 0 10px; border-radius: 99px; background: #1ca0ef; color: #fff; font: 750 11.5px/22px var(--a-font); }
.pl-card h3 { font: 750 18px var(--a-font); }
.pl-p { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; }
.pl-p b { font: 800 38px/1 var(--a-font); letter-spacing: -.04em; }
.pl-p span { font: 600 14px var(--a-font); color: var(--a-ink2); }
.pl-s { font: 600 13.5px/1.4 var(--a-font); color: var(--a-ink2); margin-top: 6px !important; }
.pl-card ul { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 9px; }
.pl-card li { display: flex; gap: 9px; align-items: flex-start; font: 500 14px/1.4 var(--a-font); }
.pl-card li svg { width: 17px; height: 17px; color: var(--a-good-ink); margin-top: 1px; }
.pl-card .ct-btn { margin-top: auto; width: 100%; }
.pl-extra { text-align: center; font: 500 14px var(--a-font); color: var(--a-ink2); margin: 16px 0 !important; }
.pl-extra b { color: var(--a-ink); }
.pl-cmp h3 { font: 750 17px var(--a-font); margin-bottom: 10px; }
.pl-cmp table { width: 100%; border-collapse: collapse; font: 500 14px/1.35 var(--a-font); }
.pl-cmp th { text-align: center; font: 750 12px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink3); padding: 8px 6px; }
.pl-cmp td { padding: 10px 6px; border-top: 1px solid var(--a-line); }
.pl-cmp td:not(:first-child) { text-align: center; width: 76px; }
.pl-cmp td svg { width: 18px; height: 18px; color: var(--a-good-ink); }
.pl-cmp .dash { color: var(--a-ink3); }
.pl-note { text-align: center; font: 500 12.5px var(--a-font); color: var(--a-ink3); margin-top: 14px !important; }

/* Toast */
.ct-toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 90; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: 14px; background: var(--a-ink); color: var(--a-bg); font: 600 14px/1.4 var(--a-font); opacity: 0; transition: opacity .25s, transform .25s var(--a-ease);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3); text-align: center; }
.ct-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1024px) { .ct-toast { bottom: 28px; } }

/* Intro */
.ct-intro { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: rgba(2, 4, 14, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ct-intro-card { width: 100%; max-width: 460px; border-radius: 28px; padding: 24px; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, rgba(35, 61, 255, .55), transparent 60%), linear-gradient(165deg, #0b1650, var(--aoj-navy) 70%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(110, 126, 255, .3); }
.ci-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ci-brand > img { height: 22px; width: auto; }
.ci-x { width: 1px; height: 26px; background: rgba(255, 255, 255, .2); }
.ci-brand .aoj-pb { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }
.ci-kick { margin-top: 22px !important; font: 800 11px var(--a-font); letter-spacing: .16em; text-transform: uppercase; color: #9fb0ff; }
.ct-intro-card h2 { font: 800 27px/1.12 var(--a-font); letter-spacing: -.025em; margin-top: 6px; color: #fff; }
.ct-intro-card p { font: 500 15px/1.5 var(--a-font); color: rgba(255, 255, 255, .84); margin-top: 10px !important; }
.ct-intro-card .ci-sm { font-size: 13px; color: rgba(255, 255, 255, .6); }
.ci-acts { display: grid; gap: 8px; margin-top: 20px; }
.ci-acts .ct-btn { width: 100%; white-space: normal; text-align: center; }
.ct-intro { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 360px) { .ct-intro { padding: 10px; } .ct-intro-card { padding: 20px 16px; border-radius: 22px; } .ct-intro-card h2 { font-size: 23px; } .ct-intro-card p { font-size: 14px; } .ci-brand .aoj-pb.lg { padding: 6px 12px 6px 6px; } .ci-brand .aoj-pb.lg b { font-size: 12px; } }
.ci-acts .ct-btn:not(.primary) { background: rgba(255, 255, 255, .1); color: #fff !important; }

/* Three-lens panel inside the coach view of a real analysis */
.cl-panel { display: grid; gap: 14px; margin: 14px 0 6px; }
.cl-panel .sec-h { margin-top: 4px; }
.cl-panel svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-panel .lim h3, .cl-panel .type-card h3 { color: var(--a-ink); }

/* Print: the coach report as a clean document */
@media print {
  @page { size: Letter; margin: 0.45in;
    @bottom-left { content: "VolleyElite Jump Analyzer \00B7  Powered by The Art of Jumping"; font: 600 7.5pt Geist, Helvetica, Arial, sans-serif; color: #6b7280; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 600 7.5pt Geist, Helvetica, Arial, sans-serif; color: #6b7280; } }
  :root, [data-theme] { color-scheme: light !important; }   /* the dark scheme paints the page margins dark */
  html, body.ct { background: #fff !important; }
  body.ct { color: #0b0d10; padding: 0 !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-theme] { --a-bg: #fff; --a-card: #fff; --a-card2: #f3f4f6; --a-card3: #e5e7eb; --a-ink: #0b0d10; --a-ink2: #4b5563; --a-ink3: #6b7280; --a-line: #e5e7eb; --a-track: #e5e7eb;
    --a-good-ink: #15803D; --a-warn-ink: #B45309; --a-bad-ink: #C2410C; --aoj-ink: #233DFF; --aoj-soft: rgba(35,61,255,.07); --aoj-soft2: rgba(35,61,255,.12); --aoj-surface: #eef0ff; --aoj-edge: rgba(35,61,255,.3); --a-card-shadow: none; }
  body.ct::after, .app-top, .app-tabs, .ct-toast, .ct-back, .rep-acts, .ct-intro, .co-foot p, .ct-actions, .share-bar, .type-form, .ct-skip { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ct-wrap { max-width: none; padding: 0; }
  .ct-grid2, .ct-col { display: block !important; }
  .ct-col > *, .rep-grid > .ct-col { margin-bottom: 12px; }
  .ct-card, .lim, .snap-tile, .ct-ath { box-shadow: none !important; border: 1px solid #e5e7eb; }
  .type-card { background: #f7f8ff !important; border-color: #c9cfff; }
  .aoj-check { box-shadow: none !important; }
  .ts-track i { box-shadow: none !important; border: 4px solid #233DFF; }
  .lim { break-inside: auto; }
  .rep-head, .lens-row, .fix, .kp-card, .kp-strip, .lim-sec, .lim-prio, .p-cue, .aoj-check, .cause-list li, .lim-top, .lim h3, .ty-obs li, .ty-emph, .deep, .watch li { break-inside: avoid; }
  .type-card, .lens-card, .deeper, .ct-card:has(.watch) { break-inside: avoid; }
  .sec-h, .ct-kick, .lim-top, .lim h3 { break-after: avoid; }
  .sec-h { break-after: avoid; }
  .deeper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .co-foot { display: none !important; }   /* both names print in the page margin of every page instead */
  .co-foot .co-ve img, .sh-brand .rep-ve img { filter: brightness(0); }
  /* compact first page: header, three lenses and key positions together */
  .rep-head { padding: 14px 18px 16px !important; }
  .rep-main { margin-top: 8px !important; }
  .lens-card .syn { font-size: 13.5px !important; margin-bottom: 10px !important; }
  .lens-bars { gap: 6px !important; }
  .lens-row { padding: 8px 12px !important; }
  .legend { margin-top: 10px !important; }
  .kp svg { max-height: 1.2in; }
  .rep-score .ct-ring { --sz: 100px !important; }
  .kp-legend { margin-top: 6px; }
  .kp-note { margin-top: 6px !important; font-size: 10.5px !important; }
}

/* Key positions: the target pose on a plant fault (dashed) and the hip-drive arrow */
.kp .tgt .g { stroke: #3DDC84; stroke-linecap: round; opacity: .9; }
.kp .tgt .gh { fill: none; stroke: #3DDC84; opacity: .9; }
.kp .tgt .arw { stroke: #3DDC84; stroke-linecap: round; }
.kp .tgt .arw-halo { stroke: #050819; stroke-linecap: round; opacity: .85; }
.kp .arw-h { fill: #3DDC84; }
.kp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 600 11.5px var(--a-font); color: var(--a-ink2); }
.kp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.kp-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid #6f84ff; border-radius: 2px; }
.kp-legend .lg-dash { border-top: 3px dashed #3DDC84; }
.kp-legend .lg-arw { position: relative; border-top: 3px solid #3DDC84; width: 18px; margin-right: 4px; }
.kp-legend .lg-arw::after { content: ""; position: absolute; right: -6px; top: -6.5px; border: 5px solid transparent; border-left: 7px solid #3DDC84; border-right: 0; }
@media (max-width: 520px) { .kp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kp { padding: 8px 8px 10px; } .kp figcaption b { font-size: 13px; } .kp figcaption span { font-size: 11.5px; } .kp figcaption em { font-size: 11.5px; } }
.kp-strip { align-items: stretch; }

/* Roster tools: search + sort, and the team focus line */
.ct-tools { display: flex; gap: 8px; margin-top: 10px; }
.ct-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--a-card); box-shadow: var(--a-card-shadow); min-width: 0; }
[data-theme="dark"] .ct-search, [data-theme="dark"] .ct-sort select { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ct-search svg { width: 17px; height: 17px; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ct-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--a-ink); font: 500 14.5px var(--a-font); outline: none; }
.ct-search:focus-within { outline: 2px solid var(--a-blue); }
.ct-sort select { height: 42px; padding: 0 30px 0 12px; border-radius: 12px; border: 0; background: var(--a-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A919C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--a-ink); font: 600 13.5px var(--a-font); appearance: none; -webkit-appearance: none; cursor: pointer; box-shadow: var(--a-card-shadow); }
.ct-sort select:focus-visible { outline: 2px solid var(--a-blue); }
.ct-ath[hidden] { display: none; }
.team-focus { margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: var(--aoj-blue); color: #fff; }
.team-focus span { display: block; font: 800 10px var(--a-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.team-focus b { display: block; font: 700 14.5px/1.3 var(--a-font); margin-top: 3px; color: #fff; }
.team-focus small { display: block; font: 500 12px/1.4 var(--a-font); color: rgba(255, 255, 255, .82); margin-top: 4px; }
@media (max-width: 420px) { .ct-sort select { max-width: 150px; } }

/* Small phones (and narrow panes): nothing may push the page sideways */
.ct-ath-c .lens-chip, .ct-ath-c .type-chip { max-width: 100%; }
@media (max-width: 380px) {
  .ct-snap { grid-template-columns: minmax(0, 1fr); }
  .sh-score { flex-direction: column; text-align: center; gap: 10px; }
  .ct-prof .lens-chip { height: auto; min-height: 24px; white-space: normal; padding-top: 3px; padding-bottom: 3px; line-height: 1.25; }
}
@media (max-width: 340px) {
  .nw-steps li { flex: 0 0 auto; padding: 8px; }
  .nw-steps li.on { flex: 1; }
  .nw-steps li:not(.on) { font-size: 0; gap: 0; }
  .nw-steps li:not(.on) span { font-size: 12px; }
}

/* ── Demo account (/coach-demo): empty roster and real uploads ── */
.ct [hidden] { display: none !important; }
.ct-start { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ct-start h2 { margin: 0; font: 700 18px var(--a-font); color: var(--a-ink); }
.ct-start p { margin: 0; }
.nw-file { position: relative; cursor: pointer; transition: border-color .15s var(--a-ease, ease); }
.nw-file:hover { border-color: var(--a-blue); }
.nw-file:focus-within { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.nw-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.nw-picked { margin: 0; text-align: center; font: 600 14px var(--a-font); color: var(--a-ink); overflow-wrap: anywhere; }
.nw-key small { font: 500 12px var(--a-font); color: var(--a-ink3); }
.nw-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(239, 68, 68, .12); background: color-mix(in srgb, var(--a-bad) 14%, transparent); border: 1px solid color-mix(in srgb, var(--a-bad) 40%, transparent); color: var(--a-ink); font: 600 14px/1.45 var(--a-font); white-space: pre-line; }
.nw-wait { margin: 12px 0 0; text-align: center; font: 500 13px var(--a-font); color: var(--a-ink2); }
.nw-file.drag { border-color: var(--a-blue); border-style: solid; background: rgba(28, 160, 238, .10); }

.ts-l span:first-child { text-align: left; } .ts-l span:nth-child(2) { text-align: center; } .ts-l span:last-child { text-align: right; }   /* Hybrid label sits exactly under the middle */

/* New assessment spacing (2026-10-10): no focus box on the page title (it is focused for screen readers after navigation), room between sections */
.ct-main h1[tabindex="-1"]:focus { outline: none; }
.nw .ct-hello h1 { margin-top: 6px; }
.nw .nw-steps { margin: 18px 0 22px; }
.nw .nw-pick { gap: 10px; }
.nw .sec-h { margin: 30px 2px 12px; }
.nw .add-form { margin-top: 0; }
.nw .nw-up, .nw .nw-run { margin-top: 2px; }

/* Date filmed: set it on upload (an older clip), change it on the report */
.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; }
.nw-date { max-width: 320px; margin-bottom: 14px; }
.nw-date .tf-in input { color-scheme: inherit; }
.nw-date small { font: 500 12px/1.4 var(--a-font); color: var(--a-ink3); }
.rep-date-edit { margin-left: 6px; padding: 3px 10px; min-height: 26px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font: 600 12px var(--a-font); cursor: pointer; vertical-align: middle; }
.rep-date-edit:hover, .rep-date-edit.on { background: #fff; color: #0a2540; border-color: #fff; }
.rep-date-edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rep-date-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
.rep-date-form input { height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff; font: 600 13px var(--a-font); padding: 0 8px; color-scheme: dark; }
@media print { .rep-date-edit, .rep-date-form { display: none !important; } }

/* Scoring comparison (test, staging): current method vs Ty's quality method */
.qcmp { margin-bottom: 18px; display: grid; gap: 14px; }
.qcmp-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.qcmp-note { font: 600 12px var(--a-font); color: var(--a-ink3); }
.qcmp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qcmp-col { border: 1px solid var(--a-line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.qcmp-col.q { border-color: var(--aoj-edge, var(--a-line)); background: var(--aoj-soft, transparent); }
.qcmp-lab { font: 700 11px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink2); }
.qcmp-n { font: 800 40px/1 var(--a-font); font-variant-numeric: tabular-nums; }
.qcmp-col small { font: 500 12.5px/1.4 var(--a-font); color: var(--a-ink3); }
.qc-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.qc-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font: 600 13px var(--a-font); }
.qc-list b { text-align: right; font-variant-numeric: tabular-nums; }
.qc-bar { height: 8px; border-radius: 99px; background: var(--a-track, var(--a-line)); overflow: hidden; }
.qc-bar i { display: block; height: 100%; border-radius: 99px; background: var(--a-blue); }
.qcmp-col.q .qc-bar i { background: var(--aoj-blue, var(--a-blue)); }
.qc-p { margin: 8px 0 0; font: 500 13px/1.5 var(--a-font); color: var(--a-ink2); }
.qcmp-d summary { cursor: pointer; font: 700 13.5px var(--a-font); }
.qc-tw { overflow-x: auto; margin-top: 10px; }
.qc-t { width: 100%; border-collapse: collapse; font: 500 13px/1.45 var(--a-font); }
.qc-t th { text-align: left; font: 700 11px var(--a-font); letter-spacing: .06em; text-transform: uppercase; color: var(--a-ink3); padding: 6px 8px; border-bottom: 1px solid var(--a-line); }
.qc-t td { padding: 8px; border-bottom: 1px solid var(--a-line); vertical-align: top; }
.qc-id { font-weight: 700; white-space: nowrap; }
.qc-s { white-space: nowrap; }
.qc-s small, .qc-why { display: block; font: 500 11.5px var(--a-font); color: var(--a-ink3); }
.qc-perf { margin: 0; font: 500 12.5px var(--a-font); color: var(--a-ink3); }
@media (max-width: 720px) { .qcmp-cols { grid-template-columns: minmax(0, 1fr); } .qc-list li { grid-template-columns: 96px minmax(0, 1fr) 30px; } }
@media print { .qcmp { display: none !important; } }

/* Scoring mode tabs (test): Current method | Quality method (Ty's proposal) */
.mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin: 0 0 16px; border-radius: 16px; background: var(--a-card2); border: 1px solid var(--a-line); width: fit-content; max-width: 100%; }
.mode-tabs button { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 9px 16px; min-height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--a-ink2); font: 700 14px var(--a-font); cursor: pointer; }
.mode-tabs button b { font: 800 16px var(--a-font); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.mode-tabs button small { flex-basis: 100%; font: 600 11px var(--a-font); color: var(--a-ink3); text-align: left; }
.mode-tabs button.on { background: var(--a-card); color: var(--a-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); outline: 1px solid var(--a-line); }
.mode-tabs button[data-mode="quality"].on { outline-color: var(--aoj-edge, var(--a-blue)); }
.mode-tabs button:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.roster-h { margin-top: 22px; }
.prof-simple { display: grid; gap: 14px; max-width: 760px; }
.q-sc { font-variant-numeric: tabular-nums; }
.q-id { font: 700 12px var(--a-font); color: var(--a-ink3); margin-left: 4px; }
.q-note { margin: 0; font: 500 12.5px/1.45 var(--a-font); color: var(--a-ink3); }
.q-faults { margin: 0; padding-left: 18px; font: 500 14px/1.5 var(--a-font); }
.q-perf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-perf li { display: flex; justify-content: space-between; gap: 12px; font: 500 14px var(--a-font); color: var(--a-ink2); border-bottom: 1px solid var(--a-line); padding-bottom: 8px; }
.q-perf li b { color: var(--a-ink); font-variant-numeric: tabular-nums; }
.del-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; font: 600 13px var(--a-font); }
.ct-btn.danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
@media print { .mode-tabs, .rep-del, .del-confirm { display: none !important; } }
.ct-ath > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; }

/* Slow-motion view on the coach report (same viewer as the athlete report) */
.cmv-card { margin-bottom: 18px; }
.cmv-wait { margin: 0; }
.cmv-plain { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.cmv-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.q-sc { font: 700 13px var(--a-font); color: var(--a-ink2); font-variant-numeric: tabular-nums; align-self: center; }
@media print { .cmv-card { display: none !important; } }

.ct .q-earned { margin: 12px 0 0; font: 500 13px/1.45 var(--a-font); color: var(--a-ink2); }   /* .ct p zeroes margins */
.ct .q-held { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--aoj-soft); color: var(--aoj-ink); font: 600 12.5px/1.45 var(--a-font); }
.ct .q-held b { font-weight: 800; }
.q-earned b { color: var(--a-ink); font-weight: 800; }
.rep-old { margin: -4px 0 16px; font-size: 13px; }

/* ── Team board (David 2026-10-12): most improved, top score, most checks; medals and a crown at 85+ ── */
.tb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 2px 2px; }
.tb-head h1 { font: 800 32px/1.08 var(--a-font); letter-spacing: -.03em; margin-top: 4px; }
.tb-grid { display: grid; gap: 16px; margin-top: 14px; }
@media (min-width: 1024px) { .tb-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.tb-main { display: grid; gap: 12px; min-width: 0; }
.tb-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-sub { margin: -2px 2px 0; font: 500 13px var(--a-font); color: var(--a-ink3); }
.tb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 18px 14px 0; }
.tb-pod { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--a-ink); text-decoration: none; min-width: 0; }
.tb-pod b { font: 750 15px var(--a-font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pod .tb-v { font: 800 17px var(--a-font); display: inline-flex; align-items: center; gap: 4px; }
.tb-blk { width: 100%; border-radius: 14px 14px 6px 6px; background: var(--a-card2); display: grid; place-items: center; font: 900 26px var(--a-font); color: var(--a-ink2); }
.tb-pod.p1 .tb-blk { height: 112px; background: linear-gradient(180deg, rgba(245, 197, 66, .28), var(--a-card2)); color: var(--a-ink); }
.tb-pod.p2 .tb-blk { height: 86px; } .tb-pod.p3 .tb-blk { height: 66px; }
.tb-pod:hover .tb-blk { filter: brightness(1.06); }
.tb-list { padding: 0; overflow: hidden; }
.tb-row { display: grid; grid-template-columns: 30px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; color: var(--a-ink); text-decoration: none; }
.tb-row + .tb-row { border-top: 1px solid var(--a-line); }
.tb-row:hover { background: var(--a-card2); }
.tb-row b { font: 650 15px var(--a-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-rk { font: 800 15px var(--a-font); color: var(--a-ink3); text-align: center; }
.tb-row .tb-v { font: 800 17px var(--a-font); display: inline-flex; align-items: center; gap: 4px; }
.tb-v small { font: 600 12px var(--a-font); color: var(--a-ink3); }
.tb-v .up { color: var(--a-good-ink); } .tb-v .down { color: var(--a-bad-ink); }
.tb-side { display: grid; gap: 12px; align-content: start; }
.tb-side .ct-card h2.tb-h { font: 700 17px var(--a-font); letter-spacing: -.01em; margin: 0 0 14px; }
.tb-week { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tb-week li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; font: 500 14px/1.4 var(--a-font); }
.tb-week li > svg, .tb-week li > .tb-up { justify-self: center; }
.tb-up { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #22C55E; color: #fff; }
.tb-up svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-none { margin: 0; }
.tb-empty { display: grid; gap: 10px; justify-items: start; margin-top: 14px; }

/* ══ Coach UI v2 (2026-10-13): Home · Athletes · Upload · Team, tabbed reports. Less text up front, everything one tap away. ══ */
.cx { --cx-r: 20px; }
.cx-hello { margin: 4px 2px 16px; }
.cx-hello p { font: 500 13px var(--a-font); color: var(--a-ink3); }
.cx-hello h1 { font: 800 28px var(--a-font); letter-spacing: -.02em; color: var(--a-ink); margin-top: 2px; display: flex; align-items: center; gap: 10px; }
.cx-hello h1 + p, .cx-sess .cx-hello p { margin-top: 6px; font-size: 14px; line-height: 1.5; max-width: 560px; }
.cx-count { font: 700 14px var(--a-font); background: var(--a-card3); color: var(--a-ink2); border-radius: 99px; padding: 3px 10px; }
.cx-card { background: var(--a-card); border-radius: var(--cx-r); box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .cx-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.cx-pad { padding: 16px 18px; }
.cx-gap { margin-top: 14px; }
.cx-h2 { font: 700 18px var(--a-font); color: var(--a-ink); margin-bottom: 6px; }
.cx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 4px 10px; }
.cx-h h2 { font: 700 13px var(--a-font); letter-spacing: .07em; text-transform: uppercase; color: var(--a-ink3); }
.cx-h h2 small { font-weight: 600; margin-left: 4px; }
.cx-h a, .cx-h .ct-link { font: 600 13px var(--a-font); color: var(--a-blue-ink, var(--a-blue)); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.cx-h a svg, .cx-h .ct-link svg { width: 15px; height: 15px; }
/* inbox */
.cx-inbox { padding: 2px 16px; }
.cx-ib { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; color: inherit; border-top: 1px solid var(--a-line); }
.cx-ib:first-child { border-top: 0; }
.cx-ibn { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font: 800 19px var(--a-font); flex: none; }
.cx-ibn.b { background: rgba(28, 160, 239, .14); color: var(--a-blue); }
.cx-ibn.o { background: rgba(245, 158, 11, .16); color: var(--a-warn-ink); }
.cx-ibn.g { background: rgba(99, 102, 241, .14); color: #6366f1; }
.cx-ibm { flex: 1; min-width: 0; }
.cx-ibm b { display: block; font: 700 16px var(--a-font); color: var(--a-ink); }
.cx-ibm small { display: block; font: 500 13px var(--a-font); color: var(--a-ink3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-ib > svg, .cx-row > svg, .cx-hero > svg, .cx-watch > svg, .cx-plan > svg { width: 18px; height: 18px; fill: none; stroke: var(--a-ink3); stroke-width: 2; flex: none; }
/* kpis */
.cx-kpis { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-top: 12px; }
.cx-kpi { background: var(--a-card); border-radius: var(--cx-r); box-shadow: var(--a-card-shadow); padding: 14px 16px; position: relative; min-width: 0; }
[data-theme="dark"] .cx-kpi { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.cx-kpi small { display: block; font: 600 12px var(--a-font); color: var(--a-ink3); }
.cx-kpi b { display: block; font: 800 32px var(--a-font); letter-spacing: -.02em; color: var(--a-ink); margin: 2px 0; }
.cx-kpi > span { font: 500 12.5px var(--a-font); color: var(--a-ink3); }
.cx-kpi .cx-spark { position: absolute; right: 14px; top: 34px; }
.cx-fixk b { font-size: 18px; line-height: 1.25; margin: 4px 0; letter-spacing: -.01em; }
.cx-spark polyline { stroke: var(--a-blue); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cx-spark circle { fill: var(--a-blue); }
/* lists */
.cx-list { padding: 0 14px; list-style: none; }
.cx-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--a-line); text-decoration: none; color: inherit; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; cursor: pointer; }
.cx-list > :first-child, .cx-list > li:first-child .cx-row { border-top: 0; }
.cx-list li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--a-line); }
.cx-list li:first-child { border-top: 0; }
.cx-list li .cx-row { border-top: 0; }
.cx-row.cur { opacity: .7; }
.cx-rm { flex: 1; min-width: 0; }
.cx-rm b { display: block; font: 650 15.5px var(--a-font); color: var(--a-ink); }
.cx-rm small { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 12.5px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.cx-rs { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.cx-rs b { font: 800 21px var(--a-font); color: var(--a-ink); line-height: 1; }
.cx-rs .dl { font-size: 12px; }
.cx-rs:has(.cx-st) { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 6px; max-width: 150px; }
.cx-rs:has(.cx-st) .cx-st { flex-basis: 100%; text-align: right; background: none; padding: 0; }
.cx-st { font: 700 11.5px var(--a-font); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.cx-st-ready { color: var(--a-blue); background: rgba(28, 160, 239, .13); }
.cx-st-due { color: var(--a-warn-ink); background: rgba(245, 158, 11, .15); }
.cx-st-run { color: #6366f1; background: rgba(99, 102, 241, .13); }
.cx-st-ok { color: var(--a-good-ink); background: rgba(61, 220, 132, .14); }
.cx-st-none { color: var(--a-ink3); background: var(--a-card3); }
.cx-prof .cx-st, .cx-row > .cx-st { flex: none; }
.cx-empty { padding: 18px 4px; }
.cx-tools { display: flex; gap: 8px; }
.cx-tools .ct-search { flex: 1; }
.cx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.cx-chip { all: unset; cursor: pointer; font: 600 13px var(--a-font); color: var(--a-ink2); background: var(--a-card); box-shadow: inset 0 0 0 1px var(--a-line); border-radius: 99px; padding: 7px 13px; }
.cx-chip span { color: var(--a-ink3); margin-left: 2px; }
.cx-chip.on { background: var(--a-ink); color: var(--a-bg); box-shadow: none; }
.cx-chip.on span { color: inherit; opacity: .7; }
.cx-chip:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.cx-add, .cx-plan { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 12px; font: 650 14px var(--a-font); color: var(--a-blue); text-decoration: none; }
.cx-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cx-plan { justify-content: space-between; background: var(--a-card2); border-radius: 16px; color: var(--a-ink2); font-weight: 500; font-size: 13px; padding: 12px 16px; margin-top: 16px; }
.cx-plan b { color: var(--a-ink); }
/* profile */
.cx-prof { display: flex; align-items: center; gap: 14px; margin: 6px 2px 14px; }
.cx-prof > div { flex: 1; min-width: 0; }
.cx-prof h1 { font: 800 26px var(--a-font); letter-spacing: -.02em; color: var(--a-ink); }
.cx-prof p { font: 500 14px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.cx-hero { display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-decoration: none; color: inherit; }
.cx-hm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-hm small { font: 600 12.5px var(--a-font); color: var(--a-ink3); }
.cx-hm b { font: 750 20px var(--a-font); color: var(--a-ink); }
.cx-hm > span { font: 600 13px var(--a-font); color: var(--a-ink3); }
.cx-hm .cx-spark { margin-top: 6px; }
.cx-acts2 { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.cx-acts2 .ct-btn { flex: 1 1 auto; justify-content: center; }
.cx-tabs { display: flex; gap: 3px; background: var(--a-card2); border-radius: 14px; padding: 4px; margin: 16px 0 12px; position: sticky; top: calc(env(safe-area-inset-top) + 64px); z-index: 20; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs button { all: unset; flex: 1 1 auto; min-width: 0; text-align: center; font: 650 13.5px var(--a-font); color: var(--a-ink3); padding: 9px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
/* every tab fits on a phone, no sliding the row sideways to find History (Ty 2026-10-22: "I got to move over to see a word") */
@media (max-width: 430px) { .cx-tabs button { padding: 9px 4px; letter-spacing: -.01em; } .cx-rep .cx-tabs button { font-size: 13.5px !important; } }
@media (max-width: 360px) { .cx-tabs button { font-size: 12.5px !important; padding: 9px 3px; } }
.cx-tabs button.on { background: var(--a-ink); color: var(--a-bg); }
.cx-tabs button:focus-visible { outline: 2px solid var(--a-blue); }
.cx-pane { display: none; }
.cx-pane.on { display: block; animation: cxIn .22s var(--a-ease, ease); }
@keyframes cxIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx-pane.on { animation: none; } }
.cx-pane > * + * { margin-top: 12px; }
/* report */
.cx-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 2px 0; }
.cx-rhead h1 { font: 800 26px var(--a-font); letter-spacing: -.02em; color: var(--a-ink); }
.cx-rhead p { font: 500 13.5px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.cx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cx-stats div { background: var(--a-card); border-radius: 16px; padding: 10px 12px; box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .cx-stats div { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.cx-stats b { display: block; font: 750 18px var(--a-font); color: var(--a-ink); }
.cx-stats small { font: 500 11.5px var(--a-font); color: var(--a-ink3); }
.cx-watch { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; background: linear-gradient(135deg, #0d1a33, #13284d); color: #fff; border-radius: var(--cx-r); padding: 10px 16px 10px 10px; }
.cx-wt { width: 86px; height: 86px; border-radius: 14px; overflow: hidden; flex: none; background: rgba(255, 255, 255, .06); display: grid; place-items: center; }
.cx-wt .kp { width: 100%; height: 100%; padding: 4px; border-radius: 0; background: transparent; justify-content: center; }
.cx-wt .kp svg { width: 100%; height: 100%; }
.cx-wt .kp svg circle { stroke: none; }
.cx-wt figcaption { display: none; }
.cx-wm { flex: 1; }
.cx-wm b { display: flex; align-items: center; gap: 8px; font: 700 16px var(--a-font); }
.cx-wm b svg { width: 18px; height: 18px; fill: none; stroke: #7dd3fc; stroke-width: 2; }
.cx-wm small { display: block; font: 500 12.5px var(--a-font); color: #b9c8de; margin-top: 3px; }
.cx-watch > svg { stroke: #b9c8de; }
.cx-watch:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.cx-fxrow .cx-rm b { font-size: 15px; line-height: 1.3; }
.cx-n { width: 26px; height: 26px; border-radius: 8px; background: var(--a-ink); color: var(--a-bg); font: 800 13px var(--a-font); display: grid; place-items: center; flex: none; }
.cx-well { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; }
.cx-well span { display: flex; align-items: center; gap: 10px; font: 600 14.5px var(--a-font); color: var(--a-ink); padding: 7px 0; }
.cx-well svg { width: 18px; height: 18px; fill: none; stroke: var(--a-good-ink); stroke-width: 2.6; flex: none; }
.cx-more { margin-top: 10px; border-top: 1px solid var(--a-line); padding-top: 10px; }
.cx-more summary { cursor: pointer; font: 650 13.5px var(--a-font); color: var(--a-blue); list-style: none; }
.cx-more summary::-webkit-details-marker { display: none; }
.cx-more summary::after { content: " ›"; }
.cx-more[open] summary::after { content: " ⌄"; }
.cx-more[open] summary { margin-bottom: 8px; }
.q-faults li small { display: block; color: var(--a-ink3); font-size: 12.5px; margin-top: 2px; }
.cx-fx.cx-flash { box-shadow: 0 0 0 3px var(--a-blue); transition: box-shadow .3s; }
.cx-note { font: 500 13px var(--a-font); color: var(--a-ink3); line-height: 1.5; margin: 12px 4px; }
.cx-rep .dr { margin-top: 0; }
.cx-rep .dr-h { margin: 4px 2px 16px; }
.cx-rep .dr-h small { display: block; margin-top: 2px; }
.cx-rep .dr-grid { margin-bottom: 24px; }
/* upload sheet */
body.cx-noscroll { overflow: hidden; }
.cx-sheet-wrap { position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 25, .55); display: flex; align-items: flex-end; justify-content: center; animation: cxFade .18s ease; }
@keyframes cxFade { from { opacity: 0; } to { opacity: 1; } }
.cx-sheet { width: 100%; max-width: 560px; background: var(--a-card); color: var(--a-ink); border-radius: 26px 26px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); animation: cxUp .24s var(--a-ease, ease); max-height: 92vh; overflow: auto; }
@keyframes cxUp { from { transform: translateY(40px); } to { transform: none; } }
@media (min-width: 760px) { .cx-sheet-wrap { align-items: center; } .cx-sheet { border-radius: 26px; } }
.cx-grab { display: block; width: 40px; height: 5px; border-radius: 9px; background: var(--a-line); margin: 0 auto 10px; }
.cx-sh-top { display: flex; align-items: center; justify-content: space-between; }
.cx-sh-top h2 { font: 800 22px var(--a-font); letter-spacing: -.01em; }
.cx-x { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; font-size: 24px; color: var(--a-ink3); background: var(--a-card2); }
.cx-sh-sub { font: 500 13px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.cx-lbl { font: 700 12px var(--a-font); color: var(--a-ink3); text-transform: uppercase; letter-spacing: .07em; margin: 16px 0 8px; }
.cx-acs { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-ac { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 5px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--a-line); font: 650 14px var(--a-font); color: var(--a-ink); }
.cx-ac.on { box-shadow: inset 0 0 0 2px var(--a-blue); background: rgba(28, 160, 239, .1); }
.cx-ac .ct-av.xs { width: 28px; height: 28px; border-radius: 99px; font-size: 11px; }
.cx-more.cx-ac, .cx-ac.cx-more { padding: 0 6px; }
.cx-ac select { all: unset; cursor: pointer; font: 600 14px var(--a-font); color: var(--a-ink2); padding: 0 8px; }
.cx-bigb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cx-bb { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 18px; padding: 16px; box-shadow: inset 0 0 0 1px var(--a-line); display: flex; flex-direction: column; gap: 3px; }
.cx-bb svg { width: 28px; height: 28px; fill: none; stroke: var(--a-ink); stroke-width: 2; margin-bottom: 8px; }
.cx-bb b { font: 750 16px var(--a-font); color: var(--a-ink); }
.cx-bb small { font: 500 12.5px var(--a-font); color: var(--a-ink3); }
.cx-bb.pri { background: var(--a-ink); box-shadow: none; }
.cx-bb.pri svg, .cx-bb.pri b { stroke: var(--a-bg); color: var(--a-bg); }
.cx-bb.pri small { color: var(--a-bg); opacity: .7; }
.cx-bb:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.cx-sh-link { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; font: 650 14px var(--a-font); color: var(--a-blue); text-decoration: none; }
.cx-sh-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cx-prog { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--a-line); font: 600 14px var(--a-font); }
.cx-prog b { flex: 1; }
.cx-prog em { font: 500 12px var(--a-font); color: var(--a-ink3); font-style: normal; }
/* group session */
.cx-q { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--a-line); cursor: pointer; }
.cx-q:first-child { border-top: 0; }
.cx-q input { position: absolute; opacity: 0; pointer-events: none; }
.cx-ck { width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--a-line); display: grid; place-items: center; flex: none; }
.cx-ck svg { width: 15px; height: 15px; fill: none; stroke: transparent; stroke-width: 3; }
.cx-q input:checked + .cx-ck { background: var(--a-ink); box-shadow: none; }
.cx-q input:checked + .cx-ck svg { stroke: var(--a-bg); }
.cx-q input:focus-visible + .cx-ck { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.cx-cta { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; text-align: center; margin-top: 16px; background: var(--a-blue); color: #fff; font: 750 16px var(--a-font); border-radius: 16px; padding: 16px; }
.cx-cta:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
a.cx-cta, .ct a.cx-cta { color: #fff; text-decoration: none; }   /* a link CTA (the beta coach's keep-it): white on blue, not the page's link colour */
.cx-now { background: var(--a-ink); color: var(--a-bg); border-radius: 22px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 6px; }
.cx-now small { grid-column: 1 / 3; font: 600 12.5px var(--a-font); opacity: .7; }
.cx-now b { font: 800 28px var(--a-font); letter-spacing: -.02em; }
.cx-now span { font: 700 14px var(--a-font); opacity: .75; }
.cx-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }
.cx-dots i { width: 10px; height: 10px; border-radius: 99px; background: var(--a-line); }
.cx-dots i.w { background: var(--a-blue); transform: scale(1.25); }
.cx-dots i.g { background: var(--a-good); }
.cx-dots i.s { background: var(--a-ink3); opacity: .5; }
.cx-film { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border-radius: 22px; padding: 34px 18px; background: var(--a-card); box-shadow: inset 0 0 0 2px var(--a-blue); cursor: pointer; position: relative; }
.cx-film svg { width: 40px; height: 40px; fill: none; stroke: var(--a-blue); stroke-width: 2; }
.cx-film b { font: 750 18px var(--a-font); color: var(--a-ink); }
.cx-film span { font: 500 13px var(--a-font); color: var(--a-ink3); }
.cx-film input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cx-film.busy { opacity: .6; pointer-events: none; }
.cx-film:focus-within { outline: 2px solid var(--a-ink); outline-offset: 3px; }
.cx-err { color: var(--a-bad-ink); font: 600 13.5px var(--a-font); margin: 10px 4px 0; }
.cx-sess-acts { display: flex; gap: 8px; margin-top: 12px; }
.cx-sess-acts .ct-btn { flex: 1; justify-content: center; }
/* coach nav. Phones and tablets: a bottom bar with labels always on and a raised Upload in the middle.
   Desktop (1024+): the slim top bar, with Upload as a solid blue pill inside it (2026-10-13: the raised tile stuck out). */
@media (max-width: 1023px) {
  .ct .app-tabs.cx-nav { gap: 2px; padding: 0 6px; height: 68px; }
  .ct .app-tabs.cx-nav .tab-btn { flex-direction: column; justify-content: center; gap: 2px; height: 56px; padding: 0 14px; border-radius: 22px; font-size: 11.5px; }
  .ct .app-tabs.cx-nav .tab-btn span { display: inline; }
  .ct .app-tabs.cx-nav .tab-btn.active { background: var(--a-card3); }
  .ct .app-tabs.cx-nav .tab-btn.cx-up { color: var(--a-ink); }
  .ct .app-tabs.cx-nav .tab-btn.cx-up svg { width: 44px; height: 44px; padding: 11px; border-radius: 15px; background: var(--a-blue); stroke: #fff; stroke-width: 2.6; margin-top: -26px; box-shadow: 0 6px 16px rgba(28, 160, 239, .35); }
  .ct .app-tabs.cx-nav .tab-btn.cx-up.active { background: none; }
}
@media (min-width: 1024px) {
  .ct .app-tabs.cx-nav { gap: 4px; padding: 0 4px; }
  .ct .app-tabs.cx-nav .tab-btn.cx-up { background: var(--a-blue); color: #fff; font-weight: 700; margin: 0 4px; }
  .ct .app-tabs.cx-nav .tab-btn.cx-up svg { stroke: #fff; stroke-width: 2.6; }
  .ct .app-tabs.cx-nav .tab-btn.cx-up:hover { filter: brightness(1.06); }
  .ct .app-tabs.cx-nav .tab-btn.cx-up.active { box-shadow: none; }
}
@media (min-width: 900px) {
  .cx-kpis { grid-template-columns: 1fr 2fr; }
  .cx .cx-list.ct-roster { display: block; }
}
@media print { .cx-tabs { display: none !important; } .cx-pane { display: block !important; } .cx-watch, .cx-acts2 { display: none !important; } }

.cx-rhead .rep-date-edit { color: var(--a-ink2); background: var(--a-card2); border: 0; box-shadow: none; }
.cx-hm .cx-retest { align-self: flex-start; margin-top: 6px; }
@media (min-width: 1000px) {
  .ct-wrap.cx-rep { max-width: 1080px; }
  .cx-sum { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start; }
  .cx-sum .cx-sr > .cx-h:first-child { margin-top: 0; }
}
.cx-sl > * + *, .cx-sr > * + * { margin-top: 12px; }
.cx-sr > .cx-h { margin-top: 22px; }
@media (min-width: 1000px) {
  .cx-home { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .cx-home .cx-hr > .cx-h:first-child { margin-top: 0; }
}
.cx-multi { margin-top: 12px; padding: 22px 18px; box-shadow: inset 0 0 0 1.5px var(--a-line); }
.cx-multi svg { width: 30px; height: 30px; }
.cx-multi b { font-size: 16px; }
.cx-asg { display: grid; grid-template-columns: 26px 1fr; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--a-line); }
.cx-asg:first-child { border-top: 0; }
.cx-asg .ct-sort { grid-column: 2; }
.cx-asg .ct-sort select { width: 100%; }
.cx .pc { display: block; width: 100%; max-height: 230px; margin: 0 auto; }
@media (min-width: 1000px) { .cx .cx-prof ~ .cx-hero, .cx .cx-acts2, .cx .cx-tabs, .cx .cx-pane { max-width: 820px; } .cx-rep .cx-tabs, .cx-rep .cx-pane { max-width: none; } }
/* secondary text at 4.5:1 or better inside the coach screens (axe scan 2026-10-13: the shared ink3 measured 2.9-3.9) */
[data-theme="dark"] .cx, [data-theme="dark"] .cx-sheet { --a-ink3: #9a9da6; }
[data-theme="light"] .cx, [data-theme="light"] .cx-sheet { --a-ink3: #586170; }
[data-theme="dark"] .cx .cx-h a, [data-theme="dark"] .cx .cx-h .ct-link, [data-theme="dark"] .cx .cx-more summary, [data-theme="dark"] .cx .cx-add { color: #5cb9f2; }
[data-theme="light"] .cx .cx-h a, [data-theme="light"] .cx .cx-h .ct-link, [data-theme="light"] .cx .cx-more summary, [data-theme="light"] .cx .cx-add, [data-theme="light"] .cx-sh-link { color: #0b67a3; }
[data-theme="light"] .cx-st-ok { color: #166534; }
[data-theme="light"] .cx-st-due { color: #9a3412; }
[data-theme="light"] .cx-st-ready { color: #075985; }

/* Home, more to see (2026-10-13) */
.cx-lvl { font-style: normal; font: 600 11.5px var(--a-font); color: var(--a-ink3); margin-left: 6px; }
.cx-latest .cx-spark { flex: none; margin-right: 4px; }
.cx-lens { margin-top: 12px; }
.cx-lh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; margin-bottom: 10px; }
.cx-lh b { font: 700 15px var(--a-font); color: var(--a-ink); }
.cx-lh small { font: 500 12px var(--a-font); color: var(--a-ink3); }
.cx-lr { display: grid; grid-template-columns: 150px 1fr 34px; gap: 12px; align-items: center; padding: 7px 0; }
.cx-lr span { font: 600 13.5px var(--a-font); color: var(--a-ink2); }
.cx-lr span em { font-style: normal; font: 700 10.5px var(--a-font); color: var(--a-warn-ink); background: rgba(245, 158, 11, .15); border-radius: 99px; padding: 2px 7px; margin-left: 4px; }
.cx-lr i { height: 8px; border-radius: 99px; background: var(--a-card3); position: relative; overflow: hidden; }
.cx-lr i u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--a-blue); }
.cx-lr.weak i u { background: var(--a-warn, #f59e0b); }
.cx-lr b { font: 800 15px var(--a-font); color: var(--a-ink); text-align: right; }
.cx-board { padding: 2px 14px; }
.cx-board .cx-row { padding: 10px 0; }
.cx-board .tb-medal { flex: none; width: 28px; height: 28px; }
.cx-mi { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px dashed var(--a-line); font: 600 13px var(--a-font); color: var(--a-ink3); }
.cx-mi b { flex: 1; color: var(--a-ink); font-size: 14.5px; }
.cx-mi em { font-style: normal; }
.cx-cal { width: 44px; height: 46px; border-radius: 12px; background: var(--a-card2); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.cx-cal small { font: 700 10px var(--a-font); text-transform: uppercase; letter-spacing: .06em; color: var(--a-warn-ink); }
.cx-cal b { font: 800 17px var(--a-font); color: var(--a-ink); line-height: 1.05; }
@media (max-width: 420px) { .cx-lr { grid-template-columns: 112px 1fr 30px; } .cx-latest .cx-spark { display: none; } }
@media (max-width: 520px) { .cx-lh { flex-direction: column; } }
/* The coaches' portal sign-in (/coaches) */
.ct-gate .g-gate-card h2 { margin: 4px 0 0; font: 700 22px var(--a-font); letter-spacing: -.01em; color: var(--a-ink); }
.ct-gate .g-gate-card > p { margin: 0 0 6px; color: var(--a-ink2); font: 500 14.5px/1.45 var(--a-font); }
.ct-gate .g-field { text-align: left; }
.ct-gate .ct-gate-note { padding: 10px 12px; border-radius: 12px; background: var(--a-card2); color: var(--a-ink); font-size: 13.5px; }
.ct-gate .g-gate-msg { min-height: 18px; margin: 4px 0 0; color: var(--a-ink2); font: 500 13.5px var(--a-font); }
.ct-gate .g-gate-msg.err { color: #ff8a8d; }
[data-theme="light"] .ct-gate .g-gate-msg.err { color: #b42318; }
.ct-gate a.g-link { text-decoration: none; }
/* Remote Jump Lab queue (Ty) */
.lab .ct-h1, .ct-wrap.lab h1 { font: 800 26px var(--a-font); letter-spacing: -.02em; margin: 6px 2px 4px; color: var(--a-ink); }
.lab-lead { margin: 0 2px 16px; font: 500 14.5px/1.45 var(--a-font); max-width: 760px; }
.lab-o { display: grid; gap: 12px; margin-bottom: 14px; }
.lab-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lab-top b { display: block; font: 700 18px var(--a-font); color: var(--a-ink); }
.lab-top .muted { display: block; font: 500 13px var(--a-font); margin-top: 2px; }
.lab-chip { flex-shrink: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; font: 700 12px var(--a-font); color: var(--a-ink); background: var(--a-card2); }
.lab-chip.lab-new { background: #1ca0ef; color: #fff; } .lab-chip.lab-prog { background: rgba(245,158,11,.18); } .lab-chip.lab-sent { background: rgba(22,163,74,.18); }
.lab-note { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--a-card2); color: var(--a-ink); font: 500 14px/1.45 var(--a-font); }
.lab-note span { display: block; font: 700 11px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink3); margin-bottom: 3px; }
.lab-fixes { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-fixes span { padding: 4px 10px; border-radius: 99px; background: var(--a-card2); color: var(--a-ink); font: 600 12.5px var(--a-font); }
.lab-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .lab-grid { grid-template-columns: 1fr 1fr; } }
.lab-col { display: grid; gap: 8px; align-content: start; }
.lab-lab { font: 700 12px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink3); }
.lab-vid { width: 100%; max-height: 380px; border-radius: 16px; background: #000; }
.lab-novid { display: grid; place-items: center; min-height: 120px; border-radius: 16px; background: var(--a-card2); font: 500 13.5px var(--a-font); padding: 12px; text-align: center; }
.lab-novid.sm { min-height: 0; padding: 12px 14px; }
.lab-due { display: inline-flex; align-items: center; margin-top: 6px; padding: 3px 10px; border-radius: 99px; font: 700 12px var(--a-font); background: var(--a-card2); color: var(--a-ink); }
.lab-due.soon { background: rgba(28,160,239,.16); }
.lab-due.late { background: rgba(226,52,45,.14); color: #E2342D; }
.lab-pdf { display: block; padding: 12px 14px; border-radius: 14px; background: var(--a-card2); color: var(--a-ink); font: 600 14px var(--a-font); text-decoration: none; }
.lab-top > div { display: grid; gap: 2px; justify-items: start; }
.lab-col .ct-actions { margin: 4px 0 0; }
.lab-up { cursor: pointer; justify-self: start; }
.lab-prog-bar { height: 6px; border-radius: 99px; background: var(--a-card2); overflow: hidden; }
.lab-prog-bar i { display: block; height: 100%; width: 0; background: #1ca0ef; transition: width .3s; }
.lab-notes { display: grid; gap: 6px; font: 600 13px var(--a-font); color: var(--a-ink2); }
.lab-notes i { font-style: normal; color: var(--a-ink3); font-weight: 500; }
.lab-notes textarea { min-height: 96px; border: 1px solid transparent; border-radius: 14px; padding: 12px 14px; font: 500 15px var(--a-font); background: var(--a-card2); color: var(--a-ink); resize: vertical; }
.lab-notes textarea:focus { outline: none; border-color: #1ca0ef; }
.lab-col .ct-btn.primary { justify-self: start; }
.lab-col .ct-btn:disabled { opacity: .5; cursor: not-allowed; }
.lab-empty b { display: block; font: 700 16px var(--a-font); color: var(--a-ink); margin-bottom: 4px; }
.cx-nav .tab-btn[data-tab="lab"] { position: relative; }
.lab-dot { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font: 700 11px/18px var(--a-font); font-style: normal; text-align: center; }
@media (max-width: 1023px) { .ct .app-tabs.cx-nav .lab-dot { position: absolute; top: 4px; right: 8px; } }
/* five tabs on desktop (with Lab): the tab bar starts after the logo, so "Powered by The Art of Jumping" stays readable */
@media (min-width: 1024px) {
  .ct .app-tabs.cx-nav { left: calc(max(32px, (100vw - var(--a-col)) / 2) + 324px); transform: none; }
  .ct .app-tabs.cx-nav .tab-btn { padding: 0 13px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .ct .app-tabs.cx-nav .tab-btn:not(.active):not(.cx-up) span { display: none; } }

/* My plan sheet (coach avatar) */
.ct-acct .ct-acct-use { margin: 14px 0 4px; padding: 14px; border-radius: 16px; background: var(--a-card2); }
.ct-acct .ct-acct-use p { margin: 0; font: 600 14.5px var(--a-font); color: var(--a-ink2); }
.ct-acct .ct-acct-use p b { font: 800 22px var(--a-font); color: var(--a-ink); margin-right: 2px; }
.ct-acct .ct-acct-use i { display: block; height: 8px; border-radius: 9px; background: var(--a-line); margin: 10px 0 0; overflow: hidden; }
.ct-acct .ct-acct-use em { display: block; height: 100%; border-radius: 9px; background: var(--a-blue); }
.ct-acct .ct-acct-st { margin-top: 10px !important; font: 500 13.5px/1.4 var(--a-font) !important; color: var(--a-ink2); }
.ct-acct .ct-acct-fine { margin: 8px 2px 0; font: 500 12.5px/1.45 var(--a-font); color: var(--a-ink3); }
.ct-acct-b { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; min-height: 50px; text-align: center; margin-top: 10px; padding: 14px; border-radius: 16px;
  background: var(--a-card2); color: var(--a-ink); font: 650 15px var(--a-font); }
.ct-acct-b.quiet { background: transparent; color: var(--a-ink2); border: 1px solid var(--a-line); }
.ct-acct-b:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.ct-acct-b[disabled], .ct-acct .cx-cta[disabled] { opacity: .6; cursor: default; }
.ct-acct-msg { min-height: 18px; margin: 10px 2px 0; font: 600 13.5px var(--a-font); color: var(--a-ink2); text-align: center; }
.ct-acct-msg.err { color: #ff8a8d; }
[data-theme="light"] .ct-acct-msg.err { color: #b42318; }
.ct-plan-m { all: unset; cursor: pointer; color: var(--a-blue); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.ct-plan-m:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; border-radius: 4px; }
.nw-up .ct-acct-b { margin-top: 10px; }
.nw-up .ct-acct-msg { min-height: 0; }

/* Combined VolleyElite x Art of Jumping logo: scoring loader and the sign-in card (David 2026-10-14) */
.nw-anim .nw-ve-logo { width: 150px; height: auto; display: block; margin: 0 auto; animation: ctLogoPulse 1.4s var(--a-ease) infinite; }
@keyframes ctLogoPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .82; } }
.ct-gate .g-gate-card img.ct-gate-logo { height: 46px; width: auto; margin: 0 auto 8px; }
[data-theme="light"] .nw-anim .nw-ve-logo { filter: brightness(0); }
@media (prefers-reduced-motion: reduce) { .nw-anim .nw-ve-logo { animation: none; } }

/* ── Branded reports (Signature, Founding 20): coach brand on top, ONE faint VE × Art of Jumping mark behind ── */
.brandable { position: relative; isolation: isolate; }
.brand-wm { position: absolute; left: 50%; top: 380px; width: min(560px, 86%); transform: translateX(-50%); opacity: .06; pointer-events: none; z-index: 5; user-select: none; }   /* over the report, like the approved mockup: faint, can't be cropped out, taps pass through */
.brand-wm.wm-ink { display: none; }
[data-theme="light"] .brand-wm.wm-dark { display: none; } [data-theme="light"] .brand-wm.wm-ink { display: block; }
.brand-head { display: flex; align-items: center; gap: 14px; background: var(--brand, #0e8ad8); color: #fff; border-radius: 16px; padding: 14px 16px; margin: 8px 0 16px; }
.bh-logo { width: 58px; height: 58px; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.bh-logo img { max-width: 86%; max-height: 86%; object-fit: contain; } .bh-logo b { color: var(--brand, #0e8ad8); font-weight: 800; font-size: 20px; }
.bh-t { min-width: 0; flex: 1; } .bh-t b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.bh-t span { display: block; font-size: 12.5px; opacity: .92; margin-top: 2px; }
.bh-r { text-align: right; font-size: 12px; opacity: .95; line-height: 1.5; } .bh-r span { display: block; }
@media (max-width: 520px) { .bh-r { display: none; } .bh-t b { font-size: 17px; } .bh-logo { width: 48px; height: 48px; } }
.brand-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; font-size: 12px; color: var(--a-ink3, #8a94a6); }
.brand-foot img { height: 22px; width: auto; } .brand-foot b { color: var(--a-ink, inherit); }
[data-theme="dark"] .brand-foot img, html:not([data-theme]) .brand-foot img { filter: invert(1); }
[data-theme="light"] .cx-rep .ct-ring .fill, [data-theme="light"] .sh-card .ct-ring .fill { stroke: var(--brand, #1ca0ef); }
body:not(.branded) .ct-ring .fill { stroke: #1ca0ef; }
/* branding settings */
.brand-set .bs-prev { margin: 0 0 16px; }
.bs-form { display: grid; gap: 12px; max-width: 520px; }
.bs-form label { display: grid; gap: 6px; font-weight: 650; font-size: 14px; } .bs-form label .muted { font-weight: 500; font-size: 12.5px; }
.bs-form input:not([type=color]):not([type=file]) { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--a-line, #2a3140); background: var(--a-card2, transparent); color: inherit; }
.bs-col { display: flex; gap: 8px; align-items: center; } .bs-col input[type=color] { width: 46px; height: 40px; border: 0; background: none; padding: 0; } .bs-col input:last-child { width: 120px; }
.ct-acct-fd { background: rgba(28, 160, 239, .12); color: inherit; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; margin: 4px 0 10px; }
/* team progress report */
.team-rep .tr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 4px 0 12px; } .team-rep h1 { margin: 0; font-size: 26px; }
.tr-table { overflow-x: auto; padding: 4px 6px; } .tr-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tr-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--a-ink3, #8a94a6); padding: 10px 8px; border-bottom: 1px solid var(--a-line, #2a3140); }
.tr-table td { padding: 11px 8px; border-bottom: 1px solid var(--a-line, #2a3140); vertical-align: top; } .tr-table td small { display: block; color: var(--a-ink3, #8a94a6); font-size: 12px; }
@media print {
  .brand-wm.wm-dark { display: none !important; }
  .brand-wm.wm-ink { display: block !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6.2in; opacity: .08; z-index: 5; }   /* fixed = one mark on every PDF page */
  .brand-head { border-radius: 0 0 14px 14px; margin: 0 0 14px; padding: 18px 20px; }
  .brand-foot img { filter: none !important; }
  .cx-rep .ct-ring .fill, .sh-card .ct-ring .fill, body.branded .ct-ring .fill { stroke: var(--brand, #1ca0ef) !important; }
  .team-rep .ct-back, .team-rep [data-act="print"], .cx-rhead .ct-btn, .cx-h .ct-link { display: none !important; }
  .tr-table th, .tr-table td { border-color: #e5e7eb !important; color: #0b0d10; }
}

/* Coach view (David 2026-10-19): the upload sheet's spacing (.ct p zeroes margins), the team card's fourth lens, KPIs */
.cx-sheet .cx-sh-sub { margin: 4px 0 0; }
.cx-sheet .cx-lbl { margin: 18px 0 10px; }
.cx-lr.na span, .cx-lr.na b { color: var(--a-ink3); }
.ct .cx-lnote { margin: 12px 0 0; font: 500 12.5px/1.45 var(--a-font); color: var(--a-ink3); }
.tf-det { margin-top: 14px; border-top: 1px solid var(--a-line, rgba(127,127,127,.18)); padding-top: 12px; }
.tf-det > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--a-font); color: #1ca0ef; }
.tf-det > summary::-webkit-details-marker { display: none; }
.tf-det > summary::before { content: "+"; font: 700 17px/1 var(--a-font); }
.tf-det[open] > summary::before { content: "–"; }
.tf-det .type-form { margin-top: 10px; }
.cx-lr span em { display: block; width: max-content; margin: 4px 0 0; }   /* the limiter tag sits under the lens name, on purpose */

/* Athlete type: Ty's archetype calculator in the coach view (David 2026-10-19) */
.ty-spec { margin: 14px 0 4px; }
.ty-sp-track { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #334155 0%, #64748b 28%, #9DA6D8 55%, #4560F0 80%, #233DFF 100%); }
.ty-sp-band { position: absolute; top: -3px; bottom: -3px; border-radius: 99px; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.ty-sp-track i { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 0 3px var(--aoj-blue), 0 3px 10px rgba(0, 0, 0, .3); }
.ty-sp-l { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 8px; }
.ty-sp-l span { font: 700 10px/1.25 var(--a-font); letter-spacing: .04em; text-transform: uppercase; color: var(--a-ink3); text-align: center; }
.ty-sp-l span:first-child { text-align: left; } .ty-sp-l span:last-child { text-align: right; }
.ty-sp-l span.on { color: var(--aoj-ink); }
.ct .ty-read { margin: 12px 0 0; font: 500 13.5px/1.5 var(--a-font); color: var(--a-ink2); }
.ty-read b { color: var(--a-ink); font-weight: 700; }
.ty-notes { display: grid; gap: 8px; margin-top: 12px; }
.ct .ty-n { margin: 0; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--aoj-blue); background: var(--aoj-soft); font: 500 12.5px/1.5 var(--a-font); color: var(--a-ink2); }
.ty-n b { color: var(--a-ink); }
.ty-n.warn { border-left-color: #d4a017; background: rgba(212, 160, 23, .1); }
.ty-n.ask { border-left-color: #1ca0ef; background: rgba(28, 160, 239, .1); }
.ty-pb, .ty-tr { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr 30px; align-items: center; gap: 10px; padding: 6px 0; }
.ty-pb span, .ty-tr span { font: 600 13px/1.25 var(--a-font); color: var(--a-ink); }
.ty-tr span small { display: block; font: 500 11px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.ty-pb b, .ty-tr b { font: 800 14px var(--a-font); color: var(--a-ink); text-align: right; font-variant-numeric: tabular-nums; }
.ty-tr.off span, .ty-tr.off b { color: var(--a-ink3); }
.tyb { display: block; height: 7px; border-radius: 99px; background: var(--a-card3, rgba(127, 127, 127, .18)); overflow: hidden; }
.tyb u { display: block; height: 100%; border-radius: 99px; background: #64748b; }
.tyb.b u { background: var(--aoj-blue); }
.ty-split { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--a-card2); }
.ty-split .ty-lab { margin-bottom: 9px; }
.ty-sbar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; }
.ty-sbar i { display: flex; align-items: center; padding: 0 10px; font-style: normal; background: #1f2937; }
.ty-sbar i + i { background: var(--aoj-blue); justify-content: flex-end; }
.ty-sbar b { font: 800 14px var(--a-font); color: #fff; }
.ty-leg { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font: 700 10.5px var(--a-font); letter-spacing: .05em; text-transform: uppercase; color: var(--a-ink2); }
.ty-split small { display: block; margin-top: 8px; font: 500 12px/1.45 var(--a-font); color: var(--a-ink3); }
.tf-wide { grid-column: 1 / -1; }
.tf > span:first-child em { font-style: normal; font-weight: 500; color: var(--a-ink3); margin-left: 4px; }
.tf-rows { display: grid; gap: 8px; margin: 2px 0 12px; }
.ct .tf-sub { margin: 0; font: 700 11px var(--a-font); letter-spacing: .07em; text-transform: uppercase; color: var(--a-ink3); }
.tf-row { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 10px; }
.tf-row > span:first-child { font: 600 13px/1.25 var(--a-font); color: var(--a-ink); }
.tf-row > span:first-child small { display: block; font: 500 11px var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.tf-row .tf-in { height: 40px; }
.tf-adj { margin: 0 0 14px; }
.tf-adj input[type="range"] { width: 100%; accent-color: var(--aoj-blue); }
.tf-adj small { font: 500 11.5px var(--a-font); color: var(--a-ink3); }
@media (max-width: 520px) { .ty-pb, .ty-tr { grid-template-columns: 1fr 1.2fr 28px; } .tf-row { grid-template-columns: 1fr 132px; } .ty-sp-l span { font-size: 9px; letter-spacing: 0; } }
/* the faint brand watermark stays on printed / PDF reports only (David 2026-10-19: not behind the video on screen) */
@media screen { .brand-wm { display: none !important; } }

/* Branding: the preview reads as a preview and points at the fields (David 2026-10-19) */
.ct .bs-hint { margin: -6px 0 14px; font-size: 12.5px; }
.bs-prev .bh-t, .bs-prev .bh-r, .bs-prev .bh-logo { cursor: pointer; }

/* ── Batch upload (Ty + David 2026-10-19): several clips at once, each matched to an athlete, new profiles made on the
   spot, then every clip's status until its report is ready. Mobile first; VolleyElite blue, white text on blue. ── */
.bt-up { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.bt-up .ct-btn { width: 100%; min-height: 50px; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.2; border-radius: 16px; }   /* a tile on phones: "Several clips at once" takes two lines */
.bt-up .ct-btn:not(.primary) { background: var(--a-card); box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .bt-up .ct-btn:not(.primary) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ct .bt-up p { grid-column: 1 / -1; margin: 2px 4px 0; font: 500 13px/1.45 var(--a-font); color: var(--a-ink3); }
@media (max-width: 359px) { .bt-up { grid-template-columns: 1fr; } }
@media (min-width: 1000px) { .bt-up { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; } .bt-up .ct-btn { width: auto; padding: 0 20px; border-radius: 99px; } .ct .bt-up p { grid-column: auto; margin: 0 0 0 6px; max-width: 520px; } }
.bt-home, .bt-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 12px; text-decoration: none; color: inherit; border-radius: var(--cx-r, 20px); }   /* #/new is not a .cx page: no --cx-r there */
.bt-home { box-shadow: inset 0 0 0 1.5px rgba(28, 160, 239, .45); }
.bt-hi { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(28, 160, 239, .14); color: var(--a-blue); flex: none; }
.bt-hi svg { width: 22px; height: 22px; }
.ct .bt-home > svg, .ct .bt-banner > svg { width: 18px; height: 18px; stroke: var(--a-ink3); flex: none; }
.bt-home .cx-ibm small, .bt-banner .cx-ibm small { white-space: normal; line-height: 1.4; }
.nw .bt-banner { margin: 0 0 16px; }
.bt-start { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-start .ct-btn { flex: 1 1 auto; }
.ct .bt-help { margin: 0; font: 500 13px/1.45 var(--a-font); color: var(--a-ink3); }
/* the upload sheet: one clip or several, side by side */
.cx-bb.blue { background: linear-gradient(165deg, #1ca0ef, #0b74c4); box-shadow: none; }
.ct .cx-bb.blue svg { stroke: #fff; }
.cx-bb.blue b { color: #fff; }
.cx-bb.blue small { color: rgba(255, 255, 255, .88); }
.ct .cx-bhelp { margin: 10px 2px 0; font: 500 13px/1.45 var(--a-font); color: var(--a-ink3); }
.cx-sh-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--a-line); }
.ct .cx-sh-row > svg { width: 22px; height: 22px; stroke: var(--a-ink); flex: none; }
.ct .cx-sh-row > svg:last-child { width: 18px; height: 18px; stroke: var(--a-ink3); }
.cx-sh-row span { flex: 1; min-width: 0; }
.cx-sh-row b { display: block; font: 700 15px var(--a-font); color: var(--a-ink); }
.cx-sh-row small { display: block; font: 500 12.5px var(--a-font); color: var(--a-ink3); margin-top: 1px; }
.cx-sh-row:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
/* step 1: pick */
.cx-bt .cx-hello p { margin-top: 6px; font-size: 14px; line-height: 1.5; max-width: 600px; }
.bt-drop { padding: 30px 18px; }
.bt-drop.drag, .bt-more.drag, .bt-add.drag { background: rgba(28, 160, 239, .1); box-shadow: inset 0 0 0 2px var(--a-blue); }
.bt-how { list-style: none; margin: 16px 0 14px; padding: 0; display: grid; gap: 10px; }
.bt-how li { display: flex; align-items: center; gap: 12px; font: 600 14px/1.4 var(--a-font); color: var(--a-ink); }
.bt-how b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(28, 160, 239, .14); color: var(--a-blue); font: 800 13px var(--a-font); }
.cx-bt .nw-tips { margin-top: 4px; }
/* step 2: match */
.bt-date { margin: 0 0 14px; }
.bt-list { display: grid; gap: 10px; }
.bt-row { padding: 12px 14px 14px; scroll-margin: 90px; }
.bt-row.bad, .bt-row.flag { box-shadow: inset 0 0 0 1.5px rgba(255, 107, 94, .6); }
.bt-top { display: flex; align-items: center; gap: 12px; }
.bt-thumb { all: unset; box-sizing: border-box; position: relative; width: 88px; height: 58px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--a-card3); color: var(--a-ink3); }
.bt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-thumb.tall img { object-fit: contain; background: #000; }
.ct .bt-thumb > svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bt-play { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 99px; background: rgba(5, 8, 25, .62); display: grid; place-items: center; }
.ct .bt-play svg { width: 11px; height: 11px; fill: #fff; stroke: none; margin-left: 1px; }
.bt-thumb:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.bt-thumb[disabled] { cursor: default; }
.bt-thumb.sm { width: 64px; height: 44px; border-radius: 10px; cursor: default; }
.ct .bt-thumb.sm > svg { width: 20px; height: 20px; }
.bt-meta { flex: 1; min-width: 0; }
.bt-meta b { display: block; font: 700 15px var(--a-font); color: var(--a-ink); }
.bt-meta small { display: block; font: 500 12.5px/1.4 var(--a-font); color: var(--a-ink3); margin-top: 2px; }
.bt-fn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-x { all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; flex: none; font-size: 22px; line-height: 1; color: var(--a-ink3); background: var(--a-card2); }
.bt-x:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.bt-who { margin-top: 12px; }
.bt-who .tf-in select { padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A919C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 2px center; }
.ct .bt-lab { margin: 12px 0 0; font: 700 12px var(--a-font); letter-spacing: .06em; text-transform: uppercase; color: var(--a-ink3); }
.bt-new { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--a-card2); }
.bt-new .tf-in { background: var(--a-card); }
.bt-new .tf-ref { margin: 0; }
.bt-new .tf-pill span { background: var(--a-card); }
.bt-new .tf-grid { margin: 0; }
.bt-new .tf-in select { padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A919C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0 center; }
.ct .bt-note { margin: 0; font: 600 12.5px/1.45 var(--a-font); color: var(--a-blue-ink); }
[data-theme="dark"] .ct .bt-note { color: #5cb9f2; }
.ct .bt-bad, .ct .bt-rerr { margin: 10px 0 0; font: 600 13px/1.45 var(--a-font); color: var(--a-bad-ink); }
.bt-more { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; min-height: 52px; border-radius: 16px; cursor: pointer; font: 650 14.5px var(--a-font); color: var(--a-ink); background: var(--a-card); box-shadow: inset 0 0 0 1.5px var(--a-line); }
.ct .bt-more svg { width: 18px; height: 18px; fill: none; stroke: var(--a-blue); stroke-width: 2.2; stroke-linecap: round; }
.ct .bt-add svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bt-more input, .bt-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bt-more:focus-within, .bt-add:focus-within { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.bt-warn { display: grid; gap: 4px; justify-items: start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(245, 158, 11, .14); font: 500 13.5px/1.45 var(--a-font); color: var(--a-ink2); }
.bt-warn b { font-weight: 750; color: var(--a-ink); }
.bt-warn .ct-btn { margin-top: 6px; }
.bt-key { margin-top: 14px; max-width: 360px; }
.cx-bt .cx-cta[disabled] { opacity: .45; cursor: default; }
.ct .bt-over { display: block; margin: 6px auto 0; }
/* step 3: progress */
.bt-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 2px; }
.bt-sum b { font: 800 22px var(--a-font); letter-spacing: -.01em; color: var(--a-ink); }
.bt-sum span { font: 600 13.5px var(--a-font); color: var(--a-ink3); }
.ct .cx-bt .cx-note { margin: 14px 4px 0; }
.ct .cx-bt .bt-line { margin: 6px 2px 12px; }
.bt-prog { padding: 0 14px; margin-top: 10px; }
.bt-pr { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--a-line); }
.bt-pr:first-child { border-top: 0; }
.bt-pr .cx-rm small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pr .cx-st { display: inline-block; margin-top: 6px; }
.bt-pr .ct-btn { flex: none; }
.cx-st-send { color: var(--a-blue); background: rgba(28, 160, 239, .13); }
.cx-st-err { color: var(--a-bad-ink); background: rgba(255, 107, 94, .14); }
[data-theme="light"] .cx-st-send { color: #075985; }
.bt-bar { display: block; height: 5px; border-radius: 99px; background: var(--a-card3); margin-top: 7px; overflow: hidden; max-width: 220px; }
.bt-bar u { display: block; height: 100%; border-radius: 99px; background: var(--a-blue); transition: width .3s; }
.bt-why { display: block; margin-top: 5px; font: 500 12.5px/1.4 var(--a-font); font-style: normal; color: var(--a-bad-ink); }
.bt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bt-acts .ct-btn { flex: 1 1 auto; }
.bt-add { position: relative; overflow: hidden; }
.ct-card.bt-halt { display: grid; gap: 6px; margin: 0 0 14px; box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, .55); }   /* beats the dark theme .ct-card outline */
.bt-halt b { font: 750 15.5px/1.35 var(--a-font); color: var(--a-ink); }
.bt-halt > span { font: 500 13.5px var(--a-font); color: var(--a-ink2); }
.bt-halt .nw-key { margin-top: 6px; max-width: 360px; }
.bt-halt .bt-acts { margin-top: 8px; }
/* the clip player (tap a picture while matching) */
.bt-player video { display: block; width: 100%; max-height: 62vh; margin-top: 12px; border-radius: 16px; background: #000; }
@media (max-width: 380px) { .bt-thumb { width: 72px; height: 50px; } .bt-pr .ct-btn.sm { padding: 0 11px; } }

/* ═══ Ty's phone pass (2026-10-21): coaches use this on their phones in the gym. Less on screen, bigger type, tap to open more. ═══ */
/* Home: what's new reads as a notification, not a field of its own */
.cx-notes { display: grid; gap: 8px; margin: 0 0 12px; }
.cx-note-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--a-card); box-shadow: var(--a-card-shadow), inset 0 0 0 1.5px rgba(28, 160, 239, .35); }
[data-theme="dark"] .cx-note-row { box-shadow: inset 0 0 0 1.5px rgba(28, 160, 239, .45); }
.cx-note-row.g { box-shadow: var(--a-card-shadow), inset 0 0 0 1.5px rgba(99, 102, 241, .32); }
.cx-note-row + .cx-note-row, .bt-home + .cx-notes { margin-top: 0; }
.cx-note-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #1ca0ef; box-shadow: 0 0 0 4px rgba(28, 160, 239, .18); }
.cx-note-row.g .cx-note-dot { background: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, .18); animation: cx-pulse 1.6s ease-in-out infinite; }
@keyframes cx-pulse { 50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, .08); } }
@media (prefers-reduced-motion: reduce) { .cx-note-row.g .cx-note-dot { animation: none; } }
.cx-note-row .cx-ibm b { font-size: 15.5px; }
.cx-note-row > svg { width: 18px; height: 18px; fill: none; stroke: var(--a-ink3); stroke-width: 2; flex: none; }
.bt-home.cx-note-row { margin: 0 0 8px; }
/* Home: two big square upload buttons */
.cx-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.cx-up-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 136px; padding: 16px; border-radius: 22px; text-decoration: none; color: var(--a-ink); background: var(--a-card); box-shadow: var(--a-card-shadow); }
[data-theme="dark"] .cx-up-t { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cx-up-t.primary { background: linear-gradient(160deg, #1ca0ef, #0b6fbd); color: #fff; box-shadow: 0 14px 30px -16px rgba(11, 111, 189, .8); }
.cx-up-t:active { transform: scale(.98); }
.cx-up-i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(28, 160, 239, .12); color: #1ca0ef; margin-bottom: auto; flex: none; }
.cx-up-t b { margin-top: 14px; }
.cx-up-t.primary .cx-up-i { background: rgba(255, 255, 255, .2); color: #fff; }
.cx-up-i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-up-t b { font: 750 17px/1.2 var(--a-font); letter-spacing: -.01em; }
.cx-up-t small { font: 500 13px var(--a-font); color: var(--a-ink3); }
.cx-up-t.primary small { color: rgba(255, 255, 255, .85); }
.cx-howto { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 4px; font: 600 14px var(--a-font); color: #0b6fbd; text-decoration: none; }
[data-theme="dark"] .cx-howto { color: #5cb9f2; }
.cx-howto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Home: a team average that fills its box, then the drills that reach the most athletes */
.cx-avg b { font-size: 52px; line-height: 1; margin: 6px 0 2px; }
.cx-kpi-lvl { display: block; font: 700 14px var(--a-font); font-style: normal; color: var(--a-blue-ink, #0b6fbd); margin-bottom: 4px; }
[data-theme="dark"] .cx-kpi-lvl { color: #5cb9f2; }
.cx-avg .cx-spark { top: 18px; }
.cx-drk small { margin-bottom: 4px; }
.cx-dr { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.cx-dr li + li { border-top: 1px solid var(--a-line); }
.cx-dr a { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit; }
.cx-dr-i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(28, 160, 239, .12); color: #1ca0ef; }
.cx-dr-i svg { width: 15px; height: 15px; fill: currentColor; }
.cx-dr-m { min-width: 0; }
.cx-dr-m b { display: block; font: 700 15px/1.25 var(--a-font); color: var(--a-ink); margin: 0; letter-spacing: 0; }
.cx-dr-m small { display: block; font: 500 12.5px var(--a-font); color: var(--a-ink3); margin: 2px 0 0; }
@media (max-width: 640px) { .cx-kpis { grid-template-columns: 1fr; } }
/* Lab: "Nothing waiting" sits in the open space, not squished at the top */
.lab-empty { margin-top: 28px; padding: 40px 22px !important; text-align: center; }
.lab-empty p { max-width: 420px; margin: 0 auto; }

/* Report: the score breakdown, one bar (technique + output) with each part opening into its lenses */
.sp-card { padding: 16px 16px 12px; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-top .ct-kicker, .sp-top .kicker { margin: 0; }
.sp-total { font: 800 30px var(--a-font); letter-spacing: -.02em; color: var(--a-ink); }
.sp-total small { font-size: 15px; font-weight: 650; color: var(--a-ink3); margin-left: 2px; }
.sp-bar { display: flex; height: 22px; margin: 12px 0 6px; border-radius: 99px; overflow: hidden; background: var(--a-track); }
.sp-bar i { display: block; height: 100%; }
.sp-t { background: linear-gradient(90deg, #3a52ff, #1ca0ef); }
.sp-o { background: #0e1c2b; box-shadow: inset 2px 0 0 var(--a-card); }
[data-theme="dark"] .sp-o { background: #e8eef5; }
.sp-d { border-top: 1px solid var(--a-line); }
.sp-d:first-of-type { border-top: 0; }
.sp-d summary { display: flex; align-items: center; gap: 12px; padding: 14px 2px; cursor: pointer; list-style: none; }
.sp-d summary::-webkit-details-marker { display: none; }
.sp-sw { width: 14px; height: 14px; border-radius: 5px; flex: none; }
.sp-sw.t { background: linear-gradient(135deg, #3a52ff, #1ca0ef); }
.sp-sw.o { background: #0e1c2b; }
[data-theme="dark"] .sp-sw.o { background: #e8eef5; }
.sp-n { flex: 1; min-width: 0; font: 750 17px var(--a-font); color: var(--a-ink); }
.sp-n small { display: block; font: 500 12.5px var(--a-font); color: var(--a-ink3); margin-top: 1px; }
.sp-v { font: 800 22px var(--a-font); color: var(--a-ink); white-space: nowrap; }
.sp-v small { font-size: 13px; font-weight: 600; color: var(--a-ink3); }
.sp-chev { width: 18px; height: 18px; fill: none; stroke: var(--a-ink3); stroke-width: 2.2; flex: none; transition: transform .2s; }
.sp-d[open] .sp-chev { transform: rotate(90deg); }
.sp-d .lens-bars { padding: 0 0 14px; }
.sp-lim { display: block; font: 600 13px var(--a-font); font-style: normal; color: var(--aoj-blue, #1ca0ef); margin: -4px 2px 10px; }
.sp-card .q-sex, .sp-card .q-held, .sp-card .q-earned { margin-top: 10px; }

/* Report: the athlete type folded to its headline */
.ty-d > summary { list-style: none; cursor: pointer; display: block; }
.ty-d > summary::-webkit-details-marker { display: none; }
.ty-prov { margin: 10px 0 0; font: 500 14px/1.45 var(--a-font); color: var(--a-ink2); }
.ty-prov b { color: var(--a-ink); }
.ty-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 650 14px var(--a-font); color: var(--a-blue-ink, #0b6fbd); }
[data-theme="dark"] .ty-open { color: #5cb9f2; }
.ty-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .2s; }
.ty-d[open] .ty-open svg { display: none; }
.ty-d .ty-o2, .ty-d[open] .ty-o1 { display: none; }
.ty-d[open] .ty-o2 { display: inline; }
.ty-body { margin-top: 14px; }
.deeper.one { grid-template-columns: minmax(0, 1fr) !important; max-width: 560px; }

/* Phones: bigger type on the report and the home screen (the desktop layout was being squeezed in) */
@media (max-width: 600px) {
  .cx-rep .lens-head b { font-size: 16px; }
  .cx-rep .lens-meta span { font-size: 16px; }
  .cx-rep .lens-meta small, .cx-rep .lens-status { font-size: 13px; }
  .cx-rep .cx-row .cx-rm b, .cx-rep .cx-fxrow b { font-size: 16.5px; }
  .cx-rep .cx-row .cx-rm small { font-size: 13.5px; }
  .cx-rep .cx-hm b { font-size: 24px; }
  .cx-rep .cx-tabs button { font-size: 15px; }
  .cx-rep .lim h3 { font-size: 19px; }
  .cx-rep .lim p, .cx-rep .lim-sec p { font-size: 15px; line-height: 1.5; }
  .cx-rep .q-opp b { font-size: 16px; }
  .cx-rep .q-opp small { font-size: 14px; }
  .cx .cx-latest .cx-rm b { font-size: 16px; }
  .cx-acts2 { flex-wrap: wrap; }
  .cx-acts2 .ct-btn { flex: 1 1 auto; justify-content: center; }
  .cx-acts2 .rep-del { flex: 0 0 auto; margin-left: auto; }
}

/* Athlete videos: may we share them online (David 2026-10-22). Asked once in the portal, changeable from the plan sheet. */
.ct-consent .co-perm { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; background: var(--a-card2); border-radius: 14px; padding: 12px 14px; margin: 14px 0; font-size: 14.5px; line-height: 1.45; color: var(--a-ink); cursor: pointer; }
.ct-consent .co-perm input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--a-blue); }
.ct-consent .co-q { font-size: 15px; line-height: 1.5; margin: 0 0 14px; color: var(--a-ink2); }
.ct-consent .co-q b { display: block; margin-bottom: 2px; color: var(--a-ink); }
.ct-consent .co-btns { display: grid; gap: 10px; }

/* the bar's Menu tab (five tabs, Upload in the middle); a Remote Analysis reviewer's Lab tab takes its place. On phones
   every tab is the same width, so Upload sits exactly in the middle of the bar (Ty 2026-10-22: "it's off center") */
.cx-nav:has([data-tab="lab"]) [data-cmenu] { display: none !important; }
@media (max-width: 1023px) { .ct .app-tabs.cx-nav { width: min(380px, calc(100vw - 24px)); } .ct .app-tabs.cx-nav .tab-btn { flex: 1 1 0; min-width: 0; padding: 0 4px; } }

/* New assessment, step 1 (Ty 2026-10-22: "a couple of drop downs ... keep it really clean"): two choices, each opens its own panel */
.nw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 12px; }
.nw-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 122px; padding: 16px; border-radius: 22px; background: var(--a-card); box-shadow: var(--a-card-shadow); }
.nw-opt .nw-oi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(28, 160, 239, .12); color: #0B6FAE; margin-bottom: 8px; }
[data-theme="dark"] .nw-opt .nw-oi { color: #7cc8f5; }
.nw-opt .nw-oi svg { width: 22px; height: 22px; }
.nw-opt b { font: 700 16px/1.2 var(--a-font); color: var(--a-ink); }
.nw-opt small { font: 500 13px/1.3 var(--a-font); color: var(--a-ink3); }
.nw-opt[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--a-blue); }
.nw-opt:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.nw-opt:disabled { opacity: .5; cursor: default; }
.nw-team { margin: 0 0 12px; }
.nw-team .tf { margin: 0; }
.nw-batch { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 12px 4px; color: var(--a-ink2); font: 600 14px var(--a-font); text-decoration: none; }
.nw-batch svg { width: 18px; height: 18px; flex: none; }
.nw-batch span { flex: 1; }

/* ── Free athlete seats (seats.js, 2026-10-26): the card on an athlete, the seats page ── */
.seat-card { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.seat-card > * { min-width: 0; }
.seat-h { display: flex; align-items: center; gap: 12px; }
.seat-h > div { flex: 1; min-width: 0; }
.seat-h b { display: block; font: 800 16px var(--a-font); color: var(--a-ink); }
.seat-h small { display: block; font: 500 13px var(--a-font); color: var(--a-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(28, 160, 239, .12); color: var(--a-blue-ink); }
.seat-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seat-p { margin: 0; font: 500 14px/1.45 var(--a-font); color: var(--a-ink2); }
.seat-st { flex: none; font: 700 11px var(--a-font); letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 5px 10px; background: var(--a-card2); color: var(--a-ink2); }
.seat-st.st-joined { background: rgba(28, 160, 239, .12); color: var(--a-blue-ink); }
.seat-st.st-upgraded { background: #16A34A; color: #fff; }
[data-theme="dark"] .seat-st.st-joined { color: var(--a-ink); }
.seat-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--a-card2); border-radius: 12px; padding: 4px; }
.seat-seg label { position: relative; }
.seat-seg input { position: absolute; opacity: 0; pointer-events: none; }
.seat-seg span { display: block; text-align: center; padding: 9px 6px; border-radius: 9px; font: 700 14px var(--a-font); color: var(--a-ink2); cursor: pointer; }
.seat-seg input:checked + span { background: var(--a-card); color: var(--a-ink); box-shadow: var(--a-card-shadow); }
.seat-seg input:focus-visible + span { outline: 2px solid var(--a-blue); outline-offset: 1px; }
.seat-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seat-fields label { display: grid; gap: 5px; font: 700 13px var(--a-font); color: var(--a-ink); }
.seat-fields i { font-style: normal; font-weight: 500; color: var(--a-ink3); }
.seat-fields input { min-height: 46px; border: 1.5px solid var(--a-line); border-radius: 12px; padding: 0 12px; font: 500 16px var(--a-font); background: var(--a-card); color: var(--a-ink); width: 100%; box-sizing: border-box; }
.seat-fields input:focus { border-color: var(--a-blue); outline: none; }
.seat-chk { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.4 var(--a-font); color: var(--a-ink); }
.seat-chk input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--a-blue); }
.seat-msg { margin: 0; font: 600 14px var(--a-font); color: #C2410C; }
.seat-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seat-rm { margin-left: auto; color: var(--a-ink3); }
.seat-just { background: var(--a-card2); border-radius: 12px; padding: 10px 12px; font: 500 14px/1.45 var(--a-font); color: var(--a-ink); }
.seat-linkrow { display: flex; gap: 8px; margin-top: 8px; }
.seat-linkrow input { flex: 1; min-width: 0; min-height: 38px; border: 1px solid var(--a-line); border-radius: 10px; padding: 0 10px; font: 500 13px var(--a-font); background: var(--a-card); color: var(--a-ink2); }
.seat-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.seat-kpis .cx-kpi b { font-size: 28px; }
.seat-kpis .cx-kpi span { display: block; font: 500 12px var(--a-font); color: var(--a-ink2); }
.seat-pay { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 12px; }
.seat-pay span { flex: 1; min-width: 0; }
.seat-pay > svg { width: 18px; height: 18px; fill: none; stroke: var(--a-ink3); stroke-width: 2; flex: none; }
.seat-pay b { display: block; font: 800 15px var(--a-font); color: var(--a-ink); }
.seat-pay small { display: block; font: 500 13px var(--a-font); color: var(--a-ink2); }
.seat-fine { font: 500 13px var(--a-font); color: var(--a-ink3); margin: 12px 2px 0; }
.seat-home { margin-top: 8px; }
@media (max-width: 520px) { .seat-fields { grid-template-columns: 1fr; } .seat-kpis { grid-template-columns: 1fr 1fr; } .seat-kpis .cx-kpi:last-child { grid-column: span 2; } }

/* Give a free seat in one step (#/seats/new) and the Your seats header button (2026-10-26) */
.seat-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seat-one { grid-template-columns: 1fr; }

/* Add an athlete: one form, a free account or the roster (David 2026-10-26) */
.add-one { display: grid; gap: 14px; }
.seat-fields select { min-height: 46px; border: 1.5px solid var(--a-line); border-radius: 12px; padding: 0 10px; font: 500 16px var(--a-font); background: var(--a-card); color: var(--a-ink); width: 100%; box-sizing: border-box; }
.add-way { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.add-way legend { padding: 0; margin-bottom: 8px; font: 750 16px var(--a-font); color: var(--a-ink); }
.add-opt { position: relative; display: block; cursor: pointer; }
.add-opt input { position: absolute; opacity: 0; pointer-events: none; }
.add-opt > span { display: grid; gap: 3px; padding: 13px 14px 13px 44px; border: 1.5px solid var(--a-line); border-radius: 14px; background: var(--a-card); position: relative; }
.add-opt > span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--a-line); box-sizing: border-box; background: var(--a-card); }
.add-opt b { font: 700 15px var(--a-font); color: var(--a-ink); }
.add-opt small { font: 500 13px/1.4 var(--a-font); color: var(--a-ink2); }
.add-opt input:checked + span { border-color: var(--a-blue); background: rgba(28, 160, 239, .06); }
.add-opt input:checked + span::before { border: 5px solid var(--a-blue); }
.add-opt input:focus-visible + span { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.add-seat { display: grid; gap: 12px; padding: 2px 0 0; }
.add-seat[hidden] { display: none; }
.add-one > .ct-btn { justify-content: center; min-height: 50px; }
/* the home: three tiles when Add an athlete sits with the uploads, a tag on athletes with a free account */
.cx-up.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-up.n3 .cx-up-t { min-height: 124px; padding: 14px 12px; border-radius: 20px; }
.cx-up.n3 .cx-up-t b { font-size: 15px; }
.cx-up.n3 .cx-up-t small { font-size: 12px; }
.cx-up.n3 .cx-up-i { width: 38px; height: 38px; border-radius: 12px; }
.seat-tag { align-self: flex-start; margin-top: 3px; font: 700 11px var(--a-font); font-style: normal; letter-spacing: .02em; color: var(--a-blue-ink, #0b6fbd); background: rgba(28, 160, 239, .12); border-radius: 99px; padding: 2px 8px; }
.seat-tag.st-invited { color: var(--a-ink2); background: var(--a-card2); }
.seat-tag.st-upgraded { color: #12805c; background: rgba(22, 163, 74, .12); }
.home-lead { margin: -4px 0 10px; font-size: 14px; line-height: 1.45; }
.home-batch { margin-top: 10px; }
.cx-first { display: grid; justify-items: start; gap: 2px; }
.cx-first .cx-h2 { margin: 0; }
.cx-first .muted { margin: 0; }
.cx-first .ct-btn { margin-top: 14px; }
/* Push to athlete portal: the big button on the coach report (David 2026-10-27) */
.seat-push { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 14px; padding: 16px 18px; border: 0; border-radius: 18px; text-align: left; cursor: pointer;
  background: linear-gradient(160deg, #1ca0ef, #0b6fbd); color: #fff; box-shadow: 0 14px 30px -18px rgba(11, 111, 189, .9); font: inherit; }
.seat-push:active { transform: scale(.99); }
.seat-push:disabled { opacity: .6; cursor: default; }
.seat-push:focus-visible { outline: 3px solid rgba(28, 160, 239, .45); outline-offset: 3px; }
.seat-push > svg { flex: none; width: 26px; height: 26px; padding: 9px; box-sizing: content-box; border-radius: 14px; background: rgba(255, 255, 255, .18); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seat-push > span { display: grid; gap: 2px; min-width: 0; }
.seat-push b { font: 800 18px/1.2 var(--a-font); letter-spacing: -.01em; }
.seat-push small { font: 500 13.5px/1.35 var(--a-font); color: rgba(255, 255, 255, .88); }
.seat-push.done { cursor: default; background: rgba(22, 163, 74, .1); color: var(--a-ink); box-shadow: none; }
.seat-push.done > svg { background: #16a34a; color: #fff; }
.seat-push.done small { color: var(--a-ink2); }
@media print { .seat-push { display: none !important; } }
.nw-seat { width: 100%; border: 0; cursor: pointer; text-align: left; margin: 0 0 12px; font-family: inherit; }
.nw-seat b { color: var(--a-blue-ink, #0b6fbd); }
.nw-seat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
p.nw-seat.on { display: flex; align-items: center; gap: 8px; cursor: default; font: 500 13px/1.4 var(--a-font); color: var(--a-ink2); background: rgba(22, 163, 74, .08); border-radius: 14px; padding: 10px 14px; }
p.nw-seat.on svg { color: #16a34a; }

/* Reports on the coach's account that aren't on this device (2026-10-27) */
.saved-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; border: 1.5px solid rgba(28, 160, 239, .35); }
.saved-m { flex: 1 1 260px; min-width: 0; }
.saved-m b { display: block; font: 800 16px var(--a-font); color: var(--a-ink); }
.saved-m small { display: block; margin-top: 2px; font: 500 14px var(--a-font); color: var(--a-ink2); }
.saved-acts { display: flex; align-items: center; gap: 12px; }

/* Edit an athlete's name (David 2026-10-29) */
.cx-nm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.cx-nm h1 { min-width: 0; overflow-wrap: anywhere; }
.ct .nm-edit { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 99px; background: var(--a-card2); color: var(--a-ink2); font: 600 12.5px var(--a-font); cursor: pointer; }
.ct .nm-edit svg { width: 14px; height: 14px; }
.ct .nm-edit:hover { color: var(--a-ink); }
.ct .nm-edit:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.nm-form { flex-wrap: wrap; gap: 8px; }
.nm-form input { flex: 1 1 220px; min-width: 0; min-height: 46px; border: 1.5px solid var(--a-blue); border-radius: 12px; padding: 0 12px; font: 700 18px var(--a-font); background: var(--a-card); color: var(--a-ink); }
.nm-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(28, 160, 239, .25); }
.nm-form .ct-btn { min-height: 46px; }
.nm-form .seat-msg { flex-basis: 100%; margin: 0; }

/* Drills for each fix (David 2026-10-29) */
.cx-fxd { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--a-line); }
.cx-drts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cx-drt { display: grid; gap: 7px; align-content: start; min-width: 0; }
.ct .cx-drt-i { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0b1220; cursor: pointer; }
.cx-drt-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-drt-i i { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(5, 8, 25, .62); display: grid; place-items: center; }
.ct .cx-drt-i i svg { width: 16px; height: 16px; fill: #fff; stroke: none; margin-left: 2px; }
.ct .cx-drt-i:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.cx-drt-v { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; object-fit: contain; }
.cx-drt-m { display: grid; gap: 2px; min-width: 0; }
.cx-drt-m small { font: 700 10.5px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-blue); }
.cx-drt + .cx-drt .cx-drt-m small { color: #16A34A; }
.cx-drt-m b { font: 700 14px/1.25 var(--a-font); color: var(--a-ink); }
.cx-drt-m em { font: 600 12px var(--a-font); font-style: normal; color: var(--a-ink3); }
.cx-drsame { margin: -8px 2px 20px; }

/* The filming guide from the upload pages (David 2026-10-29) */
.nw-film { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 14px var(--a-font); color: #0b6fbd; text-decoration: none; }
[data-theme="dark"] .nw-film { color: #5cb9f2; }
.ct .nw-film svg { width: 16px; height: 16px; }
/* a fix or drill opened from a link lands below the sticky bar and the report tabs */
.cx-rep .cx-fx, .cx-rep .cx-drfix { scroll-margin-top: calc(120px + env(safe-area-inset-top)); }
/* editing the name on the report header: the field shrinks so Share stays on screen */
.cx-rhead > div:first-child { min-width: 0; }
.cx-rhead .nm-form input { flex-basis: 140px; }

/* Simpler coach portal (David 2026-10-30) */
.cx-simple .cx-avg1 { margin-top: 14px; }
.cx-simple .cx-avg1 b { font-size: 40px; }
.cx-simple .cx-h { margin-top: 22px; }
.cx-mine .cx-row > svg:last-child { width: 18px; height: 18px; flex: none; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; }
.cx-mine .cx-sc { margin-left: auto; font: 800 22px var(--a-font); letter-spacing: -.02em; color: var(--a-ink); }
.cx-simple .cx-plan { margin-top: 14px; }
.tb-more { display: grid; gap: 12px; margin-top: 12px; }
.tb-more .cx-lens { margin-top: 0; }
/* the free account folds into one row on the athlete's page */
.seat-fold { margin-top: 12px; padding: 0; }
.seat-sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.seat-sum::-webkit-details-marker { display: none; }
.seat-sum::marker { content: ''; }
.seat-sm { flex: 1; min-width: 0; display: grid; gap: 2px; }
.seat-sm b { font: 800 16px var(--a-font); color: var(--a-ink); }
.seat-sm small { font: 500 13px var(--a-font); color: var(--a-ink2); }
.seat-sum > svg:last-child { width: 18px; height: 18px; flex: none; color: var(--a-ink3); fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
.seat-fold[open] .seat-sum > svg:last-child { transform: rotate(90deg); }
.seat-sum:focus-visible { outline: 3px solid rgba(28, 160, 239, .45); outline-offset: 2px; border-radius: 16px; }
.seat-in { margin-top: 0; padding: 0 16px 16px; }
/* one Send button on the report, and its sheet */
.seat-push > svg + span + svg { width: 20px; height: 20px; padding: 0; margin-left: auto; background: none; }
.seat-push.done { cursor: pointer; }
.seat-push.done > svg + span + svg { background: none; color: var(--a-ink3); }
.cx-send-o { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--a-line); border-radius: 16px; background: var(--a-card); color: var(--a-ink); text-align: left; font: inherit; cursor: pointer; }
.cx-send-o > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-send-o > span { display: grid; gap: 2px; min-width: 0; }
.cx-send-o b { font: 700 15.5px var(--a-font); }
.cx-send-o small { font: 500 12.5px/1.4 var(--a-font); color: var(--a-ink2); }
.cx-send-o.pri { border: 0; background: linear-gradient(160deg, #1ca0ef, #0b6fbd); color: #fff; }
.cx-send-o.pri small { color: rgba(255, 255, 255, .88); }
.cx-send-o.done { cursor: default; background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .25); }
.cx-send-o.done > svg { color: #16a34a; }
.cx-send-o:focus-visible { outline: 3px solid rgba(28, 160, 239, .45); outline-offset: 2px; }
.cx-send-link { display: inline-flex; align-items: center; gap: 8px; margin: 14px 4px 2px; font: 600 14px var(--a-font); color: #0b6fbd; text-decoration: none; }
[data-theme="dark"] .cx-send-link { color: #5cb9f2; }
.cx-send-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* the upload page's free-account card (Ty 2026-10-30: "make that area more visible ... more of a feature area") */
.nw-seatcard { margin: 0 0 14px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #EAF6FE, #F4FAFF); border: 1.5px solid #BFE3FB; }
.nw-seatcard-t { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.nw-seatcard-i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #1CA0EF; color: #fff; }
.nw-seatcard-i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nw-seatcard b { display: block; font-size: 16px; font-weight: 800; color: var(--ink, #14202E); margin-bottom: 2px; }
.nw-seatcard small { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink2, #3E4C5E); }
.nw-seatcard-b { width: 100%; justify-content: center; }
html[data-theme="dark"] .nw-seatcard { background: linear-gradient(160deg, #0F2338, #0C1A2B); border-color: #1D4A72; }
html[data-theme="dark"] .nw-seatcard b { color: #F3F6FA; } html[data-theme="dark"] .nw-seatcard small { color: #B9C5D3; }

/* The director's club on Home (coach-tier.js clubCard, clubs.js) */
.cx-club { margin: 0 0 14px; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, #0B6FBD, #1CA0EF); color: #fff; box-shadow: 0 8px 24px rgba(11, 111, 189, .22); }
.cx-club-t { display: flex; align-items: center; gap: 12px; }
.cx-club-i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
.cx-club-i svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-club-t small { display: block; font: 600 12px var(--a-font); color: rgba(255, 255, 255, .85); }
.cx-club-t b { display: block; font: 800 19px/1.2 var(--a-font); letter-spacing: -.01em; color: #fff; }
.cx-club-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.cx-club-s > div { background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.cx-club-s b { display: block; font: 800 21px/1.15 var(--a-font); color: #fff; }
.cx-club-s b span { font: 700 13px var(--a-font); color: rgba(255, 255, 255, .8); }
.cx-club-s small { display: block; font: 600 11.5px/1.3 var(--a-font); color: rgba(255, 255, 255, .85); margin-top: 2px; }
.cx-club-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.cx-club-bar i { display: block; height: 100%; border-radius: 99px; background: #fff; }
.ct .cx-club-n { margin: 10px 0 12px; font: 500 13.5px/1.45 var(--a-font); color: rgba(255, 255, 255, .92); }
.cx-club-b.ct-btn.primary { width: 100%; justify-content: center; background: #fff; color: #0B6FBD !important; }
.cx-club-b svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .cx-club { display: grid; grid-template-columns: 1fr auto; column-gap: 18px; align-items: center; }
  .cx-club-t, .cx-club-s, .cx-club-bar, .ct .cx-club-n { grid-column: 1; } .cx-club-b.ct-btn.primary { grid-column: 2; grid-row: 1 / span 4; width: auto; padding: 0 22px; } }

/* How to film on Home: a card nobody can miss (David 2026-10-30: "how to film is small and hidden please make this obvious") */
.cx-film { grid-column: 1 / -1; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; margin: 10px 0 2px; padding: 14px 14px 14px 12px; border-radius: 18px;
  background: linear-gradient(160deg, #EAF6FE, #F4FAFF); border: 1.5px solid #BFE3FB; color: var(--a-ink, #14202E); text-decoration: none; }
.cx-film-i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #1CA0EF; color: #fff; }
.cx-film .cx-film-i svg { width: 22px; height: 22px; fill: #fff; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.cx-film-t b { display: block; font: 800 16px/1.25 var(--a-font); color: var(--a-ink, #14202E); }
.cx-film-t small { display: block; font: 500 13px/1.45 var(--a-font); color: var(--a-ink2, #3E4C5E); margin-top: 2px; }
.cx-film .cx-film-go { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 99px; background: #1CA0EF; color: #fff !important; font: 700 13.5px var(--a-font); white-space: nowrap; }
.cx-film .cx-film-go svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; }
[data-theme="dark"] .cx-film { background: linear-gradient(160deg, #0F2338, #0C1A2B); border-color: #1D4A72; }
[data-theme="dark"] .cx-film-t b { color: #F3F6FA; } [data-theme="dark"] .cx-film-t small { color: #B9C5D3; }
@media (max-width: 640px) { .cx-film { grid-template-columns: 46px 1fr; } .cx-film-go { grid-column: 1 / -1; justify-content: center; padding: 11px 12px; font-size: 14.5px; }
  /* the clip pickers share the class (Choose your clips, Film or choose X's approach): their line under the title takes the
     full width on a phone, not the 46px icon column, where it read one word per line */
  label.cx-film > span { grid-column: 1 / -1; } }
.cx-film, .cx-film-t { text-align: left; }
/* the team average says what it is */
.cx-avg1 > span { display: block; line-height: 1.45; }
.cx-avg1 > small { font: 800 15px/1.3 var(--a-font); color: var(--a-ink, #14202E); }
[data-theme="dark"] .cx-avg1 > small { color: #F3F6FA; }
/* a free account on the Athletes list */
.cx-free { color: #0B6FBD; font-weight: 700; }

/* Delete a report from the athlete's list, and Edit (name, position, age) / Remove on the athlete's page (David 2026-10-30,
   Jonathan Lim: "We can't seem to delete jumps", "name the girls correct", "edit position and age") */
.asmt-list li { flex-wrap: wrap; }
.ct .asmt-del { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 2px; border: 0; border-radius: 12px; background: none; color: var(--a-ink3); cursor: pointer; }
.ct .asmt-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ct .asmt-del:hover { color: var(--a-bad); background: var(--a-card2); }
.ct .asmt-del:focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; }
.del-confirm.in-list { flex: 1 1 100%; justify-content: flex-end; padding: 2px 6px 10px; color: var(--a-ink); }
.ath-form { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px 10px; align-items: end; width: 100%; max-width: 520px; }
.ath-f { display: grid; gap: 4px; min-width: 0; }
.ath-f > span { font: 650 12px var(--a-font); color: var(--a-ink2); }
.ath-form .ath-name { grid-column: 1 / -1; }
.ath-form input, .ath-form select { width: 100%; min-width: 0; min-height: 46px; border: 1.5px solid rgba(127, 127, 127, .4); border-radius: 12px; padding: 0 12px; font: 600 16px var(--a-font); background: var(--a-card); color: var(--a-ink); flex: none; }
.ath-form .ath-name input { border-color: var(--a-blue); font: 700 18px var(--a-font); }
.ath-form input:focus, .ath-form select:focus { outline: none; border-color: var(--a-blue); box-shadow: 0 0 0 3px rgba(28, 160, 239, .25); }
.ath-form .ath-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.ct .ath-rm { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 2px; border: 0; background: none; color: var(--a-bad); font: 600 13.5px var(--a-font); cursor: pointer; }
.ct .ath-rm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ath-form .ath-rmc { grid-column: 1 / -1; color: var(--a-ink); }
.ath-form .seat-msg { grid-column: 1 / -1; }
.cx-prof.editing > .ct-av, .cx-prof.editing > .cx-st, .cx-prof.editing > div > p, .cx-rhead.editing #repSub { display: none; }
/* what the +/- next to a roster score means (David 2026-10-30) */
.cx-legend { margin: -2px 2px 10px; font: 500 12.5px/1.45 var(--a-font); color: var(--a-ink3); }

/* Deep compare (David 2026-11-06): all four lenses, the points each moved, indicators, key positions, what changed step by
   step, where height is leaking, and the archetype reminder. Every chart says which jump is which: 1st jump grey, 2nd jump
   blue ("which jump is which we need to know first and second jump. Chunkier vertical bar graphs"). */
.lc-amplification::before { content: "A"; }
.cmp-deep > .ct-card { margin-top: 12px; }
.cmp-deep .cmp-sub, .cmp-deep .cmp-note { font: 500 12.5px/1.5 var(--a-font); color: var(--a-ink3); margin: 0 0 12px; }
.cmp-deep .cmp-note { margin: 10px 0 0; }
.cmp-jump { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; font: 800 12px var(--a-font); letter-spacing: .08em; text-transform: uppercase; }
.cmp-jump.j1 { background: #E5E7EB; color: #4B5563; } .cmp-jump.j2 { background: var(--aoj-blue); color: #fff; }
.cmp-arch { border: 1.5px solid var(--aoj-edge); background: var(--aoj-surface); }
.cmp-arch .arch-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cmp-arch .arch-h svg { width: 20px; height: 20px; color: var(--aoj-ink); fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.cmp-arch .arch-h b { font: 800 15px var(--a-font); color: var(--aoj-ink); }
.cmp-arch p { font: 500 14px/1.55 var(--a-font); color: var(--a-ink); margin: 0 0 8px; }
.cmp-arch p:last-child { margin-bottom: 0; }
.cmp-arch .arch-cue { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--a-card); }
.cmp-arch .arch-cue span { font: 800 10.5px var(--a-font); letter-spacing: .12em; text-transform: uppercase; color: var(--aoj-ink); }
.cmp-sum p { font: 500 14.5px/1.55 var(--a-font); color: var(--a-ink2); margin: 0 0 6px; }
.cmp-sum p.lead { font: 750 18px/1.35 var(--a-font); color: var(--a-ink); }
.jl-legend, .kp2-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font: 700 13px var(--a-font); color: var(--a-ink2); }
.jl-legend span, .kp2-legend span { display: inline-flex; align-items: center; gap: 8px; }
.jl-legend i, .kp2-legend i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; flex: none; }
.jl-legend .k1 { background: #9AA3AF; } .jl-legend .k2 { background: var(--aoj-blue); }
/* a pair of chunky columns: 1st jump grey, 2nd jump blue (.jc: .pc is the progress chart's) */
.jc { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex: none; }
.jc-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jc-bar { position: relative; width: 40px; height: 62px; display: flex; align-items: flex-end; }
.jc-bar i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; }
.jc-bar b { position: absolute; left: -10px; right: -10px; text-align: center; font: 800 13px/1 var(--a-font); }
.jc-col small { font: 800 10px var(--a-font); letter-spacing: .04em; text-transform: uppercase; color: var(--a-ink3); white-space: nowrap; }
.jc-col.c2 small { color: var(--aoj-ink); }
.jc-col.c1 i { background: #9AA3AF; } .jc-col.c2 i { background: var(--aoj-blue); }
.jc-col.c1 b { color: var(--a-ink3); } .jc-col.c2 b { color: var(--a-ink); }
.jc.big { gap: 12px; } .jc.big .jc-bar { width: 58px; height: 180px; } .jc.big .jc-bar b { font-size: 17px; } .jc.big .jc-col small { font-size: 11px; }
.jc.na { height: 202px; align-items: center; } .jc.na span { font: 650 12.5px var(--a-font); color: var(--a-ink3); padding: 8px 10px; border: 1.5px dashed var(--a-line); border-radius: 10px; text-align: center; }
.lz-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 4px 0 18px; border-bottom: 1px solid var(--a-line); margin-bottom: 16px; }
.lz-grp { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lz-name { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lz-name > span { font: 800 14px var(--a-font); }
@media (max-width: 560px) { .lz-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } .jc.big .jc-bar { width: 42px; height: 150px; } .jc.na { height: 172px; } }
/* each lens */
.lens4 { padding-bottom: 14px; border-bottom: 1px solid var(--a-line); }
.lens4:last-child { border-bottom: 0; padding-bottom: 0; }
.lens4 .cl-h { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.lens4 .cl-h > b { font: 750 16px var(--a-font); }
.lens4 .cl-h > small { font: 500 12px var(--a-font); color: var(--a-ink3); }
.lens4 .cl-v { margin-left: auto; font: 600 13px var(--a-font); color: var(--a-ink2); }
.lens4 .cl-v b { color: var(--a-ink); }
.ind-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ind-row { padding: 10px 12px; border-radius: 12px; background: var(--a-card2); }
.ind-row.up { box-shadow: inset 4px 0 0 var(--a-good-ink); } .ind-row.down { box-shadow: inset 4px 0 0 var(--a-bad-ink); }
.ind-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ind-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ind-t b { font: 700 14px var(--a-font); }
.ind-t em { font: 750 12.5px var(--a-font); font-style: normal; } .ind-t em.up { color: var(--a-good-ink); } .ind-t em.down { color: var(--a-bad-ink); }
.ind-t > span { font: 600 12px var(--a-font); color: var(--a-ink3); }
.ind-saw p, .ind-more p { font: 500 13px/1.5 var(--a-font); color: var(--a-ink2); margin: 8px 0 0; }
.ind-saw p span { display: inline-block; min-width: 66px; margin-right: 6px; font: 800 10.5px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink3); }
.ind-saw p:last-child span { color: var(--aoj-ink); }
.ind-more summary { cursor: pointer; font: 600 12px var(--a-font); color: var(--a-ink3); margin-top: 4px; }
.cl.still li small { margin-left: auto; font: 650 11.5px var(--a-font); color: var(--a-ink3); white-space: nowrap; }
.cl.still li small.better { color: var(--a-good-ink); } .cl.still li small.worse { color: var(--a-bad-ink); }
/* key positions: the 1st jump as a wide grey shadow, the 2nd as a bold blue skeleton on top, on a light panel */
.kp2-strip { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.kp2 { margin: 0; border-radius: 14px; background: var(--a-card2); padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; }
.kp2 svg { width: 100%; aspect-ratio: 1; display: block; }
.kp2 .fl { stroke: var(--a-ink3); opacity: .4; }
.kp2 .g1 { stroke: #BAC2CD; stroke-linecap: round; } .kp2 .g1h { fill: #BAC2CD; }
.kp2 .g2 { stroke: var(--aoj-ink); stroke-linecap: round; } .kp2 .g2h { fill: var(--aoj-ink); }
.kp2 figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-top: 6px; }
.kp2 figcaption b { font: 750 13.5px var(--a-font); } .kp2 figcaption span { font: 600 12px var(--a-font); color: var(--a-ink2); }
.kp2-legend .k1 { background: #BAC2CD; } .kp2-legend .k2 { background: var(--aoj-ink); }
@media (max-width: 560px) { .kp2-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-theme="dark"] .kp2 .g1 { stroke: #5B6573; } [data-theme="dark"] .kp2 .g1h, [data-theme="dark"] .kp2-legend .k1 { fill: #5B6573; background: #5B6573; }
[data-theme="dark"] .kp2 .g2 { stroke: #8C9BFF; } [data-theme="dark"] .kp2 .g2h, [data-theme="dark"] .kp2-legend .k2 { fill: #8C9BFF; background: #8C9BFF; }
[data-theme="dark"] .cmp-jump.j1 { background: #374151; color: #E5E7EB; }
/* what changed step by step, where height is leaking, what the tracking measured */
.st-phase + .st-phase { margin-top: 14px; }
.st-phase h4 { font: 800 12px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink3); margin: 0 0 8px; }
.st-list, .lk-list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.st-item, .lk-list li { padding: 10px 12px; border-radius: 12px; background: var(--a-card2); }
.st-item.kd-good { box-shadow: inset 4px 0 0 var(--a-good-ink); } .st-item.kd-bad { box-shadow: inset 4px 0 0 var(--a-bad-ink); } .st-item.kd-warn { box-shadow: inset 4px 0 0 var(--a-warn-ink); }
.st-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.st-h b { font: 700 14px var(--a-font); }
.st-h small { font: 600 11.5px var(--a-font); color: var(--a-ink3); }
.st-item p, .lk-list li p { font: 500 13px/1.5 var(--a-font); color: var(--a-ink2); margin: 6px 0 0; }
.st-item p span { display: inline-block; margin-right: 6px; font: 800 10.5px var(--a-font); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink3); }
.st-item p.st-why { color: var(--a-ink3); }
.kd-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font: 800 11px var(--a-font); letter-spacing: .02em; }
.kd-chip.kd-good { background: rgba(21, 128, 61, .12); color: var(--a-good-ink); } .kd-chip.kd-bad { background: rgba(194, 65, 12, .12); color: var(--a-bad-ink); } .kd-chip.kd-warn { background: rgba(180, 83, 9, .12); color: var(--a-warn-ink); }
.lk-list { counter-reset: lk; }
.lk-list li { counter-increment: lk; position: relative; padding-left: 40px; }
.lk-list li::before { content: counter(lk); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--a-ink); color: var(--a-card); font: 800 11px var(--a-font); }
.lk-list .p-cue, .lk-list .aoj-check { margin-top: 8px; }
.lk-list .aoj-check { background: var(--aoj-soft); color: var(--a-ink); box-shadow: none; padding: 8px 12px; border-radius: 10px; }
.lk-list .aoj-check span { color: var(--aoj-ink); }
.lk-list .aoj-check b { color: var(--a-ink); font-size: 13.5px; }
.mv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mv-list li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--a-card2); }
.mv-list li b { font: 700 14px var(--a-font); }
.mv-list li span { font: 500 12.5px/1.45 var(--a-font); color: var(--a-ink3); }
.mv-list li.good { box-shadow: inset 4px 0 0 var(--a-good-ink); } .mv-list li.bad { box-shadow: inset 4px 0 0 var(--a-bad-ink); }
.cmp-swap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--a-card2); font: 600 13px/1.45 var(--a-font); color: var(--a-ink2); }
.cmp-swap .ct-btn { flex: none; }
/* the difference: where Jump 2 lost and where it gained */
.why-d { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font: 800 13px var(--a-font); }
.why-d.up { background: rgba(21, 128, 61, .12); color: var(--a-good-ink); } .why-d.down { background: rgba(194, 65, 12, .12); color: var(--a-bad-ink); }
.df-title { font: 750 20px var(--a-font); color: var(--a-ink); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.df-title b { font-weight: 850; }
.cmp-diff .lz-chart { padding-bottom: 18px; border-bottom: 1px solid var(--a-line); margin-bottom: 16px; }
.df-group + .df-group { margin-top: 18px; }
.df-group h4 { display: flex; align-items: center; gap: 8px; font: 850 15px var(--a-font); letter-spacing: .02em; text-transform: uppercase; margin: 0 0 10px; }
.df-group h4 i { font-style: normal; font-size: 13px; }
.df-group.lost h4 { color: var(--a-bad-ink); } .df-group.gained h4 { color: var(--a-good-ink); }
.df-item { padding: 14px 16px; border-radius: 14px; background: var(--a-card2); }
.df-item + .df-item { margin-top: 10px; }
.df-item.bad { box-shadow: inset 4px 0 0 var(--a-bad-ink); } .df-item.good { box-shadow: inset 4px 0 0 var(--a-good-ink); }
.df-h { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.df-sc { font: 650 13.5px var(--a-font); color: var(--a-ink2); } .df-sc b { color: var(--a-ink); }
.df-sum { font: 750 16px/1.4 var(--a-font); color: var(--a-ink); margin: 8px 0 0; }
.df-why { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--a-card); }
.df-why span { display: block; font: 800 10.5px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--aoj-ink); margin-bottom: 3px; }
.df-why p { font: 600 14px/1.55 var(--a-font); color: var(--a-ink); margin: 0; }
.df-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.df-list > li { padding-top: 10px; border-top: 1px solid var(--a-line); }
.df-list > li > b { display: block; font: 700 14px var(--a-font); color: var(--a-ink); }
.df-list > li > span { display: block; font: 500 13px/1.5 var(--a-font); color: var(--a-ink2); margin-top: 2px; }
.df-j p { font: 500 13px/1.5 var(--a-font); color: var(--a-ink2); margin: 6px 0 0; }
.df-j em { display: inline-block; min-width: 58px; margin-right: 6px; font: 800 10.5px var(--a-font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.df-j em.j1 { color: var(--a-ink3); } .df-j em.j2 { color: var(--aoj-ink); }
.df-sub { margin: 6px 0 0; padding-left: 18px; }
.df-sub li { font: 500 13px/1.55 var(--a-font); color: var(--a-ink2); }
@media (max-width: 560px) { .df-item { padding: 12px 12px; } .df-title { font-size: 18px; } }
/* why each lens changed: one field per lens, in the chart's order */
.lt-title { font: 850 15px var(--a-font); letter-spacing: .02em; text-transform: uppercase; color: var(--a-ink); margin: 0 0 10px; }
.lt-list { display: grid; gap: 10px; }
.lt-item { padding: 0; border-radius: 14px; background: var(--a-card2); }
.lt-item > summary { list-style: none; cursor: pointer; padding: 14px 16px; }
.lt-item > summary::-webkit-details-marker { display: none; }
.lt-item > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2.5px solid var(--a-ink2); border-bottom: 2.5px solid var(--a-ink2); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.lt-item[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lt-item > summary .lt-sc { font-size: 15px; }
.lt-body { padding: 0 16px 14px; }
.lt-body .lt-say:first-child { margin-top: 0; }
.lt-ev { font: 700 13px var(--a-font); color: var(--aoj-ink); margin: 12px 0 0; }
.lt-body .df-list { margin-top: 8px; }
.lt-hint { font: 500 13.5px var(--a-font); color: var(--a-ink2); margin: -4px 0 10px; }
.lt-item.down { box-shadow: inset 4px 0 0 var(--a-bad-ink); } .lt-item.up { box-shadow: inset 4px 0 0 var(--a-good-ink); } .lt-item.flat, .lt-item.na { box-shadow: inset 4px 0 0 var(--a-line); }
.lt-h { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.lt-sc { font: 650 13.5px var(--a-font); color: var(--a-ink2); } .lt-sc b { color: var(--a-ink); }
.lt-say { font: 500 15px/1.6 var(--a-font); color: var(--a-ink); margin: 10px 0 0; }
.lt-say b { font-weight: 800; }
.lt-item.down .lt-say b { color: var(--a-bad-ink); } .lt-item.up .lt-say b { color: var(--a-good-ink); }
.lt-item .p-cue { margin-top: 10px; }
.lt-more { margin-top: 10px; }
.lt-more summary { cursor: pointer; font: 700 13px var(--a-font); color: var(--aoj-ink); }
.lt-more .df-list { margin-top: 8px; }
@media (max-width: 560px) { .lt-item > summary { padding: 12px; } .lt-body { padding: 0 12px 12px; } .lt-say { font-size: 14.5px; } }
/* lens by lens: each lens with its score, how it's built and its criteria dropdown */
.lbl-intro { font: 500 14px/1.55 var(--a-font); color: var(--a-ink2); margin: 0 0 12px; }
.lbl-list { display: grid; gap: 10px; }
.lbl-lens { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--a-line); background: var(--a-card); }
.lbl-lens.down { box-shadow: inset 4px 0 0 var(--a-bad-ink); } .lbl-lens.up { box-shadow: inset 4px 0 0 var(--a-good-ink); }
.lbl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.lbl-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lbl-n small { font: 500 12.5px var(--a-font); color: var(--a-ink3); }
.lbl-sc { display: flex; align-items: center; gap: 8px; font: 650 14px var(--a-font); color: var(--a-ink2); }
.lbl-sc b { color: var(--a-ink); font-size: 16px; }
.lbl-sc.na { font: 600 12.5px var(--a-font); color: var(--a-ink3); }
.lbl-built { font: 500 13.5px/1.5 var(--a-font); color: var(--a-ink2); margin: 8px 0 0; }
.lbl-crit { margin-top: 10px; border-radius: 12px; background: var(--a-card2); }
.lbl-crit > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 10px 12px; list-style: none; }
.lbl-crit > summary::-webkit-details-marker { display: none; }
.lbl-crit > summary b { font: 750 14px var(--a-font); color: var(--aoj-ink); }
.lbl-crit > summary b::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.lbl-crit[open] > summary b::before { transform: rotate(90deg); }
.lbl-crit > summary span { font: 600 12.5px var(--a-font); color: var(--a-ink3); }
.lbl-crit .ind-list { margin: 0; padding: 0 10px 10px; }
.lbl-crit .ind-row { background: var(--a-card); }
.lbl-crit .cmp-note { padding: 0 12px 10px; }
.ind-def { font: 500 12.5px/1.45 var(--a-font); color: var(--a-ink3); }
@media (max-width: 560px) { .lbl-lens { padding: 12px; } .lbl-h { align-items: flex-start; } }