/* ADP additions to adp.css. Tokens only: no raw colours here (BUILD-PLAN 5.2 rule 1). */

/* Approved event palette: 10m keeps blue; 50m uses the existing theme greens.
   Keep these aliases on both theme roots so nested style-guide themes resolve correctly. */
.t-light, .t-dark {
  --ev50: var(--good);
  --ev50-bg: var(--good-bg);
  --ev50-text: var(--good);
  --event-both-pattern: repeating-linear-gradient(135deg, var(--ev10) 0 6px, var(--ev50) 6px 12px);
  --event-both-tint: repeating-linear-gradient(135deg, var(--ev10-bg) 0 6px, var(--ev50-bg) 6px 12px);
}
.event-swatch { border-radius: 3px; }
.event-fill-10 { background: var(--ev10); }
.event-fill-50 { background: var(--ev50); }
.event-fill-both, .cal-bar.bboth { background: var(--event-both-pattern); }
.tag.evboth { background: var(--event-both-tint); color: var(--text-2); }
.cal-bar.b50 { color: var(--on-good); }
/* A quiet backplate keeps names legible across both stripe colours and both themes. */
.cal-bar:is(.b10, .b50, .bboth) .cal-bar-label { background: var(--surface); color: var(--text); padding: 0 4px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; }

/* IBM Plex, self-hosted (OFL, see fonts/OFL.txt) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
h1:focus { outline: none; }
a { color: var(--accent-text); }

/* ---------- Phone shell (under 900 px) ----------
   adp.css sizes .phone for the 390 px canvas. On a real phone it is fluid: full width up to
   640 px, then centred; the app bar sits on top and the save bar and bottom bar stay pinned. */
.phone.shell-phone { width: 100%; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.shell-top { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top); background: var(--surface); }
.shell-body { width: 100%; max-width: 640px; margin: 0 auto; }
.shell-bottom { position: sticky; bottom: var(--keyboard-inset, 0px); z-index: 10; }
.shell-bottom > :last-child { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.shell-bottom .savebar { justify-content: center; }
.shell-bottom .savebar > * { max-width: 608px; }
/* Landscape notches and a keyboard-resized visual viewport must leave controls reachable. */
.shell-phone { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.shell-phone input, .shell-phone textarea { scroll-margin-block: 100px 180px; }

/* Persistent, opt-in update snackbar; no timeout and no automatic reload during entry. */
.pwa-update { position: fixed; z-index: 1600; left: 50%; transform: translateX(-50%); bottom: calc(112px + env(safe-area-inset-bottom)); width: min(608px, calc(100% - 32px)); display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pwa-update .btn { flex: none; min-height: 44px; }

/* ---------- Desktop shell (900 px and up) ---------- */
.desk.shell-desk { min-height: 100vh; min-height: 100dvh; flex-wrap: nowrap; }
.shell-desk .dside { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
/* Screens without a desktop mockup: the phone content in a centred 720 px column */
.desk-column { width: 100%; max-width: 720px; margin: 24px auto 48px; background: var(--bg); }
.desk-column-top { padding: 0 16px; }
/* Desktop column (screens without a desktop mockup): app bar and save bar line up with the cards and are rounded all round. */
.desk-column-top > .abar { border-radius: 12px; border: 1px solid var(--line); }
.dcontent-body { display: flex; flex-direction: column; gap: 20px; }
[hidden] { display: none !important; }
.desk-column-bottom { position: sticky; bottom: 0; padding: 0 16px 16px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.desk-column-bottom .savebar { border-radius: 12px; border: 1px solid var(--line); }

/* ---------- Small helpers used by the components ---------- */
.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; }

/* Competition charts fit every point; measured label density keeps axes readable. */
.season-scores { display: flex; flex-direction: column; gap: 12px; }
.season-scores .card-h { margin-bottom: 0; }
.season-scores .segm button { min-height: 44px; line-height: 1.25; }
.season-scores .adp-empty { margin: 0; }
.season-score-chart { min-width: 0; }
.season-score-chart h3 { margin: 0; font-size: 13px; color: var(--text-2); font-weight: 600; }
.score-legend { flex-wrap: wrap; gap: 12px; }
.score-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ev10); flex: none; }
.scores-50 .score-key { background: var(--ev50); }
.score-key.cut { background: var(--surface); border: 2px solid var(--ev10); box-sizing: border-box; }
.scores-50 .score-key.cut { background: var(--surface); border-color: var(--ev50); }
.score-key.elimination { background: var(--ev50); border: 2px solid var(--ev50); border-radius: 2px; transform: rotate(45deg); }
.score-trend-key { display: inline-block; width: 24px; border-top: 2px solid var(--ev10); flex: none; }
.scores-50 .score-trend-key { border-color: var(--ev50); }
.score-average { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ev10); }
.score-average.scores-50, .score-average-dot.scores-50 { color: var(--ev50); }
.score-average polyline { fill: none; stroke: currentColor; stroke-width: 2; }
.score-average-dot { position: absolute; width: 7px; height: 7px; border: 2px solid currentColor; border-radius: 50%; background: var(--surface); color: var(--ev10); transform: translate(-50%, 50%); pointer-events: none; z-index: 2; }
.score-overview { width: 100%; min-width: 0; padding: 16px 4px 4px; }
.score-canvas { width: 100%; min-width: 0; }
.score-canvas .plot-x { height: 62px; }
.score-canvas .plot-x > .score-tick { transform: none; overflow: hidden; text-overflow: ellipsis; }
.score-name { display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; vertical-align: bottom; }
.score-canvas .plot-x small { font: inherit; }
.plot .score-point { position: absolute; transform: translate(-50%, 50%); width: 44px; height: 44px; border: none; padding: 0; border-radius: 8px; background: transparent; cursor: pointer; z-index: 3; }
.plot .score-point .dot { left: 50%; bottom: 50%; width: var(--score-dot-size, 12px); height: var(--score-dot-size, 12px); }
.plot .score-cut { position: absolute; width: var(--score-dot-size, 12px); height: var(--score-dot-size, 12px); box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ev10); background: var(--surface); transform: translate(-50%, 50%); z-index: 2; pointer-events: none; }
.plot .score-cut.c50 { border-color: var(--ev50); }
.plot .score-point.passive { width: 0; height: 0; pointer-events: none; }
.plot .score-point.selected .dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.score-picker { width: 100%; min-width: 0; min-height: 44px; text-overflow: ellipsis; }
.plot .score-point .dot.elimination { background: var(--ev50); border: 2px solid var(--ev50); border-radius: 2px; transform: translate(-50%, 50%) rotate(45deg); }
.plot .score-point[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: -4px; }
.score-canvas .dv { pointer-events: none; }
.score-details { min-height: 2.9em; margin: 4px 0 0; color: var(--text-2); font-size: 12px; overflow-wrap: anywhere; }
a.rowlink { text-decoration: none; color: inherit; }
.ibtn-accent { color: var(--accent-text); }
.ibtn[disabled] { opacity: .45; cursor: not-allowed; }
.switch-d { display: block; font-size: 13px; color: var(--muted); }
.composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.muted-s { font-size: 13px; color: var(--muted); }
.next-m { flex: 1; min-width: 0; }
.next-t { font-weight: 600; font-size: 16px; line-height: 1.3; }
.next-s { margin-top: 4px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Sign-in ---------- */
.login-brand { display: flex; gap: 14px; align-items: center; }
.login-mark { width: 56px; height: 56px; border-radius: 14px; background: var(--side); color: var(--side-accent); display: grid; place-items: center; flex: none; }
.login-name { font-weight: 600; font-size: 16px; }
.login-notice { display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow), inset 3px 0 0 var(--warn); }
.login-p { margin: 0; }
.login-foot { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.dside-signout { color: var(--side-text); text-decoration: none; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
.dside-signout:hover { color: var(--side-accent); }

/* ---------- /dev/styleguide (layout of Foundations.dc.html) ---------- */
.sg { display: flex; flex-direction: column; gap: 32px; }
.sg-head { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.sg-title { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.sg-lede { margin: 0; color: var(--text-2); max-width: 74ch; }
.sg-h { font-size: 15px; font-weight: 600; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.sg-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.sg-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sg-panel { background: var(--bg); color: var(--text); border-radius: 12px; padding: 20px; box-shadow: 0 0 0 1px var(--line); font-size: 15px; }
.sg-panel-name { font-size: 12.5px; color: var(--muted); width: 44px; }
.sg-statuses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg-components, .sg-more { display: flex; flex-direction: column; gap: 20px; }
.sg-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.sg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sg-col .card.flush > .abar { border-radius: 12px 12px 0 0; }
.sg-buttons { display: flex; flex-direction: column; gap: 8px; }
.sg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-card-t { font-size: 15px; }
.sg-ptl { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.sg-phone-only { margin-top: 12px; }
@media (min-width: 900px) {
  .sg-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-phone-only { display: none; }
}
@media (min-width: 1200px) {
  .sg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Blazor start-up and error UI */
.loading-progress { position: absolute; display: block; width: 6rem; height: 6rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--line); stroke-width: .5rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-size: 13px; color: var(--muted); inset: calc(20vh + 7rem) 0 auto 0; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

#blazor-error-ui {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 12px 48px 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--bad-bg); color: var(--bad); border-top: 1px solid var(--line); font-size: 14px;
}
#blazor-error-ui .reload { font-weight: 600; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 12px; cursor: pointer; }
.blazor-error-boundary { padding: 16px; background: var(--bad-bg); color: var(--bad); border-radius: 8px; }
.blazor-error-boundary::after { content: "Something went wrong."; }

/* ---------- Today and Log (Step 6) ---------- */
/* Save queue status line under the save bar: info, good, warn (BUILD-PLAN Step 6.3). */
.savestat { background: var(--surface); padding: 0 16px 8px; margin-top: -4px; font-size: 12.5px; font-weight: 500; text-align: center; }
.savestat:empty { padding: 0; margin: 0; }
.savestat-info { color: var(--info); }
.savestat-good { color: var(--good); }
.savestat-warn { color: var(--warn); }
.desk-column-bottom .savestat { border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; }
.desk-column-bottom .savebar:has(+ .savestat:not(:empty)) { border-radius: 12px 12px 0 0; }
.today-loading, .today-empty { margin: 0; }
.today-ro { margin: 0; white-space: pre-wrap; }
/* A .pick row whose native control (date input, drill select) covers it, so a tap opens the phone's own picker. */
.pick-wrap { position: relative; }
.pick-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; margin: 0; border: 0; padding: 0; }
.pick-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.pick-wrap:focus-within .pick { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Coach-only note: collapsed under Reflection, same .fld style (Step 6.2). */
.coachnote > summary { list-style: none; cursor: pointer; min-height: 44px; align-items: center; flex-wrap: wrap; row-gap: 2px; }
.coachnote > summary > * { white-space: nowrap; }
.coachnote > summary::-webkit-details-marker { display: none; }

/* ---------- Week plan and drill library (Step 7) ---------- */
.drill-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.drill-edit { padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
/* adp.css's .done (the round done button) also matches .pi.done and .ses.done, the completed items in
   the week plan, and squashes them into 44 px circles (the canvas PNGs show the same fault). Undo the
   button styles for those two; their own .pi / .ses / .pi.done / .ses.done looks stay. */
.pi.done { width: auto; height: auto; min-height: 30px; border: none; border-radius: 0; background: transparent; color: inherit; display: flex; place-items: normal; flex: initial; cursor: default; padding: 0; }
.ses.done { width: auto; height: auto; border: 1px solid transparent; border-radius: 8px; background: var(--good-bg); color: inherit; display: flex; place-items: normal; flex: initial; cursor: default; padding: 8px 10px; }
.pi.done:hover { color: inherit; }
.ses.done:hover { border-color: transparent; color: inherit; }
/* Planner feedback: give the days the full width, with the library below. */
.shell-desk .dcontent:has(.wk-wrap, .month-layout) { max-width: none; }
.wk-wrap { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
.wk-main, .wk-lib { width: 100%; min-width: 0; }
.wk-col { padding: 10px; }
.wk-lib-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wk-lib-rows > .row { border-top: 1px solid var(--line); }
.wk-h { flex-wrap: wrap; }
.wk-h b { white-space: nowrap; }
.ses .s-t, .ses .s-m { overflow-wrap: break-word; hyphens: auto; }
/* The chosen day's "Adding here" stays on one line in a narrow column (Dean's review). */
.wk-add { white-space: nowrap; padding: 0 6px; }
.wk-add[aria-pressed="true"] .i { display: none; }
/* Smaller laptops wrap days instead of squeezing their labels and controls. */
@media (max-width: 1439px) {
  .wk { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .wk-col { min-height: 220px; }
}

/* ---------- ADP (Step 8) ---------- */
/* Rows and cards the athlete taps to edit (Components/Adp/Tap.razor). */
.tap { cursor: pointer; }
.tap:hover { background: var(--surface-2); }
.tap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adp-add { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 6px 12px; }
.adp-add .btn { margin-left: -4px; }
.adp-sub { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface-2); }
.adp-sub .row { min-height: 52px; }
.adp-gap { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; }
.adp-gap dt { color: var(--muted); }
.adp-gap dd { margin: 0; }
.adp-empty { margin: 0; font-size: 13.5px; color: var(--muted); }
/* Edit dialog: the app's .fld fields inside MudBlazor's dialog. */
.adp-dialog-body { padding-top: 4px; padding-bottom: 8px; }
.adp-dialog .chips .chip { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
/* A whole .row as a button (requirement areas, gap analysis): looks like the mockup's row. */
button.rowbtn { width: 100%; background: transparent; border: none; border-top: 1px solid var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.rowbtn:first-child { border-top: none; }
button.rowbtn:hover { background: var(--surface-2); }
/* A status pill the owner can tap to change (desktop actions table). */
button.stat-btn { border: none; font: inherit; font-size: 12.5px; cursor: pointer; }

/* ---------- Competition plan editing (Step 9) ---------- */
.plan-edit { display: flex; flex-direction: column; gap: 8px; }
.plan-edit-row { display: grid; gap: 8px; align-items: center; }
.plan-edit-row .input { min-height: 44px; padding: 8px 10px; }
.pe-week { grid-template-columns: 76px minmax(0, 1fr) 44px 44px; }
.pe-match { grid-template-columns: 76px minmax(0, 1fr) 44px; }
.pe-cue { grid-template-columns: 110px minmax(0, 1fr) 44px; }
.pe-wif { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 44px; }
.pe-week .chip { padding: 0; justify-content: center; }
@media (max-width: 420px) {
  .pe-wif { grid-template-columns: minmax(0, 1fr) 44px; }
  .pe-wif .input:nth-child(2) { grid-column: 1; }
  .pe-wif .ibtn { grid-row: 1; grid-column: 2; }
}
/* Desktop calendar bars are buttons (click selects): keep the label at the start, as the mockup's divs. */
button.cal-bar { justify-content: flex-start; text-align: left; }
/* Headers/labels must not enlarge the scrollable grid past its final date. */
.cal { overflow: hidden; }
.cal-m { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-m.cal-month-partial { padding-inline: 0; font-size: 12px; }

/* ---------- Phase review (Step 10) ---------- */
.rv-prios { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.data-loading { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; }
.data-loading-title { margin: 0; font-weight: 600; }
.data-loading-detail { margin: 4px 0 0; }
.data-loading-spinner { flex: 0 0 20px; height: 20px; margin-top: 2px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: data-loading-turn 1s linear infinite; }
@keyframes data-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .data-loading-spinner { animation: none; } }
.phase-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.phase-navigation .fld { min-width: 0; }
.phase-navigation select { width: 100%; height: 44px; min-height: 44px; padding: 8px 12px; }
.phase-navigation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 224px; gap: 8px; }
.phase-navigation-actions .btn { height: 44px; min-height: 44px; padding: 0 12px; }
.phase-timeline { position: relative; }
.phase-timeline-labels { position: relative; height: 18px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.phase-timeline-links { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.phase-timeline-links a { position: absolute; top: 0; bottom: 0; border-radius: 6px; pointer-events: auto; }
.phase-timeline-links a:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.phase-timeline-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 599px) {
    .phase-navigation { grid-template-columns: minmax(0, 1fr); }
    .phase-navigation-actions { width: 100%; }
}
.requirement-list .row-main { overflow-wrap: anywhere; }
.adp-dialog .chips .chip { max-width: 100%; overflow-wrap: anywhere; }

/* Step 11: Activity, More and the install guide (no Activity mockup: built from the Coach and More rows). */
.act-row { min-height: 60px; }
.act-new { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); flex: none; }
.more-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.more-invite { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.more-invite ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.more-time { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; font-size: 14px; color: var(--text-2); }
.more-time .input { width: 130px; }
.inst-mark { width: 56px; height: 56px; border-radius: 14px; background: var(--side); color: var(--side-accent); display: grid; place-items: center; flex: none; }
.inst-n { width: 32px; height: 32px; border-radius: 16px; background: var(--accent-tint); color: var(--accent-text); display: grid; place-items: center; font-weight: 600; flex: none; }
.inst-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--sunken); color: var(--info); display: grid; place-items: center; flex: none; }

/* Today is drawn only inside data tracks, leaving month and section headings clear. */
.cal-today-label { position: absolute; top: 5px; font-size: 11px; font-weight: 600; color: var(--bad); white-space: nowrap; }

/* Empty states and season management reuse the existing card, field and button tokens. */
.empty-state { align-items: flex-start; }
.empty-state .card-c { margin: 0; max-width: 58ch; }
.empty-state-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-tint); color: var(--accent-text); }
.empty-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.category-settings .row-main { display: flex; flex-direction: column; gap: 16px; }
.category-settings .fld { max-width: 420px; }
.category-settings .muted-s { margin: 0; }
.removal-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.removal-group { padding: 16px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.removal-group h3 { margin: 0 0 8px; }
.removal-group dl { margin: 0; }
.removal-group dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.removal-group dd { margin: 0; font-weight: 600; }
.removal-group dt { color: var(--text-2); }
.removal-boundaries { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
@media (max-width: 599px) { .removal-summary { grid-template-columns: minmax(0, 1fr); } }

/* Drill library (Dean's review): new / edit at the top, tags, and a list that scrolls inside the card. */
.lib-tools { display: flex; justify-content: space-between; margin: 0 -10px; }
.lib-scroll { max-height: min(420px, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.lib-tags { font-size: 12px; color: var(--muted); }
.lib-tagchips { gap: 6px; }
.lib-tagchips .chip { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* Event plan timings (Dean's review): the match start and preparation-and-sighting time, then the athlete's own clock times. */
.pe-start { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 8px 12px; align-items: center; }
.pe-start .fld-l { margin: 0; }
.pe-start .input { min-height: 44px; padding: 8px 10px; }
.pe-time { grid-template-columns: 124px minmax(0, 1fr) 44px; }
.pe-time .input[type="time"], .pe-start .input[type="time"] { padding: 8px 6px; }

/* Week plan drag and drop (Step 11c): hold and drag sessions between days or to the bin; drag drills onto days. */
[data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lib-drag { cursor: grab; }
.drag-ghost { position: fixed; z-index: 2000; pointer-events: none; margin: 0; opacity: .92; box-shadow: 0 8px 24px rgba(16, 24, 32, .22); border-radius: 8px; background: var(--surface); transform: rotate(-1.5deg); list-style: none; }
.drag-src { opacity: .35; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.drop-over { box-shadow: 0 0 0 2px var(--accent) inset !important; background: var(--accent-tint) !important; }
.wk-bin { display: none; position: fixed; z-index: 1500; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); align-items: center; gap: 8px; padding: 14px 22px; border-radius: 28px; background: var(--surface); color: var(--bad); border: 2px dashed var(--bad); font-weight: 600; font-size: 14px; box-shadow: var(--shadow); }
body.dragging .wk-bin { display: inline-flex; }
.wk-bin.drop-over { background: var(--bad) !important; color: var(--on-accent); box-shadow: none !important; }
@media (min-width: 900px) { .wk-bin { bottom: 32px; left: calc(50% + 124px); } }
.wk-hint { margin: -4px 2px 0; font-size: 13px; color: var(--muted); }

/* Persistent recovery actions stay accessible after leaving the logging page. */
.queue-problems { display: block; background: var(--surface); color: var(--bad); position: fixed; z-index: 1500; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(608px, calc(100% - 32px)); max-height: 40vh; overflow: auto; box-shadow: var(--shadow); }

/* Mobile feedback: independent session actions and selected-day month planner. */
.planner-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.calendar-browse { display: flex; flex-direction: column; gap: 8px; }
.calendar-browse .segm button, .calendar-nav .btn { min-height: 44px; }
.calendar-nav { display: flex; align-items: center; gap: 4px; }
.calendar-nav .input { flex: 1; min-width: 0; width: 0; min-height: 44px; padding: 8px; }
.calendar-range-caption { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); }
.calendar-entry-row { display: flex; border-bottom: 1px solid var(--line); }
.calendar-entry-row:last-child { border-bottom: none; }
.calendar-entry-row > .row { flex: 1; min-width: 0; border-bottom: none; padding-right: 4px; }
.calendar-entry-row .row-t { overflow-wrap: anywhere; }
.calendar-entry-row > .ibtn { margin: 6px 4px 0 0; }
.calendar-status { margin-top: 6px; }
.planning-session.pi, .planning-session.ses { display: flex; align-items: center; gap: 6px; padding-block: 6px; flex-wrap: wrap; }
.planning-session-text { display: flex; flex-direction: column; flex: 1; min-width: 90px; overflow-wrap: anywhere; }
.planning-session.completed .planning-session-text,
.planning-session.completed .planning-session-text .muted-s,
.planning-session.completed .planning-session-text .dur { color: var(--text-2); }
.planning-session .ibtn { flex-shrink: 0; }
.edit-section { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .adp-dialog-body .stack:has(> .edit-section) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .adp-dialog-body .stack:has(> .edit-section) > * { grid-column: 1 / -1; }
  .adp-dialog-body .stack:has(> .edit-section) > .fld:has(> input[type="number"]) { grid-column: auto; }
}
/* Small themed checkboxes within the existing accessible tap targets. */
.planning-session > button.done { position: relative; border: none; border-radius: 6px; background: transparent; color: transparent; }
.planning-session > button.done::before { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1.5px solid var(--line-2); border-radius: 4px; background: var(--surface); }
.planning-session > button.done svg.i { position: relative; width: 14px; height: 14px; }
.planning-session > button.done.on { background: transparent; color: var(--accent-text); }
.planning-session > button.done.on::before { border-color: var(--accent); background: var(--accent-tint); }
.planning-session > button.done:hover::before { border-color: var(--accent); }
.planning-session.ses.completed { background: var(--accent-tint); }
.stage-summary { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.schedule-list summary { cursor: pointer; min-height: 44px; font-weight: 600; }
.schedule-list summary span { display: block; font-weight: 400; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; align-content: start; }
.month-dow { text-align: center; font-size: 12px; color: var(--muted); }
.month-calendar { padding: 8px; width: 100%; }
.month-cell { font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; min-height: 82px; min-width: 0; padding: 4px 1px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; cursor: pointer; }
.month-cell span { font-size: 11px; }
.month-cell.weekend, .month-dow.weekend { background: var(--surface-2); }
.month-cell.selected { background: var(--accent-tint); border-color: var(--accent); }
.month-cell[aria-current="date"] b { color: var(--accent-text); text-decoration: underline; }
.month-cell.outside { color: var(--muted); }
.month-competition { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; text-align: left; }
.month-competition .tag { font-size: 10px; padding: 2px 4px; min-width: 0; }
.month-competition .competition-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; max-width: 100%; height: auto; min-height: 22px; }
.month-layout, .month-day { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.month-day > h2, .month-day > p, .planner-summary { margin: 0; }
.month-day > .card { width: 100%; }
.month-day .day:first-child { border-top: none; }
.stage-marker { display: block; color: var(--accent-text); text-decoration: none; padding: 12px; }
@media (min-width: 900px) { .month-cell { min-height: 100px; align-items: flex-start; padding: 8px; } .month-cell span { font-size: 12px; } }

.recovery-json { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; padding: 8px; background: var(--surface-2); }

.competition-markers { margin-block: 6px; }
.planner-competition { display: flex; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 4px; min-height: 44px; padding-block: 4px; color: inherit; text-decoration: none; }
.planner-competition .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 22px; padding-block: 2px; }
.competition-markers .stage-comp { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.competition-markers .stage-marker { min-height: 44px; display: flex; align-items: center; padding: 4px 0; font-size: 13px; }

/* Narrow desktop week cards: session title, then completion beside edit/remove controls. */
@media (min-width: 900px) {
  .month-day .pis { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 8px; }
  .month-day .planning-session.pi { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px 40px; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
  .month-day .planning-session.completed { background: var(--accent-tint); }
  .month-day .planning-session-text { min-width: 0; }
  .month-day .planning-session .ibtn { width: 40px; height: 40px; }
  .planning-session.ses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 0; padding: 8px 4px; }
  .planning-session.ses .planning-session-text { grid-column: 1 / -1; order: -1; min-width: 0; padding-inline: 2px; }
  .planning-session.ses > .done, .planning-session.ses > .ibtn { place-self: center; }
  .planning-session.ses > .ibtn, .planning-session.ses > .done { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}

/* Position entry keeps K/P/S in one desktop row; phones retain full-width inputs. */
@media (min-width: 600px) {
  .adp-dialog-body .stack:has(> .position-score) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .adp-dialog-body .stack:has(> .position-score) > .fld:has(> input[type="number"]) { grid-column: span 3; }
  .adp-dialog-body .stack:has(> .position-score) > .fld.position-score:has(> input[type="number"]) { grid-column: span 2; }
  .position-score .fld-l { display: block; }
  .position-score .fld-l small { display: block; margin-top: 4px; }
}

/* ---------- SCATT session (Step 20, docs/design/scatt-session.md). Tokens only; the --scatt-* target
   colours come from AdpTheme.cs (palette A) and are used only for the canvas and the replay key. ---------- */
.scatt-sum { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13.5px; color: var(--muted); }
.scatt-sum b { color: var(--text); font-weight: 600; }
.scatt-target { position: relative; padding: 0; overflow: hidden; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; background: var(--scatt-surround, var(--sunken)); touch-action: none; }
.scatt-target canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.scatt-target canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.scatt-tools { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.scatt-tools .ibtn { background: var(--surface); box-shadow: var(--shadow); color: var(--text-2); }
.scatt-tools .ibtn:hover { background: var(--surface-2); color: var(--text); }
.scatt-replay { display: flex; flex-direction: column; gap: 10px; }
.scatt-replay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scatt-replay-row .segm { flex: 0 0 auto; }
.scatt-replay-row .segm button { min-height: 44px; min-width: 44px; padding: 0 10px; }
.scatt-series { overflow-x: auto; }
.scatt-series .segm button { min-height: 44px; min-width: 44px; }
.scatt-play { min-width: 44px; padding: 0 12px; }
.scatt-time { font-size: 13px; color: var(--muted); margin-left: auto; text-align: right; white-space: nowrap; }
.scatt-scrub { width: 100%; accent-color: var(--accent); min-height: 44px; margin: 0; }
.scatt-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-2); }
.scatt-key i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 1px var(--line-2); }
.scatt-key .k-trace { background: var(--scatt-trace); }
.scatt-key .k-1s { background: var(--scatt-trace-1s); }
.scatt-key .k-03s { background: var(--scatt-trace-03s); }
.scatt-key .k-follow { background: var(--scatt-follow); }
.scatt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scatt-stat { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 10px; min-width: 0; }
.scatt-stat-l { font-size: 12px; line-height: 1.25; color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
.scatt-stat-v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.scatt-note { margin: -8px 2px 0; font-size: 12.5px; color: var(--warn); }
.scatt-tblwrap { overflow: hidden; }
/* Phone: the page scrolls, so the card lets the header row stick below the 64 px app bar (overflow would stop it). */
.scatt-shots.card.flush { overflow: visible; }
.scatt-shots .scatt-tblwrap { overflow: visible; }
.scatt-shots .scatt-tbl th { top: 64px; }
.scatt-shots .scatt-tbl th:first-child { border-top-left-radius: 12px; }
.scatt-shots .scatt-tbl th:last-child { border-top-right-radius: 12px; }
@media (max-width: 374px) { .scatt-tbl { font-size: 11.5px; } .scatt-tbl th { font-size: 10.5px; letter-spacing: 0; } .scatt-tbl th, .scatt-tbl td { padding-left: 1px; padding-right: 1px; } }
.scatt-tbl { width: 100%; border-collapse: collapse; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.scatt-tbl th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-align: right; padding: 8px 2px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.scatt-tbl td { text-align: right; padding: 0 2px; height: 44px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.scatt-tbl th:first-child, .scatt-tbl td:first-child { text-align: left; padding-left: 4px; }
.scatt-tbl th:last-child, .scatt-tbl td:last-child { width: 44px; padding: 0 2px 0 0; text-align: center; }
.scatt-tbl tr.shot { cursor: pointer; }
.scatt-tbl tr.shot:hover td { background: var(--surface-2); }
.scatt-tbl tr.shot[aria-selected="true"] td { background: var(--accent-tint); }
.scatt-tbl tr.shot[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.scatt-tbl .no { all: unset; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; cursor: pointer; font: inherit; color: var(--text); }
.scatt-tbl .no:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.scatt-tbl .full { color: var(--accent-text); font-weight: 500; }
.scatt-tbl tr.hidden-shot td, .scatt-tbl tr.hidden-shot .no { color: var(--muted); }
.scatt-tbl tr.grp td { height: 36px; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 12px 0; background: var(--surface-2); }
.scatt-tbl tr.sum td { font-weight: 600; color: var(--text); background: var(--surface-2); }
.scatt-tbl tr.total td { font-weight: 600; color: var(--accent-text); }
.scatt-tbl .warn { color: var(--warn); }
.scatt-tbl .ibtn { width: 44px; height: 44px; }
.scatt-legend { padding: 12px; font-size: 12px; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; border-top: 1px solid var(--line); margin: 0; }
.scatt-legend dt { font-family: "IBM Plex Mono", monospace; color: var(--text-2); }
.scatt-legend dd { margin: 0; }
.scatt-foot { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.scatt-foot p { margin: 0; font-size: 12.5px; color: var(--muted); }
button.row.add.rowbtn { justify-content: flex-start; }
.scatt-row-icon { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); flex: none; }
.scatt-state { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.scatt-more { position: relative; }
.scatt-menu { position: absolute; right: 0; top: 48px; z-index: 20; min-width: 240px; box-shadow: var(--shadow), 0 8px 24px rgba(0, 0, 0, .18); }
.scatt-menu .row { min-height: 52px; gap: 12px; font-weight: 500; }
.scatt-menu .scatt-danger { color: var(--bad); }
.scatt-file { display: flex; gap: 12px; align-items: center; }
.scatt-file-m { flex: 1; min-width: 0; }
.scatt-file-n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scatt-progress { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; margin-top: 8px; }
.scatt-progress > div { height: 100%; background: var(--accent); transition: width .2s; }
.scatt-err { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 12px 14px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); }
.scatt-err .i { flex: none; margin-top: 1px; }
.scatt-links { margin: 8px 0 0; padding-left: 18px; }
.scatt-links a { color: inherit; font-weight: 500; }
.scatt-when { font-weight: 600; }
.scatt-sheet-h .abar-k { margin-bottom: 2px; }
.scatt-sheet:has(.scatt-file-input:focus-visible) .scatt-choose { outline: 2px solid var(--accent); outline-offset: 2px; }
.scatt-desk { display: grid; grid-template-columns: minmax(480px, 1fr) 520px; gap: 20px; align-items: start; }
.scatt-desk .scatt-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.scatt-desk .scatt-target { max-width: none; }
.scatt-desk .scatt-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; min-width: 0; }
.scatt-desk .scatt-tblwrap { max-height: 560px; overflow: auto; }
.scatt-desk .scatt-shots .scatt-tbl th { top: 0; }
@media (max-width: 1343px) { .scatt-desk { grid-template-columns: minmax(400px, 1fr) 420px; } }
/* 900–1129 px: the two columns don't fit beside the sidebar, so the target sits above the side column. */
@media (max-width: 1129px) {
  .scatt-desk { grid-template-columns: minmax(0, 1fr); }
  .scatt-desk .scatt-target { max-width: 560px; }
  .scatt-desk .scatt-side { position: static; }
}
@media (prefers-reduced-motion: reduce) { .scatt-progress > div { transition: none; } }

/* ---------- SCATT on Training and the SCATT sessions list (Step 20b). Tokens only. ---------- */
.scatt-wk { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; color: var(--text); text-decoration: none; font-size: 14px; min-width: 0; }
.scatt-wk .i { color: var(--accent-text); flex: none; }
.scatt-wk-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scatt-wk-t b { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--accent-text); margin-right: 4px; }
.scatt-wk-s { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.scatt-wk:hover .scatt-wk-t { text-decoration: underline; }
.scatt-wk.desk { min-height: 40px; padding: 6px 8px; border-radius: 8px; background: var(--accent-tint); font-size: 12.5px; flex-wrap: wrap; gap: 2px 6px; }
.scatt-wk.desk .scatt-wk-s { margin-left: 0; font-size: 12px; }
.month-scatt { display: inline-flex; align-items: center; color: var(--accent-text); }
.scatt-filters select.input { min-height: 48px; }
.scatt-avg { letter-spacing: 0; text-transform: none; font-weight: 500; }

/* ---------- SCATT colours and trends (Step 21). Tokens only; the swatches show the --scatt-* colours. ---------- */
.scatt-key .k-selected { background: var(--scatt-selected); box-shadow: 0 0 0 2px var(--scatt-selected-ring); }
.scatt-key-link { margin-left: auto; color: var(--accent-text); font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.scatt-key-link:hover { text-decoration: underline; }
.scatt-colours { margin-top: 16px; }
.scatt-swatches { padding: 4px 0; }
.scatt-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.scatt-custom-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 14.5px; color: var(--text); cursor: pointer; }
.scatt-custom-row input[type="color"] { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); cursor: pointer; flex: none; }
.scatt-custom-row input[type="color"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scatt-custom-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.scatt-trends { display: flex; flex-direction: column; gap: 12px; }
.scatt-trend-chart { min-width: 0; }
.scatt-trend-chart h3 { margin: 0 0 4px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.scatt-trend-note { margin: 0; }
.season-scatt { display: flex; flex-direction: column; gap: 4px; }
.season-scatt-link { align-self: flex-start; }

/* "View all traces" (Step 21). */
.scatt-all-btn { align-self: flex-start; }
.scatt-all .scatt-target { max-width: 640px; margin: 0 auto; }