:root {
  --bg: #0a0a0a;
  --bg-gradient-start: #1c1c1c;
  --panel: #161616;
  --panel-2: #1c1c1c55;
  --border: #2c2c2c;
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  --primary: #b5283a;
  --dst-black: #1a1a1a;
  --dst-red: #a52a34;
  --cubs-blue: #0e3386;
  --cubs-red: #cc3433;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;
  --neutral: #6b7280;

  /* Surfaces built up from the base palette above — introduced so the light theme below can
     repaint every on-screen surface (inputs, muted headers, row hover, badge pills, tooltips)
     without hunting down one-off hex values scattered through the file. The periodization
     Gantt timeline, the percentile/positional-profile bar charts, the print stylesheet, and the
     black branded topbar/bottom-menu are deliberately left out of this system — they stay a
     fixed dark (or paper-white, for print) canvas in both themes. */
  --input-bg: #111111;
  --input-border: #3a3a3a;
  --btn-bg: #1e1e1e;
  --surface-muted: #202020;
  --surface-hover: #1c1c1c;
  --row-hover: #241417;
  --overlay-soft: rgba(255, 255, 255, 0.03);
  --badge-good-bg: #14351f;
  --badge-warn-bg: #3a2a0d;
  --badge-danger-bg: #3a1414;
  --badge-info-bg: #0e2f3f;
  --chart-grid: #2a2a2a;
  --chart-axis: #9a9a9a;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-gradient-start: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --border: #dcdfe4;
  --text: #1a1a1a;
  --text-dim: #666666;
  --dst-black: #1a1a1a;

  --input-bg: #ffffff;
  --input-border: #c7cbd1;
  --btn-bg: #eef0f3;
  --surface-muted: #eceef1;
  --surface-hover: #eceef1;
  --row-hover: #fbecec;
  --overlay-soft: rgba(0, 0, 0, 0.035);
  --badge-good-bg: #dcfce7;
  --badge-warn-bg: #fef3c7;
  --badge-danger-bg: #fee2e2;
  --badge-info-bg: #e0f2fe;
  --chart-grid: #dddddd;
  --chart-axis: #555555;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at top left, var(--bg-gradient-start), var(--bg));
  color: var(--text);
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
}

.login-card .brand-logo { height: 40px; margin-bottom: 18px; }
.login-card h1 { font-size: 20px; margin: 0 0 6px; }
.login-card .field { text-align: left; margin-bottom: 14px; }
.login-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; }
.login-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 14px;
  text-align: left;
}
.login-note { color: var(--text-dim); font-size: 12px; margin: 16px 0 0; }

/* Branded chrome (black bar, logo, red/blue accent) stays fixed regardless of the light/dark
   toggle — re-pinning --text/--text-dim here means .brand h1/span, .nav-tab, and the account
   email (all of which just read those variables for their color) stay readable on the dark bar
   in light mode too, instead of resolving to the light theme's near-black text color. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: linear-gradient(90deg, #000000, var(--dst-black));
  border-bottom: 3px solid var(--dst-red);
  flex-wrap: wrap;
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  /* `color` is what actually inherits down to children like .brand h1 that have no color rule of
     their own — redefining the --text custom property above isn't enough on its own, since an
     element with no `color: var(--text)` of its own just inherits its parent's already-resolved
     color (here, body's, which would be the light theme's dark text) rather than re-reading the
     variable through this element's scope. */
  color: var(--text);
}

.topbar-account { display: flex; align-items: center; gap: 10px; }
.topbar-account-email { font-size: 12px; color: var(--text-dim); }

.theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #3a3a3a;
  color: #f2f2f2;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover { background: rgba(255, 255, 255, 0.16); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

.brand h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.3px;
}

.brand span {
  color: #b0b0b0;
  font-size: 12px;
}

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.controls select, .controls input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.controls input::placeholder { color: var(--text-dim); }

/* Roster filters sit under the location cards, aligned to the right edge */
.controls-right {
  justify-content: flex-end;
  margin: 0 0 16px;
}

.main {
  flex: 1;
  padding: 20px 24px 40px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 13px;
}

.crumb button {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.location-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.kpi-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-trend-grid .panel {
  margin-bottom: 0;
}

/* Team Report: one block per athlete — header row, then their performance graphs */
.team-athlete-block {
  break-inside: avoid;
}

.team-athlete-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  cursor: pointer;
}

.team-athlete-name {
  font-size: 18px;
  font-weight: 700;
  margin-right: 12px;
}

.team-athlete-header:hover .team-athlete-name {
  color: var(--dst-red);
}

.team-athlete-meta {
  font-size: 13px;
  color: var(--text-dim);
}

.team-athlete-block .kpi-trend-grid {
  margin-bottom: 0;
}

.team-athlete-notes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.bulk-actions-bar {
  border-color: var(--dst-red);
}

.bulk-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bulk-actions-header strong {
  color: var(--text);
  font-size: 14px;
}

.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.kpi-card .label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-card .value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 6px;
}

.kpi-card .value.good { color: var(--good); }
.kpi-card .value.warn { color: var(--warn); }
.kpi-card .value.danger { color: var(--danger); }

.timestamp-note a {
  color: var(--info);
}

.panel table a {
  color: var(--info);
  text-decoration: none;
}

.panel table a:hover {
  text-decoration: underline;
}

.kpi-card-btn {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.kpi-card-btn .value {
  color: var(--text);
}

.kpi-card-btn:hover {
  border-color: var(--primary);
}

.kpi-card-btn.active {
  border-color: var(--primary);
  background: rgba(181, 40, 58, 0.12);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.panel h2 {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--text);
}

.panel h2 small {
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: auto;
}

thead th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

tbody tr:hover {
  background: var(--row-hover);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.good { background: var(--badge-good-bg); color: var(--good); }
.badge.warn { background: var(--badge-warn-bg); color: var(--warn); }
.badge.danger { background: var(--badge-danger-bg); color: var(--danger); }
.badge.info { background: var(--badge-info-bg); color: var(--info); }
.badge-link { text-decoration: none; cursor: pointer; }
.badge-link:hover { filter: brightness(1.2); }

/* Roster row ticker — body weight / jump height / relative peak power vs. about a week ago */
.week-ticker { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-family: monospace; white-space: nowrap; }
.week-ticker-item { cursor: default; }
.week-ticker-link { text-decoration: none; cursor: pointer; }
.week-ticker-link:hover .week-ticker-item { text-decoration: underline; }
.week-ticker-up { color: var(--good); }
.week-ticker-down { color: var(--danger); }
.week-ticker-flat { color: var(--text-dim); }
.week-ticker-empty { color: var(--text-dim); }
.badge.neutral { background: var(--surface-muted); color: var(--neutral); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.detail-header .who {
  display: flex;
  align-items: center;
  gap: 14px;
}

.jersey {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--dst-black);
  border: 2px solid var(--dst-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  /* the circle itself is a fixed dark badge regardless of theme, so the jersey number needs its
     own fixed light color too, rather than inheriting the light theme's dark text onto it */
  color: #f2f2f2;
}

.who h2 { margin: 0; font-size: 20px; }
.who .pos { color: var(--text-dim); font-size: 13px; }

.legend-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.footer-note {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 10px;
}

@media (max-width: 980px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: 1fr; }
}

/* --- Nav tabs --- */
.nav-tabs {
  display: flex;
  gap: 4px;
  background: #0000003a;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  padding: 4px;
}

.nav-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}

.nav-tab.active {
  background: var(--dst-red);
  color: #fff;
}

.nav-tab:not(.active):hover {
  color: var(--text);
}

/* Chicago Cubs roster view / athlete profile — same chrome, Cubs identity instead of DST's.
   Applied on Team Overview's topbar while the Chicago Cubs filter is active, and on an athlete
   profile's root (AthleteDetail) or a Team Report sheet when that athlete is Cubs 40-man and not
   also a DST client. Most of the app's red accents already read var(--dst-red)/var(--primary), so
   overriding those two variables within this scope repaints everything that uses them at once. */
.cubs-theme { --dst-red: var(--cubs-blue); --primary: var(--cubs-blue); }
.topbar.cubs-theme { border-bottom-color: var(--cubs-blue); }
.topbar.cubs-theme .nav-tab.active { background: var(--cubs-blue); }

/* --- Pill sub-tabs (Import page: source switcher) --- */
.pill-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pill-tab {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.pill-tab.active {
  background: var(--dst-red);
  border-color: var(--dst-red);
  color: #fff;
}

/* --- Buttons --- */
.btn {
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--dst-red);
  border-color: var(--dst-red);
  color: #fff;
}

.btn-primary:hover:not(:disabled) { background: #8f2029; }

.btn-secondary:hover { background: var(--surface-hover); }

.btn-link {
  background: none;
  border: none;
  color: var(--info);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

/* --- File input / importer --- */
.file-drop {
  border: 1px dashed var(--input-border);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.file-drop input[type="file"] {
  color: var(--text-dim);
  font-size: 13px;
}

.mapping-table {
  width: 100%;
  margin: 14px 0;
  font-size: 13px;
}

.mapping-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.mapping-table select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
  max-width: 260px;
}

.required-mark { color: var(--dst-red); margin-left: 4px; }

.success-banner {
  background: var(--badge-good-bg);
  color: var(--good);
  border: 1px solid var(--good);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

.empty-state {
  color: var(--text-dim);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

/* --- Forms (manual entry) --- */
.form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
}

.field label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.field input, .field select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.store-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 10px;
}

.store-stats strong { color: var(--text); }

.field textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: monospace;
  resize: vertical;
}

.sync-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.sync-row .field { flex: 1; min-width: 260px; }

.timestamp-note {
  color: var(--text-dim);
  font-size: 12px;
  margin: 4px 0 0;
}

.activity-signature {
  color: var(--text-dim);
  font-size: 11px;
  font-style: italic;
  margin-top: 6px;
}

.method-switch {
  display: flex;
  gap: 14px;
  font-size: 12px;
  margin: 10px 0 14px;
}

.method-switch button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.method-switch button.active {
  color: var(--dst-red);
  font-weight: 700;
  text-decoration: none;
}

/* --- Inline table controls (Status/League/Team) — blend into the row until touched --- */
.inline-select {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.inline-select:hover,
.inline-select:focus {
  background-color: var(--surface-hover);
  border-color: var(--input-border);
  outline: none;
}

/* --- Notes log --- */
.notes-log {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.note-entry {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.note-text {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* --- Player Profiles directory --- */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.player-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease;
}

.player-card:hover {
  border-color: var(--dst-red);
}

.player-card-photo {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.player-card-name {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.player-card-meta {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 8px;
}

/* --- Team Report: league -> team picker --- */
.team-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.team-select-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  color: var(--text);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease;
}

.team-select-btn:hover {
  border-color: var(--dst-red);
}

/* logos in the tiles are centered — drop the inline right margin used beside names in tables */
.team-select-btn img,
.team-select-btn > span {
  margin-right: 0 !important;
}

.team-select-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em; /* keeps one- and two-line names aligned across the grid */
  display: flex;
  align-items: center;
}

.team-select-empty .team-select-count {
  color: var(--text-dim);
}

/* Light plate behind logos so dark team logos stay readable on the dark tiles */
.team-select-btn img {
  background: #f2f2f2;
  border-radius: 14px;
  padding: 6px;
  box-sizing: border-box;
}

.team-select-empty img {
  opacity: 0.75;
}

/* League buttons: logo (or the league name as text) sized to match the team tiles */
.league-select-btn {
  min-height: 190px;
  justify-content: center;
}

.league-select-btn img.league-tile-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 8px;
}

.league-tile-word {
  font-size: 22px;
  font-weight: 700;
  min-height: 96px;
  display: flex;
  align-items: center;
  text-align: center;
}

.team-select-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.team-select-names {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* --- Team Report --- */
.report-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.report-title {
  margin: 0;
  font-size: 24px;
}

.report-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 2px;
}

/* --- Player Profile tabs (Overview / Statcast Metrics / Performance Metrics) --- */
.tab-hidden {
  display: none;
}

/* Position is an editable dropdown on screen, but printed profiles should show it as plain text */
.print-only {
  display: none;
}

/* --- Print (Team Report / Player Profile "Print / Save PDF") --- */
@media print {
  .topbar, .footer-note, .no-print {
    display: none !important;
  }

  .print-only {
    display: inline !important;
  }

  /* Printing a profile prints only the tab that is open (the hidden tabs stay hidden) */

  body, .app, .main {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .panel, .kpi-card {
    background: #ffffff !important;
    border: 1px solid #ccc !important;
  }

  h1, h2, h3, .report-title {
    color: #000 !important;
  }

  .kpi-card .label,
  .panel h2 small,
  .report-subtitle,
  thead th {
    color: #555 !important;
  }

  table, tbody td {
    color: #000 !important;
  }

  thead th {
    border-bottom-color: #999 !important;
  }

  tbody td {
    border-bottom-color: #ddd !important;
  }

  /* Positional CMJ Profile's percentile scale (norm-bar zones/markers) is color-coded information,
     not decoration — Chrome drops background colors on print by default (the "Background graphics"
     checkbox) unless told otherwise, which otherwise leaves every bar looking blank/colorless. */
  .norm-bar, .norm-zone, .norm-marker, .norm-range-band, .profile-legend i {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* --- Periodization planner (Player Plans > Periodization) --- */
.period-wrap { outline: none; user-select: none; }
.period-wrap input, .period-wrap textarea { user-select: text; }

.period-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.period-btn-group { display: flex; flex-wrap: wrap; gap: 6px; }

.period-help {
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0 0;
  line-height: 1.5;
}

.period-template-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.period-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
}

.period-chip button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.period-chip button:hover { color: var(--danger, #f87171); }

/* The drag-to-schedule timeline below is a dense custom-drawn canvas (white handles/ghost/cursor
   overlays, colored blocks with white text) — rather than re-theme every one of those overlays,
   it keeps one fixed dark look regardless of the light/dark toggle, the same way a code editor's
   minimap or a scheduling tool's grid often stays dark even in an otherwise light theme.
   Re-pinning --text/--text-dim/--border here (not just --bg) means every descendant that already
   reads those variables for its own color/border falls back to the dark-mode values automatically,
   without needing a theme override for each individual rule inside the canvas. */
.period-scroll {
  overflow-x: auto;
  padding: 0;
  background: var(--dst-black);
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  --border: #2c2c2c;
  --panel: #161616;
  --input-bg: #111111;
  --input-border: #3a3a3a;
  /* see the .topbar comment above about why `color` needs setting explicitly, not just the custom
     property — anything in here with no color of its own (e.g. .period-lane-name) otherwise keeps
     inheriting the light theme's dark text straight through this dark canvas. */
  color: var(--text);
}

.period-grid { position: relative; }

.period-head {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.period-corner {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}

.period-week {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-size: 11px;
  color: var(--text-dim);
  border-left: 1px solid var(--border);
  cursor: pointer;
  box-sizing: border-box;
}

.period-week strong { color: var(--text); font-size: 12px; }
.period-week:hover { background: rgba(255, 255, 255, 0.04); }
.period-week.cursor { background: rgba(181, 40, 58, 0.25); }

.period-lane { display: flex; border-bottom: 1px solid var(--border); }

.period-lane-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--panel);
  border-right: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}

.period-lane-label input {
  width: 70px;
  font-size: 12px;
  padding: 2px 4px;
}

.period-lane-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }

.period-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.period-lane-x {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
}

.period-lane:hover .period-lane-x { opacity: 1; }
.period-lane-x:hover { color: var(--danger, #f87171); }

.period-track {
  position: relative;
  flex-shrink: 0;
  touch-action: none;
  background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--border) 100%);
  background-repeat: repeat-x;
  cursor: crosshair;
}

.period-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(181, 40, 58, 0.14);
  pointer-events: none;
}

.period-block {
  position: absolute;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: grab;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
  touch-action: none;
}

.period-block:active { cursor: grabbing; }
.period-block.selected { outline: 2px solid #fff; outline-offset: 1px; z-index: 3; }

.period-block-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.period-block-label em { opacity: 0.7; font-weight: 400; }

.period-note-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  margin-left: 6px;
  flex-shrink: 0;
}

.period-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.period-handle.l { left: 0; }
.period-handle.r { right: 0; }
.period-handle:hover { background: rgba(255, 255, 255, 0.3); }

.period-inline-input {
  width: 100%;
  font-size: 12px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #fff;
  color: #fff;
  border-radius: 4px;
}

.period-ghost {
  position: absolute;
  height: 28px;
  border-radius: 6px;
  border: 2px dashed #fff;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  box-sizing: border-box;
}

.period-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.period-swatches { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-dim); }

.period-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.period-swatch.on { border-color: #fff; }

.period-swatch.clear {
  width: auto;
  border-radius: 999px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
}

.period-swatch.clear.on { border-color: #fff; color: var(--text); }

.print-only-block { display: none; }

/* Screen: the print copy of the DST logo stays hidden; measuring hides screen-only controls */
.ph-right img.ph-logo-print { display: none; } /* screen shows only the light-lettered logo; the print rules below swap in the original */
.period-wrap.measuring .no-print { display: none !important; }

@media print {
  /* ---- "Print / Save PDF" on the plan: show only the plan ---- */
  body.print-plan-only *:not(:has(.period-wrap)):not(.period-wrap):not(.period-wrap *) { display: none !important; }
  body.print-plan-only .main { padding: 0 !important; max-width: none !important; }
  /* goals sit above the timeline on screen; on paper they stay after it */
  .period-wrap { display: flex; flex-direction: column; }
  .period-wrap > .period-goals-slot { order: 1; }
  body.print-plan-only, body.print-plan-only .app, body.print-plan-only .main { background: #fff !important; min-height: 0 !important; }

  /* ---- white-paper colours for the plan; keep every colour that carries meaning ---- */
  :is(.period-wrap, .report-sheet), :is(.period-wrap, .report-sheet) * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :is(.period-wrap, .report-sheet) { color: #000; }
  :is(.period-wrap, .report-sheet) .panel { box-shadow: none !important; }
  :is(.period-wrap, .report-sheet) .period-visual,
  :is(.period-wrap, .report-sheet) .period-goals,
  :is(.period-wrap, .report-sheet) .period-action,
  :is(.period-wrap, .report-sheet) .report-section { border: 2px solid #a52a34 !important; }

  /* the original DST artwork (grey + red) replaces the light on-screen copy */
  .ph-logo-screen { display: none !important; }
  .ph-logo-print { display: block !important; }
  /* every bit of writing on the printed plan is black (the on-screen greys vanish on white paper) */
  :is(.period-wrap, .report-sheet), :is(.period-wrap, .report-sheet) * { color: #000 !important; }
  :is(.period-wrap, .report-sheet) ::placeholder { color: transparent !important; }
  /* ...except text that sits on a coloured fill, and the red PRIORITY label */
  :is(.period-wrap, .report-sheet) .period-block, :is(.period-wrap, .report-sheet) .period-block *, :is(.period-wrap, .report-sheet) .goal-rank { color: #fff !important; }
  :is(.period-wrap, .report-sheet) .priority-bracket span { color: #a52a34 !important; }
  .cubs-theme .period-visual, .cubs-theme .period-goals, .cubs-theme .period-action, .cubs-theme .report-section { border-color: var(--cubs-blue) !important; }
  .cubs-theme .priority-bracket span { color: var(--cubs-blue) !important; }
  .ph-initials { background: #eee !important; }
  .period-lane-label { background: #fff !important; border-right-color: #ccc !important; }
  .period-head, .period-lane, .period-week { border-color: #ddd !important; }
  .period-track { background-image: linear-gradient(to right, transparent calc(100% - 1px), #ddd 100%) !important; }
  .period-seg { background: #d9d9d9 !important; }
  .period-seg.done { background: #a52a34 !important; }
  .cubs-theme .period-seg.done { background: var(--cubs-blue) !important; }
  .period-seg.current { background: #f59e0b !important; box-shadow: none !important; }
  .period-now-chip { border-color: #ccc !important; }

  .goal-item .goal-text, .period-action textarea {
    background: #fff !important; color: #000 !important; border: 1px solid #ccc !important; resize: none;
  }
  .period-action textarea { min-height: 0; overflow: hidden !important; }

  /* the page is narrow, so the mobile "stacked" header rule would kick in — keep the 3-part header on paper */
  /* the left block spans the whole header so the percentile block (50% of it, margin-left:auto) lands on the right half of the page;
     the DST logo is lifted to the top-right corner so it doesn't take a grid column */
  :is(.period-wrap, .report-sheet) .period-header { grid-template-columns: 1fr !important; justify-items: stretch !important; text-align: left !important; position: relative !important; }
  :is(.period-wrap, .report-sheet) .ph-left { grid-column: 1 / -1 !important; width: 100% !important; align-items: flex-start !important; }
  :is(.period-wrap, .report-sheet) .ph-pics { width: 100% !important; }
  :is(.period-wrap, .report-sheet) .ph-extra { width: 50% !important; min-width: 0 !important; margin-left: auto !important; }
  :is(.period-wrap, .report-sheet) .ph-center { text-align: center !important; }
  :is(.period-wrap, .report-sheet) .ph-right { position: absolute !important; top: 14px !important; right: 16px !important; justify-self: auto !important; }
  /* Shadows, opacity and filters make Chrome turn text and shapes into pictures inside the PDF, which
     prints soft and blurry. Keep everything flat so it stays sharp vector text and solid fills. */
  :is(.period-wrap, .report-sheet), :is(.period-wrap, .report-sheet) * { text-shadow: none !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; }
  :is(.period-wrap, .report-sheet) .period-week.now { border-bottom: 3px solid #f59e0b !important; }
  .period-block.selected { outline: none !important; }
  .period-cursor { display: none !important; }
  .period-week.cursor { background: none !important; }
  .period-scroll { overflow: visible !important; background: #fff !important; }
  :is(.period-wrap, .report-sheet) .panel { break-inside: avoid; }
  :is(.period-wrap, .report-sheet) > .panel:last-child { margin-bottom: 0 !important; }
}

/* --- Periodization: progress bar + read-only timeline (planner, player profile, team report) --- */
.period-progress { margin-bottom: 4px; }

.period-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
}

.period-progress-week { font-size: 17px; }
.period-progress-range { font-size: 12px; color: var(--text-dim); }

.period-progress-bar { display: flex; gap: 3px; }

.period-seg {
  flex: 1;
  height: 12px;
  min-width: 3px;
  border-radius: 3px;
  background: var(--surface-muted);
}

.period-seg.done { background: var(--primary); }
.period-seg.current { background: var(--warn); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(245, 158, 11, 0.6); }

.period-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}

.period-now-title { color: var(--text-dim); margin-right: 2px; }

.period-now-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.period-now-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.period-saved { font-size: 12px; color: var(--text-dim); margin: 10px 0 0; }

.period-week.now { box-shadow: inset 0 -3px 0 var(--warn); }
.period-week.now strong { color: var(--warn); }

.period-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--warn);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

.period-ro { margin-top: 14px; font-size: 12px; }

.period-ro-row { display: flex; border-bottom: 1px solid var(--border); }
.period-ro-row:last-child { border-bottom: none; }

.period-ro-label {
  width: 108px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding-right: 6px;
}

.period-ro-label i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

.period-ro-track { flex: 1; position: relative; min-width: 0; }

.period-ro-weeks { display: flex; }
.period-ro-weeks span { flex: 1; text-align: center; font-size: 10px; color: var(--text-dim); padding: 3px 0; overflow: hidden; }
.period-ro-weeks span.now { color: var(--warn); font-weight: 700; box-shadow: inset 0 -2px 0 var(--warn); }

.period-ro-now { position: absolute; top: 0; bottom: 0; background: rgba(245, 158, 11, 0.12); pointer-events: none; }

.period-ro-block {
  position: absolute;
  height: 22px;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  line-height: 22px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.period-ro-block em { opacity: 0.7; font-weight: 400; }

/* compact variant used inside each athlete block on the team report */
.period-view-compact {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.period-view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* --- Periodization: goals + action plan --- */
.goal-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.goal-col h3, .action-ro h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
}

.goal-col h3 small {
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-dim);
}

.goal-col-remove {
  float: right;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
}

.goal-add-col {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.goal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.goal-item .goal-text { flex: 1; min-width: 0; }
.goal-item.done .goal-text { text-decoration: line-through; color: var(--text-dim); }

.goal-x {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.goal-x:hover { color: var(--danger); }

.goal-empty { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; }

.goal-add { display: flex; gap: 6px; margin-top: 8px; }
.goal-add input { flex: 1; min-width: 0; }

.period-action textarea { width: 100%; }

/* read-only version on the player profile / team report */
.period-goals-ro { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

.goal-item.ro { align-items: flex-start; font-size: 13px; }
.goal-mark { width: 16px; flex-shrink: 0; color: var(--text-dim); }
.goal-item.ro.done .goal-mark { color: var(--good); }
.goal-item.ro.done .goal-text-ro { color: var(--text-dim); text-decoration: line-through; }

.action-ro { margin-top: 14px; }

.action-ro-text {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  background: var(--overlay-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

/* inputs that live outside a .field wrapper need the dark input look explicitly */
.goal-item .goal-text,
.goal-add input,
.period-action textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

/* lives inside .period-scroll, which re-pins --input-bg/--input-border/--text to their dark-mode
   values, so this resolves to the same fixed dark input look regardless of the page theme */
.period-lane-label input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.period-action textarea { line-height: 1.5; resize: vertical; }
.period-lane-label input { padding: 2px 4px; font-size: 12px; }

/* --- Goals: red outline, priority bracket, drag-to-reorder --- */
.period-goals {
  border: 2px solid var(--dst-red);
  box-shadow: 0 0 0 1px rgba(165, 42, 52, 0.25), 0 0 14px rgba(165, 42, 52, 0.18);
}

.goal-body { display: flex; align-items: stretch; gap: 8px; }
.goal-items { flex: 1; min-width: 0; }

/* "[" bracket spanning the height of the list with PRIORITY running up the side */
.priority-bracket {
  width: 26px;
  flex-shrink: 0;
  border: 2px solid var(--dst-red);
  border-right: none;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 6px;
}

.priority-bracket span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dst-red);
  white-space: nowrap;
}

.goal-grip {
  cursor: grab;
  color: var(--text-dim);
  font-size: 14px;
  letter-spacing: -2px;
  line-height: 1;
  padding: 4px 2px;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}

.goal-grip:hover { color: var(--text); }
.goal-grip.disabled { cursor: default; opacity: 0.35; }

.goal-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dst-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.goal-item.dragging {
  opacity: 0.85;
  background: rgba(165, 42, 52, 0.18);
  border-radius: 6px;
  outline: 1px dashed var(--dst-red);
}

.goal-item.ro { align-items: center; }

/* --- Periodization header: athlete photo + team logo (left), title (center), DST logo (right) --- */
.period-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
}

.ph-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ph-pics { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }

.ph-photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--dst-red);
  background: var(--dst-black);
  flex-shrink: 0;
}

.ph-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-dim);
}

.ph-team img,
.ph-team > span {
  margin-right: 0 !important;
  display: block;
}

.ph-team img {
  background: none;
  padding: 0;
  border-radius: 0;
}

.ph-name { font-size: 26px; font-weight: 700; line-height: 1.15; }
.ph-teamname { font-size: 14px; color: var(--text-dim); }

.ph-center { text-align: center; grid-column: 1 / -1; order: -1; }
.ph-center h1 { margin: 0; font-size: 30px; letter-spacing: 0.4px; }
.ph-sub { margin-top: 6px; font-size: 12px; color: var(--text-dim); }

.ph-right { justify-self: end; }
.ph-right img {
  height: 88px;
  width: auto;
  display: block;
}

/* Cubs Roster plan/report (see PlanHeader's isCubsOnly) — Cubs identity instead of DST's */
.period-header-cubs .ph-photo { border-color: var(--cubs-blue); }
.ph-org-cubs { display: flex; align-items: center; gap: 10px; }
.ph-org-logo { height: 64px; width: auto; display: block; }
.ph-org-name { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--cubs-blue); text-align: right; text-transform: uppercase; letter-spacing: 0.3px; }

@media (max-width: 900px) {
  .period-header { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ph-left { align-items: center; }
  .ph-right { justify-self: center; }
}

/* Timeline and Action Plan get the same red outline as the Goals section */
.period-visual,
.period-action {
  border: 2px solid var(--dst-red);
  box-shadow: 0 0 0 1px rgba(165, 42, 52, 0.25), 0 0 14px rgba(165, 42, 52, 0.18);
}

/* progress bar + timeline share one red-outlined section */
.period-visual { padding: 0; overflow: hidden; }
.period-visual-top { padding: 18px 18px 14px; }
.period-visual .period-scroll { border-top: 1px solid var(--border); }

/* --- Team report: one sheet per athlete (styled like the Player Plan page) --- */
/* fixed page width so every sheet (on screen, printed, or emailed) is laid out identically regardless of window size */
.report-sheet {
  width: 1000px;
  max-width: none;
  margin: 0 auto 32px;
}

.report-sheet.measuring .no-print { display: none !important; }

.report-section {
  border: 2px solid var(--dst-red);
  box-shadow: 0 0 0 1px rgba(165, 42, 52, 0.25), 0 0 14px rgba(165, 42, 52, 0.18);
}

.ph-name-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ph-name-link:hover { color: var(--dst-red); }

/* four metric charts across so the seven fit in two tidy rows on the sheet */
.report-sheet .kpi-trend-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }

/* notes flow inside the section card instead of a scroll box */
.report-sheet .team-athlete-notes { margin: 0; padding: 0; border: none; }
.report-sheet .notes-log { max-height: none; overflow: visible; }
.report-sheet .period-view-head { display: none; }

@media print {
  body.print-team-sheets .main { padding: 0 !important; max-width: none !important; }
  body.print-team-sheets, body.print-team-sheets .app, body.print-team-sheets .main { background: #fff !important; min-height: 0 !important; }

  .report-sheet { margin: 0 !important; max-width: none; break-after: page; break-inside: avoid; }
  .report-sheet:last-child { break-after: auto; }
  .report-contacts { break-after: page; }

  /* charts: black axis text on white, softer grid; no shadows so they stay sharp */
  .report-sheet .recharts-text, .report-sheet .recharts-cartesian-axis-tick-value { fill: #000 !important; }
  .report-sheet .recharts-cartesian-axis-line, .report-sheet .recharts-cartesian-axis-tick-line { stroke: #666 !important; }
  .report-sheet .recharts-cartesian-grid line { stroke: #ddd !important; }

  /* notes: the dark cards become plain bordered boxes */
  .report-sheet .note-entry { background: #fff !important; border: 1px solid #ccc !important; }
  .report-sheet .notes-log { max-height: none !important; overflow: visible !important; }
  .report-sheet .kpi-trend-grid .panel { background: #fff !important; }
}

/* Custom date range: From / To pickers under the range pills */
.range-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.range-custom label { display: inline-flex; align-items: center; gap: 6px; }

.range-custom input[type="date"] {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

/* Automated captions: plan position under the progress bar, CMJ summary above the metrics */
.auto-caption {
  margin: 12px 0 4px;
  padding: 8px 12px;
  border-left: 3px solid var(--dst-red);
  background: var(--overlay-soft);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.auto-caption strong { color: var(--text); }

@media print {
  .auto-caption { background: none !important; color: #000 !important; border-left-color: #a52a34 !important; }
  .cubs-theme .auto-caption { border-left-color: var(--cubs-blue) !important; }
}

/* --- News page --- */
.news-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.news-refresh { display: flex; flex-wrap: wrap; gap: 8px; }
.news-sep { width: 1px; background: var(--border); margin: 0 6px; align-self: stretch; }

.news-progress { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; font-size: 12px; color: var(--text-dim); }
.news-progress-bar { flex: 0 0 220px; height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.news-progress-bar span { display: block; height: 100%; background: var(--primary); transition: width 0.3s ease; }

.news-card {
  display: flex;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.news-card:hover { border-color: var(--dst-red); }

.news-thumb-link { flex-shrink: 0; }
.news-thumb { width: 132px; height: 88px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-muted); }

.news-body { min-width: 0; flex: 1; }

.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }

.news-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-dim);
}

.news-kind.video { background: rgba(165, 42, 52, 0.25); color: #ff9aa4; }

.news-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
}

.news-title:hover { color: var(--info); text-decoration: underline; }

.news-snippet { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

.news-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.news-chip {
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  background: rgba(165, 42, 52, 0.18);
  border: 1px solid rgba(165, 42, 52, 0.5);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}

.news-chip:hover { background: rgba(165, 42, 52, 0.4); }

@media (max-width: 620px) {
  .news-card { flex-direction: column; }
  .news-thumb { width: 100%; height: 160px; }
}

/* News: tracked topics */
.news-chip.topic { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.5); }
.news-chip.topic:hover { background: rgba(56, 189, 248, 0.3); }

.news-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 12px; }
.news-topics-label { color: var(--text-dim); }
.news-topics-empty { color: var(--text-dim); font-style: italic; }

.news-topic-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.1);
  color: var(--text);
}

.news-topic-tag button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.news-topic-tag button:hover { color: var(--danger); }

.news-topic-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.news-topic-edit input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 280px;
  font-family: inherit;
}

/* Bottom menu bar (Import & Manual Entry) — sticks to the bottom of the window while scrolling */
.bottom-menu {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(90deg, #000000, var(--dst-black));
  border-top: 3px solid var(--dst-red);
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  color: var(--text);
}

.bottom-menu .nav-tab { padding: 8px 16px; }
/* back to a coach's own phone app, at the left of the bottom bar when the dashboard was opened from it */
.bottom-menu .back-to-app { margin-right: auto; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--dst-red); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bottom-menu .back-to-app:hover { filter: brightness(1.1); }

/* Status line under the contacts header when emailing a team report */
.email-status {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border);
  background: var(--overlay-soft);
}

.email-status.working { border-color: var(--warn); color: var(--warn); }
.email-status.done { border-color: var(--good); color: var(--good); }
.email-status.error { border-color: var(--danger); color: var(--danger); }

/* --- Movement Assessment tab --- */
.assess-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

/* One chip per saved assessment (newest first) instead of a date-picker dropdown — click the
   label to open it, click the × to delete just that one. */
.assess-history { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.assess-history-item {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}
.assess-history-item.active { border-color: var(--dst-red); }
.assess-history-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.assess-history-item.active .assess-history-btn { background: var(--dst-red); color: #fff; }
.assess-history-delete {
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.assess-history-delete:hover { color: var(--danger); }
.assess-history-item.active .assess-history-delete { border-left-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); }
.assess-history-item.active .assess-history-delete:hover { color: #fff; }

.assess-header-top { display: flex; align-items: center; gap: 16px; }
.assess-header-top .assess-header-grid { flex: 1; min-width: 0; }
/* Smaller than the Player Plan header's own (that one has a whole panel to itself) — this sits
   beside three compact text fields, so the photo/logo just need to be recognizable, not a feature. */
.assess-header-pics { margin-bottom: 0; flex-shrink: 0; }
.assess-header-photo { width: 44px; height: 44px; border-width: 2px; }
.assess-header-pics .ph-initials { font-size: 15px; }

.assess-header-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
}

.assess-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.assess-col { min-width: 0; }

/* Print as a single page with the columns side by side, each scaled to fill its own half —
   see preparePrint. JS sets each column's own fixed width/zoom; flex-shrink:0 is essential here
   because the *measuring* pass runs in normal screen media, where the actual browser window is
   often narrower than the two columns' combined print width — a flex item shrinks by default to
   fit its container, which would squeeze both columns down to the wrong width (and wrong text
   wrapping) during measurement even though the real print page is wide enough. Grid tracks don't
   have this problem (no default "shrink to fit"), but a grid can't be told two children's exact
   pixel widths independently the way flex-basis lets us here. */
.assess-wrap.print-paginated .assess-columns { display: flex; align-items: flex-start; gap: 24px; }
.assess-wrap.print-paginated .assess-col { flex: 0 0 auto; }
/* The DST letterhead — matches the original paper form, centered above the header row (living
   inside the header panel so its height is naturally included in whatever gets measured for the
   page fit — see preparePrint). */
.assess-print-logo { display: none; }
.assess-wrap.print-paginated .assess-print-logo { display: block; text-align: center; margin-bottom: 10px; }
.assess-print-logo img { height: 56px; width: auto; }
/* Body diagrams read as a thumbnail row on screen, but print gets a real reference size that
   actually uses the panel's space — sized here (not just under @media print) so preparePrint's
   fit-to-page measurement sees the real height it's about to render, not the small on-screen one. */
.assess-wrap.print-paginated .assess-body-img { height: 620px; }
.assess-wrap.print-paginated .assess-outlines { gap: 24px; }
/* The overhead-squat bars (Ankle/Knee/Pelvis/Upper Body) hold one short word each, so at the
   ~0.2-0.3 zoom the rest of this page needs, their normal 12px text shrinks to under 3 effective
   px — technically still white-on-dark (see the @media print rule for .assess-subhead), but too
   small to actually read once rasterized. Bumped up here (scoped like the body-image size above,
   so the page-fit measurement accounts for the taller bars) rather than in @media print. */
.assess-wrap.print-paginated .assess-subhead { font-size: 34px; padding: 9px 12px; }

/* Performance Testing as two even columns instead of one long list */
.assess-perf-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

/* Starts small like a normal notes field and grows with what's typed (height is set inline by
   AutoGrowTextarea, tracking scrollHeight) instead of resizing by drag. */
.assess-autogrow { resize: none; overflow: hidden; width: 100%; }

.assess-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.assess-table th, .assess-table td {
  border: 1px solid var(--border);
  padding: 5px 6px;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}

.assess-table thead th {
  background: var(--surface-muted);
  color: var(--text-dim);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.assess-table tbody tr:hover { background: none; }
.assess-table tr.assess-flagged td:first-child { color: var(--warn); font-weight: 600; }

.assess-row-note { color: var(--text-dim); font-size: 10px; font-style: italic; }

/* Body region findings: clickable pills instead of static slash-separated text */
.assess-tagrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.assess-tag {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
}
.assess-tag:hover { border-color: var(--text-dim); }
.assess-tag.active { background: var(--dst-red); border-color: var(--dst-red); color: #fff; font-weight: 600; }
.assess-tag-qualifier { font-size: 10px; padding: 2px 7px; opacity: 0.85; }
.assess-tag-qualifier.active { opacity: 1; }

.assess-cell {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
}

/* Print-only stand-in for .assess-cell (see the Cell component) — a single-line input clips
   anything longer than its own width, so print swaps it for a wrapping block that grows to show
   the whole note instead of cutting it off. Scoped to .print-paginated (not just @media print) so
   preparePrint's fit-to-page measurement sees the real wrapped height a long note needs, not the
   input's fixed one-line height — the same reason the body-image print size lives there too. */
.assess-cell-print { display: none; }
.assess-wrap.print-paginated .assess-cell { display: none; }
.assess-wrap.print-paginated .assess-cell-print {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  text-align: left;
}

.assess-dualcheck { display: flex; gap: 6px; justify-content: center; align-items: center; }
.assess-dualcheck-mark { font-weight: 700; }
/* Every checkbox in the assessment — dual-checks, the Body Region flag, Shoulder Impingement,
   Pelvic Tilt — is the same size, rather than each spot picking its own via whatever wrapper it
   happened to be in. */
.assess-wrap input[type="checkbox"] { width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--dst-red); }

.assess-cell-stack { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.assess-cell-stack .assess-dualcheck { justify-content: center; }

.assess-subsection { margin-top: 16px; }
.assess-subsection:first-child { margin-top: 0; }

.assess-subhead {
  /* stays a fixed dark bar (not theme-reactive): the print stylesheet below forces its text white
     without touching this background, assuming it stays dark on paper too — so the text color is
     pinned here too, rather than left to inherit the light theme's dark text onto a dark bar */
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #202020;
  color: #f2f2f2;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-bottom: none;
}

/* Shared "make good use of the panel width" treatment for the Overhead Squat joint tables
   (Ankle/Knee/Pelvis use .assess-table-transposed below, Upper Body applies this directly) —
   larger text instead of the small, sized-to-content look these used to have (checkbox sizing is
   handled globally above, the same everywhere). */
.assess-table-big { font-size: 14px; }
.assess-table-big th, .assess-table-big td { padding: 8px 12px; }

/* Ankle/Knee/Pelvis joint-finding tables specifically: findings as columns, L/R as the two rows,
   stretched to fill the panel's width (rather than sized-to-content and centered, which left a
   lot of the module empty) — the first column is a row label (L/R), not data, so it gets its own
   narrower treatment. */
.assess-table-transposed {
  width: 100%;
  table-layout: fixed;
}
.assess-table-transposed th:first-child, .assess-table-transposed td:first-child {
  width: 34px;
  text-align: center;
  font-weight: 700;
  padding-left: 6px;
  padding-right: 6px;
}
/* Explicit share of the remaining width for the finding columns (all three of these tables have
   exactly 3) — table-layout: fixed is supposed to split unspecified columns evenly on its own,
   but that left a wide gap unused on the right, so this states it outright instead of relying on
   the browser to infer it. */
.assess-table-transposed th:not(:first-child), .assess-table-transposed td:not(:first-child) {
  width: calc((100% - 34px) / 3);
}

/* Pelvic Tilt: Early and After 90 share one cell instead of a column each */
.assess-pelvic-tilt { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0 auto; width: fit-content; }
.assess-pelvic-tilt label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; white-space: nowrap; }

/* Every section outlines red by default; clicking into one turns it gold, so it's obvious which
   part of the form is currently being worked in — moves as soon as a different section is
   clicked into. */
.assess-form .panel { border-color: #c0392b; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.cubs-theme .assess-form .panel { border-color: var(--cubs-blue); }
.assess-form .panel.assess-panel-active {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4);
}

.assess-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
}

.assess-score-toggle { display: flex; gap: 6px; }
.assess-score-row .print-only { display: none; }

.assess-outlines {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.assess-body-outline { text-align: center; color: var(--text-dim); }
.assess-body-imgwrap { position: relative; display: inline-block; line-height: 0; cursor: crosshair; }
.assess-body-img {
  height: 130px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 6px;
  padding: 3px 6px;
  box-sizing: border-box;
}
/* A clicked spot on the diagram — plain positioned box, not a native control, so it scales fine
   at the heavy print zoom (no floor-clamp workaround needed like the checkboxes/dropdowns). */
.assess-body-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid #e03131;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.assess-body-outline-label { font-size: 11px; margin-top: 4px; }

.assess-print-only-text { display: none; }

/* screen: hides the toolbar etc. while measuring for the one-page print fit */
.assess-wrap.measuring .no-print { display: none !important; }

@media print {
  body.print-assessment-only .main { padding: 0 !important; max-width: none !important; }
  body.print-assessment-only, body.print-assessment-only .app, body.print-assessment-only .main {
    background: #fff !important; min-height: 0 !important;
  }
  body.print-assessment-only *:not(:has(.assess-wrap)):not(.assess-wrap):not(.assess-wrap *) { display: none !important; }

  .assess-wrap, .assess-wrap * { color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Keep the same red section outline on paper as on screen (the on-screen "active section" gold
     glow doesn't carry over — printed pages have no notion of what was last clicked into). */
  .assess-wrap .panel { background: #fff !important; border: 2px solid #c0392b !important; box-shadow: none !important; }
  .cubs-theme .assess-wrap .panel { border-color: var(--cubs-blue) !important; }
  .assess-table thead th { background: #eee !important; color: #000 !important; }
  .assess-wrap textarea, .assess-wrap input {
    background: #fff !important; border: 1px solid #bbb !important; color: #000 !important;
  }
  /* The overhead-squat subsection bars keep their dark background in print (the .panel override
     above only whitens panels, not this), so the blanket "everything prints black text" rule just
     above would otherwise make the label invisible against it — this wins on specificity and puts
     it back to white. */
  .assess-wrap .assess-subhead { color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .assess-score-toggle { display: none !important; }
  /* Native checkboxes hit a browser-enforced minimum render size that ignores our page-fit zoom
     once scaled down this far, so print swaps them for a plain check-mark line instead. */
  .assess-dualcheck { display: none !important; }
  .assess-dualcheck-mark { display: inline !important; }
  /* Same story for the Pass/Fail dropdown: native <select> chrome doesn't shrink past its own
     minimum size either, so print shows the picked value as plain text instead. */
  .assess-lrselect { display: none !important; }
  .assess-lrselect-print { display: inline !important; }
  /* Body-region pills print as a plain comma list of whatever's selected. */
  .assess-tagrow { display: none !important; }
  .assess-tagrow-print { display: inline !important; }
  .assess-score-row .print-only { display: inline !important; }
  .assess-print-only-text { display: block !important; font-size: 12px; margin: 8px 0 0; white-space: pre-wrap; }
  /* Anything actually marked/selected (a dual-check, an L/R pick, a body-region tag) prints in the
     same red as the on-screen accent, instead of blending in as plain black text like the "—"
     placeholders for whatever wasn't marked. */
  .assess-mark-set { color: var(--dst-red) !important; font-weight: 700; }
  /* Movement Test's Pass column is a normal finding, not a flag — keep it plain black even when
     filled in, so only the Fail column and any checkbox marks (still red via .assess-mark-set
     above) read as something to act on. */
  .assess-lrselect-pass.assess-mark-set { color: #000 !important; }
}

/* Athlete name stacked directly above the photo in the Player Plan header */
.ph-photo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ph-photo-col .ph-name { text-align: center; }

/* Compact CMJ profile beside the athlete photo in the Player Plan header */
.period-header {
  border: 2px solid var(--dst-red);
  box-shadow: 0 0 0 1px rgba(165, 42, 52, 0.25), 0 0 14px rgba(165, 42, 52, 0.18);
}
.period-header-cubs { box-shadow: 0 0 0 1px rgba(14, 51, 134, 0.25), 0 0 14px rgba(14, 51, 134, 0.18); }
.ph-pics { width: 100%; align-items: flex-start; }
/* the team logo sits level with the 112px photo (logo is 104px, so 4px down centers it) */
.ph-pics .ph-team { margin-top: 4px; }
.ph-extra { width: 50%; min-width: 380px; margin-left: auto; text-align: left; font-size: 12px; }
@media (max-width: 900px) { .ph-extra { width: 100%; min-width: 0; margin-left: 0; } }
.cmj-mini h2 { font-size: 13px; margin: 0 0 6px; }

/* Training program builder (Programs tab) */
.program-editor .facility-form-grid { margin-bottom: 8px; }
.program-week { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.program-week-head, .program-session-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.program-week-name { font-size: 16px; font-weight: 700; background: transparent; border: none; border-bottom: 1px dashed var(--border); padding: 2px 0; }
.program-session { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.program-session-name { font-size: 14px; font-weight: 600; background: transparent; border: none; border-bottom: 1px dashed var(--border); padding: 2px 0; }
.program-exercises { overflow-x: auto; margin-top: 8px; }
.program-ex-row { display: grid; grid-template-columns: 34px minmax(160px, 2fr) 60px 60px 80px 100px 80px minmax(120px, 1.5fr) 58px 28px; gap: 6px; align-items: center; margin-bottom: 6px; min-width: 860px; }
/* program folders: breadcrumb trail and folder tiles */
.program-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.program-crumb { background: none; border: none; padding: 2px 0; font: inherit; color: var(--text-dim); cursor: pointer; }
.program-crumb:hover { color: var(--text); text-decoration: underline; }
.program-crumb.here { color: var(--text); font-weight: 700; }
.program-crumb-sep { color: var(--text-dim); }
.program-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 16px; }
.program-folder { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.program-folder:hover { border-color: var(--dst-red); }
.program-folder small { margin-left: auto; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.program-folder-icon { position: relative; width: 22px; height: 15px; border-radius: 2px 3px 3px 3px; background: var(--dst-red); flex: 0 0 auto; margin-top: 3px; }
.program-folder-icon::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 5px; border-radius: 2px 2px 0 0; background: var(--dst-red); }

/* Exercise library */
.program-sections { margin-bottom: 14px; }
.exercise-list { display: flex; flex-direction: column; }
.exercise-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) 3fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.exercise-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.exercise-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.exercise-tag.tier { border-color: var(--dst-red); color: var(--text); background: rgba(165, 42, 52, 0.2); font-weight: 600; }
.exercise-tag.novideo { border-style: dashed; }
.exercise-equipment { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.exercise-equipment label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.exercise-overlay { z-index: 1200; }
.exercise-modal { width: min(820px, 100%); text-align: left; }
.exercise-details h2 { margin: 0 0 8px; }
.exercise-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 12px; background: #000; border-radius: 8px; overflow: hidden; }
.exercise-video.vertical { width: min(340px, 100%); aspect-ratio: 9 / 16; margin-left: auto; margin-right: auto; }
.exercise-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* a clip a coach filmed or uploaded (stored with the dashboard, not on YouTube) */
.exercise-clip { display: block; width: 100%; max-height: 70vh; margin-top: 12px; background: #000; border-radius: 8px; }
.exercise-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exercise-upload small { color: var(--text-dim); font-size: 12px; }
/* names merged into an exercise, and the merge screen */
.exercise-aka { font-size: 11px; color: var(--text-dim); margin-left: 6px; }
.exercise-aliases { display: flex; flex-wrap: wrap; gap: 6px; }
.exercise-alias-x { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0 0 0 6px; font-size: 13px; line-height: 1; }
.exercise-merge-choice { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; }
.exercise-merge-choice label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
/* form checks: clips remote athletes send, the watch-and-reply window and the Training Log list (form_checks.js) */
.form-check-meta { font-size: 12px; color: var(--text-dim); margin-top: -4px; }
.form-check-note { margin: 12px 0 4px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-hover, rgba(255,255,255,.04)); font-size: 14px; }
.form-check-modal textarea { width: 100%; }
.form-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.form-check-list li { display: flex; gap: 12px; align-items: flex-start; }
.form-check-list small { color: var(--text-dim); }
.form-check-note-small { font-size: 13px; font-style: italic; margin-top: 2px; }
.form-check-status { font-size: 12px; color: #e0a020; margin-top: 2px; }
.form-check-status.done { color: #4caf6a; }
.exercise-open-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.exercise-cues { margin-top: 12px; font-size: 14px; white-space: pre-wrap; }
.exercise-view-btn { flex: 0 0 auto; border: 1px solid var(--dst-red); background: transparent; color: var(--dst-red); border-radius: 4px; font-size: 10px; padding: 3px 5px; cursor: pointer; }
.exercise-link { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; cursor: pointer; text-align: left; }
.exercise-link:hover { color: var(--dst-red); }
@media (max-width: 700px) { .exercise-row { grid-template-columns: 1fr; gap: 4px; } }

/* app-wide Back button, above the page content */
.nav-back { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.nav-back:hover { border-color: var(--dst-red); }

/* selecting several programs to move or delete together */
.program-bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
.program-bulk-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-dim); }
.program-bulk-delete { color: #f87171; }
.program-bulk-hint { color: var(--text-dim); font-size: 12px; }
.program-select { flex: 0 0 auto; margin: 0 4px 0 0; width: 16px; height: 16px; cursor: pointer; }
.program-card .facility-card-head { align-items: center; }
.program-card .facility-card-head .program-name-link { flex: 1; }
.program-card.selected { border-color: var(--dst-red); box-shadow: 0 0 0 1px var(--dst-red); }

.program-card { cursor: grab; }
.program-card:active { cursor: grabbing; }
.program-folder.drop-over { border-color: var(--dst-red); background: rgba(165, 42, 52, 0.18); }
.program-crumb.drop-over { color: var(--dst-red); text-decoration: underline; }
.program-created { margin-top: 4px; font-size: 12px; color: var(--text-dim); }

.program-name-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
.program-name-link:hover { color: var(--dst-red); text-decoration: underline; }
/* Individualize a program for one athlete */
.indiv-offer { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--dst-red); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.indiv-offer-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.indiv-done { color: var(--text-dim); }
.indiv-heading { margin: 18px 0 8px; font-size: 15px; }
.indiv-heading small { margin-left: 8px; font-weight: 400; color: var(--text-dim); }
.indiv-swaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 6px 20px; }
.indiv-swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.indiv-swap-from { font-size: 13px; min-width: 0; }
.indiv-swap-from small { display: block; color: var(--text-dim); font-size: 11px; }
.indiv-arrow { color: var(--text-dim); }
.indiv-swap input { width: 100%; box-sizing: border-box; }
.indiv-day { margin-top: 12px; }
.indiv-day h4 { margin: 0 0 4px; font-size: 14px; }
.indiv-grid-wrap { overflow-x: auto; }
.indiv-grid { border-collapse: collapse; font-size: 13px; }
.indiv-grid th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-dim); padding: 4px 10px 4px 0; white-space: nowrap; }
.indiv-grid td { padding: 3px 10px 3px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.indiv-ex { min-width: 220px; }
.indiv-cell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.indiv-cell input { width: 44px; text-align: center; padding: 4px 2px; box-sizing: border-box; }
.indiv-other { font-size: 10px; color: var(--text-dim); }
.indiv-empty { color: var(--text-dim); text-align: center; }
@media (max-width: 700px) { .indiv-swaps { grid-template-columns: 1fr; } }

/* Week tiles and day tiles are colored differently so they're easy to tell apart while programming, echoing the
   PDF: a week is a slate tile with a dark header bar, a day is a tile with a red header bar. */
.program-editor .program-week { background: rgba(100, 116, 139, 0.16); border-color: rgba(100, 116, 139, 0.6); padding: 0 14px 12px; }
.program-editor .program-week-head { background: #1e293b; margin: 0 -14px; padding: 8px 14px; border-radius: 6px 6px 0 0; }
.program-editor .program-week-head .program-week-name { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
.program-editor .program-week-head .btn-link { color: #cbd5e1; }
.program-editor .program-day { padding: 0 10px 10px; border-color: rgba(165, 42, 52, 0.55); }
.program-editor .program-day .program-session-head { background: var(--dst-red); margin: 0 -10px; padding: 6px 10px; border-radius: 6px 6px 0 0; }
.program-editor .program-day .program-session-name { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.45); }
.program-editor .program-day .program-session-head .btn-link { color: #fff; }

/* superset label that doubles as a picker for moving the exercise to another superset */
/* the exercise label (A1., B2.…): a red box with white text; it opens the menu to move the exercise to another block */
.superset-pick { flex: 0 0 auto; width: 46px; padding: 3px 2px; font-size: 13px; font-weight: 700; color: #fff; background: var(--dst-red); border: 1px solid var(--dst-red); border-radius: 4px; cursor: pointer; text-align: center; text-align-last: center; }
.superset-pick option { color: #fff; background: #1f1f1f; font-weight: 400; }
:root[data-theme="light"] .superset-pick option { color: #111; background: #fff; }
.superset-order { display: inline-flex; flex-direction: column; flex: 0 0 auto; gap: 1px; }
.superset-order button { font-size: 8px; line-height: 1; padding: 2px 4px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); border-radius: 3px; cursor: pointer; }
.superset-order button:hover:not(:disabled) { color: var(--text); border-color: var(--dst-red); }
.superset-order button:disabled { opacity: 0.3; cursor: default; }

/* the week being worked on is outlined; the others dim until clicked */
.program-week { transition: opacity 0.15s, border-color 0.15s; }
.program-week.focused { border: 2px solid var(--dst-red); box-shadow: 0 0 12px rgba(165, 42, 52, 0.25); }
.program-week.dimmed { opacity: 0.45; }
.program-week.dimmed:hover { opacity: 0.7; }
.program-show-all { display: inline-block; }
.program-editor-top .program-show-all { padding: 4px 9px; font-size: 11.5px; }
/* inside a day, the superset being worked on stays bright and the day's other supersets dim */
.program-ex { transition: opacity 0.15s; }
.program-editor .program-ex.set-focused { background: rgba(165, 42, 52, 0.16); border-color: var(--dst-red); }
.program-ex.set-dimmed { opacity: 0.45; }
.program-ex.set-dimmed:hover { opacity: 0.75; }
/* and the other days of that week dim too */
.program-day { transition: opacity 0.15s; }
.program-day.day-dimmed { opacity: 0.45; }
.program-day.day-dimmed:hover { opacity: 0.75; }

/* suggested next phase */
.program-next { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* the suggested-next-program picker filled like the builder's other boxes */
.program-next select { background: #000; color: #fff; border: 1px solid var(--input-border, var(--border)); border-radius: 4px; padding: 4px 6px; font-size: 13px; }
:root[data-theme="light"] .program-next select { background: #fff; color: #111; }
.program-next-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--dst-red); border-radius: 12px; font-size: 12px; }
.program-next-chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0; font-size: 11px; }
.program-chain { margin-top: 6px; font-size: 12px; color: var(--text-dim); }

.program-editor-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.program-editor-top h2 { margin: 0; }
.program-zoom { display: inline-flex; gap: 0; }
.program-zoom .btn { border-radius: 0; margin: 0; padding: 4px 9px; font-size: 11.5px; }
.program-zoom .btn:first-child { border-radius: 6px 0 0 6px; }
.program-zoom .btn:last-child { border-radius: 0 6px 6px 0; }
.program-editor-top .program-pdf select { font-size: 13px; padding: 5px 8px; max-width: 220px; }
.program-pdf { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* the builder's Print / Save PDF: a red button */
.program-pdf .btn.program-pdf-btn, :root[data-theme="light"] .program-pdf .btn.program-pdf-btn { background: var(--dst-red); border-color: var(--dst-red); color: #fff; padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.program-pdf .btn.program-pdf-btn:hover { background: #c0313f; border-color: #c0313f; }
.program-pdf select { font-size: 12px; padding: 3px 5px; max-width: 170px; }
.facility-card-actions { align-items: center; flex-wrap: wrap; }

/* days of a week sit side by side as columns; the row scrolls sideways when there are more than fit */
.program-days { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 10px 0 6px; }
.program-day { flex: 1 0 260px; max-width: 360px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--panel); }
.program-day .program-session-name { width: 100%; min-width: 0; }
/* Every exercise is its own bordered card, so it's clear where A1 ends and A2 begins. Cards in the same
   superset sit close together; a wider gap with a rule above it marks the start of the next superset. */
.program-ex { position: relative; margin-top: 10px; padding: 3px 6px; border: 1px solid rgba(148, 163, 184, 0.55); border-left: 4px solid var(--dst-red); border-radius: 6px; background: rgba(148, 163, 184, 0.08); }
.program-ex::before { content: ""; position: absolute; left: -4px; right: 0; top: -6px; border-top: 2px solid rgba(148, 163, 184, 0.45); }
.program-ex.superset-linked { margin-top: 3px; }
.program-ex.superset-linked::before { display: none; }
.program-warmup + .program-ex { margin-top: 12px; }
.program-warmup + .program-ex::before { display: none; }
.program-ex-top { display: flex; align-items: center; gap: 6px; }
.program-ex-name { flex: 1; min-width: 0; }
.program-ex-nums { display: grid; grid-template-columns: auto auto 56px 56px; justify-content: start; gap: 6px; margin-top: 4px; align-items: center; }
.program-ex-spacer { flex: 1; }
.program-ex-top > .program-ex-name { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font-size: 13px; font-weight: 600; padding: 2px 6px; }
/* wide enough for a name and a whole line of sets, intensity, tempo and rest without wrapping; more days scroll sideways */
.program-editor .program-day { flex: 1 0 400px; max-width: 460px; }
/* Fit week: narrower days (lines may wrap) so seven need less shrinking to fit across */
.program-editor.program-fit .program-day { flex: 1 0 320px; max-width: 420px; }
/* the name as wrapping text while it isn't being edited */
.program-ex-top > .program-ex-name-view { border: 1px solid var(--input-border, var(--border)); border-radius: 4px; background: var(--input-bg, transparent); color: var(--text); cursor: text; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; min-height: 1.3em; }
.program-ex-top > .program-ex-name-view.empty { color: var(--text-dim); font-weight: 400; }
.program-warmup { width: 100%; box-sizing: border-box; margin-top: 6px; font-size: 12px; padding: 4px 6px; resize: vertical; }
.program-warmup:placeholder-shown { height: 26px; min-height: 26px; } /* one line until there is a warm-up to write */
.program-view-warmup { font-size: 13px; margin: 2px 0 6px; white-space: pre-wrap; }
.program-ex-tempo { flex: 0 0 52px; width: 52px; min-width: 0; text-align: center; font-size: 12px; padding: 4px 3px; box-sizing: border-box; }
.program-ex-group { display: flex; flex-wrap: wrap; gap: 4px 3px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
/* one row per line of sets: small boxes for sets, reps and intensity; tempo, rest and the kind of intensity on the first line */
.program-ex-group .pe-num { flex: 0 0 40px; width: 40px; padding: 3px 2px; }
.program-ex-group .pe-sets { flex-basis: 36px; width: 36px; }
.program-ex-group .pe-reps { flex-basis: 48px; width: 48px; }
.program-ex-group .pe-wide { flex-basis: 46px; width: 46px; }
.program-ex-group .pe-gap { margin-left: 6px; }
.program-ex-group .pe-unit { flex: 0 0 auto; width: 48px; font-size: 12px; padding: 3px 1px; }
/* extra boxes (Time, Distance, or one the coach named): a small label before each */
.program-ex-group .pe-xlabel { margin-left: 6px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
/* the "+" at the end of a first line: a menu of what can be added */
.program-ex-group .pe-more { flex: 0 0 26px; width: 26px; height: 24px; padding: 0; margin-left: 4px; appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; font-size: 17px; font-weight: 700; line-height: 1; color: #3b82f6; background: transparent; border: 1px dashed var(--input-border, var(--border)); border-radius: 50%; cursor: pointer; }
.program-ex-group .pe-more option, .program-ex-group .pe-unit option { font-size: 13px; font-weight: 400; color: #fff; background: #1f1f1f; }
:root[data-theme="light"] .program-ex-group .pe-more option, :root[data-theme="light"] .program-ex-group .pe-unit option { color: #111; background: #fff; }
/* the remove buttons in an exercise box: white (dark text in light mode) rather than link blue */
.program-ex .btn-link[title="Remove exercise"], .program-ex .pe-x { color: #fff; text-decoration: none; }
:root[data-theme="light"] .program-ex .btn-link[title="Remove exercise"], :root[data-theme="light"] .program-ex .pe-x { color: #333; }
.program-editor .btn.program-copy-prev-week, :root[data-theme="light"] .program-editor .btn.program-copy-prev-week { margin-left: auto; padding: 2px 8px; font-size: 11px; background: var(--dst-red); border-color: var(--dst-red); color: #fff; }
.program-editor .btn.program-copy-prev-week:hover, :root[data-theme="light"] .program-editor .btn.program-copy-prev-week:hover { background: #c0313f; border-color: #c0313f; }
/* remove week: a white cross (dark in light mode) */
.program-editor .program-week-head .btn-link.program-remove-week { color: #fff; text-decoration: none; font-size: 15px; padding: 0 4px; }
:root[data-theme="light"] .program-editor .program-week-head .btn-link.program-remove-week { color: #333; }
.program-remove-week:disabled { opacity: 0.3; }
/* the warm-up box filled like the sets, reps and other boxes */
.program-editor .program-warmup { background: #000; color: #fff; border: 1px solid var(--input-border, var(--border)); border-radius: 4px; }
:root[data-theme="light"] .program-editor .program-warmup { background: #fff; color: #111; }
.program-ex-group .pe-x { padding: 0 2px; }
.program-ex-group input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 12px; padding: 4px 5px; text-align: center; }
.program-ex-preview { margin-top: 4px; font-size: 12px; color: var(--text-dim); }
/* in the builder the boxes already say it all, so the one-line summary is left out to keep a day short */
.program-editor .program-ex-preview { display: none; }
/* tempo and prescription where a program is read */
.program-tempo { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.program-rx { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.program-rx-group { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0; white-space: nowrap; min-width: 58px; text-align: center; }
.program-rx-reps { font-weight: 600; padding-bottom: 2px; }
.program-rx-weight { width: 100%; min-width: 58px; font-size: 12px; padding: 3px 4px; box-sizing: border-box; text-align: center; border-radius: 0; }
/* intensity under the weight box: the bright cell from the training sheets (blue-tinted on the Cubs theme) */
.program-rx-pct { background: #00ffff; color: #000; font-size: 11px; font-style: italic; padding: 1px 4px; border: 1px solid #111; border-top: none; }
.cubs-theme .program-rx-pct { background: #d6e2f7; }
/* sets to failure (BM / TF): weight and reps reached side by side, with the estimated 1RM underneath */
.program-rx-inputs { display: flex; }
.program-rx-group.failure { min-width: 104px; }
.program-rx-group.failure .program-rx-weight { min-width: 52px; }
.program-rx-got { border-left: none; }
/* a weight worked out from an estimated max, not yet typed over */
.program-rx-weight.auto { font-style: italic; color: var(--text-dim); }
.program-rx-est { font-size: 11px; font-weight: 700; padding-top: 2px; }
.period-maxes { margin: 0 0 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.period-max small { color: var(--text-dim); }
.program-changed { margin-top: 3px; font-size: 11px; color: var(--text-dim); font-style: italic; }
.program-changed .btn-link { margin-left: 8px; font-size: 11px; }
/* ---- Pitching Assessment (pitching_assessment.js); shares the .assess-* styles ---- */
.pa-header-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; }
.pa-plan { margin-top: 0; }
.pa-table { width: 100%; }
.pa-table th.pa-group { background: var(--surface-muted, #2a2a2a); text-align: center; vertical-align: middle; font-weight: 700; width: 18%; }
.pa-table td.pa-test { text-align: left; }
/* each group of checkpoints (Setup & First Move, Back Leg, ...) is outlined in red (Cubs blue on the Cubs theme) */
.pa-table { border-collapse: collapse; }
.pa-table tbody tr.pa-first > * { border-top: 2px solid var(--dst-red); }
.pa-table tbody tr.pa-last > td, .pa-table tbody th.pa-group { border-bottom: 2px solid var(--dst-red); }
.pa-table tbody th.pa-group { border-left: 2px solid var(--dst-red); }
.pa-table tbody tr > td:last-child { border-right: 2px solid var(--dst-red); }
.pa-table th.pa-h-good { background: #2e9e4f; color: #fff; }
.pa-table th.pa-h-issue { background: #e6b800; color: #000; }
.pa-table th.pa-h-flag { background: #c0392b; color: #fff; }
.pa-table td.pa-rate-cell { padding: 2px; width: 44px; text-align: center; }
.pa-rate { width: 100%; min-width: 30px; height: 26px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: #fff; font-weight: 700; cursor: pointer; padding: 0; }
.pa-rate:hover { border-color: var(--text-dim); }
.pa-flags { list-style: none; margin: 0; padding: 0; font-size: 13px; columns: 3 240px; column-gap: 24px; }
.pa-flags li { padding: 4px 0; border-bottom: 1px solid var(--border); break-inside: avoid; }
.pa-flags small { color: var(--text-dim); margin-left: 6px; }
.pa-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid #000; vertical-align: middle; }
.pa-movement { display: grid; grid-template-columns: minmax(220px, 1fr) 1fr; gap: 14px; align-items: start; }
.pa-plot { width: 100%; max-width: 380px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.pa-plot .pa-grid { stroke: var(--border); stroke-width: 0.5; }
.pa-plot .pa-axis { stroke: var(--text-dim); stroke-width: 1; }
.pa-plot .pa-tick, .pa-plot .pa-axis-label, .pa-plot .pa-point-label { fill: var(--text-dim); font-size: 8px; }
.pa-plot .pa-point-label { fill: var(--text); }
.pa-pitches input { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; padding: 3px 4px; }
.pa-pitches td:first-child { text-align: left; white-space: nowrap; }
.pa-pitches td:first-child input { width: calc(100% - 20px); text-align: left; }
.pa-form textarea { width: 100%; box-sizing: border-box; }
.pa-velo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
/* the weekdays share the row and wrap onto a second one when the panel is narrow */
.pa-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.pa-week .field, .pa-velo .field { min-width: 0; }
.pa-week input, .pa-velo input { width: 100%; min-width: 0; box-sizing: border-box; }
.pa-plyos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pa-plyos input { flex: 1 1 160px; }
@media (max-width: 900px) { .pa-movement { grid-template-columns: 1fr; } }
/* Printing (see preparePrint): .pa-printing is on only while a print is prepared. These layout rules are
   deliberately outside @media print, so the page is measured on screen exactly as it will print. */
.pa-wrap.pa-printing .no-print { display: none !important; }
.pa-wrap.pa-printing .print-only-block { display: block; }
.pa-wrap.pa-printing .pa-page { break-inside: avoid; page-break-inside: avoid; }
.pa-wrap.pa-printing .pa-page + .pa-page { break-before: page; page-break-before: always; }
.pa-wrap.pa-printing .panel { break-inside: avoid; margin-bottom: 10px; padding: 10px 12px; }
.pa-wrap.pa-printing .pa-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pa-wrap.pa-printing .pa-movement { grid-template-columns: minmax(220px, 1fr) 1fr; }
.pa-wrap.pa-printing .pa-table th, .pa-wrap.pa-printing .pa-table td, .pa-wrap.pa-printing .pa-table td.pa-rate-cell { padding: 0 4px; font-size: 10px; line-height: 1.25; }
.pa-wrap.pa-printing .pa-rate { height: 12px; min-width: 16px; display: block; font-size: 9px; line-height: 1; }
.pa-wrap.pa-printing .pa-flags { font-size: 10px; }
.pa-wrap.pa-printing .pa-flags li { padding: 1px 0; }
.pa-wrap.pa-printing h2 { font-size: 13px; margin: 0 0 6px; }
.pa-wrap.pa-printing .assess-print-title h1 { font-size: 18px; margin: 0; }
.pa-wrap.pa-printing .assess-print-title { margin-bottom: 6px; }
.pa-wrap.pa-printing .assess-print-logo { display: block; text-align: center; margin-bottom: 6px; }
.pa-wrap.pa-printing .assess-print-logo img { height: 34px; }
@media print {
  .pa-wrap.pa-printing .pa-rate { border-color: #999 !important; }
  .pa-wrap.pa-printing .pa-rate.on { color: #fff !important; }
  .pa-wrap.pa-printing .pa-plot { background: #fff; }
  /* the group names sit on a dark cell: white text there, and keep the Good / Possible Issue / Red Flag header colors */
  .pa-wrap.pa-printing .pa-table th.pa-group { background: #222 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pa-wrap.pa-printing .pa-table thead th.pa-h-good { background: #2e9e4f !important; color: #fff !important; }
  .pa-wrap.pa-printing .pa-table thead th.pa-h-issue { background: #e6b800 !important; color: #000 !important; }
  .pa-wrap.pa-printing .pa-table thead th.pa-h-flag { background: #c0392b !important; color: #fff !important; }
}
/* ---- Throwing Progression (throwing_progression.js): days down the side, weeks across ---- */
.tp-scroll { overflow-x: auto; }
.tp-table { display: table; width: max-content; overflow: visible; border-collapse: collapse; font-size: 13px; }
/* the day names stay put while the weeks scroll sideways */
.tp-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.tp-table tbody tr:hover { background: none; }
.tp-table th { padding: 6px 10px; font-weight: 600; white-space: nowrap; text-align: left; }
.tp-table thead th { border-bottom: 1px solid var(--border); }
.tp-table th.tp-dayname { padding-right: 16px; }
.tp-remove { margin-left: 6px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 0 2px; }
.tp-remove:hover { color: var(--danger, #c0392b); }
.tp-cell { position: relative; min-width: 104px; height: 34px; padding: 0; border: 1px solid var(--border); background: var(--panel-2); }
.tp-cell.low { background: #34a853; }
.tp-cell.med { background: #fbbc04; }
.tp-cell.high { background: #ea4335; }
.tp-day { width: 100%; height: 100%; min-height: 34px; padding: 4px 24px 4px 8px; background: none; border: none; text-align: left; font: inherit; color: #000; cursor: pointer; white-space: nowrap; }
.tp-cell.off .tp-day { color: var(--text-dim); }
.tp-edit { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; background: none; border: none; border-radius: 4px; color: rgba(0, 0, 0, 0.55); cursor: pointer; font-size: 13px; opacity: 0.35; }
.tp-cell.off .tp-edit { color: var(--text-dim); }
.tp-cell:hover .tp-edit, .tp-edit:focus { opacity: 1; background: rgba(255, 255, 255, 0.35); }
.tp-input { width: 100%; height: 100%; min-height: 34px; box-sizing: border-box; border: 2px solid var(--text); border-radius: 0; padding: 2px 6px; font-size: 13px; background: #fff; color: #000; }
/* ACR calculator rows under the grid, and its key */
.tp-table tfoot td { padding: 5px 8px; border: 1px solid var(--border); text-align: left; font-variant-numeric: tabular-nums; }
.tp-table tfoot tr:first-child > * { border-top: 2px solid var(--text-dim); }
.tp-table tr.tp-acr td { font-weight: 700; }
.tp-table tr.tp-acr td.good, .tp-acr-chip.good { background: #34a853; color: #000; }
.tp-table tr.tp-acr td.caution, .tp-acr-chip.caution { background: #fbbc04; color: #000; }
.tp-table tr.tp-acr td.spike, .tp-acr-chip.spike { background: #ea4335; color: #000; }
.tp-table tr.tp-acr td.under, .tp-acr-chip.under { background: #6ea8dc; color: #000; }
.tp-acr-help { margin-top: 16px; font-size: 13px; }
.tp-acr-help p { margin: 4px 0 8px; color: var(--text-dim); max-width: 760px; }
.tp-weights, .tp-acr-key { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tp-weights label { display: inline-flex; align-items: center; gap: 6px; }
.tp-weights input { width: 54px; padding: 2px 4px; text-align: center; background: #fff; color: #000; border: 1px solid #000; }
.tp-acr-chip { padding: 3px 10px; font-size: 12px; }
.tp-about { font-size: 14px; line-height: 1.5; }
.tp-about h3 { font-size: 14px; margin: 14px 0 4px; }
.tp-about p, .tp-about ul { margin: 0 0 8px; max-width: 820px; color: var(--text); }
.tp-about ul { padding-left: 20px; }
.tp-chart-scroll { overflow-x: auto; margin: 6px 0 10px; }
.tp-chart { display: block; max-width: none; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.tp-chart-grid { stroke: var(--border); stroke-width: 1; }
.tp-chart-tick { fill: var(--text-dim); font-size: 10px; }
.tp-chart-line { fill: none; stroke: var(--text); stroke-width: 2; }
.tp-chart-ewma { stroke-dasharray: 5 4; stroke-width: 1.5; }
.tp-chart-value-ewma { font-weight: 400; fill: var(--text-dim); }
.tp-chart-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 4px; }
.tp-chart-legend i { display: inline-block; width: 26px; border-top: 2px solid var(--text); }
.tp-chart-legend i.dashed { border-top-style: dashed; }
.tp-chart-dot { stroke: var(--text); stroke-width: 1.5; }
.tp-chart-value { fill: var(--text); font-size: 10px; font-weight: 700; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.tp-glossary { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; font-size: 13px; }
.tp-key { padding: 3px 10px; color: #000; }
.tp-key.low { background: #34a853; }
.tp-key.med { background: #fbbc04; }
.tp-key.high { background: #ea4335; }
/* pencil at the left of a roster row: opens that row for editing */
.row-edit { background: none; border: none; padding: 2px 6px; margin-right: 6px; cursor: pointer; font-size: 14px; color: var(--text-dim); border-radius: 4px; vertical-align: middle; }
.row-edit:hover, .row-edit:focus { color: var(--text); background: var(--surface-hover, rgba(128, 128, 128, 0.2)); }
/* ---- Training Log (training_log.js): what was actually done, session by session ---- */
.tl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tl-session h2 small { display: block; margin: 2px 0 0; }
.tl-table { display: table; width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-table th, .tl-table td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.tl-table tbody tr:hover { background: none; }
.tl-table tr.tl-first td { border-top: 1px solid var(--text-dim); }
.tl-table td.tl-ex { width: 34%; }
.tl-table td.tl-done { font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-table td.tl-done em { font-weight: 400; color: var(--text-dim); }
.tl-table .tl-none { font-weight: 400; color: var(--text-dim); }
.tl-table td.tl-when { color: var(--text-dim); white-space: nowrap; }
.tl-changed { margin-top: 3px; font-size: 11px; font-style: italic; color: var(--text-dim); }
.tl-changes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tl-changes li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.tl-changes small { display: block; color: var(--text-dim); }
/* the athlete's private phone link on their plan, picked out in gold so it's easy to find */
.panel.athlete-link { background: rgba(240, 192, 64, 0.1); border: 1px solid #d4a72c; border-left: 4px solid #f0c040; }
.panel.athlete-link h2 { color: #f0c040; }
.panel.athlete-link .athlete-link-note { color: #e8c766; }
:root[data-theme="light"] .panel.athlete-link { background: #fff6d6; border-color: #e0b43a; border-left-color: #d49b00; }
:root[data-theme="light"] .panel.athlete-link h2 { color: #8a5f00; }
:root[data-theme="light"] .panel.athlete-link .athlete-link-note { color: #7a5600; }
.athlete-link-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.athlete-link-row input { flex: 1 1 320px; min-width: 0; font-size: 12px; padding: 6px 8px; }
.athlete-link-row a.btn { text-decoration: none; }
.athlete-link-note { margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.rm-chart { border-collapse: collapse; margin: 12px 0; }
.rm-chart th, .rm-chart td { border: 1px solid var(--border); padding: 4px 10px; text-align: center; font-size: 13px; }
.rm-chart input { width: 64px; text-align: center; }
.rm-chart-help { max-width: 720px; color: var(--text-dim); font-size: 13px; }
.program-ex-nums input, .program-ex-nums select, .program-ex-notes { width: 100%; min-width: 0; box-sizing: border-box; font-size: 12px; padding: 4px 5px; }
.program-ex-notes { margin-top: 4px; }
/* sets, reps, intensity, tempo and rest: small boxes (a few characters at most), black in dark mode and white in light mode */
.program-ex-group input, .program-ex-nums input { background: #000; color: #fff; border: 1px solid var(--input-border, var(--border)); border-radius: 4px; text-align: center; }
:root[data-theme="light"] .program-ex-group input, :root[data-theme="light"] .program-ex-nums input { background: #fff; color: #111; }
.program-day-actions { display: flex; gap: 14px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.program-copy-day { margin-left: auto; font-size: 12px; padding: 3px 5px; max-width: 110px; }
.program-add-day { flex: 0 0 auto; align-self: stretch; min-width: 90px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; }
.program-add-day:hover { color: var(--text); border-color: var(--text-dim); }

/* supersets: a linked exercise sits tight under the one above, with a bar tying the group together */
.superset-label { color: var(--dst-red); font-size: 13px; white-space: nowrap; }
.program-ex-row.superset-linked { margin-top: -3px; }
.program-ex-row.superset-linked .superset-label { border-left: 3px solid var(--dst-red); padding-left: 5px; }
.superset-toggle { font-size: 11px; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
.superset-toggle.on { border-color: var(--dst-red); color: var(--dst-red); }
.program-view-table tr.superset-linked td { border-top: none; }
.program-ex-row input, .program-ex-row select { width: 100%; box-sizing: border-box; }
.program-ex-head { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.program-editor .facility-form-actions { flex-wrap: wrap; }

/* a block with a linked program: a small button on the block opens the program */
.period-block-program { margin-left: auto; margin-right: 8px; flex: 0 0 auto; font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.25); color: #fff; cursor: pointer; position: relative; z-index: 2; }
.period-block-program:hover { background: rgba(0, 0, 0, 0.45); }
.period-ro-block[data-has-program] { cursor: pointer; text-decoration: underline dotted; }
.program-modal { user-select: text; text-align: left; }
.program-modal h2 { margin: 0 0 6px; }
.program-modal-pdf { margin: 4px 0 10px; }
.program-modal-desc { color: var(--text-dim); margin: 0 0 10px; white-space: pre-wrap; }
.program-modal-week { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-top: 12px; }
.program-modal-week.current { border-color: var(--dst-red); }
.program-modal-week h3 { margin: 0; font-size: 15px; }
.program-modal-week h3 small { margin-left: 8px; font-weight: 600; color: var(--dst-red); }
.program-assign-list { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; }
.program-assign-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.program-assign-list small { color: var(--text-dim); }
.program-assign-result { margin-top: 12px; font-size: 13px; }

/* Programs by section on an athlete's periodization: section pills, then one tab per block */
/* The program builder under the timeline: set apart from the other sections with a red frame and a tinted top,
   so it reads as the workbook to fill in */
.period-program-tabs { user-select: text; border: 2px solid var(--dst-red); border-top-width: 6px; background: linear-gradient(to bottom, rgba(165, 42, 52, 0.12), rgba(165, 42, 52, 0) 140px), var(--panel); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); }
.period-program-tabs > .ppt-title { font-size: 20px; letter-spacing: 0.02em; }
.period-program-tabs > .ppt-title > span:first-child { text-transform: uppercase; }
.period-program-tabs > .ppt-title small { text-transform: none; letter-spacing: 0; }
.ppt-intro { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 860px; }
.ppt-sections { margin-bottom: 12px; }
.ppt-section { display: inline-flex; align-items: center; gap: 7px; }
.ppt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tab-color); flex: 0 0 auto; }
.ppt-section.active .ppt-dot { background: #fff; }
/* phase tabs: each in its block's color; the open one filled in that color, a phase with no program outlined */
.ppt-blocks { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 0; border-bottom: 3px solid var(--tab-line, var(--dst-red)); margin-bottom: 14px; }
.ppt-block { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 120px; padding: 7px 14px 8px; border: 1px solid color-mix(in srgb, var(--tab-color) 55%, transparent); border-top: 5px solid var(--tab-color); border-bottom: none; border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--tab-color) 14%, transparent); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: background 0.12s, transform 0.12s; }
.ppt-block strong { font-size: 14px; }
.ppt-block small { font-size: 11px; color: var(--text-dim); }
.ppt-block:hover { background: color-mix(in srgb, var(--tab-color) 26%, transparent); }
.ppt-block.active { background: var(--tab-color); border-color: var(--tab-color); color: #fff; transform: translateY(-3px); box-shadow: 0 4px 12px color-mix(in srgb, var(--tab-color) 45%, transparent); }
.ppt-block.active small { color: rgba(255, 255, 255, 0.85); }
.ppt-block.empty { background: transparent; border-style: dashed; border-top-style: solid; }
.ppt-block.empty.active { background: color-mix(in srgb, var(--tab-color) 70%, transparent); border-style: solid; }
.ppt-block-top { display: flex; align-items: center; gap: 6px; width: 100%; }
.ppt-block-no { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tab-color); color: #fff; font-size: 11px; font-weight: 700; }
.ppt-block.active .ppt-block-no { background: #fff; color: var(--tab-color); }
.ppt-now { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--dst-red); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--dst-red); }
.ppt-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ppt-individualize { flex: 0 0 auto; }
.ppt-weekview, .ppt-printall { flex: 0 0 auto; }
.ppt-title > span:first-child { margin-right: auto; }
.ppt-weekview.active { border-color: var(--accent); }
.ppt-print-note { margin: -4px 0 8px; }
/* the week at a glance: one column per row of the chart, lined up by day number */
.ppt-combined { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.ppt-combined-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ppt-combined-bar small { color: var(--text-dim); }
.ppt-combined-bar .btn { padding: 2px 10px; min-width: 0; }
.ppt-combined-scroll { overflow-x: auto; }
.ppt-combined-grid { display: grid; gap: 6px; align-items: stretch; }
.ppt-combined-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 8px; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 6px; background: none; color: inherit; cursor: pointer; font: inherit; }
.ppt-combined-head span { font-size: 13px; }
.ppt-combined-head small { font-size: 11px; color: var(--text-dim); }
.ppt-combined-day { font-size: 12px; font-weight: 700; color: var(--text-dim); padding-top: 6px; }
.ppt-combined-cell { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; min-height: 28px; }
.ppt-combined-sname { font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.ppt-combined-ex { padding: 2px 0; }
.ppt-combined-ex small { display: block; color: var(--text-dim); font-size: 11px; }
.ppt-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.ppt-app-note { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #4caf6a; background: rgba(76, 175, 106, 0.1); border-radius: 0 6px 6px 0; font-size: 13px; }
/* Insert existing program: a black search box (white in light mode) with a magnifying glass */
.program-search { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 32px; min-width: 240px; background: #000; color: var(--text-dim); border: 1px solid var(--input-border, var(--border)); border-radius: 6px; }
.program-search input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: #fff; font: inherit; font-size: 13px; padding: 0; }
:root[data-theme="light"] .program-search { background: #fff; }
:root[data-theme="light"] .program-search input { color: #111; }
.period-lane-name { cursor: pointer; }
.ppt-suggest { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; }
.ppt-empty { padding: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.ppt-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ppt-program-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ppt-program-head > strong { font-size: 16px; }
.ppt-program-head small { color: var(--text-dim); }
.ppt-program-head .ppt-actions { margin-left: auto; }
.period-program-tabs .program-editor { margin-top: 4px; }

/* A program week shown on the player plan (the block's attached program) */
.period-programs { user-select: text; }
.period-program + .period-program { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.period-program h3 { margin: 0 0 8px; font-size: 15px; }
.period-program h3 small { font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.program-view-session { margin-top: 10px; }
.program-view-session h4 { margin: 0 0 4px; font-size: 13px; }
.program-view-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.program-view-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-dim); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); }
.program-view-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.program-view-empty { font-size: 12px; color: var(--text-dim); }

/* Cubs player plan: Off-Season Training Facility and Programming by sit side by side */
.offseason-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.offseason-row > .panel { margin-bottom: 16px; }
@media (max-width: 700px) { .offseason-row { grid-template-columns: 1fr; } }

/* opening sentence of the Action Plan (facility / contact), set above the plan text */
.action-lead { margin: 0 0 10px; font-weight: 600; }

/* Off-season facility directory (Facilities tab + the athlete's facility picker) */
.facility-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.facility-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.facility-field.wide { grid-column: 1 / -1; }
.facility-field > span { font-size: 12px; color: var(--text-dim); }
.facility-field input,
.facility-field textarea { width: 100%; box-sizing: border-box; }
.facility-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
@media (max-width: 700px) { .facility-form-grid { grid-template-columns: 1fr; } }

.facility-details { margin-top: 8px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.facility-details a { color: var(--dst-red); }
.facility-notes { white-space: pre-wrap; color: var(--text-dim); margin-top: 4px; }
.facility-note { margin-top: 8px; font-size: 12px; color: var(--text-dim); }

.facility-toolbar { display: flex; gap: 12px; align-items: center; margin: 12px 0 16px; flex-wrap: wrap; }
.facility-search { flex: 1; min-width: 200px; }
.facility-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.facility-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; background: var(--panel); }
.facility-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 16px; }
.facility-used { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.facility-athletes { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.facility-athletes > span { color: var(--text-dim); }
.facility-card-actions { display: flex; gap: 14px; margin-top: 10px; }

/* Leaflet map on the Facilities page. Its panes need their own stacking context so they stay under the app's top bar. */
.facility-map { height: 420px; width: 100%; border-radius: 8px; border: 1px solid var(--border); position: relative; z-index: 0; margin-top: 12px; }
.facility-map-note { font-size: 12px; color: var(--text-dim); margin: 6px 0 4px; }
.cmj-mini .profile-controls { margin-bottom: 6px; }
.cmj-mini .profile-row { grid-template-columns: minmax(110px, 1.3fr) minmax(70px, 0.9fr) 1.2fr 46px; gap: 6px; font-size: 11px; }
.cmj-mini .profile-head { font-size: 9px; }
.cmj-mini .norm-bar-wrap { gap: 4px; }

/* Click-to-enlarge charts */
.zoom-chart { cursor: zoom-in; }
.zoom-overlay {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.zoom-modal {
  position: relative; width: min(1100px, 100%); max-height: 92vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px 12px;
}
.zoom-close {
  position: absolute; top: 6px; right: 12px; background: none; border: none;
  color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer;
}
.zoom-close:hover { color: var(--text); }
@media print { .zoom-overlay { display: none !important; } }

/* First-login welcome popup */
.welcome-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.welcome-card { background: var(--panel, #151515); border: 1px solid var(--border, #2a2a2a); border-radius: 12px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; }

/* Percentile Rankings panel (Statcast tab) — styled after Baseball Savant's own percentile chart:
   a diverging blue/grey/red bar with a circular badge at the percentile position, plus a 3-year
   trend sparkline off to the side of each row. Offense/Defense/Baserunning sit side by side (each
   its own column) and rows are kept compact so the whole thing fits without scrolling. */
.percentile-legend-bar { display: flex; justify-content: center; gap: 28px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; margin: 2px 0 12px; }
.percentile-legend-poor { color: #3b5fc4; }
.percentile-legend-avg { color: var(--text-dim); }
.percentile-legend-great { color: #c42e2e; }
.percentile-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; align-items: start; }
.percentile-group h3 { margin: 0 0 6px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.percentile-row { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 10.5px; }
.percentile-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.percentile-track { position: relative; height: 14px; }
.percentile-track-line {
  position: absolute; top: 50%; left: 0; right: 0; height: 0; transform: translateY(-50%);
  border-top: 2px dashed #3a4a44;
}
.percentile-fill { position: absolute; top: 50%; left: 0; height: 6px; transform: translateY(-50%); border-radius: 999px; }
.percentile-badge {
  position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.percentile-nodata { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-dim); }
.trend-spark { position: relative; display: block; }
.trend-spark svg { display: block; overflow: visible; }
.trend-tooltip {
  position: absolute; transform: translate(-50%, calc(-100% - 8px)); z-index: 50; pointer-events: none;
  background: var(--panel); border: 1px solid var(--input-border); border-radius: 6px; padding: 4px 8px;
  font-size: 11px; color: var(--text); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.percentile-trend-empty { display: block; text-align: center; color: var(--text-dim); }

/* MLB Research Tool summary cards (3-year trend + year-over-year ticker) */
.research-stat-row-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 10px; }
.research-stat-card { background: var(--panel-2, #1c1c1c); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.research-stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.research-stat-value { font-size: 20px; font-weight: 700; margin-top: 4px; }
.research-stat-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Positional CMJ profile (Performance Metrics tab) */
.profile-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; font-size: 12px; }
.profile-controls select { margin-left: 4px; }
.profile-layout { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .profile-layout { grid-template-columns: 1fr; } }
.profile-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(100px, 0.8fr) 1.1fr 64px; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid #222; font-size: 12px; }
.profile-head { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: #333; }
.profile-head small { text-transform: none; letter-spacing: 0; display: block; }
.profile-subhead { margin-top: 12px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.profile-subhead small { text-transform: none; letter-spacing: 0; }
.profile-metric em { color: var(--text-dim); font-style: normal; font-size: 10px; }
.profile-value { font-family: monospace; font-size: 11.5px; }
.norm-bar-wrap { display: flex; align-items: center; gap: 6px; }
.norm-bar { position: relative; flex: 1; height: 10px; border-radius: 999px; background: #222; overflow: visible; }
.norm-zone { position: absolute; top: 0; bottom: 0; }
.norm-bar .norm-zone:first-child { border-radius: 999px 0 0 999px; }
.norm-tick { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, 0.25); }
.norm-marker { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); z-index: 1; }
.norm-marker-sm { width: 9px; height: 9px; border-width: 1.5px; }
.norm-range-band { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: rgba(255, 255, 255, 0.35); }
.norm-pct { width: 56px; text-align: right; font-size: 11px; font-weight: 700; font-family: monospace; color: var(--text); }
.norm-bar-empty { font-size: 10px; color: var(--text-dim); text-align: center; }
.profile-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: 11px; }
.profile-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.profile-recs { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.profile-recs li { background: var(--panel-2, #1c1c1c); border-left: 3px solid var(--info); border-radius: 6px; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
@media (max-width: 700px) {
  .profile-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .profile-row > *:nth-child(3), .profile-row > *:nth-child(4) { grid-column: 1 / -1; }
  .profile-head span:nth-child(n+3) { display: none; }
}

/* pencil at the top left of a player card, and the small form it opens over the card */
.player-card { position: relative; }
.card-edit { position: absolute; top: 6px; left: 6px; background: none; border: none; padding: 2px 6px; cursor: pointer; font-size: 14px; color: var(--text-dim); border-radius: 4px; }
.card-edit:hover, .card-edit:focus { color: var(--text); background: var(--surface-hover, rgba(128, 128, 128, 0.2)); }
.card-edit-form { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--panel); border-radius: 10px; cursor: default; text-align: left; overflow-y: auto; }
.card-edit-form input, .card-edit-form select { width: 100%; box-sizing: border-box; }
.card-edit-actions { display: flex; gap: 14px; justify-content: flex-end; margin-top: auto; }
.tl-badge { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.tl-badge.marked { background: #2e9e4f; color: #fff; }
.tl-badge.weights { background: var(--surface-muted, #2a2a2a); color: var(--text-dim); border: 1px solid var(--border); }
/* Training Log calendar: a month, Monday first, a tag for each thing done that day; the picked day's detail below */
.tl-layout { margin: 0 8px 0 0; }
.tl-cal-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-cal-head h2 { margin: 0; flex: 1; min-width: 200px; text-align: center; }
.tl-cal-head .btn { padding: 4px 12px; font-size: 16px; }
.tl-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tl-cal-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); text-align: center; padding: 2px 0; }
.tl-cal-day { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 84px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); text-align: left; font: inherit; cursor: default; overflow: hidden; }
.tl-cal-day.has { cursor: pointer; }
.tl-cal-day.has:hover { border-color: var(--text-dim); }
.tl-cal-day.out { opacity: 0.4; }
.tl-cal-day.today .tl-cal-num { background: var(--dst-red); color: #fff; border-radius: 10px; padding: 0 6px; }
.tl-cal-day.on { border-color: var(--dst-red); box-shadow: 0 0 0 1px var(--dst-red) inset; }
.tl-cal-day:disabled { color: var(--text); }
.tl-cal-num { align-self: flex-start; font-size: 12px; font-weight: 700; }
.tl-cal-tag { display: block; padding: 1px 5px; border-radius: 4px; font-size: 11px; line-height: 1.35; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-cal-more { font-size: 10px; color: var(--text-dim); }
.tl-cal-tag.lift, .tl-cal-dot.lift { background: #b5283a; }
.tl-cal-tag.speed, .tl-cal-dot.speed { background: #2563eb; }
.tl-cal-tag.vitruve, .tl-cal-dot.vitruve { background: #7c3aed; }
.tl-cal-tag.test, .tl-cal-dot.test { background: #0f8a5f; }
.tl-cal-key { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.tl-cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 700px) {
  .tl-cal-day { min-height: 56px; padding: 3px; }
  .tl-cal-tag { font-size: 0; height: 6px; padding: 0; }
}
@media print { .tl-cal { display: none; } }

/* ---- Tabs on a player's profile: one row of folder-style tabs. Red for DST, Cubs blue on a Cubs-only
   player's profile (--dst-red follows the theme). The open tab is white with its text in that color. ---- */
.profile-tabs { flex-wrap: nowrap; gap: 3px; align-items: stretch; margin-bottom: 18px; border-bottom: 3px solid var(--dst-red); }
.profile-tabs .pill-tab {
  flex: 1 1 0; min-width: 0;
  padding: 9px 6px; font-size: 12.5px; line-height: 1.2; text-align: center; white-space: normal;
  border-radius: 8px 8px 0 0; border: 1px solid var(--dst-red); border-bottom: none;
  background: var(--dst-red); color: #fff;
}
/* the tabs inside Assessments (Biomechanical, Body Composition, Pitching): a smaller row under the profile tabs */
.profile-subtabs { display: flex; gap: 6px; margin: -10px 0 16px; padding: 0 2px; }
.profile-subtabs .pill-tab { padding: 6px 14px; font-size: 12.5px; }
.profile-tabs .pill-tab:hover { filter: brightness(1.15); }
.profile-tabs .pill-tab.active { background: #fff; color: var(--dst-red); font-weight: 700; filter: none; }

/* ---- Light mode: the header and footer bars turn light too, and DST logos switch to the charcoal one ---- */
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .bottom-menu {
  background: #ffffff;
  --text: #1a1a1a;
  --text-dim: #666666;
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .brand span { color: #666666; }
:root[data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.05); border-color: #c7cbd1; color: #1a1a1a; }
/* the Player Plan header carries both logos; on the light theme the white one would vanish */
:root[data-theme="light"] .ph-right img.ph-logo-screen { display: none; }
:root[data-theme="light"] .ph-right img.ph-logo-print { display: block; }

/* ---- Header layout: the account controls (theme toggle, email, Help, Log out) always sit in the upper right,
   with the navigation under them, so they hold the same spot on every page instead of wrapping around. ---- */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "brand account" "brand nav";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}
.topbar .brand { grid-area: brand; }
.topbar .topbar-account { grid-area: account; justify-self: end; }
.topbar .nav-tabs { grid-area: nav; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr; grid-template-areas: "account" "brand" "nav"; }
  .topbar .nav-tabs { justify-self: start; justify-content: flex-start; }
}
:root[data-theme="light"] .nav-tabs { background: rgba(0, 0, 0, 0.05); border-color: #dcdfe4; }

/* ---- Equipment access and the equipment check (remote athletes; see equipment.js) ---- */
.eq-note { color: var(--text-dim); font-size: 13px; margin: 0 0 10px; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.eq-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; }
.eq-item.on { border-color: var(--dst-red); font-weight: 600; }
.eq-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--dst-red); }
.eq-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.eq-panel textarea { width: 100%; box-sizing: border-box; }
.eq-flags { margin: 0 0 14px; padding: 10px 14px; border: 1px solid #e6b800; border-left-width: 5px; border-radius: 8px; background: rgba(230, 184, 0, 0.1); font-size: 13px; }
.eq-flags.eq-flags-ok { border-color: #2e9e4f; background: rgba(46, 158, 79, 0.1); }
.eq-flags.eq-flags-off { border-color: var(--border); background: none; color: var(--text-dim); }
.eq-flags ul { list-style: none; margin: 8px 0 0; padding: 0; }
.eq-flags li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.eq-flag-name { font-weight: 700; }
.eq-flag-need { color: var(--text-dim); }
.eq-flag-actions, .eq-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.eq-change input { min-width: 220px; padding: 5px 8px; font-size: 13px; }
.eq-change em { color: var(--text-dim); flex-basis: 100%; text-align: right; }
.exercise-equipment-hint { display: block; margin: 2px 0 6px; color: var(--text-dim); font-size: 12px; }
.eq-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eq-custom input { flex: 1 1 220px; max-width: 320px; }
.eq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border: 1px solid var(--dst-red); border-radius: 999px; font-size: 13px; font-weight: 600; }
.eq-chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.eq-chip button:hover { color: var(--danger, #c0392b); }
.eq-item-custom span { flex: 1; }
.eq-item-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.eq-item-remove:hover { color: var(--danger, #c0392b); }
.eq-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.eq-add input { flex: 1 1 220px; max-width: 320px; }
.eq-group { margin-top: 16px; }
.eq-group h3 { font-size: 14px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.eq-group h3 small { font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.eq-item span { flex: 1; }
.eq-yards { flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: var(--text-dim); }
.eq-yards input { width: 58px; padding: 3px 5px; font-size: 12px; text-align: center; }

/* ---- Holiday colors (see holiday.js): only while <html data-holiday> is set, which is on the holiday itself.
   --hol-1 is the day's main color, --hol-2 its second and --hol-3 its third. ---- */
:root[data-holiday], :root[data-holiday] .cubs-theme { --dst-red: var(--hol-1); --primary: var(--hol-1); }
/* the header and footer rules become a three-color stripe */
:root[data-holiday] .topbar, :root[data-holiday] .topbar.cubs-theme { border-bottom: 5px solid; border-image: linear-gradient(90deg, var(--hol-1) 0 33.3%, var(--hol-3) 33.3% 66.6%, var(--hol-2) 66.6% 100%) 1; }
:root[data-holiday] .bottom-menu { border-top: 5px solid; border-image: linear-gradient(90deg, var(--hol-2) 0 33.3%, var(--hol-3) 33.3% 66.6%, var(--hol-1) 66.6% 100%) 1; }
:root[data-holiday] .topbar .nav-tab.active, :root[data-holiday] .topbar.cubs-theme .nav-tab.active { background: var(--hol-1); }
/* profile tabs alternate between the two colors; the open one stays white */
:root[data-holiday] .profile-tabs { border-bottom-color: var(--hol-1); }
:root[data-holiday] .profile-tabs .pill-tab:nth-child(even):not(.active) { background: var(--hol-2); border-color: var(--hol-3); }
/* the holiday greeting as a banner across the top of the dashboard: the day's main color with its second color
   at both ends and a rule in the third underneath */
.holiday-banner {
  padding: 12px 16px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; line-height: 1.15;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  background: linear-gradient(90deg, var(--hol-2) 0 14%, var(--hol-1) 14% 86%, var(--hol-2) 86% 100%);
  border-bottom: 4px solid var(--hol-3);
}
@media (max-width: 760px) { .holiday-banner { font-size: 18px; letter-spacing: 2px; padding: 9px 12px; } }
/* KPI results on the Training Log */
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tl-kpi h3 { font-size: 15px; margin: 0 0 6px; }
.tl-kpi h3 small { font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.tl-kpi-chart { display: block; width: 100%; max-width: 360px; height: auto; margin-bottom: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.tl-kpi-chart polyline { fill: none; stroke: var(--text); stroke-width: 1.5; }
.tl-kpi-chart circle { fill: var(--text-dim); }
.tl-kpi-chart circle.best { fill: var(--dst-red); stroke: var(--text); stroke-width: 1; }
/* Assign a program to a speed group (Programs → Assign) */
.group-assign { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.group-assign > span { color: var(--text-dim); }
.group-assign-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.group-assign-row select, .group-assign-row input { height: 36px; padding: 0 10px; min-width: 220px; }
.group-assign-list { list-style: none; margin: 0; padding: 0; }
.group-assign-list li { padding: 4px 0; }
.btn.btn-assign { font-weight: 700; background: var(--dst-red); border-color: var(--dst-red); color: #fff; }
.btn.btn-assign:hover:not(:disabled) { filter: brightness(1.12); }
.facility-card-actions .btn.btn-assign { padding: 6px 14px; }
/* Coach Mode switch (bottom menu): flips on, then opens Coach Mode */
.coach-switch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text); cursor: pointer; }
.coach-switch:hover { border-color: var(--text-dim); }
.coach-switch-label { font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.coach-switch-track { position: relative; flex: 0 0 46px; width: 46px; height: 24px; border-radius: 12px; background: #555; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); transition: background 0.25s; }
.coach-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: transform 0.25s; }
.coach-switch.on .coach-switch-track { background: var(--dst-red, #c8102e); }
.coach-switch.on .coach-switch-knob { transform: translateX(22px); }

/* ---- Phones ------------------------------------------------------------------------------------------
   The dashboard is laid out for a desktop; these rules stop the parts that get scrunched on a phone from
   being squeezed or running off the side. Nothing here applies above 640px. */
html { background: var(--bg); } /* the page's shading stopped one screen down, leaving a band on long pages */
@media (max-width: 640px) {
  /* the header: smaller logo and title, the account line allowed to wrap, menu buttons sharing the width */
  .topbar { padding: 10px 14px; row-gap: 8px; }
  .topbar .brand { min-width: 0; }
  .topbar .brand > div { min-width: 0; }
  .topbar .brand-logo { height: 30px; flex: 0 0 auto; }
  /* the page title on one line beside the logo, sized to the phone, rather than wrapping onto two */
  .topbar .brand h1 { font-size: clamp(13px, 4.1vw, 17px); line-height: 1.15; white-space: nowrap; letter-spacing: 0; }
  .topbar .brand span { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-account { flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; }
  .topbar-account-email { overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
  .topbar .nav-tabs { width: 100%; box-sizing: border-box; }
  .topbar .nav-tab { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; text-align: center; }

  /* less padding everywhere, so content gets the width */
  .main { padding: 14px 12px 32px; box-sizing: border-box; }
  .panel { padding: 14px 12px; }
  .panel h2 small { display: block; margin: 3px 0 0; }

  /* count cards two to a row instead of one tall card each */
  .kpi-row, .location-kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { padding: 10px 12px; min-width: 0; }
  .kpi-card .label { font-size: 10.5px; }
  .kpi-card .value { font-size: 20px; margin-top: 3px; overflow-wrap: anywhere; }
  .kpi-card .value a { font-size: 13px; }

  /* roster filters: each a full half, not ragged */
  .controls, .controls-right { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch; }
  .controls input, .controls select { width: 100%; min-width: 0; box-sizing: border-box; }
  .controls input { grid-column: 1 / -1; }

  /* a player's page: name block on its own lines, buttons under it */
  .detail-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .detail-header .who { flex-wrap: wrap; gap: 10px; }
  .detail-header .who > div:not(.jersey) { flex: 1 1 180px; min-width: 0; }
  .detail-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .detail-header > div:last-child .btn { flex: 1 1 auto; }

  /* the profile tabs: four to a row with their full names, instead of eight slivers */
  .profile-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border-bottom-width: 3px; }
  .profile-tabs .pill-tab { padding: 8px 2px; font-size: 11.5px; border-radius: 6px; border-bottom: 1px solid var(--dst-red); min-height: 44px; }

  /* Player Plan header: photo and name on top, the jump profile under them at full width */
  .period-header { grid-template-columns: 1fr; gap: 14px; padding: 16px 12px; }
  .ph-center h1 { font-size: 22px; }
  .ph-pics { flex-direction: column; align-items: center; gap: 12px; }
  .ph-pics .ph-team { display: none; } /* the big team logo only crowds the photo here; the team name is under it */
  .ph-left { align-items: center; width: 100%; }
  .ph-extra { width: 100%; min-width: 0; margin: 0; }
  .ph-right { justify-self: center; }
  .ph-right img { max-width: 60%; height: auto; }
  .ph-name { font-size: 22px; }
  .cmj-mini .profile-controls { flex-wrap: wrap; }
  .cmj-mini .profile-controls select { max-width: 100%; }

  /* anything laid out in several columns goes to one */
  .facility-form-grid, .profile-layout, .offseason-row { grid-template-columns: 1fr; }
  .program-editor-top, .facility-form-actions, .tl-actions { flex-wrap: wrap; }
  .program-editor-top .btn { flex: 1 1 100%; }

  /* the bottom menu: its items share the width */
  .bottom-menu { flex-wrap: wrap; gap: 8px; padding-left: 12px; padding-right: 12px; }
}
/* "+ New program": the choice between a blank program and a copy of an existing one */
.new-program-choice { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--dst-red); border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.new-program-choice > span { color: var(--text-dim); }
.new-program-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.new-program-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.new-program-list button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; }
.new-program-list button:hover { border-color: var(--dst-red); }
.new-program-list small { display: block; color: var(--text-dim); font-size: 11.5px; }
/* Search boxes everywhere: a magnifying glass at the left, a bit taller, and see-through instead of filled grey */
input[placeholder^="Search"] {
  height: 42px; box-sizing: border-box; padding: 0 12px 0 40px; font-size: 15px; color: var(--text);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 13px center / 17px 17px;
  border: 1px solid var(--text-dim); border-radius: 8px;
}
input[placeholder^="Search"]::placeholder { color: var(--text-dim); }
input[placeholder^="Search"]:focus { outline: none; border-color: var(--dst-red); }
.new-program-choice .facility-search { flex: 0 0 42px; } /* in a column, "flex: 1" would squash its height */
/* the drop-downs beside a search box match it: same height, outlined, no grey fill */
.facility-toolbar select { height: 42px; box-sizing: border-box; padding: 0 10px; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--text-dim); border-radius: 8px; }
.facility-toolbar select:focus { outline: none; border-color: var(--dst-red); }
/* folder names stay on one line (the cards are wide enough for "Re-Education" and its count) */
.program-folder > :not(small):not(.program-folder-icon) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* small grey buttons, for the actions that appear when programs are ticked */
.btn.btn-small-grey { padding: 5px 12px; font-size: 12.5px; font-weight: 600; background: #4a4d52; border-color: #5c6066; color: #fff; }
.btn.btn-small-grey:hover { background: #5c6066; }
:root[data-theme="light"] .btn.btn-small-grey { background: #e3e5e8; border-color: #c9ccd1; color: #222; }
:root[data-theme="light"] .btn.btn-small-grey:hover { background: #d5d8dc; }
/* Program builder: the name and description boxes look like the exercise-name boxes (outlined, no grey fill,
   bold text), and their labels are full-strength text (white in dark mode) instead of dimmed */
.program-editor .facility-form-grid .facility-field > span { color: var(--text); }
.program-editor .facility-form-grid input:not([type="checkbox"]),
.program-editor .facility-form-grid textarea {
  box-sizing: border-box; padding: 6px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text);
  background: transparent; border: 1px solid var(--input-border, var(--border)); border-radius: 4px;
}
.program-editor .facility-form-grid input::placeholder, .program-editor .facility-form-grid textarea::placeholder { color: var(--text-dim); font-weight: 400; }
.program-editor .facility-form-grid input:focus, .program-editor .facility-form-grid textarea:focus { outline: none; border-color: var(--dst-red); }
/* Program builder: tick boxes on days and exercises for copy and paste, and the bar that appears with them */
.program-tick { flex: 0 0 auto; width: 17px; height: 17px; margin: 0 6px 0 0; accent-color: var(--dst-red); cursor: pointer; }
.program-session-head .program-tick { accent-color: #fff; }
.program-clipbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--dst-red); border-radius: 8px; background: var(--panel); font-size: 13px; }
.program-clipbar span { color: var(--text-dim); }
.program-tick-block { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 0 0; padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.program-tick-block input { width: 15px; height: 15px; margin: 0; accent-color: var(--dst-red); }
/* the two add buttons under a day are stacked: add to the last block on top, start a new block under it */
/* Add B Block: a red + just below the day, with its words beside it */
.program-editor .program-day { position: relative; padding-bottom: 16px; }
.program-editor .program-days { padding-bottom: 38px; }
.program-editor .program-day-actions { position: absolute; left: 6px; top: calc(100% + 7px); margin: 0; z-index: 2; }
.program-add-block { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 0; border: none; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.program-add-block-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dst-red); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.program-add-block:hover .program-add-block-plus { background: #c0313f; }
/* "Add A2.": red, small, under the left of its block over the line between blocks, so it adds almost no height */
.program-editor .btn.program-add-to-block, :root[data-theme="light"] .program-editor .btn.program-add-to-block { display: block; width: max-content; margin: 2px auto -9px 4px; position: relative; z-index: 1; padding: 1px 8px; font-size: 10.5px; line-height: 1.4; min-height: 0; background: var(--dst-red); border-color: var(--dst-red); color: #fff; }
.program-editor .btn.program-add-to-block:hover, :root[data-theme="light"] .program-editor .btn.program-add-to-block:hover { background: #c0313f; border-color: #c0313f; }
.program-add-notes { display: inline-block; margin-top: 6px; font-size: 12px; }
/* Program builder: dragging a day by its grip to reorder */
.program-day-grip { flex: 0 0 auto; margin-right: 6px; padding: 0 2px; font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.8); cursor: grab; user-select: none; }
.program-day-grip:active { cursor: grabbing; }
.program-editor .program-day.day-drop-over { outline: 3px dashed var(--text); outline-offset: 2px; }
/* "+ Add week" matches "+ Add day": a dashed outlined box, here running the full width under the last week */
.program-add-week { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 16px; padding: 14px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--text-dim); font: inherit; cursor: pointer; }
.program-add-week:hover { color: var(--text); border-color: var(--text-dim); }
/* "+ Add week": same full-width box, now solid red */
.program-add-week { border: 1px solid var(--dst-red); background: var(--dst-red); color: #fff; font-weight: 700; }
.program-add-week:hover { color: #fff; border-color: var(--dst-red); filter: brightness(1.12); }
/* the copy-and-paste tick boxes: smaller, and an outline with no fill until ticked */
.program-tick {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin: 0 6px 0 0; padding: 0; box-sizing: border-box;
  border: 1.5px solid var(--text-dim); border-radius: 3px; background: transparent no-repeat center / 9px 9px;
}
.program-tick:hover { border-color: var(--text); }
.program-tick:checked {
  border-color: var(--dst-red); background-color: var(--dst-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-6'/%3E%3C/svg%3E");
}
.program-tick:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* on a day's red header the box is white-outlined, and white with a red tick once ticked */
.program-session-head .program-tick { border-color: rgba(255, 255, 255, 0.85); }
.program-session-head .program-tick:checked {
  border-color: #fff; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23a52a34' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-6'/%3E%3C/svg%3E");
}
/* Tags on a program: chips with a small x, and the "+ Add tags" link and its box */
.program-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.program-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--dst-red); border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.program-tag button { padding: 0 4px; border: none; background: none; color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer; }
.program-tag button:hover { color: var(--text); }
.program-add-tags { font-size: 12px; }
.program-tags .btn-link.program-add-tags { padding: 2px 10px; border: 1px dashed var(--text-dim); border-radius: 12px; color: var(--text); text-decoration: none; } /* an outlined pill, not a link */
.program-add-desc { font-size: 12px; color: var(--text); padding: 0; }
/* asked after changing an exercise that sits in the same spot in other weeks */
.program-swap-ask { max-width: 460px; }
.program-swap-ask p { font-size: 14px; line-height: 1.45; }
.program-swap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.program-tags .program-tag-input { height: 28px; min-width: 190px; padding: 0 8px; font-size: 13px; font-weight: 400; color: var(--text); background: transparent; border: 1px solid var(--text-dim); border-radius: 6px; }
/* Vitruve: the import preview on the Training Log, and a day of imported data */
.vit-preview { flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid var(--dst-red); border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.vit-file { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.vit-file > span { color: var(--text-dim); }
.vit-file .vit-warn { color: #e6b800; }
.vit-file .facility-form-grid { margin: 0; }
.vit-check { display: flex; align-items: center; gap: 8px; }
.vit-ex h3 { margin: 12px 0 4px; font-size: 14px; }
.vit-scroll { overflow-x: auto; }
.vit-table { width: auto; min-width: 50%; }
.vit-table th, .vit-table td { white-space: nowrap; text-align: right; }
.vit-table th:first-child, .vit-table td:first-child { text-align: left; }
.vit-table tr.vit-avg td { border-top: 1px solid var(--text-dim); font-weight: 700; color: var(--text-dim); }
/* the Active / Inactive badge is a button: clicking it flips the player's status */
.badge.status-toggle { border: 1px solid transparent; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.badge.status-toggle:hover { border-color: currentColor; filter: brightness(1.15); }
.row-status { margin-left: 8px; vertical-align: middle; }
/* Import Athletes: paste a sheet or choose a CSV, then check the rows */
.import-athletes-closed { display: inline-flex; align-items: flex-start; gap: 10px; margin-left: 8px; }
.import-athletes textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 13px; padding: 8px; color: var(--text); background: transparent; border: 1px solid var(--text-dim); border-radius: 6px; }
.import-athletes-preview { margin-top: 12px; max-height: 360px; overflow: auto; }
.import-athletes-preview small { color: var(--warn); }
.program-pdf-note { display: block; flex: 1 1 100%; margin-top: 4px; font-size: 12px; color: var(--text-dim); }
/* Manual body comp sheet (Body Composition tab) */
.bcs-form h3 { margin: 16px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dst-red); }
.bcs-form h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); }
.bcs-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.bcs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 26px; }
.bcs-grid.bcs-two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bcs-row { display: grid; grid-template-columns: 1fr 96px 62px; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.bcs-row > span { color: var(--text); }
.bcs-row input, .bcs-row select { width: 100%; box-sizing: border-box; height: 30px; padding: 0 6px; font: inherit; font-size: 13px; color: var(--text); background: transparent; border: 1px solid var(--text-dim); border-radius: 4px; }
.bcs-top .bcs-row { grid-template-columns: 90px 1fr; }
.bcs-row em { font-style: normal; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.bcs-out b { text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.bcs-hint { margin: 4px 0; font-size: 11px; color: var(--text-dim); }
.bcs-scroll { overflow-x: auto; }
.bcs-meals { width: 100%; font-size: 13px; }
.bcs-meals input { width: 76px; height: 30px; padding: 0 6px; font: inherit; font-size: 13px; color: var(--text); background: transparent; border: 1px solid var(--text-dim); border-radius: 4px; }
.bcs-meals tr.bcs-total td { font-weight: 700; border-top: 1px solid var(--text-dim); }
.bcs-meals tr.bcs-target td { color: var(--text-dim); font-style: italic; }
.bcs-form .tl-actions { margin-top: 16px; }
.bcs-auto-cell { display: inline-block; min-width: 60px; padding: 5px 6px; font-variant-numeric: tabular-nums; }
.bcs-auto { margin: 4px 0 6px; font-size: 13px; }
.bcs-form input::placeholder { color: var(--text-dim); opacity: 0.85; }
/* Top physical goals as badges: beside the player's name, and small under the assessment flag on the roster */
.goal-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; vertical-align: middle; }
.goal-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 3px 10px 3px 4px; border: 1px solid var(--dst-red); border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-badge b { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--dst-red); color: #fff; font-size: 10.5px; }
.goal-badge.done { border-color: var(--good); color: var(--text-dim); }
.goal-badge.done b { background: var(--good); }
.goal-badges.small { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 5px 0 0; }
.goal-badges.small .goal-badge { max-width: 170px; padding: 1px 7px 1px 2px; gap: 4px; font-size: 10.5px; font-weight: 500; display: block; }
.goal-badges.small .goal-badge b { width: 13px; height: 13px; font-size: 9px; margin-right: 4px; vertical-align: 1px; }
/* Biomechanical assessment header: the logo-and-photo block takes only the room it needs, so Name, Date and
   Coach sit inside the header box beside it. (A later rule for the Player Plan header had made that block full
   width, which pushed the three fields out past the box; on paper the overflow made the browser shrink the
   whole page to fit.) */
.assess-header-top .assess-header-pics { width: auto; flex: 0 0 auto; align-items: center; }
.assess-header-top .assess-header-pics .ph-team { margin-top: 0; }
/* On paper the header is one slim row: team logo and photo, then Name, Date and Coach, then the DST logo at
   the right. That leaves more of the page's height for the two columns, so they print larger. */
.assess-wrap.print-paginated .assess-header { display: flex; align-items: center; gap: 18px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 10px; }
.assess-wrap.print-paginated .assess-header .assess-header-top { flex: 1; min-width: 0; }
.assess-wrap.print-paginated .assess-header .assess-print-logo { order: 2; flex: 0 0 auto; margin: 0; text-align: right; }
.assess-wrap.print-paginated .assess-header .assess-print-logo img { height: 46px; width: auto; display: block; }
/* Goal badges by kind: red for mobility, flexibility and coordination; yellow for strength, speed, power and
   other outputs; green for body composition and nutrition; grey when the goal names none of these. An achieved
   goal keeps its color, with a check in place of its number and the text dimmed. */
.goal-badge.goal-red { border-color: #c8102e; background: rgba(200, 16, 46, 0.16); }
.goal-badge.goal-red b { background: #c8102e; color: #fff; }
.goal-badge.goal-yellow { border-color: #e6b800; background: rgba(230, 184, 0, 0.16); }
.goal-badge.goal-yellow b { background: #e6b800; color: #1a1a1a; }
.goal-badge.goal-green { border-color: #2e9e4f; background: rgba(46, 158, 79, 0.16); }
.goal-badge.goal-green b { background: #2e9e4f; color: #fff; }
.goal-badge.goal-none { border-color: var(--text-dim); }
.goal-badge.goal-none b { background: #6b7078; color: #fff; }
.goal-badge.done { color: var(--text-dim); }
.badge.contact-flag { white-space: nowrap; }
.badge.coach-badge:not([style]) { background: var(--surface-muted); color: var(--neutral); }
.cubs-coach-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; }
.cubs-coach-controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.cubs-coach-controls select { height: 32px; padding: 0 8px; color: var(--text); background: var(--panel); border: 1px solid var(--text-dim); border-radius: 6px; }
.btn.btn-small-grey.on { background: var(--dst-red); border-color: var(--dst-red); }
/* Text and Call links (open the device's own messaging app or dialer) */
.text-links { display: inline-flex; gap: 8px; margin-left: 6px; }
.text-link { font-size: 12px; font-weight: 600; color: var(--info); text-decoration: underline; white-space: nowrap; background: none; border: none; padding: 0; cursor: pointer; }
.cubs-coach-controls .text-template { flex: 1 1 320px; }
.cubs-coach-controls .text-template input { flex: 1; min-width: 180px; height: 32px; padding: 0 8px; color: var(--text); background: transparent; border: 1px solid var(--text-dim); border-radius: 6px; }
.badge.program-phase-badge { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.text-link.text-edit { text-decoration: none; color: var(--text-dim); font-size: 13px; }
.text-link.text-edit:hover { color: var(--text); }
/* Today panel at the top of the home page */
.today-panel h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.today-toggle { margin-left: auto; font-size: 12px; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.today-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.today-head { display: flex; align-items: center; gap: 8px; }
.today-hint { margin: 2px 0 6px; font-size: 11.5px; color: var(--text-dim); }
.today-card ul { list-style: none; margin: 0; padding: 0; }
.today-card li { padding: 2px 0; }
.today-card li small { color: var(--text-dim); }
.today-more { margin-top: 4px; font-size: 12px; }
/* a coach's locations (pencil on their card, and Add Coach) */
.coach-locs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; margin: 4px 0; }
.coach-locs-label { width: 100%; font-weight: 600; color: var(--text-dim); }
.coach-locs-label small { font-weight: 400; }
.coach-locs label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.add-coach-table .coach-locs-label { display: none; }
/* what a guided tour (tour.js) lights: the row of add buttons hugs the buttons while no form is open */
.tour-anchor:not(:has(.panel)) { width: fit-content; }
/* × to close a name or a whole card until Monday; faint until hovered (always shown on touch screens) */
.today-restore { margin-left: auto; font-size: 12px; }
.today-restore + .today-toggle { margin-left: 0; }
.today-card li { display: flex; align-items: baseline; gap: 4px; }
.today-card li small { flex: 1; }
.today-x { margin-left: auto; padding: 0 4px; border: none; background: none; color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.35; }
.today-x:hover, .today-x:focus-visible { opacity: 1; color: var(--text); }
.today-card li:hover .today-x { opacity: 0.8; }
.today-x-card { font-size: 17px; }
@media (hover: none) { .today-x { opacity: 0.7; } }

/* ---- one font and one text colour across the program builder ----
   Form boxes otherwise fall back to the browser's own fonts (Arial for most, a typewriter font for the warm-up), so
   every box, picker and button in the builder uses the dashboard's font, and typed text is the same white (near-black
   in light mode) everywhere, with the same grey for the hints in empty boxes. The red A1/B1 labels and the white day
   names on the red day bars keep their colours. */
.program-editor input, .program-editor textarea, .program-editor select, .program-editor button,
.period-program-tabs input, .period-program-tabs select, .period-program-tabs button { font-family: inherit; }
.program-editor input:not([type="checkbox"]), .program-editor textarea, .program-editor select:not(.superset-pick) { color: #fff; }
:root[data-theme="light"] .program-editor input:not([type="checkbox"]), :root[data-theme="light"] .program-editor textarea, :root[data-theme="light"] .program-editor select:not(.superset-pick) { color: #111; }
.program-editor .program-day .program-session-head input, :root[data-theme="light"] .program-editor .program-day .program-session-head input:not([type="checkbox"]) { color: #fff; } /* on the red day bar, in either mode */
.program-editor .facility-field input:not([type="checkbox"]), .program-editor .facility-field textarea { color: #fff; }
:root[data-theme="light"] .program-editor .facility-field input:not([type="checkbox"]), :root[data-theme="light"] .program-editor .facility-field textarea { color: #111; }
.program-editor .program-ex-name-view:not(.empty) { color: #fff; }
:root[data-theme="light"] .program-editor .program-ex-name-view:not(.empty) { color: #111; }
.program-editor input::placeholder, .program-editor textarea::placeholder, .program-editor .program-ex-name-view.empty { color: var(--text-dim); opacity: 1; }

/* ---- Re-Assessment (reassessment.js) ---- */
.ra-status { margin: 0 0 12px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.ra-silenced { color: #e0a020; font-weight: 600; }
.ra-open-bar { margin: 4px 0 10px; }
.ra-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.ra-head label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.ra-head input { padding: 4px 8px; }
.ra-counts { font-size: 13px; font-weight: 600; }
.ra-saved { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.ra-form h3 { margin: 18px 0 8px; font-size: 15px; }
.ra-form h3 small { font-weight: 400; color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.ra-section { margin-bottom: 10px; }
.ra-section-name { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 10px 0 6px; }
.ra-item { padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-left: 4px solid #6b7280; border-radius: 6px; }
.ra-item.is-cleared { border-left-color: #22c55e; }
.ra-item.is-improved { border-left-color: #14b8a6; }
.ra-item.is-same { border-left-color: #e0a020; }
.ra-item.is-worse { border-left-color: var(--dst-red); }
.ra-item-head { display: flex; align-items: baseline; gap: 6px; }
.ra-item-head small { color: var(--text-dim); }
.ra-added { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: rgba(90, 169, 230, 0.2); color: #5aa9e6; }
.ra-remove { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.ra-prev { font-size: 12px; color: var(--text-dim); margin: 2px 0 6px; }
.ra-prev b { color: var(--text); font-weight: 600; }
.ra-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ra-num { width: 58px; text-align: center; padding: 4px; }
.ra-notes { flex: 1 1 160px; min-width: 120px; padding: 4px 8px; }
.ra-lr { padding: 3px 4px; font-size: 12.5px; }
.ra-dual { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.ra-dual small { color: var(--text-dim); font-weight: 700; }
.ra-dual label, .ra-clear { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; cursor: pointer; }
.ra-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ra-tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 12px; cursor: pointer; }
.ra-tag.on { background: var(--dst-red); border-color: var(--dst-red); color: #fff; }
.ra-results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ra-result { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 12px; cursor: pointer; }
.ra-result.hint { border-style: dashed; border-color: var(--text-dim); }
.ra-result.on.r-cleared { background: #22c55e; border-color: #22c55e; color: #fff; }
.ra-result.on.r-improved { background: #14b8a6; border-color: #14b8a6; color: #fff; }
.ra-result.on.r-same { background: #e0a020; border-color: #e0a020; color: #111; }
.ra-result.on.r-worse { background: var(--dst-red); border-color: var(--dst-red); color: #fff; }
.ra-add select { padding: 5px 8px; max-width: 100%; }
.ra-perf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; }
.ra-perf-row { display: flex; align-items: center; gap: 6px; }
.ra-perf-name { flex: 0 0 130px; font-size: 13px; }
.ra-perf-name small { color: var(--text-dim); }
.ra-perf-prev { color: var(--text-dim); font-size: 11.5px; }
.ra-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ra-bc table { border-collapse: collapse; font-size: 13px; }
.ra-bc th, .ra-bc td { padding: 4px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.ra-bc-change td { color: var(--text-dim); }
.ra-notes-all textarea { width: 100%; }
.ra-list { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.ra-list th, .ra-list td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.ra-list-actions { text-align: right; white-space: nowrap; }
.ra-history { margin-top: 18px; }
.ra-history h3 { font-size: 15px; margin: 0 0 8px; }
.ra-history h3 small { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.ra-history-scroll { overflow-x: auto; }
.ra-history table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.ra-history th, .ra-history td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.ra-history td small { display: block; color: var(--text-dim); white-space: normal; }
.ra-h-cleared { color: #22c55e; font-weight: 600; }
.ra-h-improved { color: #14b8a6; font-weight: 600; }
.ra-h-same { color: #e0a020; font-weight: 600; }
.ra-h-worse { color: #ef4444; font-weight: 600; }
.ra-h-none, .ra-h-gone { color: var(--text-dim); }
.ra-trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ra-trend { border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px 2px; }
.ra-trend-title { font-size: 13px; font-weight: 600; margin: 0 0 4px 6px; }
.ra-trend-title small { font-weight: 400; color: var(--text-dim); }
.ra-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.ra-legend .ra-l::before, .ra-legend .ra-r::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; }
.ra-legend .ra-l::before { background: #e0565f; }
.ra-legend .ra-r::before { background: #5aa9e6; }

/* ---- Off-season report (reassessment.js): drawn like the printed page, dark on white ---- */
.ra-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.osr-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.osr-bar .btn.osr-print { background: var(--dst-red); border-color: var(--dst-red); color: #fff; }
.osr-report { background: #fff; color: #111; border-radius: 8px; padding: 28px 32px; max-width: 900px; margin: 0 auto 20px; font-size: 13px; line-height: 1.45; }
.osr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 3px solid #c8102e; padding-bottom: 12px; margin-bottom: 14px; }
.osr-head h1 { margin: 0; font-size: 26px; color: #111; }
.osr-sub { color: #555; font-size: 13px; margin-top: 2px; }
.osr-logo { height: 48px; width: auto; }
.osr-report h2 { font-size: 15px; margin: 18px 0 8px; color: #c8102e; text-transform: uppercase; letter-spacing: 0.04em; }
.osr-report h2 small { text-transform: none; letter-spacing: 0; color: #666; font-weight: 400; font-size: 12px; }
.osr-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.osr-stats > div { border: 1px solid #ddd; border-radius: 6px; padding: 8px; text-align: center; }
.osr-stats b { display: block; font-size: 22px; }
.osr-stats span { font-size: 11px; color: #555; }
.osr-stats .c-cleared b { color: #15803d; }
.osr-stats .c-improved b { color: #0f766e; }
.osr-stats .c-same b { color: #b45309; }
.osr-stats .c-worse b { color: #c8102e; }
.osr-note { width: 100%; font: inherit; color: #111; background: #fafafa; border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; }
.osr-note-print { display: none; white-space: pre-wrap; }
.osr-report table.osr-table { display: table; width: 100%; border-collapse: collapse; margin-bottom: 10px; overflow: visible; } /* full width (a general rule makes tables scrolling blocks) */
.osr-table th, .osr-table td { border-bottom: 1px solid #e3e3e3; padding: 5px 7px; text-align: left; vertical-align: top; color: #111; }
.osr-table th { background: #f3f3f3; font-size: 11.5px; }
.osr-table td small { color: #666; }
.osr-nums td:not(:first-child), .osr-nums th:not(:first-child) { text-align: center; }
.osr-change { font-weight: 700; }
.osr-added { color: #2f7fc1 !important; }
.osr-o-cleared { color: #15803d; font-weight: 700; }
.osr-o-improved { color: #0f766e; font-weight: 700; }
.osr-o-same { color: #b45309; font-weight: 700; }
.osr-o-worse { color: #c8102e; font-weight: 700; }
.osr-empty, .osr-foot { color: #666; font-size: 12px; }
.osr-report .ra-trend { border-color: #e3e3e3; break-inside: avoid; }
.osr-report .ra-trend-title { color: #111; }
.osr-report .ra-trend-title small, .osr-report .ra-legend { color: #555; }
@media print {
  body.print-osr *:not(:has(.osr-report)):not(.osr-report):not(.osr-report *) { display: none !important; }
  body.print-osr, body.print-osr .app, body.print-osr .main { background: #fff !important; padding: 0 !important; margin: 0 !important; max-width: none !important; min-height: 0 !important; }
  body.print-osr .osr-wrap, body.print-osr .osr-report { display: block !important; }
  body.print-osr .osr-report { max-width: none; padding: 0; border-radius: 0; }
  body.print-osr .osr-report, body.print-osr .osr-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-osr .osr-note-print { display: block !important; }
  body.print-osr .osr-table tr, body.print-osr .osr-stats { break-inside: avoid; }
}

/* ---- Help page: search, contents, sections ---- */
.help-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.help-search { max-width: 460px; }
.help-contents { display: flex; flex-wrap: wrap; gap: 6px; }
.help-contents a { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text); text-decoration: none; }
.help-contents a:hover { border-color: var(--dst-red); }
.help-section { margin-bottom: 20px; scroll-margin-top: 80px; }
.help-section h3 { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--dst-red); }
.help-section ul { margin: 0; padding-left: 20px; line-height: 1.55; }
.help-section li { margin-bottom: 4px; }

/* Evolt360 import (evolt_import.js) */
.evolt-steps { margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.evolt-steps a { color: var(--accent); }
.evolt-note, .evolt-summary { font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 860px; }
.evolt-summary strong { color: var(--text); }
.evolt-actions { display: flex; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.evolt-table td { vertical-align: middle; }
.evolt-sub { font-size: 11px; color: var(--text-dim); word-break: break-all; }
.evolt-sub.inline { display: inline; }
.evolt-sub.warn { color: var(--warn); }
.evolt-pick { max-width: 240px; }
/* a figure's change since the first scan, under it */
.kpi-sub { margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.bodycomp-scroll { overflow-x: auto; }
/* Body Composition Trends: which measurements, and which figure */
.bc-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -4px 0 10px; }
.bc-pills { margin: 0; }
.bc-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); max-width: 860px; }
/* team roster: due for a full assessment */
.assess-flag { display: inline-flex; align-items: center; padding: 2px 4px; color: var(--neutral, #8a8a8a); border-radius: 4px; }
.assess-flag:hover { color: var(--text); background: var(--surface-muted); }
/* exercise library: typing in another name for an exercise */
.exercise-alias-add { display: flex; gap: 8px; margin-top: 6px; }
.exercise-alias-add input { flex: 1; min-width: 0; }
/* Add Coach: logins made in Supabase that aren't on the Coaches roster yet */
.add-coach-help, .add-coach-note { font-size: 13px; line-height: 1.5; color: var(--text-dim); max-width: 760px; }
.add-coach-table input { width: 100%; max-width: 260px; }
.add-coach-table td { vertical-align: middle; }

/* ---- speed program builder (speed_builder.js): laid out like the strength builder (program-week / program-day),
   each day in sections (a red bar with the section's name and time) and series ---- */
.spd-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.spd-title { flex: 2 1 280px; font-size: 16px; font-weight: 700; padding: 6px 8px; }
.spd-desc { flex: 3 1 300px; padding: 6px 8px; }
.spd-x { border: none; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 3px; }
.spd-x:hover { color: var(--text); }
.spd-x:disabled { opacity: 0.3; cursor: default; }
.spd-section { margin-top: 10px; border: 1px solid rgba(165, 42, 52, 0.45); border-radius: 6px; background: rgba(148, 163, 184, 0.06); padding: 0 6px 6px; transition: opacity 0.15s, border-color 0.15s; }
.spd-section-head { display: flex; align-items: center; gap: 6px; margin: 0 -6px 4px; padding: 4px 6px; border-radius: 5px 5px 0 0; background: #7d1a25; }
.spd-section-head .spd-sec-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: transparent; border: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.35); padding: 2px 0; }
.spd-section-head .spd-time { width: 82px; padding: 2px 6px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; }
.spd-section-head .spd-time::placeholder { color: rgba(255, 255, 255, 0.6); }
.spd-section-head .spd-x { color: rgba(255, 255, 255, 0.85); }
.spd-section-head .spd-x:hover { color: #fff; }
.spd-sec-tools { display: inline-flex; }
.spd-section.sec-focused { border-color: var(--dst-red); box-shadow: 0 0 0 1px var(--dst-red); background: rgba(165, 42, 52, 0.12); }
.spd-section.sec-dimmed { opacity: 0.45; }
.spd-section.sec-dimmed:hover { opacity: 0.75; }
.spd-series { margin: 4px 0; }
.spd-series.named { border-left: 3px solid rgba(148, 163, 184, 0.6); padding-left: 6px; }
.spd-series-name { width: 100%; box-sizing: border-box; font-weight: 700; font-size: 12px; padding: 3px 6px; margin-bottom: 3px; }
.spd-drill { display: grid; grid-template-columns: 1fr 44px 44px 92px; gap: 3px; margin-top: 4px; padding: 3px 4px; border: 1px solid rgba(148, 163, 184, 0.45); border-left: 4px solid var(--dst-red); border-radius: 5px; background: rgba(148, 163, 184, 0.06); }
.spd-drill input, .spd-drill select { min-width: 0; padding: 3px 4px; font-size: 12px; }
.spd-notes { grid-column: 1 / -1; }
.spd-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--text-dim); }
.spd-tools label { display: inline-flex; align-items: center; gap: 3px; margin-right: auto; cursor: pointer; }
.spd-add { font-size: 12px; margin: 4px 8px 0 0; }
.spd-section-foot { display: flex; }
.spd-totals { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12px; }
.spd-totals th, .spd-totals td { padding: 2px 6px; border-bottom: 1px solid var(--border); text-align: right; }
.spd-totals th:first-child, .spd-totals td:first-child { text-align: left; }
.spd-total-row td { font-weight: 700; }
.program-editor .spd-day { padding-bottom: 10px; }
.program-day-actions.spd-bottom { position: static; margin-top: 12px; }
/* every box in the speed builder filled black, like the strength builder's (white in light mode) */
.spd-editor .spd-drill input, .spd-editor .spd-series-name, .spd-editor .spd-title, .spd-editor .spd-desc { background: #000; color: #fff; border: 1px solid var(--input-border, var(--border)); border-radius: 4px; }
.spd-editor .spd-drill .spd-num { text-align: center; }
.spd-editor .spd-drill input.unclear { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
:root[data-theme="light"] .spd-editor .spd-drill input, :root[data-theme="light"] .spd-editor .spd-series-name, :root[data-theme="light"] .spd-editor .spd-title, :root[data-theme="light"] .spd-editor .spd-desc { background: #fff; color: #111; }
.spd-totals th:not(:first-child), .spd-totals td:not(:first-child) { white-space: nowrap; }
/* day headers in both program builders (strength and speed): black with white writing */
.program-editor .program-day .program-session-head, :root[data-theme="light"] .program-editor .program-day .program-session-head { background: #000; }
.program-editor .program-day .program-session-head input, .program-editor .program-day .program-session-head .btn-link, .program-editor .program-day .program-session-head .program-day-grip { color: #fff; }
.program-editor .program-day .program-session-name { border-bottom-color: rgba(255, 255, 255, 0.4); }
/* the speed builder's add links (+ Drill, + Series, + Section, + Note, + Description) in white (dark in light mode) */
.spd-editor .spd-add { color: #fff; }
:root[data-theme="light"] .spd-editor .spd-add { color: #111; }
.spd-tools .spd-note-link { margin: 0 auto 0 8px; }
.spd-tools label { margin-right: 0; }
/* a section's description for the app, under its red bar */
.spd-editor .spd-sec-desc { width: 100%; box-sizing: border-box; margin: 2px 0 4px; font-size: 12px; padding: 4px 6px; resize: vertical; background: #000; color: #fff; border: 1px solid var(--input-border, var(--border)); border-radius: 4px; }
:root[data-theme="light"] .spd-editor .spd-sec-desc { background: #fff; color: #111; }
/* the speed builder's week bars in red (the strength builder keeps its slate ones); Copy previous week sits on it
   as a dark button so it still stands out */
.spd-editor .program-week-head, :root[data-theme="light"] .spd-editor .program-week-head { background: var(--dst-red); }
.spd-editor .program-week-head .program-week-name { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.45); }
.spd-editor .program-week-head .btn-link.program-remove-week, :root[data-theme="light"] .spd-editor .program-week-head .btn-link.program-remove-week { color: #fff; }
.spd-editor .btn.program-copy-prev-week, :root[data-theme="light"] .spd-editor .btn.program-copy-prev-week { background: #000; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.spd-editor .btn.program-copy-prev-week:hover, :root[data-theme="light"] .spd-editor .btn.program-copy-prev-week:hover { background: #1a1a1a; border-color: #fff; }
/* the speed builder's day being progressed: lit in every week (the other days are dimmed with .day-dimmed) */
.spd-editor .program-day.day-focused { border: 2px solid var(--dst-red); box-shadow: 0 0 12px rgba(165, 42, 52, 0.3); }
/* the speed builder's "+" boxes (Time, Height...) on a drill: label, target box, remove */
.spd-extra { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.spd-extra-label { flex: 0 0 auto; min-width: 54px; color: var(--text-dim); font-weight: 600; }
.spd-editor .spd-extra input { flex: 1; min-width: 0; padding: 3px 6px; font-size: 12px; background: #000; color: #fff; border: 1px solid var(--input-border, var(--border)); border-radius: 4px; }
:root[data-theme="light"] .spd-editor .spd-extra input { background: #fff; color: #111; }
.spd-tools .spd-more { margin-right: auto; }
/* body comp: a saved sheet or scan opens with a click anywhere on its row */
.bcs-list-row, .bodycomp-row { cursor: pointer; }
.bcs-list-row:hover td, .bodycomp-row:hover td { background: var(--row-hover, rgba(255, 255, 255, 0.04)); }
.bcs-list-row .badge { margin-left: 6px; }
.bodycomp-edit-row input { width: 100%; min-width: 64px; box-sizing: border-box; padding: 3px 5px; font-size: 12px; }
.bodycomp-edit-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }