/* Apps Next — bridge for unported views.

   Restyles the classic component classes (buttons, badges, form fields, section
   cards…) in the Apps Next look, so a view renders in the new design before its
   markup is converted to sc- classes. Every rule is scoped to .sc-template__body,
   which only the apps_next layout sets, and loaded after the Tailwind build so it
   wins on specificity without !important.

   Delete a block once no view uses its classes; delete the file with the classic
   layout (MIGRATION.md §3.7, step 6). */

/* ── Page wrappers ── */
.sc-template__body .apps-dashboard > * + * { margin-top: var(--space-7); }

.sc-template__body .dashboard-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  margin-bottom: var(--space-7);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  box-shadow: none;
}
.sc-template__body .dashboard-welcome__accent-bar { display: none; }
.sc-template__body .dashboard-welcome__eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.sc-template__body .dashboard-welcome__title,
.sc-template__body .apps-form__title,
.sc-template__body .apps-onboarding__title {
  margin: 0;
  color: rgb(var(--color-text));
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
.sc-template__body .dashboard-welcome__subtitle,
.sc-template__body .apps-form__subtitle,
.sc-template__body .apps-onboarding__subtitle {
  margin: var(--space-3) 0 0;
  max-width: var(--readable-width);
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-s);
}

.sc-template__body .dashboard-split { gap: var(--space-7); }

/* ── Section cards ── */
.sc-template__body .section-card,
.sc-template__body .dashboard-section,
.sc-template__body .apps-dashboard__card,
.sc-template__body .apps-dashboard__welcome,
.sc-template__body .apps-onboarding__card {
  border: var(--border-width) solid rgb(var(--color-border));
  border-radius: var(--radius);
  background: rgb(var(--color-bg));
  box-shadow: none;
}
/* A card straight under a tab strip is that tab's panel: the strip's bottom border is its top edge. */
.sc-template__body .border-b + .section-card.border-t-0 { margin-top: 0; border-top: 0; }
/* Below 641px .sc-tabs is a borderless list, so the panel keeps its own top edge there.
   The family switcher (role="group") filters the whole page, not the card under it. */
@media (min-width: 641px) {
  .sc-template__body :is(.sc-tabs:not([role="group"]), :has(> .sc-tabs:not([role="group"]):only-child)):has(+ :is(.section-card, .sc-summary-card)) { margin-bottom: 0; }
  .sc-template__body :is(.sc-tabs:not([role="group"]), :has(> .sc-tabs:not([role="group"]):only-child)) + :is(.section-card, .sc-summary-card) { margin-top: 0; border-top: 0; }
}
.sc-template__body :is(.sc-tabs:not([role="group"]), :has(> .sc-tabs:not([role="group"]):only-child)) + :is(.section-card, .sc-summary-card) { margin-top: 0; }
/* Filter tabs alone in a bordered filter row sit on the row's full-width border:
   otherwise the list draws a second line 12px above it. */
/* The row already pads, so the flush-card tab margin would inset the tabs twice. */
/* Any other filters in the row (a category select) stack above the tabs, so the tabs can still sit on the border. */
.sc-template__body .border-b:is(:has(> .sc-tabs), :has(> div > .sc-tabs:only-child)) { padding: var(--space-4) var(--space-5) var(--space-3); }
.sc-template__body .border-b > .sc-tabs,
.sc-template__body .border-b > div:has(> .sc-tabs:only-child),
.sc-template__body .border-b > div > .sc-tabs:only-child { margin: 0; }
@media (min-width: 641px) {
  .sc-template__body .border-b:is(:has(> .sc-tabs), :has(> div > .sc-tabs:only-child)) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding-bottom: 0;
  }
  .sc-template__body .border-b > .sc-tabs,
  .sc-template__body .border-b > div:has(> .sc-tabs:only-child) { order: 1; }
  .sc-template__body .border-b > .sc-tabs .sc-tabs__list,
  .sc-template__body .border-b > div > .sc-tabs:only-child .sc-tabs__list { border-bottom: 0; }
}
.sc-template__body .sc-summary-card__content--flush > .sc-sub-navigation { padding-inline: var(--space-5); }
.sc-template__body .section-card__header,
.sc-template__body .dashboard-section__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid rgb(var(--color-border));
  background: none;
}
.sc-template__body .section-card__title,
.sc-template__body .dashboard-section__title {
  margin: 0;
  color: rgb(var(--color-text));
  font-family: var(--font-sans);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.sc-template__body .section-card__body,
.sc-template__body .dashboard-section__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.sc-template__body .section-card__body--flush,
.sc-template__body .dashboard-section__body--flush { padding: 0; }

/* ── Buttons ── Cardinal primary in every app; no radius, no fade.
   No display here: views hide and show buttons with Tailwind's hidden / md:hidden,
   which a higher-specificity display would override. Padding and line-height
   make the 44px target instead. */
.sc-template__body :is(.button, .action-button) {
  padding: 10px 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-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  text-decoration: none;
  vertical-align: middle;
  opacity: 1;
  transition: none;
}
.sc-template__body :is(.button, .action-button--primary):hover { background: rgb(var(--color-accent-hover)); opacity: 1; }
.sc-template__body :is(.button, .action-button--primary):active { background: rgb(var(--color-accent-pressed)); }
/* A plain or ghost action button is the secondary button; only --primary is cardinal. */
.sc-template__body :is(.button--secondary, .action-button:not(.action-button--primary)) {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  border-color: rgb(var(--color-border-input));
}
.sc-template__body :is(.button--secondary, .action-button:not(.action-button--primary)):hover {
  background: rgb(var(--color-secondary-hover));
  border-color: rgb(var(--color-border-strong));
}
.sc-template__body .button--danger { background: rgb(var(--color-error)); color: rgb(var(--color-text-inverse)); }
.sc-template__body .button--danger:hover { background: rgb(var(--color-error-hover)); }
.sc-template__body .button--small {
  padding: 7px var(--space-3);
  font-size: var(--text-body-s);
}
.sc-template__body .button--large {
  padding: 12px var(--space-6);
  font-size: var(--text-s);
}
.sc-template__body .button--link {
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-underline-offset: .15em;
}
.sc-template__body .button:disabled,
.sc-template__body .button[aria-disabled="true"] { opacity: .5; }

.sc-template__body .button:focus-visible,
.sc-template__body .tab:focus-visible,
.sc-template__body .sub-tabs a: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));
  --tw-ring-shadow: 0 0 transparent;
}

/* ── Links inside content ── Tailwind's blue utilities become the link colour; focus turns yellow. */
.sc-template__body main a:not([class*="sc-"]):not(.button):not(.tab):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;
}

/* ── Tabs ── The classic pill tabs become folder tabs. */
.sc-template__body .tabs {
  gap: 0;
  border-bottom: var(--border-width) solid rgb(var(--color-border));
}
.sc-template__body .tab {
  min-height: var(--control-height);
  margin: 0 var(--space-1) -1px 0;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.sc-template__body .tab:hover { background: rgb(var(--color-surface)); color: rgb(var(--color-link-hover)); }
.sc-template__body .tab--active,
.sc-template__body .tab--active:hover {
  border-color: rgb(var(--color-border));
  border-bottom-color: rgb(var(--color-bg));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  text-decoration: none;
}
.sc-template__body .tab__badge,
.sc-template__body .tab__badge--active {
  border-radius: var(--radius);
  background: rgb(var(--color-surface-strong));
  color: rgb(var(--color-text));
}

/* League home's standings block: its own Exo 2 heading and pill tabs, not .tabs. */
.sc-template__body .standings-leaderboards__heading {
  color: rgb(var(--color-text));
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.sc-template__body .standings-leaderboards__tabs {
  gap: 0;
  border-bottom: var(--border-width) solid rgb(var(--color-border));
}
.sc-template__body .standings-leaderboards__tab {
  min-height: var(--control-height);
  margin: 0 var(--space-1) -1px 0;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.sc-template__body .standings-leaderboards__tab:hover { background: rgb(var(--color-surface)); color: rgb(var(--color-link-hover)); }
.sc-template__body .standings-leaderboards__tab[aria-selected="true"] {
  border-color: rgb(var(--color-border));
  border-bottom-color: rgb(var(--color-bg));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  text-decoration: none;
}
.sc-template__body .standings-leaderboards__sport-select { border-radius: var(--radius); }
.sc-template__body .standings-leaderboards__body {
  border: var(--border-width) solid rgb(var(--color-border));
  border-radius: var(--radius);
  background: rgb(var(--color-bg));
}
.sc-template__body .standings-leaderboards__empty-desc { color: rgb(var(--color-text-secondary)); }

/* ── Badges ── Square tags; tones follow the meaning the classic class already names. */
.sc-template__body .badge,
.sc-template__body .status-badge {
  border-radius: var(--radius);
  padding: 2px var(--space-2) 3px;
  background: rgb(var(--tag-grey-bg));
  color: rgb(var(--tag-grey-text));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}
.sc-template__body :is(.badge--success, .badge--active, .badge--paid, .badge--present, .status-badge--success) {
  background: rgb(var(--tag-green-bg)); color: rgb(var(--tag-green-text));
}
.sc-template__body :is(.badge--warning, .badge--pending, .badge--unpaid, .status-badge--warning) {
  background: rgb(var(--tag-yellow-bg)); color: rgb(var(--tag-yellow-text));
}
.sc-template__body :is(.badge--danger, .badge--suspended, .badge--overdue, .badge--absent, .badge--rejected, .status-badge--danger, .status-badge--live) {
  background: rgb(var(--tag-red-bg)); color: rgb(var(--tag-red-text));
}
.sc-template__body :is(.badge--info, .badge--shared, .badge--approved, .status-badge--info, .badge--role-coach, .badge--role-assistant_coach) {
  background: rgb(var(--tag-blue-bg)); color: rgb(var(--tag-blue-text));
}
.sc-template__body :is(.badge--role-manager, .badge--role-parent_guardian) {
  background: rgb(var(--tag-purple-bg)); color: rgb(var(--tag-purple-text));
}

/* ── Forms ── */
.sc-template__body .apps-form { max-width: var(--readable-width); margin-inline: 0; }
.sc-template__body .apps-form--wide { max-width: none; }
.sc-template__body .apps-form__header { margin-bottom: var(--space-7); }
.sc-template__body .apps-form__section {
  padding: var(--space-6);
  border: var(--border-width) solid rgb(var(--color-border));
  border-radius: var(--radius);
  box-shadow: none;
}
/* Inside a card, a form section is a group under a rule, not a card of its own. */
.sc-template__body :is(.sc-summary-card, .section-card) .apps-form__section {
  padding: 0;
  border: 0;
}
.sc-template__body :is(.sc-summary-card, .section-card) .apps-form__section ~ .apps-form__section {
  padding-top: var(--space-7);
  border-top: var(--border-width) solid rgb(var(--color-border));
}
.sc-template__body .apps-form__section-title {
  margin-bottom: var(--space-5);
  color: rgb(var(--color-text));
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
}
.sc-template__body .apps-form__section-desc,
.sc-template__body .apps-form__field-hint,
.sc-template__body .form-hint,
.sc-template__body .apps-form__checkbox-hint {
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
}
.sc-template__body .apps-form__section-optional { color: rgb(var(--color-text-secondary)); font-size: var(--text-body-s); }
.sc-template__body .apps-form__field { margin-bottom: var(--space-6); }
.sc-template__body .apps-form__field:last-child { margin-bottom: 0; }
/* An inline field (a filter row) says so with mb-0; honour it, or its neighbour sits a field-gap lower. */
.sc-template__body .apps-form__field.mb-0 { margin-bottom: 0; }
.sc-template__body .apps-form__field:has(.apps-form__field-error) {
  padding-left: var(--space-4);
  border-left: var(--border-width-error) solid rgb(var(--color-error));
}
/* Form group order is label, hint, error, control: both sit above the control. */
.sc-template__body .apps-form__field-hint { display: block; margin: 0 0 var(--space-2); }
.sc-template__body .apps-form__field-error {
  display: block;
  margin: 0 0 var(--space-2);
  color: rgb(var(--color-error));
  font-size: var(--text-body-s);
  font-weight: var(--weight-bold);
}
/* One field per row: a row of fields is read as one answer, or skipped. */
.sc-template__body .apps-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.sc-template__body .apps-form__row:last-child { margin-bottom: 0; }
.sc-template__body .apps-form__row > .apps-form__field { margin-bottom: 0; }
.sc-template__body :is(.apps-form__row, .apps-form__field-hint, .apps-form__field-error)[hidden] { display: none; }
.sc-template__body .form-label,
.sc-template__body .apps-form__label {
  display: block;
  margin-bottom: var(--space-1);
  color: rgb(var(--color-text));
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}
.sc-template__body .form-input {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid rgb(var(--color-border-input));
  border-radius: var(--radius);
  box-shadow: none;
  color: rgb(var(--color-text));
  font-size: var(--text-body);
}
.sc-template__body textarea.form-input { min-height: 120px; }
/* Boxes are sized to the answer, as .sc-input--width-* and .sc-select are. A width class on the field wins over its type's default. */
.sc-template__body .form-input:not([class*="sc-input--width-"]) { max-width: var(--readable-width); }
.sc-template__body select.form-input { width: auto; min-width: 12em; max-width: 100%; }
/* Every select but the switchers that hide the native control behind their own chevron. */
.sc-template__body select:not([multiple], [size]:not([size="1"]), [class*="__native"], .standings-leaderboards__sport-select) {
  padding-right: var(--select-padding-right);
  -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-template__body select:not([multiple], [class*="__native"], .standings-leaderboards__sport-select) { appearance: auto; background-image: none; }
}
.sc-template__body .form-input:not([class*="sc-input--width-"]):is([type="number"], [type="date"]) { max-width: 23ex; }
.sc-template__body .form-input:not([class*="sc-input--width-"]):is([type="datetime-local"], [type="tel"]) { max-width: 41ex; }
.sc-template__body .form-input:focus {
  border-color: rgb(var(--color-border-strong));
  outline: var(--focus-width) solid rgb(var(--color-focus));
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px rgb(var(--color-border-strong));
  --tw-ring-shadow: 0 0 transparent;
}
.sc-template__body .form-input[aria-invalid="true"],
.sc-template__body .form-input--error { border: 2px solid rgb(var(--color-error)); }

.sc-template__body .apps-form__checkbox,
.sc-template__body input[type="checkbox"].rounded {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(var(--color-border-strong));
  border-radius: var(--radius);
  color: rgb(var(--color-text));
}
/* Hand-written checkboxes and radios are still native controls; without this they paint in the browser's blue. */
.sc-template__body input:is([type="checkbox"], [type="radio"]):not(.sc-checkboxes__input, .sc-radios__input) { accent-color: rgb(var(--color-text)); }
.sc-template__body .apps-form__checkbox: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));
}
.sc-template__body .apps-form__checkbox-text { font-size: var(--text-body); font-weight: var(--weight-regular); color: rgb(var(--color-text)); }

.sc-template__body .apps-form__errors {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border: var(--border-width-error) solid rgb(var(--color-error));
  border-radius: var(--radius);
  background: rgb(var(--color-bg));
}
.sc-template__body .apps-form__errors-heading {
  margin-bottom: var(--space-4);
  color: rgb(var(--color-text));
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
}
.sc-template__body .apps-form__errors-list {
  padding: 0;
  list-style: none;
  color: rgb(var(--color-error));
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

.sc-template__body .apps-form__actions {
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4) var(--space-6);
}

.sc-template__body .apps-form__sports,
.sc-template__body .apps-form__divisions-panel { border-radius: var(--radius); background: rgb(var(--color-surface)); }
.sc-template__body .apps-form__sport-option {
  border: var(--border-width) solid rgb(var(--color-border-input));
  border-radius: var(--radius);
  background: rgb(var(--color-bg));
}
.sc-template__body .apps-form__sport-option:has(input:checked) {
  border-color: rgb(var(--color-border-strong));
  background: rgb(var(--color-text));
  color: rgb(var(--color-text-inverse));
}
.sc-template__body .apps-form__sport-option:has(input: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));
}

.sc-template__body .radio-tile__label,
.sc-template__body .segmented-control,
.sc-template__body .segmented-control__option { border-radius: var(--radius); }

/* ── KPI and stat cards ── Surface fill and a top bar, as .sc-key-stats. */
.sc-template__body .kpi-grid,
.sc-template__body .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-4);
}
.sc-template__body .stat-card,
.sc-template__body .kpi {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 0;
  border-top: var(--border-width-bar) solid rgb(var(--stat-grey));
  border-radius: var(--radius);
  background: rgb(var(--color-surface));
  box-shadow: none;
}
.sc-template__body .stat-card__icon,
.sc-template__body .kpi__icon { display: none; }
.sc-template__body .stat-card__label,
.sc-template__body .kpi__label {
  color: rgb(var(--color-text));
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}
.sc-template__body .stat-card__value,
.sc-template__body .kpi__value {
  color: rgb(var(--color-text));
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.sc-template__body .stat-card__trend,
.sc-template__body .kpi__delta { color: rgb(var(--color-text-secondary)); font-size: var(--text-body-s); }

/* ── Empty states ── */
.sc-template__body :is(.empty-state, .empty-state--full) {
  padding: var(--space-7) var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: rgb(var(--color-surface));
  text-align: left;
  /* The classic empty state is a centred flex column; start it at the left like the text. */
  align-items: flex-start;
}
.sc-template__body .empty-state__icon { display: none; }
/* Tailwind's preflight makes every svg a block, which drops a button's label below its icon. */
.sc-template__body :is(.button, .action-button, .sc-button) svg { display: inline-block; vertical-align: -0.125em; }
.sc-template__body :is(.button, .action-button, .sc-button) svg:not(:last-child) { margin-right: 0.4em; }
/* Views that centre the old icon-and-text empty state by hand still start at the left like empty_state. */
.sc-template__body .empty-state__text { max-width: var(--readable-width); margin-inline: 0; text-align: left; }
.sc-template__body .empty-state__title {
  color: rgb(var(--color-text));
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
}
.sc-template__body .empty-state__text,
.sc-template__body .empty-state__desc {
  max-width: var(--readable-width);
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body);
}

/* ── Steps, checklist, activity ── */
.sc-template__body .setup-checklist,
.sc-template__body .wizard-progress { border-radius: var(--radius); box-shadow: none; }
.sc-template__body .steps__marker,
.sc-template__body .steps__number { border-radius: var(--radius); }
.sc-template__body .activity-stream__icon { display: none; }

/* ── Inline alerts not yet on the partial ── */
.sc-template__body .inline-alert { border-radius: var(--radius); }


/* The error summary takes focus on load (sc-error-summary controller). */
.sc-template__body .apps-form__errors:is(:focus, :focus-visible) { outline: var(--focus-width) solid rgb(var(--color-focus)); outline-offset: 0; box-shadow: none; }

/* ── Tailwind utility patterns in unswept views ──
   design/apps-next/AUDIT.md lists the views that build components from utilities.
   config/tailwind.apps.js already maps their colours, radii and shadows onto the
   tokens; these rules cover what a theme cannot reach (arbitrary values, focus
   rings, small-caps labels). The audit still counts them. */

/* Hand-built badges (a pill with a tinted fill and small text) become square tags. */
.sc-template__body main .rounded-full.text-xs[class*="bg-"] { border-radius: var(--radius); }

/* Brand red used as link colour: links are blue and underlined. Brand red as a fill stays the accent. */
.sc-template__body main a:is(.text-\[\#c41e3a\], .text-\[\#C41E3A\]) {
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}
.sc-template__body main a:is(.text-\[\#c41e3a\], .text-\[\#C41E3A\]):hover {
  color: rgb(var(--color-link-hover));
  text-decoration-thickness: max(3px, .1875rem);
}

/* Custom focus rings become the yellow focus. */
.sc-template__body main [class*="focus:ring"]:focus-visible {
  --tw-ring-offset-shadow: 0 0 transparent;
  --tw-ring-shadow: 0 0 transparent;
  outline: var(--focus-width) solid rgb(var(--color-focus));
  outline-offset: 0;
  box-shadow: 0 0 0 calc(var(--focus-width) + 3px) rgb(var(--color-focus-text));
}

/* Small-caps eyebrows become captions. */
.sc-template__body main .uppercase:is([class*="tracking-wide"], [class*="tracking-wider"], [class*="tracking-widest"]) {
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}

/* Exo 2 headings become Source Sans 3. */
.sc-template__body main [class*="Exo_2"] { font-family: var(--font-sans); letter-spacing: var(--tracking-display); }

/* A responsive_table inside a hand-built bordered card would draw a second
   border inside the card's, doubling every edge. */
.sc-template__body :is(.border, .border-2, .section-card, .dashboard-section, .section-card__body--flush) > .sc-table-wrapper { margin-bottom: 0; border: 0; }
.sc-template__body .section-card__body--flush > .sc-empty-state { margin: var(--space-5); }

/* Hand-written tables that responsive_table cannot express (inline edit rows,
   form grids, box scores, totals rows) get the .sc-table look. Score sheets
   are their own printable component and keep theirs. */
.sc-template__body main table:not(.sc-table, [class*="score-sheet"]) {
  border-collapse: collapse;
  font-size: var(--text-body-s);
  font-variant-numeric: tabular-nums;
}
.sc-template__body main table:not(.sc-table, [class*="score-sheet"]) thead th {
  padding: var(--space-3) var(--space-4);
  background: rgb(var(--color-surface));
  color: rgb(var(--color-text-secondary));
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.sc-template__body main table:not(.sc-table, [class*="score-sheet"]) :is(tbody, tfoot) :is(td, th) {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid rgb(var(--color-border));
}

/* Rows of actions wrap: the bridge's 44px buttons no longer fit a phone-width row built for smaller ones. */
.sc-template__body main .flex:has(> .button, > form > .button, > .segmented-control) {
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
}

/* On phones a plain table scrolls inside itself instead of widening the page. */
@media (max-width: 640px) {
  .sc-template__body main table:not(.sc-table, [class*="score-sheet"]) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Article and page bodies read in the body ink, not the classic slate. */
.sc-template__body .blog-prose { color: rgb(var(--color-text)); }

/* Dashboard columns keep their own height, so a short card does not stretch to match its neighbour. */
.sc-template__body .dashboard-grid { align-items: start; }

/* Hand-built tables (not responsive_table) get the design system's table-link rule too. */
.sc-template__body table:not(.sc-table) a:not([class*="button"]) {
  color: rgb(var(--color-link));
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .15em;
}
.sc-template__body table:not(.sc-table) a:not([class*="button"]):hover {
  color: rgb(var(--color-link-hover));
  text-decoration-thickness: max(3px, .1875rem);
}
.sc-template__body table:not(.sc-table) a:not([class*="button"]):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;
}