/* Self-hosted (not a Google Fonts CDN link) so the app stays self-contained offline. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/PlusJakartaSans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/PlusJakartaSans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/PlusJakartaSans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/PlusJakartaSans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/PlusJakartaSans-800.woff2") format("woff2");
}
/* Parent app display face (ADR 0041) - display moments only (wordmark, header titles,
   date-block day numbers, big amounts), never body/UI text; see --sl-app-display-font below. */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-serif-display-400.woff2") format("woff2");
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(14, 23, 38, 0.5);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Reserves room for .sl-console-footer (see _Layout.cshtml). Scoped here, not on body directly,
   so it doesn't also push 60px of blank space below the app shell's own sticky tab bar - that
   shell has no footer to make room for. */
body:not(.sl-app) {
  margin-bottom: 60px;
}

/* Bootstrap's own .form-control-sm/.form-select-sm set font-size: 0.875rem, which still computes
   under 16px on a phone even with the root font-size fix above (Stage 0, mobile-app.md) - iOS
   Safari zooms on focus regardless of which rule made an input small. Caught by
   MobileLayoutTests's real-browser assertion, not by review; every "sm" field across the console
   (the header search box among them) needs this, not just one. Desktop is untouched. */
@media (max-width: 767.98px) {
  .form-control-sm,
  .form-select-sm {
    font-size: 16px;
  }
}

body.sl-console {
  margin-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Briefly highlights a row the collection controller has just inserted or replaced, so an
   in-place change draws the eye without a full-page reload. Table rows animate per-cell (a
   <tr> itself can't have a background transition applied cleanly); a .grid__row (a div, not a
   table row) animates directly. */
.sideline-flash > td {
  animation: sideline-flash 1.4s ease-out;
}

.grid__row.sideline-flash {
  animation: sideline-flash 1.4s ease-out;
}

@keyframes sideline-flash {
  from {
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
  }
  to {
    background-color: transparent;
  }
}

/* ---------------------------------------------------------------------------------------
   Parent registration wizard — a distinct, mobile-first visual language scoped to this one
   flow via .sl-registration, so it doesn't bleed into the rest of the (Bootstrap-default)
   app. Colours retexture Bootstrap's own CSS variables rather than replacing components.

   Per the sideline-mobile-frontend design skill: full-viewport, edge-to-edge, no
   device-frame/bezel. .sl-registration is the full-bleed page canvas (and, via
   _WizardLayout.cshtml, the only header on the page); .sl-wizard-shell/.sl-wizard-header-inner
   cap just the *content* column at a comfortable reading width so text and inputs don't
   stretch edge-to-edge on a wide desktop monitor — the canvas and header background still
   bleed full width around it, so the page reads as one adaptive flow rather than a
   fixed-size phone mockup floating in the middle of the viewport.
   --------------------------------------------------------------------------------------- */

/* Bootstrap's display utilities (.d-flex and friends) are !important, which beats the UA
   stylesheet's [hidden] rule — so a hidden nav row or field block would stay on screen. Every
   controller here hides by setting the `hidden` attribute, so make it win. */
[hidden] {
  display: none !important;
}

/* The wizard/dashboard canvas is the whole page, so the body behind it has to match — otherwise
   content shorter than the viewport leaves a white band below the canvas. */
body:has(> .sl-registration) {
  background: #f4f6f8;
}

.sl-registration {
  --bs-primary: #0e1726;
  --bs-primary-rgb: 14, 23, 38;
  --bs-body-bg: #f4f6f8;
  --bs-border-color: #e3e8ee;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-secondary-color: #5b6577;
  background: var(--bs-body-bg);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/* min-height: 100vh belongs only to .sl-registration as a standalone page canvas (the wizard
   layout, where it is a direct child of body - see the background rule above). Every /my and
   /clubs/.../app page also wraps its content in .sl-registration for the same Bootstrap
   retexturing, but nested inside .sl-app-content, which already reserves the screen height
   around the header and tab bar (ADR 0041). A second, unscoped 100vh here stacked on top of
   that and left a screen's worth of blank space below the tab bar on any short page. */
body:has(> .sl-registration) .sl-registration {
  min-height: 100vh;
}

.sl-wizard-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

/* The parent app's chrome only (ADR 0041 shell v2, building on Stage 1 of mobile-app.md) -
   everything inside a page reuses .sl-registration's existing mobile-first retexturing, on
   purpose: a third component vocabulary alongside .sl-console-* would be the worst outcome of
   this feature. The mobile hexes below were previously hard-coded inline; they now live as
   --sl-app-* custom properties on .sl-app, matching the sideline-mobile-frontend skill's palette. */
/* .sl-help (the public help pages) and .sl-help-sheet (the bottom sheet, which also opens on the
   wizard layout; ADR 0066) borrow these tokens, so help and the app share one palette. */
.sl-app,
.sl-help,
.sl-help-sheet,
.sl-sponsor-sheet {
  --sl-app-navy: #0e1726;
  --sl-app-amber: #e9a23b;
  --sl-app-canvas: #f4f6f8;
  --sl-app-card: #fff;
  --sl-app-border: #e3e8ee;
  --sl-app-muted: #5b6577;
  --sl-app-good: #0b5f4a;
  --sl-app-good-tint: #e1f1eb;
  --sl-app-bad: #b4291f;
  --sl-app-bad-text: #8e2119;
  --sl-app-bad-tint: #fbe9e7;
  --sl-app-amber-tint: #fdf1d9;
  --sl-app-display-font: "DM Serif Display", serif;
  /* The six child colours (ADR 0078), by the child slot in the family. */
  --sl-child-0: #0b5f4a;
  --sl-child-1: #2d5b8c;
  --sl-child-2: #8a6118;
  --sl-child-3: #7a3e8e;
  --sl-child-4: #b4291f;
  --sl-child-5: #3f6b2a;
}

/* ---------------------------------------------------------------------------------------
   Bootstrap theme - one place that maps Bootstrap's own variables and component variables onto
   the shared Sideline palette (both design-system skills share it), for EVERY surface:
   body.sl-console (staff console), body.sl-app (parent/coach app shell), body.sl-wizard and
   .sl-registration (public wizard, Identity pages). The product rule is that no screen shows
   stock Bootstrap blue/grey, so a plain .btn-primary, .alert-info, .badge, .page-link, .card or
   .form-check-input must already look like Sideline wherever it appears. Nothing here is
   per-page. Selectors use :where() (zero specificity) so any more specific component or
   surface rule further down still wins; a surface only needs its own rule to differ.
   --------------------------------------------------------------------------------------- */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) {
  --bs-primary: #0e1726;
  --bs-primary-rgb: 14, 23, 38;
  --bs-success: #0b5f4a;
  --bs-success-rgb: 11, 95, 74;
  --bs-danger: #b4291f;
  --bs-danger-rgb: 180, 41, 31;
  --bs-warning: #e9a23b;
  --bs-warning-rgb: 233, 162, 59;
  --bs-info: #1b2739;
  --bs-info-rgb: 27, 39, 57;
  --bs-secondary: #5b6577;
  --bs-secondary-rgb: 91, 101, 119;
  --bs-light: #f4f6f8;
  --bs-light-rgb: 244, 246, 248;
  --bs-dark: #0e1726;
  --bs-dark-rgb: 14, 23, 38;
  --bs-body-color: #0e1726;
  --bs-body-color-rgb: 14, 23, 38;
  --bs-emphasis-color: #0e1726;
  --bs-secondary-color: #5b6577;
  --bs-secondary-bg: #e3e8ee;
  --bs-tertiary-bg: #f4f6f8;
  --bs-border-color: #e3e8ee;
  --bs-border-color-translucent: #e3e8ee;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-link-color: #0e1726;
  --bs-link-color-rgb: 14, 23, 38;
  --bs-link-hover-color: #8a6118;
  --bs-link-hover-color-rgb: 138, 97, 24;
  --bs-focus-ring-color: rgba(14, 23, 38, 0.25);
  --bs-code-color: #0e1726;
  --bs-highlight-bg: #fdf1d9;
  --bs-primary-bg-subtle: #e7eefa;
  --bs-primary-border-subtle: #c9d6ee;
  --bs-primary-text-emphasis: #0e1726;
  --bs-secondary-bg-subtle: #eef1f5;
  --bs-secondary-border-subtle: #e3e8ee;
  --bs-secondary-text-emphasis: #5b6577;
  --bs-success-bg-subtle: #e1f1eb;
  --bs-success-border-subtle: #b5d9cc;
  --bs-success-text-emphasis: #0b5f4a;
  --bs-info-bg-subtle: #e7eefa;
  --bs-info-border-subtle: #c9d6ee;
  --bs-info-text-emphasis: #0e1726;
  --bs-warning-bg-subtle: #fdf1d9;
  --bs-warning-border-subtle: #f3d9a4;
  --bs-warning-text-emphasis: #8a6118;
  --bs-danger-bg-subtle: #fbe9e7;
  --bs-danger-border-subtle: #f1c1bb;
  --bs-danger-text-emphasis: #8e2119;
  --bs-light-bg-subtle: #f4f6f8;
  --bs-light-border-subtle: #e3e8ee;
  --bs-dark-bg-subtle: #e3e8ee;
  --bs-dark-border-subtle: #c9d2dd;
  --bs-dark-text-emphasis: #0e1726;
}

/* Buttons. Primary is the amber fill with navy text; secondary is the navy outline; the rest
   follow the console skill's variant table. Bootstrap's grey .btn-secondary becomes solid navy,
   so a stray one cannot show stock grey. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn {
  --bs-btn-font-weight: 700;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-primary,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-warning {
  --bs-btn-bg: #e9a23b;
  --bs-btn-border-color: #e9a23b;
  --bs-btn-color: #0e1726;
  --bs-btn-hover-bg: #d8912d;
  --bs-btn-hover-border-color: #d8912d;
  --bs-btn-hover-color: #0e1726;
  --bs-btn-active-bg: #d8912d;
  --bs-btn-active-border-color: #d8912d;
  --bs-btn-active-color: #0e1726;
  --bs-btn-disabled-bg: #e9a23b;
  --bs-btn-disabled-border-color: #e9a23b;
  --bs-btn-disabled-color: #0e1726;
  --bs-btn-focus-shadow-rgb: 14, 23, 38;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-secondary,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-dark,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-info {
  --bs-btn-bg: #0e1726;
  --bs-btn-border-color: #0e1726;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1b2739;
  --bs-btn-hover-border-color: #1b2739;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1b2739;
  --bs-btn-active-border-color: #1b2739;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #0e1726;
  --bs-btn-disabled-border-color: #0e1726;
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 14, 23, 38;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-success {
  --bs-btn-bg: #0b5f4a;
  --bs-btn-border-color: #0b5f4a;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #094a3a;
  --bs-btn-hover-border-color: #094a3a;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #094a3a;
  --bs-btn-active-border-color: #094a3a;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #0b5f4a;
  --bs-btn-disabled-border-color: #0b5f4a;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-danger {
  --bs-btn-bg: #b4291f;
  --bs-btn-border-color: #b4291f;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #8e2119;
  --bs-btn-hover-border-color: #8e2119;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #8e2119;
  --bs-btn-active-border-color: #8e2119;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #b4291f;
  --bs-btn-disabled-border-color: #b4291f;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-secondary,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-dark,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-info {
  --bs-btn-color: #0e1726;
  --bs-btn-border-color: #0e1726;
  --bs-btn-hover-bg: #0e1726;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #0e1726;
  --bs-btn-active-bg: #0e1726;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #0e1726;
  --bs-btn-disabled-color: #0e1726;
  --bs-btn-disabled-border-color: #0e1726;
  --bs-btn-focus-shadow-rgb: 14, 23, 38;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-primary,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-warning {
  --bs-btn-color: #8a6118;
  --bs-btn-border-color: #8a6118;
  --bs-btn-hover-bg: #8a6118;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #8a6118;
  --bs-btn-active-bg: #8a6118;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #8a6118;
  --bs-btn-disabled-color: #8a6118;
  --bs-btn-disabled-border-color: #8a6118;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-danger {
  --bs-btn-color: #b4291f;
  --bs-btn-border-color: #b4291f;
  --bs-btn-hover-bg: #b4291f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #b4291f;
  --bs-btn-active-bg: #b4291f;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #b4291f;
  --bs-btn-disabled-color: #b4291f;
  --bs-btn-disabled-border-color: #b4291f;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-outline-success {
  --bs-btn-color: #0b5f4a;
  --bs-btn-border-color: #0b5f4a;
  --bs-btn-hover-bg: #0b5f4a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #0b5f4a;
  --bs-btn-active-bg: #0b5f4a;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #0b5f4a;
  --bs-btn-disabled-color: #0b5f4a;
  --bs-btn-disabled-border-color: #0b5f4a;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .btn-link {
  --bs-btn-color: #0e1726;
  --bs-btn-hover-color: #8a6118;
  --bs-btn-active-color: #8a6118;
  --bs-btn-disabled-color: #5b6577;
}

/* Unchecked checkboxes and radios: Bootstrap's translucent default border nearly vanishes on a
   white or tinted canvas, so use the design system's strong neutral. Declared before the
   :focus and :checked rules below so those still win. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-check-input {
  --bs-border-color: #8793a5;
  border-color: #8793a5;
}

/* Date and time inputs: the same height as every other field, the navy accent for the native
   picker, and a pointer on the calendar/clock glyph. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-control:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
  min-height: calc(1.5em + 0.75rem + 2px);
  accent-color: #0e1726;
  color-scheme: light;
  appearance: none;
  -webkit-appearance: none;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-control.form-control-sm:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
  min-height: calc(1.5em + 0.5rem + 2px);
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

/* Disclosures (<details>/<summary>): the browser's own triangle is replaced by the design
   system's chevron, drawn in CSS so no markup is needed. It points right when closed and turns
   down when open. A summary styled as a button (.btn) is a button first and gets no chevron. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) summary:not(.btn) {
  cursor: pointer;
  list-style: none;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) summary:not(.btn)::-webkit-details-marker {
  display: none;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) summary:not(.btn)::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.65em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.1em) rotate(-45deg);
  transition: transform 0.12s ease;
  opacity: 0.7;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) details[open] > summary:not(.btn)::before {
  transform: translateY(-0.2em) rotate(45deg);
}

/* Form controls: navy focus border and checked state in place of Bootstrap's hard-coded blue. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-control:focus,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-select:focus,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-check-input:focus {
  border-color: #0e1726;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-check-input:checked,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-check-input[type="checkbox"]:indeterminate {
  background-color: #0e1726;
  border-color: #0e1726;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230e1726'/%3e%3c/svg%3e");
}

:where(body.sl-app) .form-control,
:where(body.sl-app) .form-select {
  /* The console and the wizard get this from --bs-body-bg; the app shell keeps a white canvas
     variable-free, so give its fields the same canvas-tinted fill. */
  background-color: #f4f6f8;
}

/* Components that default to Bootstrap blue or grey through their own variables. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .card {
  --bs-card-bg: #fff;
  --bs-card-border-color: #e3e8ee;
  --bs-card-cap-bg: #f4f6f8;
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .nav-pills {
  --bs-nav-pills-link-active-bg: #0e1726;
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-border-radius: 999px;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .nav {
  --bs-nav-link-color: #0e1726;
  --bs-nav-link-hover-color: #8a6118;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .pagination {
  --bs-pagination-color: #0e1726;
  --bs-pagination-hover-color: #0e1726;
  --bs-pagination-hover-bg: #f4f6f8;
  --bs-pagination-hover-border-color: #e3e8ee;
  --bs-pagination-focus-color: #0e1726;
  --bs-pagination-focus-bg: #f4f6f8;
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(14, 23, 38, 0.25);
  --bs-pagination-active-bg: #0e1726;
  --bs-pagination-active-border-color: #0e1726;
  --bs-pagination-active-color: #fff;
  --bs-pagination-border-color: #e3e8ee;
  --bs-pagination-disabled-color: #5b6577;
  --bs-pagination-disabled-border-color: #e3e8ee;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .list-group {
  --bs-list-group-bg: #fff;
  --bs-list-group-border-color: #e3e8ee;
  --bs-list-group-active-bg: #0e1726;
  --bs-list-group-active-border-color: #0e1726;
  --bs-list-group-action-hover-bg: #f4f6f8;
  --bs-list-group-action-active-bg: #e7eefa;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .dropdown-menu {
  --bs-dropdown-border-color: #e3e8ee;
  --bs-dropdown-border-radius: 0.75rem;
  --bs-dropdown-link-active-bg: #0e1726;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-hover-bg: #f4f6f8;
  --bs-dropdown-link-color: #0e1726;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .progress {
  --bs-progress-bg: #e3e8ee;
  --bs-progress-bar-bg: #e9a23b;
  --bs-progress-bar-color: #0e1726;
  --bs-progress-border-radius: 999px;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .accordion {
  --bs-accordion-active-bg: #f4f6f8;
  --bs-accordion-active-color: #0e1726;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(233, 162, 59, 0.35);
  --bs-accordion-border-color: #e3e8ee;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .table {
  --bs-table-border-color: #e3e8ee;
  --bs-table-striped-bg: #f4f6f8;
  --bs-table-hover-bg: #f4f6f8;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .modal {
  --bs-modal-border-color: #e3e8ee;
  --bs-modal-border-radius: 1rem;
  --bs-modal-header-border-color: #e3e8ee;
}

/* Alerts are the mobile skill's callout banner: tinted background, coloured text. Success,
   danger and warning take the subtle palette variables above; light and secondary are the muted
   informational callout, primary the info tint. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .alert {
  --bs-alert-border-radius: 0.75rem;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .alert-light,
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .alert-secondary {
  --bs-alert-color: #5b6577;
  --bs-alert-bg: #eef1f5;
  --bs-alert-border-color: #e3e8ee;
  --bs-alert-link-color: #0e1726;
}

/* Badges: pill-shaped and in the house weight; the bg-* and text-bg-* colours come from the
   variables above, with the grey and light variants kept readable on their tints. */
:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .badge {
  --bs-badge-border-radius: 999px;
  --bs-badge-font-weight: 700;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .text-bg-light {
  color: #5b6577 !important;
  background-color: #eef1f5 !important;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .text-bg-secondary {
  color: #5b6577 !important;
  background-color: #e3e8ee !important;
}

:where(body.sl-console, body.sl-app, body.sl-wizard, .sl-registration) .text-warning {
  color: #8a6118 !important;
}

/* The whole shell - header, content and tab bar - is capped at a phone-plausible width and
   centered, not just the content inside it. Without this, a viewport wider than a phone (a
   parent who opens /my on a laptop, or forces "desktop site" in their mobile browser - which has
   no effect at all once the PWA is installed and running standalone, since there is no browser
   chrome to hold that toggle) stretched the header and tab bar full-bleed while leaving the
   content itself narrow, which read as broken rather than merely not designed for the width.
   body.sl-app's own background matches .sl-app-content's canvas colour so the margin either side
   reads as an intentional frame, not a layout accident. */
body.sl-app {
  background: var(--sl-app-canvas, #f4f6f8);
}

.sl-app-header,
.sl-app-content,
.sl-app-tabbar {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sl-app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1rem;
  padding-top: calc(env(safe-area-inset-top) + 0.75rem);
  background: var(--sl-app-navy);
  color: #fff;
}

.sl-app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sl-app-brand {
  font-family: var(--sl-app-display-font);
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
}

.sl-app-brand span {
  color: var(--sl-app-amber);
}

.sl-app-header-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  font-size: 0.8rem;
}

/* Context chip (ADR 0042): the current context, linking to /my/contexts when there are several. */
.sl-app-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 14rem;
}

.sl-app-context-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-app-context-chip-roles {
  opacity: 0.75;
}

/* Coach Today banner (card 216): a check has run out or runs out within 30 days. Amber while it
   is coming up, red once it has run out; the whole banner is one link to My coach details. */
.sl-check-banner {
  display: block;
  margin: 0.75rem 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sl-app-amber);
  border-radius: 12px;
  background: var(--sl-app-amber-tint);
  color: var(--sl-app-navy);
  text-decoration: none;
}

.sl-check-banner.sl-check-banner-expired {
  border-color: var(--sl-app-bad);
  background: var(--sl-app-bad-tint);
}

.sl-check-banner-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.sl-check-banner-line {
  font-size: 0.85rem;
}

.sl-check-banner-action {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
}

/* The switchable chip reads as a control, a pill, not a link (card 216): a filled outline, no
   underline, and a pressed state. A chip with nothing to switch to stays plain text. */
.sl-app-context-pill {
  color: #fff;
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.sl-app-context-pill:hover,
.sl-app-context-pill:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.sl-app-context-pill:active {
  background: rgba(255, 255, 255, 0.3);
}

.sl-app-context-pill:focus-visible {
  outline: 2px solid var(--sl-app-amber);
  outline-offset: 2px;
}

/* Today card count (ADR 0042): the big number on a club context's task card. */
.sl-today-count {
  font-family: var(--sl-app-display-font);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--sl-app-navy);
  align-self: center;
}

.sl-app-greeting {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.sl-app-header-title {
  font-family: var(--sl-app-display-font);
  font-size: 1.3rem;
  color: #fff;
  margin-top: 0.4rem;
}

/* A page reached by drilling in from a tab (Money, a child's Details, ...) shows a back link
   beside its title, on the same row so it reads as one heading rather than a separate control. */
.sl-app-header-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-app-header-title-row .sl-app-header-title {
  margin-top: 0;
  min-width: 0;
  /* A long title (a match: "Under 16s Eagles v Walton Rovers U16") wraps to two lines, then cuts. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.sl-app-header-back {
  display: flex;
  align-items: center;
  color: #fff;
  opacity: 0.85;
}

.sl-app-header-back:hover {
  opacity: 1;
}

/* The tab bar is fixed to the bottom of the screen, so the footer (_SiteFooter) that follows the
   content reserves its height (56px) plus the device's bottom safe-area inset. Without that the
   last item on any app-shell page sits under the bar. */
.sl-app-content {
  min-height: calc(100vh - 56px - 56px - 7rem);
  padding-bottom: 1rem;
  background: var(--sl-app-canvas);
}

/* The public club page inside the signed-in app shell: the shell has no side gutter of its own,
   and the page's card rows (with their negative gutters) ran past a phone screen without one. */
.sl-app-content .sl-public-club {
  padding: 1rem 16px 0;
  overflow-x: clip;
}

.sl-app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--sl-app-card);
  border-top: 1px solid var(--sl-app-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.sl-app-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 56px;
  color: var(--sl-app-muted);
  text-decoration: none;
  position: relative;
}

.sl-app-tabbar-item.active {
  color: var(--sl-app-navy);
}

/* A colour change alone (muted grey to navy) reads as barely-there against a white bar - this
   amber top bar is the same "you are here" accent the child selector already uses (its active
   card border), so the current tab reads at a glance, not just on close inspection. */
.sl-app-tabbar-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--sl-app-amber);
}

.sl-app-tabbar-icon {
  width: 22px;
  height: 22px;
}

.sl-app-tabbar-label {
  font-size: 10px;
  font-weight: 600;
}

.sl-app-tabbar-dot {
  position: absolute;
  top: 2px;
  right: calc(50% - 16px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sl-app-bad);
  border: 1.5px solid var(--sl-app-card);
}

/* A count on a tab (unread conversations), in place of the dot. */
.sl-app-tabbar-badge {
  position: absolute;
  top: 3px;
  right: calc(50% - 30px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sl-app-bad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--sl-app-card);
  box-sizing: content-box;
}

/* Icons (ADR 0041) - stroke matches whatever text colour the icon sits in. */
.sl-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Child chips (ADR 0078): one chip per child on the navy band, the selected one white. A child's
   colour (--sl-child-0..5) is their position among the family's children and is the same
   everywhere in the parent app. */
.sl-child-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 1rem 0.75rem;
  background: var(--sl-app-navy);
  max-width: 640px;
  margin: 0 auto;
}

.sl-child-chip {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.75rem 0 4px;
  border-radius: 18px;
  border: 1px solid #33415a;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.sl-child-chip-text,
.sl-child-chip-add {
  padding: 0 0.75rem;
}

.sl-child-chip.on {
  background: #fff;
  border-color: #fff;
  color: var(--sl-app-navy);
}

.sl-child-chip-add {
  border-style: dashed;
  color: #c9d1dc;
}

.sl-child-chip:hover {
  color: inherit;
}

.sl-child-live-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2fbf8f;
  border: 2px solid var(--sl-app-navy);
}

.sl-child-avatar {
  position: relative;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
}

.sl-child-avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 0.62rem;
}

.sl-child-avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 0.85rem;
}

.sl-child-c0 { background: var(--sl-child-0); }
.sl-child-c1 { background: var(--sl-child-1); }
.sl-child-c2 { background: var(--sl-child-2); }
.sl-child-c3 { background: var(--sl-child-3); }
.sl-child-c4 { background: var(--sl-child-4); }
.sl-child-c5 { background: var(--sl-child-5); }

/* Live-match banner (ADR 0078): a green tinted row above the identity line, one per match on now. */
.sl-live-banner-wrap {
  margin: 0.75rem 1rem 0;
}

.sl-live-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sl-app-good);
  border-radius: 14px;
  background: var(--sl-app-good-tint);
  color: var(--sl-app-good);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.sl-live-banner:hover {
  color: var(--sl-app-good);
}

/* Identity line: who Home is showing (big avatar, first name in the display font, team and club). */
.sl-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0;
  padding: 0.15rem 0.15rem 0;
  color: inherit;
  text-decoration: none;
}

.sl-identity:hover {
  color: inherit;
}

.sl-identity-name {
  display: block;
  font-family: var(--sl-app-display-font);
  font-size: 1.6rem;
  line-height: 1.1;
}

.sl-identity > .sl-icon:last-child {
  color: var(--sl-app-muted);
  flex-shrink: 0;
}

/* Quick links: Stats, Payments, Details as three equal tiles with hairline dividers. */
.sl-quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.sl-quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.sl-quick-link + .sl-quick-link {
  border-left: 1px solid var(--sl-app-border);
}

.sl-quick-link-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sl-app-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Also used on real headings (h2) for screen-reader structure, so it resets the heading
   margin and line-height rather than relying on a <p>. */
.sl-section-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-app-muted);
  padding: 0.9rem 1rem 0.4rem;
}

/* Club card (ADR 0041) */
.sl-club-card {
  background: var(--sl-app-card);
  border: 1px solid var(--sl-app-border);
  border-radius: 12px;
  margin: 0 1rem 0.75rem;
  overflow: hidden;
}

.sl-club-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.6rem;
}

.sl-club-card-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sl-app-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* A club's crest (ADR 0079): the logo or the initials in a circle, at 16, 20 or 32px. */
.sl-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sl-app-navy);
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
  box-sizing: border-box;
}

.sl-crest--logo {
  background: #fff;
  object-fit: contain;
  border: 1px solid var(--sl-app-border);
}

.sl-crest-16 { width: 16px; height: 16px; font-size: 0.4375rem; }
.sl-crest-20 { width: 20px; height: 20px; font-size: 0.5rem; }
.sl-crest-32 { width: 32px; height: 32px; font-size: 0.6875rem; }

/* The line under a child's name: overlapping crests, then the words, all on one line. */
.sl-club-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--sl-app-muted, #5b6577);
}

.sl-crest-stack {
  display: inline-flex;
  flex-shrink: 0;
}

.sl-crest-stack > .sl-crest + .sl-crest {
  margin-left: -6px;
}

.sl-crest-stack > .sl-crest {
  box-shadow: 0 0 0 2px #fff;
}

.sl-crest-more {
  background: var(--sl-app-border);
  color: var(--sl-app-navy);
}

/* A crest ahead of an event's venue line. */
.sl-event-where {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* A club's uploaded logo in place of its initials. */
.sl-club-card-badge--logo {
  background: #fff;
  object-fit: contain;
  border: 1px solid var(--sl-app-border);
}

/* A club's uploaded logo on its public page. */
.sl-club-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

.sl-club-card-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.sl-club-card-teams {
  font-size: 0.7rem;
  color: var(--sl-app-muted);
  margin-top: 0.1rem;
}

.sl-club-card-next {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--sl-app-border);
  font-size: 0.75rem;
  color: var(--sl-app-muted);
}

/* Per-team registration row (ADR 0048): one per team a child plays at this club, each with its
   own status and kebab of relevant actions, distinct from the club-wide row above. */
.sl-team-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--sl-app-border);
}

.sl-team-row-name {
  font-weight: 700;
  font-size: 0.85rem;
}

.sl-team-row-next {
  font-size: 0.7rem;
  color: var(--sl-app-muted);
  margin-top: 0.15rem;
}

/* Mirrors .grid__actions-kebab's shape (Sideline.Web/Views/ClubCustomRoles/_ClubCustomRoleRow.cshtml)
   on the --sl-app-* tokens rather than --sl-console-*, which are scoped to body.sl-console and
   would render unstyled here. */
.sl-team-row-kebab {
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--sl-app-muted);
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background: transparent;
}

.sl-team-row-kebab:hover,
.sl-team-row-kebab[aria-expanded="true"] {
  background: var(--sl-app-canvas);
  border-color: var(--sl-app-border);
  color: var(--sl-app-navy);
}

/* Nav row (ADR 0051, "No bare links"): a whole tappable row - optional icon, a title, an optional
   muted one-line summary, and a chevron at the right - replacing a stand-alone text link for
   "go to another page" (a session, a team sponsors page). */
.sl-nav-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--sl-app-border);
  text-decoration: none;
  color: inherit;
}

.sl-club-card > .sl-nav-row:first-child {
  border-top: none;
}

/* "N new" next to a section label (the Inbox Messages heading). */
.sl-count-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--sl-app-bad);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.sl-nav-row > .sl-icon:last-child {
  color: var(--sl-app-muted);
  flex-shrink: 0;
}

/* Segmented control (ADR 0051), reused as navigation between sibling views of one screen
   (Squad: Players | Fixtures) - same toggle-pill shape the mobile skill already uses in-page,
   here each option is a plain link rather than a form control. */
.sl-segmented {
  display: flex;
  background: var(--sl-app-canvas);
  border-radius: 999px;
  padding: 3px;
  margin: 0.75rem 1rem 0;
  gap: 3px;
}

.sl-segmented-option {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sl-app-muted);
  text-decoration: none;
}

.sl-segmented-option.is-active {
  background: var(--sl-app-navy);
  color: #fff;
}

/* Icon button (ADR 0051): a round, borderless icon for a secondary action on a row or header
   (add to calendar, WhatsApp, share) - never a stand-alone text link. */
.sl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sl-app-border);
  background: var(--sl-app-card);
  color: var(--sl-app-navy);
  flex-shrink: 0;
  text-decoration: none;
}

.sl-icon-btn:hover {
  background: var(--sl-app-canvas);
}

/* what3words pill (ADR 0051): the three words in a small pill with the /// mark, linking to
   what3words - never underlined inline text. */
.sl-w3w {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  background: var(--sl-app-canvas);
  color: var(--sl-app-navy);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.sl-sponsor-logo {
  height: 32px;
  max-width: 72px;
  object-fit: contain;
}

/* Agenda rows (Calendar, ADR 0041) */
.sl-agenda-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--sl-app-border);
  text-decoration: none;
  color: inherit;
}

.sl-agenda-row:last-child {
  border-bottom: none;
}

/* Lets a flex child shrink below its content's width, so long text wraps or truncates instead
   of pushing its siblings (a fixture's kickoff time) off screen. Bootstrap has no such utility;
   the views used this class before it was defined, which is why long FA team names overflowed. */
.min-w-0 {
  min-width: 0;
}

.sl-date-block {
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

/* Weekday line (ADR 0051, _DateBlock): amber Monday to Friday, so a midweek fixture stands out
   against the weekend fixtures that are the norm. */
.sl-date-block-weekday {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sl-app-muted);
}

.sl-date-block-weekday.is-midweek {
  color: #8a6118;
}

.sl-date-block-day {
  font-family: var(--sl-app-display-font);
  font-size: 1.25rem;
  color: var(--sl-app-navy);
  line-height: 1;
}

.sl-date-block-month {
  font-size: 9px;
  color: var(--sl-app-muted);
  text-transform: uppercase;
  font-weight: 600;
}

/* Whose event a family agenda row is (ADR 0078): the child's colour dot and first name. */
.sl-who {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.sl-who-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* The caller's own coaching row on the family Calendar (ADR 0083): a navy square, so it never
   reads as one of the six child colours. */
.sl-who-dot.sl-who-coach {
  background: var(--sl-app-navy);
  border-radius: 2px;
}

/* A clash on a calendar row (ADR 0083): an amber pill that names the other event. It is a short
   sentence, so unlike a one-word pill it may wrap and keeps its own case. */
.sl-pill.sl-clash {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0.5rem;
}

.sl-agenda-row > .sl-icon:last-child {
  color: var(--sl-app-muted);
  flex-shrink: 0;
}

/* Event detail page header (ADR 0078): a big date block, whose and which team, the title, then
   two facts (kick-off and pitch) under a hairline. A missing value reads "Not available yet". */
.sl-event-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
}

.sl-event-head .sl-date-block {
  width: 48px;
}

.sl-event-head .sl-date-block-day {
  font-size: 2rem;
}

.sl-event-head .sl-date-block-weekday,
.sl-event-head .sl-date-block-month {
  font-size: 11px;
}

.sl-event-title {
  margin: 0.35rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.sl-event-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--sl-app-border);
}

.sl-event-fact {
  padding: 0.75rem 1rem;
  min-width: 0;
}

.sl-event-fact + .sl-event-fact {
  border-left: 1px solid var(--sl-app-border);
}

.sl-event-fact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-app-muted);
}

.sl-event-fact-value {
  margin-top: 0.1rem;
  font-size: 1rem;
  font-weight: 800;
}

.sl-event-fact-value.is-missing {
  font-size: 0.85rem;
  color: var(--sl-app-bad-text);
}

/* Action rows (Inbox), shared banner styling */
.sl-action-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--sl-app-border);
}

.sl-action-row:last-child {
  border-bottom: none;
}

/* Inbox To do row (ADR 0094 decision 3): the action row as one tappable link, with the count and a
   chevron (or an external-link icon for a task still done in the full site) on the right. */
.sl-todo-row {
  align-items: center;
  color: inherit;
  text-decoration: none;
}

a.sl-todo-row:hover,
a.sl-todo-row:focus-visible {
  color: inherit;
  background: var(--sl-app-canvas);
}

.sl-todo-row-chevron {
  color: var(--sl-app-muted);
  flex-shrink: 0;
}

/* Unread club announcement (ADR 0047): a bold title plus this small dot, the same visual
   language as the tab bar's own unread dot (.sl-app-tabbar-dot). */
.sl-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sl-app-bad);
  flex-shrink: 0;
}

.sl-action-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--sl-app-amber-tint);
  color: var(--sl-app-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Squad (ADR 0043): a player row with avatar, name/team, status pill and flag icons. Colours
   fall back to the palette hex because the offline page may render in either shell. */
.sl-squad-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--sl-app-border, #e3e8ee);
  color: var(--sl-app-navy, #0e1726);
  text-decoration: none;
}

.sl-squad-row:last-child {
  border-bottom: none;
}

.sl-avatar-chip {
  position: relative;
  overflow: hidden;
}

/* Layered over the initials (ADR 0051): the seed's photo references point at nothing, so a
   failed load must fall back to the initials underneath rather than a broken-image icon. An
   empty alt on the <img> is what keeps a failed load from painting anything of its own in
   Chromium, revealing the initials below it. */
.sl-avatar-chip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-avatar-chip.sl-avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}

.sl-squad-icons {
  display: inline-flex;
  gap: 0.35rem;
  color: var(--sl-app-muted, #5b6577);
}

.sl-squad-icon .sl-icon,
.sl-squad-icons .sl-icon {
  width: 16px;
  height: 16px;
}

.sl-squad-icon-bad {
  color: var(--sl-app-bad-text, #8e2119);
}

/* Session check-in year tiles and chips (ADR 0059), after the academy app the club used: one
   tile per school year present, its short name, full name and count, over a colour bar. Five
   colours from the Sideline palette, fixed per school year (--sl-year), so Year 4 is the same
   colour in every session and its row chip matches its tile. */
.sl-year-c0 { --sl-year: #8a6118; --sl-year-bar: var(--sl-app-amber); --sl-year-tint: var(--sl-app-amber-tint); }
.sl-year-c1 { --sl-year: var(--sl-app-good); --sl-year-bar: var(--sl-app-good); --sl-year-tint: var(--sl-app-good-tint); }
.sl-year-c2 { --sl-year: var(--sl-app-bad-text); --sl-year-bar: var(--sl-app-bad); --sl-year-tint: var(--sl-app-bad-tint); }
.sl-year-c3 { --sl-year: var(--sl-app-navy); --sl-year-bar: var(--sl-app-navy); --sl-year-tint: #e3e8ee; }
.sl-year-c4 { --sl-year: var(--sl-app-muted); --sl-year-bar: var(--sl-app-muted); --sl-year-tint: var(--sl-app-canvas); }
.sl-year-cx { --sl-year: var(--sl-app-muted); --sl-year-bar: var(--sl-app-border); --sl-year-tint: var(--sl-app-canvas); }

.sl-year-tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(4.5rem, 1fr);
  margin: 0 1rem;
  overflow-x: auto;
  background: var(--sl-app-card);
  border: 1px solid var(--sl-app-border);
  border-radius: 12px;
}

.sl-year-tile {
  padding: 0.6rem 0.25rem 0.5rem;
  text-align: center;
  color: var(--sl-year);
  border-bottom: 4px solid var(--sl-year-bar);
}

.sl-year-tile + .sl-year-tile {
  border-left: 1px solid var(--sl-app-border);
}

.sl-year-tile-short {
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.sl-year-tile-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-year-tile-count {
  font-family: var(--sl-app-display-font);
  font-size: 2rem;
  line-height: 1.1;
}

.sl-year-chip {
  flex-shrink: 0;
  min-width: 2.4rem;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--sl-year);
  background: var(--sl-year-tint);
}

/* A register row is one line - chip, name, icons, star, menu - so a long register stays tight. */
.sl-register-row {
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
}

/* A search result already checked in: greyed out and not selectable. */
.sl-register-row.is-checked-in {
  opacity: 0.5;
  pointer-events: none;
}

.sl-register-row .sl-icon-btn {
  width: 30px;
  height: 30px;
}

.sl-register-row .sl-pill {
  padding: 0.05rem 0.4rem;
  font-size: 0.6rem;
}

/* The register row's name: a button (it opens the player card) that reads as row text. */
.sl-register-player {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
}

/* Star of the Week: the icon's colour carries the recency band, so a coach can spread stars
   fairly at a glance; a star awarded today is filled amber. */
.sl-star-btn {
  display: inline-flex;
  color: var(--sl-app-muted);
}

.sl-star-btn.sl-star-green {
  color: var(--sl-app-good);
}

.sl-star-btn.sl-star-amber {
  color: #8a6118;
}

.sl-star-btn.sl-star-red {
  color: var(--sl-app-bad-text);
}

.sl-star-btn.is-starred {
  color: var(--sl-app-navy);
  background: var(--sl-app-amber);
  border-color: var(--sl-app-amber);
}

.sl-star-btn.is-starred .sl-icon {
  fill: currentColor;
}

/* A tinted alert block inside a card or modal (the player card's medical, no-photos and
   safeguarding alerts). */
.sl-card-alert {
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}

.sl-card-alert.is-bad {
  background: var(--sl-app-bad-tint);
  color: var(--sl-app-bad-text);
}

.sl-card-alert.is-wait {
  background: var(--sl-app-amber-tint);
  color: #5c4210;
}

/* The officials' registration screen in the club app (ADR 0094 stage 2): the photo and the proof
   of identity side by side, each in a small white card over its label. */
.sl-todo-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.sl-todo-doc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--sl-app-border, #e3e8ee);
  border-radius: 14px;
  padding: 0.5rem;
  min-height: 9rem;
}

.sl-todo-doc img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: 10px;
}

.sl-todo-doc-missing {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--sl-app-canvas);
  color: var(--sl-app-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.sl-checkin-video {
  width: 100%;
  border-radius: 10px;
  background: var(--sl-app-navy);
}

.sl-checkin-code-box > summary {
  cursor: pointer;
}

.sl-walk-in-qr {
  width: 11rem;
  height: 11rem;
}

.sl-offline-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: #eef1f5;
  color: var(--sl-app-navy, #0e1726);
  font-size: 0.85rem;
  font-weight: 600;
}

.sl-registration .form-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5b6577;
}

.sl-registration .btn-primary {
  --bs-btn-bg: #e9a23b;
  --bs-btn-border-color: #e9a23b;
  --bs-btn-color: #0e1726;
  --bs-btn-hover-bg: #d8912d;
  --bs-btn-hover-border-color: #d8912d;
  --bs-btn-hover-color: #0e1726;
  --bs-btn-active-bg: #d8912d;
  --bs-btn-active-border-color: #d8912d;
  --bs-btn-active-color: #0e1726;
  --bs-btn-disabled-bg: #e9a23b;
  --bs-btn-disabled-border-color: #e9a23b;
  font-weight: 700;
}

.sl-registration .btn-outline-secondary {
  --bs-btn-color: #0e1726;
  --bs-btn-border-color: #0e1726;
  --bs-btn-hover-bg: #0e1726;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #0e1726;
  font-weight: 700;
}

/* Inline links take the navy chrome colour rather than Bootstrap's blue, which is not in the
   palette at all and reads as browser default next to the amber/navy buttons. Buttons are
   excluded — .btn-* rules above own those. Still underlined, so colour is not carrying the
   affordance on its own. */
.sl-registration a:not(.btn) {
  color: #0e1726;
}

.sl-registration a:not(.btn):hover {
  color: #8a6118;
}

/* Full-width — the page's only header (see _WizardLayout.cshtml). .sl-wizard-header-inner
   caps its content at the same width as .sl-wizard-shell so the title/progress bar align
   with the fields below while the navy background bleeds to both edges. */
.sl-wizard-header {
  background: #0e1726;
  color: #fff;
  padding: 1.5rem 1rem 1.25rem;
}

.sl-wizard-header-inner {
  max-width: 640px;
  margin: 0 auto;
}

.sl-wizard-subtitle {
  color: #9aa6bd;
}

/* A link inside the navy header (the "Back to ..." way out) must read on navy. The inline-link
   rule above (.sl-registration a:not(.btn), navy) would otherwise win over .sl-wizard-subtitle
   and leave navy text on a navy band. White, bold and underlined on hover or focus; amber on
   hover, as the other header links do. */
.sl-wizard-header a:not(.btn) {
  color: #fff;
  font-weight: 600;
}

.sl-wizard-header a:not(.btn):hover,
.sl-wizard-header a:not(.btn):focus-visible {
  color: #e9a23b;
  text-decoration: underline !important;
}

.sl-wizard-card {
  margin-top: 1rem;
}

.sl-step-progress {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.sl-step-progress .sl-segment {
  flex: 1;
  text-align: center;
}

.sl-step-progress .sl-segment-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}

.sl-step-progress .sl-segment.is-complete .sl-segment-bar,
.sl-step-progress .sl-segment.is-current .sl-segment-bar {
  background: #e9a23b;
}

.sl-step-progress .sl-segment-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.45);
}

.sl-step-progress .sl-segment.is-current .sl-segment-label {
  color: #fff;
}

/* "Step 2 of 6: Health" under the bar. Only on narrow screens, where the bar's own labels are hidden. */
.sl-step-caption {
  display: none;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}

/* What a place costs and when the team trains, at the top of step 1. */
.sl-team-facts {
  padding: 0.6rem 0.75rem;
  border-left: 3px solid #e9a23b;
  background: rgba(233, 162, 59, 0.08);
  border-radius: 0 6px 6px 0;
}

.sl-team-facts dt {
  min-width: 4.5rem;
}

/* Each step ends with its Back/Continue row. Give it clear air and a rule above, so it reads as
   "finish this screen" rather than as part of the last field group it happens to sit under. */
.sl-registration .sl-step > .d-flex:last-child {
  margin-top: 1.75rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
}

/* Choice cards — used for the child picker and the plan picker: a labelled card wrapping a
   visually-hidden radio input, so the whole card is clickable and keyboard-focusable. */
.sl-choice-card {
  display: flex;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.65rem 0.9rem;
  background: #fff;
  cursor: pointer;
  margin-bottom: 0;
}

.sl-choice-card:has(:checked) {
  border-color: #0e1726;
  background: #e1f1eb;
}

/* A child the session is not open to: shown, with the reason, but not selectable. */
.sl-choice-card--disabled {
  cursor: not-allowed;
  background: #f5f6f8;
}

.sl-avatar-chip {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #0e1726;
  color: #e9a23b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.sl-avatar-chip--muted {
  background: #c9d2dd;
  color: #5b6577;
}

.sl-add-affordance {
  border: 2px dashed #c9d2dd;
  border-radius: var(--bs-border-radius);
  padding: 0.65rem;
  color: #0e1726;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
}

.sl-confirm-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #0b5f4a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The same badge for an outcome that is neither a success nor the parent's fault — a
   registration deadline that has simply passed. Muted rather than ember: nothing has gone
   wrong, and an alarming red would tell the parent they broke something. */
.sl-confirm-badge--muted {
  background: var(--sl-console-text-mid, #5b6577);
}

/* The checkbox sibling of .sl-choice-card, for the discovery screen where a parent picks
   several teams at once rather than one of a set. Same card affordance, different selected
   treatment: amber rather than green, since these are staged choices, not a settled answer. */
.sl-select-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem 0.9rem;
  background: #fff;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.sl-select-card:has(:checked) {
  border-color: #e9a23b;
  background: #fdf1d9;
}

/* Small-caps group label, matching the field/section label treatment elsewhere in the flow. */
.sl-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5b6577;
  margin-bottom: 0.4rem;
}

/* Venue facts (_VenueSummary): one line per facility with a small muted icon in front, so the
   list keeps its original size and rhythm. The icon is decorative; the label carries the meaning. */
.sl-venue-facts {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.sl-venue-facts li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-venue-facts .sl-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--sl-app-muted, #5b6577);
}

.sl-venue-defib-icon {
  width: 18px;
  height: 18px;
  color: var(--sl-app-bad, #b4291f);
}

/* Club filter chips — a horizontal, scrollable row above the discovery list, shown only when
   the family spans more than one club. */
.sl-chip-row {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.sl-chip {
  border: 2px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  background: #fff;
  color: #0e1726;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.sl-chip.is-active {
  background: #0e1726;
  border-color: #0e1726;
  color: #fff;
}

/* A chip that is a link (the Stats tab's team filter) sits inside .sl-registration, whose inline
   link colour is navy: without this the selected chip's words vanish into its navy pill. */
.sl-registration a.sl-chip.is-active,
.sl-registration a.sl-chip.is-active:hover {
  color: #fff;
}

/* Dashboard status pills. Tinted rather than saturated so a card full of them stays calm;
   the ember variant is the only one that should read as urgent. */
.sl-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* A pill is a single token: it never wraps, and in a flex row it never shrinks, so the text
     beside it gives way instead. */
  white-space: nowrap;
  flex-shrink: 0;
}

.sl-pill-good {
  background: #e1f1eb;
  color: #0b5f4a;
}

.sl-pill-bad {
  background: #fbe9e7;
  color: #8e2119;
}

.sl-pill-wait {
  background: #fdf1d9;
  color: #8a6118;
}

.sl-pill-muted {
  background: #eef1f5;
  color: #5b6577;
}

/* A pill that carries a sentence the club typed (a cancellation reason): it wraps inside its
   column instead of running off the edge of the phone. */
.sl-pill-wrap {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 0.9rem;
}

/* The two-step confirm on the coach's Cancel this session: the summary is the red button. */
.sl-cancel-confirm > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
}

.sl-cancel-confirm > summary::-webkit-details-marker {
  display: none;
}

/* One registration (or fixture) on the dashboard: a stacked row, not a table cell — a table
   cannot reflow to phone width without horizontal scrolling. */
.sl-record-row {
  padding: 0.75rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.sl-record-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Confirmation screen (ADR 0038): what we already hold, shown as a record to
   read rather than a form to proof-read. One card holds every section, divided
   rather than boxed separately — a card per section would turn six quiet facts
   into six competing objects.
   --------------------------------------------------------------------------- */

/* Marks a review row whose value was just changed via an Edit-and-return, so a re-read of the
   review does not have to spot the change by memory. A tag beside the value, not a colour change
   baked into the value's own text — the value stays plain so it still reads correctly once
   copied or re-checked later. Amber (suggestion/tip), not .sl-pill-wait — that variant already
   means "Pending" on the dashboard and reusing it here would misdescribe a plain edit as a
   status. */
.sl-confirm-updated-tag {
  display: inline-block;
  flex: none;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  background: #fdf1d9;
  color: #8a6118;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sl-confirm-section {
  padding: 1.1rem 0;
  border-top: 1px solid var(--bs-border-color);
}

.sl-confirm-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.sl-confirm-section:last-child {
  padding-bottom: 0;
}

/* Section label left, its edit control right, on one baseline. */
.sl-confirm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.sl-confirm-section-head .sl-group-label {
  margin-bottom: 0;
}

/* A text button, not a filled one: editing is the exception here, and six amber
   buttons down the page would read as six things needing attention. */
.sl-confirm-edit {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0e1726;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sl-confirm-edit:hover {
  color: #8a6118;
}

/* Label left, value right and bold — the summary-list treatment the confirmation
   screen already uses. The value wraps rather than truncating: an address that
   runs to two lines is still readable, a shortened one is not. */
.sl-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.3rem 0;
}

.sl-confirm-row dt {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  color: #5b6577;
}

.sl-confirm-row dd {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  text-align: right;
}

/* Below roughly a phone's width, a long value beside its label leaves too little
   room for either, so the pair stacks and the value takes the full width. 480px
   (not just the very smallest phones) because a long label - "Safeguarding for
   committee members expiry" - crowds the value at ordinary phone widths too. */
@media (max-width: 480px) {
  .sl-confirm-row {
    flex-direction: column;
    gap: 0.1rem;
  }

  .sl-confirm-row dd {
    text-align: left;
  }
}

/* The photo upload, as an affordance rather than the browser's grey "Choose
   File" button: a tappable tile that becomes the preview once a photo is picked.
   The real <input type="file"> stays in the DOM (it is what posts) and is
   covered by the tile, so the native picker still opens and the control keeps
   its own keyboard behaviour and validation. */
.sl-upload-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem;
  border: 1px dashed #b9c2d0;
  border-radius: var(--bs-border-radius);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.sl-upload-tile:hover {
  border-color: #e9a23b;
  background: #fdf1d9;
}

/* Fills the tile so a tap anywhere opens the picker. Transparent rather than
   display:none — a hidden input is skipped by native validation and by the
   keyboard. */
.sl-upload-tile input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sl-upload-tile-thumb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 0.6rem;
  background: #eef1f5;
  color: #5b6577;
  overflow: hidden;
}

.sl-upload-tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-upload-tile.is-filled {
  border-style: solid;
  border-color: #0b5f4a;
  background: #e1f1eb;
}

/* A logo keeps its whole shape (ADR 0045): contained on white, never cropped like a photo. */
.sl-upload-tile-thumb--logo {
  background: #fff;
  border: 1px solid #e3e8ee;
}

.sl-upload-tile-thumb--logo img,
.sl-sponsor-logo img {
  object-fit: contain;
}

/* A sponsor's logo in a list row: a fixed white box, the image contained inside it. */
.sl-sponsor-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 1px solid #e3e8ee;
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
}

.sl-sponsor-logo img {
  width: 100%;
  height: 100%;
}

/* Narrow (real phone-width) screens: drop the progress bar's text labels to plain dots so
   four-plus steps don't crowd or wrap, and tighten spacing to give content more room. */
@media (max-width: 520px) {
  .sl-wizard-shell {
    padding: 1rem 0.75rem 1.5rem;
  }

  .sl-wizard-header {
    padding: 1rem 1rem 0.85rem;
  }

  .sl-step-progress .sl-segment-label {
    display: none;
  }

  .sl-step-caption {
    display: block;
  }

  .sl-choice-card {
    padding: 0.6rem 0.75rem;
  }
}

/* ---------------------------------------------------------------------------------------
   Admin console — the desktop-first shell (sidebar + header) and component classes for
   every non-wizard page (Home, Club Settings, Team Management, the Admin area). Scoped
   under .sl-console so it never bleeds into the registration wizard's own design language
   above. Matches the project's sideline-console-frontend design skill.
   --------------------------------------------------------------------------------------- */

/* The console colour tokens are also defined on the app shell: neutral pages (Home, Privacy,
   Error, HTTP status) render in either shell depending on the shell cookie and use the
   .sl-console-card family, which would otherwise be unstyled in the app shell. */
:where(body.sl-console, body.sl-app, .sl-public-tournament) {
  --sl-console-primary: #0e1726;
  --sl-console-primary-dark: #0a111d;
  --sl-console-primary-light: #1b2739;
  --sl-console-canvas: #f4f6f8;
  --sl-console-surface: #ffffff;
  --sl-console-border: #e3e8ee;
  --sl-console-border-mid: #c9d2dd;
  --sl-console-text: #0e1726;
  --sl-console-text-mid: #5b6577;
  --sl-console-text-light: #7a8494;
  --sl-console-success: #0b5f4a;
  --sl-console-success-bg: #e1f1eb;
  /* Darkened amber, not the raw accent — amber #e9a23b fails WCAG AA as small text on a
     light surface, so amber is background-only everywhere (buttons, tags); this darker
     shade is what renders as amber-family text/icons. */
  --sl-console-warning: #8a6118;
  --sl-console-warning-bg: #fdf1d9;
  --sl-console-danger: #b4291f;
  --sl-console-danger-bg: #fbe9e7;
  --sl-console-info-bg: #e7eefa;
}

body.sl-console {
  /* Shared brand palette with .sl-registration above (the source of truth — see
     sideline-mobile-frontend's design skill). Retextures Bootstrap's own primitives the
     same way .sl-registration does, so stock .btn-primary/.form-control/focus rings pick
     up the theme without a parallel .sl-console-btn class. */
  --bs-primary: #0e1726;
  --bs-primary-rgb: 14, 23, 38;
  --bs-body-bg: #f4f6f8;
  --bs-border-color: #e3e8ee;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-secondary-color: #5b6577;

  --sl-console-sidebar-width: 230px;
  --sl-console-sidebar-collapsed-width: 64px;
  --sl-console-header-height: 60px;
  background: var(--sl-console-canvas);
  color: var(--sl-console-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

.sl-console .btn-primary {
  --bs-btn-bg: #e9a23b;
  --bs-btn-border-color: #e9a23b;
  --bs-btn-color: #0e1726;
  --bs-btn-hover-bg: #d8912d;
  --bs-btn-hover-border-color: #d8912d;
  --bs-btn-hover-color: #0e1726;
  --bs-btn-active-bg: #d8912d;
  --bs-btn-active-border-color: #d8912d;
  --bs-btn-active-color: #0e1726;
  --bs-btn-disabled-bg: #e9a23b;
  --bs-btn-disabled-border-color: #e9a23b;
  font-weight: 700;
}

/* Outline buttons rest at a soft tint of their colour family (matching the badge/tag treatment)
   rather than transparent-on-white, so they read as coloured buttons even before hover. */
.sl-console .btn-outline-secondary {
  --bs-btn-bg: #e7eefa;
  --bs-btn-color: #0e1726;
  --bs-btn-border-color: #0e1726;
  --bs-btn-hover-bg: #0e1726;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #0e1726;
  font-weight: 700;
}

.sl-console .btn-outline-primary {
  --bs-btn-bg: #fdf1d9;
  --bs-btn-color: #8a6118;
  --bs-btn-border-color: #8a6118;
  --bs-btn-hover-bg: #8a6118;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #8a6118;
  font-weight: 700;
}

.sl-console .btn-outline-danger {
  --bs-btn-bg: #fbe9e7;
  --bs-btn-color: #b4291f;
  --bs-btn-border-color: #b4291f;
  --bs-btn-hover-bg: #b4291f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #b4291f;
  font-weight: 700;
}

.sl-console .btn-success {
  --bs-btn-bg: #0b5f4a;
  --bs-btn-border-color: #0b5f4a;
  --bs-btn-hover-bg: #26573f;
  --bs-btn-hover-border-color: #26573f;
  --bs-btn-active-bg: #26573f;
  --bs-btn-active-border-color: #26573f;
  font-weight: 700;
}

/* Small buttons (table-row actions, mostly) get a lighter tint than the full-size outline
   buttons above, so a row with two or three actions doesn't read as a wall of colour, but the
   text is still clearly a button rather than a bare link. */
.sl-console .btn-sm.btn-outline-secondary {
  --bs-btn-bg: #f5f6fa;
  font-weight: 600;
}

.sl-console .btn-sm.btn-outline-primary {
  --bs-btn-bg: #fdf9ee;
  font-weight: 600;
}

.sl-console .btn-sm.btn-outline-danger {
  --bs-btn-bg: #fdf1ea;
  font-weight: 600;
}

.sl-console .btn:focus, .sl-console .btn:active:focus, .sl-console .btn-link.nav-link:focus,
.sl-console .form-control:focus, .sl-console .form-select:focus, .sl-console .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(17, 32, 58, 0.5);
}

.sl-console .form-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-console-text-mid);
}

/* Day/month/year date-entry group (see _DatePartsFields.cshtml) - GOV.UK Design System
   pattern, for a date the user recalls from memory rather than one they are choosing. */
.sl-date-parts-inputs {
  max-width: 20rem;
}

.sl-date-parts-input {
  width: 4rem;
  text-align: center;
}

.sl-date-parts-input-year {
  width: 5.5rem;
}

.sl-date-parts-label {
  display: block;
  font-size: 0.75rem;
  color: var(--sl-console-text-mid, #5b6577);
  margin-bottom: 0.15rem;
}

/* 1.5rem = 24px, the WCAG 2.5.8 (AA) minimum target — small enough to read as a hint beside a
   form label, still large enough to tap. It was drawn at 2.75rem (the 44px AAA target), which
   made an optional "i" the biggest thing on the row and dwarfed the label it belongs to.
   Deliberately not padded out with an invisible hit area: the popover sits directly above its
   own field, so an expanded target would overlap the input's top edge and swallow clicks
   meant for it.

   The 24px footprint is a floor on the clickable AREA, not a target for how big it should look —
   a drawn border filling that whole circle still read as a button dominating the row next to a
   0.7rem label. No border/background at rest (see _InfoIcon.cshtml); one appears on hover/focus
   for affordance, so the circle is still discoverable without being always-on. */
.sl-info-icon {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--sl-console-text-mid, #5b6577);
  background-color: transparent;
  border: 1px solid transparent;
  opacity: 0.6;
}

.sl-info-icon:hover,
.sl-info-icon:focus {
  opacity: 1;
  border-color: var(--sl-console-text-mid, #5b6577);
  background-color: rgba(91, 101, 119, 0.08);
}

.sl-info-icon:focus-visible {
  outline: 2px solid var(--sl-console-text-mid, #5b6577);
  outline-offset: 1px;
}

/* A clearance's state on the Officials grid (see _ClearanceCell.cshtml). Icon + date on one
   line, colour reinforcing an icon that already carries the meaning on its own — three of these
   sit side by side, which is exactly where colour-only signalling stops being readable. */
.sl-clearance {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.sl-clearance--valid {
  color: var(--sl-console-success);
}

.sl-clearance--expiring {
  color: var(--sl-console-warning);
}

.sl-clearance--expired {
  color: var(--sl-console-danger);
}

.sl-clearance--missing {
  color: var(--sl-console-text-mid);
  font-weight: 500;
}

/* A clearance this person is actually expected to have, but has none on file - a flag, not a
   gate (ADR 0040). Same colour as expired: an absent required check is at least as urgent as a
   lapsed one, never quieter. */
.sl-clearance--required-missing {
  color: var(--sl-console-danger);
  font-weight: 600;
}

/* The date is the detail, not the headline — the icon and colour have already said the thing. */
.sl-clearance__date {
  font-variant-numeric: tabular-nums;
}

.sl-console .popover {
  border-color: var(--sl-console-border);
  border-radius: var(--bs-border-radius);
}

.sl-console .popover-body {
  color: var(--sl-console-text-mid);
  font-size: 0.85rem;
}

/* Tags — categorical colour-coding (role, age group), distinct from .sl-console-badge which
   is reserved for state (success/warning/danger/info). One hue per category, drawn from the
   brand palette plus a few low-saturation companions so up to 7 club roles stay distinct. */
.sl-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sl-tag-owner       { background: #e7eefa; color: #0e1726; }
.sl-tag-secretary   { background: #fdf1d9; color: #8a6118; }
.sl-tag-treasurer   { background: #e1f1eb; color: #0b5f4a; }
.sl-tag-welfare     { background: #fbe9e7; color: #b4291f; }
.sl-tag-coach       { background: #e7f3f3; color: #2a7a7a; }
.sl-tag-staff       { background: #eef0f4; color: #4b5768; }
.sl-tag-parent      { background: #f3eaf0; color: #8a3e6e; }
.sl-tag-age         { background: #fdf1d9; color: #0e1726; }

/* Tag-styled checkbox toggle (role pickers) — a .sl-tag that carries a real checkbox so
   several options can run across the screen instead of stacking as a checklist. */
.sl-tag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
}

.sl-tag-toggle input[type="checkbox"] {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0;
  cursor: pointer;
}

.sl-console .modal-content {
  border-radius: var(--bs-border-radius-lg, 1rem);
  border-color: var(--sl-console-border);
}

/* A soft navy gradient band instead of a flat white bar — the header was the flattest part of
   an otherwise-branded page; this gives the modal an identity the moment it opens. */
.sl-console .modal-header {
  background: linear-gradient(135deg, var(--sl-console-primary) 0%, var(--sl-console-primary-light) 100%);
  color: #fff;
  border-bottom: none;
  border-top-left-radius: var(--bs-border-radius-lg, 1rem);
  border-top-right-radius: var(--bs-border-radius-lg, 1rem);
}

.sl-console .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Roomier line-height for multi-line tab content (finance schedules, contact cards) so the
   modal doesn't read as a dense wall of text. */
.sl-console .modal-body,
.sl-console .drawer__body {
  line-height: 1.65;
}

/* Data rows within a modal (label left, value right) get a hairline divider and more
   breathing room than a bare flex row — matches the console's "Data rows" convention. */
.sl-console .modal-body .sl-console-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-console .modal-body .sl-console-data-row:last-child {
  border-bottom: none;
}

/* Tabs inside a modal: an amber underline and a tinted background mark the active tab, instead
   of Bootstrap's flat default, so switching tabs has a visible "pop" without a jarring palette. */
.sl-console .modal-body .nav-tabs,
.sl-console .drawer__body .nav-tabs {
  border-bottom-color: var(--sl-console-border);
  gap: 0.25rem;
}

.sl-console .modal-body .nav-tabs .nav-link,
.sl-console .drawer__body .nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--sl-console-text-mid);
  font-weight: 600;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  padding: 0.55rem 1.1rem;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.sl-console .modal-body .nav-tabs .nav-link:hover,
.sl-console .drawer__body .nav-tabs .nav-link:hover {
  background: var(--sl-console-canvas);
  color: var(--sl-console-text);
}

.sl-console .modal-body .nav-tabs .nav-link.active,
.sl-console .drawer__body .nav-tabs .nav-link.active {
  color: var(--sl-console-text);
  background: var(--sl-console-canvas);
  border-bottom-color: #e9a23b;
}

/* ---------------------------------------------------------------------------------------
   Record drawer — the site-wide detail/edit surface (ADR 0012), replacing the modal for
   everything except single-decision confirms. Flush to the viewport's right edge, no corner
   radius (per the console skill's Record drawer spec). Below the responsive breakpoint it
   becomes a full-width sheet instead of a fixed side panel. */
.drawer-host {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  justify-content: flex-end;
}

.drawer-host[hidden] {
  display: none;
}

.scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
}

.drawer {
  position: relative;
  width: 560px;
  max-width: 100%;
  height: 100%;
  background: var(--sl-console-surface);
  border-left: 1px solid var(--sl-console-border);
  box-shadow: -24px 0 60px -20px rgba(16, 24, 40, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: drawer-in 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.drawer--wide {
  width: 620px;
}

@media (prefers-reduced-motion: reduce) {
  .drawer {
    animation: none;
  }
}

@keyframes drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  .drawer,
  .drawer--wide {
    width: 100%;
  }
}

/* The header carries the same navy gradient as .modal-header, so a record panel reads as part of
   the same family as the confirm dialogs it sits alongside — and so the white panel below it has
   a defined top edge instead of floating. */
.drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(135deg, var(--sl-console-primary) 0%, var(--sl-console-primary-light) 100%);
  color: #fff;
  flex-shrink: 0;
}

.drawer__heading {
  min-width: 0;
}

.drawer__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.15rem;
}

.drawer__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}

.drawer__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--bs-border-radius);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}

.drawer__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Loading and failure states are rendered in the drawer shell and only toggled by the controller
   — the panel never shows an empty white void while a fetch is in flight, and a failed fetch
   never pastes an error page into the body. */
.drawer__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  color: var(--sl-console-text-mid);
  font-size: 0.9rem;
}

.drawer__status--error {
  background: var(--sl-console-danger-bg);
  color: var(--sl-console-danger);
}

.drawer__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--sl-console-border);
  border-top-color: var(--sl-console-text-mid);
  border-radius: 50%;
  animation: drawer-spin 0.7s linear infinite;
}

@keyframes drawer-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__spinner {
    animation: none;
  }
}

.drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--sl-console-border);
  background: var(--sl-console-canvas);
  flex-shrink: 0;
}

.drawer__position {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sl-console-text-mid);
}

/* ---------------------------------------------------------------------------------------
   Drawer content components. A record drawer's fragment opens with a full-bleed identity band
   and tab bar: .drawer-bleed cancels .drawer__body's horizontal padding so those bands meet the
   panel edges, while ordinary content keeps the padding. */
.drawer-bleed {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.drawer-hero {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: -1.25rem;
  padding: 1.25rem 1.5rem 1rem;
  background: var(--sl-console-canvas);
  border-bottom: 1px solid var(--sl-console-border);
}

.drawer-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sl-console-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.drawer-hero__body {
  min-width: 0;
  flex: 1;
}

.drawer-hero__meta {
  color: var(--sl-console-text-mid);
  font-size: 0.85rem;
}

.drawer-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

/* The tab bar sits directly under the identity band, edge to edge, and stays put while the pane
   below it scrolls.

   It scrolls sideways rather than wrapping. A drawer is a fixed 560px and a record can carry six
   tabs (Overview / Access / Teams / Checks / Notes / Welfare), so wrapping dropped the last one
   onto a second row — which reads as a mistake, moves every tab whenever one is added, and costs
   vertical space on the one axis a drawer cannot spare. A partly-cut-off tab at the right edge is
   the standard "there is more this way" affordance. */
.sl-console .drawer__body .nav-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 1rem;
  background: var(--sl-console-surface);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sl-console .drawer__body .nav-tabs .nav-link {
  white-space: nowrap;
}

/* Alternating row tint inside a drawer list, so a long run of label/value rows reads as a table
   rather than one undifferentiated block. */
.drawer-list {
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.drawer-list .sl-console-data-row {
  padding: 0.55rem 0.85rem;
  gap: 1rem;
}

.drawer-list .sl-console-data-row:nth-child(even) {
  background: var(--sl-console-canvas);
}

.drawer-list .sl-console-data-row > :first-child {
  color: var(--sl-console-text-mid);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.drawer-list .sl-console-data-row > :last-child {
  text-align: right;
  overflow-wrap: anywhere;
}

/* Stat tiles — the drawer's "what matters at a glance" row (an age, a balance, a count). */
.drawer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.drawer-stat {
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius);
  padding: 0.6rem 0.75rem;
  background: var(--sl-console-surface);
}

.drawer-stat__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-console-text-mid);
}

.drawer-stat__value {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

.drawer-stat__sub {
  font-size: 0.75rem;
  color: var(--sl-console-text-mid);
}

.drawer-stat--danger .drawer-stat__value {
  color: var(--sl-console-danger);
}

.drawer-stat--warning .drawer-stat__value {
  color: var(--sl-console-warning);
}

.drawer-stat--success .drawer-stat__value {
  color: var(--sl-console-success);
}

/* Attention banners: the one or two things about this record that need a decision. Same
   red/amber/grey banding as the console's notification rows. */
.drawer-alert {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border-radius: var(--bs-border-radius);
  font-size: 0.88rem;
  line-height: 1.45;
}

.drawer-alert + .drawer-alert {
  margin-top: 0.5rem;
}

.drawer-alert__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.45rem;
  flex-shrink: 0;
  background: currentColor;
}

.drawer-alert--danger {
  background: var(--sl-console-danger-bg);
  color: var(--sl-console-danger);
}

.drawer-alert--warning {
  background: var(--sl-console-warning-bg);
  color: var(--sl-console-warning);
}

.drawer-alert--info {
  background: var(--sl-console-info-bg);
  color: var(--sl-console-primary);
}

.drawer-empty {
  color: var(--sl-console-text-mid);
  font-size: 0.88rem;
  padding: 0.75rem 0;
}

/* A splash of hue on each relationship-type tag in the Contacts tab, so the card list doesn't
   read as one flat grey block. */
.sl-tag-guardian  { background: #e1f1eb; color: #0b5f4a; }
.sl-tag-emergency { background: #fbe9e7; color: #b4291f; }
.sl-tag-pickup    { background: #e7eefa; color: #0e1726; }

.sl-console-shell {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */

.sl-console-sidebar {
  width: var(--sl-console-sidebar-width);
  flex-shrink: 0;
  background: var(--sl-console-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  box-shadow: 1px 0 3px rgba(26, 37, 53, 0.08);
  position: relative;
  z-index: 2;
}

.sl-console-sidebar-collapsed {
  width: var(--sl-console-sidebar-collapsed-width);
}

.sl-console-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  height: var(--sl-console-header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sl-console-brand-link,
.sl-console-brand-link:link,
.sl-console-brand-link:visited {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  overflow: hidden;
}

.sl-console-brand-mark {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.sl-console-brand-name {
  white-space: nowrap;
}

.sl-console-sidebar-toggle {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.25rem;
  border-radius: 0.3rem;
  line-height: 0;
}

.sl-console-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sl-console-sidebar-collapsed .sl-console-sidebar-toggle svg {
  transform: rotate(180deg);
}

.sl-console-nav {
  padding: 0.75rem 0.6rem;
  overflow-y: auto;
}

.sl-console-nav-section-label {
  margin: 1rem 0.6rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
}

/* The club's uploaded logo beside its name in the sidebar (Club settings). */
.sl-console-nav-club-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  background: #fff;
  vertical-align: middle;
  margin-right: 0.35rem;
}

.sl-console-nav-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0.75rem 0.6rem;
}

.sl-console-nav-link,
.sl-console-nav-link:link,
.sl-console-nav-link:visited {
  /* :link/:visited repeated explicitly — the browser's own visited-link colour otherwise
     wins ties against a same-specificity class rule for any link the browser history
     already has (every club/admin URL clicked while testing this app, for instance),
     leaving some sidebar links a stray blue that's hard to read on the navy background. */
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.65rem;
  margin-bottom: 0.15rem;
  border-radius: 0.45rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  border-left: 3px solid transparent;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.sl-console-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sl-console-nav-link.active {
  background: rgba(242, 169, 59, 0.14);
  border-left-color: #e9a23b;
  color: #fff;
  font-weight: 700;
}

/* An L0 group whose submenu contains the current page gets the same accent on its own
   toggle button, even while collapsed, so the active trail is visible either way. */
.sl-console-nav-group-toggle.active {
  background: rgba(242, 169, 59, 0.1);
  border-left-color: #e9a23b;
  color: #fff;
}

.sl-console-nav-icon {
  flex-shrink: 0;
}

/* L0 groups: a toggle button styled exactly like a nav link, plus a chevron, with an
   indented L1 submenu that's hidden until expanded. Open/closed state is rendered directly by
   the server from NavOpenGroupsCookie (see nav_group_controller.js) so the initial paint is
   already correct — no client-side "open after load" flash. */
.sl-console-nav-group-toggle {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sl-console-nav-group-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.sl-console-nav-group-open > .sl-console-nav-group-toggle .sl-console-nav-group-chevron {
  transform: rotate(90deg);
}

/* What needs doing in a closed group (ADR 0076): a small amber pill, hidden while the group is
   open because the links inside say it better. */
.sl-console-nav-count {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: #e9a23b;
  color: #0e1726;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.sl-console-nav-count + .sl-console-nav-group-chevron {
  margin-left: 0.5rem;
}

.sl-console-nav-group-open > .sl-console-nav-group-toggle .sl-console-nav-count,
.sl-console-sidebar-collapsed .sl-console-nav-count {
  display: none;
}

.sl-console-nav-submenu {
  display: none;
  flex-direction: column;
  padding-left: 1.9rem;
  margin-bottom: 0.15rem;
}

.sl-console-nav-group-open > .sl-console-nav-submenu {
  display: flex;
}

.sl-console-nav-submenu .sl-console-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.sl-console-nav-link-disabled,
.sl-console-nav-link-disabled:link,
.sl-console-nav-link-disabled:visited {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.sl-console-nav-link-disabled .sl-console-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
}

.sl-console-sidebar-collapsed .sl-console-nav-label,
.sl-console-sidebar-collapsed .sl-console-nav-submenu,
.sl-console-sidebar-collapsed .sl-console-nav-group-chevron,
.sl-console-sidebar-collapsed .sl-console-nav-section-label,
.sl-console-sidebar-collapsed .sl-console-brand-name {
  display: none;
}

/* Header + main content */

.sl-console-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sl-console-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.5rem;
  border-radius: 50%;
  color: var(--sl-console-text-mid, #5b6577);
  flex-shrink: 0;
}

.sl-console-header-back:hover {
  background: rgba(26, 37, 53, 0.06);
  color: inherit;
}

.sl-console-header {
  height: var(--sl-console-header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  background: var(--sl-console-surface);
  border-bottom: 1px solid var(--sl-console-border);
  box-shadow: 0 1px 3px rgba(26, 37, 53, 0.04);
  position: relative;
  z-index: 1;
}

.sl-console-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-weight: 700;
  color: var(--sl-console-text);
}

.sl-console-header-breadcrumb-link {
  color: var(--sl-console-text-mid);
  font-weight: 600;
  text-decoration: none;
}

.sl-console-header-breadcrumb-link:hover {
  color: var(--sl-console-text);
  text-decoration: underline;
}

.sl-console-header-breadcrumb-current {
  color: var(--sl-console-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-console-header-breadcrumb-sep {
  color: var(--sl-console-border);
  font-weight: 400;
}

.sl-console-header-context {
  flex: 1;
  text-align: center;
  color: var(--sl-console-text-mid);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Season selector: sits after the breadcrumb, before the user menu. margin-left:auto here (and
   not on the user block alone) is what pushes both to the right when a season is shown. */
.sl-console-header-season {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-console-header-season .form-select {
  width: auto;
  min-width: 9rem;
}

.sl-console-header-user {
  margin-left: auto;
}

/* Whichever of these comes first claims the spare space; the ones after it must not claim it
   again, or they end up separated by the whole header. */
.sl-console-header-season ~ .sl-console-header-user,
.sl-console-header-season ~ .sl-console-header-search,
.sl-console-header-search ~ .sl-console-header-user {
  margin-left: 0;
}

.sl-console-header-search {
  position: relative;
  margin-left: auto;
  width: min(18rem, 30vw);
}

/* The dropdown floats over the page rather than pushing the header taller. */
.sl-console-search-panel {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 0.25rem);
  right: 0;
  width: min(22rem, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 12%);
}

.sl-console-search-panel[hidden] {
  display: none;
}

.sl-console-search-group + .sl-console-search-group {
  margin-top: 0.75rem;
}

.sl-console-search-result {
  display: block;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.sl-console-search-result:hover,
.sl-console-search-result:focus {
  background: var(--sl-console-hover, rgb(0 0 0 / 5%));
  outline: none;
}

.sl-console-search-hint {
  padding: 0.375rem 0.5rem;
  color: var(--sl-console-muted, #6c757d);
  font-size: 0.875rem;
}

.sl-console-user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-console-user-link,
.sl-console-user-link:link,
.sl-console-user-link:visited {
  color: var(--sl-console-text-mid);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.sl-console-user-link:hover {
  color: var(--sl-console-primary);
}

.sl-console-user-link-button {
  cursor: pointer;
}

/* Avatar trigger + dropdown (account menu, role-view switcher) */
.sl-console-avatar-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  background: none;
  padding: 0.2rem 0.3rem;
  border-radius: 999px;
  cursor: pointer;
}

.sl-console-avatar-trigger:hover {
  background: var(--sl-console-canvas);
}

.sl-console-avatar-trigger::after {
  display: none; /* replace Bootstrap's default caret with our own chevron svg */
}

.sl-console-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--sl-console-primary);
  color: #e9a23b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.sl-console-avatar-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--sl-console-text);
}

.sl-console-account-menu {
  min-width: 15rem;
  padding: 0.4rem;
  border-radius: var(--bs-border-radius, 0.75rem);
  border-color: var(--sl-console-border);
  box-shadow: 0 8px 24px rgba(17, 32, 58, 0.12);
}

.sl-console-account-menu .dropdown-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-console-text-mid);
  padding: 0.4rem 0.6rem 0.2rem;
}

.sl-console-account-menu .dropdown-item {
  border-radius: 0.4rem;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-console-account-menu .dropdown-item.active,
.sl-console-account-menu .dropdown-item:active {
  background: var(--sl-console-canvas);
  color: var(--sl-console-text);
}

.sl-console-account-menu .dropdown-item:hover {
  background: var(--sl-console-canvas);
}

.sl-console-content {
  flex: 1;
  padding: 1.75rem 2rem;
  font-size: 0.9rem;
}

.sl-console-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1.5rem;
  color: var(--sl-console-text-light);
  font-size: 0.85rem;
  border-top: 1px solid var(--sl-console-border);
}

.sl-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.sl-footer-links a {
  color: inherit;
  text-decoration: none;
}

.sl-footer-links a:hover,
.sl-footer-links a:focus-visible {
  text-decoration: underline;
}

/* The app shell's footer sits at the end of the page content, above the fixed tab bar: the
   content's own bottom padding already clears the bar, so this adds none of its own. */
.sl-app-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.5rem 1rem calc(56px + env(safe-area-inset-bottom) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--sl-app-muted);
  font-size: 0.8125rem;
  background: var(--sl-app-canvas);
}

.sl-app-footer .sl-footer-links {
  gap: 0.5rem 1.25rem;
}

/* Components */

.sl-console-card {
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius, 0.75rem);
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(17, 32, 58, 0.04);
}

.sl-console-card-hover {
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.sl-console-card-hover:hover {
  box-shadow: 0 4px 12px rgba(26, 37, 53, 0.09);
  border-color: var(--sl-console-border-mid);
}

/* A little more breathing room than Bootstrap's default table density, and a tinted
   header row — cards holding a data table (team-seasons, registrations) read as too
   cramped otherwise. */
.sl-console-card .table > :not(caption) > * > * {
  padding: 0.85rem 1.25rem;
}

.sl-console-card .table > thead {
  background: var(--sl-console-canvas);
}

.sl-console-card .table > thead > tr > th {
  color: var(--sl-console-text-mid);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-width: 1px;
}

/* A sortable table-header link should read like the plain header label it replaces, not like
   a normal blue hyperlink — only the sort-direction arrow should stand out. */
.sl-console-sort-link,
.sl-console-sort-link:hover {
  color: inherit;
}

.sl-console-sort-arrow {
  color: #000;
}

.sl-console-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* A long status label (e.g. "Endorsed - awaiting Secretary") must clip rather than wrap onto
     a second line, which would blow out the grid row's fixed height (.grid__row is 52px). */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A badge that must show its whole label (a venue space's kind, surface, floodlights): its row
   wraps instead, so the label never clips. */
.sl-console-badge--fit {
  flex-shrink: 0;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.sl-console-badge-success {
  background: var(--sl-console-success-bg);
  color: var(--sl-console-success);
}

.sl-console-badge-warning {
  background: var(--sl-console-warning-bg);
  color: var(--sl-console-warning);
}

.sl-console-badge-danger {
  background: var(--sl-console-danger-bg);
  color: var(--sl-console-danger);
}

.sl-console-badge-info {
  background: var(--sl-console-info-bg);
  color: var(--sl-console-primary);
}

/* Nothing on file yet. Deliberately not red: "we have not been given it" is a chase, not a
   breach, and colouring every blank clearance red trains officials to ignore the colour. */
.sl-console-badge-muted {
  background: var(--sl-console-border);
  color: var(--sl-console-muted, #5b6577);
}

.sl-console-status-row {
  display: flex;
  gap: 1rem;
}

/* Club events calendar (FullCalendar, wwwroot/js/lib/fullcalendar/; ADR 0056). One colour per
   source from the console tokens: fixtures navy, sessions pitch green, rota duties amber (a fill,
   so navy text on top). The same classes colour the "Show" toggle swatches. */
.sl-cal-fixture {
  --sl-cal-fill: var(--sl-console-primary);
  --sl-cal-text: #ffffff;
}

.sl-cal-session {
  --sl-cal-fill: var(--sl-console-success);
  --sl-cal-text: #ffffff;
}

.sl-cal-duty {
  --sl-cal-fill: #e9a23b;
  --sl-cal-text: var(--sl-console-primary);
}

/* Team training (ADR 0068) is the pale pitch tint with navy text, so the weekly pattern stays
   quiet beside the solid game and session events. */
.sl-cal-training {
  --sl-cal-fill: #e1f1eb;
  --sl-cal-text: var(--sl-console-primary);
}

/* Room bookings (ADR 0057) are teal. A request still waiting for a decision is outlined: a white
   fill with a dashed navy border, so it reads as "not settled" beside the solid events. */
.sl-cal-roombooking {
  --sl-cal-fill: #2a8c93;
  --sl-cal-text: #ffffff;
}

.sl-cal-pending {
  --sl-cal-fill: #ffffff;
  --sl-cal-text: var(--sl-console-primary);
}

.fc .sl-cal-event,
.fc .sl-cal-event .fc-event-main,
.fc .sl-cal-event .fc-event-time,
.fc .sl-cal-event .fc-event-title {
  background: var(--sl-cal-fill);
  border-color: var(--sl-cal-fill);
  color: var(--sl-cal-text);
  cursor: pointer;
}

/* A dot event (a timed event in the month grid) takes the source colour as its dot. */
.fc .sl-cal-event .fc-daygrid-event-dot {
  border-color: var(--sl-cal-text);
}

.fc .sl-cal-postponed {
  opacity: 0.6;
}

.fc .sl-cal-cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}

.fc .sl-cal-not-published {
  border-style: dashed;
  border-color: var(--sl-console-danger);
}

.fc .sl-cal-pending {
  border: 1px dashed var(--sl-console-primary);
}

.sl-cal-swatch.sl-cal-pending {
  border: 1px dashed var(--sl-console-primary);
}

.sl-cal-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.25rem;
  border-radius: 0.2rem;
  background: var(--sl-cal-fill);
  vertical-align: -0.05rem;
}

.sl-console-status-card {
  flex: 1;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.sl-console-status-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--sl-console-text);
}

.sl-console-status-label {
  color: var(--sl-console-text-mid);
  font-size: 0.8rem;
  font-weight: 600;
}

.sl-console-status-substat {
  color: var(--sl-console-text-mid);
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

.sl-console-status-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.15rem;
}

.sl-console-status-trend-up { color: var(--sl-console-success); }
.sl-console-status-trend-down { color: var(--sl-console-danger); }

.sl-console-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-console-data-row:last-child {
  border-bottom: none;
}

.sl-console-data-row dt {
  color: var(--sl-console-text-mid);
  font-size: 0.85rem;
}

.sl-console-data-row dd {
  font-weight: 600;
  margin: 0;
}

.sl-console-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-console-text-mid);
  margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
  .sl-console-sidebar {
    width: var(--sl-console-sidebar-collapsed-width);
  }

  .sl-console-nav-label,
  .sl-console-nav-submenu,
  .sl-console-nav-section-label,
  .sl-console-brand-name {
    display: none;
  }

  .sl-console-header-context {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------
   Data grid — the canonical list-screen shape (console skill's "Data grid" section, ADR
   0012): sticky header, sortable columns, an identity cell (avatar + name over a muted
   sub-line), two-line data cells, and a fixed pagination footer. --cols sets the column
   template per screen. Shared by Players/Teams/Club members so every list looks and
   behaves the same way. */
.grid {
  flex: 1;
  min-height: 0;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius-lg, 1rem);
  /* Visible, not hidden: a row's action menu or a select opened in a row must be able to extend
     past the card instead of being clipped inside it. The page scrolls, not the grid. The first
     and last child round their own corners to keep the card shape (card 295). */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.grid > :first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.grid > :last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* On a phone the rows stack into cards, but a long badge or name can still be wider than the
   screen. Let the grid scroll sideways inside its own box so the page itself never does. (Clipping
   an open row menu here is the lesser evil on a narrow screen.) */
@media (max-width: 767.98px) {
  .grid {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* A plain <table> row that opens a drawer on click (ADR 0036) — the .grid__row pattern above is
   for the newer CSS-grid list screens; this is the equivalent affordance for a page still on a
   Bootstrap <table>. Pair with .table-hover on the <table> for the row-highlight on hover. */
.table-row-clickable {
  cursor: pointer;
}

.grid__head,
.grid__row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 0.75rem;
  padding: 0 1rem;
  align-items: center;
}

.grid__head {
  height: 34px;
  flex: none;
  background: var(--sl-console-canvas);
  border-bottom: 1px solid var(--sl-console-border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sl-console-text-mid);
}

.grid__body {
  flex: 1;
  min-height: 0;
  /* No inner scroll box: it clipped open menus and hid records behind a short viewport. */
  overflow: visible;
}

.grid__row {
  height: 52px;
  border-bottom: 1px solid var(--sl-console-border);
  cursor: pointer;
  background: var(--sl-console-surface);
  transition: background 120ms ease;
  text-decoration: none;
  color: inherit;
}

/* A row with badges under the name grows to hold them rather than spilling into the next row
   (a fixed 52px holds only the name and email lines). */
.grid__row.grid__row--tall,
.grid__row:has(.cell-id__badges) {
  height: auto;
  min-height: 52px;
  padding-block: 0.45rem;
}

.grid__row:hover {
  background: var(--sl-console-canvas);
  color: inherit;
}

.grid__row--attention {
  background: var(--sl-console-warning-bg);
}

.grid__actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
}

/* Every row exposes exactly one action control — a kebab menu — so the actions column
   stays a single, identically-positioned icon regardless of how many actions a given row
   offers, rather than a variable-width row of bordered buttons. */
.grid__actions-kebab {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--sl-console-text-mid);
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  background: transparent;
}

.grid__actions-kebab:hover,
.grid__actions-kebab[aria-expanded="true"] {
  background: var(--sl-console-canvas);
  border-color: var(--sl-console-border);
  color: var(--sl-console-text);
}

.grid__foot {
  height: 46px;
  flex: none;
  border-top: 1px solid var(--sl-console-border);
  background: var(--sl-console-canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.grid__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--sl-console-text-mid);
}

/* Identity cell: avatar + name (+ optional badge) over a muted sub-line. The inner line
   must clip, or a badge escapes into the next column when the name is long. */
.cell-id {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.cell-id__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cell-id__line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
}

.cell-id__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sl-console-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cell-id__sub {
  font-size: 0.72rem;
  color: var(--sl-console-text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badges under a row's name: their own line, wrapping, so a badge never truncates the name. */
.cell-id__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 2px;
}

/* Two-line data cell. */
.cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Consent cell: two icons side by side (photo, video), not stacked like every other .cell's
   two-line label/sub-label content. */
.cell[data-column="consent"] {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.cell__top {
  max-width: 100%;
  font-size: 0.82rem;
  color: var(--sl-console-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell__top--bad {
  font-weight: 600;
  color: var(--sl-console-danger);
}

.cell__top--good {
  font-weight: 600;
  color: var(--sl-console-success);
}

.cell__bottom {
  max-width: 100%;
  font-size: 0.72rem;
  color: var(--sl-console-text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--sl-console-info-bg);
  color: var(--sl-console-primary);
}

.avatar--square {
  border-radius: 8px;
}

/* A player's photo layered over their initials (card 294), the same way as .sl-avatar-chip: a
   failed load hides the img (img-fallback) and the initials underneath show. */
.avatar--photo,
.drawer-hero__avatar {
  position: relative;
  overflow: hidden;
}

.avatar--photo img,
.drawer-hero__avatar img,
.sl-child-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--bad {
  background: var(--sl-console-danger-bg);
  color: var(--sl-console-danger);
}

/* Bulk select (ADR 0027) — the checkbox cell, and the floating action bar that appears once
   something is selected. */

/* A sibling cell to the row's own controls, in both the head and each row. */
.grid__select {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A grid whose rows open nothing (the Registration Queue acts through the row's own controls,
   not a drawer) must not offer the pointer affordance a clickable row does. */
.grid--static .grid__row {
  cursor: default;
}

/* Floats over the content rather than pushing it, so the row a member is reading doesn't move
   under them the moment they tick the first checkbox. Centred on the viewport rather than on the
   content column: the sidebar's width changes when it collapses, and chasing that from CSS would
   need the shell to publish its current width as a custom property. */
.sl-bulkbar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1030;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 1rem;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border-mid);
  border-radius: var(--bs-border-radius-lg, 1rem);
  box-shadow: 0 8px 24px rgba(14, 23, 38, 0.18);
}

.sl-bulkbar[hidden] {
  display: none;
}

.sl-bulkbar__count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sl-console-text);
  white-space: nowrap;
}

.sl-bulkbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The confirm step takes the whole width below the actions, so the count it names is read
   before the destructive-looking button under it is pressed. */
.sl-bulkbar__confirm {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sl-console-border);
  font-size: 0.85rem;
  color: var(--sl-console-text-mid);
}

.sl-bulkbar__confirm[hidden] {
  display: none;
}

/* Filter chips — the toolbar above a grid, alongside its search box. */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.7rem;
  border: 1px solid var(--sl-console-border-mid);
  border-radius: var(--bs-border-radius);
  background: var(--sl-console-surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: #243044;
  cursor: pointer;
  white-space: nowrap;
  /* A chip is a button-like control, not a text link: no underline in any state. */
  text-decoration: none;
}

.fchip:hover {
  text-decoration: none;
  border-color: var(--sl-console-primary);
  color: #243044;
}

.fchip.fchip--on:hover {
  color: #fff;
}

.fchip--on {
  background: var(--sl-console-primary);
  border-color: var(--sl-console-primary);
  color: #fff;
}

.fchip__x {
  opacity: 0.7;
}

/* A saved view's chip carries a link plus its own remove form (ADR 0026), so the chip itself is
   a container rather than the anchor. The link takes the chip's colour in both states. */
.fchip__link {
  color: inherit;
  text-decoration: none;
}

/* The remove control is a real submit button inside that form, styled as the same dismiss glyph
   a filter chip already uses. */
button.fchip__x {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 1;
  font-size: 1rem;
}

/* FA portal entry packet (ADR 0028). The page is used with this window shrunk to half the
   screen and the FA's own portal in the other half, so the packet is one narrow column rather
   than a desktop-width layout — the eye moves straight down it, beside the portal's own column. */
.sl-fa-packet,
.sl-fa-actions {
  max-width: 38rem;
}

.sl-fa-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-fa-row:last-child {
  border-bottom: none;
}

/* Same micro-label style as `.sl-console .form-label`, applied to the rows that are values
   rather than form fields. */
.sl-fa-row > .sl-fa-row__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-console-text-mid);
  margin-bottom: 0;
}

/* One click selects the whole value, so Ctrl+C still works where the clipboard API does not:
   it needs a secure context, which plain HTTP has not (ADR 0028). The copy button is the fast
   path; this is the one that never breaks. */
.sl-fa-row__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-console-text);
  overflow-wrap: anywhere;
  user-select: all;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  margin-left: -0.35rem;
  border-radius: var(--bs-border-radius, 0.75rem);
}

.sl-fa-row__value:hover,
.sl-fa-row__value:focus-visible {
  background: var(--sl-console-canvas);
}

/* Fixed width so swapping the label for "Copied" or "Press Ctrl+C" doesn't shift the column. */
.sl-fa-row__copy {
  min-width: 7.5rem;
  white-space: nowrap;
}

/* The FA number box and the photo/document rows are two columns, not three: there is nothing
   to copy, and their content is taller than one line. */
.sl-fa-row--input,
.sl-fa-row--media {
  grid-template-columns: 10rem minmax(0, 1fr);
  align-items: start;
}

.sl-fa-row--input .sl-fa-row__value,
.sl-fa-row--media .sl-fa-row__value {
  user-select: auto;
  cursor: auto;
  padding: 0;
  margin-left: 0;
  font-weight: 400;
  background: none;
}

.sl-fa-row--input > .sl-fa-row__label {
  padding-top: 0.5rem;
}

.sl-fa-photo {
  display: block;
  width: 180px;
  max-width: 100%;
  margin-bottom: 0.35rem;
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius, 0.75rem);
}

.sl-fa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Half a screen can get narrow. The label moves above its value rather than squeezing the
   value into a column too thin to read a date of birth in. */
@media (max-width: 575.98px) {
  .sl-fa-row,
  .sl-fa-row--input,
  .sl-fa-row--media {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sl-fa-row > .sl-fa-row__label {
    grid-column: 1 / -1;
  }
}

/* Responsive collapse (console skill's Data grid spec): below the breakpoint the grid's
   fixed column template degrades to a stacked card per row — identity plus whichever cell
   a page marks `.grid__row-primary`, the rest tucked behind the row's drawer. */
@media (max-width: 767.98px) {
  .grid__head {
    display: none;
  }

  .grid__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 0.75rem 1rem;
    gap: 0.35rem;
  }

  .grid__row > :not(.cell-id):not(.grid__row-primary):not(.grid__actions) {
    display: none;
  }

  .grid__actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* "Start the season" progress list (ADR 0029) — the design system's stepper (numbered circles
   on a connecting rail) laid out vertically, because each step carries a sentence saying what
   is outstanding rather than a bare label. Every step is a link at all times: the journey is a
   progress list, not a lock-step wizard, so "done" is a report and never a gate. */
.sl-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-journey-step {
  position: relative;
}

/* The rail: a hairline from this step's marker down to the next one's. */
.sl-journey-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 2.1rem;
  bottom: -0.1rem;
  width: 2px;
  background: var(--sl-console-border);
}

.sl-journey-link {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.75rem 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--bs-border-radius, 0.75rem);
}

.sl-journey-link:hover .sl-journey-name {
  text-decoration: underline;
}

.sl-journey-marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  border: 2px solid var(--sl-console-border-mid);
  background: var(--sl-console-surface);
  color: var(--sl-console-text-mid);
  font-size: 0.8rem;
  font-weight: 700;
}

.sl-journey-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sl-journey-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.sl-journey-summary {
  color: var(--sl-console-text-mid);
  font-size: 0.82rem;
}

.sl-journey-step.is-done .sl-journey-marker {
  border-color: var(--sl-console-success);
  background: var(--sl-console-success-bg);
  color: var(--sl-console-success);
}

.sl-journey-step.is-current .sl-journey-marker {
  border-color: var(--sl-console-primary);
  background: var(--sl-console-primary);
  color: #fff;
}

.sl-journey-step.is-current .sl-journey-link {
  background: var(--sl-console-canvas);
}


/* Review allocation calendar (ADR 0056). One day as a CSS grid: a pinned time column, a column per
   pitch grouped under its venue, a tray for games with no venue. Positions are inline pixels from
   the server; --sl-alloc-row is the height of one row, drawn as a faint line. */
.sl-alloc-tray {
  background: var(--sl-console-surface);
  border: 1px dashed var(--sl-console-border-mid);
  border-radius: var(--bs-border-radius, 0.75rem);
  padding: 0.75rem 1rem;
}

.sl-alloc-tray.is-drop-target,
.sl-alloc-pitch.is-drop-target {
  background-color: var(--sl-console-info-bg);
}

.sl-alloc-scroll {
  overflow: auto;
  max-height: 75vh;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius, 0.75rem);
}

.sl-alloc-grid {
  display: grid;
  grid-template-rows: 2rem 2rem auto;
  min-width: max-content;
}

.sl-alloc-corner,
.sl-alloc-venue,
.sl-alloc-pitch-name,
.sl-alloc-times {
  background: var(--sl-console-surface);
}

.sl-alloc-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-alloc-venue,
.sl-alloc-pitch-name {
  position: sticky;
  z-index: 3;
  padding: 0 0.5rem;
  line-height: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--sl-console-border);
}

.sl-alloc-venue {
  top: 0;
  font-weight: 700;
  font-size: 0.85rem;
}

.sl-alloc-pitch-name {
  top: 2rem;
  font-size: 0.78rem;
  color: var(--sl-console-text-mid);
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-alloc-times {
  position: sticky;
  left: 0;
  z-index: 2;
  font-size: 0.72rem;
  color: var(--sl-console-text-mid);
}

.sl-alloc-times span {
  position: absolute;
  left: 0.5rem;
  transform: translateY(-50%);
  background: var(--sl-console-surface);
  padding: 0 0.15rem;
}

.sl-alloc-pitch {
  position: relative;
  border-left: 1px solid var(--sl-console-border);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--sl-console-border) 0,
    var(--sl-console-border) 1px,
    transparent 1px,
    transparent var(--sl-alloc-row)
  );
}

.sl-alloc-block {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(91, 101, 119, 0.16) 0 6px, rgba(91, 101, 119, 0.08) 6px 12px);
  color: var(--sl-console-text-mid);
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
}

.sl-alloc-held {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.2rem 0.4rem;
  overflow: hidden;
  pointer-events: auto;
  cursor: default;
  background: repeating-linear-gradient(135deg, rgba(91, 101, 119, 0.24) 0 6px, rgba(91, 101, 119, 0.12) 6px 12px);
  border: 1px dashed var(--sl-console-text-mid);
  border-radius: 0.4rem;
  color: var(--sl-console-text-mid);
  font-size: 0.75rem;
  line-height: 1.2;
}

.sl-alloc-block-booked {
  background: repeating-linear-gradient(135deg, rgba(91, 101, 119, 0.24) 0 6px, rgba(91, 101, 119, 0.12) 6px 12px);
}

.sl-alloc-card {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.2rem 0.4rem;
  overflow: hidden;
  cursor: grab;
  background: var(--sl-console-info-bg);
  border: 1px solid var(--sl-console-primary);
  border-left-width: 4px;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

.sl-alloc-card:focus-visible {
  outline: 2px solid var(--sl-console-primary);
  outline-offset: 1px;
}

.sl-alloc-card.is-dragging {
  opacity: 0.45;
}

.sl-alloc-card.is-drop-target {
  background: var(--sl-console-warning-bg);
}

.sl-alloc-card-tray {
  position: static;
  min-width: 10rem;
}

.sl-alloc-card-title {
  font-weight: 700;
}

.sl-alloc-card-meta {
  color: var(--sl-console-text-mid);
}

/* ---------------------------------------------------------------------------------------
   Fixture workflow chrome (Secretary fixtures screens). One self-contained block per
   component; other screens can reuse them (see the console skill, "Fixture workflow
   components"). All colours come from the console tokens, so every rule needs body.sl-console.
   --------------------------------------------------------------------------------------- */

/* Workflow stepper (_FixtureStepBar): numbered circles on a rail. Each step is one whole link.
   Current step is filled navy, the others are outline. Below 768px the labels collapse and the
   "Step 3 of 6: Review" line (.sl-fx-steps__compact) takes over. */
.sl-fx-steps {
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius, 0.75rem);
  padding: 0.25rem 0.5rem;
  margin-bottom: 1rem;
}

.sl-fx-steps__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-fx-steps__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.sl-fx-steps__item + .sl-fx-steps__item::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: -50%;
  width: 100%;
  height: 2px;
  transform: translateY(-1px);
  background: var(--sl-console-border-mid);
}

.sl-fx-steps__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0.5rem;
  color: var(--sl-console-text-mid);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.sl-fx-steps__link:hover {
  color: var(--sl-console-text);
}

.sl-fx-steps__link:focus-visible {
  outline: 2px solid var(--sl-console-primary);
  outline-offset: 2px;
}

.sl-fx-steps__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--sl-console-border-mid);
  border-radius: 50%;
  background: var(--sl-console-surface);
  color: var(--sl-console-text-mid);
  font-weight: 700;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.sl-fx-steps__link:hover .sl-fx-steps__dot {
  border-color: var(--sl-console-primary);
  color: var(--sl-console-text);
}

.sl-fx-steps__item.is-current .sl-fx-steps__dot {
  border-color: var(--sl-console-primary);
  background: var(--sl-console-primary);
  color: #fff;
}

.sl-fx-steps__item.is-current .sl-fx-steps__link {
  color: var(--sl-console-text);
  font-weight: 700;
}

.sl-fx-steps__compact {
  display: none;
  margin: 0;
  padding: 0 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 767.98px) {
  .sl-fx-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sl-fx-steps__compact {
    display: block;
  }
}

/* Section tab bar (_FixtureSubNav, and any page-level switch such as Review's List | Calendar):
   an underline tab bar with an amber active underline, matching the tabs inside drawers and modals
   but sitting on the page itself. */
.sl-console-tabs.nav-tabs {
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-console-tabs.nav-tabs .nav-link {
  margin-bottom: -1px;
  padding: 0.55rem 1.1rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  color: var(--sl-console-text-mid);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.sl-console-tabs.nav-tabs .nav-link:hover {
  border-color: transparent;
  background: var(--sl-console-canvas);
  color: var(--sl-console-text);
}

.sl-console-tabs.nav-tabs .nav-link.active {
  border-color: transparent transparent #e9a23b;
  background: transparent;
  color: var(--sl-console-text);
}

.sl-console-tabs.nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--sl-console-primary);
  outline-offset: -2px;
}

/* Toolbar card (_WeekendSwitcher row, date-range forms): controls sit on a white card, not
   loose on the canvas. */
.sl-console-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius, 0.75rem);
}

.sl-console-toolbar__end {
  margin-left: auto;
}

/* Weekend switcher (_WeekendSwitcher): [<] Sat 3 - Sun 4 Oct 2026 [>] and a This weekend button. */
.sl-week-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sl-week-switch__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.sl-week-switch__label {
  min-width: 12.5rem;
  padding: 0 0.5rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Action row: one item with a body on the left and its buttons on the right (requests, setup
   checklist). Sits inside a .sl-console-card.p-0. Add --warning for a row that needs doing. */
.sl-console-action-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-console-action-row:last-child {
  border-bottom: none;
}

.sl-console-action-row--warning {
  background: var(--sl-console-warning-bg);
  border-left: 3px solid var(--sl-console-warning);
}

.sl-console-action-row__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-console-action-row__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .sl-console-action-row {
    flex-wrap: wrap;
  }

  .sl-console-action-row__actions {
    width: 100%;
  }
}

/* Friendly empty state: a calm card with an icon, for "nothing needs doing". */
.sl-console-empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--sl-console-success-bg);
  border: 1px solid var(--sl-console-success);
  border-radius: var(--bs-border-radius, 0.75rem);
  color: var(--sl-console-success);
}

.sl-console-empty svg {
  flex-shrink: 0;
}

/* Compact stat tiles (weekend summary strip): the dashboard's status card, one size down. */
.sl-fx-summary .sl-console-status-card {
  padding: 0.7rem 1.1rem;
}

.sl-fx-summary .sl-console-status-value {
  font-size: 1.3rem;
}

/* Review calendar: the first time label sat half under the sticky headers and was clipped. */
.sl-alloc-times span:first-child {
  transform: none;
}

/* Fixture settings: each league is a Bootstrap accordion item that looks like the other cards. */
.sl-console-accordion.accordion {
  --bs-accordion-bg: var(--sl-console-surface);
  --bs-accordion-border-color: var(--sl-console-border);
  --bs-accordion-btn-color: var(--sl-console-text);
  --bs-accordion-active-color: var(--sl-console-text);
  --bs-accordion-active-bg: var(--sl-console-canvas);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(233, 162, 59, 0.35);
}

.sl-console-accordion.accordion > .accordion-item {
  margin-bottom: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius, 0.75rem);
  box-shadow: 0 1px 2px rgba(17, 32, 58, 0.04);
}

.sl-console-accordion .accordion-button {
  gap: 0.75rem;
  border-radius: 0;
}

.sl-console-accordion .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--sl-console-border);
}

/* Coach app: two big tappable entry cards (Request a friendly, Book a room). Uses the app-shell
   tokens, so it belongs on body.sl-app screens only. */
.sl-cta-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 1rem;
}

.sl-cta-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  background: var(--sl-app-card);
  border: 1px solid var(--sl-app-border);
  border-radius: 12px;
  color: var(--sl-app-navy);
  text-decoration: none;
}

.sl-cta-tile:hover {
  border-color: var(--sl-app-navy);
  color: var(--sl-app-navy);
}

.sl-cta-tile:focus-visible {
  outline: 2px solid var(--sl-app-navy);
  outline-offset: 2px;
}

.sl-cta-tile__title {
  font-weight: 700;
  font-size: 0.95rem;
}

.sl-cta-tile__sub {
  color: var(--sl-app-muted);
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------------------------------------
   Fixture import screen: numbered upload steps, the file drop zone, the guide lists, and the
   "need review" result tile. The drop zone is reusable (see "File drop zone" in the console
   design-system skill). */
.sl-import-step {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.sl-import-step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sl-console-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.sl-import-step__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem 1rem;
  border: 2px dashed var(--sl-console-border-mid);
  border-radius: var(--bs-border-radius, 0.75rem);
  background: var(--sl-console-canvas);
  color: var(--sl-console-text-mid);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.sl-dropzone:hover,
.sl-dropzone.is-dragover {
  border-color: var(--sl-console-primary);
  background: var(--sl-console-info-bg);
}

.sl-dropzone:focus-within {
  outline: 2px solid var(--sl-console-primary);
  outline-offset: 2px;
}

.sl-dropzone.has-file {
  border-style: solid;
  border-color: var(--sl-console-success);
  background: var(--sl-console-success-bg);
}

.sl-dropzone__icon {
  flex-shrink: 0;
}

.sl-dropzone__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sl-dropzone__text[hidden] {
  display: none;
}

.sl-dropzone__title {
  color: var(--sl-console-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.sl-dropzone__hint {
  font-size: 0.8rem;
}

.sl-dropzone__change {
  color: var(--sl-console-primary);
  font-weight: 700;
  text-decoration: underline;
}

/* The real file input stays in the tab order and the accessibility tree; it is only not painted. */
.sl-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sl-import-guide {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.sl-import-guide li {
  margin-bottom: 0.5rem;
}

.sl-import-guide li:last-child {
  margin-bottom: 0;
}

.sl-import-tile--attention {
  border-color: var(--sl-console-warning);
  background: var(--sl-console-warning-bg);
}

/* Action buttons in a request or booking row never wrap their label onto two lines. */
.sl-console-action-row__actions .btn {
  white-space: nowrap;
}

/* Shared pager footer (Views/Shared/_Pager.cshtml): range text, "Rows per page" select, and
   page links on one wrapping row. Same canvas strip as .grid__foot, but free to grow when it
   wraps on a narrow screen. */
.sl-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--sl-console-border);
  background: var(--sl-console-canvas);
}

.sl-pager__size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.sl-pager__size .form-select {
  width: auto;
}

/* Venue screen live preview (Views/VenueScreenSettings/Details.cshtml): a 16:9 frame. The page
   inside is drawn at four times the frame's width and scaled down by a quarter, so it keeps its
   layout; the screen sizes everything from its own viewport. */
.sl-console-screen-preview {
  position: relative;
  width: 100%;
  max-width: 48rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: #000;
}

.sl-console-screen-preview__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: 0 0;
}

/* ---------------------------------------------------------------------------------------
   Match day (ADR 0062): the set-up screen and the live match screen in the coach app. Big
   targets for a touchline: whole-row player buttons, a large clock, full-width controls.
   --------------------------------------------------------------------------------------- */
.sl-match-callout {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  background: var(--sl-app-canvas);
}

.sl-match-callout.is-good {
  background: var(--sl-app-good-tint);
  color: var(--sl-app-good);
}

.sl-match-callout.is-warn {
  background: var(--sl-app-amber-tint);
  color: #8a6118;
}

.sl-match-callout.is-bad {
  background: var(--sl-app-bad-tint);
  color: var(--sl-app-bad-text);
}

.sl-match-setup-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--sl-app-border);
}

.sl-match-setup-row:last-child {
  border-bottom: none;
}

summary.sl-match-setup-row {
  cursor: pointer;
}

.sl-match-choice {
  display: inline-flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.sl-match-choice .btn,
.sl-match-gk {
  min-width: 2.75rem;
  min-height: 2.5rem;
}

.sl-match-clock {
  margin: 0.75rem 1rem 0;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--sl-app-navy);
  color: #fff;
  text-align: center;
}

.sl-match-period {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-app-amber);
}

.sl-match-time {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sl-match-planned {
  font-size: 0.85rem;
  opacity: 0.8;
  min-height: 1.2em;
}

.sl-match-flags {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  min-height: 1.5rem;
}

.sl-match-controls {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 1rem 0;
}

.sl-match-big {
  min-height: 3.25rem;
  font-weight: 800;
  font-size: 1.1rem;
}

.sl-match-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sl-match-row > .btn,
.sl-match-add-period > summary {
  min-height: 2.75rem;
}

.sl-match-add-period > summary {
  list-style: none;
}

.sl-match-add-period > summary::-webkit-details-marker {
  display: none;
}

.sl-match-fulltime.is-due {
  background: var(--sl-app-amber);
  border-color: var(--sl-app-amber);
  color: var(--sl-app-navy);
  font-weight: 800;
}

[data-match-target="status"].is-problem {
  color: var(--sl-app-bad-text) !important;
  font-weight: 600;
}

.sl-match-swap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100% - 1.5rem);
  margin: 0.75rem 0.75rem 0;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--sl-app-amber);
  border-radius: 0.75rem;
  background: var(--sl-app-card);
  color: inherit;
  text-align: left;
}

.sl-match-swap[hidden] {
  display: none;
}

.sl-match-swap.is-due {
  background: var(--sl-app-amber);
  color: var(--sl-app-navy);
}

.sl-match-alert {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--sl-app-navy);
  color: #fff;
  text-align: center;
}

.sl-match-alert[hidden] {
  display: none;
}

.sl-match-alert-body {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 24rem;
}

.sl-match-alert-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sl-match-alert-names {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sl-app-amber);
  overflow-wrap: anywhere;
}

.sl-match-alert .btn-outline-secondary {
  color: #fff;
  border-color: #fff;
}

.sl-match-actions {
  padding: 0.75rem;
  border: 2px solid var(--sl-app-amber);
  border-radius: 0.75rem;
  background: var(--sl-app-card);
}

.sl-match-list:empty::after {
  content: "Nobody";
  display: block;
  padding: 0.75rem 1rem;
  color: var(--sl-app-muted);
  font-size: 0.85rem;
}

.sl-match-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: none;
  border-bottom: 1px solid var(--sl-app-border);
  background: transparent;
  color: inherit;
  text-align: left;
}

.sl-match-player:last-child {
  border-bottom: none;
}

.sl-match-player.is-selected {
  background: var(--sl-app-amber-tint);
  box-shadow: inset 4px 0 0 var(--sl-app-amber);
}

.sl-match-player-name {
  flex-grow: 1;
  min-width: 0;
  font-weight: 600;
}

.sl-match-minutes {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Stage 5: a player's stat counts on their row ("2 goals 1 assist"), compact and muted so they
   never compete with the name and the minutes; cards as small coloured marks. */
.sl-match-player-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sl-app-muted);
}

.sl-match-player-stats[hidden],
.sl-match-player-stats > [hidden] {
  display: none;
}

.sl-match-card {
  display: inline-block;
  min-width: 0.75rem;
  height: 1rem;
  padding: 0 0.15rem;
  border-radius: 0.15rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1rem;
  text-align: center;
}

.sl-match-card.is-yellow {
  background: #f2c230;
  color: var(--sl-app-navy);
}

.sl-match-card.is-red {
  background: #b4291f;
  color: #fff;
}

/* The stat picker in the selected player's panel: big targets, three to a row. */
.sl-match-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.sl-match-stat-btn {
  min-height: 3rem;
  font-weight: 700;
}

.sl-match-stat-btn.is-yellow {
  box-shadow: inset 6px 0 0 #f2c230;
}

.sl-match-stat-btn.is-red {
  box-shadow: inset 6px 0 0 #b4291f;
}

/* The optional final score on the full-time summary: the team's name, then its score box. */
.sl-match-score-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sl-match-score-row > label {
  flex-grow: 1;
  margin: 0;
}

.sl-match-score-row > input {
  width: 5rem;
  min-height: 2.75rem;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

.sl-match-summary-row {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--sl-app-border);
}

.sl-match-summary-row:last-child {
  border-bottom: none;
}

/* The sync line under the controls (ADR 0062, stage 3): the waiting-changes status on the left,
   "Last synced 14:32" on the right. */
.sl-match-sync {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

/* One clashed change, named, with its Remove button. */
.sl-match-clash-list {
  margin-top: 0.4rem;
}

.sl-match-clash {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid rgba(138, 97, 24, 0.2);
}

/* A picked choice (Start, Bench, GK) is a solid navy pill (the mobile skill's selected yes/no
   choice). The amber primary button itself comes from the shared Bootstrap theme above. */
.sl-match-screen .btn-check:checked + .btn {
  background: var(--sl-app-navy);
  border-color: var(--sl-app-navy);
  color: #fff;
}

/* ---------------------------------------------------------------------------------------
   Match day for parents and the coach's review (ADR 0063). The parent's stat rows: the label,
   the official count, the parent's own count and a large "+" target. The review's current
   choice on a parent count is the solid navy pill (the skill's selected yes/no choice).
   --------------------------------------------------------------------------------------- */
.sl-my-stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--sl-app-border);
  min-height: 3.5rem;
}

.sl-my-stat-row:last-child {
  border-bottom: none;
}

.sl-my-stat-head {
  min-height: 0;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-app-muted, #5b6577);
}

.sl-my-stat-count {
  width: 3.5rem;
  text-align: center;
  font-size: 1.1rem;
}

.sl-my-stat-head .sl-my-stat-count {
  font-size: 0.7rem;
}

.sl-my-stat-add,
.sl-my-stat-add-space {
  width: 3rem;
  flex-shrink: 0;
}

.sl-my-stat-add {
  height: 3rem;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

/* On a touch screen :hover sticks after a tap, which left the "+" dark (navy) until the next tap
   elsewhere. A phone has no hover, so the count buttons only change while they are pressed. */
@media (hover: none) {
  .sl-my-stat-add,
  .sl-review-step {
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-color: #0e1726;
  }
}

.sl-my-stat-add.is-yellow {
  border-color: #e9c23b;
}

.sl-my-stat-add.is-red {
  border-color: var(--sl-app-bad, #b4291f);
}

/* The parent's match screen folds the yellow and red card rows into one "Cards" section. */
.sl-my-stat-cards-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 1rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sl-app-muted, #5b6577);
  border-top: 1px solid var(--sl-app-border);
}

.sl-my-stat-cards-summary::-webkit-details-marker {
  display: none;
}

.sl-my-stat-cards-summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.1rem;
}

.sl-my-stat-cards[open] > .sl-my-stat-cards-summary::after {
  content: "\2212";
}

.sl-review-player > summary {
  cursor: pointer;
  list-style: none;
}

.sl-review-player > summary::-webkit-details-marker {
  display: none;
}

.sl-review-step {
  width: 2.5rem;
  font-weight: 800;
}

.sl-match-screen .btn.is-current {
  background: var(--sl-app-navy);
  border-color: var(--sl-app-navy);
  color: #fff;
}

/* Basic mode (ADR 0062, "Basic and Live modes"): the squad list with an Appeared tick per player
   and, when the age group records stats, a plus and minus per stat under a "Stats" fold. */
.sl-match-basic-player {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--sl-app-border);
}

.sl-match-basic-player:last-child {
  border-bottom: none;
}

.sl-match-basic-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
}

.sl-match-appeared {
  min-width: 6.5rem;
  font-weight: 700;
}

.sl-match-screen .btn.sl-match-appeared.is-on {
  background: var(--sl-app-navy);
  border-color: var(--sl-app-navy);
  color: #fff;
}

.sl-match-basic-stats > summary {
  min-height: 2rem;
  font-size: 0.85rem;
  color: var(--sl-app-muted);
  cursor: pointer;
}

.sl-match-basic-stat-grid {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.sl-match-basic-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-match-basic-stat-count {
  min-width: 1.75rem;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------
   Help (ADR 0066): the public help pages, the "?" button, and the bottom sheet the app opens an
   article in. The pages sit on the registration wizard canvas (body.sl-wizard.sl-help with a
   .sl-registration wrapper), so Bootstrap's theme and the link colours already apply. The
   selectors that must beat ".sl-registration a:not(.btn)" start with body.sl-help.
   --------------------------------------------------------------------------------------- */
.sl-help-shell {
  max-width: 720px;
  padding-top: 1.25rem;
}

.sl-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 720px;
}

body.sl-help a.sl-help-brand {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

body.sl-help a.sl-help-brand span {
  color: var(--sl-app-amber);
}

body.sl-help a.sl-help-brand .sl-help-brand-tag {
  margin-left: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

body.sl-help a.sl-help-open {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

body.sl-help a.sl-help-open:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sl-help-title {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sl-help-label {
  padding-left: 0;
  padding-right: 0;
}

.sl-help-muted {
  color: var(--sl-app-muted);
  font-size: 0.85rem;
}

.sl-help-crumbs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sl-app-muted);
}

body.sl-help .sl-help-crumbs a {
  color: var(--sl-app-muted);
}

.sl-help-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sl-help-search .form-control {
  flex: 1;
  min-width: 0;
}

.sl-help-card {
  background: var(--sl-app-card);
  border: 1px solid var(--sl-app-border);
  border-radius: 12px;
  overflow: hidden;
}

.sl-help-empty {
  padding: 1.25rem;
}

body.sl-help a.sl-help-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--sl-app-border);
  color: inherit;
  text-decoration: none;
}

body.sl-help a.sl-help-row:first-child {
  border-top: 0;
}

body.sl-help a.sl-help-row:hover {
  background: var(--sl-app-canvas);
  color: inherit;
}

.sl-help-row > .sl-icon:last-child {
  color: var(--sl-app-muted);
  flex-shrink: 0;
}

.sl-help-row-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.sl-help-row-text {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--sl-app-muted);
}

.sl-help .sl-chip-row {
  margin-bottom: 0.75rem;
}

body.sl-help a.sl-chip {
  text-decoration: none;
}

body.sl-help a.sl-chip.is-active {
  color: #fff;
}

.sl-help-faq {
  border-top: 1px solid var(--sl-app-border);
}

.sl-help-faq:first-child {
  border-top: 0;
}

.sl-help-faq > summary {
  display: flex;
  align-items: center;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.sl-help-faq-body {
  padding: 0 1rem 1rem 2.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* The article: a readable column of body text, with numbered steps drawn as navy badges. */
.sl-help-article {
  padding: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

.sl-help-article > .sl-help-title + p {
  font-size: 1.02rem;
  font-weight: 500;
}

.sl-help-article h2,
.sl-help-article--sheet h2 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
}

.sl-help-article h3,
.sl-help-article--sheet h3,
.sl-help-faq-body h3 {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
}

.sl-help-article p,
.sl-help-article--sheet p {
  margin: 0 0 0.85rem;
}

.sl-help-article ul,
.sl-help-article--sheet ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.sl-help-article ol,
.sl-help-article--sheet ol {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: sl-help-step;
}

.sl-help-article ol > li,
.sl-help-article--sheet ol > li {
  position: relative;
  min-height: 1.75rem;
  margin-bottom: 0.75rem;
  padding-left: 2.5rem;
  counter-increment: sl-help-step;
}

.sl-help-article ol > li::before,
.sl-help-article--sheet ol > li::before {
  content: counter(sl-help-step);
  position: absolute;
  top: 0.1rem;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sl-app-navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-align: center;
}

.sl-help-article li > p:last-child {
  margin-bottom: 0;
}

.sl-help-article img,
.sl-help-article--sheet img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.75rem 0;
  border: 1px solid var(--sl-app-border);
  border-radius: 10px;
}

.sl-help-article table {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sl-help-article th,
.sl-help-article td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--sl-app-border);
  text-align: left;
  vertical-align: top;
}

.sl-help-article th {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-app-muted);
}

.sl-help-article blockquote,
.sl-help-article--sheet blockquote {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--sl-app-amber-tint);
}

.sl-help-article blockquote > :last-child {
  margin-bottom: 0;
}

.sl-help-article code {
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--sl-app-canvas);
  color: var(--sl-app-navy);
  font-size: 0.88em;
}

.sl-help-stuck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: var(--sl-app-amber-tint);
}

.sl-help-stuck-title {
  font-weight: 800;
}

.sl-help-stuck-text {
  font-size: 0.85rem;
  color: var(--sl-app-muted);
}

.sl-help-footer {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.5rem 1rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
}

body.sl-help .sl-help-footer a {
  color: var(--sl-app-muted);
}

/* The console's App button (ADR 0094 decision 2, card 314): a navy pill with amber text and a
   phone icon, Sideline's own control rather than a stock Bootstrap button. It mirrors the app
   header's Console pill (.sl-app-context-pill), so the two switches read as one pair. */
.sl-console-app-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--sl-console-primary, #0e1726);
  border-radius: 999px;
  background: var(--sl-console-primary, #0e1726);
  color: #e9a23b;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.sl-console-app-pill:hover {
  background: #1d2a40;
  border-color: #1d2a40;
  color: #e9a23b;
}

.sl-console-app-pill:active {
  background: #26354f;
}

.sl-console-app-pill:focus-visible {
  outline: 2px solid #e9a23b;
  outline-offset: 2px;
}

.sl-console-header-user:has(.sl-console-app-pill) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The "?" button. Light by default (the console header); on a navy header band it turns to a
   translucent outline so it reads as part of the band. */
.sl-console-header-user:has(.sl-help-btn) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sl-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--sl-console-border, #e3e8ee);
  border-radius: 50%;
  background: #fff;
  color: var(--sl-console-primary, #0e1726);
  text-decoration: none;
  flex-shrink: 0;
}

.sl-help-btn:hover {
  background: #f4f6f8;
  color: #0e1726;
}

.sl-app-header .sl-help-btn,
.sl-help-corner .sl-help-btn {
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
}

.sl-app-header .sl-help-btn:hover,
.sl-help-corner .sl-help-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* On the wizard layout the page draws its own header band, so the button floats over the right
   edge of the band, inside the same column. The band keeps clear of it. */
.sl-help-corner {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 1.1rem);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem;
  pointer-events: none;
}

.sl-help-corner .sl-help-btn {
  pointer-events: auto;
}

body:has(.sl-help-corner) .sl-wizard-header-inner {
  padding-right: 2.75rem;
}

/* The bottom sheet: remote-modal's dialog, pinned to the foot of the screen with rounded top
   corners and a scrolling body, slid up in place of Bootstrap's drop-in from the top. */
.sl-help-sheet .modal-dialog,
.sl-sponsor-sheet .modal-dialog {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

.sl-help-sheet.fade .modal-dialog,
.sl-sponsor-sheet.fade .modal-dialog {
  transform: translateY(100%);
}

.sl-help-sheet.show .modal-dialog,
.sl-sponsor-sheet.show .modal-dialog {
  transform: none;
}

.sl-help-sheet .modal-content,
.sl-sponsor-sheet .modal-content {
  max-height: 85vh;
  border: 0;
  border-radius: 1rem 1rem 0 0;
}

.sl-help-sheet .modal-header,
.sl-sponsor-sheet .modal-header {
  border-bottom: 1px solid var(--sl-app-border, #e3e8ee);
}

.sl-help-sheet .modal-title,
.sl-sponsor-sheet .modal-title {
  font-size: 1rem;
  font-weight: 800;
}

.sl-help-sheet .modal-body,
.sl-sponsor-sheet .modal-body {
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

.sl-help-sheet-title {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.sl-help-article--sheet {
  font-size: 0.95rem;
  line-height: 1.65;
}

.sl-help-sheet-more {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Training timetable grid (ADR 0068, stage 3): pitches down the side, weekdays across. A cell
   shades the pitch times and stacks the slots; a slot with a clash or a warning is tinted. */
.sl-training-grid {
  /* Equal day columns that share the card's width; below the minimum the card scrolls
     sideways (the pitch column stays put) rather than clipping a day. */
  --sl-training-days: 5;
  --sl-training-day-min: 10.5rem;
  table-layout: fixed;
  width: 100%;
  min-width: calc(10rem + var(--sl-training-days) * var(--sl-training-day-min));
}

/* With the weekend columns shown, each day may be a little narrower, so six or seven days
   still fit a laptop screen before the card scrolls. */
.sl-training-grid--weekend {
  --sl-training-day-min: 8.75rem;
}

.sl-training-grid th,
.sl-training-grid td {
  vertical-align: top;
  padding: 0.5rem 0.4rem;
}

.sl-training-grid__pitch {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sl-console-surface);
}

.sl-training-grid thead th:first-child,
.sl-training-grid tbody th.sl-training-grid__pitch {
  width: 10rem;
}

.sl-training-nowrap {
  white-space: nowrap;
}

.sl-training-grid__venue th {
  background: var(--sl-console-canvas);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sl-console-text-mid);
}

.sl-training-grid th.sl-training-grid__pitch--depth-1 {
  padding-left: 1.4rem;
}

.sl-training-grid th.sl-training-grid__pitch--depth-2 {
  padding-left: 2.2rem;
}

.sl-training-grid th.sl-training-grid__pitch--depth-3 {
  padding-left: 3rem;
}

.sl-training-window {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  border-radius: var(--bs-border-radius);
  background: var(--sl-console-info-bg);
  font-size: 0.85rem;
}

.sl-training-window--full {
  background: var(--sl-console-canvas);
  color: var(--sl-console-text-mid);
}

.sl-training-inuse {
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.4rem;
  border: 1px dashed var(--sl-console-border);
  border-radius: var(--bs-border-radius);
  font-size: 0.78rem;
  color: var(--sl-console-text-mid);
}

.sl-training-slot__body {
  min-width: 0;
}

.sl-training-slot__name {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.sl-training-still__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sl-training-still__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.3rem 0.25rem 0.75rem;
  border: 1px solid var(--sl-console-border);
  border-radius: 999px;
  font-size: 0.85rem;
}

.sl-training-slot {
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--sl-console-border);
  border-left: 4px solid var(--sl-console-success);
  border-radius: var(--bs-border-radius);
  background: var(--sl-console-surface);
}

.sl-training-slot--warning {
  border-left-color: var(--sl-console-warning);
  background: var(--sl-console-warning-bg);
}

.sl-training-slot--clash {
  border-left-color: var(--sl-console-danger);
  background: var(--sl-console-danger-bg);
}

.sl-training-slot__note {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--sl-console-warning);
}

.sl-training-slot__note--clash {
  color: #8e2119;
}

/* The public tournament pages (ADR 0064 section 9): phone-first for spectators. They reuse the
   console's table, bracket and badge partials, so they take the console colour tokens above. */
.sl-public-tournament .sl-announcements {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sl-public-tournament .sl-announcement {
  background: var(--sl-console-warning-bg);
  border: 1px solid #f0d9a8;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--sl-console-text);
}

.sl-public-tournament .sl-announcement-for {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-console-warning);
}

.sl-public-tournament .sl-tstatus {
  font-weight: 700;
  margin-bottom: 1rem;
}

.sl-public-tournament .sl-tsection-sub {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-console-text-mid);
  margin: 1rem 0 0.25rem;
}

.sl-public-tournament .sl-tgames {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-public-tournament .sl-tgame {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-public-tournament .sl-tgame:last-child {
  border-bottom: 0;
}

.sl-public-tournament .sl-tgame-sides {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.sl-public-tournament .sl-tgame-score {
  font-weight: 800;
  white-space: nowrap;
}

/* The team this phone remembers (follow-team Stimulus controller). */
.sl-public-tournament .sl-remembered {
  background: var(--sl-console-warning-bg);
  box-shadow: 0 0 0 0.2rem var(--sl-console-warning-bg);
  border-radius: 0.25rem;
}

/* The coach's team page (ADR 0064 section 7, stage 9): one card per part, on the key page and in
   the club app. Takes the console colour tokens through .sl-public-tournament. */
.sl-public-tournament .sl-team-card {
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.sl-app .sl-public-tournament {
  margin: 0 1rem;
}

/* A short list of tick boxes (a team chooser) that scrolls rather than growing the form. */
.sl-checklist {
  max-height: 11rem;
  overflow-y: auto;
}

/* Messages (ADR 0070). The Trix editor is a third-party component: border, radius and focus ring
   come from the console tokens, and the toolbar keeps only bold, italic, link, lists and quote. */
.sl-rich-text trix-toolbar {
  margin-bottom: 0.5rem;
}

.sl-rich-text trix-toolbar .trix-button-group {
  border: 1px solid var(--sl-console-border-mid);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.sl-rich-text trix-toolbar .trix-button-group--file-tools,
.sl-rich-text trix-toolbar .trix-button--icon-strike,
.sl-rich-text trix-toolbar .trix-button--icon-heading-1,
.sl-rich-text trix-toolbar .trix-button--icon-code,
.sl-rich-text trix-toolbar .trix-button--icon-decrease-nesting-level,
.sl-rich-text trix-toolbar .trix-button--icon-increase-nesting-level {
  display: none;
}

.sl-rich-text trix-editor {
  min-height: 8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sl-console-border-mid);
  border-radius: var(--bs-border-radius);
  background: var(--sl-console-surface);
  color: var(--sl-console-text);
}

.sl-rich-text trix-editor:focus {
  border-color: var(--sl-console-primary);
  box-shadow: 0 0 0 0.2rem rgba(14, 23, 38, 0.15);
}

/* A message in a thread: the club's side has an amber edge, the family's a navy one. */
.sl-message {
  border-left: 4px solid var(--sl-console-border-mid);
}

.sl-message--club {
  border-left-color: #e9a23b;
}

.sl-message--family {
  border-left-color: var(--sl-console-primary);
}

.sl-message__body > :last-child {
  margin-bottom: 0;
}

/* An email reply held for review (card 246): a dashed amber edge on a light amber tint, so it
   never reads as a message that is already in the conversation. */
.sl-held-reply {
  border-left: 4px dashed #e9a23b;
  background: var(--sl-console-warning-bg);
}

.sl-thread-message.sl-thread-held {
  max-width: 100%;
  align-self: stretch;
  background: var(--sl-app-amber-tint);
  border: 1px dashed var(--sl-app-amber);
}

/* The parent's thread (Messaging 4/9, sideline-mobile-frontend "Message thread"): newest at the
   bottom; the club's messages left on the card surface, the reader's own right on a navy tint. */
.sl-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
}

.sl-thread-message {
  max-width: 88%;
  align-self: flex-start;
  background: var(--sl-app-card);
  border: 1px solid var(--sl-app-border);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  overflow-wrap: anywhere;
}

.sl-thread-message.is-mine {
  align-self: flex-end;
  background: #e7eaf0;
  border-color: #d5dbe4;
}

.sl-thread-meta {
  font-size: 0.75rem;
  color: var(--sl-app-muted);
  margin-bottom: 0.25rem;
}

/* On a phone the editor's text is at least 16px, so iOS does not zoom on focus, and the toolbar
   stays on one scrolling row above it. */
.sl-app .sl-rich-text trix-editor {
  font-size: 16px;
  min-height: 6rem;
}

.sl-app .sl-rich-text trix-toolbar .trix-button-row {
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* Sponsors in the parent app (ADR 0079). The strip at the foot of Home: one even card per sponsor
   (logo in a fixed box, name below), scrolling sideways, ending in a "See all N" card. The same
   cards fill the in-app list as a two-column grid. A card is a button that opens the sponsor
   sheet (the bottom sheet shares the help sheet's rules above). */
.sl-sponsor-strip-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-sponsor-row {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.15rem 1rem 0.75rem;
}

.sl-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.5rem 1rem 1rem;
}

.sl-sponsor-card {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 6rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--sl-app-border);
  border-radius: 14px;
  background: var(--sl-app-card);
  color: var(--sl-app-navy);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sl-sponsor-grid .sl-sponsor-card {
  width: auto;
}

.sl-sponsor-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 2.5rem;
}

.sl-sponsor-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sl-sponsor-card-name {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sl-sponsor-more {
  justify-content: center;
  border-style: dashed;
  border-width: 1.5px;
  color: var(--sl-app-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

/* The sponsor sheet's content. */
.sl-sponsor-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sl-sponsor-sheet-logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 4rem;
  border: 1px solid var(--sl-app-border);
  border-radius: 12px;
}

.sl-sponsor-sheet-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sl-sponsor-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.sl-sponsor-sheet-name {
  overflow-wrap: anywhere;
}

.sl-sponsor-sheet-details {
  color: var(--sl-app-muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.sl-sponsor-sheet-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.5rem;
}

.sl-sheet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border: 1.5px solid var(--sl-app-navy);
  border-radius: 12px;
  background: var(--sl-app-card);
  color: var(--sl-app-navy);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

.sl-sheet-btn-primary {
  min-height: 3.125rem;
  border-color: var(--sl-app-amber);
  background: var(--sl-app-amber);
  font-size: 0.9375rem;
}

/* ---- New-club setup wizard (ADR 0088) ----
   A focused page under body.sl-console with no sidebar: navy top bar, progress rail, the question,
   and a help column. One column on a phone. */
.sl-onboarding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sl-onb-top {
  background: var(--sl-console-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.875rem 2rem;
}

.sl-onb-brand {
  font-weight: 800;
  font-size: 1.125rem;
}

.sl-onb-brand b {
  color: #e9a23b;
}

.sl-onb-club {
  color: #c4ccd8;
  font-size: 0.8125rem;
}

.sl-onb-leave {
  background: transparent;
  color: #fff;
  border: 1px solid #3a4862;
  border-radius: 0.625rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.sl-onb-leave:hover {
  background: var(--sl-console-primary-light);
}

.sl-onb-main {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 2rem;
  flex: 1;
}

.sl-onb-body {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sl-onb-wide {
  max-width: 1000px;
  margin: 0 auto;
}

.sl-onb-narrow {
  max-width: 640px;
  margin: 0 auto;
}

.sl-onb-h1 {
  margin: 0 0 0.375rem;
  font-size: 1.625rem;
  font-weight: 800;
}

.sl-onb-muted {
  color: var(--sl-console-text-mid);
}

.sl-onb-card {
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: 0.875rem;
  padding: 1.25rem;
}

.sl-onb-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-console-text-mid);
}

.sl-onb-info,
.sl-onb-warn,
.sl-onb-preview {
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
}

.sl-onb-info {
  background: var(--sl-console-info-bg);
}

.sl-onb-warn {
  background: var(--sl-console-warning-bg);
  color: var(--sl-console-text);
}

.sl-onb-warn strong {
  color: var(--sl-console-warning);
}

.sl-onb-preview {
  background: var(--sl-console-canvas);
  border: 1px dashed var(--sl-console-border-mid);
}

.sl-onb-info p {
  margin: 0.25rem 0 0;
}

.sl-onb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.sl-onb-grid-2,
.sl-onb-grid-3 {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sl-onb-span-2 {
  grid-column: span 2;
}

.sl-onb-rail {
  flex: 0 0 190px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-onb-rail li {
  padding: 0.5rem 0;
  color: var(--sl-console-text-mid);
  font-weight: 600;
}

.sl-onb-rail a,
.sl-onb-rail span {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
  text-decoration: none;
}

.sl-onb-rail b {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  border: 2px solid var(--sl-console-border-mid);
  background: var(--sl-console-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.sl-onb-rail-done b {
  background: var(--sl-console-success);
  border-color: var(--sl-console-success);
  color: #fff;
}

.sl-onb-rail-current {
  color: var(--sl-console-text);
  font-weight: 800;
}

.sl-onb-rail-current b {
  background: var(--sl-console-primary);
  border-color: var(--sl-console-primary);
  color: #fff;
}

.sl-onb-aside {
  flex: 0 0 260px;
}

.sl-onb-options {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sl-onb-option {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.sl-onb-option-recommended {
  border: 2px solid var(--sl-console-primary);
}

.sl-onb-option-title {
  font-weight: 800;
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.sl-onb-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 0.125rem 0.5625rem;
  background: var(--sl-console-border);
  color: var(--sl-console-text-mid);
  vertical-align: middle;
}

.sl-onb-pill-good {
  background: var(--sl-console-success-bg);
  color: var(--sl-console-success);
}

.sl-onb-pill-warn {
  background: var(--sl-console-warning-bg);
  color: var(--sl-console-warning);
}

.sl-onb-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--sl-console-border);
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
}

.sl-onb-table th {
  font-size: 0.75rem;
  color: var(--sl-console-text-mid);
}

.sl-onb-next {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 767.98px) {
  .sl-onb-top,
  .sl-onb-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sl-onb-main {
    flex-direction: column;
    gap: 1rem;
  }

  .sl-onb-rail,
  .sl-onb-aside {
    flex: none;
    width: 100%;
  }

  .sl-onb-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .sl-onb-span-2 {
    grid-column: auto;
  }
}

.sl-onb-note {
  flex: 1 1 100%;
}


/* ---- Venue page (ADR 0091) ------------------------------------------------------------------ */

/* Free text typed by a club official keeps its line breaks. */
.sl-preline {
  white-space: pre-line;
}

/* Yes / no / to-do checklist lines on the venue page's Details tab and emergency card. */
.sl-venue-checks li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.25rem;
}

.sl-venue-checks li::before {
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1rem;
  text-align: center;
  font-weight: 700;
}

.sl-venue-check--yes::before { content: "\2713"; color: var(--sl-console-success); }
.sl-venue-check--no { color: var(--sl-console-text-mid); }
.sl-venue-check--no::before { content: "\2013"; color: var(--sl-console-text-light); }
.sl-venue-check--todo::before { content: "!"; color: var(--sl-console-warning); }
.sl-venue-check--warn { color: var(--sl-console-warning); font-weight: 600; }
.sl-venue-check--warn::before { content: "!"; color: var(--sl-console-warning); }

.sl-eap-card {
  border-top: 4px solid var(--sl-console-primary);
}

.sl-eap-card__qr {
  width: 8rem;
  height: 8rem;
  flex: none;
}

/* The Spaces tab's nested list: a bordered list of rows, each pitch inside another indented. */
.sl-space-list {
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius);
}

.sl-space-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem calc(1rem + var(--sl-space-depth, 0) * 2.5rem);
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-space-list > .sl-space-row:last-child,
.sl-space-list > .sl-space-note:last-child {
  border-bottom: 0;
}

.sl-space-row--inside {
  background: var(--sl-console-canvas);
}

.sl-space-note {
  padding: 0 1rem 0.75rem calc(1rem + var(--sl-space-depth, 1) * 2.5rem);
  background: var(--sl-console-canvas);
  border-bottom: 1px solid var(--sl-console-border);
}

/* A small pitch or room shape in front of each row. */
.sl-space-icon {
  width: 2.25rem;
  height: 1.5rem;
  flex: none;
  border-radius: 3px;
  border: 2px solid var(--sl-console-text-mid);
  background: var(--sl-console-canvas);
}

.sl-space-icon--pitch {
  border-color: var(--sl-console-success);
  background: var(--sl-console-success-bg);
}

.sl-space-row--inside .sl-space-icon {
  width: 1.75rem;
  height: 1.1rem;
  border-style: dashed;
}

.sl-space-empty {
  max-width: 44rem;
}

/* The guided "Add a space" flow. */
.sl-space-flow {
  max-width: 56rem;
}

.sl-space-flow__progress {
  display: flex;
  gap: 0.5rem;
}

.sl-space-flow__bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--sl-console-border);
}

.sl-space-flow__bar--done {
  background: var(--sl-console-primary);
}

.sl-space-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.875rem;
}

.sl-space-kind {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-height: 6.5rem;
  padding: 1rem;
  background: var(--sl-console-surface);
  border: 1px solid var(--sl-console-border);
  border-radius: var(--bs-border-radius-lg);
  color: var(--sl-console-text);
  text-decoration: none;
}

.sl-space-kind:hover,
.sl-space-kind:focus-visible {
  border-color: var(--sl-console-primary);
  box-shadow: 0 0 0 3px #e9a23b;
  color: var(--sl-console-text);
}

.sl-space-kind__title {
  font-weight: 700;
}

.sl-space-kind__help {
  font-size: 0.85rem;
  color: var(--sl-console-text-mid);
}

/* The split-pitch preview: the big pitch with one dashed box per smaller pitch. */
.sl-split-preview__pitch {
  display: flex;
  gap: 6px;
  width: 10rem;
  height: 6rem;
  padding: 6px;
  flex: none;
  border: 2px solid var(--sl-console-success);
  background: var(--sl-console-success-bg);
}

.sl-split-preview__part {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px dashed var(--sl-console-success);
}

.sl-split-preview__part[hidden] {
  display: none;
}

.sl-rule-list li {
  margin-bottom: 0.4rem;
}

/* The team tick list in the match-day rules drawers (ADR 0091): scrolls inside the drawer when a
   club has many teams. */
.sl-rule-team-list {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sl-console-border, #E3E8EE);
  border-radius: var(--bs-border-radius);
}

.sl-rule-sentence-value {
  background: #FDF1D9;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.sl-venue-add > summary {
  list-style: none;
}

.sl-venue-add > summary::-webkit-details-marker {
  display: none;
}

/* A fact a visitor must not miss, such as "No dogs": darkened amber (never raw amber text). */
.sl-venue-facts li.sl-venue-facts__warn,
.sl-venue-facts li.sl-venue-facts__warn .sl-icon {
  color: #8a6118;
  font-weight: 600;
}

/* The Venues home (ADR 0091): one row per venue, stacking below 1280px. */
.sl-venue-row {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 12rem 15rem 6.5rem;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--sl-console-border);
}

.sl-venue-rows > .sl-venue-row:last-child {
  border-bottom: 0;
}

.sl-venue-row__plan .sl-console-badge--fit {
  white-space: normal;
  border-radius: 0.75rem;
}

.sl-venue-row--off {
  opacity: 0.7;
}

@media (max-width: 1279.98px) {
  .sl-venue-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.sl-space-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--sl-console-canvas);
  border: 1px solid var(--sl-console-border);
}

.sl-facility-icons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sl-facility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  color: var(--sl-console-text-mid);
  background: var(--sl-console-canvas);
  cursor: help;
}

.sl-facility-icon:focus-visible {
  outline: 2px solid var(--sl-console-primary);
  outline-offset: 2px;
}

.sl-facility-icon--warn {
  color: var(--sl-console-warning);
  background: var(--sl-console-warning-bg);
}