/* StatsCentral Apps Next — atoms. */

/* ── Typography ── */
.sc-heading-display,
.sc-heading-xl,
.sc-heading-l,
.sc-heading-m,
.sc-heading-s {
  margin: 0 0 var(--space-5);
  color: rgb(var(--color-text));
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.sc-heading-display {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-6);
}
.sc-heading-xl { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.sc-heading-l  { font-size: var(--text-l); }
.sc-heading-m  { font-size: var(--text-m); margin-bottom: var(--space-4); }
.sc-heading-s  { font-size: var(--text-s); margin-bottom: var(--space-3); }

.sc-caption-l,
.sc-caption-m {
  display: block;
  margin-bottom: var(--space-1);
  color: rgb(var(--color-text-secondary));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.sc-caption-l { font-size: var(--text-s); }
.sc-caption-m { font-size: var(--text-body-s); }

.sc-body,
.sc-body-s,
.sc-body-lead {
  margin: 0 0 var(--space-5);
  color: rgb(var(--color-text));
}
.sc-body      { font-size: var(--text-body); }
.sc-body-s    { font-size: var(--text-body-s); }
.sc-body-lead { font-size: var(--text-s); color: rgb(var(--color-text-secondary)); max-width: var(--readable-width); }
.sc-body-secondary { color: rgb(var(--color-text-secondary)); }

.sc-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.sc-list > li { margin-bottom: var(--space-1); }
.sc-list--bullet { padding-left: var(--space-5); list-style: disc; }
.sc-list--number { padding-left: var(--space-5); list-style: decimal; }
.sc-list--spaced > li { margin-bottom: var(--space-3); }

.sc-section-break {
  margin: 0;
  border: 0;
}
.sc-section-break--m { margin-block: var(--space-6); }
.sc-section-break--l { margin-block: var(--space-8); }
.sc-section-break--visible { border-bottom: var(--border-width) solid rgb(var(--color-border)); }

/* ── Link ── */
.sc-link {
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}
.sc-link:hover {
  color: rgb(var(--color-link-hover));
  text-decoration-thickness: max(3px, .1875rem);
}
.sc-link:visited { color: rgb(var(--color-link-visited)); }
.sc-link--no-visited-state:visited { color: rgb(var(--color-link)); }
.sc-link--text-colour,
.sc-link--text-colour:visited { color: rgb(var(--color-text)); }
.sc-link--inverse,
.sc-link--inverse:visited,
.sc-link--inverse:hover { color: rgb(var(--color-link-inverse)); }
.sc-link--no-underline:not(:hover):not(:focus-visible) { text-decoration: none; }

.sc-link:focus-visible,
.sc-link--inverse:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background-color: rgb(var(--color-focus));
  box-shadow: 0 -2px rgb(var(--color-focus)), 0 var(--focus-bar) rgb(var(--color-focus-text));
  text-decoration: none;
}

/* ── Button ── */
.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: rgb(var(--color-accent));
  color: rgb(var(--color-accent-text));
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: top;
  -webkit-appearance: none;
  appearance: none;
}
.sc-button:link,
.sc-button:visited { color: rgb(var(--color-accent-text)); }
.sc-button:hover   { background: rgb(var(--color-accent-hover)); color: rgb(var(--color-accent-text)); }
.sc-button:active  { background: rgb(var(--color-accent-pressed)); }

.sc-button--secondary,
.sc-button--secondary:link,
.sc-button--secondary:visited {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  border-color: rgb(var(--color-border-input));
}
.sc-button--secondary:hover,
.sc-button--secondary:active {
  background: rgb(var(--color-secondary-hover));
  color: rgb(var(--color-text));
  border-color: rgb(var(--color-border-strong));
}

/* --danger is the name the existing confirm-dialog triggers pass; it is the same button. */
.sc-button--warning,
.sc-button--warning:link,
.sc-button--warning:visited,
.sc-button--danger,
.sc-button--danger:link,
.sc-button--danger:visited { background: rgb(var(--color-error)); color: rgb(var(--color-text-inverse)); }
.sc-button--warning:hover,
.sc-button--warning:active,
.sc-button--danger:hover,
.sc-button--danger:active { background: rgb(var(--color-error-hover)); color: rgb(var(--color-text-inverse)); }

.sc-button--inverse,
.sc-button--inverse:link,
.sc-button--inverse:visited { background: rgb(var(--color-bg)); color: rgb(var(--color-header)); }
.sc-button--inverse:hover,
.sc-button--inverse:active { background: rgb(var(--color-surface-strong)); color: rgb(var(--color-header)); }

.sc-button--start {
  min-height: 52px;
  padding-inline: var(--space-6);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
}
.sc-button--start .sc-button__start-icon { width: 18px; height: 18px; flex: none; }

.sc-button--small {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-body-s);
}

.sc-button:focus-visible {
  outline: var(--focus-width) solid transparent;
  background: rgb(var(--color-focus));
  color: rgb(var(--color-focus-text));
  border-color: rgb(var(--color-focus));
  box-shadow: 0 var(--focus-bar) 0 rgb(var(--color-focus-text));
}

.sc-button[disabled],
.sc-button[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.sc-button[aria-busy="true"] { cursor: progress; }

.sc-button__icon { width: 1em; height: 1em; flex: none; }

/* A primary action with its secondary actions; a link beside a button sits on its baseline. */
.sc-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

/* A button that reads as a link: row actions and "Cancel" next to a primary. */
.sc-button-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--color-link));
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
  cursor: pointer;
}
.sc-button-link:hover { color: rgb(var(--color-link-hover)); text-decoration-thickness: max(3px, .1875rem); }
.sc-button-link--warning { color: rgb(var(--color-error)); }
.sc-button-link--warning:hover { color: rgb(var(--color-error-hover)); }
.sc-button-link[disabled] {
  color: rgb(var(--color-text-secondary));
  text-decoration: none;
  cursor: not-allowed;
}
.sc-button-link:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background-color: rgb(var(--color-focus));
  box-shadow: 0 -2px rgb(var(--color-focus)), 0 var(--focus-bar) rgb(var(--color-focus-text));
  text-decoration: none;
}

/* ── Tag ── Default tone is blue. */
.sc-tag {
  display: inline-block;
  max-width: 100%;
  padding: 2px var(--space-2) 3px;
  background: rgb(var(--tag-blue-bg));
  color: rgb(var(--tag-blue-text));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.sc-tag--grey   { background: rgb(var(--tag-grey-bg));   color: rgb(var(--tag-grey-text)); }
.sc-tag--green  { background: rgb(var(--tag-green-bg));  color: rgb(var(--tag-green-text)); }
.sc-tag--yellow { background: rgb(var(--tag-yellow-bg)); color: rgb(var(--tag-yellow-text)); }
.sc-tag--blue   { background: rgb(var(--tag-blue-bg));   color: rgb(var(--tag-blue-text)); }
.sc-tag--red    { background: rgb(var(--tag-red-bg));    color: rgb(var(--tag-red-text)); }
.sc-tag--purple { background: rgb(var(--tag-purple-bg)); color: rgb(var(--tag-purple-text)); }

.sc-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Status icon ── Whether one item is in place, as an icon. The filled
   tile, not only its colour, marks an item as done; a missing one is bare. */
.sc-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  color: rgb(var(--color-text-secondary));
}
.sc-status-icon svg { width: 16px; height: 16px; }
.sc-status-icon--done {
  background: rgb(var(--tag-green-bg));
  color: rgb(var(--tag-green-text));
}
.sc-status-icon-group {
  display: inline-flex;
  gap: var(--space-1);
}

/* ── Count ── Unread notifications, tab counts. */
.sc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: rgb(var(--color-error));
  color: rgb(var(--color-text-inverse));
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sc-count--neutral {
  background: rgb(var(--color-surface-strong));
  color: rgb(var(--color-text));
}

/* ── Form atoms ── */
.sc-label {
  display: block;
  margin-bottom: var(--space-1);
  color: rgb(var(--color-text));
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.sc-label--s  { font-size: var(--text-body-s); }
.sc-label--m  { font-size: var(--text-s); font-weight: var(--weight-bold); }
.sc-label--l  { font-size: var(--text-l); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.sc-label--xl { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }

.sc-label-wrapper { margin: 0; font-size: inherit; }

.sc-label__optional {
  color: rgb(var(--color-text-secondary));
  font-weight: var(--weight-regular);
}

.sc-hint {
  display: block;
  margin-bottom: var(--space-2);
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
}

.sc-error-message {
  display: block;
  margin: 0 0 var(--space-2);
  color: rgb(var(--color-error));
  font-size: var(--text-body-s);
  font-weight: var(--weight-bold);
}

.sc-input,
.sc-textarea,
.sc-select {
  display: block;
  width: 100%;
  margin: 0;
  border: var(--border-width) solid rgb(var(--color-border-input));
  border-radius: var(--radius);
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  font-size: var(--text-body);
  line-height: 1.25;
}

.sc-input {
  height: var(--control-height);
  padding: 0 var(--space-3);
  -webkit-appearance: none;
  appearance: none;
}

.sc-textarea {
  min-height: 120px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

/* Some browsers draw the native arrow on the border, so selects draw their own chevron, inset like the text. */
:root {
  --select-chevron:
    linear-gradient(45deg, transparent calc(50% - 1px), rgb(var(--color-text)) calc(50% - 1px), rgb(var(--color-text)) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent calc(50% - 1px), rgb(var(--color-text)) calc(50% - 1px), rgb(var(--color-text)) calc(50% + 1px), transparent calc(50% + 1px));
  --select-chevron-position: right calc(var(--space-4) + 6px) center, right var(--space-4) center;
  --select-padding-right: calc(var(--space-4) + 12px + var(--space-3));
}

.sc-select {
  width: auto;
  min-width: 12em;
  max-width: 100%;
  height: var(--control-height);
  padding: 0 var(--select-padding-right) 0 var(--space-3);
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--select-chevron);
  background-position: var(--select-chevron-position);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

@media (forced-colors: active) {
  .sc-select { appearance: auto; background-image: none; padding-right: var(--space-3); }
}

.sc-input:focus,
.sc-textarea:focus,
.sc-select:focus {
  outline: var(--focus-width) solid rgb(var(--color-focus));
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px rgb(var(--color-border-strong));
  border-color: rgb(var(--color-border-strong));
}

.sc-input--error,
.sc-textarea--error,
.sc-select--error {
  border: 2px solid rgb(var(--color-error));
}
.sc-input--error:focus,
.sc-textarea--error:focus,
.sc-select--error:focus { border-color: rgb(var(--color-border-strong)); }

.sc-input[disabled],
.sc-textarea[disabled],
.sc-select[disabled] {
  opacity: .5;
  color: inherit;
  background: rgb(var(--color-surface));
  cursor: not-allowed;
}

.sc-input--width-30 { max-width: 59ex; }
.sc-input--width-20 { max-width: 41ex; }
.sc-input--width-10 { max-width: 23ex; }
.sc-input--width-5  { max-width: 10.8ex; }
.sc-input--width-4  { max-width: 9ex; }
.sc-input--width-3  { max-width: 7.2ex; }
.sc-input--width-2  { max-width: 5.4ex; }

.sc-input--numeric { font-variant-numeric: tabular-nums; }

.sc-input-wrapper {
  display: flex;
  align-items: stretch;
}
.sc-input-wrapper .sc-input { flex: 0 1 auto; }

.sc-input__prefix,
.sc-input__suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  height: var(--control-height);
  padding: 0 var(--space-2);
  border: var(--border-width) solid rgb(var(--color-border-input));
  background: rgb(var(--color-surface));
  font-size: var(--text-body);
  white-space: nowrap;
  flex: none;
}
.sc-input__prefix { border-right: 0; }
.sc-input__suffix { border-left: 0; }

.sc-file-upload {
  display: block;
  max-width: 100%;
  padding: var(--space-1) 0;
  font-size: var(--text-body);
}
.sc-file-upload::file-selector-button {
  margin-right: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid rgb(var(--color-border-input));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.sc-file-upload:focus-visible {
  outline: var(--focus-width) solid rgb(var(--color-focus));
  box-shadow: 0 0 0 calc(var(--focus-width) + 3px) rgb(var(--color-focus-text));
}

/* ── Icon ── Inline SVG, stroke and fill from currentColor. */
.sc-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}
.sc-icon--s { width: 16px; height: 16px; }
.sc-icon--m { width: 20px; height: 20px; }
.sc-icon--l { width: 24px; height: 24px; }

/* ── Spinner ── */
.sc-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sc-spin .8s linear infinite;
  vertical-align: -0.125em;
}

/* ── Avatar ── Initials or a photo, always square. */
.sc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: rgb(var(--color-surface-strong));
  color: rgb(var(--grey-700));
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-avatar--s { width: 32px; height: 32px; font-size: var(--text-xs); }
.sc-avatar--l { width: 72px; height: 72px; font-size: var(--text-m); }

/* ── App mark ── The identity square. Set the app with a modifier. */
.sc-app-mark {
  --sc-app: var(--app-league-os);
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  background: rgb(var(--sc-app));
}
.sc-app-mark--l { width: 16px; height: 16px; }
/* The app's own icon, white on its colour, where the mark has room for one. */
.sc-app-mark--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgb(var(--color-text-inverse));
}
.sc-app-mark__icon { width: 16px; height: 16px; }
.sc-app-mark--icon.sc-app-mark--l { width: 32px; height: 32px; }
.sc-app-mark--icon.sc-app-mark--l .sc-app-mark__icon { width: 20px; height: 20px; }
.sc-app-mark--league-os       { --sc-app: var(--app-league-os); }
.sc-app-mark--club-os         { --sc-app: var(--app-club-os); }
.sc-app-mark--team-os         { --sc-app: var(--app-team-os); }
.sc-app-mark--player-portal   { --sc-app: var(--app-player-portal); }
.sc-app-mark--member-portal   { --sc-app: var(--app-member-portal); }
.sc-app-mark--corporate-games { --sc-app: var(--app-corporate-games); }
.sc-app-mark--youth-games     { --sc-app: var(--app-youth-games); }
.sc-app-mark--tickets-central { --sc-app: var(--app-tickets-central); }
.sc-app-mark--overlay-os      { --sc-app: var(--app-overlay-os); }
.sc-app-mark--venue-os        { --sc-app: var(--app-venue-os); }
.sc-app-mark--sportscast      { --sc-app: var(--app-sportscast); }
.sc-app-mark--officials-portal { --sc-app: var(--app-officials-portal); }