html {
  font-size: 14px;
}

/* ============================================================================
   Tokens
   The raw colors come from the tenant configuration: what lives here is only the
   platform fallback, the "tenant not known" case. Once the slug is known,
   TenantThemeViewModel.ToCssVariables() re-emits them inline on the page container,
   together with the derived semantic tokens and the neutrals of the mode
   (SPECIFICATIONS.md 8.2.1). No component ties readability to a raw color: it uses
   the semantic token.
   ========================================================================= */
:root {
  /* "Brand" collection: input of the color system, not consumable tokens. */
  --bst-primary: #283990;
  --bst-secondary: #CA2233;
  --bst-accent: #CA2233;

  /* Semantic tokens derived by luminance and contrast (fallback values). */
  --bst-on-primary: #ffffff;
  --bst-on-secondary: #ffffff;
  --bst-accent-on-surface: #CA2233;
  --bst-primary-on-surface: #283990;

  /* Derived in CSS from the brand tokens: no literal tenant color anywhere. */
  --bst-primary-hover: color-mix(in srgb, var(--bst-primary), #000 12%);
  --bst-primary-soft: color-mix(in srgb, var(--bst-primary) 10%, transparent);
  --bst-primary-ring: color-mix(in srgb, var(--bst-primary) 35%, transparent);
  --bst-primary-hairline: color-mix(in srgb, var(--bst-primary) 45%, transparent);
  --bst-on-primary-soft: color-mix(in srgb, var(--bst-on-primary) 78%, transparent);

  /* Neutrals: independent of the brand, and the same values TenantThemeNeutrals emits. */
  --bst-page: #f5f7fb;
  --bst-surface: #ffffff;
  --bst-text: #1f2937;
  --bst-muted: #6b7280;
  --bst-border: #d7dbe7;
  --bst-row-line: #edeff3;

  /* Status: meaning is never carried by the brand color. */
  --bst-success: #198754;
  --bst-success-soft: #eaf6ee;
  --bst-waiting: #997404;
  --bst-waiting-soft: #fff8e1;
  --bst-danger: #dc3545;
  --bst-danger-soft: #fdecee;

  /* Shape and rhythm. */
  --bst-radius: 8px;
  --bst-radius-lg: 10px;
  --bst-radius-mark: 16px;
  --bst-control-height: 46px;
  --bst-action-height: 50px;
  /* Touch target, in px on purpose: the root font-size is 14px below 768px, so a rem
     value would quietly shrink the thumb target to 38px on exactly the phones the
     bottom bar was designed for (11.8). */
  --bst-tap-target: 44px;
  /* Header padding above the safe area, the 14px the spec fixes in px (9.2). */
  --bst-header-pad: 14px;
  /* Width of one bottom-bar destination. Wide enough for the longest label, narrow
     enough that the five of them stay a group instead of spanning the window. */
  --bst-bottombar-item: 72px;
  --bst-gutter: 24px;
  --bst-column: 480px;

  /* Safe area: it only matters in an installed PWA, in a browser tab it is 0. */
  --bst-safe-top: env(safe-area-inset-top, 0px);
  --bst-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.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 #258cfb;
}

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

body {
  margin-bottom: 60px;
  background-color: var(--bst-page);
  color: var(--bst-text);
}

body.public-layout {
  margin-bottom: 0;
}

.navbar-brand {
  color: var(--bst-primary) !important;
  font-weight: 700;
}

/* ============================================================================
   Entry screens (SPECIFICATIONS.md 7.1)
   Neutral login, tenant login, tenant choice, access request, password: five screens
   sharing the same frame.
   ========================================================================= */

/* Fallback of the derived tokens for when no tenant is known and the API sends nothing.
   They are declared here and not only on :root because a custom property holding a var()
   is substituted on the element that declares it: on :root it would always use the
   fallback primary instead of the tenant one, which arrives inline on this very container.
   The veiled ones use alpha, like the resolved values they stand in for. */
.entry,
.theme-preview {
  --bst-primary-hover: color-mix(in srgb, var(--bst-primary), #000 12%);
  --bst-primary-soft: color-mix(in srgb, var(--bst-primary) 10%, transparent);
  --bst-primary-ring: color-mix(in srgb, var(--bst-primary) 35%, transparent);
  --bst-primary-hairline: color-mix(in srgb, var(--bst-primary) 45%, transparent);
  --bst-on-primary-soft: color-mix(in srgb, var(--bst-on-primary) 78%, transparent);
  --bst-accent-soft: color-mix(in srgb, var(--bst-accent-on-surface) 12%, transparent);
  --bst-on-accent: var(--bst-on-primary);
}

.entry {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bst-page);
  color: var(--bst-text);
  font-size: 0.875rem;
}

/* Login backdrop of the tenant. The image sits behind a veil of the page color, so the
   form keeps its contrast whatever the photograph is: the fields must stay readable, the
   backdrop is decoration. Only the tenant login sets --bst-login-backdrop. */
.entry--backdrop {
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--bst-page) 82%, transparent),
      color-mix(in srgb, var(--bst-page) 94%, transparent)),
    var(--bst-login-backdrop);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* --- Centered header: the one thing that differs between the two logins --- */

.entry-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: calc(2rem + var(--bst-safe-top)) var(--bst-gutter) 1.875rem;
  text-align: center;
}

/* With a slug the brand exists: the header becomes a branded surface. */
.entry-head--brand {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

/* Without a slug there is no brand to show: neutral header, not colored. */
.entry-head--plain {
  background: var(--bst-surface);
  color: var(--bst-text);
  border-bottom: 1px solid var(--bst-border);
}

/* After login the tenant is not chosen yet: no brand, text aligned left and no colored
   surface. */
.entry-head--bare {
  align-items: flex-start;
  gap: 0.375rem;
  padding-bottom: 1.375rem;
  text-align: left;
  background: transparent;
}

.entry-head--bare .entry-head__text {
  align-items: flex-start;
}

.entry-head--bare .entry-title {
  font-size: 1.375rem;
}

.entry-head--bare .entry-subtitle {
  font-size: 0.8125rem;
  line-height: 1.45;
}

.entry-head__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.entry-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.entry-subtitle {
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.entry-head--brand .entry-subtitle {
  color: var(--bst-on-primary-soft);
}

/* --- Mark: the logo the tenant uploaded, monogram as the fallback --------- */

.entry-mark {
  width: 3.875rem;
  height: 3.875rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--bst-radius-mark);
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.entry-head--brand .entry-mark {
  background: var(--bst-on-primary);
  color: var(--bst-primary);
}

.entry-mark--sm {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.5625rem;
  font-size: 0.75rem;
}

.entry-mark--icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.8125rem;
}

/* List row: the mark is filled with the tenant's own identity color, and the monogram sits
   on the ink the resolver picked for it - both arrive on the row, so nothing is guessed
   here. Without them it falls back to the theme in scope. */
.entry-mark--row {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6875rem;
  font-size: 0.875rem;
  background: var(--bst-mark-brand, var(--bst-primary));
  color: var(--bst-mark-ink, var(--bst-on-primary));
}

.entry-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bst-surface);
}

/* --- Compact tenant bar, with an explicit way back (9.2) ------------------ */

.entry-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(1.25rem + var(--bst-safe-top)) 1.25rem 1rem;
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.entry-bar__back {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
}

.entry-bar__back:hover,
.entry-bar__back:focus {
  color: inherit;
  opacity: 1;
}

.entry-bar__text {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.entry-bar__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

.entry-bar__caption {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--bst-on-primary-soft);
}

/* --- Body and footer ------------------------------------------------------ */

.entry-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: min(100%, var(--bst-column));
  margin-inline: auto;
  padding: 1.625rem var(--bst-gutter) 0;
}

.entry-body--tight {
  padding-inline: 1.25rem;
}

.entry-footer-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(100%, var(--bst-column));
  margin-inline: auto;
  padding: 1.125rem var(--bst-gutter) 0;
}

.entry-foot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 1.125rem var(--bst-gutter) calc(1.625rem + var(--bst-safe-bottom));
  font-size: 0.625rem;
  color: var(--bst-muted);
}

/* --- Fields --------------------------------------------------------------- */

.entry-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.entry-field__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.entry-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.entry-counter {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--bst-muted);
}

.entry-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.entry-row > * {
  flex: 1 1 0;
  min-width: 0;
}

.entry-field .form-control,
.entry-field .form-select {
  min-height: var(--bst-control-height);
  padding: 0.5rem 0.8125rem;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background-color: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.875rem;
}

.entry-input-wrap {
  position: relative;
  display: flex;
}

.entry-input-wrap .form-control {
  padding-right: 2.75rem;
}

.entry-input-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--bst-muted);
}

.entry-input-toggle.is-active,
.entry-input-toggle:hover {
  color: var(--bst-text);
}

.entry-field textarea.form-control {
  min-height: 7.375rem;
  line-height: 1.5;
}

.entry-field .form-control:focus,
.entry-field .form-select:focus {
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.entry-field .form-control.input-validation-error,
.entry-field .form-select.input-validation-error {
  border-color: var(--bst-danger);
}

.entry-help {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--bst-muted);
}

.entry-help strong {
  color: var(--bst-text);
}

.entry-error {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bst-danger);
}

.entry-error:empty {
  display: none;
}

/* --- Actions -------------------------------------------------------------- */

.entry-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--bst-action-height);
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--bst-radius);
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.entry-action:hover,
.entry-action:focus {
  background: var(--bst-primary-hover);
  color: var(--bst-on-primary);
}

.entry-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.entry-action--ghost {
  min-height: var(--bst-control-height);
  background: transparent;
  border-color: var(--bst-primary-on-surface);
  color: var(--bst-primary-on-surface);
  font-size: 0.875rem;
}

.entry-action--ghost:hover,
.entry-action--ghost:focus {
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.entry-action--quiet {
  min-height: var(--bst-control-height);
  background: transparent;
  border-color: var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.875rem;
}

.entry-action--quiet:hover,
.entry-action--quiet:focus {
  background: var(--bst-surface);
  color: var(--bst-text);
}

.entry-link {
  color: var(--bst-primary-on-surface);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.entry-link:hover,
.entry-link:focus {
  text-decoration: underline;
}

.entry-link--end {
  align-self: flex-end;
}

.entry-link--start {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* --- Labelled divider ----------------------------------------------------- */

.entry-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.entry-divider::before,
.entry-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--bst-border);
}

/* --- Surfaces ------------------------------------------------------------- */

.entry-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
}

.entry-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.entry-card__text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bst-muted);
}

.entry-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.8125rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--bst-muted);
}

.entry-note--lead {
  font-size: 0.8125rem;
  color: var(--bst-text);
}

.entry-note strong {
  color: var(--bst-text);
}

.entry-note__icon {
  flex: 0 0 auto;
  margin-top: 0.0625rem;
  color: var(--bst-muted);
}

.entry-note__icon--brand {
  color: var(--bst-primary-on-surface);
}

.entry-note__body {
  flex-grow: 1;
  min-width: 0;
}

.entry-lead {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bst-muted);
}

/* --- Status messages ------------------------------------------------------ */

.entry-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 0.8125rem;
  border: 1px solid var(--bst-border);
  border-left-width: 3px;
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bst-text);
}

.entry-alert--error {
  border-left-color: var(--bst-danger);
  background: var(--bst-danger-soft);
}

.entry-alert--warning {
  border-left-color: var(--bst-waiting);
  background: var(--bst-waiting-soft);
}

.entry-alert--success {
  border-left-color: var(--bst-success);
  background: var(--bst-success-soft);
}

.entry-alert--info {
  border-left-color: var(--bst-primary-on-surface);
  background: var(--bst-primary-soft);
}

.entry-alert dt {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

/* --- Full screen outcome -------------------------------------------------- */

.entry-outcome {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.75rem;
}

.entry-outcome__badge {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.875rem;
  background: var(--bst-success-soft);
  color: var(--bst-success);
}

.entry-outcome__badge--waiting {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.6875rem;
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.entry-outcome__title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
}

.entry-outcome__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--bst-muted);
}

.entry-outcome__text strong {
  color: var(--bst-text);
}

/* --- Tenant list (K1) ----------------------------------------------------- */

.entry-choices {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.entry-choice {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  padding: 0.875rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  color: inherit;
  text-decoration: none;
}

.entry-choice:hover,
.entry-choice:focus {
  border-color: var(--bst-primary-hairline);
  color: inherit;
}

.entry-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.entry-choice__text {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.entry-choice__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.entry-choice__role {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.entry-choice__chevron {
  flex: 0 0 auto;
  color: var(--bst-muted);
}

/* --- Chips and badges ----------------------------------------------------- */

/* The chip carries the accent on a light surface, so it uses accent-on-surface over
   accent-soft: never the raw secondary. */
.entry-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--bst-accent-soft);
  color: var(--bst-accent-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Status badges do NOT take their color from the brand: a monochrome tenant cannot carry
   meaning with color, and "available / not available" must stay readable everywhere. */
.entry-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.entry-badge--ok {
  background: var(--bst-success-soft);
  color: var(--bst-success);
}

.entry-badge--waiting {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.entry-badge--ko {
  background: var(--bst-danger-soft);
  color: var(--bst-danger);
}

/* --- Jersey number: the one way the number of a shirt is shown ---------------------------------------------------
   A round of the brand colour with the number centred in it, the same wherever a number is read (lists, cards, game
   page, roster). It is the brand's own pair, primary and its ink, so it stays readable on every tenant.

       <span class="jersey">7</span>                  the usual size
       <span class="jersey jersey--xs">7</span>       where there is no room (the compact table on a phone)
       <span class="jersey jersey--sm">7</span>       for dense rows
       <span class="jersey jersey--lg">7</span>       for a title

   The size is one variable (--jersey-size): the figure follows it. One or two digits make a circle; a third one lets
   the round grow into a short pill instead of overflowing. It is a label, not a control: no hover, no cursor. */
.jersey {
  --jersey-size: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--jersey-size);
  height: var(--jersey-size);
  padding: 0 calc(var(--jersey-size) * 0.12);
  border-radius: 999px;
  background: var(--bst-primary);
  color: var(--bst-on-primary, #fff);
  font-size: calc(var(--jersey-size) * 0.4);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The smallest the figure can be read at: the figure keeps a 10px floor instead of following the round down. */
.jersey--xs {
  --jersey-size: 22px;
  font-size: 0.625rem;
}

.jersey--sm {
  --jersey-size: 26px;
}

.jersey--lg {
  --jersey-size: 40px;
}

/* --- Password rules ------------------------------------------------------- */

.entry-rules {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  margin: 0;
  padding: 0.75rem 0.8125rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  list-style: none;
}

.entry-rule {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.entry-rule svg {
  flex: 0 0 auto;
}

.entry-rule.is-satisfied {
  color: var(--bst-success);
}

/* ============================================================================
   General area (SPECIFICATIONS.md 9.2, 11.8)
   The frame the twenty screens of the area inherit: two-row header with the
   persistent team context, feed, bottom bar. Every color is a token: this block
   must render on any brand without a single literal.
   ========================================================================= */

.ga-body {
  margin-bottom: 0;
}

.ga {
  /* Same reason as .entry: a custom property holding var() is substituted on the
     element that declares it, so the derived tokens are redeclared here to see the
     tenant primary that arrives inline on this container. */
  --bst-primary-hover: color-mix(in srgb, var(--bst-primary), #000 12%);
  --bst-primary-soft: color-mix(in srgb, var(--bst-primary) 10%, transparent);
  --bst-primary-ring: color-mix(in srgb, var(--bst-primary) 35%, transparent);
  --bst-primary-hairline: color-mix(in srgb, var(--bst-primary) 45%, transparent);
  --bst-on-primary-soft: color-mix(in srgb, var(--bst-on-primary) 78%, transparent);
  --bst-on-primary-edge: color-mix(in srgb, var(--bst-on-primary) 40%, transparent);
  --bst-accent-soft: color-mix(in srgb, var(--bst-accent-on-surface) 12%, transparent);
  --bst-on-accent: var(--bst-on-primary);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bst-page);
  color: var(--bst-text);
  font-size: 0.875rem;
}

/* --- Header: brand row and context row ------------------------------------ */

.ga-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  /* Safe area, not padding: 14px in a browser tab, more in an installed PWA. */
  padding: calc(var(--bst-header-pad) + var(--bst-safe-top)) 1rem 0.75rem;
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.ga-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.25rem;
}

/* The mark of the brand row, a notch bigger than the compact one the other bars use. */
.ga-header__brand .entry-mark--sm {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6875rem;
  font-size: 0.875rem;
}

.ga-header__tenant {
  flex-grow: 1;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ga-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0 0.5625rem;
  border: 1px solid var(--bst-on-primary-edge);
  border-radius: 20px;
  color: var(--bst-on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* The avatar is the one place where the brand secondary is legitimate: it sits on
   brand/primary, never on a light surface (8.2.1). */
.ga-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--bst-on-primary-edge);
  border-radius: 50%;
  background: var(--bst-secondary);
  color: var(--bst-on-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ga-chip::-webkit-details-marker,
.ga-avatar::-webkit-details-marker,
.ga-team__current::-webkit-details-marker,
.ga-answer__no > summary::-webkit-details-marker,
.ga-answer__change > summary::-webkit-details-marker {
  display: none;
}

/* --- Popovers: no script, a details element opens them --------------------- */

.ga-pop {
  position: relative;
  flex: 0 0 auto;
}

.ga-pop__panel {
  position: absolute;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  margin-top: 0.5rem;
  padding: 0.375rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  color: var(--bst-text);
  box-shadow: 0 12px 30px rgb(15 18 28 / 18%);
}

.ga-pop__title {
  margin: 0;
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.ga-pop__identity {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--bst-row-line);
  margin-bottom: 0.25rem;
}

.ga-pop__name {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ga-pop__hint {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.ga-pop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--bst-radius);
  background: transparent;
  color: var(--bst-text);
  font-size: 0.8125rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ga-pop__item:hover,
.ga-pop__item:focus-visible {
  background: var(--bst-primary-soft);
  color: var(--bst-text);
}

.ga-pop__item.is-current {
  font-weight: 700;
  color: var(--bst-primary-on-surface);
}

/* Crossing into the staff area is a change of context, not a preference: it gets its
   own weight, and it is hidden - not disabled - for who is not staff (9.2). */
.ga-pop__item--area {
  margin-top: 0.25rem;
  border: 1px solid var(--bst-border);
  font-weight: 700;
}

.ga-pop__item--danger {
  margin-top: 0.25rem;
  border-top: 1px solid var(--bst-row-line);
  border-radius: 0 0 var(--bst-radius) var(--bst-radius);
  color: var(--bst-danger-on-surface);
  font-weight: 700;
}

/* --- Team context: the access point of the whole area ---------------------- */

.ga-team {
  position: relative;
}

.ga-team__current,
.ga-team__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  /* A slim bar: the context is always there, so it should cost as little height as it can. */
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  border: 0;
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.ga-team__badge {
  width: 1.625rem;
  height: 1.625rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--bst-radius);
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-size: 0.6875rem;
  font-weight: 800;
}

.ga-team__text {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.ga-team__name {
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ga-team__meta {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.ga-team__switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-primary-on-surface);
}

.ga-team__list {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.375rem;
  padding: 0.375rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  box-shadow: 0 12px 30px rgb(15 18 28 / 18%);
}

.ga-team__option.is-current {
  background: var(--bst-primary-soft);
}

/* --- Feed ----------------------------------------------------------------- */

.ga-main {
  flex-grow: 1;
  min-height: 0;
}

.ga-feed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 640px);
  margin-inline: auto;
  padding: 0.875rem 1rem 1rem;
}

.ga-section {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}

.ga-agenda,
.ga-agenda__main,
.ga-agenda__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Agenda on a wide screen: what is coming up on the left, the last results beside it. Under 1024px
   it is one column in the same order (to do, upcoming, results). */
@media (min-width: 1024px) {
  .ga-feed--agenda {
    width: min(100%, 780px);
  }

  .ga-feed--agenda:has(.ga-agenda--split) {
    width: min(100%, 1180px);
  }

  .ga-agenda--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: 1.5rem;
    align-items: start;
  }
}

.ga-section__title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.ga-card {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 0.8125rem 0.875rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

/* What still needs an answer is the reason this screen exists: it gets the accent edge. */
.ga-card--todo {
  border-color: var(--bst-accent-on-surface);
}

.ga-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ga-card__when {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.ga-card__title-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.ga-card__title {
  flex-grow: 1;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.ga-card__score {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--bst-primary-on-surface);
}

.ga-card__meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.ga-card__player {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
}

.ga-card__player-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--bst-primary);
}

/* --- Pills ---------------------------------------------------------------- */

.ga-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5625rem;
  border: 1px solid var(--bst-border);
  border-radius: 20px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.ga-pill--accent {
  border-color: var(--bst-accent-on-surface);
  color: var(--bst-accent-on-surface);
}

/* Status pills never take the brand color: a monochrome tenant cannot carry meaning
   with color, so available and unavailable keep their own (8.2.1, 8.2.3). */
.ga-pill--ok {
  border-color: var(--bst-success-on-surface);
  color: var(--bst-success-on-surface);
}

.ga-pill--waiting {
  border-color: var(--bst-waiting-on-surface);
  color: var(--bst-waiting-on-surface);
}

.ga-pill--ko {
  border-color: var(--bst-danger-on-surface);
  color: var(--bst-danger-on-surface);
}

/* The convocation is published but it is not about me: the accent, softer than the pill of mine. */
.ga-pill--accent-soft {
  background: var(--bst-accent-soft);
  color: var(--bst-accent-on-surface);
}

/* The button that is only an icon (the pin of the maps, copy, edit): a round touch target a little larger than the drawing,
   the colour of the text it sits in, a soft brand wash on hover and on focus. A link and a button look the same. */
.ga-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bst-primary-on-surface);
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}

.ga-icon-btn[hidden] {
  display: none;
}

.ga-icon-btn--sm {
  width: 28px;
  height: 28px;
}

.ga-icon-btn:hover,
.ga-icon-btn:focus-visible {
  background: var(--bst-primary-soft);
  outline: none;
}

.ga-icon-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--bst-primary);
}

/* In the line of text of an address, the pin sits on the line without making it taller. */
.ga-card__meta .ga-icon-btn {
  margin: -4px 0 -4px 0.25rem;
}

/* The place of a practice in the detail of the calendar. */
.cal-panel__place {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The edit icon sits in the head of the panel, before the close button. */
.cal-panel__edit {
  margin-left: auto;
}

.cal-panel__edit + .cal-panel__close {
  margin-left: 0;
}

/* --- Meeting point and the answer ----------------------------------------- */

.ga-meeting {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  color: var(--bst-primary-on-surface);
}

.ga-meeting__body {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
  color: var(--bst-text);
}

.ga-meeting__title {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ga-meeting__note {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

/* One player on a practice card, on one row: the name, then the one thing he can say or take back. The
   whole row is the touch target even where the button is small. */
.ga-abs {
  min-width: 0;
}

.ga-abs__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--bst-tap-target);
}

/* The checkbox is only the switch behind the button: out of sight, still reachable with the keyboard. */
.ga-abs__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ga-abs {
  position: relative;
}

.ga-answer__panel.ga-abs__panel {
  display: none;
}

.ga-abs__toggle:checked ~ .ga-answer__panel.ga-abs__panel {
  display: flex;
}

.ga-abs__toggle:focus-visible ~ .ga-abs__row .ga-btn {
  outline: 2px solid var(--bst-primary);
  outline-offset: 2px;
}

.ga-abs__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
}

.ga-abs__form {
  margin: 0;
}

.ga-abs__note {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.ga-answer {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  padding-top: 0.1875rem;
}

.ga-answer__yes,
.ga-answer__no {
  flex: 1 1 0;
  min-width: 0;
}

.ga-btn {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--bst-tap-target);
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--bst-radius);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* The compact button of a row: as wide as its words. */
.ga-btn--sm {
  width: auto;
  min-height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.ga-btn--primary {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.ga-btn--ok {
  background: var(--bst-success);
  color: var(--bst-on-success);
}

.ga-btn--ko {
  background: transparent;
  border-color: var(--bst-danger-on-surface);
  color: var(--bst-danger-on-surface);
}

.ga-btn--ko-solid {
  background: var(--bst-danger);
  color: var(--bst-on-danger);
}

.ga-answer__panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.ga-answer__label {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ga-answer__hint {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.ga-answer__panel .form-control:focus {
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.ga-answer__change {
  margin-top: 0.125rem;
}

.ga-link {
  display: inline-block;
  color: var(--bst-primary-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}

.ga-link::-webkit-details-marker {
  display: none;
}

.ga-answered {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
}

.ga-answered.is-ok {
  background: var(--bst-success-soft);
  border-color: var(--bst-success-on-surface);
  color: var(--bst-success-on-surface);
}

.ga-answered.is-ko {
  background: var(--bst-danger-soft);
  border-color: var(--bst-danger-on-surface);
  color: var(--bst-danger-on-surface);
}

.ga-answered__body {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.ga-answered__title {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ga-answered__note {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.ga-empty {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  text-align: center;
}

.ga-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.ga-empty__text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

/* --- Bottom bar ----------------------------------------------------------- */

.ga-bottombar {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  /* The group stays centred instead of spreading: on a wide window five stretched
     items put the destinations under nobody's thumb. */
  justify-content: center;
  gap: 0.25rem;
  /* Safe area at the bottom, same rule as the header on top. */
  padding: 0.5rem 0.75rem calc(0.5rem + var(--bst-safe-bottom));
  background: var(--bst-surface);
  border-top: 1px solid var(--bst-border);
}

.ga-bottombar__item {
  /* No grow, but shrinkable: an item keeps its own width and only gives it up on the
     narrowest phones, where the five of them end up filling the row anyway. */
  flex: 0 1 var(--bst-bottombar-item);
  min-width: var(--bst-tap-target);
  min-height: var(--bst-tap-target);
  padding-inline: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: var(--bst-radius);
  color: var(--bst-muted);
  text-decoration: none;
}

.ga-bottombar__item.is-active {
  color: var(--bst-primary-on-surface);
}

.ga-bottombar__item.is-active .ga-bottombar__label {
  font-weight: 700;
}

.ga-bottombar__item.is-todo {
  opacity: 0.45;
  cursor: default;
}

.ga-bottombar__label {
  font-size: 0.625rem;
  /* One line: a wrapped label would push the bar past the tap target height. */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .ga-header {
    padding-inline: 1.5rem;
  }

  .ga-bottombar {
    padding-inline: 1.5rem;
  }
}

/* On a wide screen the general area stops growing and stays a column in the middle.
   The feed was already 640px: what spread was the frame around it, so on a 2560px
   monitor the brand sat at one edge and the avatar at the other with a strip of
   content between them. The staff area is not bound this way - it is a data-entry
   area, and its tables want the width (SPECIFICATIONS.md 9.1). */
@media (min-width: 1024px) {
  .ga {
    width: min(100%, 1280px);
    margin-inline: auto;
    border-inline: 1px solid var(--bst-border);
  }
}

/* ============================================================================
   Campionato (U2/U10) - calendar and standings of one round, in two tabs.
   Wider than the 640px feed: the compact calendar and the standings table both
   want the room a chat-width column would waste (SPECIFICATIONS.md U2/U10).
   ========================================================================= */

.cmp-page {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: 0.875rem 1rem 1rem;
}

.cmp-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.cmp-head__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
}

/* --- Round picker: one control, not a row of chips that would not fit ten rounds. */

.cmp-round-picker {
  position: relative;
  flex-grow: 1;
  min-width: 0;
}

.cmp-round-picker__current {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-height: var(--bst-tap-target);
  max-width: 100%;
  padding: 0 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  cursor: pointer;
  list-style: none;
}

.cmp-round-picker__current::-webkit-details-marker {
  display: none;
}

.cmp-round-picker__text {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
  flex-grow: 1;
}

.cmp-round-picker__competition {
  font-size: 0.625rem;
  color: var(--bst-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-round-picker__name {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sheet on a phone, anchored dropdown from tablet width up (SPECIFICATIONS.md U2). */
.cmp-round-picker__panel {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0 calc(0.5rem + var(--bst-safe-bottom));
  border-radius: 1rem 1rem 0 0;
  background: var(--bst-surface);
  box-shadow: 0 -8px 30px rgb(15 18 28 / 18%);
}

.cmp-round-picker__group-title {
  padding: 0.5rem 1rem 0.25rem;
  background: var(--bst-page);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--bst-muted);
}

.cmp-round-picker__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--bst-tap-target);
  padding: 0 1rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: var(--bst-text);
  text-decoration: none;
}

.cmp-round-picker__option-name {
  flex-grow: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-round-picker__option.is-current {
  background: var(--bst-primary-soft);
}

.cmp-round-picker__option.is-current .cmp-round-picker__option-name {
  font-weight: 800;
  color: var(--bst-primary-on-surface);
}

.cmp-round-picker__check {
  flex: 0 0 auto;
  color: var(--bst-primary-on-surface);
}

.cmp-status-pill {
  flex: 0 0 auto;
  padding: 0.125rem 0.4375rem;
  border: 1px solid var(--bst-border);
  border-radius: 20px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bst-muted);
  white-space: nowrap;
}

.cmp-status-pill--in-corso {
  border-color: var(--bst-success);
  color: var(--bst-success);
}

/* --- Tabs: Calendario / Classifica, the second only when the round produces one. */

.cmp-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  border-bottom: 1px solid var(--bst-border);
}

.cmp-tabs__tab {
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  padding: 0 0.375rem;
  border-bottom: 2px solid transparent;
  color: var(--bst-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.cmp-tabs__tab.is-active {
  border-bottom-color: var(--bst-primary);
  color: var(--bst-primary-on-surface);
  font-weight: 700;
}

/* --- Toolbar: scope belongs to the calendar only, density to both densities of it. */

.cmp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cmp-scope,
.cmp-density {
  display: flex;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  overflow: hidden;
}

.cmp-density {
  margin-left: auto;
}

.cmp-scope__option,
.cmp-density__option {
  min-height: 2rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cmp-scope__option + .cmp-scope__option,
.cmp-density__option + .cmp-density__option {
  border-left: 1px solid var(--bst-border);
}

.cmp-scope__option.is-active,
.cmp-density__option.is-active {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 700;
}

/* --- Calendar: comoda (one card per game) and compatta (one symmetric row). --- */

.cmp-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cmp-group {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.cmp-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--bst-muted);
}

.cmp-group__rule {
  flex-grow: 1;
  height: 1px;
  background: var(--bst-border);
}

.cmp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cmp-game-card {
  position: relative;
  display: flex;
  /* A flex item's automatic min-width is its content's min-content size, which for a
     nowrap child ignores overflow:hidden entirely - the card would rather grow than let
     the address (the one field with unpredictable length) render past its edge. Without
     this, cards in the same row end up different widths depending on how long the venue
     of each game happens to be. */
  min-width: 0;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5625rem 0.75rem 0.625rem;
  border: 1px solid var(--bst-border);
  border-left: 3px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

/* The whole card is a drill-down link to U3 (Pages/Partite.cshtml), stretched behind
   everything else in the card so the click target is the entire surface, not just the
   team names. The edit-result icon (.res-edit) sits above it via z-index - see the note
   there - so opening the popover never triggers navigation. */
.cmp-game-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cmp-game-card.is-mine {
  border-left-color: var(--bst-accent-on-surface);
  background: var(--bst-primary-soft);
}

.cmp-game-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.cmp-game-card__when {
  flex: 0 0 auto;
  font-size: 0.625rem;
  color: var(--bst-muted);
  white-space: nowrap;
}

.cmp-stats-flag {
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bst-accent-on-surface);
}

/* Holds the two team rows plus the edit icon beside them - the icon sits centred on the
   score's vertical space instead of on a row of its own below the card. */
.cmp-game-card__body {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cmp-game-card__teams {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* --- Venue: the field that used to widen the whole card (see .cmp-game-card above). --- */

.cmp-venue {
  /* Above the stretched link of the card / row, or the copy and the map buttons could not be pressed. */
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  flex: 1 1 0;
  min-width: 0;
}

.cmp-venue__text {
  min-width: 0;
  font-size: 0.625rem;
  color: var(--bst-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hidden until setupCopyButtons() in site.js confirms the Clipboard API is there to use -
   the address itself is already fully readable through the title tooltip without it. */
.cmp-copy-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bst-muted);
  cursor: pointer;
}

.cmp-copy-btn:hover,
.cmp-copy-btn:focus-visible {
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

/* The pin of the maps beside the address: as small as the copy button, the drawing a little larger than its box. */
.cmp-map-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
}

.cmp-map-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.cmp-map-btn:hover,
.cmp-map-btn:focus-visible {
  background: var(--bst-primary-soft);
  outline: none;
}

/* When and where to meet, under the date of a game whose convocation is published. */
.cmp-meeting {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--bst-accent-on-surface);
}

/* In the place of the score: the convocation is out, the game is not played yet. */
.cmp-convocation-badge {
  flex: 0 0 auto;
  padding: 0.125rem 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cmp-copy-btn__icon--done {
  display: none;
}

.cmp-copy-btn.is-copied {
  color: var(--bst-success);
}

.cmp-copy-btn.is-copied:hover {
  background: transparent;
}

.cmp-copy-btn.is-copied .cmp-copy-btn__icon--copy {
  display: none;
}

.cmp-copy-btn.is-copied .cmp-copy-btn__icon--done {
  display: block;
}

.cmp-game-card__row {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}

.cmp-game-card__team {
  flex-grow: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-game-card__row.is-mine .cmp-game-card__team {
  font-weight: 800;
  color: var(--bst-accent-on-surface);
}

.cmp-game-card__team.is-winner {
  font-weight: 700;
}

.cmp-game-card__score {
  flex: 0 0 auto;
  font-size: 1.0625rem;
  font-weight: 500;
}

.cmp-game-card__score.is-winner {
  font-weight: 800;
}

/* Dense: one symmetric row - home left, score centred, away right (U2). No IN/OUT
   label: the position already says it. */
.cmp-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.4375rem 0.75rem 0.4375rem 0.625rem;
  border-bottom: 1px solid var(--bst-row-line);
  border-left: 3px solid transparent;
}

/* Same stretched-link pattern as .cmp-game-card__link, for the dense row. */
.cmp-row__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cmp-row.is-mine {
  border-left-color: var(--bst-accent-on-surface);
  background: var(--bst-primary-soft);
}

.cmp-row__main {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cmp-row__stats-flag {
  flex: 0 0 auto;
  width: 0.75rem;
  display: flex;
  color: var(--bst-accent-on-surface);
}

.cmp-row__team {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-row__team--away {
  text-align: right;
}

.cmp-row__team.is-mine {
  font-weight: 800;
  color: var(--bst-accent-on-surface);
}

.cmp-row__team.is-winner {
  font-weight: 700;
}

.cmp-row__score {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 4.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.cmp-row__score .is-winner {
  font-weight: 800;
}

.cmp-row__dash {
  color: var(--bst-border);
}

.cmp-row__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 1.125rem;
  font-size: 0.625rem;
  color: var(--bst-muted);
}

.cmp-row__when {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Standings: points table, own row highlighted but never moved (U10). ------ */

.cmp-standings {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  overflow: hidden;
  background: var(--bst-surface);
}

.cmp-standings__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.625rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--bst-row-line);
}

.cmp-standings__row--head {
  background: var(--bst-page);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bst-muted);
  text-transform: uppercase;
}

.cmp-standings__row.is-mine {
  background: var(--bst-primary-soft);
}

.cmp-standings__pos {
  flex: 0 0 auto;
  width: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.cmp-standings__team {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.cmp-standings__team-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-standings__num {
  flex: 0 0 auto;
  width: 1.75rem;
  text-align: right;
  font-size: 0.75rem;
}

.cmp-standings__num--diff {
  width: 2.75rem;
  color: var(--bst-muted);
}

.cmp-standings__num--pt {
  width: 2rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--bst-text);
}

.cmp-standings__note {
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

@media (min-width: 768px) {
  .cmp-round-picker__panel {
    position: absolute;
    inset: auto auto auto 0;
    top: calc(100% + 0.375rem);
    width: 26rem;
    max-width: 90vw;
    max-height: 26rem;
    border-radius: var(--bst-radius-lg);
    box-shadow: 0 12px 30px rgb(15 18 28 / 18%);
  }

  .cmp-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cmp-game-card {
    flex: 0 1 20rem;
  }
}

/* ============================================================================
   Result edit panel - shared by Campionato (general area) and the staff
   "Calendario partite" list. One component, two hosts: it renders inside a
   .cmp-game-card or a .cmp-row, so it only carries its own spacing, never a
   background or border of its own that would duplicate the card's.
   ========================================================================= */

/* Icon only, no label: it sits right beside the score at the call site (Campionato.cshtml,
   Staff/Games.cshtml), not in a row of its own below the card. flex: 0 0 auto so it keeps its
   own size inside whatever flex row places it next to the result. */
.res-edit {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.res-edit__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 1px solid var(--bst-border);
  border-radius: 50%;
  color: var(--bst-primary-on-surface);
  cursor: pointer;
  list-style: none;
}

.res-edit__trigger::-webkit-details-marker {
  display: none;
}

.res-edit[open] .res-edit__trigger {
  background: var(--bst-primary-soft);
}

/* A popover, not a block that pushes the row/card taller: the surrounding layout (the score
   row, the card) must not reflow just because the panel opened. This is the no-JS/before-JS
   position: anchored under the icon's right edge, same principle as .ga-pop__panel. For a row
   near the bottom of a long list that would open off-screen, so setupResultPanels() in site.js
   switches it to position:fixed and flips it above the icon when there is not enough room
   below - max-height + overflow-y stay regardless, as a floor for a viewport too short either way.
*/
.res-edit__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 20;
  width: 20rem;
  max-width: min(90vw, 20rem);
  max-height: calc(100vh - 1.5rem);
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  box-shadow: 0 12px 30px rgb(15 18 28 / 18%);
}

.res-edit__form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.res-edit__score {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.res-edit__score-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.res-edit__team-label {
  flex-grow: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.res-input {
  width: 4.5rem;
  flex: 0 0 auto;
  text-align: center;
}

.res-edit__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.res-edit__save {
  min-height: 2rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--bst-radius);
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================================
   The rest of the application
   ========================================================================= */

.login-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.login-kicker {
  margin: 0 0 .2rem;
  color: var(--bst-accent-on-surface);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.login-brand-mark {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--bst-radius);
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 800;
}

.login-button {
  width: 100%;
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 700;
}

.login-button:hover,
.login-button:focus {
  background: var(--bst-primary-hover);
  border-color: var(--bst-primary-hover);
  color: var(--bst-on-primary);
}

.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;
}

.setup-page {
  max-width: 980px;
  margin: 0 auto;
}

.setup-section {
  background: var(--bst-surface);
  border: 1px solid #dee2e6;
  border-radius: var(--bst-radius);
  padding: 1.25rem;
}

.setup-status-table th {
  width: 18rem;
  color: #495057;
  font-weight: 600;
}

.setup-form {
  max-width: 760px;
}

.site-admin-page {
  max-width: 1280px;
  margin: 0 auto;
}

.admin-section {
  background: var(--bst-surface);
  border: 1px solid #dee2e6;
  border-radius: var(--bst-radius);
  padding: 1rem;
}

/* --- Theme editor (SiteAdmin) --------------------------------------------- */

/* The preview uses the real components rendered with the resolved tokens: it is the only
   way to notice a wrong contrast before finding it on a screen. */
.theme-preview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-page);
  color: var(--bst-text);
}

/* No dark repaint here: the neutrals of the mode are platform constants emitted by the
   resolver together with the brand tokens, so they arrive already dark in the inline style
   of the preview. They live in one place only, TenantThemeNeutrals. */

.theme-preview .entry-head,
.theme-preview .entry-bar {
  padding-top: 1rem;
  border-radius: var(--bst-radius);
}

.theme-token-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-swatch {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  display: inline-block;
  border: 1px solid var(--bst-border);
  border-radius: 0.25rem;
}

.theme-token-hint {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.theme-logo-current {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid var(--bst-border);
  border-radius: 0.375rem;
  background: var(--bst-surface);
}

/* A contrast below the threshold is only flagged: it never blocks the save. */
.theme-contrast-warn {
  color: var(--bst-danger);
  font-weight: 700;
}

.theme-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

.site-admin-form fieldset {
  border: 0;
  padding: 0;
}

.site-admin-form legend {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .75rem;
}

.tenant-hero {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 0.5rem solid var(--bst-primary);
  background: linear-gradient(90deg, var(--bst-primary-soft), var(--bst-surface));
}

.offline-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.offline-panel {
  width: min(100%, 540px);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  box-shadow: 0 18px 45px rgba(31, 41, 55, 0.12);
  padding: 2rem;
}

/* ============================================================================
   Staff area (SPECIFICATIONS.md 6.4, 9.1, 9.3)
   The frame every staff screen inherits: application bar, fixed sidebar on a wide
   screen, none at all on a phone. The area does not change brand color - it changes
   surface: dark bar, colder page. Those neutrals are platform constants and arrive
   with the resolved tokens, so there is no literal here either (8.2.3).

   Mobile first, like the rest of the file: the desktop frame starts at 1024px,
   which is where 9.1 puts data entry.
   ========================================================================= */

.st-body {
  margin-bottom: 0;
}

.st {
  /* Same reason as .entry and .ga: a custom property holding var() is substituted on
     the element that declares it, so the derived tokens are redeclared here to see
     the tenant primary that arrives inline on this container. */
  --bst-primary-hover: color-mix(in srgb, var(--bst-primary), #000 12%);
  --bst-primary-soft: color-mix(in srgb, var(--bst-primary) 10%, transparent);
  --bst-primary-ring: color-mix(in srgb, var(--bst-primary) 35%, transparent);
  --bst-primary-hairline: color-mix(in srgb, var(--bst-primary) 45%, transparent);
  --bst-on-primary-soft: color-mix(in srgb, var(--bst-on-primary) 78%, transparent);
  --bst-on-primary-edge: color-mix(in srgb, var(--bst-on-primary) 40%, transparent);
  --bst-accent-soft: color-mix(in srgb, var(--bst-accent-on-surface) 12%, transparent);
  --bst-on-accent: var(--bst-on-primary);

  /* Fallbacks of the staff surfaces, for the moment before the API answers. */
  --bst-staff-header: #16204d;
  --bst-staff-page: #eef0f4;
  --bst-staff-chip: #ffffff29;
  --bst-on-staff-header: #ffffff;
  --bst-on-staff-header-soft: #ffffff8c;
  --bst-table-head: #f7f8fb;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bst-staff-page);
  color: var(--bst-text);
  font-size: 0.875rem;
}

/* --- Application bar ------------------------------------------------------- */

.st-topbar {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: calc(var(--bst-header-pad) + var(--bst-safe-top)) 1rem var(--bst-header-pad);
  background: var(--bst-staff-header);
  color: var(--bst-on-staff-header);
}

.st-topbar__back {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--bst-tap-target);
  height: var(--bst-tap-target);
  margin-left: -0.625rem;
  color: inherit;
}

.st-topbar__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bst-on-staff-header);
  color: var(--bst-primary);
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
}

.st-topbar__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.st-topbar__tenant,
.st-topbar__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--bst-on-staff-header);
}

.st-topbar__title {
  flex-grow: 1;
  font-size: 1.0625rem;
}

/* On a phone the bar carries the page title; the tenant name is what the sidebar
   would have said, and there is no sidebar. */
.st-topbar__tenant,
.st-topbar__leave,
.st-chip--area {
  display: none;
}

.st-topbar--section .st-topbar__mark {
  display: none;
}

.st-topbar__spacer {
  flex-grow: 1;
}

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 32px;
  padding: 0 0.6875rem;
  border-radius: var(--bst-radius);
  background: var(--bst-staff-chip);
  color: var(--bst-on-staff-header);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}

.st-chip::-webkit-details-marker {
  display: none;
}

.st-chip--season {
  background: none;
  border: 1px solid var(--bst-on-staff-header-soft);
  font-weight: 600;
  letter-spacing: 0;
}

.st-chip--season.is-live {
  background: var(--bst-staff-chip);
  border-color: var(--bst-on-staff-header);
  font-weight: 700;
}

/* The registries do not depend on the season, so the selector stays where it is and
   goes quiet: moving it from page to page would make people hunt for it. */
.st-chip--season.is-idle {
  color: var(--bst-on-staff-header-soft);
}

.st-topbar__leave {
  color: var(--bst-on-staff-header-soft);
  font-size: 0.75rem;
  text-decoration: none;
}

.st-topbar__leave:hover {
  color: var(--bst-on-staff-header);
}

.st-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bst-secondary);
  color: var(--bst-on-secondary);
  border: 1px solid var(--bst-on-staff-header-soft);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.st-avatar::-webkit-details-marker {
  display: none;
}

/* --- Popovers: details/summary, no script --------------------------------- */

.st-pop {
  position: relative;
  flex: 0 0 auto;
}

.st-pop__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  min-width: 15rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  box-shadow: 0 12px 32px rgb(15 23 42 / 18%);
  color: var(--bst-text);
}

.st-pop__panel--end {
  left: auto;
  right: 0;
}

.st-pop__title {
  margin: 0.25rem 0.5rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bst-muted);
}

.st-pop__note {
  margin: 0 0.5rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--bst-muted);
}

.st-pop__identity {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--bst-row-line);
}

.st-pop__name {
  font-weight: 700;
}

.st-pop__hint {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.st-pop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--bst-tap-target);
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--bst-radius);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.st-pop__item:hover {
  background: var(--bst-row-line);
}

.st-pop__item.is-current {
  color: var(--bst-primary-on-surface);
  font-weight: 700;
}

.st-pop__item--area {
  color: var(--bst-primary-on-surface);
  font-weight: 700;
}

.st-pop__item--danger {
  color: var(--bst-danger-on-surface);
}

/* --- Frame, sidebar, main ------------------------------------------------- */

.st-frame {
  flex-grow: 1;
  display: flex;
  min-height: 0;
}

.st-sidebar {
  display: none;
}

.st-main {
  flex-grow: 1;
  min-width: 0;
  padding: 1rem 1rem calc(1.5rem + var(--bst-safe-bottom));
}

.st-notice {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--bst-radius);
  font-size: 0.8125rem;
}

.st-notice--ok {
  background: var(--bst-success-soft);
  color: var(--bst-success-on-surface);
  border: 1px solid var(--bst-success);
}

.st-notice--bad {
  background: var(--bst-danger-soft);
  color: var(--bst-danger-on-surface);
  border: 1px solid var(--bst-danger);
}

/* --- Shared pieces: heads, buttons, fields, panels ------------------------ */

.st-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.875rem;
}

.st-page__head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.st-page__title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
}

.st-page__count,
.st-page__lead {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.st-page__spacer {
  flex-grow: 1;
}

.st-section__title {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bst-muted);
}

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: var(--bst-tap-target);
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--bst-radius);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.st-btn--primary {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.st-btn--primary:hover {
  background: var(--bst-primary-hover);
  color: var(--bst-on-primary);
}

.st-btn--ghost {
  background: var(--bst-surface);
  border-color: var(--bst-primary-hairline);
  color: var(--bst-primary-on-surface);
}

.st-btn--ghost:hover {
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.st-btn--sm {
  min-height: 32px;
  padding: 0 0.6875rem;
  font-size: 0.75rem;
}

.st-btn--block {
  width: 100%;
}

.st-input,
.st-search input {
  width: 100%;
  min-height: var(--bst-tap-target);
  padding: 0 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font: inherit;
}

.st-input:focus,
.st-search input:focus,
.st-number:focus {
  outline: none;
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.st-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 12rem;
  padding: 0 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-muted);
}

.st-search input {
  border: 0;
  padding: 0;
  min-height: 38px;
  background: none;
}

.st-search input:focus {
  box-shadow: none;
}

.st-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--bst-tap-target);
  color: var(--bst-muted);
  font-size: 0.75rem;
  text-decoration: none;
}

.st-switch__track,
.st-toggle__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 19px;
  padding: 2px;
  border-radius: 11px;
  background: var(--bst-border);
}

.st-switch__knob,
.st-toggle__knob {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bst-surface);
  transition: transform 0.12s ease-out;
}

.st-switch.is-on .st-switch__track,
.st-toggle input:checked ~ .st-toggle__track {
  background: var(--bst-primary);
}

.st-switch.is-on .st-switch__knob,
.st-toggle input:checked ~ .st-toggle__track .st-toggle__knob {
  transform: translateX(15px);
}

.st-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--bst-tap-target);
  cursor: pointer;
}

.st-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.st-toggle input:focus-visible ~ .st-toggle__track {
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.st-toggle__text {
  font-size: 0.8125rem;
}

.st-panel {
  display: flex;
  flex-direction: column;
  border-radius: var(--bst-radius-lg);
  overflow: hidden;
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
}

.st-panel--quiet {
  padding: 0.875rem;
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.st-panel__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  border-bottom: 1px solid var(--bst-border);
}

.st-panel__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

.st-panel__note {
  margin: 0;
  padding: 0.875rem;
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.st-panel__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 0.875rem;
  border-top: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.st-panel__foot a {
  color: var(--bst-primary-on-surface);
  font-weight: 700;
}

.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6875rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.st-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.st-empty__text {
  margin: 0;
  max-width: 34rem;
  line-height: 1.6;
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

/* --- The six registries --------------------------------------------------- */

.st-registry__body {
  display: flex;
  gap: 1rem;
  min-height: 0;
}

.st-registry__list {
  flex-grow: 1;
  min-width: 0;
}

.st-registry__new {
  display: none;
}

.st-registry__foot {
  padding: 0.875rem 0 0;
}

.st-table__head {
  display: none;
}

/* One row, two views. On a phone the cells are not shown: the stack below carries
   what survives the loss of the columns (11.8). */
.st-row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 56px;
  padding: 0 0.8125rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: inherit;
  text-decoration: none;
}

.st-row.is-off {
  opacity: 0.55;
}

.st-cell {
  display: none;
}

.st-row__stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex-grow: 1;
  min-width: 0;
}

.st-row__primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.st-linked {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--bst-row-line);
  color: var(--bst-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: middle;
}

.st-linked__item {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
}

.st-linked__item.is-ok {
  color: var(--bst-success-on-surface);
}

.st-row__secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.st-row__trail {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
}

.st-tone--ok {
  color: var(--bst-success-on-surface);
}

.st-tone--dim {
  color: var(--bst-muted);
  font-weight: 500;
}

.st-row__chevron {
  flex: 0 0 auto;
  color: var(--bst-muted);
}

/* The card covers the list on a phone, and that is exactly why "Salva e nuovo"
   weighs more here: it is what saves the trip back (6.4). */
.st-card {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bst-staff-page);
  overflow-y: auto;
}

.st-card__head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: calc(var(--bst-header-pad) + var(--bst-safe-top)) 1rem var(--bst-header-pad);
  background: var(--bst-staff-header);
  color: var(--bst-on-staff-header);
}

.st-card__title {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
}

.st-card__close {
  display: grid;
  place-items: center;
  width: var(--bst-tap-target);
  height: var(--bst-tap-target);
  margin-right: -0.625rem;
  color: inherit;
}

.st-card__form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.st-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem;
}

.st-field {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.st-field__label {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.st-field__optional {
  font-weight: 400;
}

.st-field__note {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--bst-muted);
}

.st-card__foot {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  margin-top: auto;
  padding: 0.75rem 1rem calc(0.75rem + var(--bst-safe-bottom));
  background: var(--bst-surface);
  border-top: 1px solid var(--bst-border);
}

.st-card__foot .st-btn {
  flex: 1 1 0;
}

.st-card__cancel {
  color: var(--bst-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.st-card__danger {
  padding: 0 1rem 1.5rem;
}

.st-card__disable {
  min-height: var(--bst-tap-target);
  padding: 0 0.875rem;
  border: 1px solid var(--bst-danger);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-danger-on-surface);
  font-weight: 700;
  cursor: pointer;
}

/* The single nested list of the frame: the teams of an opponent club (6.4). */
.st-nested {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.st-nested__title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.st-nested__list {
  display: flex;
  flex-direction: column;
  border-radius: var(--bst-radius);
  overflow: hidden;
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
}

.st-nested__row {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-height: 42px;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: inherit;
  text-decoration: none;
}

.st-nested__row.is-off {
  opacity: 0.55;
}

.st-nested__row.is-open {
  background: var(--bst-primary-soft);
}

.st-nested__name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.st-nested__badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bst-table-head);
  border: 1px solid var(--bst-border);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.st-nested__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--bst-row-line);
  background: var(--bst-primary-soft);
}

.st-nested__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.st-nested__add > summary {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 42px;
  padding: 0 0.75rem;
  color: var(--bst-primary-on-surface);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.st-nested__add > summary::-webkit-details-marker {
  display: none;
}

.st-nested__note {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--bst-muted);
}

/* --- S8 roster ------------------------------------------------------------ */

.st-key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--bst-primary);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-primary-on-surface);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.st-key::-webkit-details-marker {
  display: none;
}

.st-warn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bst-radius);
  background: var(--bst-waiting-soft);
  border: 1px solid var(--bst-waiting);
  color: var(--bst-waiting-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
}

.st-tabs {
  display: flex;
  gap: 1.25rem;
  padding-bottom: 0.75rem;
}

.st-tabs__tab {
  padding-bottom: 0.4375rem;
  border-bottom: 3px solid transparent;
  color: var(--bst-muted);
  font-weight: 700;
  text-decoration: none;
}

.st-tabs__tab.is-active {
  border-bottom-color: var(--bst-primary);
  color: var(--bst-primary-on-surface);
}

.st-roster__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* On a phone one tab at a time: two lists side by side at 390px would be two
   unusable lists (6.4). */
.st-tab--roster .st-roster__pool,
.st-tab--add .st-roster__list {
  display: none;
}

.st-years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--bst-border);
  background: var(--bst-table-head);
}

.st-years__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.st-pool__row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 50px;
  padding: 0 0.8125rem;
  border-bottom: 1px solid var(--bst-row-line);
}

.st-pool__row.is-in {
  color: var(--bst-muted);
}

.st-pool__name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.st-pool__row.is-in .st-pool__name {
  font-weight: 500;
}

.st-pool__year,
.st-pool__also {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.st-pool__in {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-success-on-surface);
}

.st-pool__add {
  display: none;
}

.st-pool__ask {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-primary);
  color: var(--bst-primary-on-surface);
}

.st-roster__head {
  display: none;
}

.st-roster__row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 52px;
  padding: 0.375rem 0.8125rem;
  border-bottom: 1px solid var(--bst-row-line);
}

/* The duplicated number is flagged on the rows that share it, where it gets
   corrected. It never blocks: the API allows it and it is often a passing state. */
.st-roster__row.is-dup {
  background: var(--bst-waiting-soft);
}

.st-number {
  flex: 0 0 56px;
  width: 56px;
  height: 36px;
  padding: 0 0.375rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
}

.st-roster__row.is-dup .st-number {
  border-color: var(--bst-waiting);
  color: var(--bst-waiting-on-surface);
}

.st-number--lg {
  width: 100%;
  flex: 0 0 auto;
  height: 56px;
  font-size: 1.5rem;
}

.st-roster__name {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
}

.st-roster__sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--bst-muted);
}

.st-roster__year,
.st-roster__loan {
  display: none;
}

.st-roster__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.st-roster__remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--bst-radius);
  background: none;
  color: var(--bst-muted);
  cursor: pointer;
}

.st-roster__remove:hover {
  color: var(--bst-danger-on-surface);
}

/* The sheet that asks for the number before confirming: without that question a
   roster of players with no number piles up (6.4). */
.st-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgb(15 23 42 / 45%);
}

.st-sheet__panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1.125rem 1rem calc(1.125rem + var(--bst-safe-bottom));
  border-radius: 16px 16px 0 0;
  background: var(--bst-surface);
}

.st-sheet__grip {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  align-self: center;
  background: var(--bst-border);
}

.st-sheet__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.st-sheet__cancel {
  align-self: center;
  color: var(--bst-muted);
  font-weight: 600;
}

/* --- S1 dashboard --------------------------------------------------------- */

.st-dash__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.st-dash__column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.st-chain {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.st-step {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-height: 54px;
  padding: 0.5rem 0.875rem;
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
}

.st-step.is-done,
.st-step.is-current {
  color: var(--bst-text);
}

.st-step.is-current {
  border-color: var(--bst-primary);
}

.st-step__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--bst-row-line);
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.st-step.is-done .st-step__mark {
  background: var(--bst-success);
  color: var(--bst-on-success);
}

.st-step.is-current .st-step__mark {
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.st-step__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex-grow: 1;
  min-width: 0;
}

.st-step__name {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 700;
}

/* Venues do not belong to the chain that leads to a game: they serve the practices,
   and saying so is the whole point of the marker (3). */
.st-step__branch {
  padding: 1px 6px;
  border-radius: 20px;
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.625rem;
  font-weight: 700;
}

.st-step__note {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.st-step__trail {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-success-on-surface);
}

.st-why {
  padding: 1rem;
  gap: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.6;
}

.st-why p {
  margin: 0;
}

.st-why hr {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--bst-border);
}

.st-why__muted {
  color: var(--bst-muted);
}

.st-attention {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-height: 58px;
  padding: 0.5rem 0.875rem;
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  color: inherit;
  text-decoration: none;
}

.st-attention.is-accent {
  border-color: var(--bst-accent-on-surface);
}

.st-attention__count {
  flex: 0 0 auto;
  min-width: 30px;
  font-size: 1.3125rem;
  font-weight: 800;
  color: var(--bst-waiting-on-surface);
}

.st-attention.is-accent .st-attention__count {
  color: var(--bst-accent-on-surface);
}

.st-attention__text {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  flex-grow: 1;
  min-width: 0;
}

.st-attention__title {
  font-weight: 700;
}

.st-attention__note {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.st-next {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
}

.st-next__day {
  flex: 0 0 4.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-muted);
  text-transform: lowercase;
}

.st-next__what {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.st-next__when {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

/* On a phone the dashboard is also the navigation screen: there is no sidebar. */
.st-dash__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.25rem;
}

.st-navlist {
  gap: 0;
}

.st-navlist__group {
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
  background: var(--bst-table-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--bst-muted);
}

.st-navlist__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.st-navlist__item > span:first-child {
  flex-grow: 1;
}

.st-navlist__item.is-todo {
  color: var(--bst-muted);
}

/* ---------------------------------------------------------------------------
   Wide screen: the frame with the sidebar, the dense tables and the card beside
   the list. 1024px is where 9.1 puts data entry.
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .st-topbar {
    gap: 0.75rem;
    padding: 0 1.125rem;
    min-height: 52px;
  }

  .st-topbar__back,
  .st-topbar__title,
  .st-dash__nav {
    display: none;
  }

  .st-topbar--section .st-topbar__mark {
    display: grid;
  }

  .st-topbar__tenant,
  .st-topbar__leave {
    display: inline-block;
  }

  .st-chip--area {
    display: inline-flex;
  }

  .st-frame {
    overflow: hidden;
  }

  .st-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 232px;
    overflow-y: auto;
    padding-bottom: 1rem;
    background: var(--bst-surface);
    border-right: 1px solid var(--bst-border);
  }

  .st-sidebar__group {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.625rem 0.25rem;
  }

  .st-sidebar__title {
    margin: 0;
    padding: 0 0.625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bst-muted);
  }

  .st-sidebar__item {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    min-height: 33px;
    padding: 0 0.625rem;
    border-radius: 7px;
    color: var(--bst-text);
    font-size: 0.8125rem;
    text-decoration: none;
  }

  .st-sidebar__item:hover {
    background: var(--bst-row-line);
    color: var(--bst-text);
  }

  .st-sidebar__item.is-active {
    background: var(--bst-primary-soft);
    color: var(--bst-primary-on-surface);
    font-weight: 700;
  }

  .st-sidebar__item.is-todo {
    color: var(--bst-muted);
    cursor: default;
  }

  .st-sidebar__item.is-todo:hover {
    background: none;
  }

  .st-sidebar__label {
    flex-grow: 1;
  }

  .st-main {
    overflow-y: auto;
    padding: 1.125rem 1.375rem 2rem;
  }

  /* The dense table takes over: the area has one density, the dense one (9.3). */
  .st-registry__foot {
    display: none;
  }

  .st-registry__new {
    display: inline-flex;
  }

  .st-search {
    flex: 0 0 13.75rem;
  }

  .st-table__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 34px;
    padding: 0 0.875rem;
    border-bottom: 1px solid var(--bst-border);
    background: var(--bst-table-head);
  }

  .st-table__th {
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bst-muted);
  }

  .st-table__th.is-right {
    text-align: right;
  }

  .st-table__th--actions {
    flex: 0 0 62px;
  }

  .st-row {
    min-height: 37px;
    padding: 0 0.875rem;
    gap: 0.625rem;
  }

  .st-row:hover {
    background: var(--bst-row-line);
  }

  .st-row.is-open {
    background: var(--bst-primary-soft);
  }

  .st-cell {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
  }

  .st-cell.is-strong {
    font-weight: 700;
  }

  .st-cell.is-dim {
    color: var(--bst-muted);
  }

  .st-cell.is-right {
    text-align: right;
  }

  .st-cell--actions {
    flex: 0 0 62px;
    text-align: right;
    color: var(--bst-muted);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .st-row__stack,
  .st-row__trail,
  .st-row__chevron {
    display: none;
  }

  /* The card opens NEXT TO the list: twenty rows in a row without losing the
     context, and a duplicate is noticed at once (6.4). */
  .st-card {
    position: static;
    flex: 0 0 372px;
    align-self: flex-start;
    max-height: 100%;
    border-radius: var(--bst-radius-lg);
    background: var(--bst-surface);
    border: 1px solid var(--bst-primary);
    overflow: hidden;
  }

  .st-card__head {
    position: static;
    padding: 0 0.9375rem;
    min-height: 44px;
    background: var(--bst-surface);
    color: var(--bst-text);
    border-bottom: 1px solid var(--bst-border);
  }

  .st-card__title {
    font-size: 0.875rem;
  }

  .st-card__close {
    width: 32px;
    height: 32px;
    color: var(--bst-muted);
  }

  .st-card__fields {
    padding: 0.9375rem;
    gap: 0.8125rem;
  }

  .st-input,
  .st-number {
    min-height: 36px;
  }

  .st-card__foot {
    padding: 0.75rem 0.9375rem;
  }

  .st-card__foot .st-btn {
    flex: 0 0 auto;
    min-height: 35px;
  }

  .st-card__danger {
    padding: 0 0.9375rem 0.9375rem;
  }

  .st-card__disable {
    min-height: 32px;
    font-size: 0.75rem;
  }

  /* Roster: two lists side by side, and both tabs gone. */
  .st-tabs {
    display: none;
  }

  .st-roster__body {
    flex-direction: row;
    gap: 1rem;
  }

  .st-tab--roster .st-roster__pool,
  .st-tab--add .st-roster__list {
    display: flex;
  }

  .st-roster__pool {
    flex: 0 0 470px;
  }

  .st-roster__list {
    flex-grow: 1;
    min-width: 0;
  }

  .st-pool__row {
    min-height: 38px;
    font-size: 0.8125rem;
  }

  .st-pool__year {
    flex: 0 0 46px;
  }

  .st-pool__add {
    display: block;
  }

  .st-pool__ask {
    display: none;
  }

  .st-roster__head {
    display: flex;
  }

  .st-roster__row {
    min-height: 40px;
    gap: 0.625rem;
  }

  .st-number {
    flex: 0 0 76px;
    width: 76px;
    height: 28px;
  }

  .st-roster__name {
    flex-direction: row;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .st-roster__sub {
    display: none;
  }

  .st-roster__year {
    display: block;
    flex: 0 0 60px;
    font-size: 0.75rem;
    color: var(--bst-muted);
  }

  .st-roster__loan {
    display: inline-flex;
    flex: 0 0 110px;
    min-height: 28px;
  }

  .st-roster__loan .st-toggle__text {
    display: none;
  }

  .st-roster__actions {
    flex: 0 0 84px;
    justify-content: flex-end;
  }

  /* Dashboard: chain and side note, then the two columns. */
  .st-dash__body {
    flex-direction: row;
    gap: 1.125rem;
    align-items: flex-start;
  }

  .st-chain {
    flex: 0 0 640px;
  }

  .st-why {
    flex-grow: 1;
    min-width: 0;
  }

  .st-dash__column:first-child {
    flex: 0 0 640px;
  }

  .st-dash__column:last-child {
    flex-grow: 1;
  }

  .st-page__head {
    flex-wrap: nowrap;
  }
}

/* --- The image of a record: a player's face, a club's crest ---------------- */

/* In the row, in both of its shapes. The initials stay behind it: most records
   have no image, and an empty square reads worse than a letter. */
.st-thumb {
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-table-head);
  color: var(--bst-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  object-fit: cover;
  overflow: hidden;
}

.st-thumb.is-round {
  border-radius: 50%;
}

/* The generic crest of a team without a logo: lighter than a real one, and not boxed like a photo. */
.st-thumb.is-placeholder {
  border-color: transparent;
  background: none;
  object-fit: contain;
  opacity: 0.8;
}

/* Keeps the table headers over their cells once the rows carry a thumbnail. */
.st-thumb__gap {
  flex: 0 0 32px;
}

/* In the card. Its own block above the fields, because an image is not a field:
   it travels as a file, in a form of its own, and it is its own API call. */
.st-photo {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border-bottom: 1px solid var(--bst-border);
  background: var(--bst-table-head);
}

.st-photo__frame {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-muted);
  font-size: 1.25rem;
  font-weight: 700;
  overflow: hidden;
  text-decoration: none;
}

.st-photo__frame.is-round {
  border-radius: 50%;
}

.st-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-photo__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  flex: 1 1 auto;
}

.st-photo__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.st-photo__remove {
  flex: 0 0 auto;
}

.st-file {
  flex: 1 1 10rem;
  min-width: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.st-file::file-selector-button {
  min-height: 32px;
  margin-right: 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* --- Controls that submit by themselves ----------------------------------- */

/* The first submit button of a form, there only so that Enter in a field reaches
   the form's own action instead of the other button in the row. */
.st-default-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.st-years__select {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
  /* Full tap target on a phone: it is the filter the roster is built with, and it is
     touched more often than anything else on this screen. */
  min-height: var(--bst-tap-target);
  font-size: 0.8125rem;
}

@media (min-width: 1024px) {
  .st-years__select {
    min-height: 36px;
  }
}

/* --- S20 — Competizioni e gironi -------------------------------------------
   Three columns: the competition list, the competition card with its rounds
   as a sub-list, and the panel of the selected round. The list and the two
   sub-lists (rounds, teams-in-round) reuse .st-nested*: visually the exact
   same "bordered list of rows in a card" widget the six registries already
   use for a club's teams, whether or not it is literally nested under
   something (SPECIFICATIONS.md 6.4). */

.st-cg-body {
  display: flex;
  gap: 1rem;
  min-height: 0;
}

.st-cg-list {
  flex-grow: 1;
  min-width: 0;
}

/* Two-line row: name (+ badges) on top, a muted meta line underneath. Used
   for the competition list and the "gironi e fasi" sub-list. */
.st-nested__row--stack {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.25rem;
  min-height: 54px;
  padding: 0.5rem 0.75rem;
}

.st-nested__row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.st-nested__meta {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

/* Name + club stacked in one cell, for a team-in-round row. */
.st-nested__stack {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.st-nested__stack-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
}

.st-nested__stack-sub {
  font-size: 0.625rem;
  color: var(--bst-muted);
}

/* "Nuovo girone" / "Aggiungi squadra": a navigation link, not an inline
   form, so it cannot reuse .st-nested__add > summary (a <details> toggle) —
   same look, plain anchor. */
.st-cg-addlink {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 42px;
  padding: 0 0.75rem;
  color: var(--bst-primary-on-surface);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
}

.st-cg-iconbtn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--bst-muted);
  cursor: pointer;
}

.st-cg-add {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--bst-primary);
  background: none;
  color: var(--bst-primary-on-surface);
  cursor: pointer;
}

/* Breathing room below the search/category controls: without it the first
   team row sits flush against the category dropdown. */
.st-cg-teamlist {
  margin-top: 0.625rem;
}

/* Read-only "Tipo" for a Torneo round: the picker never offers that option,
   so an existing one shows fixed instead of forcing it into one of the
   three (SPECIFICATIONS.md 6.4). */
.st-cg-locked {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.6875rem;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-table-head);
  color: var(--bst-muted);
  font-size: 0.875rem;
}

.st-field-pair {
  display: flex;
  gap: 0.625rem;
}

.st-field-pair > .st-field {
  flex: 1 1 0;
  min-width: 0;
}

.st-field--narrow {
  flex: 0 0 6.5rem;
}

.st-nested__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.st-cg-scroll {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
}

/* .st-nested__list's own overflow:hidden (there to round its corners) shrinks
   as a flex item by default (flex-shrink:1) to fit whatever room .st-cg-scroll
   has, clipping the rest with no way to reach it — nothing ever overflows
   .st-cg-scroll itself, so its own scroll never engages. flex-shrink:0 keeps
   the list at its real content height, so the actual overflow lands on
   .st-cg-scroll, which can scroll it. */
.st-cg-scroll > .st-nested__list {
  flex-shrink: 0;
}

.st-cg-pickertools {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 1rem 0;
}

/* .st-search's own "flex: 1 1 12rem" is meant for a horizontal row (the page
   header, where it shares space with other controls); reused verbatim in
   this vertical column it read as a vertical flex-basis instead, growing
   the search box to fill the column instead of staying one line. */
.st-cg-pickertools > .st-search {
  flex: 0 0 auto;
}

.st-cg-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The notifications of a round: always visible at the top of its panel, and loud while they are suspended - a
   suspension nobody remembers is a calendar nobody was told about. */
.st-cg-notif {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.875rem 1rem 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  font-size: 0.8125rem;
}

.st-cg-notif.is-suspended {
  border-color: var(--bst-waiting);
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting-on-surface);
}

.st-cg-notif__title {
  margin: 0;
  font-weight: 700;
}

.st-cg-notif__text {
  margin: 0;
  color: var(--bst-muted);
}

.st-cg-notif.is-suspended .st-cg-notif__text {
  color: inherit;
}

.st-cg-notif__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.st-cg-hint {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.st-cg-hintlink {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-primary-on-surface);
}

/* Coefficienti YBI (S20, third panel state): the trigger row in colonna 2, and the per-stat
   rows of the panel itself in colonna 3 (SPECIFICATIONS.md 6.4). */
.st-cg-ybirow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: inherit;
  text-decoration: none;
}

/* Not yet saved — same tint as .st-warn, read as "nessuno li ha ancora salvati", not zero. */
.st-cg-ybirow.is-pending {
  border-color: var(--bst-waiting);
  background: var(--bst-waiting-soft);
}

.st-cg-ybirow__text {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-cg-ybirow__title {
  font-size: 0.8125rem;
  font-weight: 700;
}

.st-cg-ybirow__status {
  font-size: 0.625rem;
  font-weight: 700;
}

/* "Valori di default" / "Copia da…": two equal-width controls above the field groups. The
   select reuses .st-input (same as the category filters elsewhere on this page) sized down to
   match the ghost button next to it. */
.st-cg-ybi-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 0.8125rem;
}

.st-cg-ybi-actions > * {
  flex: 1 1 0;
}

.st-cg-ybi-actions .st-input {
  min-height: 32px;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.st-cg-ybigroups {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0 1rem 1rem;
}

.st-cg-ybigroup__title {
  margin: 0 0 0.4375rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.st-cg-ybifield {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 32px;
}

.st-cg-ybifield + .st-cg-ybifield {
  margin-top: 0.4375rem;
}

.st-cg-ybifield__label {
  flex-grow: 1;
  min-width: 0;
  font-size: 0.75rem;
}

.st-cg-ybifield__label small {
  color: var(--bst-muted);
  font-weight: 400;
}

.st-cg-ybifield input {
  flex: 0 0 4.75rem;
  min-height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--bst-primary);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.st-cg-ybidelete {
  border: 0;
  background: none;
  padding: 0;
  color: var(--bst-danger-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .st-cg-body {
    align-items: flex-start;
  }

  /* Fixed, unlike the two-column registries: with three columns in view at
     once the list cannot grow too, or it fights the round panel for the
     same free space — only the round panel (.st-card--wide) grows
     (SPECIFICATIONS.md 6.4). */
  .st-cg-list {
    flex: 0 0 320px;
  }

  /* The round panel takes the remaining width next to the fixed-width
     competition card, instead of the registry card's own 372px. */
  .st-card--wide {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* "Nuovo girone" and "Aggiungi squadra" are quick, short forms — a bottom
   sheet on a phone, like the roster's "numero maglia" ask, not a fourth
   level stacked on top of competizione/girone (SPECIFICATIONS.md 6.4, "S20
   su mobile — decisione riaperta"). The .aside.st-card inside is the exact
   same markup as the real levels; only this wrapper and the two overrides
   below change how it sits under 1024px. From 1024px up the wrapper steps
   out of the layout (display:contents) and .st-card--wide docks in the
   three-column row exactly as it did before this existed. */
.st-cg-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(15 23 42 / 45%);
}

.st-cg-sheet .st-card {
  position: absolute;
  inset: auto 0 0 0;
  height: auto;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 28px rgb(15 23 42 / 18%);
}

.st-cg-sheet__grip {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 4px;
  margin: 0.5625rem auto 0;
  border-radius: 2px;
  background: var(--bst-border);
}

/* Plain title instead of the full-screen level's colored bar + close X:
   a sheet closes via "Annulla"/"Fatto" at the bottom, not a header X. */
.st-cg-sheet .st-card__head {
  position: static;
  padding: 0.25rem 1rem 0.75rem;
  background: transparent;
  color: var(--bst-text);
}

.st-cg-sheet .st-card__close {
  display: none;
}

@media (min-width: 1024px) {
  .st-cg-sheet {
    position: static;
    inset: auto;
    z-index: auto;
    background: none;
    display: contents;
  }

  .st-cg-sheet .st-card {
    position: static;
    inset: auto;
    height: auto;
    max-height: 100%;
    border-radius: var(--bst-radius-lg);
    box-shadow: none;
  }

  .st-cg-sheet__grip {
    display: none;
  }

  .st-cg-sheet .st-card__head {
    position: static;
    padding: 0 0.9375rem;
    background: var(--bst-surface);
    color: var(--bst-text);
  }

  .st-cg-sheet .st-card__close {
    display: grid;
  }
}

   S10/S11/S23 — Allenamenti: piano, sessioni, presenze (SPECIFICATIONS.md 6.4)
   Mobile-first; the desktop shape is a separate block below.
   ========================================================================= */

.st-tone--warn {
  color: var(--bst-waiting-on-surface);
}

.st-tone--danger {
  color: var(--bst-danger-on-surface);
}

/* Piano/Sessioni tabs: unlike the roster's .st-tabs, these stay visible at every width -
   they are two ways of working, not a mobile-only affordance (6.4). */
.st-pr-tabs {
  display: flex;
  gap: 1.25rem;
  padding-bottom: 0.75rem;
}

.st-pr-tabs__tab {
  padding-bottom: 0.4375rem;
  border-bottom: 3px solid transparent;
  color: var(--bst-muted);
  font-weight: 700;
  text-decoration: none;
}

.st-pr-tabs__tab.is-active {
  border-bottom-color: var(--bst-primary);
  color: var(--bst-primary-on-surface);
}

.st-pr-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

.st-pr-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* --- S10: plan chips, card, slots -------------------------------------- */

.st-pr-plans {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.125rem;
}

.st-pr-planchip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 32px;
  padding: 0 0.8125rem;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.st-pr-planchip.is-selected {
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: var(--bst-on-primary);
}

.st-pr-planchip--new {
  border-style: dashed;
  color: var(--bst-primary-on-surface);
}

.st-pr-plancard {
  gap: 0;
}

.st-pr-plancard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-bottom: 1px solid var(--bst-border);
}

.st-pr-plancard__title {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.st-pr-iconbtn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-text);
  cursor: pointer;
}

.st-pr-slots {
  display: flex;
  flex-direction: column;
}

.st-pr-slotrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 54px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: inherit;
  text-decoration: none;
}

.st-pr-slotrow__day {
  flex: 0 0 4.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.st-pr-slotrow__time {
  flex: 0 0 6.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}

.st-pr-slotrow__place {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.st-pr-addrow {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 46px;
  padding: 0 0.875rem;
  color: var(--bst-primary-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.st-pr-history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.st-pr-history__list {
  display: flex;
  flex-direction: column;
  border-radius: var(--bst-radius-lg);
  overflow: hidden;
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
}

.st-pr-history__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.st-pr-history__name {
  font-weight: 600;
}

.st-pr-history__period {
  font-size: 0.75rem;
}

/* --- The bottom sheet / side panel shared by S10's three panels and S11's
       edit/new session form: a short form is not worth covering the screen ------ */

.st-pr-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 1rem 1rem 0 0;
  background: var(--bst-surface);
  box-shadow: 0 -8px 28px rgb(15 23 42 / 18%);
}

.st-pr-panel__grip {
  flex: 0 0 auto;
  width: 38px;
  height: 4px;
  margin: 0.625rem auto;
  border-radius: 2px;
  background: var(--bst-border);
}

.st-pr-panel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1rem 0.625rem;
}

.st-pr-panel__title {
  flex-grow: 1;
  font-size: 1rem;
  font-weight: 700;
}

.st-pr-panel__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--bst-muted);
}

.st-pr-panel__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0 1rem calc(1.25rem + var(--bst-safe-bottom));
}

.st-pr-row2 {
  display: flex;
  gap: 0.625rem;
}

.st-pr-row2 .st-field {
  flex: 1 1 0;
}

.st-pr-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bst-muted);
  font-size: 0.6875rem;
}

.st-pr-divider::before,
.st-pr-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--bst-border);
}

.st-pr-daypicker {
  display: flex;
  gap: 0.375rem;
}

.st-pr-day {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.st-pr-day input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.st-pr-day:has(input:checked) {
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: var(--bst-on-primary);
}

.st-pr-day:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--bst-primary-ring);
}

.st-pr-panel__foot {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding-top: 0.25rem;
}

.st-pr-panel__danger {
  border: 0;
  background: none;
  color: var(--bst-danger-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* --- Generation result --------------------------------------------------- */

.st-pr-result {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 1.25rem;
}

.st-pr-result__stats {
  display: flex;
  gap: 1.25rem;
}

.st-pr-result__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.st-pr-result__n {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bst-text);
}

.st-pr-result__stat.st-tone--ok .st-pr-result__n {
  color: var(--bst-success-on-surface);
}

.st-pr-result__stat.st-tone--warn .st-pr-result__n {
  color: var(--bst-waiting-on-surface);
}

/* --- S11: period nav, filter, session rows ------------------------------- */

.st-pr-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.st-pr-nav--dates {
  padding-top: 0.125rem;
}

.st-pr-nav__view {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: var(--bst-radius);
  overflow: hidden;
  border: 1px solid var(--bst-border);
}

.st-pr-nav__opt {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.6875rem;
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.st-pr-nav__opt.is-on {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.st-pr-nav__today {
  color: var(--bst-primary-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.st-pr-nav__label {
  flex-grow: 1;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
}

.st-pr-filterchip {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 0.6875rem;
  border-radius: 14px;
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.st-pr-filterchip.is-on {
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: var(--bst-on-primary);
}

.st-pr-textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--bst-primary-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.st-pr-sessions {
  gap: 0;
}

.st-pr-sessionrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 58px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: inherit;
  text-decoration: none;
}

.st-pr-sessionrow.is-open {
  background: var(--bst-primary-soft);
}

.st-pr-sessionrow.is-off {
  opacity: 0.6;
}

.st-pr-sessionrow__date {
  flex: 0 0 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.st-pr-sessionrow__dow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bst-muted);
}

.st-pr-sessionrow__dom {
  font-size: 1rem;
  font-weight: 800;
}

.st-pr-sessionrow__body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.st-pr-sessionrow__time {
  font-size: 0.8125rem;
  font-weight: 700;
}

.st-pr-sessionrow__badges {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

.st-pr-sessionrow__status {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.st-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.375rem;
  border-radius: 10px;
  background: var(--bst-table-head);
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.625rem;
  font-weight: 700;
}

.st-badge--warn {
  background: var(--bst-waiting-soft);
  border-color: var(--bst-waiting);
  color: var(--bst-waiting-on-surface);
}

/* --- S11: session detail (full-screen overlay on a phone) --------------- */

.st-pr-detail {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bst-staff-page);
}

.st-pr-detail__head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: calc(var(--bst-header-pad) + var(--bst-safe-top)) 1rem var(--bst-header-pad);
  background: var(--bst-staff-header);
  color: var(--bst-on-staff-header);
}

.st-pr-detail .st-pr-panel__title {
  color: inherit;
}

.st-pr-detail__title {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.st-pr-detail__place {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--bst-on-staff-header-soft);
}

.st-pr-detail .st-pr-panel__close {
  color: inherit;
}

.st-pr-detail__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bst-border);
}

.st-pr-danger-btn {
  color: var(--bst-danger-on-surface);
  border-color: var(--bst-danger);
}

.st-pr-detail__thead {
  display: none;
}

/* One row for a player: the name box (name, badge if he said he cannot come, his reason under it) and, right
   next to it, the attendance buttons. The box stops at a readable width so the buttons stay close to the name. */
.st-pr-rosterrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 46px;
  padding: 0.375rem 1rem;
  border-bottom: 1px solid var(--bst-row-line);
  background: var(--bst-surface);
}

.st-pr-rosterrow__who {
  flex: 1 1 0;
  min-width: 0;
  max-width: 16rem;
  display: flex;
  flex-direction: column;
}

.st-pr-rosterrow__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.4375rem;
  min-width: 0;
}

.st-pr-rosterrow__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.8125rem;
}

.st-pr-badge-off {
  flex: 0 0 auto;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--bst-danger);
  color: var(--bst-on-danger);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.st-pr-rosterrow__reason {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.st-pr-rosterrow__attendance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.st-pr-attendance {
  display: contents;
}

.st-pr-attend {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-border);
  cursor: pointer;
}

.st-pr-attend.is-present {
  background: var(--bst-success-soft);
  border-color: var(--bst-success);
  color: var(--bst-success-on-surface);
}

.st-pr-attend--absent.is-absent {
  background: var(--bst-danger-soft);
  border-color: var(--bst-danger);
  color: var(--bst-danger-on-surface);
}

.st-pr-attend__label {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

/* --- S23: attendance matrix ----------------------------------------------- */

.st-pr-matrix {
  gap: 0;
}

.st-pr-matrix__scroll {
  overflow: auto;
}

.st-pr-matrix__grid {
  display: inline-flex;
  flex-direction: column;
  min-width: 100%;
}

.st-pr-matrix__row {
  display: flex;
  border-bottom: 1px solid var(--bst-row-line);
}

.st-pr-matrix__row--head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bst-table-head);
  border-bottom: 1px solid var(--bst-border);
}

.st-pr-matrix__name {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  padding: 0 0.75rem;
  min-height: 46px;
  background: var(--bst-surface);
  border-right: 1px solid var(--bst-border);
}

.st-pr-matrix__name--head {
  z-index: 3;
  justify-content: center;
  background: var(--bst-table-head);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.st-pr-matrix__playername {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
}

.st-pr-matrix__summary {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.6875rem;
}

.st-pr-matrix__pct {
  font-weight: 800;
}

.st-pr-matrix__cell {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-right: 1px solid var(--bst-row-line);
}

.st-pr-matrix__cell--head {
  flex-direction: column;
  gap: 0.0625rem;
}

.st-pr-matrix__dow {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.st-pr-matrix__dom {
  font-size: 0.75rem;
  font-weight: 800;
}

.st-pr-matrix__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  color: var(--bst-border);
}

.st-pr-matrix__mark.is-present {
  background: var(--bst-success-soft);
  border-color: var(--bst-success);
  color: var(--bst-success-on-surface);
}

.st-pr-matrix__mark.is-absent {
  background: var(--bst-danger-soft);
  border-color: var(--bst-danger);
  color: var(--bst-danger-on-surface);
}

.st-pr-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.75rem;
  color: var(--bst-muted);
  font-size: 0.6875rem;
}

.st-pr-legend__swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.25rem;
  border-radius: 3px;
  border: 1px solid var(--bst-border);
  background: var(--bst-surface);
  vertical-align: -1px;
}

.st-pr-legend__swatch.is-present {
  background: var(--bst-success-soft);
  border-color: var(--bst-success);
}

.st-pr-legend__swatch.is-absent {
  background: var(--bst-danger-soft);
  border-color: var(--bst-danger);
}

@media (min-width: 1024px) {
  .st-pr-body {
    flex-direction: row;
    align-items: flex-start;
  }

  .st-pr-main {
    flex: 0 0 640px;
    min-width: 0;
  }

  /* The bottom sheet becomes the side panel: static, bordered, no longer fixed
     to the viewport (same shift .st-card already makes at this width, 6.4). */
  .st-pr-panel,
  .st-pr-detail {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    max-height: none;
    align-self: flex-start;
    border-radius: var(--bst-radius-lg);
    overflow: hidden;
    box-shadow: none;
  }

  .st-pr-panel {
    border: 1px solid var(--bst-primary);
  }

  .st-pr-detail {
    border: 1px solid var(--bst-border);
  }

  .st-pr-detail__head {
    position: static;
    padding: 0 0.9375rem;
    min-height: 54px;
    background: var(--bst-surface);
    color: var(--bst-text);
    border-bottom: 1px solid var(--bst-border);
  }

  .st-pr-detail__place {
    color: var(--bst-muted);
  }

  .st-pr-panel__grip {
    display: none;
  }

  .st-pr-panel__head {
    padding: 0 0.9375rem;
    min-height: 44px;
    border-bottom: 1px solid var(--bst-border);
  }

  .st-pr-panel__form {
    padding: 0.9375rem;
  }

  .st-pr-result {
    padding: 0 0.9375rem 0.9375rem;
  }

  .st-pr-detail__thead {
    display: flex;
  }

  .st-pr-rosterrow {
    padding: 0.375rem 0.9375rem;
  }

  .st-pr-rosterrow__attendance {
    flex: 0 0 190px;
  }
}

/* ============================================================================
   U3 - Dettaglio partita (Pages/Partite.cshtml)
   First pass: structural layout only, visual polish is a follow-up round.
   Breakpoint: below 860px the desktop table gives way to whichever mobile
   density the user chose (Comoda cards or Compatta grouped table) - density
   itself is resolved server-side, same cookie as Campionato (§6.2 K5).
   ========================================================================= */

.pt-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pt-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.pt-back__label {
  color: var(--bst-primary-on-surface);
  font-weight: 600;
}

.pt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
}

.pt-header__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
}

.pt-header__competition {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.pt-header__when {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.pt-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pt-docs__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 20px;
  border: 1px solid var(--bst-border);
  color: var(--bst-text);
  font-size: 0.6875rem;
  font-weight: 600;
}

.pt-docs__label-short {
  display: none;
}

.pt-header__score {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
}

.pt-header__points {
  min-width: 1.6em;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
}

.pt-header__dash {
  color: var(--bst-muted);
}

.pt-periods {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.pt-periods--desktop {
  display: none;
}

.pt-periods__cell {
  margin-right: 10px;
}

.pt-periods__cell em {
  font-style: normal;
  font-weight: 700;
  margin-right: 3px;
}

.pt-staff-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--bst-radius);
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.65;
  cursor: not-allowed;
}

.pt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  text-align: center;
}

.pt-empty--dashed {
  border-style: dashed;
}

.pt-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bst-page);
  color: var(--bst-muted);
}

.pt-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.pt-empty__text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.pt-convocati {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.pt-convocati__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--bst-page);
  border: 1px solid transparent;
  text-align: left;
}

.pt-convocati__row--mine {
  background: var(--bst-primary-soft);
  border-color: var(--bst-primary);
}

/* The player's own photo, or the shared placeholder (PartiteStatsBuilder.PlayerPlaceholderUrl) -
   the src is always set, so this never needs an empty-state rule of its own. Reused at three
   sizes: default (desktop table row, comoda card), --sm (dense mobile row). */
.pt-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bst-page);
  border: 1px solid var(--bst-border);
}

.pt-avatar--sm {
  width: 18px;
  height: 18px;
}

.pt-convocati__name {
  font-size: 0.8125rem;
  font-weight: 600;
}

/* The meeting above the list: same card as in the home, held to the width of the list. */
.pt-meeting {
  width: 100%;
  max-width: 640px;
  margin-top: 6px;
  text-align: left;
}

.pt-convocati__tag {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bst-muted);
}

.pt-convocati__spacer {
  flex-grow: 1;
}

.pt-respond-form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pt-respond-btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid var(--bst-success);
  background: transparent;
  color: var(--bst-success);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}

.pt-respond-btn--ko {
  border-color: var(--bst-danger);
  color: var(--bst-danger);
}

.pt-response-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
}

.pt-response-badge--ok {
  background: var(--bst-success-soft);
  color: var(--bst-success);
}

.pt-response-badge--ko {
  background: var(--bst-danger-soft);
  color: var(--bst-danger);
}

.pt-respond-change {
  border: 0;
  background: transparent;
  color: var(--bst-primary-on-surface);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}

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

.pt-team-select {
  display: flex;
  gap: 6px;
}

.pt-team-select__opt {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.pt-team-select__opt.is-active {
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 700;
}

.pt-team-label {
  font-size: 0.875rem;
  font-weight: 700;
}

.pt-density {
  display: flex;
  gap: 4px;
}

.pt-density__option {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.pt-density__option.is-active {
  background: var(--bst-primary-soft);
  border-color: var(--bst-primary);
  color: var(--bst-primary-on-surface);
  font-weight: 700;
}

/* Statistiche parziali: a whole-table state, not a per-row marker - one banner (here, and
   again inline in the mobile card/dense views) instead of a tag or dot on each row. */
.pt-partial-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: #997404;
}

.pt-muted {
  color: var(--bst-muted);
}

/* Desktop table: a CSS grid shared by the group row, the header row, every
   data row and the totals row - each is `display:contents` so its own
   pt-dt-col/pt-dt-group children line up in the same columns. */
.pt-desktop-table {
  display: none;
}

.pt-mobile {
  display: block;
}

.pt-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
}

.pt-card__top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pt-card__name {
  flex-grow: 1;
  font-size: 0.875rem;
  font-weight: 700;
}

.pt-card__points {
  font-size: 1.1875rem;
  font-weight: 800;
}

.pt-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.pt-card--totals {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bst-page);
}

.pt-dense {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-group-tabs {
  display: flex;
  gap: 6px;
}

.pt-group-tab {
  flex-grow: 1;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bst-radius);
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.pt-group-tab.is-active {
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 700;
}

/* A real grid, not flexbox: every row (head, data, totals) declares the exact same explicit
   column template independently, so the Nth column lands at the same x on every row regardless
   of how long that row's player name or stat values happen to be. Flexbox couldn't guarantee
   this - the player column and the stat columns were all flex-growing into the same pool of
   free space, so a longer name on one row pushed everything after it sideways on that row only. */
/* Stat columns get a fixed width, not minmax(0, 1fr): with every column sharing the same 1fr
   weight the player name only got 1/5 (or 1/6) of the row, truncating after a few letters even
   on an ordinary surname. Fixed widths leave the player column - the only 1fr track left - with
   whatever is left, which is most of the row.
   Default width is sized for short content (a bare integer or "–"): Rimbalzi, Possesso, and the
   partial game's made-only Tiri+Falli never print anything wider than that. */
.pt-dense-head,
.pt-dense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px repeat(4, 40px);
  align-items: center;
  column-gap: 5px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--bst-border);
  font-size: 0.75rem;
}

/* The one case that genuinely needs more: the non-partial Tiri group prints the full
   "7/10 (70%)" shot line, which does not fit in 40px. The player column gives up some of its
   space here, but only here - everywhere else it keeps it. 48px is the measured minimum that
   still fits "19/53 (36%)" (the totals row, the widest string this group ever prints) on one
   line - not a round number picked for looks, an empirically checked floor. */
.pt-dense--tiri .pt-dense-head,
.pt-dense--tiri .pt-dense-row {
  grid-template-columns: minmax(0, 1fr) 32px repeat(4, 48px);
}

/* Statistiche parziali: the Tiri group gains FALLI as a fifth column (see PartiteStatGroup),
   still short content (made-only shots, a plain fouls count) so the default narrow width covers it. */
.pt-dense--5col .pt-dense-head,
.pt-dense--5col .pt-dense-row {
  grid-template-columns: minmax(0, 1fr) 32px repeat(5, 40px);
}

/* Valutazione has its own four columns - YBI/Z-SCORE assoluto, YBI/Z-SCORE normalizzato,
   duplicated rather than stacked (SPECIFICATIONS.md U3) - and signed two-decimal values
   ("+12,34", "−0,68") are wider than the plain integers/dashes the default width was sized for. */
.pt-dense--valutazione .pt-dense-head,
.pt-dense--valutazione .pt-dense-row,
.pt-dense--valutazione .pt-dense-subhead {
  grid-template-columns: minmax(0, 1fr) 26px repeat(4, 46px);
}

/* Above the head row only for Valutazione: "ASSOLUTO"/"NORMALIZZATO" over their own pair of
   columns, the same two-tier grouping the desktop table uses (.pt-dt-groups). */
.pt-dense-subhead {
  display: grid;
  align-items: end;
  column-gap: 5px;
  padding: 0 4px;
}

.pt-dense-subhead__group {
  grid-column: span 2;
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--bst-muted);
}

.pt-dense-head {
  color: var(--bst-muted);
  font-size: 0.625rem;
  font-weight: 700;
  border-bottom: none;
}

.pt-dense-row--totals {
  font-weight: 700;
  border-bottom: none;
  background: var(--bst-page);
}

.pt-dense-col--player {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pt-dense-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.pt-dense-col--pt {
  text-align: right;
  font-weight: 800;
}

.pt-dense-head > span:not(.pt-dense-col--player):not(.pt-dense-col--pt),
.pt-dense-row > span:not(.pt-dense-col--player):not(.pt-dense-col--pt) {
  text-align: right;
}

@media (min-width: 860px) {
  .pt-periods--mobile {
    display: none;
  }

  .pt-periods--desktop {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.75rem;
  }

  .pt-periods__row {
    display: flex;
    gap: 10px;
  }

  .pt-periods__team {
    width: 140px;
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bst-muted);
    font-weight: 700;
  }

  .pt-periods__row span:not(.pt-periods__team) {
    width: 36px;
    flex: 0 0 auto;
    text-align: center;
  }

  .pt-periods__row--head span {
    color: var(--bst-muted);
    font-weight: 700;
    font-size: 0.625rem;
  }

  .pt-periods__won {
    font-weight: 800;
  }

  .pt-docs__label-short {
    display: none;
  }

  .pt-docs__label-long {
    display: inline;
  }

  .pt-mobile {
    display: none;
  }

  /* Comoda/Compatta only changes anything below 860px (see .pt-mobile above): at desktop width
     the table is always the same full grid regardless of the cookie, so the chip has nothing to
     switch and stays hidden rather than sitting there doing nothing. */
  .pt-density {
    display: none;
  }

  /* Tiri columns wide enough for "13/19 (68%)" without wrapping - 68px looked fine on the
     short demo data, but the real column has to fit the longest string that column will ever
     hold. More columns are still coming (see backlog), so this stays generous rather than
     tuned to exactly today's data. */
  .pt-desktop-table {
    display: grid;
    grid-template-columns: 40px minmax(160px, 1fr) 44px 56px repeat(3, 92px) repeat(2, 52px) repeat(3, 52px) repeat(2, 52px) repeat(2, 52px);
    border-radius: var(--bst-radius-lg);
    /* .cmp-page caps the page at 900px, but the full column set (and now Valutazione's extra
       two) adds up to more than that: overflow:hidden silently clipped the rightmost columns
       off-screen instead of wrapping or scrolling to them - horizontal scroll makes them
       reachable, same as any table wider than its viewport. */
    overflow-x: auto;
    background: var(--bst-surface);
    border: 1px solid var(--bst-border);
  }

  /* Statistiche parziali: only PT, MIN, T2/T3/TL and COM remain - two groups (Tiri, Falli)
     instead of five, so the grid needs its own, much narrower column template. */
  .pt-desktop-table--partial {
    grid-template-columns: 40px minmax(160px, 1fr) 44px 56px repeat(3, 92px) 52px;
  }

  /* Only when the competition has YBI coefficients configured (HasYbi): four more columns -
     YBI/Z-SCORE assoluto, YBI/Z-SCORE normalizzato, duplicated rather than stacked
     (SPECIFICATIONS.md U3) - appended to the same base template. Never combined with --partial,
     since a partial game never has a full-stats YBI to show (YbiCalculator gap). */
  .pt-desktop-table--valutazione {
    grid-template-columns: 40px minmax(160px, 1fr) 44px 56px repeat(3, 92px) repeat(2, 52px) repeat(3, 52px) repeat(2, 52px) repeat(2, 52px) repeat(4, 60px);
  }

  .pt-dt-groups,
  .pt-dt-head,
  .pt-dt-row {
    display: contents;
  }

  .pt-dt-groups > div {
    padding: 6px 0;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--bst-muted);
    background: var(--bst-page);
    border-bottom: 1px solid var(--bst-border);
  }

  .pt-dt-group--tiri {
    grid-column: span 3;
  }

  .pt-dt-group--rimb,
  .pt-dt-group--falli,
  .pt-dt-group--stop {
    grid-column: span 2;
  }

  .pt-dt-group--poss {
    grid-column: span 3;
  }

  /* Two groups now, ASSOLUTO and NORMALIZZATO, each spanning its own YBI/Z-SCORE pair - both
     use this same modifier class, rendered twice by Partite.cshtml. */
  .pt-dt-group--val {
    grid-column: span 2;
  }

  /* Statistiche parziali: FALLI is the only column left in its group (just COM), not two -
     left at "span 2" it overflowed the narrower partial grid template by one track and wrapped
     the whole header (and every row under it) onto a second line. */
  .pt-desktop-table--partial .pt-dt-group--falli {
    grid-column: span 1;
  }

  .pt-dt-head > div {
    padding: 8px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bst-muted);
    border-bottom: 1px solid var(--bst-border);
    text-align: right;
  }

  .pt-dt-row > div {
    padding: 8px 6px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--bst-row-line);
  }

  .pt-dt-row--totals > div {
    font-weight: 700;
    background: var(--bst-page);
    border-bottom: none;
  }

  /* ".pt-dt-row > div" above also sets justify-content, at the same specificity as a bare
     ".pt-dt-col--player" rule would be - whichever comes later in the file wins, which made
     this look "sometimes" left-aligned depending on unrelated edits. Matching its selector
     shape (".pt-dt-row > X") settles it for good, the same way ".pt-dt-col--pt" etc. do. */
  .pt-dt-row > .pt-dt-col--player {
    justify-content: flex-start;
    gap: 8px;
    font-weight: 600;
    text-align: left;
  }

  .pt-dt-row > .pt-dt-col--num {
    justify-content: center;
  }

  .pt-dt-col--pt {
    font-weight: 800;
  }

  /* Numero, giocatore, punti e minuti restano visibili mentre si scorre verso le colonne di
     destra - sticky con un left fisso per colonna. Il template della griglia risolve il track
     1fr del giocatore a un valore fisso (il suo minimo, 160px) ogni volta che la tabella e' piu'
     larga del contenitore, cioe' sempre non appena c'e' scorrimento reale: e' l'unico caso in
     cui questi offset contano, quindi possono restare fissi. */
  .pt-dt-col--frozen {
    position: sticky;
    z-index: 1;
    background: var(--bst-surface);
  }

  .pt-dt-row--totals .pt-dt-col--frozen {
    background: var(--bst-page);
  }

  .pt-dt-col--num.pt-dt-col--frozen {
    left: 0;
  }

  .pt-dt-col--player.pt-dt-col--frozen {
    left: 40px;
  }

  .pt-dt-col--pt.pt-dt-col--frozen {
    left: 200px;
  }

  .pt-dt-col--min.pt-dt-col--frozen {
    left: 244px;
  }

  /* The visible edge between the frozen columns and the ones that actually scroll. */
  .pt-dt-col--frozen-last {
    box-shadow: 3px 0 6px rgba(15, 23, 42, 0.1);
  }
}

/* YBI/Z-SCORE highlight (U3 box score): a green badge above +1, a plain red word below -1 -
   nothing in between. The absolute pair and the normalized pair are colored independently from
   their own z-score, so they can disagree (SPECIFICATIONS.md). Shared by the desktop cell
   partial, the dense mobile grid and the comoda cards. */
.pt-rating--positive {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bst-success-soft);
  color: var(--bst-success);
  font-weight: 700;
}

.pt-rating--negative {
  color: var(--bst-danger);
  font-weight: 700;
}

/* Mobile Comoda: the Valutazione lines on a player's card - the group of stats this page was
   missing entirely on this density before. Assoluto and Normalizzato print as two separate
   lines, YBI and Z-SCORE side by side on each (SPECIFICATIONS.md U3: duplicated, not stacked). */
.pt-card__ratings {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 3px;
}

.pt-card__ratings:first-of-type {
  margin-top: 1px;
  padding-top: 4px;
  border-top: 1px dashed var(--bst-border);
}

.pt-card__ratings-title {
  flex: 0 0 84px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.pt-card__rating {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
}

.pt-card__rating-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--bst-muted);
}

/* =========================================================================
   Staff calendar (S2/S3): list + edit panel + "Aggiungi giornata" drawer.
   The list is Campionato's dense row; the panel reuses .st-card (full screen on a
   phone, docked beside the list from 1024px, like S20); the drawer is its own thing.
   ========================================================================= */

.gm-head__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.gm-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gm-list {
  flex: 1 1 0;
  min-width: 0;
}

.gm-edit {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--bst-muted);
}

.gm-edit:hover,
.cmp-row.is-editing .gm-edit {
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.cmp-row.is-editing {
  border-left-color: var(--bst-primary);
  background: var(--bst-primary-soft);
}

/* Derived status, never stored: annullata / giocata / programmata / da programmare. */
.gm-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 18px;
  margin-left: auto;
  padding: 0 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: 9px;
  background: var(--bst-page);
  color: var(--bst-muted);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.gm-status--programmata {
  border-color: var(--bst-primary-hairline);
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.gm-status--giocata {
  border-color: var(--bst-success);
  background: var(--bst-success-soft);
  color: var(--bst-success-on-surface);
}

.gm-status--annullata {
  border-color: var(--bst-danger);
  background: var(--bst-danger-soft);
  color: var(--bst-danger-on-surface);
}

.st-card__head .gm-status {
  margin-left: 0;
}

/* The cancelled game's panel: readable, not editable. */
.gm-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gm-fieldset:disabled .st-input {
  background: var(--bst-page);
  color: var(--bst-muted);
  cursor: not-allowed;
}

.gm-rule {
  height: 1px;
  background: var(--bst-row-line);
}

.gm-state {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem 1rem;
  border-top: 1px solid var(--bst-border);
}

.gm-state .st-section__title {
  margin: 0;
}

.gm-state__row,
.gm-state__band {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gm-state__text {
  flex: 1 1 0;
  font-size: 0.8125rem;
}

.gm-state__band {
  align-items: flex-start;
  padding: 0.6875rem;
  border: 1px solid var(--bst-danger);
  border-radius: var(--bst-radius);
  background: var(--bst-danger-soft);
  color: var(--bst-danger-on-surface);
}

.gm-state__band .gm-state__text {
  font-size: 0.75rem;
  line-height: 1.5;
}

.gm-confirm > summary {
  cursor: pointer;
  list-style: none;
}

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

.gm-confirm__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-danger);
  border-radius: var(--bst-radius);
  background: var(--bst-danger-soft);
}

.gm-btn-danger,
.gm-btn-danger-outline {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 0.75rem;
  border: 1px solid var(--bst-danger);
  border-radius: 7px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.gm-btn-danger {
  background: var(--bst-danger);
  color: #fff;
}

.gm-btn-danger-outline {
  background: var(--bst-surface);
  color: var(--bst-danger-on-surface);
}

/* --- Drawer: the wizard. Full screen on a phone, 560px from the right on desktop. --- */

.gm-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}

.gm-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(15 23 42 / 40%);
}

.gm-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  height: 100%;
  background: var(--bst-surface);
  box-shadow: -10px 0 32px rgb(15 23 42 / 22%);
}

.gm-drawer__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bst-border);
}

.gm-drawer__titles {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gm-drawer__kicker {
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bst-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-drawer__title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.gm-drawer__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--bst-muted);
}

.gm-drawer__form {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
}

.gm-drawer__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  padding: 1.125rem 1.25rem;
  overflow-y: auto;
}

.gm-drawer__foot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--bst-border);
}

.gm-default-submit {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}

.gm-callout {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 0.6875rem 0.8125rem;
  border-radius: var(--bst-radius);
  background: var(--bst-page);
}

.gm-callout__label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.gm-callout__value {
  font-size: 0.8125rem;
  font-weight: 700;
}

.gm-callout--action {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
}

.gm-callout__text {
  flex: 1 1 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.gm-count {
  width: 6rem;
  font-weight: 700;
}

.gm-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.8125rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  cursor: pointer;
}

.gm-switch__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gm-switch__title {
  font-size: 0.8125rem;
  font-weight: 700;
}

.gm-switch__sub {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.gm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.gm-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: 14px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--bst-text);
  text-decoration: none;
}

.gm-chip:hover {
  border-color: var(--bst-primary);
  color: var(--bst-primary-on-surface);
}

.gm-linkbtn {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-primary-on-surface);
  cursor: pointer;
}

.gm-linkbtn--add {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4375rem;
  padding: 0.25rem 0;
}

.gm-day {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scroll-margin-top: 0.5rem;
}

.gm-day__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--bst-muted);
}

.gm-day__rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gm-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gm-pair__team {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  font-size: 0.75rem;
}

.gm-pair__date {
  flex: 0 0 8.5rem;
  min-height: 36px;
  font-size: 0.75rem;
}

.gm-pair__vs {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.gm-free {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.6875rem 0.8125rem;
  border: 1px dashed var(--bst-border);
  border-radius: var(--bst-radius);
}

.gm-free__title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.gm-free__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.gm-free__chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.625rem;
  border-radius: 12px;
  background: var(--bst-page);
  font-size: 0.6875rem;
  font-weight: 600;
}

.gm-free__chip[hidden],
.gm-free__none[hidden] {
  display: none;
}

.gm-free__none {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

@media (min-width: 1024px) {
  .gm-page--panel {
    width: min(100%, 1280px);
  }

  .gm-body {
    flex-direction: row;
    align-items: flex-start;
  }

  /* The list loses the venue column when the panel is open: it does not fit at this width,
     and the panel shows it anyway (design, S2/S3). */
  .gm-page--panel .cmp-venue {
    display: none;
  }

  .gm-panel {
    flex: 0 0 400px;
  }

  /* With the panel open the list and the panel scroll on their own inside the height of the
     window (top bar and padding of the main area taken off), so editing one of the last games
     does not mean scrolling the whole page up and down. */
  .gm-page--panel {
    height: calc(100dvh - 52px - 3.125rem);
    min-height: 28rem;
  }

  .gm-page--panel .gm-body {
    flex: 1 1 0;
    min-height: 0;
    align-items: stretch;
  }

  .gm-page--panel .gm-list {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .gm-page--panel .gm-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- Venue field of the game panel: a text input with a button that opens our gyms. --- */
.gm-combo {
  position: relative;
}

.gm-combo .st-input {
  width: 100%;
  padding-right: 2.25rem;
}

.gm-combo__btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  border: 0;
  border-left: 1px solid var(--bst-border);
  border-radius: 0 var(--bst-radius) var(--bst-radius) 0;
  background: transparent;
  color: var(--bst-muted);
  cursor: pointer;
}

.gm-combo__btn[hidden],
.gm-combo__list[hidden] {
  display: none;
}

.gm-combo__btn:hover {
  background: var(--bst-row-line);
  color: var(--bst-text);
}

.gm-combo__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 14rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.gm-combo__option {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--bst-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gm-combo__option:hover,
.gm-combo__option:focus-visible {
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

/* --- Team crest: the logo of a team in a calendar or a box score, or the generic grey
   crest when it has none. Always the same square, so rows do not shift when logos are added. */
.team-crest {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  object-fit: contain;
}

.team-crest--placeholder {
  opacity: 0.8;
}

.pt-header__score .team-crest {
  width: 2rem;
  height: 2rem;
}

/* --- S4 Convocazione: state + summary on top, details, then roster (left) and convoked (right).
   On a phone the two lists are two tabs; the state and the summary stay visible on both. --- */
.cv {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cv-head {
  align-items: flex-start;
  padding-bottom: 0;
}

.cv-head__titles {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.cv-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 28px;
  padding-right: 0.5rem;
  color: var(--bst-primary-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.cv-status {
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-left-width: 4px;
}

.cv-status--bozza {
  border-left-color: var(--bst-waiting);
}

.cv-status--pubblicata {
  border-left-color: var(--bst-success);
}

.cv-status--modificata {
  border-left-color: var(--bst-accent-on-surface);
}

.cv-status__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.cv-status__text {
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.cv-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 0.5625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cv-state--bozza {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.cv-state--pubblicata {
  background: var(--bst-success-soft);
  color: var(--bst-success);
}

.cv-state--modificata {
  background: var(--bst-accent-soft);
  color: var(--bst-accent-on-surface);
}

.cv-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

.cv-summary__empty {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.cv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 26px;
  padding: 0 0.625rem;
  border-radius: 999px;
  background: var(--bst-table-head, #f4f5f9);
  font-size: 0.75rem;
}

.cv-chip--ok {
  background: var(--bst-success-soft);
  color: var(--bst-success);
}

.cv-chip--ko {
  background: var(--bst-danger-soft);
  color: var(--bst-danger);
}

.cv-chip--wait {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.cv-publish {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.cv-publish__note {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.cv-confirm > summary {
  cursor: pointer;
  list-style: none;
}

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

.cv-confirm__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-table-head, #f4f5f9);
}

.cv-fieldset {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cv-fieldset:disabled {
  opacity: 0.6;
}

.cv-details__hint {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.cv-details__fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
}

.cv-details__save {
  display: flex;
}

.cv-textarea {
  height: auto;
  min-height: 56px;
  padding-top: 0.5rem;
  resize: vertical;
  font: inherit;
}

.cv-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* On a phone one tab at a time. */
.cv-tab--roster .cv-list,
.cv-tab--convocati .cv-pool {
  display: none;
}

.cv-group {
  margin: 0;
  padding: 0.4375rem 0.875rem;
  background: var(--bst-table-head, #f4f5f9);
  border-bottom: 1px solid var(--bst-row-line);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bst-muted);
}

/* Sortable columns (convocation-sort.js): the header and every row share the same grid, so the columns line up. */
.cv-cols {
  display: grid;
  align-items: center;
  column-gap: 0.6875rem;
  min-height: 32px;
  padding: 0 0.875rem;
  background: var(--bst-table-head, #f4f5f9);
  border-bottom: 1px solid var(--bst-row-line);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--bst-muted);
}

.cv-cols--pool {
  grid-template-columns: 20px 2rem minmax(0, 1fr) minmax(0, 1fr);
}

.cv-cols--entries {
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
}

.cv-col {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.cv-col--num {
  text-align: center;
}

.cv-col:hover,
.cv-col:focus-visible {
  color: var(--bst-primary-on-surface);
  outline: none;
}

/* The arrow takes no room of its own: it is drawn after the label and does not move the columns. */
.cv-col.is-sorted::after {
  content: "";
  display: inline-block;
  margin-left: 0.25em;
  border-left: 0.28em solid transparent;
  border-right: 0.28em solid transparent;
  vertical-align: middle;
}

.cv-col.is-sorted[aria-sort="descending"]::after {
  border-top: 0.38em solid currentColor;
}

.cv-col.is-sorted[aria-sort="ascending"]::after {
  border-bottom: 0.38em solid currentColor;
}

.cv-pick {
  display: grid;
  grid-template-columns: 20px 2rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6875rem;
  min-height: 48px;
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
  cursor: pointer;
}

.cv-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cv-pick__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--bst-border);
  border-radius: 6px;
  background: var(--bst-surface);
  color: transparent;
}

.cv-pick input:checked ~ .cv-pick__box {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
}

.cv-pick input:focus-visible ~ .cv-pick__box {
  outline: 2px solid var(--bst-primary);
  outline-offset: 2px;
}

.cv-pick.is-picked {
  background: var(--bst-primary-soft);
}

/* The jersey round of the roster sits in the middle of its column, under the centred header. */
.cv-pick .jersey {
  justify-self: center;
}

.cv-pick__last,
.cv-pick__first,
.cv-row__last,
.cv-row__first {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.cv-pick__tags {
  grid-column: 3 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-bottom: 0.4375rem;
  margin-top: -0.25rem;
}

.cv-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 0.4375rem;
  border-radius: 999px;
  background: var(--bst-table-head, #f4f5f9);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--bst-muted);
}

.cv-tag--new {
  background: var(--bst-accent-soft);
  color: var(--bst-accent-on-surface);
}

.cv-tag--warn {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

/* The list of the convoked: on a narrow panel the answer goes on a line of its own, on a wide one it is a fourth column. */
.cv-entries {
  container-type: inline-size;
}

.cv-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 0.6875rem;
  min-height: 50px;
  padding: 0.375rem 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
}

.cv-row__tags {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
}

.cv-row__end {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.6875rem;
}

@container (min-width: 36rem) {
  .cv-entries--answers .cv-cols--entries,
  .cv-entries--answers .cv-row {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) 12.5rem;
  }

  .cv-entries--answers .cv-row__end {
    grid-column: 4;
    grid-row: 1;
    justify-content: flex-end;
  }

  .cv-entries--answers .cv-row__tags {
    grid-column: 2 / 4;
    grid-row: 2;
  }
}

.cv-row.is-new {
  background: var(--bst-accent-soft);
}

.cv-row__note {
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bst-muted);
}

.cv-answer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.cv-answer--ok {
  background: var(--bst-success-soft);
  color: var(--bst-success);
}

.cv-answer--ko {
  background: var(--bst-danger-soft);
  color: var(--bst-danger);
}

.cv-answer--wait {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.cv-override {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.cv-override__btn {
  min-width: 36px;
  min-height: 30px;
  padding: 0 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: 7px;
  background: var(--bst-surface);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.cv-override__btn--ok {
  color: var(--bst-success);
}

.cv-override__btn--ko {
  color: var(--bst-danger);
}

.cv-override__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (min-width: 1024px) {
  .cv-tabs {
    display: none;
  }

  .cv-details__fields {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .cv-details__time {
    flex: 0 0 120px;
  }

  .cv-details__place {
    flex: 1 1 260px;
  }

  .cv-details__notes {
    flex: 2 1 320px;
  }

  .cv-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .cv-tab--roster .cv-list,
  .cv-tab--convocati .cv-pool {
    display: flex;
  }

  .cv-pool {
    flex: 0 0 440px;
  }

  .cv-list {
    flex-grow: 1;
    min-width: 0;
  }

  .cv-pick {
    min-height: 40px;
    font-size: 0.8125rem;
  }

  .cv-status {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
  }

  .cv-publish {
    margin-left: auto;
    align-items: flex-end;
  }
}

/* Staff link on the match page that opens S4 */
a.pt-staff-cta {
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
}

a.pt-staff-cta:hover {
  background: var(--bst-primary);
  color: #fff;
}

.pt-staff-cta--secondary {
  background: transparent;
  border: 1px solid var(--bst-border);
}

@media (min-width: 1024px) {
  .cv-confirm {
    position: relative;
  }

  .cv-confirm__body {
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    z-index: 5;
    width: 20rem;
    background: var(--bst-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  }
}

/* The publish confirmation overlaps the page: this panel must not clip it. */
.cv-status {
  overflow: visible;
}

/* S4 state colours: draft is neutral, modified is amber (it asks for attention without alarm). */
.cv-status--bozza {
  border-left-color: var(--bst-border);
}

.cv-state--bozza {
  background: var(--bst-table-head, #f4f5f9);
  color: var(--bst-muted);
}

.cv-status--modificata {
  border-left-color: var(--bst-waiting);
}

.cv-state--modificata,
.cv-tag--new {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.cv-row.is-new {
  background: var(--bst-waiting-soft);
}

/* Phone: the meeting form goes under the lists, so the tabs stay near the top. */
.cv-details {
  order: 1;
}

@media (min-width: 1024px) {
  .cv-details {
    order: 0;
  }
}

/* Agenda: a game stands out slightly from a practice - a tinted card with a brand edge. */
.ga-card--game {
  border-left: 3px solid var(--bst-primary);
  background: color-mix(in srgb, var(--bst-primary) 5%, var(--bst-surface));
}

.ga-card--game.ga-card--todo {
  border-left-color: var(--bst-accent-on-surface);
}

.ga-card__link {
  color: inherit;
  text-decoration: none;
}

.ga-card__link::after {
  content: " ›";
  color: var(--bst-muted);
}

.ga-card__link:hover,
.ga-card__link:focus-visible {
  text-decoration: underline;
}

/* Jersey number worn in this game, edited in place in the list of the convoked. */
.cv-jersey {
  flex: 0 0 3.5rem;
  margin: 0;
}

.cv-jersey__input {
  width: 100%;
}

/* --- Document viewer (doc-viewer.js): pan and zoom over a photo, embedded or full screen --- */
.dv {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #1b1f2a;
  color: #fff;
  border-radius: var(--bst-radius-lg);
  overflow: hidden;
  outline: none;
}

.dv:focus-visible {
  box-shadow: 0 0 0 3px var(--bst-primary-ring, rgba(40, 57, 144, 0.35));
}

.dv-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0;
  overflow-x: auto;
}

.dv-tab {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.dv-tab.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.dv-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  cursor: default;
  background: #12151d;
}

.dv-stage.is-zoomed {
  cursor: grab;
}

.dv-stage.is-panning {
  cursor: grabbing;
}

.dv-pane {
  position: absolute;
  top: 0;
  left: 0;
}

.dv-img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.dv-status {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.75rem;
  pointer-events: none;
}

.dv-bar {
  position: absolute;
  left: 50%;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.dv-download {
  text-decoration: none;
}

.dv-download[hidden] {
  display: none;
}

.dv-btn:hover,
.dv-btn:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.dv-zoom {
  min-width: 3.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.dv-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0d0f15;
  color: #fff;
}

.dv-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.dv-dialog[open] {
  display: flex;
  flex-direction: column;
}

.dv-dialog__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.5rem 0 1rem;
}

.dv-dialog__title {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
}

.dv-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
}

.dv-dialog .dv {
  border-radius: 0;
}

@media (min-width: 1024px) {
  .dv-dialog {
    width: min(96vw, 1400px);
    max-width: 96vw;
    height: 94vh;
    max-height: 94vh;
    margin: auto;
    border-radius: var(--bst-radius-lg);
  }
}

/* --- Phases strip of the result and statistics entry (S5): five sections (the list of the players, then four phases), not a wizard --- */
.gp {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  container-type: inline-size;
}

.gp__phase {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.6875rem;
  min-width: 0;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: 8px;
  color: var(--bst-muted);
  text-decoration: none;
}

.gp__phase.is-current {
  background: var(--bst-surface);
  border-color: var(--bst-primary);
  color: var(--bst-text);
}

.gp__phase.is-soon {
  cursor: default;
}

.gp__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e9ebf0;
  font-size: 0.75rem;
  font-weight: 700;
}

.gp__phase.is-current .gp__dot {
  background: var(--bst-primary);
  color: #fff;
}

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

.gp__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
}

.gp__phase.is-current .gp__name {
  font-weight: 700;
}

.gp__state {
  font-size: 0.6875rem;
}

.gp__phase.is-current .gp__state {
  color: var(--bst-primary-on-surface);
}

.gp__long {
  display: none;
}

/* On a phone the strip is compact: short names, no state line. */
@media (max-width: 1023.98px) {
  .gp {
    gap: 0;
    border-bottom: 1px solid var(--bst-border);
  }

  .gp__phase {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0.4375rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font-size: 0.75rem;
  }

  .gp__phase.is-current {
    background: transparent;
    border-bottom-color: var(--bst-primary);
  }

  .gp__state {
    display: none;
  }
}

/* Long names only when the strip is wide enough for five of them: the container, not the screen, decides. */
@container (min-width: 880px) {
  .gp__long {
    display: inline;
  }

  .gp__short {
    display: none;
  }
}

/* --- Result entry (S5 phase 1) --- */
.re {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.re-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
}

.re-body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.re-body:disabled {
  opacity: 0.6;
}

.re-desktop-only {
  display: none !important;
}

.re-mobile-only {
  display: initial;
}

.re-final {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 1rem 0.875rem 0.25rem;
}

.re-final__team {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  font-weight: 700;
  font-size: 0.8125rem;
}

.re-final__team--home {
  align-items: flex-end;
  text-align: right;
}

.re-final__team--away {
  align-items: flex-start;
}

.re-final__sigla {
  display: none;
}

.re-final__dash {
  color: var(--bst-muted);
  font-size: 1.5rem;
}

.re-big {
  min-width: 2.75rem;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.re-total {
  display: none;
}

.re-final__hint {
  margin: 0;
  padding: 0 0.875rem 0.75rem;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.re-periodhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  border-top: 1px solid var(--bst-border);
  background: var(--bst-table-head, #f4f5f9);
}

/* Per quarto / Progressivo: only shown when the script that converts between the two is running. */
.re-mode {
  display: none;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  overflow: hidden;
  background: var(--bst-surface);
}

.js .re-mode {
  display: inline-flex;
}

.re-mode__opt {
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border: 0;
  background: transparent;
  color: var(--bst-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.re-mode__opt + .re-mode__opt {
  border-left: 1px solid var(--bst-border);
}

.re-mode__opt.is-active {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 700;
}

.re-mode__opt:focus-visible {
  outline: 2px solid var(--bst-primary);
  outline-offset: -2px;
}

.re-remark--ko {
  color: var(--bst-danger-on-surface);
}

.re-cell.is-decreasing {
  border-color: var(--bst-danger-on-surface);
}

.re-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--bst-primary-on-surface);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* One set of fields, two layouts. Phone: periods are rows, teams are columns.
   Wide: teams are rows, periods are columns, with the sum at the end. */
.re-periods {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr;
  gap: 0.375rem 0.5rem;
  align-items: center;
  padding: 0.75rem 0.875rem;
}

.re-ph {
  grid-row: calc(var(--p) + 1);
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.re-tn {
  grid-row: 1;
  grid-column: calc(var(--t) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
}

.re-tn__name {
  display: none;
}

.re-cell {
  grid-row: calc(var(--p) + 1);
  grid-column: calc(var(--t) + 1);
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 0.25rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.re-total:focus,
.re-cell:focus {
  outline: none;
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring, rgba(40, 57, 144, 0.25));
}

.re-eq,
.re-sumhead,
.re-sum {
  display: none;
}

.re-remark {
  margin: 0;
  padding: 0 0.875rem 0.75rem;
  font-size: 0.75rem;
  color: var(--bst-waiting);
}

.re-check {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0.875rem 0.875rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-table-head, #f4f5f9);
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.re-check__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
}

.re-check.is-ok {
  background: var(--bst-success-soft);
  border-color: var(--bst-success);
  color: var(--bst-success);
}

.re-check.is-ko {
  background: var(--bst-danger-soft);
  border-color: var(--bst-danger);
  color: var(--bst-danger);
}

.re-docs__lead,
.re-docs__foot {
  margin: 0;
  padding: 0.625rem 0.875rem 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.re-docs__foot {
  padding-bottom: 0.875rem;
}

.re-doc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.625rem 0.875rem 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.re-doc.has-photos {
  border-color: #c9e4d5;
  background: #fbfdfc;
}

.re-doc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.re-doc__name {
  font-weight: 700;
}

.re-doc__count {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.re-doc.has-photos .re-doc__count {
  color: var(--bst-success);
}

/* The staff declared the document missing: a statement, neither an empty slot nor a success. */
.re-doc.is-missing {
  border-style: dashed;
  background: var(--bst-table-head, #f4f5f9);
}

.re-doc.is-missing .re-doc__count {
  color: var(--bst-text);
  font-weight: 700;
}

.re-doc__missing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.re-doc__missing-text {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.re-doc__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.re-photo {
  position: relative;
}

.re-photo__link {
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--bst-border);
  border-radius: 8px;
  background: #e4e7ee;
}

.re-photo__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.re-photo__del {
  position: absolute;
  top: -6px;
  right: -6px;
}

.re-photo__del > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1b1f2a;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.re-photo__del > summary::-webkit-details-marker {
  display: none;
}

.re-photo__confirm {
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 9.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  font-size: 0.75rem;
}

.re-doc__add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.re-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.re-drop {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  border: 1.5px dashed var(--bst-border);
  border-radius: var(--bst-radius);
  color: var(--bst-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.re-drop:hover,
.re-drop.is-over {
  border-color: var(--bst-primary);
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.re-cam {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
}

.re-cam__main,
.re-cam__gallery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 44px;
  border: 1px solid var(--bst-border);
  border-radius: 10px;
  background: var(--bst-surface);
  color: var(--bst-primary-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.re-cam__main {
  flex: 1 1 auto;
}

.re-cam__main.is-primary {
  background: var(--bst-primary);
  border-color: var(--bst-primary);
  color: #fff;
}

.re-cam__gallery {
  flex: 0 0 44px;
}

/* The button that submits a chosen photo: only shown where the script cannot do it. */
.re-up {
  display: none;
}

html:not(.js) .re-up {
  display: inline-flex;
}

.re-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
}

.re-actions__state {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.re-actions__note {
  margin: -0.5rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.re-save {
  min-height: 44px;
}

.re-actions .re-save {
  flex: 1 1 auto;
}

.re-next[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (min-width: 1024px) {
  .re-desktop-only {
    display: initial !important;
  }

  .re-mobile-only {
    display: none !important;
  }

  .re-body {
    flex-direction: row;
    align-items: flex-start;
  }

  .re-score {
    flex: 1 1 0;
    min-width: 0;
  }

  .re-docs {
    flex: 0 0 24rem;
  }

  /* The totals are typed on a wide screen; the big computed number belongs to the phone. */
  .re-final {
    padding: 1.25rem 1rem 1rem;
  }

  .re-final__team--home .re-final__sigla,
  .re-final__team--away .re-final__sigla {
    display: block;
    color: var(--bst-muted);
    font-size: 0.6875rem;
  }

  .re-big,
  .re-final__hint {
    display: none;
  }

  .re-total {
    display: block;
    width: 4.5rem;
    height: 56px;
    border: 1px solid var(--bst-border);
    border-radius: var(--bst-radius);
    background: var(--bst-surface);
    color: var(--bst-text);
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .re-periods {
    grid-template-columns: 11rem repeat(var(--n), minmax(3.25rem, 1fr)) 1rem 4.5rem;
    gap: 0.5rem;
  }

  .re-ph {
    grid-row: 1;
    grid-column: calc(var(--p) + 1);
    text-align: center;
  }

  .re-tn {
    grid-row: calc(var(--t) + 1);
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .re-tn__name {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .re-cell {
    grid-row: calc(var(--t) + 1);
    grid-column: calc(var(--p) + 1);
    height: 40px;
  }

  .re-eq,
  .re-sum {
    display: block;
    grid-row: calc(var(--t) + 1);
    text-align: center;
  }

  .re-eq {
    grid-column: calc(var(--n) + 2);
    color: var(--bst-muted);
  }

  .re-sum {
    grid-column: calc(var(--n) + 3);
    font-size: 1.125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .re-sumhead {
    display: block;
    grid-row: 1;
    grid-column: calc(var(--n) + 3);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bst-muted);
  }

  .re-check {
    display: flex;
  }

  .re-actions {
    position: static;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .re-actions .re-save {
    flex: 0 0 auto;
  }
}

/* A phone shows the mismatch too: totals are not typed there, so it can only be a stale value. */
@media (max-width: 1023.98px) {
  .re-check.is-ko {
    display: flex;
  }
}

/* --- Basket entry (S5 phase 2) --- */
.sc {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sc-wide-only {
  display: none;
}

.sc-narrow-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.125rem;
}

.sc-narrow-bar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--bst-text);
}

.sc-narrow-bar__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--bst-surface-2, #eef0f6);
  color: var(--bst-text);
}

.sc-narrow-bar__titles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.sc-narrow-bar__titles b {
  font-size: 1rem;
  color: var(--bst-text);
}

.sc-narrow-bar__chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: #16204d;
  color: #fff;
  font-size: 0.8125rem;
}

.sc-narrow-bar__chip span {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.sc-error {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bst-radius);
  background: var(--bst-danger-soft);
  color: var(--bst-danger);
  font-size: 0.8125rem;
}

/* Phone: the work takes the whole height; the lists scroll inside, the keys stay under the thumb. */
@media (max-width: 1023.98px) {
  .sc {
    height: calc(100dvh - 7.5rem);
    min-height: 26rem;
    gap: 0.5rem;
  }

  .sc-layout {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 11.875rem;
    gap: 0.5rem;
    min-height: 0;
  }

  .sc-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
  }

  .sc-main [data-board] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .sc-table {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .sc-rows {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .sc-entry,
  .sc-warning,
  .sc-quarter:not(.is-ko) {
    display: none;
  }

  .sc-doc {
    min-height: 0;
  }

  .sc-doc__viewer {
    height: 100%;
  }

  .sc-c--name {
    display: none;
  }

  .sc-head,
  .sc-row > summary,
  .sc-row__summary {
    grid-template-columns: 1.75rem 2.5rem 2.5rem minmax(0, 1fr) 1.25rem;
  }

  .sc-wide {
    display: none;
  }
}

.sc-quarter {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.sc-quarter.is-ko {
  border-color: #f0e0b0;
  background: var(--bst-waiting-soft);
}

.sc-quarter__badge {
  display: flex;
  flex: 0 0 4.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
}

.sc-quarter.is-ko .sc-quarter__badge {
  background: #fff;
  color: var(--bst-waiting);
}

.sc-quarter__kicker {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.sc-quarter__label {
  font-size: 1.5rem;
  font-weight: 800;
}

.sc-quarter__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  justify-content: center;
}

.sc-quarter__title {
  font-size: 0.875rem;
}

.sc-quarter__text {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.sc-quarter__bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #e9ebf0;
  overflow: hidden;
}

.sc-quarter__bar > span {
  display: block;
  height: 100%;
  background: var(--bst-primary);
}

.sc-quarter.is-ko .sc-quarter__bar > span {
  background: var(--bst-waiting);
}

.sc-table {
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  background: var(--bst-surface);
  overflow: hidden;
}

.sc-head,
.sc-row > summary,
.sc-row__summary {
  display: grid;
  grid-template-columns: 3rem 5rem minmax(0, 1fr) 4.5rem 6rem 2rem;
  align-items: center;
  min-height: 40px;
  padding: 0 0.75rem;
  list-style: none;
}

.sc-row > summary::-webkit-details-marker {
  display: none;
}

.sc-head {
  min-height: 34px;
  border-bottom: 1px solid var(--bst-border);
  background: var(--bst-table-head, #f4f5f9);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.sc-row {
  border-bottom: 1px solid var(--bst-row-line);
}

.sc-row > summary {
  cursor: pointer;
}

.sc-row.is-last {
  background: #f7f8fb;
  box-shadow: inset 3px 0 0 var(--bst-primary);
}

.sc-row.has-warning {
  box-shadow: inset 3px 0 0 var(--bst-waiting);
}

.sc-row.is-pending {
  opacity: 0.6;
}

/* The line between one period and the next: it closes the period above with its points. */
.sc-sep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 32px;
  padding: 0 0.75rem;
  border-top: 1px solid var(--bst-primary);
  border-bottom: 1px solid var(--bst-primary);
  background: var(--bst-primary-soft, #e8ebf8);
  color: var(--bst-primary-on-surface, var(--bst-primary));
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sc-sep b {
  font-weight: 800;
}

.sc-sep span {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.sc-c--n,
.sc-c--prog {
  font-variant-numeric: tabular-nums;
}

.sc-c--prog {
  text-align: right;
  padding-right: 0.5rem;
  font-weight: 700;
}

.sc-c--pts {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sc-c--n {
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.sc-c--name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
}

.sc-c--name.is-unknown {
  color: var(--bst-waiting);
}

.sc-c--warn {
  color: var(--bst-waiting);
}

.sc-jersey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 26px;
  padding: 0 0.375rem;
  border-radius: 6px;
  background: var(--bst-table-head, #eef0f4);
  font-variant-numeric: tabular-nums;
}

.sc-pts--1 {
  color: var(--bst-muted);
}

.sc-pts--3 {
  color: var(--bst-accent-on-surface);
}

.sc-narrow {
  display: inline;
}

.sc-wide {
  display: none;
}

.sc-empty {
  margin: 0;
  padding: 1rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.sc-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--bst-table-head, #f4f5f9);
}

.sc-edit__field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.sc-edit__field input {
  width: 4.5rem;
  height: 36px;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

.sc-edit__points {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.sc-edit__points legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.sc-edit__points label {
  cursor: pointer;
}

.sc-edit__points input {
  position: absolute;
  opacity: 0;
}

.sc-edit__points span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  font-weight: 700;
}

.sc-edit__points input:checked + span {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
}

.sc-edit__delete {
  margin-left: auto;
  color: var(--bst-danger);
}

.sc-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid #f0e0b0;
  border-radius: var(--bst-radius);
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
  font-size: 0.75rem;
}

.sc-doc__empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.875rem;
  border: 1px dashed var(--bst-border);
  border-radius: var(--bst-radius-lg);
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.sc-doc__empty p {
  margin: 0;
}

/* The phone keys */
.sc-keypad {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bst-border);
  background: var(--bst-surface);
}

.sc-keypad__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bst-muted);
}

.sc-keypad__undo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: 999px;
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.6875rem;
  font-weight: 700;
}

.sc-keypad__keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
}

.sc-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--bst-border);
  border-radius: 10px;
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}

.sc-key.is-held {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
}

.sc-key--other {
  padding: 0;
  background: var(--bst-table-head, #f4f5f9);
}

.sc-key__input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

.sc-pick {
  position: fixed;
  z-index: 50;
  padding: 0.5rem;
  border-radius: 14px;
  background: #1b1f2a;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  touch-action: none;
}

.sc-pick__row {
  display: flex;
  gap: 0.375rem;
}

.sc-pick__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.sc-pick__opt b {
  font-size: 1.5rem;
}

.sc-pick__opt small {
  font-size: 0.625rem;
  opacity: 0.8;
}

.sc-pick__opt.is-over {
  background: var(--bst-primary);
}

.sc-pick__hint {
  margin-top: 0.375rem;
  text-align: center;
  font-size: 0.6875rem;
  opacity: 0.85;
}

@media (min-width: 1024px) {
  .sc-wide-only {
    display: block;
  }

  .sc-narrow-bar,
  .sc-keypad {
    display: none;
  }

  .sc-wide {
    display: inline;
  }

  .sc-narrow {
    display: none;
  }

  .sc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 1rem;
    align-items: start;
  }

  .sc-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }

  [data-board] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .sc-doc {
    position: sticky;
    top: 0.5rem;
    height: calc(100vh - 8rem);
    min-height: 26rem;
  }

  .sc-doc__viewer {
    height: 100%;
  }

  .sc-entry {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bst-border);
    border-radius: var(--bst-radius-lg);
    background: var(--bst-surface);
  }

  .sc-entry__team {
    display: flex;
    flex-direction: column;
    min-width: 5rem;
    font-size: 0.75rem;
    color: var(--bst-muted);
  }

  .sc-entry__team b {
    color: var(--bst-text);
    font-size: 0.875rem;
  }

  .sc-entry__field {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
  }

  .sc-entry__input {
    width: 100%;
    max-width: 14rem;
    height: 46px;
    padding: 0 0.75rem;
    border: 1px solid var(--bst-primary);
    border-radius: var(--bst-radius);
    font-size: 1.375rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .sc-entry__input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--bst-primary-ring, rgba(40, 57, 144, 0.25));
  }

  .sc-entry__hint {
    font-size: 0.6875rem;
    color: var(--bst-muted);
  }
}

/* Phone overrides of the basket entry. They come last on purpose: the base rules above would win otherwise. */
@media (max-width: 1023.98px) {
  .sc-entry,
  .sc-warning,
  .sc-quarter {
    display: none;
  }

  .sc-head,
  .sc-row > summary,
  .sc-row__summary {
    grid-template-columns: 1.5rem 3.25rem 2.5rem minmax(0, 1fr) 1.25rem;
    padding: 0 0.5rem;
  }

  .sc-c--name {
    display: none;
  }

  .sc-wide {
    display: none;
  }

  .sc-table {
    border-radius: var(--bst-radius);
  }

  .sc-doc .dv-bar {
    bottom: 0.375rem;
    padding: 0.125rem;
  }

  .sc-doc .dv-btn {
    width: 30px;
    height: 30px;
  }

  .sc-doc .dv-zoom {
    display: none;
  }

  .sc-doc .dv-tabs {
    padding: 0.25rem 0.25rem 0;
  }

  .sc-doc .dv-tab {
    min-height: 28px;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
  }

  .sc-edit {
    padding: 0.5rem;
  }

  .sc-edit__field input {
    width: 3.5rem;
  }
}

/* --- Basket entry: resizable sheet, list that scrolls in its frame, box for another number --- */
.sc-layout {
  grid-template-columns: minmax(0, 1fr) 0.75rem var(--sc-doc-w, 11.875rem);
  gap: 0;
}

.sc-splitter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sc-splitter > span {
  display: block;
  width: 4px;
  height: 2.25rem;
  border-radius: 2px;
  background: var(--bst-border);
  transition: background 0.12s ease, height 0.12s ease;
}

.sc-splitter:hover > span,
.sc-splitter:focus-visible > span,
.sc-splitter.is-dragging > span {
  height: 3.5rem;
  background: var(--bst-primary);
}

.sc-splitter:focus-visible {
  outline: none;
}

body.sc-resizing {
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

.sc-other {
  border-top: 1px dashed var(--bst-border);
  padding-top: 0.375rem;
}

.sc-other > summary {
  padding: 0.375rem 0.25rem;
  color: var(--bst-primary-on-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.sc-other > summary::-webkit-details-marker {
  display: none;
}

.sc-other__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.5rem;
}

.sc-other__input {
  width: 5rem;
  height: 44px;
  border: 1px solid var(--bst-primary);
  border-radius: 10px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
}

.sc-other__hint {
  flex-basis: 100%;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

@media (min-width: 1024px) {
  /* The work area has a height of its own (the script sets it to the rest of the screen), so
     the field, the period card and the headings stay in view and only the rows scroll. */
  .sc-layout {
    grid-template-columns: minmax(0, 1fr) 1rem var(--sc-doc-w, 26rem);
    align-items: stretch;
    height: calc(100vh - 16rem);
    min-height: 26rem;
  }

  .sc-main {
    min-height: 0;
  }

  .sc-main [data-board] {
    flex: 1 1 auto;
    min-height: 0;
  }

  .sc-table {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .sc-rows {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .sc-doc {
    position: static;
    height: auto;
    min-height: 0;
  }

  .sc-doc__viewer {
    height: 100%;
  }

  .sc-splitter > span {
    height: 3rem;
  }
}

/* --- Substitution entry (S5 phase 3): five slots, each a relay of chips --- */
.mn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mn-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 34px;
  padding: 0 0.875rem;
  border: 1px solid var(--bst-border);
  border-radius: 999px;
  background: var(--bst-surface);
  color: var(--bst-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}

.mn-tab.is-current {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
  font-weight: 700;
}

.mn-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0 0.125rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.mn-legend b {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.mn-wide {
  display: none;
}

.mn-slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mn-slot {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.mn-slot.has-warning {
  border-color: #f0c040;
}

.mn-slot__title {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--bst-muted);
}

.mn-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.mn-chips__empty {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.mn-arrow {
  flex: 0 0 auto;
  color: var(--bst-border);
}

.mn-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: 9px;
  background: var(--bst-surface);
  color: var(--bst-text);
  line-height: 1.1;
}

.mn-chip.is-starter {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
}

.mn-chip.has-warning {
  border-color: var(--bst-waiting);
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
}

.mn-chip__time {
  font-size: 0.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bst-muted);
}

.mn-chip.has-warning .mn-chip__time {
  color: var(--bst-waiting);
}

.mn-chip__jersey {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.mn-chip__warn {
  position: absolute;
  top: -5px;
  left: -5px;
  padding: 1px;
  border-radius: 50%;
  background: var(--bst-waiting-soft);
}

.mn-slot__input {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mn-input {
  width: 7rem;
  height: 38px;
  padding: 0 0.625rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.mn-input:focus {
  outline: none;
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring, rgba(40, 57, 144, 0.25));
}

.mn-plus {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bst-border);
  border-radius: 50%;
  background: var(--bst-surface);
  color: var(--bst-primary-on-surface);
  cursor: pointer;
}

/* The "x" of a chip: takes away that entry only. A small disc on the corner; the hit area is wider than it looks. */
.mn-chip__x {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--bst-border);
  border-radius: 50%;
  background: var(--bst-surface);
  color: var(--bst-muted);
  cursor: pointer;
}

.mn-chip__x::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.mn-chip__x:hover:not(:disabled),
.mn-chip__x:focus-visible {
  border-color: var(--bst-danger, #c0392b);
  background: var(--bst-danger, #c0392b);
  color: #fff;
}

.mn-chip__x:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mn-echo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-table-head, #f4f5f9);
  font-size: 0.8125rem;
}

.mn-echo[hidden] {
  display: none;
}

.mn-echo__typed {
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: var(--bst-surface);
  border: 1px solid var(--bst-border);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mn-echo__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.mn-echo__text b {
  color: var(--bst-text);
  font-size: 0.8125rem;
}

.mn-echo.is-bad {
  border-color: #f0c040;
  background: var(--bst-waiting-soft);
}

.mn-hand {
  display: none;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--bst-radius);
  background: var(--bst-table-head, #f4f5f9);
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.mn-wide-only {
  display: none;
}

/* Phone: no document on screen, the rows take the whole width, the "+" replaces the box. */
@media (max-width: 1023.98px) {
  .mn.sc {
    height: auto;
    min-height: 0;
  }

  .mn .sc-layout {
    display: block;
    height: auto;
  }

  .mn-hand {
    display: flex;
  }

  .mn-slot {
    grid-template-columns: 1fr auto;
    padding: 0.5rem 0.625rem;
  }

  .mn-slot__title {
    grid-column: 1 / -1;
  }

  html.js .mn-input {
    display: none;
  }

  html.js .mn-plus {
    display: inline-flex;
  }

  .mn-chip {
    min-width: 2.5rem;
  }

  .mn-chip__x {
    width: 22px;
    height: 22px;
  }

  .mn-sheet-open {
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .mn-wide {
    display: inline;
  }

  .mn-wide-only {
    display: block;
  }

  .mn .sc-layout {
    align-items: stretch;
  }

  .mn-main {
    overflow-y: auto;
    padding-right: 0.25rem;
  }
}

/* The card that opens from the "+" of a slot on a phone */
.mn-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.mn-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.mn-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 92dvh;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  background: var(--bst-surface);
}

.mn-sheet__grip {
  align-self: center;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--bst-border);
}

.mn-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mn-sheet__head b {
  display: block;
  font-size: 1rem;
}

.mn-sheet__sub {
  display: block;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.mn-sheet__time {
  padding: 0.25rem 0.75rem;
  border-radius: 10px;
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mn-sheet__label {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--bst-muted);
}

.mn-sheet__minutes {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.mn-sheet__seconds {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.mn-chipbtn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--bst-border);
  border-radius: 10px;
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 1rem;
  font-weight: 600;
}

.mn-sheet__seconds .mn-chipbtn {
  flex: 1 1 0;
}

.mn-chipbtn.is-on {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
  font-weight: 800;
}

.mn-sheet__keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
}

.mn-key {
  min-height: 48px;
  border: 1px solid var(--bst-border);
  border-radius: 10px;
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 1.125rem;
  font-weight: 700;
}

.mn-key.is-on {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
}

.mn-key:disabled {
  border-color: #eceff3;
  background: #f2f4f7;
  color: #c4cad5;
}

.mn-sheet__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-waiting);
}

.mn-sheet__save {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--bst-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.mn-sheet__save:disabled {
  background: #e9ebf0;
  color: #a8afbd;
}

/* Length of the periods beyond the fourth (result entry) */
.re-durations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0.875rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--bst-border);
  border-radius: var(--bst-radius);
}

.re-durations__title {
  flex-basis: 100%;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bst-muted);
}

.re-dur {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.re-dur input {
  width: 3.5rem;
  height: 38px;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

.re-dur small {
  font-weight: 400;
  color: var(--bst-muted);
}

.re-durations__hint {
  flex-basis: 100%;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

/* ---- Phase 4: statistiche (box per athlete) -------------------------------------------------- */

.sx-notice {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bst-radius);
  background: var(--bst-primary-soft);
  color: var(--bst-text);
  font-size: 0.8125rem;
}

/* An import of the live statistics not saved yet: a bar above the cards with its two commands. */
.sx-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bst-primary);
  border-radius: var(--bst-radius);
  background: var(--bst-primary-soft);
  color: var(--bst-text);
  font-size: 0.8125rem;
}

.sx-draft p {
  flex: 1 1 18rem;
  margin: 0;
}

.sx-draft form {
  margin: 0;
}

/* The import of the live recording: the players, then the groups of statistics. */
.li-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.li-table th {
  text-align: left;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
}

.li-table td {
  padding: 0.375rem 0.5rem;
  border-top: 1px solid var(--bst-border, rgba(128, 128, 128, 0.25));
  vertical-align: middle;
}

.li-table select {
  width: 100%;
  min-width: 12rem;
}

.li-scroll {
  overflow-x: auto;
}

.li-section {
  margin-top: 1.25rem;
}

.li-tag {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--bst-primary-soft);
  font-size: 0.75rem;
}

.li-cats {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.li-cat {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.li-cat.is-off {
  opacity: 0.5;
}

.sx-commands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.sx-commands form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.sx-commands__fill {
  flex: 1 1 auto;
}

.sx-published {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-success, #1f7a4d);
}

.sx-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem 0.25rem 0.375rem;
  border: 1px solid var(--bst-border);
  border-radius: 999px;
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.sx-switch__track {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--bst-border);
}

.sx-switch__track span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.12s;
}

.sx-switch.is-on .sx-switch__track {
  background: var(--bst-primary);
}

.sx-switch.is-on .sx-switch__track span {
  transform: translateX(12px);
}

.sx-hint {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.sx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.sx-chips__empty {
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.sx-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5rem;
  max-width: 6.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: 9px;
  background: var(--bst-surface);
  color: var(--bst-text);
  text-decoration: none;
  line-height: 1.15;
}

.sx-chip b {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.sx-chip small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  color: var(--bst-muted);
}

.sx-chip.has-data::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bst-success, #1f7a4d);
}

.sx-chip.is-current {
  border-color: var(--bst-primary);
  background: var(--bst-primary);
  color: #fff;
}

.sx-chip.is-current small {
  color: rgba(255, 255, 255, 0.8);
}

.sx-card {
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.sx-card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--bst-border);
}

.sx-card__jersey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 10px;
  background: var(--bst-primary);
  color: #fff;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

.sx-card__who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.sx-card__who small {
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.sx-starter {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.sx-rows {
  padding: 0.25rem 0.75rem;
}

.sx-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--bst-row-line);
}

.sx-row:last-child {
  border-bottom: 0;
}

.sx-row__title {
  font-size: 0.8125rem;
  font-weight: 700;
}

.sx-row__boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The caption sits above the box on every screen: sign and value are looked at together. */
.sx-box {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.sx-box input {
  width: 4rem;
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.sx-box input:focus {
  outline: none;
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring, rgba(40, 57, 144, 0.25));
}

.sx-row__weight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sx-row__weight small {
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.sx-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--bst-border);
}

.sx-clear {
  margin-left: auto;
}

.sx-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-table-head, #f4f5f9);
}

.sx-preview__item {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sx-preview__item small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--bst-muted);
}

.sx-preview__item b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.sx-preview__item--off span {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.sx-preview__count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

/* Phone: the athletes scroll sideways, the boxes keep their order, the check strip stays at the bottom. */
@media (max-width: 1023.98px) {
  .sx-chips {
    flex-wrap: nowrap;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sx-chip {
    flex: 0 0 auto;
  }

  /* One line per row: the title, the boxes and the weight side by side, so the card fits the screen. */
  .sx-row {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.375rem;
    padding: 0.125rem 0;
  }

  .sx-box {
    gap: 0;
    font-size: 0.5625rem;
    line-height: 1.15;
  }

  .sx-row__title {
    font-size: 0.75rem;
    line-height: 1.1;
  }

  .sx-row__boxes {
    gap: 0.25rem;
  }

  .sx-box input {
    width: 2.75rem;
    height: 26px;
    padding: 0 0.25rem;
    font-size: 0.875rem;
  }

  .sx-row__weight {
    flex-direction: column;
    align-items: flex-end;
    min-width: 2.25rem;
    font-size: 0.75rem;
  }

  .sx-card__head {
    padding: 0.25rem 0.625rem;
  }

  .sx-rows {
    padding: 0.125rem 0.625rem;
  }

  .sx-card__actions {
    flex-wrap: nowrap;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
  }

  .sx-card__actions .st-btn {
    min-height: 34px;
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
    font-size: 0.8125rem;
  }

  .sx-card__actions .st-btn--primary {
    flex: 1 1 auto;
  }

  .sx-commands {
    gap: 0.375rem;
    margin-bottom: 0.375rem;
  }

  .sx-commands .st-btn--sm {
    min-height: 30px;
    padding: 0.1875rem 0.5rem;
  }

  .sx-clear {
    margin-left: 0;
  }

  .sx-preview {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    margin: 0;
    padding-top: 0.25rem;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .sx {
    padding-bottom: 3.25rem;
  }
}

/* Wide screens: the check strip stays at the foot of the column while the card scrolls. */
@media (min-width: 1024px) {
  .sx-preview {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -6px 10px -6px rgba(0, 0, 0, 0.15);
  }
}

/* ---- Step "Giocatori": the list of the players of the game ---------------------------------- */

.pl {
  max-width: 46rem;
}

.pl-intro {
  margin: 0.75rem 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.pl-intro p {
  margin: 0 0 0.375rem;
}

.pl-intro b {
  color: var(--bst-text);
}

.pl-intro__note {
  color: var(--bst-waiting, #8a5a00);
}

.pl-table {
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.pl-head,
.pl-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem;
}

.pl-head {
  min-height: 34px;
  border-bottom: 1px solid var(--bst-border);
  background: var(--bst-table-head, #f4f5f9);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.pl-row {
  min-height: 48px;
  border-bottom: 1px solid var(--bst-row-line);
}

.pl-row:last-child {
  border-bottom: 0;
}

.pl-row.has-warning {
  box-shadow: inset 3px 0 0 var(--bst-waiting);
}

.pl-empty {
  margin: 0;
  padding: 0.875rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.pl-jersey {
  width: 4rem;
  height: 34px;
  padding: 0 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pl-jersey:focus {
  outline: none;
  border-color: var(--bst-primary);
  box-shadow: 0 0 0 3px var(--bst-primary-ring, rgba(40, 57, 144, 0.25));
}

.pl-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.pl-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.pl-name small {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.pl-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--bst-border);
  border-radius: 50%;
  background: var(--bst-surface);
  color: var(--bst-muted);
  cursor: pointer;
}

.pl-x:hover:not(:disabled),
.pl-x:focus-visible {
  border-color: var(--bst-danger);
  background: var(--bst-danger);
  color: #fff;
}

.pl-add {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.875rem 0;
}

.pl-add label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.pl-add__row {
  display: flex;
  gap: 0.5rem;
}

.pl-add select {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.875rem;
}

.pl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pl-actions__next {
  margin-left: auto;
}

@media (max-width: 1023.98px) {
  .pl-actions .st-btn--primary {
    flex: 1 1 100%;
  }

  .pl-actions__next {
    margin-left: 0;
  }
}

.st-notice--warn {
  background: var(--bst-waiting-soft);
  color: var(--bst-waiting);
  border: 1px solid var(--bst-waiting);
}

/* Impostazioni (K5): device push card and per-tenant topics. */
.set-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

/* --- Profilo: who I am in this club ----------------------------------------- */

.pf-me,
.pf-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.pf-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-size: 1rem;
  font-weight: 800;
}

.pf-avatar--player {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--bst-primary-soft);
  color: var(--bst-primary-on-surface);
  font-size: 0.875rem;
}

.pf-me__text,
.pf-player__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}

.pf-me__name,
.pf-player__name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-me__name {
  font-size: 1rem;
}

.pf-me__meta,
.pf-player__meta {
  font-size: 0.75rem;
  color: var(--bst-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-players {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pf-empty {
  margin: 0 0 0.375rem;
  font-weight: 700;
}

.pf-links {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.pf-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--bst-tap-target);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--bst-row-line);
  color: var(--bst-text);
  font-weight: 600;
  text-decoration: none;
  align-items: center;
}

.pf-link:last-child {
  border-bottom: 0;
}

.pf-link small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bst-muted);
}

.pf-link--danger {
  color: var(--bst-danger-on-surface);
}

.pf-link:hover,
.pf-link:focus-visible {
  background: var(--bst-primary-soft);
}

/* --- Cambia password, inside the frame ---------------------------------------- */

.pw-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pw-back {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bst-radius);
  color: var(--bst-text);
  text-decoration: none;
}

.pw-back:hover,
.pw-back:focus-visible {
  background: var(--bst-primary-soft);
}

.pw-form {
  gap: 0.875rem;
}

.set-device__status {
  margin: 0;
  font-weight: 700;
}

.set-device[data-state="active"] .set-device__status {
  color: var(--bst-success-on-surface);
}

.set-device[data-state="denied"] .set-device__status,
.set-device[data-state="error"] .set-device__status {
  color: var(--bst-danger-on-surface);
}

.set-device__hint,
.set-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.set-topics {
  gap: 0.75rem;
}

.set-topic {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.set-topic__check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
}

.set-topic__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.set-topic__label {
  font-weight: 700;
}

.set-topic__description {
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

/* =========================================================================
   Utenti e richieste (staff): compact rows that open on their own commands,
   one at a time. A phone shows name and email stacked; from 860px the
   columns of a table.
   ========================================================================= */

.us {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.us-block {
  gap: 0;
}

.us-block__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.us-block__head::-webkit-details-marker {
  display: none;
}

.us-block__head--static {
  cursor: default;
  border-bottom-color: var(--bst-border);
}

details[open] > .us-block__head {
  border-bottom-color: var(--bst-border);
}

.us-block__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.us-block__none {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.us-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--bst-accent-on-surface);
  color: var(--bst-surface);
  font-size: 0.6875rem;
  font-weight: 800;
}

.us-block__head .us-chevron {
  margin-left: auto;
}

details[open] > .us-block__head .us-chevron {
  transform: rotate(180deg);
}

.us-clear {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-primary-on-surface);
}

.us-empty {
  margin: 0;
  padding: 0.875rem;
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.us-head {
  display: none;
}

.us-item {
  border-bottom: 1px solid var(--bst-row-line);
}

.us-item:last-child {
  border-bottom: 0;
}

.us-item.is-open {
  background: var(--bst-primary-soft);
}

.us-item.is-off .us-row {
  opacity: 0.6;
}

.us-row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 48px;
  padding: 0.25rem 0.875rem;
  color: inherit;
  text-decoration: none;
}

.us-row:hover,
.us-row:focus-visible {
  background: var(--bst-primary-soft);
}

.us-stack {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  flex: 1 1 auto;
  min-width: 0;
}

.us-primary,
.us-secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.us-primary {
  font-weight: 700;
}

.us-secondary {
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.us-cell {
  display: none;
}

.us-trail {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.us-chevron {
  flex: 0 0 auto;
  color: var(--bst-muted);
  transition: transform 0.15s ease;
}

.us-item.is-open .us-chevron {
  transform: rotate(180deg);
}

.us-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bst-border);
  font-size: 0.6875rem;
  font-weight: 700;
}

.us-status--ok {
  color: var(--bst-success-on-surface);
  border-color: var(--bst-success);
  background: var(--bst-success-soft);
}

.us-status--off,
.us-status--warn {
  color: var(--bst-waiting-on-surface);
  border-color: var(--bst-waiting);
  background: var(--bst-waiting-soft);
}

/* Locked by too many failed sign-in attempts: not the same as suspended, so it has its own colour. */
.us-status--lock {
  color: var(--bst-danger);
  border-color: var(--bst-danger);
  background: var(--bst-danger-soft);
}

.us-trail .us-status--ok {
  color: var(--bst-muted);
  border-color: var(--bst-border);
  background: var(--bst-table-head);
}

/* The open row: its commands, compact and in lines. */
.us-detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.25rem 0.875rem 0.875rem;
}

.us-intro {
  margin: 0;
  font-size: 0.8125rem;
  font-style: italic;
}

.us-intro--none {
  color: var(--bst-muted);
  font-style: normal;
}

.us-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.us-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.us-group__title,
.us-list__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.us-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.us-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.us-spacer {
  flex: 1 1 0;
}

.us-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-muted);
}

.us-input {
  max-width: 16rem;
  min-height: 2rem;
  padding-block: 0.25rem;
  font-size: 0.8125rem;
}

.us-input--short {
  max-width: 10rem;
}

.us-danger {
  color: var(--bst-danger-on-surface);
  border-color: var(--bst-danger);
}

.us-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.us-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.us-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.us-pick__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
}

.us-pick__text small {
  display: block;
  color: var(--bst-muted);
}

.us-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.us-analyze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--bst-row-line);
}

.us-ai {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border-radius: 4px;
  background: var(--bst-primary-soft);
  color: var(--bst-primary);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.us-proposal {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-left: 3px solid var(--bst-primary);
  border-radius: 6px;
}

.us-proposal__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.us-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.us-check {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.us-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: 999px;
  background: var(--bst-surface);
  font-size: 0.75rem;
}

.us-chip__x {
  border: 0;
  padding: 0 0.125rem;
  background: none;
  color: var(--bst-danger-on-surface);
  cursor: pointer;
}

.us-link {
  display: block;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
  font-weight: 400;
}

/* Search, filters and sort of the users, in the head of the page. */
.us-filters {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}

.us-filters .st-search {
  flex: 1 1 11rem;
  min-width: 9rem;
}

.us-filters .us-filter {
  flex: 0 1 auto;
  width: auto;
  max-width: 11rem;
}

.us-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.us-sort:hover,
.us-sort:focus-visible {
  color: var(--bst-text);
}

/* The panel of a user is denser than the one of a request: teams and players side by side from 860px. */
.us-detail--user {
  gap: 0.625rem 1.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.75rem;
}

.us-detail--user .us-group {
  gap: 0.375rem;
}

.us-group {
  position: relative;
}

.us-group__head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* The explanation of an area: an "i" icon that opens a small popup, closed by a click elsewhere or Escape. */
.us-info {
  position: static;
  display: inline-flex;
}

.us-info > summary {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  color: var(--bst-muted);
  list-style: none;
  cursor: pointer;
}

.us-info > summary::-webkit-details-marker {
  display: none;
}

.us-info > summary:hover,
.us-info > summary:focus-visible,
.us-info[open] > summary {
  color: var(--bst-primary-on-surface);
  background: var(--bst-primary-soft);
}

.us-info__pop {
  position: absolute;
  z-index: 20;
  top: 1.625rem;
  left: 0;
  right: 0;
  max-width: 24rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  color: var(--bst-text);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

@media (min-width: 860px) {
  .us-head {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    min-height: 34px;
    padding: 0 0.875rem;
    background: var(--bst-table-head);
    border-bottom: 1px solid var(--bst-border);
  }

  .us-th {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--bst-muted);
  }

  .us-stack,
  .us-trail {
    display: none;
  }

  .us-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
  }

  .us-strong {
    font-weight: 700;
  }

  .us-col--name {
    flex: 1 1 0;
    min-width: 0;
  }

  .us-col--email {
    flex: 1.4 1 0;
    min-width: 0;
  }

  .us-col--role {
    flex: 0 0 9rem;
  }

  .us-col--status,
  .us-col--date {
    flex: 0 0 9rem;
  }

  /* Wide enough for "Attivo" next to "Link scaduto" without cutting either. */
  .us-col--status {
    flex-basis: 12rem;
  }

  .us-col--login {
    flex: 0 0 8.5rem;
  }

  .us-col--chev {
    flex: 0 0 14px;
  }

  .us-detail--user {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .us-detail--user > .us-detail__actions,
  .us-detail--user > .us-group--wide {
    grid-column: 1 / -1;
  }
}

/* =========================================================================
   Calendario (U13): month or week grid of the team, games and practices together.
   Kind is colour, never shape: games take the accent, practices the brand.
   A phone shows dots in the month and an agenda in place of the week grid.
   ========================================================================= */

.ga-feed--calendar {
  --cal-game: var(--bst-accent-on-surface);
  --cal-game-soft: var(--bst-accent-soft);
  --cal-practice: var(--bst-primary);
  --cal-practice-soft: var(--bst-primary-soft);
  --cal-hour: 3.25rem;
  width: min(100%, 1180px);
}

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.875rem;
}

.cal-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cal-nav__btn,
.cal-nav__today {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: var(--bst-text);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.cal-nav__btn:hover,
.cal-nav__today:hover,
.cal-nav__btn:focus-visible,
.cal-nav__today:focus-visible {
  background: var(--bst-primary-soft);
}

.cal-switch {
  display: inline-flex;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  overflow: hidden;
  background: var(--bst-surface);
}

.cal-switch__opt {
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  color: var(--bst-text);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.cal-switch__opt.is-active {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.cal-legend {
  display: flex;
  gap: 0.875rem;
  width: 100%;
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.cal-legend__item::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.3125rem;
  border-radius: 50%;
  vertical-align: baseline;
}

.cal-legend__item--game::before {
  background: var(--cal-game);
}

.cal-legend__item--practice::before {
  background: var(--cal-practice);
}

.cal-layout {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cal-main {
  min-width: 0;
}

/* ---- Month ---- */

.cal-month {
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  overflow: hidden;
  background: var(--bst-surface);
}

.cal-weekdays,
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekdays {
  border-bottom: 1px solid var(--bst-border);
  background: var(--bst-table-head);
}

.cal-weekday {
  padding: 0.375rem 0;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: 3.75rem;
  padding: 0.25rem 0.125rem;
  border-right: 1px solid var(--bst-row-line);
  border-bottom: 1px solid var(--bst-row-line);
  min-width: 0;
}

.cal-day:nth-child(7n) {
  border-right: 0;
}

.cal-day.is-outside {
  background: var(--bst-table-head);
}

.cal-day.is-outside .cal-day__number {
  color: var(--bst-muted);
  opacity: 0.6;
}

.cal-day.is-chosen {
  background: var(--bst-primary-soft);
}

.cal-day__number {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  color: var(--bst-text);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.cal-day.is-today .cal-day__number {
  background: var(--bst-primary);
  color: var(--bst-on-primary);
}

.cal-day__events {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1875rem;
  min-width: 0;
  width: 100%;
}

/* A chip is a dot on a phone and a line of text from 860px. */
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  color: var(--bst-text);
  text-decoration: none;
}

.cal-chip__dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.cal-chip--game .cal-chip__dot {
  background: var(--cal-game);
}

.cal-chip--practice .cal-chip__dot {
  background: var(--cal-practice);
}

.cal-chip__text,
.cal-more {
  display: none;
}

.cal-chip.is-cancelled,
.cal-block.is-cancelled,
.cal-row.is-cancelled {
  opacity: 0.5;
}

.cal-chip.is-cancelled .cal-chip__text,
.cal-block.is-cancelled .cal-block__title,
.cal-row.is-cancelled .cal-row__title {
  text-decoration: line-through;
}

/* ---- Agenda: the day of the month on a phone, the seven days of the week on a phone ---- */

.cal-agenda {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.cal-agenda__day {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cal-agenda__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.cal-agenda__day.is-today .cal-agenda__title {
  color: var(--bst-primary-on-surface);
}

.cal-agenda__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.cal-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--bst-tap-target);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-left-width: 4px;
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  color: inherit;
  text-decoration: none;
}

.cal-row--game {
  border-left-color: var(--cal-game);
}

.cal-row--practice {
  border-left-color: var(--cal-practice);
}

.cal-row.is-selected {
  background: var(--bst-primary-soft);
}

.cal-row__time {
  flex: 0 0 2.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.cal-row__title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-row__meta {
  font-size: 0.75rem;
  color: var(--bst-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-row__score {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--bst-primary-on-surface);
}

/* The week grid is for wide screens: a phone has the agenda above instead. */
.cal-week {
  display: none;
}

/* ---- The open event ---- */

.cal-panel {
  gap: 0.5rem;
}

.cal-panel__head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.cal-panel__close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bst-radius);
  color: var(--bst-muted);
}

.cal-panel__close:hover,
.cal-panel__close:focus-visible {
  background: var(--bst-primary-soft);
  color: var(--bst-text);
}

.cal-panel__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
}

.cal-panel__when {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: capitalize;
}

.cal-panel__line {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

/* The address of the game: to read, to copy, to hand to the navigator. */
.cal-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-table-head);
}

.cal-address__text {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  user-select: all;
}

.cal-address__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cal-address__status {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-success-on-surface);
}

.cal-panel__score {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bst-primary-on-surface);
}

.cal-panel__links,
.cal-panel__answers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ---- The subscription feed ---- */

.cal-feed {
  gap: 0;
  padding: 0;
}

.cal-feed__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--bst-tap-target);
  padding: 0.5rem 1rem;
  list-style: none;
  cursor: pointer;
}

.cal-feed__head::-webkit-details-marker {
  display: none;
}

.cal-feed__title {
  font-weight: 700;
}

.cal-feed__chevron {
  margin-left: auto;
  color: var(--bst-muted);
  transition: transform 0.15s ease;
}

.cal-feed[open] .cal-feed__chevron {
  transform: rotate(180deg);
}

.cal-feed__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0 1rem 1rem;
}

.cal-feed__text {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.cal-feed__label {
  font-size: 0.75rem;
  font-weight: 700;
}

.cal-feed__field {
  display: flex;
  gap: 0.5rem;
}

.cal-feed__field .form-control {
  min-width: 0;
  font-size: 0.8125rem;
}

.cal-feed__field .ga-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.cal-feed__status {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-success-on-surface);
}

.cal-feed__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

.cal-feed__options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.cal-feed__meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.cal-feed__regen {
  border-top: 1px solid var(--bst-row-line);
  padding-top: 0.5rem;
}

.cal-feed__regen-title {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bst-danger-on-surface);
}

.cal-feed__regen-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.cal-feed__steps {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.8125rem;
  color: var(--bst-muted);
}

@media (min-width: 860px) {
  .cal-day {
    align-items: stretch;
    min-height: 6.75rem;
    padding: 0.25rem 0.375rem;
  }

  .cal-day__number {
    align-self: flex-start;
  }

  .cal-day__events {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.1875rem;
  }

  .cal-chip {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .cal-chip--game {
    background: var(--cal-game-soft);
    border-left: 3px solid var(--cal-game);
  }

  .cal-chip--practice {
    background: var(--cal-practice-soft);
    border-left: 3px solid var(--cal-practice);
  }

  .cal-chip.is-selected {
    outline: 2px solid var(--bst-primary);
  }

  .cal-chip__dot {
    display: none;
  }

  .cal-chip__text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cal-more {
    display: block;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--bst-primary-on-surface);
  }

  /* The agendas are the phone's: with the grids in sight they say nothing new. */
  .cal-agenda {
    display: none;
  }

  .cal-layout.has-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
    column-gap: 1rem;
  }

  .cal-panel {
    position: sticky;
    top: 6.5rem;
  }

  /* ---- Week: hour axis ---- */

  .cal-week {
    display: block;
    border: 1px solid var(--bst-border);
    border-radius: var(--bst-radius-lg);
    overflow: hidden;
    background: var(--bst-surface);
  }

  .cal-week__head,
  .cal-week__untimed,
  .cal-week__body {
    display: grid;
    grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr));
  }

  .cal-week__head {
    border-bottom: 1px solid var(--bst-border);
    background: var(--bst-table-head);
  }

  .cal-week__corner {
    padding: 0.25rem;
    font-size: 0.625rem;
    color: var(--bst-muted);
  }

  .cal-week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem 0;
    color: var(--bst-text);
    text-decoration: none;
  }

  .cal-week__weekday {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bst-muted);
  }

  .cal-week__number {
    display: grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .cal-week__day.is-today .cal-week__number {
    background: var(--bst-primary);
    color: var(--bst-on-primary);
  }

  .cal-week__untimed {
    border-bottom: 1px solid var(--bst-border);
  }

  .cal-week__untimed-cell {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.25rem;
    border-left: 1px solid var(--bst-row-line);
  }

  .cal-week__axis {
    display: flex;
    flex-direction: column;
  }

  .cal-week__hour {
    height: var(--cal-hour);
    padding: 0.125rem 0.375rem 0 0;
    text-align: right;
    font-size: 0.625rem;
    color: var(--bst-muted);
  }

  .cal-week__col {
    position: relative;
    height: calc(var(--cal-hours) * var(--cal-hour));
    border-left: 1px solid var(--bst-row-line);
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--cal-hour) - 1px),
      var(--bst-row-line) calc(var(--cal-hour) - 1px),
      var(--bst-row-line) var(--cal-hour));
  }

  .cal-week__col.is-today {
    background-color: var(--bst-primary-soft);
  }

  .cal-block {
    position: absolute;
    top: calc(var(--top) * var(--cal-hour));
    height: calc(var(--span) * var(--cal-hour) - 2px);
    left: calc(var(--lane) / var(--lanes) * 100% + 2px);
    width: calc(100% / var(--lanes) - 4px);
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    padding: 0.1875rem 0.375rem;
    border-radius: 4px;
    border-left: 3px solid transparent;
    overflow: hidden;
    color: var(--bst-text);
    font-size: 0.6875rem;
    text-decoration: none;
  }

  .cal-block--game {
    background: var(--cal-game-soft);
    border-left-color: var(--cal-game);
  }

  .cal-block--practice {
    background: var(--cal-practice-soft);
    border-left-color: var(--cal-practice);
  }

  .cal-block.is-selected {
    outline: 2px solid var(--bst-primary);
  }

  .cal-block__time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .cal-block__title {
    font-weight: 700;
  }

  .cal-block__place {
    color: var(--bst-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===== Cookie notice and privacy page (USECASES §17C) ===== */
.cookie-notice {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.875rem 1rem;
  border: 1px solid var(--bst-border);
  border-radius: 0.75rem;
  background: var(--bst-surface);
  color: var(--bst-text);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  font-size: 0.875rem;
  line-height: 1.45;
}

.cookie-notice__text {
  flex: 1 1 20rem;
  margin: 0;
}

.cookie-notice__text a {
  color: var(--bst-primary-on-surface);
  font-weight: 600;
  white-space: nowrap;
}

.cookie-notice__accept {
  flex: 0 0 auto;
  background: var(--bst-primary);
  color: var(--bst-on-primary);
  font-weight: 600;
}

.cookie-notice__accept:hover,
.cookie-notice__accept:focus-visible {
  background: var(--bst-primary-hover);
  color: var(--bst-on-primary);
}

@media (max-width: 575.98px) {
  .cookie-notice__accept {
    width: 100%;
  }
}

.privacy-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1rem 6rem;
  color: var(--bst-text);
  line-height: 1.6;
}

.privacy-page__kicker {
  margin: 0;
  color: var(--bst-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.privacy-page h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: 1.75rem;
}

.privacy-page h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.125rem;
}

.privacy-page__lead {
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--bst-primary);
  border-radius: 0.375rem;
  background: var(--bst-primary-soft);
}

.privacy-page__table {
  overflow-x: auto;
  margin: 0.75rem 0;
}

.privacy-page__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.privacy-page__table th,
.privacy-page__table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--bst-row-line);
  text-align: left;
  vertical-align: top;
}

.privacy-page__table code {
  white-space: nowrap;
}

.privacy-page__back {
  margin-top: 2.5rem;
}

@media (max-width: 575.98px) {
  /* Each cookie becomes a small card: three columns do not fit a phone. */
  .privacy-page__table thead {
    display: none;
  }

  .privacy-page__table table,
  .privacy-page__table tbody,
  .privacy-page__table tr,
  .privacy-page__table td {
    display: block;
    width: 100%;
  }

  .privacy-page__table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bst-row-line);
  }

  .privacy-page__table td {
    padding: 0.125rem 0;
    border-bottom: 0;
  }

  .privacy-page__table td::before {
    content: attr(data-label) ": ";
    color: var(--bst-muted);
    font-weight: 600;
  }

  .privacy-page__table td:first-child::before {
    content: none;
  }

  .privacy-page__table code {
    white-space: normal;
    word-break: break-all;
  }
}

/* ===== K6 - Il tuo utilizzo ===== */
.use-back {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
}

.use-back a {
  color: var(--bst-muted);
  text-decoration: none;
}

.use-summary,
.use-held,
.use-choice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.use-headline {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}

.use-line {
  margin: 0;
  line-height: 1.5;
}

.use-line--muted {
  color: var(--bst-muted);
}

.use-list {
  margin: 0;
  padding-left: 1.125rem;
  color: var(--bst-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.use-optout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.use-gpc {
  margin: 0;
}

.use-privacy {
  margin-top: 1rem;
}

/* ===== G6 - Statistiche di utilizzo (SiteAdmin) ===== */
.usg {
  --usg-mark: var(--bst-primary);
  --usg-track: var(--bst-row-line);
  --usg-grid: var(--bst-row-line);
}

.usg-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.usg-filter__presets {
  display: flex;
  gap: 0.375rem;
}

.usg-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.usg-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--bst-border);
  overflow-x: auto;
}

.usg-tabs__tab {
  padding: 0.5rem 0.875rem;
  border-bottom: 2px solid transparent;
  color: var(--bst-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.usg-tabs__tab[aria-current="page"] {
  border-bottom-color: var(--bst-primary);
  color: var(--bst-text);
}

.usg-scope {
  margin-bottom: 0.75rem;
  color: var(--bst-muted);
  font-size: 0.875rem;
}

.usg-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.usg-kpi {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bst-border);
  border-radius: 0.5rem;
  background: var(--bst-surface);
}

.usg-kpi__label {
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

.usg-kpi__value {
  color: var(--bst-text);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.usg-kpi__note {
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.usg-panel {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--bst-border);
  border-radius: 0.5rem;
  background: var(--bst-surface);
}

.usg-panel__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.usg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0 1rem;
}

.usg-cc {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  grid-template-rows: 11rem auto;
  /* Room above the plot for the value label of the highest column. */
  margin: 1.5rem 0 0.5rem;
  font-size: 0.75rem;
}

.usg-cc__y {
  position: relative;
  grid-row: 1;
  grid-column: 1;
}

.usg-cc__ytick {
  position: absolute;
  right: 0.5rem;
  transform: translateY(50%);
  color: var(--bst-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.usg-cc__plot {
  position: relative;
  grid-row: 1;
  grid-column: 2;
}

.usg-cc__grid {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--usg-grid);
}

.usg-cc__cols {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
}

.usg-cc__slot {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

.usg-cc__bar {
  position: relative;
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background: var(--usg-mark);
}

.usg-cc__slot:hover .usg-cc__bar {
  background: var(--bst-primary-hover);
}

.usg-cc__value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -0.25rem);
  color: var(--bst-text);
  font-weight: 600;
  white-space: nowrap;
}

.usg-cc__x {
  position: relative;
  grid-row: 2;
  grid-column: 2;
  height: 1.25rem;
}

.usg-cc__xtick {
  position: absolute;
  top: 0.25rem;
  transform: translateX(-50%);
  color: var(--bst-muted);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .usg-cc__xtick--minor {
    display: none;
  }
}

.usg-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.usg-bars__row {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr auto;
  grid-template-areas:
    "name track value"
    ". detail detail";
  align-items: center;
  gap: 0 0.5rem;
  font-size: 0.875rem;
}

.usg-bars__row--nested .usg-bars__name {
  padding-left: 1rem;
  color: var(--bst-muted);
}

.usg-bars__name {
  grid-area: name;
}

.usg-bars__track {
  grid-area: track;
  height: 0.625rem;
  border-radius: 0 4px 4px 0;
  background: var(--usg-track);
}

.usg-bars__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--usg-mark);
}

.usg-bars__row--nested .usg-bars__fill {
  opacity: 0.55;
}

.usg-bars__value {
  grid-area: value;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.usg-bars__detail {
  grid-area: detail;
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.usg-table {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.usg-pages__bar-col {
  width: 30%;
  min-width: 6rem;
  vertical-align: middle;
}

.usg-pages__bar-col .usg-bars__track {
  display: block;
}

.usg-pages code {
  color: var(--bst-text);
}

.usg-pages__row--zero td,
.usg-pages__row--zero code {
  color: var(--bst-muted);
}

.usg-users__sub {
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.usg-table-toggle summary {
  color: var(--bst-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}

.usg-empty,
.usg-note {
  margin: 0.25rem 0 1rem;
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

/* ===== PWA installation (SPECIFICATIONS §8.3) ===== */
.set-device__label {
  margin: 0;
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.set-device[data-state="installed"] .set-device__status,
.set-device[data-state="just-installed"] .set-device__status {
  color: var(--bst-success-on-surface);
}

.pwa-invite {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--bst-border);
  border-radius: 0.75rem;
  background: var(--bst-surface);
  color: var(--bst-text);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
}

.pwa-invite::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.pwa-invite__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.pwa-invite__text {
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.pwa-invite__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pwa-invite__note {
  margin: 0.75rem 0 0;
  color: var(--bst-muted);
  font-size: 0.8125rem;
}

/* ---- Staff "Risultati": the games still to complete, as cards ---------------------------------- */

.rs-empty {
  margin: 0;
}

.rs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No overflow:hidden on the card: the result popup opens out of it. */
.rs-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.rs-card.is-own {
  border-left: 3px solid var(--bst-primary-on-surface);
}

.rs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.625rem;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

.rs-card__when {
  font-weight: 700;
  color: var(--bst-text);
  text-transform: capitalize;
}

.rs-card__teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.rs-card__team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.rs-card__team--away {
  flex-direction: row-reverse;
  text-align: right;
}

.rs-card__team.is-mine .rs-card__name {
  color: var(--bst-primary-on-surface);
  font-weight: 800;
}

.rs-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-card__score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.rs-card__dash {
  color: var(--bst-muted);
}

.rs-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bst-border);
}

.rs-card__todo {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bst-muted);
}

/* ---- Staff "La mia società": the page of the club, with its sections ---------------------------- */

/* A section of a page that has its own title: lighter than the title of a page of its own. */
.st-page__title--section {
  font-size: 1.125rem;
}

.oc-data {
  margin-bottom: 1.5rem;
}

.oc-data__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
}

.oc-logo {
  align-items: center;
}

.oc-form .st-card__foot {
  padding-top: 0.75rem;
}

@media (min-width: 900px) {
  .oc-data__body {
    flex-direction: row;
    align-items: flex-start;
  }

  .oc-logo {
    flex: 0 0 18rem;
  }

  .oc-form {
    flex: 1 1 0;
    max-width: 32rem;
  }
}

/* ---- Game page: the detail of an athlete, opened by a click on its row -------------------------------------------- */

.pt-clickable {
  cursor: pointer;
}

.pt-clickable:hover,
.pt-clickable:focus-visible {
  background: var(--bst-primary-soft, rgb(0 0 0 / 4%));
  outline: none;
}

.pd-dialog {
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg, 12px);
  background: var(--bst-surface);
  color: var(--bst-text);
  box-shadow: 0 20px 50px rgb(15 18 28 / 30%);
  overflow: hidden;
}

.pd-dialog::backdrop {
  background: rgb(15 18 28 / 55%);
}

/* A column as tall as the window allows: the head, the key figures and the YBI totals keep their height and the list
   of the statistics takes whatever is left, scrolling inside it when it does not fit. */
.pd-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* The window has 1px of border on each side: the body must leave room for it, or it is cut at the bottom. */
  max-height: calc(100dvh - 2rem - 2px);
  padding: 1rem 1.125rem 1.25rem;
}

.pd-dialog__body > * {
  flex: 0 0 auto;
}

.pd-scroll {
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the scrollbar without moving the numbers under it. */
  scrollbar-gutter: stable;
}

.pd-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pd-photo {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bst-table-head, #f4f5f9);
}

.pd-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
}

.pd-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bst-muted);
  cursor: pointer;
}

.pd-close:hover,
.pd-close:focus-visible {
  background: var(--bst-table-head, #f4f5f9);
  outline: none;
}

.pd-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.pd-key__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
}

.pd-key__item dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.pd-key__item dd {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.pd-table th,
.pd-table td {
  padding: 0.3125rem 0.25rem;
  text-align: left;
  font-weight: 500;
}

.pd-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bst-surface);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bst-muted);
  border-bottom: 1px solid var(--bst-border);
}

.pd-table .pd-group th {
  padding-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bst-primary-on-surface);
}

.pd-table tbody tr + tr th[scope=row],
.pd-table tbody tr + tr td {
  border-top: 1px solid rgb(0 0 0 / 5%);
}

.pd-table .pd-group + tr th,
.pd-table .pd-group + tr td {
  border-top: 0;
}

.pd-num-col {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.pd-muted {
  color: var(--bst-muted);
}

.pd-ybi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding-top: 0.75rem;
  border-top: 2px solid var(--bst-border);
}

/* Each column is centred, title and figures alike, and the two are told apart by a thin rule between them. */
.pd-ybi__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  padding: 0 0.5rem;
  text-align: center;
}

.pd-ybi__group + .pd-ybi__group {
  border-left: 1px solid var(--bst-border);
}

.pd-ybi__title {
  flex: 0 0 100%;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bst-muted);
}

.pd-ybi__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.pd-ybi__label {
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

.pd-ybi__value {
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pd-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

/* ---- Game page: sortable columns of the box score ----------------------------------------------------------------- */

.pt-sortable {
  cursor: pointer;
  user-select: none;
}

.pt-sortable:hover,
.pt-sortable:focus-visible {
  color: var(--bst-primary-on-surface);
  outline: none;
}

/* The arrow takes no room of its own: it is drawn after the label and does not move the columns. */
.pt-sortable.is-sorted::after {
  content: "";
  display: inline-block;
  margin-left: 0.25em;
  border-left: 0.28em solid transparent;
  border-right: 0.28em solid transparent;
  vertical-align: middle;
}

.pt-sortable.is-sorted[aria-sort="descending"]::after {
  border-top: 0.38em solid currentColor;
}

.pt-sortable.is-sorted[aria-sort="ascending"]::after {
  border-bottom: 0.38em solid currentColor;
}

/* ============================================================================
   Squadra (U8) - roster of the team in context. The tabs, head and page frame are
   Campionato's (.cmp-*), the handle is the one of the entry pages (.sc-splitter,
   split-pane.js): only what is specific to the roster lives here.
   ========================================================================= */

.sq-head__meta {
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.sq-split {
  display: block;
}

.sq-splitter {
  display: none;
}

/* Narrow screens: the list, or the detail of the selected player - never both. */
@media (max-width: 1023.98px) {
  .sq-split.has-selection .sq-list,
  .sq-split:not(.has-selection) .sq-detail {
    display: none;
  }
}

.sq-list {
  min-width: 0;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  overflow: hidden;
  background: var(--bst-surface);
}

.sq-roster {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sq-roster > li + li {
  border-top: 1px solid var(--bst-row-line);
}

.sq-player {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 3.625rem;
  padding: 0 0.8125rem;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}

.sq-player:hover {
  background: var(--bst-page);
  color: inherit;
}

.sq-player.is-selected {
  border-left-color: var(--bst-primary);
  background: var(--bst-primary-soft);
}

.sq-player:focus-visible {
  outline: 2px solid var(--bst-primary);
  outline-offset: -2px;
}

.sq-player__avatar {
  flex: 0 0 auto;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bst-page);
  border: 1px solid var(--bst-border);
}

.sq-player__text {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sq-player__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
}

.sq-player__meta {
  display: flex;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--bst-muted);
}

/* --- Detail of the selected player ------------------------------------------- */

.sq-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* The detail scrolls as a whole: its blocks keep their height instead of being squeezed into the frame. */
.sq-detail > * {
  flex-shrink: 0;
}

.sq-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  min-height: 2.75rem;
  color: var(--bst-primary-on-surface);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.sq-detail__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.sq-detail__avatar {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bst-page);
  border: 1px solid var(--bst-border);
}

.sq-detail__who {
  flex-grow: 1;
  min-width: 0;
}

.sq-detail__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sq-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0.1875rem 0 0;
  font-size: 0.75rem;
  color: var(--bst-muted);
}

@media (min-width: 1024px) {
  /* Two columns: the list on the left, scrolling in a frame of its own, the detail on the right. The script gives
     the layout the height of what is left of the window, and the width of the right column when it is dragged;
     until then the list is 380px and the detail takes the rest. */
  .sq-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1rem var(--sc-doc-w, calc(100% - 24.75rem));
    align-items: stretch;
    height: calc(100vh - 19rem);
    min-height: 26rem;
  }

  .sq-splitter {
    display: flex;
  }

  .sq-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sq-detail {
    min-height: 0;
    overflow-y: auto;
  }

  /* The way back to the list is for narrow screens: here the list is always beside the detail. */
  .sq-detail__back {
    display: none;
  }
}

/* --- Squadra, Panoramica: seasonal summary, win/loss strip and trend charts ----------------- */

.sq-block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sq-block__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.875rem;
}

.sq-block__title {
  margin: 0;
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sq-filter {
  flex: 0 1 18rem;
  margin-left: auto;
}

.sq-note {
  margin: 0;
  color: var(--bst-muted);
  font-size: 0.6875rem;
}

/* Narrow: one card per competition (name and position on top, the five figures under it).
   Wide: one table, with its own head row. */
.sq-sum {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sq-sum__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5625rem 0.25rem;
  padding: 0.6875rem 0.8125rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.sq-sum__row--head {
  display: none;
}

.sq-sum__name {
  grid-column: 1 / 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.sq-sum__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

a.sq-sum__title:hover {
  color: var(--bst-primary-on-surface);
  text-decoration: underline;
}

.sq-sum__row.is-total .sq-sum__title {
  font-weight: 800;
}

.sq-sum__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bst-muted);
  font-size: 0.625rem;
}

.sq-sum__cell {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sq-sum__cell--pos {
  grid-column: 5;
  grid-row: 1;
  align-items: flex-end;
  color: var(--bst-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.sq-sum__row.is-total .sq-sum__cell--pos {
  display: none;
}

/* With no position to share the top line with, the name of the total takes it whole: otherwise the first figure
   would auto-place beside it. */
@media (max-width: 767.98px) {
  .sq-sum__row.is-total .sq-sum__name {
    grid-column: 1 / -1;
  }
}

.sq-sum__label {
  color: var(--bst-muted);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sq-sum__cell.is-positive {
  color: var(--bst-success-on-surface);
}

.sq-sum__cell.is-negative {
  color: var(--bst-danger-on-surface);
}

/* Win/loss strip */

.sq-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
}

.sq-result {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 800;
  text-decoration: none;
}

.sq-result.is-win {
  background: var(--bst-success);
}

.sq-result.is-loss {
  background: var(--bst-danger);
}

.sq-result:hover {
  color: #ffffff;
  filter: brightness(0.92);
}

/* Charts: plain SVG and boxes, no library. */

.sq-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.sq-chart {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
}

.sq-chart__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.sq-chart__title {
  flex-grow: 1;
  font-size: 0.75rem;
  font-weight: 700;
}

.sq-chart__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bst-muted);
  font-size: 0.625rem;
}

.sq-chart__key {
  width: 0.5625rem;
  height: 3px;
}

.sq-chart__key--for {
  background: var(--bst-primary);
}

.sq-chart__key--against {
  background: var(--bst-accent-on-surface);
}

.sq-chart__svg {
  display: block;
  width: 100%;
  height: 7rem;
}

.sq-chart__grid {
  stroke: var(--bst-row-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sq-chart__line {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sq-chart__line--for {
  stroke: var(--bst-primary);
}

.sq-chart__line--against {
  stroke: var(--bst-accent-on-surface);
}

.sq-bars {
  position: relative;
  display: flex;
  gap: 0.25rem;
  height: 7rem;
}

.sq-bars::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--bst-border);
}

.sq-bars__slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.sq-bars__bar {
  position: absolute;
  left: 12%;
  right: 12%;
  border-radius: 3px;
}

.sq-bars__bar.is-positive {
  background: var(--bst-success);
}

.sq-bars__bar.is-negative {
  background: var(--bst-danger);
}

@media (min-width: 768px) {
  .sq-sum {
    gap: 0;
    border: 1px solid var(--bst-border);
    border-radius: var(--bst-radius);
    overflow: hidden;
    background: var(--bst-surface);
  }

  .sq-sum__row {
    grid-template-columns: minmax(0, 1fr) 3rem repeat(4, 4.375rem) 5rem;
    align-items: center;
    gap: 0;
    min-height: 2.875rem;
    padding: 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--bst-row-line);
    border-radius: 0;
  }

  .sq-sum__row:last-child {
    border-bottom: 0;
  }

  .sq-sum__row--head {
    display: grid;
    min-height: 2.125rem;
    background: var(--bst-page);
    color: var(--bst-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .sq-sum__name {
    grid-column: 1;
  }

  .sq-sum__cell {
    align-items: flex-end;
    font-size: 0.8125rem;
  }

  .sq-sum__cell--strong {
    font-weight: 800;
  }

  .sq-sum__cell:not(.sq-sum__cell--strong):not(.sq-sum__cell--pos) {
    font-weight: 500;
  }

  .sq-sum__row--head .sq-sum__cell {
    font-size: 0.6875rem;
    font-weight: 700;
  }

  .sq-sum__cell--pos,
  .sq-sum__row.is-total .sq-sum__cell--pos {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    font-size: 0.8125rem;
  }

  .sq-sum__label {
    display: none;
  }

  .sq-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .sq-chart__svg,
  .sq-bars {
    height: 9.375rem;
  }

  .sq-bars {
    gap: 0.5rem;
  }
}

/* --- Squadra: roster figures, detail of a player, KPI and rankings --------------------------- */

.sq-player__figures {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sq-block__lead {
  flex: 1 1 14rem;
}

/* Detail: one entry per competition, the first one open. */
.sq-comps {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  overflow: hidden;
}

.sq-comp + .sq-comp {
  border-top: 1px solid var(--bst-row-line);
}

.sq-comp__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  min-height: 3.375rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  list-style: none;
}

.sq-comp__summary::-webkit-details-marker {
  display: none;
}

.sq-comp__name {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}

.sq-comp__kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 3rem;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sq-comp__label {
  color: var(--bst-muted);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sq-comp__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.25rem 1rem 0.875rem;
}

.sq-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

.sq-tile {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 7px;
  background: var(--bst-page);
}

.sq-tile__label {
  color: var(--bst-muted);
  font-size: 0.625rem;
  font-weight: 700;
}

.sq-tile__value {
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sq-chart__avg {
  color: var(--bst-muted);
  font-size: 0.6875rem;
}

.sq-chart__avg b {
  color: var(--bst-text, inherit);
}

.sq-chart__svg--small {
  height: 4.375rem;
}

.sq-chart__key--trend {
  width: 0.75rem;
  height: 0;
  border-top: 2px dashed var(--bst-accent-on-surface);
  background: none;
}

.sq-chart__line--trend {
  stroke: var(--bst-accent-on-surface);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
}

.sq-charts--player {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* KPI */

.sq-outcome {
  margin-left: auto;
}

.sq-kpi-empty {
  padding: 0.75rem 0.8125rem;
  border-radius: var(--bst-radius);
  background: var(--bst-page);
  border: 1px solid var(--bst-border);
  color: var(--bst-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.sq-split-bars {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.sq-split-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sq-split-bar__name {
  color: var(--bst-muted);
  font-size: 0.6875rem;
}

.sq-split-bar__track {
  display: flex;
  height: 1.5rem;
  border-radius: 5px;
  overflow: hidden;
}

.sq-split-bar__part {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.sq-split-bar__part--two {
  background: var(--bst-primary);
}

.sq-split-bar__part--three {
  background: var(--bst-accent-on-surface);
}

.sq-split-bar__part--free {
  background: #5b6b82;
}

.sq-meters {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  margin-top: 0.25rem;
}

.sq-meter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sq-meter__row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.sq-meter__track {
  display: block;
  height: 0.5rem;
  border-radius: 4px;
  background: var(--bst-page);
}

.sq-meter__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.sq-meter__fill--primary {
  background: var(--bst-primary);
}

.sq-meter__fill--good {
  background: var(--bst-success);
}

.sq-meter__fill--bad {
  background: var(--bst-danger);
}

.sq-meter__fill--neutral {
  background: #5b6b82;
}

/* Rankings: six cards of five places */

.sq-ranks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.sq-rank {
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  overflow: hidden;
}

.sq-rank__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--bst-border);
}

.sq-rank__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
}

.sq-rank__unit {
  color: var(--bst-muted);
  font-size: 0.6875rem;
}

.sq-rank__empty {
  margin: 0;
  padding: 0.875rem 1rem;
  color: var(--bst-muted);
  font-size: 0.75rem;
}

.sq-rank__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sq-rank__row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-height: 2.75rem;
  padding: 0 1rem;
}

.sq-rank__row + .sq-rank__row {
  border-top: 1px solid var(--bst-row-line);
}

.sq-rank__pos {
  width: 1.125rem;
  color: var(--bst-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.sq-rank__avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bst-page);
  border: 1px solid var(--bst-border);
}

.sq-rank__name {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-size: 0.8125rem;
  text-decoration: none;
}

a.sq-rank__name:hover {
  color: var(--bst-primary-on-surface);
  text-decoration: underline;
}

.sq-rank__value {
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .sq-ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

}

@media (min-width: 1100px) {
  .sq-ranks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Squadra, Panoramica: team photo block next to the summary --------------------------------- */

.sq-top {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sq-top__summary {
  min-width: 0;
}

.sq-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  min-height: 9.375rem;
  padding: 1rem;
  border: 1px dashed var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-page);
  color: var(--bst-muted);
  text-align: center;
}

.sq-photo__title {
  font-size: 0.75rem;
  font-weight: 700;
}

.sq-photo__text {
  font-size: 0.6875rem;
}

@media (min-width: 1100px) {
  /* The table needs about 25rem of figures: the photo only sits beside it when the row can hold both. */
  .sq-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.125rem;
  }

  .sq-photo {
    flex: 0 0 21.25rem;
    min-height: 14.375rem;
  }

  .sq-top__summary {
    flex: 1 1 0;
  }
}

/* --- Squadra: the photos of the team as a carousel ------------------------------------------------ */

.sq-photo--gallery {
  position: relative;
  /* A team photo is about 3:2. A fixed height under the full width of a phone was a 2:1 strip that cut the heads and
     the feet: the box keeps the proportion of the photo instead, and on a tablet it stops growing at a readable size. */
  aspect-ratio: 3 / 2;
  width: min(100%, 34rem);
  margin-inline: auto;
  min-height: 0;
  padding: 0;
  border-style: solid;
  overflow: hidden;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: var(--bst-surface);
}

.sq-carousel {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sq-carousel::-webkit-scrollbar {
  display: none;
}

.sq-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.sq-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sq-carousel__dots {
  position: absolute;
  inset: auto 0 0.25rem;
  display: flex;
  justify-content: center;
}

.sq-carousel__dot {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sq-carousel__dot::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.sq-carousel__dot.is-active::before {
  background: #ffffff;
}

.sq-photo__manage {
  color: var(--bst-primary-on-surface);
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
}

.sq-photo--gallery .sq-photo__manage {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
}

.sq-photo__manage--inline {
  margin-top: 0.375rem;
  text-decoration: underline;
}

@media (min-width: 1100px) {
  /* Beside the summary the photo has its own column: a fixed height, and about the same proportion. */
  .sq-photo--gallery {
    aspect-ratio: auto;
    width: auto;
    margin-inline: 0;
    height: 14.375rem;
  }
}

/* --- Staff: photos of a team in a season ----------------------------------------------------------- */

.st-teamphotos__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem 0;
}

.st-teamphotos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  list-style: none;
}

.st-teamphotos__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  overflow: hidden;
  background: var(--bst-page);
}

.st-teamphotos__link,
.st-teamphotos__link img {
  display: block;
  width: 100%;
  height: 100%;
}

.st-teamphotos__link img {
  object-fit: cover;
}

.st-teamphotos__del {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}

.st-teamphotos__del > summary {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.st-teamphotos__del > summary::-webkit-details-marker {
  display: none;
}

.st-teamphotos__confirm {
  position: absolute;
  top: 2rem;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 9rem;
  padding: 0.5rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius);
  background: var(--bst-surface);
  font-size: 0.75rem;
}

.st-teamphotos {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.st-teamphotos .st-field__note {
  margin: 0;
  padding: 0.5rem 1rem 0.875rem;
}

/* The wrapper takes the place of .cmp-page for the blocks it holds: without its own gap the blocks would touch. */
[data-sq-live] {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* The blocks of the Squadra page that a filter is replacing (squadra-filters.js): kept in place, only dimmed. */
[data-sq-live].is-loading {
  opacity: 0.55;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* The window with the technical detail of an error (error-detail.js): site administrator only. */
.st-errdetail {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  padding: 1rem;
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg, 12px);
  background: var(--bst-surface);
  color: var(--bst-text);
  box-shadow: 0 20px 50px rgb(15 18 28 / 30%);
}

.st-errdetail::backdrop {
  background: rgb(15 18 28 / 45%);
}

.st-errdetail__title {
  margin: 0 0 0.625rem;
  font-size: 1rem;
}

.st-errdetail__text {
  margin: 0;
  padding: 0.625rem 0.75rem;
  max-height: 50dvh;
  overflow: auto;
  border-radius: 8px;
  background: var(--bst-row-line);
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.st-errdetail__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Pairing the stats app (profile): the QR, the buttons, the list of the devices. */
.pf-app {
  display: grid;
  gap: 0.75rem;
}

.pf-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.pf-pair__qr {
  width: 12rem;
  max-width: 100%;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--bst-radius);
}

.pf-pair__qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.pf-pair__actions {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

/* "Apri nell'app" only makes sense on a phone or a tablet, where the app is. */
.pf-pair__open {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .pf-pair__open {
    display: inline-flex;
  }
}

.pf-sub {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.pf-devices {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-device {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  border: 1px solid var(--bst-border, rgba(128, 128, 128, 0.3));
  border-radius: var(--bst-radius);
}

.pf-device--signedout {
  opacity: 0.6;
}

.pf-device__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pf-device__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pf-device__actions form {
  margin: 0;
}

.pf-device__rename {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 14rem;
}

.pf-device__rename input {
  flex: 1 1 auto;
  min-width: 0;
}

/* "Apri nell'app" on a game: only where the app is, on a phone or a tablet. */
.pt-app-cta {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .pt-app-cta {
    display: inline-flex;
  }
}

.cv-live {
  margin-top: 0.75rem;
}

/* Nothing to say while everything is saved: the bar only carries the hidden fields of the draft. */
.sx-draft.is-clean {
  display: none;
}

/* The "next phase" button of the phone bars: on a wide screen the strip of the phases does that job. */
.re-next {
  margin-left: auto;
}

@media (min-width: 1024px) {
  .sc-narrow-bar__next {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .sx-draft__more {
    display: none;
  }
}