/* StatsCentral Apps Next — molecules. */

/* ── Form group ── Label, hint, error and control. On error, a red bar marks the whole group. */
.sc-form-group {
  margin-bottom: var(--space-7);
}
.sc-form-group:last-child { margin-bottom: 0; }
.sc-form-group .sc-form-group:last-of-type { margin-bottom: 0; }

.sc-form-group--error {
  padding-left: var(--space-4);
  border-left: var(--border-width-error) solid rgb(var(--color-error));
}

/* ── Fieldset ── */
.sc-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sc-fieldset__legend {
  display: table;
  max-width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  color: rgb(var(--color-text));
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  white-space: normal;
}
.sc-fieldset__legend--s  { font-size: var(--text-body-s); }
.sc-fieldset__legend--m  { font-size: var(--text-s); font-weight: var(--weight-bold); }
.sc-fieldset__legend--l  { font-size: var(--text-l); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.sc-fieldset__legend--xl { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }

.sc-fieldset__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ── Checkboxes and radios ── A 32px box drawn on the label; the real input sits on top for the hit area. */
.sc-checkboxes__item,
.sc-radios__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 40px;
  margin-bottom: var(--space-3);
  padding-left: 44px;
}
.sc-checkboxes__item:last-child,
.sc-radios__item:last-child { margin-bottom: 0; }

.sc-checkboxes__input,
.sc-radios__input {
  position: absolute;
  z-index: 1;
  top: -4px;
  left: -4px;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sc-checkboxes__label,
.sc-radios__label {
  display: inline-block;
  align-self: center;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  cursor: pointer;
  touch-action: manipulation;
}

.sc-checkboxes__label::before,
.sc-radios__label::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 32px;
  height: 32px;
  border: 2px solid rgb(var(--color-border-strong));
  background: rgb(var(--color-bg));
}
.sc-radios__label::before { border-radius: 50%; }

.sc-checkboxes__label::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
  width: 18px;
  height: 7px;
  border: solid rgb(var(--color-text));
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg);
  opacity: 0;
}

.sc-radios__label::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(var(--color-text));
  opacity: 0;
}

.sc-checkboxes__input:checked + .sc-checkboxes__label::after,
.sc-radios__input:checked + .sc-radios__label::after { opacity: 1; }

.sc-checkboxes__input:focus-visible + .sc-checkboxes__label::before,
.sc-radios__input:focus-visible + .sc-radios__label::before {
  outline: var(--focus-width) solid transparent;
  box-shadow: 0 0 0 var(--focus-width) rgb(var(--color-focus)), 0 0 0 calc(var(--focus-width) + 3px) rgb(var(--color-focus-text));
}

.sc-checkboxes__input:disabled,
.sc-checkboxes__input:disabled + .sc-checkboxes__label,
.sc-radios__input:disabled,
.sc-radios__input:disabled + .sc-radios__label { opacity: .5; cursor: not-allowed; }

.sc-checkboxes__hint,
.sc-radios__hint {
  display: block;
  width: 100%;
  margin: 0;
  padding-inline: var(--space-1);
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
}

.sc-checkboxes__divider,
.sc-radios__divider {
  width: 40px;
  margin-bottom: var(--space-3);
  text-align: center;
  color: rgb(var(--color-text-secondary));
}

.sc-checkboxes__conditional,
.sc-radios__conditional {
  margin: 0 0 var(--space-4) 18px;
  padding-left: 30px;
  border-left: var(--border-width-error) solid rgb(var(--color-border));
}

.sc-radios--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.sc-radios--inline .sc-radios__item { margin-bottom: 0; }

/* ── Slot picker ── Times to tick, as a grid of tiles: a checkbox per bookable slot, read as "time, price". A slot that cannot be ticked is a plain tile saying why. */
.sc-slot-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.sc-slot-picker__item { position: relative; }

.sc-slot-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.sc-slot-picker__slot {
  display: block;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 2px solid rgb(var(--color-border-input));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  cursor: pointer;
}

.sc-slot-picker__time {
  display: block;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.sc-slot-picker__detail { display: block; font-size: var(--text-body-s); }

.sc-slot-picker__slot:hover { border-color: rgb(var(--color-border-strong)); }

.sc-slot-picker__input:checked + .sc-slot-picker__slot {
  border-color: rgb(var(--color-accent));
  background: rgb(var(--color-accent));
  color: rgb(var(--color-accent-text));
}

.sc-slot-picker__input:focus-visible + .sc-slot-picker__slot {
  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-slot-picker__slot--unavailable,
.sc-slot-picker__slot--unavailable:hover {
  border-color: rgb(var(--color-border));
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text-secondary));
  cursor: default;
}

.sc-slot-picker__slot--past .sc-slot-picker__time { text-decoration: line-through; }

/* ── Date input ── */
.sc-date-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.sc-date-input__item { display: inline-block; }
.sc-date-input__label { display: block; margin-bottom: var(--space-1); font-size: var(--text-body-s); font-weight: var(--weight-semibold); }

/* ── Character count ── */
.sc-character-count__message {
  margin: var(--space-1) 0 0;
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
}
.sc-character-count__message--error { color: rgb(var(--color-error)); font-weight: var(--weight-bold); }

/* ── Search ── Input and button joined. */
.sc-search {
  display: flex;
  max-width: 36em;
}
.sc-search .sc-input { flex: 1 1 auto; min-width: 0; }
.sc-search .sc-button { flex: none; min-width: var(--control-height); padding-inline: var(--space-3); }

/* ── Back link ── */
.sc-back-link {
  position: relative;
  display: inline-block;
  margin-block: var(--space-4);
  padding-left: 16px;
  color: rgb(var(--color-text));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}
.sc-back-link:visited { color: rgb(var(--color-text)); }
.sc-back-link:hover { text-decoration-thickness: max(3px, .1875rem); }
.sc-back-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 2px 0 0 2px;
  transform: translateY(-50%) rotate(-45deg);
}
.sc-back-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;
}

/* ── Breadcrumbs ── */
.sc-breadcrumbs {
  margin-block: var(--space-4) 0;
  color: rgb(var(--color-text));
  font-size: var(--text-small);
}
.sc-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-breadcrumbs__item {
  position: relative;
  margin-bottom: var(--space-1);
  padding-left: 0;
}
.sc-breadcrumbs__item + .sc-breadcrumbs__item {
  margin-left: var(--space-2);
  padding-left: 18px;
}
.sc-breadcrumbs__item + .sc-breadcrumbs__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border: solid rgb(var(--color-text-secondary));
  border-width: 1px 1px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.sc-breadcrumbs__link,
.sc-breadcrumbs__link:visited { color: rgb(var(--color-text)); }

@media (max-width: 640px) {
  .sc-breadcrumbs--collapse-on-mobile .sc-breadcrumbs__item:not(:nth-last-child(2)) { display: none; }
  .sc-breadcrumbs--collapse-on-mobile .sc-breadcrumbs__item:nth-last-child(2) { margin-left: 0; padding-left: 16px; }
  .sc-breadcrumbs--collapse-on-mobile .sc-breadcrumbs__item:nth-last-child(2)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 6px;
    height: 6px;
    border: solid rgb(var(--color-text-secondary));
    border-width: 1px 0 0 1px;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ── Tabs ── Folder tabs on desktop, a plain list of links on phones. Works for in-page panels (JS) and for filter links (aria-current). */
.sc-tabs { margin-bottom: var(--space-6); }

.sc-tabs__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

.sc-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border-width) solid rgb(var(--color-border));
}

.sc-tabs__list-item {
  position: relative;
  margin: 0 var(--space-1) 0 0;
}

.sc-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid transparent;
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.sc-tabs__tab:visited { color: rgb(var(--color-text)); }
.sc-tabs__tab:hover { color: rgb(var(--color-link-hover)); }

/* The label carries the underline so it does not run under a count. */
.sc-tabs__label {
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}
.sc-tabs__tab:hover .sc-tabs__label { text-decoration-thickness: max(3px, .1875rem); }
.sc-tabs__tab[aria-current="page"] .sc-tabs__label,
.sc-tabs__tab[aria-selected="true"] .sc-tabs__label,
.sc-tabs__tab[aria-pressed="true"] .sc-tabs__label,
.sc-tabs__tab:focus-visible .sc-tabs__label { text-decoration: none; }
button.sc-tabs__tab { cursor: pointer; }

.sc-tabs__list-item--selected .sc-tabs__tab,
.sc-tabs__tab[aria-current="page"],
.sc-tabs__tab[aria-selected="true"] {
  border-color: rgb(var(--color-border));
  border-bottom-color: rgb(var(--color-bg));
  background: rgb(var(--color-bg));
  text-decoration: none;
}

.sc-tabs__tab:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background-color: rgb(var(--color-focus));
  box-shadow: inset 0 calc(var(--focus-bar) * -1) rgb(var(--color-focus-text));
  text-decoration: none;
}

.sc-tabs__panel { padding-top: var(--space-6); }
.sc-tabs__panel--hidden { display: none; }

@media (max-width: 640px) {
  .sc-tabs__list { border-bottom: 0; flex-direction: column; }
  .sc-tabs__list-item { margin: 0 0 var(--space-1); }
  .sc-tabs__tab { min-height: 0; padding: var(--space-1) 0; border: 0; background: none; color: rgb(var(--color-link)); }
  .sc-tabs__tab[aria-current="page"],
  .sc-tabs__tab[aria-selected="true"],
  .sc-tabs__list-item--selected .sc-tabs__tab { border: 0; background: none; color: rgb(var(--color-text)); font-weight: var(--weight-bold); }
  .sc-tabs__panel { padding-top: var(--space-4); }
}

/* ── Sub-navigation ── Resource-level nav (season, financials, venue) under the page header. Scrolls sideways on phones; never hides. */
.sc-sub-navigation {
  margin-bottom: var(--space-7);
  border-bottom: var(--border-width) solid rgb(var(--color-border));
}

.sc-sub-navigation__list {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sc-sub-navigation__item { flex: none; }

.sc-sub-navigation__link {
  display: block;
  padding: var(--space-3) 0 calc(var(--space-3) - var(--border-width-rule));
  border-bottom: var(--border-width-rule) solid transparent;
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
.sc-sub-navigation__link:visited { color: rgb(var(--color-text-secondary)); }
.sc-sub-navigation__link:hover { color: rgb(var(--color-text)); text-decoration: underline; text-underline-offset: .15em; }
.sc-sub-navigation__link[aria-current="page"] {
  border-bottom-color: rgb(var(--color-accent));
  color: rgb(var(--color-text));
}
.sc-sub-navigation__link:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background-color: rgb(var(--color-focus));
  border-bottom-color: rgb(var(--color-focus-text));
  box-shadow: none;
}

/* ── Date strip ── One day at a time from a sideways row of days: weekday, date, month. Links, with aria-current="date" on the chosen day; scrolls sideways when the days outrun the width. */
.sc-date-strip { margin: 0 0 var(--space-6); }

.sc-date-strip__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
}

.sc-date-strip__item { flex: none; }

.sc-date-strip__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4rem;
  padding: var(--space-2) 0;
  border: 2px solid rgb(var(--color-border-input));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  text-decoration: none;
}

.sc-date-strip__link:visited { color: rgb(var(--color-text)); }
.sc-date-strip__link:hover { border-color: rgb(var(--color-border-strong)); }

.sc-date-strip__weekday,
.sc-date-strip__month { font-size: var(--text-xs); }

.sc-date-strip__weekday { font-weight: var(--weight-bold); text-transform: uppercase; }

.sc-date-strip__day {
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  font-variant-numeric: tabular-nums;
}

.sc-date-strip__link[aria-current="date"] {
  border-color: rgb(var(--color-border-strong));
  background: rgb(var(--color-text));
  color: rgb(var(--color-text-inverse));
}

.sc-date-strip__link:focus-visible {
  outline: var(--focus-width) solid transparent;
  border-color: rgb(var(--color-focus-text));
  background: rgb(var(--color-focus));
  color: rgb(var(--color-focus-text));
  box-shadow: inset 0 calc(var(--focus-bar) * -1) rgb(var(--color-focus-text));
}

/* ── Pagination ── */
.sc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-block: var(--space-6);
}

.sc-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-pagination__link,
.sc-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  font-weight: var(--weight-semibold);
}

.sc-pagination__link {
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-underline-offset: .15em;
}
.sc-pagination__link:hover { color: rgb(var(--color-link-hover)); text-decoration-thickness: max(3px, .1875rem); }
.sc-pagination__link[aria-current="page"] {
  background: rgb(var(--color-link));
  color: rgb(var(--color-text-inverse));
  text-decoration: none;
}
.sc-pagination__link:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background-color: rgb(var(--color-focus));
  box-shadow: 0 var(--focus-bar) rgb(var(--color-focus-text));
  text-decoration: none;
}

.sc-pagination__prev .sc-pagination__link,
.sc-pagination__next .sc-pagination__link { gap: var(--space-2); }

.sc-pagination__ellipsis { color: rgb(var(--color-text-secondary)); }

.sc-pagination__summary {
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
}

/* ── Details ── */
.sc-details {
  display: block;
  margin-bottom: var(--space-6);
}

.sc-details__summary {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  color: rgb(var(--color-link));
  cursor: pointer;
  list-style: none;
}
.sc-details__summary::-webkit-details-marker { display: none; }

.sc-details__summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 7px 0 7px 12px;
  border-left-color: currentColor;
  transform: translateY(-50%);
}
.sc-details[open] > .sc-details__summary::before {
  border-width: 12px 7px 0 7px;
  border-color: transparent;
  border-top-color: currentColor;
}

.sc-details__summary-text {
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}
.sc-details__summary:hover { color: rgb(var(--color-link-hover)); }
.sc-details__summary:hover .sc-details__summary-text { text-decoration-thickness: max(3px, .1875rem); }

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

.sc-details__text {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 5px solid rgb(var(--color-border));
}

/* Boxed: a section that opens in place beside another, like a player's league and career stats. */
.sc-details--boxed {
  margin-bottom: var(--space-6);
  border: var(--border-width) solid rgb(var(--color-border));
  background: rgb(var(--color-bg));
}
.sc-details--boxed > .sc-details__summary {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 25px);
  color: rgb(var(--color-text));
  font-weight: var(--weight-bold);
}
.sc-details--boxed > .sc-details__summary::before { left: var(--space-5); }
.sc-details--boxed > .sc-details__summary .sc-details__summary-text { text-decoration: none; }
.sc-details--boxed > .sc-details__summary:hover .sc-details__summary-text { text-decoration: underline; text-decoration-thickness: max(1px, .0625rem); }
.sc-details--boxed[open] > .sc-details__summary { border-bottom: var(--border-width) solid rgb(var(--color-border)); }
.sc-details--boxed > .sc-details__text {
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-left: 0;
}
.sc-details__text > :last-child { margin-bottom: 0; }

/* ── Inset text ── */
.sc-inset-text {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 5px solid rgb(var(--color-border));
}
.sc-inset-text > :last-child { margin-bottom: 0; }

/* ── Warning text ── */
.sc-warning-text {
  position: relative;
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0 var(--space-2) 48px;
}

.sc-warning-text__icon {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border: 3px solid rgb(var(--color-text));
  border-radius: 50%;
  background: rgb(var(--color-text));
  color: rgb(var(--color-text-inverse));
  font-size: 26px;
  font-weight: var(--weight-bold);
  line-height: 1;
  user-select: none;
}

.sc-warning-text__text {
  display: block;
  font-weight: var(--weight-bold);
}

/* ── Key stats ── Stat cards: surface fill, a coloured top bar, a large value. The bar is decorative; the label says what the number is, and the meta line says "up" or "down" in words. */
.sc-key-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}

.sc-key-stats__item {
  --sc-stat-bar: var(--stat-grey);
  container-type: inline-size;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--border-width-bar) solid rgb(var(--sc-stat-bar));
  background: rgb(var(--color-surface));
}
.sc-key-stats__item--grey   { --sc-stat-bar: var(--stat-grey); }
.sc-key-stats__item--green  { --sc-stat-bar: var(--stat-green); }
.sc-key-stats__item--red    { --sc-stat-bar: var(--stat-red); }
.sc-key-stats__item--blue   { --sc-stat-bar: var(--stat-blue); }
.sc-key-stats__item--orange { --sc-stat-bar: var(--stat-orange); }
.sc-key-stats__item--purple { --sc-stat-bar: var(--stat-purple); }

.sc-key-stats__label {
  color: rgb(var(--color-text));
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

/* Scales with the card, so a long value (2,902,450.00) fits a four-up row instead of breaking mid-number. */
.sc-key-stats__value {
  margin: var(--space-1) 0 0;
  font-size: clamp(var(--text-l), 18cqi, var(--text-stat));
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* A value that leads somewhere (Seasons: 3) is a visible link, not plain text. */
.sc-key-stats__value a {
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-decoration-thickness: max(2px, .125rem);
  text-underline-offset: .12em;
}
.sc-key-stats__value a:hover { color: rgb(var(--color-link-hover)); }
.sc-key-stats__value a:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background: rgb(var(--color-focus));
  box-shadow: 0 var(--focus-bar) rgb(var(--color-focus-text));
  text-decoration: none;
}

/* The currency code sits under the number, never glued to it. */
.sc-key-stats__unit {
  margin: var(--space-1) 0 0;
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
}

.sc-key-stats__meta {
  margin: var(--space-2) 0 0;
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
}

@media (max-width: 640px) {
  .sc-key-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .sc-key-stats__item { padding: var(--space-3) var(--space-3) var(--space-4); border-top-width: var(--border-width-rule); }
  .sc-key-stats__label { font-size: var(--text-body-s); }
}

/* ── Progress bar ── Decorative; the visible "2 of 4 done" text carries the value. */
.sc-progress {
  height: 8px;
  overflow: hidden;
  background: rgb(var(--color-surface-strong));
}
.sc-progress__bar {
  height: 100%;
  width: var(--sc-progress, 0%);
  background: rgb(var(--color-accent));
}

/* ── Empty state ── Says what is missing and how to add it. */
.sc-empty-state {
  padding: var(--space-7) var(--space-6);
  background: rgb(var(--color-surface));
}
.sc-empty-state__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
}
.sc-empty-state__body {
  margin: 0 0 var(--space-5);
  max-width: var(--readable-width);
  color: rgb(var(--color-text-secondary));
}
.sc-empty-state__body:last-child { margin-bottom: 0; }

/* ── Copy field ── */
.sc-copy-field {
  display: flex;
  max-width: 40em;
}
.sc-copy-field .sc-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgb(var(--color-surface));
  font-family: var(--font-mono);
  font-size: var(--text-body-s);
}
.sc-copy-field .sc-button { flex: none; margin-left: -1px; }

/* ── Notification banner ── Info and success. Success after a redirect replaces the old flash toast. */
.sc-notification-banner {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid rgb(var(--color-info-border));
  background: rgb(var(--color-info-bg));
}

.sc-notification-banner__icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: rgb(var(--color-info));
}

.sc-notification-banner__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.sc-notification-banner__content > :last-child { margin-bottom: 0; }
.sc-notification-banner__content p { margin: 0 0 var(--space-2); }

.sc-notification-banner--success {
  border-color: rgb(var(--color-success));
  background: rgb(var(--color-success-bg));
}
.sc-notification-banner--success .sc-notification-banner__icon { color: rgb(var(--color-success-text)); }
.sc-notification-banner--success .sc-notification-banner__title { color: rgb(var(--color-success-text)); }

/* Warning: something the person must know before acting, too long for warning text (lists, several sentences). */
.sc-notification-banner--warning {
  border-color: rgb(var(--tag-yellow-text));
  background: rgb(var(--tag-yellow-bg));
}
.sc-notification-banner--warning .sc-notification-banner__icon,
.sc-notification-banner--warning .sc-notification-banner__title { color: rgb(var(--tag-yellow-text)); }

/* Error: a page-level failure after a redirect (a flash alert), not a form error — those use the error summary. */
.sc-notification-banner--error {
  border-color: rgb(var(--color-error));
  background: rgb(var(--color-error-bg));
}
.sc-notification-banner--error .sc-notification-banner__icon,
.sc-notification-banner--error .sc-notification-banner__title { color: rgb(var(--tag-red-text)); }

.sc-notification-banner:focus,
.sc-notification-banner:focus-visible { outline: var(--focus-width) solid rgb(var(--color-focus)); box-shadow: none; }

/* ── Error summary ── Top of the form, takes focus on load, links to each field. */
.sc-error-summary {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border: var(--border-width-error) solid rgb(var(--color-error));
}
.sc-error-summary:focus,
.sc-error-summary:focus-visible {
  outline: var(--focus-width) solid rgb(var(--color-focus));
  outline-offset: 0;
  box-shadow: none;
}

.sc-error-summary__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
}

.sc-error-summary__body > p { margin: 0 0 var(--space-4); }

.sc-error-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-error-summary__list li { margin-bottom: var(--space-2); }
.sc-error-summary__list li:last-child { margin-bottom: 0; }

.sc-error-summary__list a {
  color: rgb(var(--color-error));
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.sc-error-summary__list a:hover { color: rgb(var(--color-error-hover)); text-decoration-thickness: max(3px, .1875rem); }
.sc-error-summary__list a: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;
}

/* ── Toast ── Transient async failures and confirmations that do not change the page. Always offers a way forward. */
.sc-toast-region {
  position: fixed;
  z-index: 60;
  right: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(420px, calc(100vw - var(--space-5) * 2));
}

.sc-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: var(--border-width-rule) solid rgb(var(--color-success));
  background: rgb(var(--color-text));
  color: rgb(var(--color-text-inverse));
  font-size: var(--text-body-s);
  animation: sc-slide-in var(--duration-base) ease-out;
}
.sc-toast--error { border-top-color: rgb(var(--color-error)); }

.sc-toast__body { flex: 1 1 auto; }
.sc-toast__title { margin: 0; font-weight: var(--weight-bold); }
.sc-toast__message { margin: 2px 0 0; }

.sc-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.sc-toast .sc-button-link { color: rgb(var(--color-text-inverse)); font-weight: var(--weight-semibold); }

.sc-toast__dismiss {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 0 0;
  border: 0;
  background: none;
  color: rgb(var(--color-text-inverse));
  cursor: pointer;
}

/* ── Summary list ── Key, value, action rows. */
/* One grid for the whole list, each row a subgrid of it, so keys, values and
   actions line up even when only some rows have a "Change" link. */
.sc-summary-list {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  column-gap: var(--space-4);
  margin: 0 0 var(--space-7);
  font-size: var(--text-body);
}
.sc-summary-list:not(:has(.sc-summary-list__actions)) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

.sc-summary-list__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid rgb(var(--color-border-subtle));
}
.sc-summary-list--no-border .sc-summary-list__row { border-bottom: 0; }
.sc-summary-list__row:last-child { border-bottom: 0; }

.sc-summary-list__key {
  margin: 0;
  color: rgb(var(--color-text-secondary));
  font-weight: var(--weight-semibold);
}

.sc-summary-list__value {
  margin: 0;
  overflow-wrap: anywhere;
}
.sc-summary-list__value > p { margin: 0 0 var(--space-1); }
.sc-summary-list__value > :last-child { margin-bottom: 0; }
/* A slug or reference number has no spaces to break at, so it wraps anywhere rather than pushing the card wider. */
.sc-summary-list__value code { overflow-wrap: anywhere; }

.sc-summary-list__actions {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.sc-summary-list__actions-list {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .sc-summary-list { display: block; }
  .sc-summary-list__row { grid-template-columns: 1fr; gap: var(--space-1); }
  .sc-summary-list__actions { text-align: left; }
}

/* ── Activity list ── */
.sc-activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-activity-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid rgb(var(--color-border-subtle));
}
.sc-activity-list__item:last-child { border-bottom: 0; }

.sc-activity-list__text { margin: 0; }
.sc-activity-list__time {
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-small);
  white-space: nowrap;
}

/* ── Menu ── The panel behind a disclosure button: account, More, app switcher. */
.sc-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 240px;
  max-width: calc(100vw - var(--gutter) * 2);
  padding: var(--space-2) 0;
  border: var(--border-width) solid rgb(var(--color-border-strong));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  font-size: var(--text-body-s);
  text-align: left;
}
.sc-menu--start { right: auto; left: 0; }

.sc-menu__header {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: var(--border-width) solid rgb(var(--color-border));
}
.sc-menu__header-title { display: block; font-weight: var(--weight-bold); }
.sc-menu__header-meta { display: block; color: rgb(var(--color-text-secondary)); font-size: var(--text-small); overflow-wrap: anywhere; }

.sc-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-menu__list + .sc-menu__list { margin-top: var(--space-2); padding-top: var(--space-2); border-top: var(--border-width) solid rgb(var(--color-border)); }

.sc-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: none;
  color: rgb(var(--color-link));
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}
.sc-menu__link:visited { color: rgb(var(--color-link)); }
.sc-menu__link:hover { background: rgb(var(--color-surface)); color: rgb(var(--color-link-hover)); text-decoration-thickness: max(3px, .1875rem); }
.sc-menu__link[aria-current="page"] { color: rgb(var(--color-text)); font-weight: var(--weight-bold); text-decoration: none; box-shadow: inset var(--border-width-rule) 0 rgb(var(--color-accent)); }
.sc-menu__link:focus-visible {
  outline: var(--focus-width) solid transparent;
  color: rgb(var(--color-focus-text));
  background: rgb(var(--color-focus));
  box-shadow: inset 0 calc(var(--focus-bar) * -1) rgb(var(--color-focus-text));
  text-decoration: none;
}