/*
  The app's frame and the pieces the pages share, beside dropshot.css (the components drawn in the
  mockup). Same tokens, same rules (docs/design.md): night panel for live and final, program stock for
  the rest, the legal pad for messages only.
*/

/* ------------------------------------------------------------------ frame */
.ds-app { display: flex; flex-direction: column; min-height: 100vh; }
.ds-skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 12px; background: var(--ds-ball); color: var(--ds-night-3); font-weight: 700; }
.ds-skip:focus { top: 12px; }
.ds-page--wide { max-width: 1480px; }
.ds-loadbar { height: 3px; background: transparent; }
body.is-loading .ds-loadbar { background: linear-gradient(90deg, transparent, var(--ds-ball), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ds-load 0.9s linear infinite; }
@keyframes ds-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.ds-wordmark__mark { width: 44px; height: 30px; }
.ds-nav__live { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--ds-ball); box-shadow: 0 0 6px var(--ds-ball); vertical-align: 1px; }
.ds-academy { display: inline-flex; align-items: center; gap: 8px; color: var(--ds-chalk-1); text-decoration: none; font-size: var(--ds-fs-small); font-weight: 600; white-space: nowrap; }
.ds-academy:hover { color: var(--ds-ball); }
.ds-academy__short { padding: 2px 6px; background: var(--c, var(--ds-court)); color: #fff; font-weight: 800; letter-spacing: 0.06em; font-variation-settings: 'wdth' 110; }
.ds-academy--empty { padding: 6px 10px; border: 1px solid var(--ds-ball); color: var(--ds-ball); }

.ds-strip__inner { align-items: center; }
.ds-strip__live { color: var(--ds-ball); font-weight: 600; text-decoration: none; }
.ds-strip__live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ds-ball); vertical-align: 1px; animation: ds-blink 1.6s ease-in-out infinite; }
@keyframes ds-blink { 50% { opacity: 0.3; } }
.ds-strip__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ds-strip__btn { min-height: 26px; padding: 0 10px; border: 1px solid var(--ds-night-edge); background: var(--ds-night-1); color: var(--ds-chalk-1); font: 600 var(--ds-fs-label)/1 var(--ds-font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.ds-strip__btn:hover { border-color: var(--ds-ball); color: var(--ds-ball); }
.ds-strip__btn:disabled { opacity: 0.6; cursor: wait; }
.ds-strip__who { color: var(--ds-chalk-1); text-decoration: none; }
.ds-muted { color: var(--ds-ink-3); }
.ds-strip .ds-muted { color: var(--ds-chalk-2); }

.ds-footer { background: var(--ds-night-2); color: var(--ds-chalk-2); font-size: var(--ds-fs-small); }
.ds-footer__inner { max-width: var(--ds-page-max); margin: 0 auto; padding: var(--ds-s4) var(--ds-gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.ds-footer a { color: var(--ds-chalk-1); }

.ds-banner-slot:empty { display: none; }
.ds-banner-slot { display: grid; gap: 8px; }
.ds-banner { display: flex; align-items: center; gap: 12px; }
.ds-banner p { margin: 0; flex: 1; }
.ds-banner a { color: inherit; }
.ds-banner--ok { background: var(--ds-night-1); color: var(--ds-chalk-1); border-left: 4px solid var(--ds-ball); }
.ds-banner__close { border: 1px solid currentColor; background: transparent; color: inherit; font: 600 var(--ds-fs-label)/1 var(--ds-font); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 8px; cursor: pointer; }
.ds-devnote { position: fixed; right: 16px; bottom: 16px; z-index: 40; padding: 10px 14px; background: var(--ds-ball); color: var(--ds-night-3); border: 0; font: 700 var(--ds-fs-small)/1 var(--ds-font); cursor: pointer; box-shadow: var(--ds-shadow-pad); }

/* ------------------------------------------------------------------ type bits */
.ds-lede { color: var(--ds-ink-2); max-width: 70ch; }
.ds-empty { color: var(--ds-ink-3); font-style: italic; padding: var(--ds-s3) 0; }
.ds-more { margin-top: var(--ds-s3); font-size: var(--ds-fs-small); }
.ds-win { color: var(--ds-win); }
.ds-loss { color: var(--ds-loss); }
.ds-cc { font-size: var(--ds-fs-label); font-weight: 600; letter-spacing: 0.06em; color: var(--ds-ink-3); }
.ds-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--ds-rule-2); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-2); vertical-align: 1px; white-space: nowrap; }
.ds-tag--warn { border-color: var(--ds-loss); color: var(--ds-loss); }
.ds-tag--ball { border-color: var(--ds-ball-deep); background: var(--ds-you); color: var(--ds-ink-1); }
.ds-livetag { display: inline-block; padding: 1px 6px; background: var(--ds-night-1); color: var(--ds-ball); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ds-level { display: inline-block; padding: 1px 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink-2); border: 1px solid var(--ds-rule-1); background: var(--ds-paper-0); white-space: nowrap; }
.ds-level--major, .ds-level--finals { background: var(--ds-night-1); color: var(--ds-ball); border-color: var(--ds-night-1); }
.ds-level--t1000 { background: var(--ds-court); color: #fff; border-color: var(--ds-court); }
.ds-level--t500 { border-color: var(--ds-court); color: var(--ds-court); }
.ds-level--jmajor { background: var(--ds-you); border-color: var(--ds-ball-deep); color: var(--ds-ink-1); }
.ds-linkbtn { border: 0; background: none; padding: 0; color: var(--ds-court); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.ds-num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ the pads, in numbers */
.ds-pads--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.ds-pad__title { font: 750 var(--ds-fs-data)/28px var(--ds-font); margin: 0; }
.ds-pad.is-new .ds-pad__from b::after { content: 'New'; margin-left: 8px; padding: 0 5px; background: var(--ds-pad-margin); color: #fff; font-size: 0.62rem; letter-spacing: 0.08em; }
.ds-pad__deadline { font-size: var(--ds-fs-small); color: var(--ds-ink-3); align-self: center; }
.ds-pad__done { font-size: var(--ds-fs-small); line-height: 28px; color: var(--ds-ink-2); }
.ds-pad__note a { color: var(--ds-pad-ink); text-decoration-thickness: 1px; }
.ds-pad .ds-btn { background: rgba(255, 255, 255, 0.6); }
.ds-pad .ds-btn--primary { background: var(--ds-ink-1); }
.ds-table--pad { background: rgba(255, 255, 255, 0.55); margin: 6px 0; font-size: var(--ds-fs-small); }
.ds-table--pad td, .ds-table--pad th { padding: 4px 8px; }

/* ------------------------------------------------------------------ lists */
.ds-live { display: grid; gap: 0; }
.ds-live li { border-bottom: 1px solid var(--ds-rule-1); }
.ds-live li.is-you { background: var(--ds-you); }
.ds-live__match { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 4px; text-decoration: none; color: inherit; }
.ds-live__dot { grid-row: span 2; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-loss); animation: ds-blink 1.6s ease-in-out infinite; }
.ds-live__names { font-weight: 650; }
.ds-live__where { font-size: var(--ds-fs-small); color: var(--ds-ink-3); }
.ds-news { display: grid; }
.ds-news li { padding: 8px 0; border-bottom: 1px solid var(--ds-rule-1); font-size: var(--ds-fs-data); }
.ds-news__when { display: inline-block; min-width: 4.5em; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.06em; color: var(--ds-ink-3); }
.ds-events { display: grid; }
.ds-events li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--ds-rule-1); }
.ds-top { display: grid; }
.ds-top li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--ds-rule-1); }
.ds-top__rank { min-width: 2em; font-weight: 800; font-variant-numeric: tabular-nums; }
.ds-top li .ds-num { margin-left: auto; }

/* ------------------------------------------------------------------ the front door */
.ds-hero { padding: var(--ds-s6) var(--ds-s5); background: var(--ds-night-1); color: var(--ds-chalk-1); border-bottom: 4px solid var(--ds-court); background-image: linear-gradient(90deg, transparent 0 62%, rgba(47, 95, 158, 0.25) 62% 100%); }
.ds-hero h1 { font-size: var(--ds-fs-h1); font-weight: 900; font-variation-settings: 'wdth' 120; text-transform: uppercase; line-height: 1.02; max-width: 16ch; }
.ds-hero .ds-label { color: var(--ds-ball); }
.ds-hero .ds-lede { color: var(--ds-chalk-2); margin-top: var(--ds-s3); }
.ds-hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--ds-s5); }
.ds-hero .ds-btn { background: transparent; color: var(--ds-chalk-1); border-color: var(--ds-chalk-2); }
.ds-hero .ds-btn--primary { background: var(--ds-ball); color: var(--ds-night-3); border-color: var(--ds-ball); }

/* ------------------------------------------------------------------ forms */
.ds-form { display: grid; gap: var(--ds-s4); max-width: 30rem; }
.ds-field { display: grid; gap: 6px; }
.ds-field__label { font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-2); }
.ds-field__hint { font-size: var(--ds-fs-small); color: var(--ds-ink-3); }
.ds-input, .ds-select { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--ds-rule-2); border-radius: var(--ds-r-1); background: var(--ds-paper-0); color: var(--ds-ink-1); font: 400 var(--ds-fs-body)/1.2 var(--ds-font); width: 100%; }
.ds-input:focus, .ds-select:focus { border-color: var(--ds-court); outline: none; box-shadow: 0 0 0 2px rgba(47, 95, 158, 0.25); }
.ds-select--sm { min-height: 32px; font-size: var(--ds-fs-small); width: auto; }
.ds-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: var(--ds-fs-small); }
.ds-btn:disabled { opacity: 0.55; cursor: wait; }
.ds-btn--sm { min-height: 28px; padding: 0 10px; font-size: var(--ds-fs-label); }
.ds-btn--danger { border-color: var(--ds-loss); color: var(--ds-loss); }

.ds-account { display: grid; gap: var(--ds-s6); align-items: start; }
@media (min-width: 900px) { .ds-account { grid-template-columns: 1fr 1fr; } }
.ds-card { background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); box-shadow: var(--ds-shadow-paper); padding: var(--ds-s5); }
.ds-card__band { margin: calc(-1 * var(--ds-s5)) calc(-1 * var(--ds-s5)) var(--ds-s5); padding: 10px var(--ds-s5); background: var(--ds-night-1); color: var(--ds-chalk-2); display: flex; justify-content: space-between; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ds-card__band b { color: var(--ds-ball); }

/* ------------------------------------------------------------------ tabs and toggles */
.ds-tabs { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 2px solid var(--ds-ink-1); margin-bottom: var(--ds-s4); }
.ds-tabs a { padding: 6px 0; font-weight: 700; font-size: var(--ds-fs-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-ink-3); text-decoration: none; }
.ds-tabs a.is-current { color: var(--ds-ink-1); box-shadow: inset 0 -3px 0 var(--ds-court); }
.ds-pager { display: flex; gap: 12px; align-items: center; margin-top: var(--ds-s4); font-size: var(--ds-fs-small); }

/* ------------------------------------------------------------------ the match */
.ds-board__set.is-current { color: var(--ds-chalk-1); background: rgba(238, 241, 246, 0.06); }
.ds-board__row.is-winner .ds-board__name { color: var(--ds-ball); }
.ds-board__name a { color: inherit; text-decoration: none; }
.ds-board__name a:hover { color: var(--ds-ball); }
.ds-court__player--a { fill: #2c3c5c; }
.ds-court__bounce--out { fill: var(--ds-loss); stroke: #fff; }
.ds-hawkeye__controls button:disabled { opacity: 0.4; }
.ds-pbp { display: grid; gap: 0; }
.ds-pbp li { display: grid; grid-template-columns: 9em 12em 1fr; gap: 4px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--ds-rule-1); font-size: var(--ds-fs-small); }
.ds-pbp li.is-break { background: linear-gradient(90deg, rgba(176, 50, 42, 0.07), transparent 60%); }
.ds-pbp__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-pbp__server { color: var(--ds-ink-3); }
.ds-pbp__points { display: flex; flex-wrap: wrap; gap: 3px; }
.ds-pbp__pt { width: 18px; height: 18px; padding: 0; border: 1px solid var(--ds-rule-2); background: var(--ds-paper-0); font-size: 10px; line-height: 1; cursor: pointer; color: var(--ds-court); }
.ds-pbp__pt--b { color: var(--ds-loss); }
.ds-pbp__pt:hover { border-color: var(--ds-ink-1); }
@media (max-width: 640px) { .ds-pbp li { grid-template-columns: 1fr; } }
.ds-champion { font-size: var(--ds-fs-h3); font-weight: 750; padding: 10px 14px; background: var(--ds-night-1); color: var(--ds-chalk-1); border-left: 4px solid var(--ds-ball); }
.ds-champion a { color: var(--ds-ball); }
.ds-table--compact td, .ds-table--compact th { padding: 4px 8px; }
.ds-table--ledger td:first-child { width: 70%; }

/* ------------------------------------------------------------------ players */
.ds-player__level { margin: 0; font-size: var(--ds-fs-small); color: var(--ds-ink-2); }
.ds-player__level b { font-size: 2.2rem; font-weight: 900; font-variation-settings: 'wdth' 112; color: var(--ds-ink-1); margin-right: 6px; }
.ds-player__name a { color: inherit; text-decoration: none; }
.ds-player__next a { color: var(--ds-ball); }
.ds-facts { display: grid; gap: 0; margin: 0; background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); }
.ds-facts > div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--ds-rule-1); font-size: var(--ds-fs-data); }
.ds-facts > div:last-child { border-bottom: 0; }
.ds-facts dt { font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-3); padding-top: 2px; }
.ds-facts dd { margin: 0; }
.ds-subhead { font-size: var(--ds-fs-h3); font-weight: 800; font-variation-settings: 'wdth' 112; text-transform: uppercase; margin: var(--ds-s5) 0 var(--ds-s2); }
.ds-calls { display: grid; gap: var(--ds-s4); }
.ds-calls__grid, .ds-planform { display: grid; gap: var(--ds-s3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ds-calls__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-planform { margin-bottom: var(--ds-s3); }
.ds-spark { margin: 0; background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); padding: var(--ds-s3); }
.ds-spark svg { width: 100%; height: 70px; }
.ds-spark figcaption { font-size: var(--ds-fs-small); color: var(--ds-ink-3); }
.ds-events li .ds-btn { margin-left: auto; }
.ds-skills--one { grid-template-columns: 1fr !important; padding: 0; }

/* ------------------------------------------------------------------ the calendar */
.ds-cal { display: grid; gap: var(--ds-s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ds-cal__week { background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); padding: var(--ds-s3) var(--ds-s4); scroll-margin-top: 12px; }
.ds-cal__week header { display: flex; justify-content: space-between; gap: 8px; font-size: var(--ds-fs-small); border-bottom: 2px solid var(--ds-ink-1); padding-bottom: 4px; margin-bottom: 6px; }
.ds-cal__week header b { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.ds-cal__week.is-current { box-shadow: inset 0 0 0 2px var(--ds-court); }
.ds-cal__week.is-current header b::after { content: ' · now'; color: var(--ds-court); }
.ds-cal__week.is-past { opacity: 0.78; }
.ds-cal__week.is-off { background: var(--ds-paper-2); }
.ds-cal__week.is-major header { border-bottom-color: var(--ds-ball-deep); }
.ds-cal__events { display: grid; gap: 4px; }
.ds-cal__events li { font-size: var(--ds-fs-small); display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; }
.ds-cal__events li.is-small { color: var(--ds-ink-3); }
.ds-cal__events li.is-you { background: var(--ds-you); }
.ds-cal__winner { color: var(--ds-ink-3); }
.ds-cal__mine { font-weight: 650; }

/* ------------------------------------------------------------------ staff, facilities, academies */
.ds-coaches, .ds-facilities, .ds-academies { display: grid; gap: var(--ds-s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ds-coach, .ds-facility, .ds-acad { background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); box-shadow: var(--ds-shadow-paper); padding: var(--ds-s4); display: grid; gap: var(--ds-s2); align-content: start; }
.ds-coach header, .ds-facility header, .ds-acad header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ds-coach h3, .ds-facility h3, .ds-acad h3 { font-size: var(--ds-fs-h3); font-weight: 800; font-variation-settings: 'wdth' 110; margin: 0; }
.ds-acad h3 a { color: inherit; text-decoration: none; }
.ds-acad header { justify-content: flex-start; align-items: center; }
.ds-acad { border-top: 4px solid var(--c); }
.ds-acad.is-you { background: var(--ds-you); }
.ds-acad .ds-btn { justify-self: start; }
.ds-acad__who { font-size: var(--ds-fs-small); color: var(--ds-ink-2); }
.ds-coach__mood { font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--ds-win); color: var(--ds-win); }
.ds-coach__mood--low { border-color: var(--ds-loss); color: var(--ds-loss); }
.ds-coach__line { font-size: var(--ds-fs-small); color: var(--ds-ink-2); margin: 0; }
.ds-coach__acts { display: flex; gap: 8px; align-items: center; }
.ds-facility__level { letter-spacing: 2px; color: var(--ds-court); }
.ds-form--inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-width: none; }
.ds-form--inline .ds-field { width: 220px; }
.ds-form--wide { max-width: 46rem; }
.ds-pick { border: 1px solid var(--ds-rule-1); background: var(--ds-paper-0); padding: var(--ds-s3); display: grid; gap: 0; margin: 0; }
.ds-pick legend { padding: 0 6px; }
.ds-pick__row { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 4px; border-bottom: 1px solid var(--ds-rule-1); cursor: pointer; }
.ds-pick__row:last-child { border-bottom: 0; }
.ds-pick__row input { grid-row: span 2; align-self: center; }
.ds-pick__row:has(input:checked) { background: var(--ds-you); }
.ds-prose section { max-width: 72ch; }
.ds-prose p + p { margin-top: var(--ds-s3); }
.ds-errors { display: grid; gap: 6px; font-size: var(--ds-fs-small); }
.ds-errors pre { white-space: pre-wrap; font-size: 0.75rem; background: var(--ds-paper-2); padding: 8px; overflow-x: auto; }
.ds-hero { display: grid; gap: var(--ds-s5); align-items: center; background-image: none; }
@media (min-width: 900px) { .ds-hero { grid-template-columns: 1.1fr 1fr; } }
.ds-hero__court { width: 100%; height: auto; border: 1px solid var(--ds-night-3); }
.ds-pad__note { white-space: pre-line; }
.ds-matchup { display: grid; max-width: 26rem; background: var(--ds-paper-0); border: 1px solid var(--ds-rule-1); }
.ds-matchup__row { display: grid; grid-template-columns: 3em 1fr 3em; gap: 10px; padding: 5px 12px; border-bottom: 1px solid var(--ds-rule-1); font-size: var(--ds-fs-data); }
.ds-matchup__row:last-child { border-bottom: 0; }
.ds-matchup__name { text-align: center; font-size: var(--ds-fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-3); }
.ds-matchup .r { text-align: right; }