/* ==========================================================================
   Pitch components (#864, epic #861)
   ==========================================================================
   Bootstrap 5.3 components restyled for data-design="pitch", plus a handful
   of Athlos components every page shares: the status pill and semafor dot,
   the big number, the metric tile, the section heading and the segmented
   switch. /internal/ui-kit shows every one of them in every state.

   Two halves, and the split matters:

   1. Bootstrap restyling is scoped to :root[data-design="pitch"]. Classic
      pages keep the look they have until #892 removes the switch.
   2. The Athlos components (.ath-*) are not scoped: they are new, nothing in
      classic uses them yet, and they are built on tokens, so they render in
      either design. A page can adopt one before its own redesign issue.

   Rules: tokens only (tests/test_redesign_tokens_only.py holds this file to
   it), touch target >= 44px, a visible focus ring from --focus-ring.

   The one exception to "tokens only" is an SVG inside url(): CSS cannot read a
   custom property there, so the check mark, radio dot, switch knob and select
   caret spell their colour URL-encoded (%23…). Each mirrors a token of the
   same theme, and tests/test_pitch_components.py fails when one drifts.

   Design: https://claude.ai/artifact/JTysbtneALbNTrUAaAaBf3
   ========================================================================== */


/* ── Bootstrap's own variables, mapped to Athlos tokens ──────────────────── */
:root[data-design="pitch"] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-body-color-rgb: var(--text-primary-rgb);
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-tertiary);
  --bs-secondary-bg: var(--bg-elevated);
  --bs-tertiary-bg: var(--bg-surface);
  --bs-border-color: var(--border-default);
  --bs-border-color-translucent: var(--border-default);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: 9999px;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: var(--accent-rgb);
  --bs-link-hover-color: var(--accent-hover);
  --bs-primary-rgb: var(--accent-rgb);
  --bs-focus-ring-color: var(--focus-ring);
  --bs-primary-text-emphasis: var(--accent);
  --bs-success-text-emphasis: var(--success-text);
  --bs-warning-text-emphasis: var(--warning-text);
  --bs-danger-text-emphasis: var(--danger-text);
  --bs-info-text-emphasis: var(--info-text);
  --bs-primary-bg-subtle: var(--accent-soft-bg);
  --bs-success-bg-subtle: var(--success-soft-bg);
  --bs-warning-bg-subtle: var(--warning-soft-bg);
  --bs-danger-bg-subtle: var(--danger-soft-bg);
  --bs-info-bg-subtle: var(--info-soft-bg);
  --bs-success-border-subtle: var(--success-soft-border);
  --bs-warning-border-subtle: var(--warning-soft-border);
  --bs-danger-border-subtle: var(--danger-soft-border);
  --bs-info-border-subtle: var(--info-soft-border);
  --bs-form-valid-color: var(--success-text);
  --bs-form-valid-border-color: var(--success);
  --bs-form-invalid-color: var(--danger-text);
  --bs-form-invalid-border-color: var(--danger);
}

:root[data-design="pitch"] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ── Buttons ─────────────────────────────────────────────────────────────── */
:root[data-design="pitch"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: none;
  font: 600 14px/1.2 var(--font-sans);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
:root[data-design="pitch"] .btn-sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
:root[data-design="pitch"] .btn-lg {
  min-height: 52px;
  padding: 0 24px;
  font-size: 16px;
}
/* A small button stays small with a mouse; under a finger it is 44px too. */
@media (pointer: coarse) {
  :root[data-design="pitch"] .btn-sm { min-height: 44px; }
}
:root[data-design="pitch"] .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}
:root[data-design="pitch"] .btn:disabled,
:root[data-design="pitch"] .btn.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Primary: the turquoise fill, dark text on it in dark (--on-accent). */
:root[data-design="pitch"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
:root[data-design="pitch"] .btn-primary:hover,
:root[data-design="pitch"] .btn-primary:active,
:root[data-design="pitch"] .btn-primary.active {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

/* Secondary / ghost: a hairline, no fill. */
:root[data-design="pitch"] :is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark) {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
:root[data-design="pitch"] :is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark):is(:hover, :active, .active) {
  background: var(--hover-overlay);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

:root[data-design="pitch"] .btn-outline-primary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
:root[data-design="pitch"] .btn-outline-primary:is(:hover, :active, .active) {
  background: var(--accent-soft-bg);
  border-color: var(--accent);
  /* --accent on its own soft fill is 4.25:1 in light (#889); the hover shade
     is darker there and lighter in dark */
  color: var(--accent-hover);
}

/* Danger keeps a fill: a destructive confirm must read as one. */
:root[data-design="pitch"] .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
}
:root[data-design="pitch"] .btn-danger:is(:hover, :active, .active) {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
  /* darker, not lighter: lightening took Pitch light's white label to 4.2:1
     (#873 review); at 0.92 it is 5.1:1 dark and 5.5:1 light */
  filter: brightness(0.92);
}

/* Success, warning, info and the outline variants: tinted, the word in the
   readable --*-text tone. Pitch light's success and warning fills are under
   3:1 on white, so they never carry text. */
:root[data-design="pitch"] :is(.btn-success, .btn-outline-success) {
  background: var(--success-soft-bg);
  border-color: var(--success-soft-border);
  color: var(--success-text);
}
:root[data-design="pitch"] :is(.btn-warning, .btn-outline-warning) {
  background: var(--warning-soft-bg);
  border-color: var(--warning-soft-border);
  color: var(--warning-text);
}
:root[data-design="pitch"] :is(.btn-info, .btn-outline-info) {
  background: var(--info-soft-bg);
  border-color: var(--info-soft-border);
  color: var(--info-text);
}
:root[data-design="pitch"] .btn-outline-danger {
  background: transparent;
  border-color: var(--danger-soft-border);
  color: var(--danger-text);
}
:root[data-design="pitch"] :is(.btn-success, .btn-outline-success, .btn-warning, .btn-outline-warning, .btn-info, .btn-outline-info, .btn-outline-danger):is(:hover, :active, .active) {
  border-color: currentColor;
}
:root[data-design="pitch"] .btn-outline-danger:is(:hover, :active, .active) {
  background: var(--danger-soft-bg);
  color: var(--danger-text);
}
:root[data-design="pitch"] :is(.btn-success, .btn-outline-success):is(:hover, :active, .active) { background: var(--success-soft-bg); color: var(--success-text); }
:root[data-design="pitch"] :is(.btn-warning, .btn-outline-warning):is(:hover, :active, .active) { background: var(--warning-soft-bg); color: var(--warning-text); }
:root[data-design="pitch"] :is(.btn-info, .btn-outline-info):is(:hover, :active, .active) { background: var(--info-soft-bg); color: var(--info-text); }

:root[data-design="pitch"] .btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  text-decoration: none;
}
:root[data-design="pitch"] .btn-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Icon-only button: square, still a 44px target. */
:root[data-design="pitch"] .btn.btn-icon {
  width: 44px;
  padding: 0;
}

:root[data-design="pitch"] .btn-close {
  width: 44px;
  height: 44px;
  padding: 0;
  opacity: 0.7;
}
:root[data-design="pitch"]:not([data-theme="light"]) .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}


/* ── Modals and offcanvas panels (#865) ──────────────────────────────────── */
/* Mapped on the component, never on body: Bootstrap moves an open modal to the
   end of <body>, and a modal created from JS (new bootstrap.Modal) uses the same
   markup, so both get this look. The vendor style.min.css paints
   .modal-content white and Bootstrap's backdrop is black at 0.5; both are
   replaced. --backdrop carries its own alpha, hence opacity 1. */
:root[data-design="pitch"] .modal {
  --bs-modal-bg: var(--bg-elevated);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--border-default);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-header-border-color: var(--border-subtle);
  --bs-modal-footer-border-color: var(--border-subtle);
  --bs-modal-padding: 20px 24px;
  --bs-modal-header-padding: 18px 24px;
}

:root[data-design="pitch"] .modal-content {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

:root[data-design="pitch"] .modal-header,
:root[data-design="pitch"] .modal-footer {
  background: transparent;
  border-color: var(--border-subtle);
}

:root[data-design="pitch"] .modal-header {
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
}

/* The vendor style.css bundles Bootstrap 5.1.3, which spells padding,
   borders and shadows out instead of reading --bs-modal-* / --bs-offcanvas-*,
   and it loads after the 5.3 stylesheet (and alone on base-admin.html). So
   the variables above are for 5.3 and the declarations below do the work
   (#900 review). */
:root[data-design="pitch"] .modal-header {
  padding: 18px 24px;
}

:root[data-design="pitch"] .modal-body {
  padding: 20px 24px;
}

:root[data-design="pitch"] .modal-footer {
  gap: 8px;
  padding: 14px 24px;
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

:root[data-design="pitch"] .modal-title,
:root[data-design="pitch"] .offcanvas-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

:root[data-design="pitch"] .offcanvas {
  --bs-offcanvas-bg: var(--bg-elevated);
  --bs-offcanvas-color: var(--text-primary);
  --bs-offcanvas-border-color: var(--border-default);
  --bs-offcanvas-border-width: 1px;
  --bs-offcanvas-box-shadow: var(--shadow-lg);
  --bs-offcanvas-padding-x: 24px;
  --bs-offcanvas-padding-y: 20px;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

:root[data-design="pitch"] .offcanvas-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

:root[data-design="pitch"] .offcanvas-body {
  padding: 20px 24px;
}

:root[data-design="pitch"] .offcanvas.offcanvas-end {
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

:root[data-design="pitch"] .offcanvas.offcanvas-start {
  border-right: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

:root[data-design="pitch"] .modal-backdrop,
:root[data-design="pitch"] .offcanvas-backdrop {
  background-color: var(--backdrop);
}

:root[data-design="pitch"] .modal-backdrop.show,
:root[data-design="pitch"] .offcanvas-backdrop.show {
  opacity: 1;
}


/* ── Forms ───────────────────────────────────────────────────────────────── */
:root[data-design="pitch"] .form-label,
:root[data-design="pitch"] .col-form-label {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

:root[data-design="pitch"] :is(.form-control, .form-select) {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--bg-base);
  color: var(--text-primary);
  font: 400 14px/1.4 var(--font-sans);
  box-shadow: none;
}
:root[data-design="pitch"] textarea.form-control {
  padding: 10px 14px;
}
:root[data-design="pitch"] .form-select {
  padding-right: 40px;
  background-position: right 14px center;
}
:root[data-design="pitch"] :is(.form-control-sm, .form-select-sm) {
  min-height: 36px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
:root[data-design="pitch"] .form-control::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}
:root[data-design="pitch"] :is(.form-control, .form-select):hover {
  border-color: var(--text-tertiary);
}
:root[data-design="pitch"] :is(.form-control, .form-select):focus {
  border-color: var(--accent);
  background-color: var(--bg-base);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
:root[data-design="pitch"] :is(.form-control, .form-select):disabled,
:root[data-design="pitch"] .form-control[readonly] {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-tertiary);
}
/* A picker's input is readonly only so the keyboard does not fight the
   calendar; it is still the control a coach clicks, so it looks like one. */
:root[data-design="pitch"] .form-control.flatpickr-input[readonly] {
  background-color: var(--bg-base);
  border-color: var(--border-strong);
  color: var(--text-primary);
  cursor: pointer;
}
:root[data-design="pitch"] :is(.form-control, .form-select).is-invalid {
  border-color: var(--danger);
}
:root[data-design="pitch"] :is(.form-control, .form-select).is-invalid:focus {
  box-shadow: 0 0 0 3px var(--danger-soft-border);
}
:root[data-design="pitch"] :is(.form-control, .form-select).is-valid {
  border-color: var(--success);
}
:root[data-design="pitch"] .invalid-feedback { color: var(--danger-text); font-size: 13px; }
:root[data-design="pitch"] .valid-feedback { color: var(--success-text); font-size: 13px; }
:root[data-design="pitch"] .form-text { color: var(--text-tertiary); font-size: 13px; }

/* The vendor theme paints the group itself a light grey. */
:root[data-design="pitch"] .input-group { background: transparent; }
/* Inside a group only the outer corners are round. */
:root[data-design="pitch"] .input-group > :not(:last-child):not(.dropdown-menu) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
:root[data-design="pitch"] .input-group > :not(:first-child):not(.dropdown-menu) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
:root[data-design="pitch"] .input-group-text {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: 500 14px var(--font-sans);
}

/* Checkboxes, radios, switches: the box is 20px, the row around it is the
   44px target. The box edge is --text-tertiary — a 3:1 control boundary that
   --border-strong is not. */
:root[data-design="pitch"] .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-left: 0;
  margin-bottom: 0;
}
:root[data-design="pitch"] .form-check-inline {
  display: inline-flex;
  margin-right: 16px;
}
:root[data-design="pitch"] .form-check .form-check-input {
  float: none;
  flex-shrink: 0;
  margin: 0;
}
:root[data-design="pitch"] .form-check-label {
  color: var(--text-primary);
  cursor: pointer;
}
:root[data-design="pitch"] .form-check-input {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--text-tertiary);
  background-color: var(--bg-base);
  cursor: pointer;
}
:root[data-design="pitch"] .form-check-input[type="checkbox"] { border-radius: var(--radius-sm); }
:root[data-design="pitch"] .form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
:root[data-design="pitch"] .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
:root[data-design="pitch"] .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: var(--bs-form-check-bg-image-indeterminate);
}
:root[data-design="pitch"] .form-check-input:disabled { opacity: 0.45; }
:root[data-design="pitch"] .form-check-input:disabled ~ .form-check-label { color: var(--text-tertiary); opacity: 1; }
:root[data-design="pitch"] .form-check-input.is-invalid { border-color: var(--danger); }
:root[data-design="pitch"] .form-check-input.is-invalid ~ .form-check-label { color: var(--danger-text); }
:root[data-design="pitch"] .form-switch {
  padding-left: 0;
}
:root[data-design="pitch"] .form-switch .form-check-input {
  width: 40px;
  border-radius: 9999px;
  margin-left: 0;
}

/* The url() glyphs, per theme. Dark: the mark is --on-accent (#04221E) on the
   turquoise; the caret and the unchecked knob are --text-secondary (#A7BEC3).
   Light: white on teal is Bootstrap's own default, the caret and knob are
   --text-secondary (#3F5A60). */
:root[data-design="pitch"] {
  --bs-form-check-bg-image-checkbox: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2304221E' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --bs-form-check-bg-image-radio: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2304221E'/%3e%3c/svg%3e");
  --bs-form-check-bg-image-indeterminate: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2304221E' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  --bs-form-switch-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A7BEC3'/%3e%3c/svg%3e");
  --bs-form-switch-bg-image-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2304221E'/%3e%3c/svg%3e");
  --bs-form-select-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A7BEC3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-design="pitch"][data-theme="light"] {
  --bs-form-check-bg-image-checkbox: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --bs-form-check-bg-image-radio: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e");
  --bs-form-check-bg-image-indeterminate: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  --bs-form-switch-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%233F5A60'/%3e%3c/svg%3e");
  --bs-form-switch-bg-image-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
  --bs-form-select-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233F5A60' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-design="pitch"] .form-select {
  background-image: var(--bs-form-select-bg-image);
  background-size: 14px 14px;
  background-repeat: no-repeat;
}
:root[data-design="pitch"] .form-check-input:checked[type="checkbox"] { background-image: var(--bs-form-check-bg-image-checkbox); }
:root[data-design="pitch"] .form-check-input:checked[type="radio"] { background-image: var(--bs-form-check-bg-image-radio); }
:root[data-design="pitch"] .form-switch .form-check-input { background-image: var(--bs-form-switch-bg-image); }
:root[data-design="pitch"] .form-switch .form-check-input:checked { background-image: var(--bs-form-switch-bg-image-checked); }


/* ── Cards ───────────────────────────────────────────────────────────────── */
:root[data-design="pitch"] .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--text-primary);
}
:root[data-design="pitch"][data-theme="light"] .card { box-shadow: var(--shadow-sm); }
:root[data-design="pitch"] .card:hover { box-shadow: none; }
:root[data-design="pitch"][data-theme="light"] .card:hover { box-shadow: var(--shadow-sm); }
:root[data-design="pitch"] .card-header,
:root[data-design="pitch"] .card-footer {
  background: transparent;
  border-color: var(--border-subtle);
  padding: 16px 20px;
}
:root[data-design="pitch"] .card-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
:root[data-design="pitch"] .card-header :is(h1, h2, h3, h4, h5, h6),
:root[data-design="pitch"] .card-title {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
/* The vendor theme hangs a blue bar off every card heading. */
:root[data-design="pitch"] .card .card-header :is(h5, h4, h3)::after { content: none; }
:root[data-design="pitch"] :is(.card-body, .card-block) { padding: 18px 20px; }
:root[data-design="pitch"] .card-subtitle,
:root[data-design="pitch"] .card-text { color: var(--text-secondary); }


/* ── Badges: every Bootstrap badge becomes a status pill ─────────────────── */
:root[data-design="pitch"] .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Bootstrap's bg-* / text-bg-* utilities are !important, so this has to be. */
:root[data-design="pitch"] .badge:is(.bg-primary, .text-bg-primary) {
  background: var(--accent-soft-bg) !important;
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent) !important;
}
/* Light teal on its own tint is 4.25:1; the hover shade clears AA. */
:root[data-design="pitch"][data-theme="light"] .badge:is(.bg-primary, .text-bg-primary) {
  color: var(--accent-hover) !important;
}
:root[data-design="pitch"] .badge:is(.bg-success, .text-bg-success) {
  background: var(--success-soft-bg) !important;
  border-color: var(--success-soft-border);
  color: var(--success-text) !important;
}
:root[data-design="pitch"] .badge:is(.bg-warning, .text-bg-warning) {
  background: var(--warning-soft-bg) !important;
  border-color: var(--warning-soft-border);
  color: var(--warning-text) !important;
}
:root[data-design="pitch"] .badge:is(.bg-danger, .text-bg-danger) {
  background: var(--danger-soft-bg) !important;
  border-color: var(--danger-soft-border);
  color: var(--danger-text) !important;
}
:root[data-design="pitch"] .badge:is(.bg-info, .text-bg-info) {
  background: var(--info-soft-bg) !important;
  border-color: var(--info-soft-border);
  color: var(--info-text) !important;
}
:root[data-design="pitch"] .badge:is(.bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark) {
  background: transparent !important;
  border-color: var(--border-strong);
  color: var(--text-secondary) !important;
}


/* ── Tabs and pills ──────────────────────────────────────────────────────── */
/* The vendor theme paints every .tab-content white with a shadow. */
:root[data-design="pitch"] .tab-content {
  background: transparent;
  box-shadow: none;
}
:root[data-design="pitch"] .nav-tabs {
  gap: 4px;
  border-bottom: 1px solid var(--border-default);
}
:root[data-design="pitch"] .nav-tabs .nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-bottom: -1px;
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font: 500 14px var(--font-sans);
}
:root[data-design="pitch"] .nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border-strong);
}
:root[data-design="pitch"] .nav-tabs .nav-link.active,
:root[data-design="pitch"] .nav-tabs .nav-item.show .nav-link {
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
:root[data-design="pitch"] .nav-tabs .nav-link.disabled,
:root[data-design="pitch"] .nav-pills .nav-link.disabled { color: var(--text-disabled); }

/* .nav-pills is the segmented switch of the Semafor page (and .ath-segment
   below is the same thing for a page that is not a Bootstrap nav). */
:root[data-design="pitch"] .nav-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}
:root[data-design="pitch"] .nav-pills .nav-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: 500 14px var(--font-sans);
}
:root[data-design="pitch"] .nav-pills .nav-link:hover { color: var(--text-primary); background: var(--hover-overlay); }
:root[data-design="pitch"] .nav-pills .nav-link.active,
:root[data-design="pitch"] .nav-pills .show > .nav-link {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}


/* ── Alerts ──────────────────────────────────────────────────────────────── */
:root[data-design="pitch"] .alert {
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
}
:root[data-design="pitch"] .alert > i:first-child { margin-right: 4px; }
:root[data-design="pitch"] .alert-success { background: var(--success-soft-bg); border-color: var(--success-soft-border); color: var(--success-text); }
:root[data-design="pitch"] .alert-warning { background: var(--warning-soft-bg); border-color: var(--warning-soft-border); color: var(--warning-text); }
:root[data-design="pitch"] .alert-danger  { background: var(--danger-soft-bg);  border-color: var(--danger-soft-border);  color: var(--danger-text); }
:root[data-design="pitch"] :is(.alert-info, .alert-primary) { background: var(--info-soft-bg); border-color: var(--info-soft-border); color: var(--info-text); }
:root[data-design="pitch"] .alert .alert-link { color: inherit; text-decoration: underline; font-weight: 600; }
:root[data-design="pitch"] .alert .alert-heading { color: inherit; font-family: var(--font-display); font-size: 16px; }
:root[data-design="pitch"] .alert-dismissible { padding-right: 56px; }
:root[data-design="pitch"] .alert-dismissible .btn-close { top: 0; right: 0; }


/* ── Dropdowns ───────────────────────────────────────────────────────────── */
:root[data-design="pitch"] .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--accent-soft-bg);
  --bs-dropdown-link-active-color: var(--text-primary);
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
:root[data-design="pitch"] .dropdown-item {
  padding: 10px 12px;
  line-height: 20px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font: 500 14px var(--font-sans);
}
:root[data-design="pitch"] .dropdown-item > i:first-child { margin-right: 10px; }
:root[data-design="pitch"] .dropdown-item:is(:hover, :focus) { background: var(--hover-overlay); color: var(--text-primary); }
:root[data-design="pitch"] .dropdown-item:is(.active, :active) { background: var(--accent-soft-bg); color: var(--text-primary); }
:root[data-design="pitch"] .dropdown-item:is(.disabled, :disabled) { color: var(--text-disabled); background: transparent; }
:root[data-design="pitch"] .dropdown-item.text-danger { color: var(--danger-text) !important; }
:root[data-design="pitch"] .dropdown-header {
  padding: 8px 12px 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
:root[data-design="pitch"] .dropdown-divider {
  height: 0;
  margin: 6px 0;
  border: 0;
  border-top: 1px solid var(--border-default);
  background: transparent;
  opacity: 1;
}
/* The vendor theme draws a caret from an icon font it does not load; it
   renders as a stray letter above the menu. */
:root[data-design="pitch"] .dropdown-menu::before { content: none; }


/* ── Tooltips, popovers, toasts ──────────────────────────────────────────── */
/* Bootstrap appends these to <body>, so they inherit nothing from the page.
   The component variables are set for Bootstrap's own rules, and the visible
   colours directly as well: Chromium kept Bootstrap's defaults for some of
   them although the variable computed to the token (seen on the toast and the
   popover header). */
:root[data-design="pitch"] .tooltip {
  --bs-tooltip-bg: var(--text-primary);
  --bs-tooltip-color: var(--bg-base);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: var(--radius-sm);
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  --bs-tooltip-font-size: 13px;
  font-family: var(--font-sans);
}
:root[data-design="pitch"] .popover {
  --bs-popover-bg: var(--bg-elevated);
  --bs-popover-border-color: var(--border-default);
  --bs-popover-border-radius: var(--radius-md);
  --bs-popover-inner-border-radius: var(--radius-md);
  --bs-popover-header-bg: transparent;
  --bs-popover-header-color: var(--text-primary);
  --bs-popover-body-color: var(--text-secondary);
  --bs-popover-box-shadow: var(--shadow-lg);
  --bs-popover-arrow-border: var(--border-default);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-lg);
}
:root[data-design="pitch"] .popover {
  background-color: var(--bg-elevated);
  border-color: var(--border-default);
}
:root[data-design="pitch"] .popover-body { color: var(--text-secondary); }
:root[data-design="pitch"] .tooltip-inner {
  background-color: var(--text-primary);
  color: var(--bg-base);
}
:root[data-design="pitch"] .popover-header {
  background-color: transparent;
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}
:root[data-design="pitch"] .toast {
  --bs-toast-bg: var(--bg-elevated);
  --bs-toast-color: var(--text-primary);
  --bs-toast-border-color: var(--border-default);
  --bs-toast-border-radius: var(--radius-md);
  --bs-toast-header-bg: transparent;
  --bs-toast-header-color: var(--text-primary);
  --bs-toast-header-border-color: var(--border-subtle);
  --bs-toast-box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  backdrop-filter: none;
  background-color: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
}
:root[data-design="pitch"] .toast-header {
  background-color: transparent;
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}
:root[data-design="pitch"] .toast-header small { color: var(--text-tertiary); }


/* ── Native controls follow the theme (#866) ─────────────────────────────── */
/* The date and time pickers, scrollbars and form controls the browser draws
   itself read color-scheme. */
:root[data-design="pitch"] {
  color-scheme: dark;
}
:root[data-design="pitch"][data-theme="light"] {
  color-scheme: light;
}


/* ── Tables and DataTables (#866) ────────────────────────────────────────── */
/* DataTables 2.x renders .dt-*; older pages still render .dataTables_*. Every
   control is styled under both. DataTables' own stylesheet uses !important on
   its paging buttons, so ours does too, and only there. */
:root[data-design="pitch"] .table,
:root[data-design="pitch"] table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-hover-bg: var(--hover-overlay);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-striped-bg: var(--hover-overlay);
  --bs-table-active-bg: var(--accent-soft-bg);
  color: var(--text-primary);
  background-color: transparent;
}

:root[data-design="pitch"] .table thead th,
:root[data-design="pitch"] table.dataTable thead th {
  background-color: var(--bg-base);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}

/* The vendor style.min.css draws a #eaeaea line on top of every .table cell
   (and DataTables its own on every row): rows are separated by their bottom
   border instead. */
:root[data-design="pitch"] table.dataTable > tbody > tr > *,
:root[data-design="pitch"] .table th,
:root[data-design="pitch"] .table td {
  border-top: none;
}

:root[data-design="pitch"] .table tbody td,
:root[data-design="pitch"] table.dataTable tbody td {
  background-color: transparent;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

:root[data-design="pitch"] .table tbody tr:hover > *,
:root[data-design="pitch"] table.dataTable tbody tr:hover > * {
  background-color: var(--hover-overlay);
}

:root[data-design="pitch"] table.dataTable tbody tr.selected > *,
:root[data-design="pitch"] .table tbody tr.table-active > * {
  background-color: var(--accent-soft-bg);
  box-shadow: none;
  color: var(--text-primary);
}

/* Numbers line up: DataTables marks numeric columns itself */
:root[data-design="pitch"] td.dt-type-numeric,
:root[data-design="pitch"] th.dt-type-numeric,
:root[data-design="pitch"] .table td.text-end,
:root[data-design="pitch"] .ath-num {
  font-variant-numeric: tabular-nums;
}

/* Sticky header keeps its surface when the body scrolls under it */
:root[data-design="pitch"] .dt-scroll-head,
:root[data-design="pitch"] .dataTables_scrollHead,
:root[data-design="pitch"] .table thead.sticky-top th {
  background-color: var(--bg-base);
}

/* Sort arrows */
:root[data-design="pitch"] table.dataTable thead > tr > th .dt-column-order,
:root[data-design="pitch"] table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
:root[data-design="pitch"] table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after {
  color: var(--text-tertiary);
}
:root[data-design="pitch"] table.dataTable thead > tr > th.dt-ordering-asc,
:root[data-design="pitch"] table.dataTable thead > tr > th.dt-ordering-desc {
  color: var(--text-primary);
}

/* Search and page length */
:root[data-design="pitch"] .dt-search input,
:root[data-design="pitch"] .dataTables_filter input,
:root[data-design="pitch"] .dt-length select,
:root[data-design="pitch"] .dataTables_length select {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  min-height: 40px;
  padding: 6px 12px;
}

:root[data-design="pitch"] .dt-search input:focus,
:root[data-design="pitch"] .dataTables_filter input:focus,
:root[data-design="pitch"] .dt-length select:focus,
:root[data-design="pitch"] .dataTables_length select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

:root[data-design="pitch"] .dt-search label,
:root[data-design="pitch"] .dataTables_filter label,
:root[data-design="pitch"] .dt-length label,
:root[data-design="pitch"] .dataTables_length label,
:root[data-design="pitch"] .dt-info,
:root[data-design="pitch"] .dataTables_info {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

/* Paging */
:root[data-design="pitch"] .dt-paging .dt-paging-button,
:root[data-design="pitch"] .dataTables_paginate .paginate_button {
  min-width: 40px;
  min-height: 40px;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
}

:root[data-design="pitch"] .dt-paging .dt-paging-button:hover,
:root[data-design="pitch"] .dataTables_paginate .paginate_button:hover {
  color: var(--text-primary) !important;
  background: var(--hover-overlay) !important;
  border-color: var(--border-default) !important;
}

:root[data-design="pitch"] .dt-paging .dt-paging-button.current,
:root[data-design="pitch"] .dataTables_paginate .paginate_button.current {
  color: var(--on-accent) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}

:root[data-design="pitch"] .dt-paging .dt-paging-button.disabled,
:root[data-design="pitch"] .dataTables_paginate .paginate_button.disabled {
  color: var(--text-disabled) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Empty table */
:root[data-design="pitch"] td.dt-empty,
:root[data-design="pitch"] td.dataTables_empty {
  color: var(--text-tertiary);
  padding: 28px 12px;
}


/* ── Date pickers (#866) ─────────────────────────────────────────────────── */
/* flatpickr and bootstrap-datepicker, one look. The format stays AthlosDate's
   (DD.MM.YYYY); only the surface changes. */
:root[data-design="pitch"] .flatpickr-calendar {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

:root[data-design="pitch"] .flatpickr-calendar.arrowTop:before,
:root[data-design="pitch"] .flatpickr-calendar.arrowTop:after {
  border-bottom-color: var(--bg-elevated);
}

:root[data-design="pitch"] .flatpickr-calendar.arrowBottom:before,
:root[data-design="pitch"] .flatpickr-calendar.arrowBottom:after {
  border-top-color: var(--bg-elevated);
}

:root[data-design="pitch"] .flatpickr-months .flatpickr-month,
:root[data-design="pitch"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-design="pitch"] .flatpickr-current-month input.cur-year,
:root[data-design="pitch"] span.flatpickr-weekday {
  background: transparent;
  color: var(--text-primary);
  fill: var(--text-primary);
}

:root[data-design="pitch"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

:root[data-design="pitch"] span.flatpickr-weekday {
  color: var(--text-tertiary);
  font-family: var(--font-display);
  font-weight: 600;
}

:root[data-design="pitch"] .flatpickr-months .flatpickr-prev-month,
:root[data-design="pitch"] .flatpickr-months .flatpickr-next-month {
  color: var(--text-secondary);
  fill: var(--text-secondary);
}

:root[data-design="pitch"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-design="pitch"] .flatpickr-months .flatpickr-next-month svg {
  fill: currentColor;
}

:root[data-design="pitch"] .flatpickr-months .flatpickr-prev-month:hover,
:root[data-design="pitch"] .flatpickr-months .flatpickr-next-month:hover {
  color: var(--accent);
}

:root[data-design="pitch"] .flatpickr-day {
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

:root[data-design="pitch"] .flatpickr-day:hover,
:root[data-design="pitch"] .flatpickr-day:focus {
  background: var(--hover-overlay);
  border-color: var(--border-default);
}

:root[data-design="pitch"] .flatpickr-day.today {
  border-color: var(--accent);
}

/* A neighbouring month's day is still a clickable date: tertiary, which
   passes AA. Only a day that cannot be picked is disabled. */
:root[data-design="pitch"] .flatpickr-day.prevMonthDay,
:root[data-design="pitch"] .flatpickr-day.nextMonthDay {
  color: var(--text-tertiary);
}

:root[data-design="pitch"] .flatpickr-day.flatpickr-disabled {
  color: var(--text-disabled);
}

:root[data-design="pitch"] .flatpickr-day.selected,
:root[data-design="pitch"] .flatpickr-day.startRange,
:root[data-design="pitch"] .flatpickr-day.endRange {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

:root[data-design="pitch"] .flatpickr-day.inRange {
  background: var(--accent-soft-bg);
  border-color: transparent;
  box-shadow: none;
  color: var(--text-primary);
}

:root[data-design="pitch"] .flatpickr-time input,
:root[data-design="pitch"] .flatpickr-time .flatpickr-am-pm,
:root[data-design="pitch"] .flatpickr-time .flatpickr-time-separator {
  color: var(--text-primary);
  background: transparent;
}

:root[data-design="pitch"] .datepicker.dropdown-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  padding: 8px;
  font-family: var(--font-sans);
}

/* The pointer: :before is its outline, :after its fill. Below the input it
   points up (border-bottom), above the input (orient-top) down (border-top). */
:root[data-design="pitch"] .datepicker-dropdown:before {
  border-bottom-color: var(--border-default);
}
:root[data-design="pitch"] .datepicker-dropdown:after {
  border-bottom-color: var(--bg-elevated);
}
:root[data-design="pitch"] .datepicker-dropdown.datepicker-orient-top:before {
  border-top-color: var(--border-default);
}
:root[data-design="pitch"] .datepicker-dropdown.datepicker-orient-top:after {
  border-top-color: var(--bg-elevated);
}

:root[data-design="pitch"] .datepicker table tr th {
  color: var(--text-secondary);
}

:root[data-design="pitch"] .datepicker table tr th.dow {
  color: var(--text-tertiary);
  font-family: var(--font-display);
  font-weight: 600;
}

:root[data-design="pitch"] .datepicker table tr td,
:root[data-design="pitch"] .datepicker table tr td span {
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

:root[data-design="pitch"] .datepicker table tr td.day:hover,
:root[data-design="pitch"] .datepicker table tr td.focused,
:root[data-design="pitch"] .datepicker table tr td span:hover,
:root[data-design="pitch"] .datepicker .datepicker-switch:hover,
:root[data-design="pitch"] .datepicker .prev:hover,
:root[data-design="pitch"] .datepicker .next:hover {
  background: var(--hover-overlay);
}

:root[data-design="pitch"] .datepicker table tr td.old,
:root[data-design="pitch"] .datepicker table tr td.new {
  color: var(--text-tertiary);
}

:root[data-design="pitch"] .datepicker table tr td.disabled {
  color: var(--text-disabled);
}

:root[data-design="pitch"] .datepicker table tr td.today {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--text-primary);
}

:root[data-design="pitch"] .datepicker table tr td.active,
:root[data-design="pitch"] .datepicker table tr td.active:hover,
:root[data-design="pitch"] .datepicker table tr td span.active {
  background: var(--accent);
  background-image: none;
  border-color: var(--accent);
  color: var(--on-accent);
  text-shadow: none;
}


/* ── Multi-select (#866) ─────────────────────────────────────────────────── */
:root[data-design="pitch"] select[multiple].form-select,
:root[data-design="pitch"] select[multiple].form-control {
  background-image: none;
  padding: 6px;
}

:root[data-design="pitch"] select[multiple] option {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

:root[data-design="pitch"] select[multiple] option:checked {
  background: var(--accent-soft-bg);
  color: var(--text-primary);
}


/* ── Progress, pagination ────────────────────────────────────────────────── */
:root[data-design="pitch"] .progress,
:root[data-design="pitch"] .progress-stacked {
  --bs-progress-bg: var(--hover-overlay);
  --bs-progress-bar-bg: var(--accent);
  --bs-progress-bar-color: var(--on-accent);
  --bs-progress-border-radius: 9999px;
  height: 8px;
  background: var(--active-overlay);
}
:root[data-design="pitch"] .progress-stacked > .progress {
  height: 100%;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
:root[data-design="pitch"] .progress-stacked > .progress > .progress-bar { border-radius: 0; }
:root[data-design="pitch"] .progress-bar { background-color: var(--accent); color: var(--on-accent); }
:root[data-design="pitch"] .progress-bar.bg-success { background-color: var(--success) !important; }
:root[data-design="pitch"] .progress-bar.bg-warning { background-color: var(--warning) !important; }
:root[data-design="pitch"] .progress-bar.bg-danger  { background-color: var(--danger) !important; }
:root[data-design="pitch"] .progress-bar.bg-info    { background-color: var(--info) !important; }

:root[data-design="pitch"] .pagination {
  gap: 4px;
  --bs-pagination-border-width: 0;
}
:root[data-design="pitch"] .page-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md) !important;
  background: transparent;
  color: var(--text-secondary);
  font: 500 14px var(--font-sans);
  font-variant-numeric: tabular-nums;
}
:root[data-design="pitch"] .page-link:hover { background: var(--hover-overlay); color: var(--text-primary); border-color: var(--border-default); }
:root[data-design="pitch"] .page-link:focus { box-shadow: 0 0 0 3px var(--focus-ring); background: transparent; color: var(--text-primary); }
:root[data-design="pitch"] .page-item.active .page-link,
:root[data-design="pitch"] .page-link.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
:root[data-design="pitch"] .page-item.disabled .page-link,
:root[data-design="pitch"] .page-link.disabled { background: transparent; color: var(--text-disabled); }


/* ==========================================================================
   Athlos components — unscoped, token-only, render in either design
   ========================================================================== */

/* Section heading / label: the small uppercase line above a block. */
.ath-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ath-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.ath-section-heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.ath-section-heading__aside { font-size: 13px; color: var(--text-tertiary); }

/* Big number: Barlow Condensed 700, tabular digits, the unit smaller and grey. */
.ath-big-number {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ath-big-number--xl { font-size: 44px; line-height: 1; }
.ath-big-number__unit {
  margin-left: 2px;
  font-size: 0.6em;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* Metric tile: label, big number, one line of context. */
.ath-metric-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.ath-metric-tile--accent { border-color: rgba(var(--accent-rgb), 0.3); }
.ath-metric-tile--accent .ath-label { color: var(--accent); }
.ath-metric-tile__context { font-size: 13px; color: var(--text-secondary); }

/* Status pill and semafor dot. Colour is never the only signal: a pill always
   carries its word, grey is a hollow ring rather than a fourth fill, and the
   dot is decorative (aria-hidden) beside a word or a label. */
.ath-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ath-pill--green  { background: var(--success-soft-bg); border-color: var(--success-soft-border); color: var(--success-text); }
.ath-pill--orange { background: var(--warning-soft-bg); border-color: var(--warning-soft-border); color: var(--warning-text); }
.ath-pill--red    { background: var(--danger-soft-bg);  border-color: var(--danger-soft-border);  color: var(--danger-text); }
.ath-pill--grey   { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }
.ath-pill--info   { background: var(--info-soft-bg); border-color: var(--info-soft-border); color: var(--info-text); }

.ath-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}
.ath-pill .ath-dot { width: 7px; height: 7px; }
.ath-dot--green  { background: var(--success); }
.ath-dot--orange { background: var(--warning); }
.ath-dot--red    { background: var(--danger); }
.ath-dot--grey   { background: transparent; border: 2px solid var(--text-tertiary); }
.ath-pill--grey .ath-dot { background: transparent; border: 2px solid var(--text-tertiary); }

/* Segmented switch for markup that is not a .nav (buttons with role="tab"). */
.ath-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}
.ath-segment__item {
  min-height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: 500 14px var(--font-sans);
  cursor: pointer;
}
.ath-segment__item:hover { color: var(--text-primary); background: var(--hover-overlay); }
.ath-segment__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ath-segment__item[aria-selected="true"],
.ath-segment__item.is-active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}


/* Jersey icon (#875): the collar and the bottom of the shading gradient are a
   dark overlay on the accent fill. Classic's black lives in classic-legacy.css. */
:root[data-design="pitch"] .jersey-icon .jersey-collar { fill: var(--chart-ink-dark); fill-opacity: 0.22; }
:root[data-design="pitch"] .jersey-icon .jersey-shade { stop-color: var(--chart-ink-dark); stop-opacity: 0.15; }

/* File inputs (#884): the 44px Pitch field left Bootstrap's file button
   half-height and pale; it fills the field's height on the field's surface. */
:root[data-design="pitch"] .form-control[type="file"] { padding: 0 14px 0 0; line-height: 42px; }
:root[data-design="pitch"] .form-control[type="file"]::file-selector-button {
  margin: 0 14px 0 0;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 0;
  border-right: 1px solid var(--border-strong);
}
/* ...and the small variant keeps its 36px height beside .btn-sm neighbours */
:root[data-design="pitch"] .form-control-sm[type="file"] { line-height: 34px; }
:root[data-design="pitch"] .form-control-sm[type="file"]::file-selector-button { height: 34px; padding: 0 10px; margin-right: 10px; }

/* Sign-in layout (#886). Here rather than in base-auth.html so a page the
   review script turns Pitch in the browser gets them too. The vendor auth card
   paints links near-black and Bootstrap's danger red is under AA on the petrol
   card. */
:root[data-design="pitch"] .auth-wrapper a:not(.btn) { color: var(--accent); }
:root[data-design="pitch"] .auth-wrapper .text-danger { color: var(--danger-text) !important; }
:root[data-design="pitch"] .auth-wrapper .text-success { color: var(--success-text) !important; }
/* the sign-in and reset pages spell out their shape (14px card, 8px fields,
   DejaVu brand); Pitch's radii and face — the card only on those pages */
:root[data-design="pitch"] .modal-content:has(.login-icon-wrap, .login-input, .auth-input, .success-icon-wrap) { border-radius: var(--radius-lg) !important; }
:root[data-design="pitch"] :is(.login-input, .btn-login, .login-error, .auth-input, .btn-auth, .auth-error) { border-radius: var(--radius-md); }
:root[data-design="pitch"] .login-branding-text { font-family: var(--font-display); }
:root[data-design="pitch"] .license-content { background-color: var(--bg-base); color: var(--text-primary); }
:root[data-design="pitch"] .license-content { border-color: var(--border-default) !important; }
/* club choice (#885): the contact line on a hovered club button, and the
   selected club's border in the Pitch accent rather than Bootstrap blue */
:root[data-design="pitch"] .auth-wrapper .btn-outline-primary .text-muted { color: var(--text-secondary) !important; }
:root[data-design="pitch"] .auth-wrapper .btn.border-primary { border-color: var(--accent) !important; }
/* Error and service pages (#888), scoped to them by their vendor artwork:
   the white illustration would be a slab on the Pitch field, so the status
   code stands in its place (rendered only under Pitch), and the message takes
   the display face */
:root[data-design="pitch"] .auth-wrapper .text-center > img[src*="/images/error/"] { display: none; }
:root[data-design="pitch"] .auth-wrapper .text-center:has(> img[src*="/images/error/"]) > h5 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
:root[data-design="pitch"] .auth-wrapper .err-code { margin-top: 2rem; font-size: 6rem; line-height: 1; color: var(--accent); }
/* the offline page: the Pitch field and text instead of the vendor night scene */
:root[data-design="pitch"] .auth-wrapper.offline { background: var(--bg-base); }
:root[data-design="pitch"] .auth-wrapper.offline :is(.moon, .s-img-1, .s-img-2, .boat-img, .sark) { display: none; }
:root[data-design="pitch"] .auth-wrapper.offline .off-content .text-white { color: var(--text-primary) !important; }
:root[data-design="pitch"] .auth-wrapper.offline .off-content h1 { font-family: var(--font-display); }
/* without the ship the absolutely placed text would sit at the bottom of an
   empty screen; it joins the flow, centred */
:root[data-design="pitch"] .auth-wrapper.offline .off-main { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
:root[data-design="pitch"] .auth-wrapper.offline .off-main .off-content { position: static; }

/* ── PDF export (#891): the "Generating PDF" dialog and its two toasts,
   drawn by pdf-export.js. The dialog is up while the page is on paper
   (AthlosPaper), so it is seen in the light theme even from Pitch dark. ── */
:root[data-design="pitch"] .pdf-export-backdrop { background: var(--backdrop); }
:root[data-design="pitch"] .pdf-export-dialog {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
:root[data-design="pitch"] .pdf-export-dialog .spinner-border { color: var(--accent) !important; }
:root[data-design="pitch"] .pdf-export-toast {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}
:root[data-design="pitch"] .pdf-export-toast--success { border-left: 4px solid var(--success); }
:root[data-design="pitch"] .pdf-export-toast--success i { color: var(--success-text); }
:root[data-design="pitch"] .pdf-export-toast--error { border-left: 4px solid var(--danger); }
:root[data-design="pitch"] .pdf-export-toast--error i { color: var(--danger-text); }