/* R.A.R.E. Training Club component styles. Loaded after tokens.css.
   Motion is not a token family in this system, so the two motion values live here. */

:root {
  --rare-duration-fast: 120ms;
  --rare-duration-slow: 240ms;
  --rare-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Any container filled with surface-brand takes this class: focus rings and
   text switch to their on-brand values automatically, so a focus ring never
   lands red on red. */
.rare-on-brand {
  --focus-ring: var(--focus-ring-on-brand);
  color: var(--on-brand);
}

.rare-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Display type steps up from screen-md. Token values are the mobile sizes. */
@media (min-width: 48rem) {
  .display-xl { font-size: 3.5rem; line-height: 3.25rem; }
  .display-lg { font-size: 2.5rem; line-height: 2.375rem; }
  .display-md { font-size: 1.75rem; line-height: 1.75rem; }
  .display-sm { font-size: 1.25rem; line-height: 1.375rem; }
}

/* ---------- Layout ---------- */

.rare-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  max-width: var(--container-md);
}

.rare-container--sm { max-width: var(--container-sm); }
.rare-container--lg { max-width: var(--container-lg); }
.rare-container--full { max-width: none; }

@media (min-width: 48rem) {
  .rare-container { padding-inline: var(--gutter-tablet); }
}

@media (min-width: 64rem) {
  .rare-container { padding-inline: var(--gutter-desktop); }
}

.rare-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rare-stack > * { margin-block: 0; }
.rare-stack--tight { gap: var(--space-3); }
.rare-stack--loose { gap: var(--space-8); }
.rare-stack--section { gap: var(--space-9); }

@media (min-width: 48rem) {
  .rare-stack--section { gap: var(--space-10); }
}

.rare-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Auto fit grid: responsive without a media query. --rare-grid-min sets the
   narrowest a cell may be before the column count drops. */
.rare-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--rare-grid-min, 16rem), 100%), 1fr));
}

.rare-prose { max-width: var(--measure); }

/* ---------- Button ---------- */

.rare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  border: var(--stroke-control) solid transparent;
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rare-duration-fast) var(--rare-ease),
    color var(--rare-duration-fast) var(--rare-ease),
    border-color var(--rare-duration-fast) var(--rare-ease);
}

.rare-btn--lg {
  min-height: 3.25rem;
  padding: var(--space-4) var(--space-6);
  font-size: 1.25rem;
  line-height: 1.25rem;
}

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

.rare-btn--primary {
  background: var(--interactive-primary);
  color: var(--on-brand);
  border-color: var(--interactive-primary);
}

.rare-btn--primary:hover {
  background: var(--interactive-primary-hover);
  border-color: var(--interactive-primary-hover);
}

.rare-btn--primary:active {
  background: var(--interactive-primary-active);
  border-color: var(--interactive-primary-active);
}

.rare-btn--inverse {
  background: var(--interactive-inverse);
  color: var(--red-500);
  border-color: var(--interactive-inverse);
}

.rare-btn--inverse:hover,
.rare-btn--inverse:active {
  background: var(--interactive-inverse-hover);
  border-color: var(--interactive-inverse-hover);
}

.rare-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.rare-on-brand .rare-btn--ghost {
  color: var(--on-brand);
  border-color: var(--on-brand);
}

.rare-btn--ghost:hover {
  color: var(--ink-accent);
  border-color: var(--border-brand);
}

.rare-on-brand .rare-btn--ghost:hover {
  background: var(--interactive-inverse);
  color: var(--red-500);
  border-color: var(--interactive-inverse);
}

.rare-btn:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-btn[aria-disabled='true'],
.rare-btn:disabled {
  background: var(--surface-disabled);
  color: var(--ink-disabled);
  border-color: var(--border-control);
  cursor: not-allowed;
}

.rare-btn__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: rare-spin 700ms linear infinite;
}

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

/* ---------- Link ---------- */

.rare-link {
  color: var(--ink-accent);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-xs);
}

.rare-link:hover { text-decoration-thickness: 2px; }

.rare-link:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-on-brand .rare-link { color: var(--on-brand); }

.rare-link--standalone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-weight: 700;
  text-decoration: none;
}

.rare-link--standalone:hover { text-decoration: underline; }

/* ---------- LabelChip ---------- */

.rare-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-none);
  background: var(--surface-brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rare-chip--deep { background: var(--surface-brand-deep); }
.rare-chip--black { background: var(--neutral-1000); color: var(--neutral-0); }

/* ---------- Badge ---------- */

.rare-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--stroke-hairline) solid currentColor;
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-weight: 700;
}

.rare-badge--neutral { color: var(--ink-muted); background: var(--surface-raised); }
.rare-badge--success { color: var(--status-success); background: var(--status-success-surface); }
.rare-badge--warning { color: var(--status-warning); background: var(--status-warning-surface); }
.rare-badge--danger { color: var(--status-danger); background: var(--status-danger-surface); }
.rare-badge--info { color: var(--status-info); background: var(--status-info-surface); }

/* ---------- SectionHeading ---------- */

.rare-heading { display: block; }

.rare-heading__eyebrow {
  display: block;
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-accent);
}

.rare-heading__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
}

.rare-heading--lg .rare-heading__text { font-size: 1.75rem; line-height: 1.75rem; letter-spacing: 0.01em; }
.rare-heading--xl .rare-heading__text { font-size: 2.25rem; line-height: 2.125rem; letter-spacing: 0.01em; }

@media (min-width: 48rem) {
  .rare-heading__text { font-size: 1.75rem; line-height: 1.75rem; }
  .rare-heading--lg .rare-heading__text { font-size: 2.5rem; line-height: 2.375rem; }
  .rare-heading--xl .rare-heading__text { font-size: 3.5rem; line-height: 3.25rem; }
}

.rare-on-brand .rare-heading__text,
.rare-on-brand .rare-heading__eyebrow { color: var(--on-brand); }

.rare-heading__rule {
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: var(--space-3);
  background: var(--border-brand);
  border: 0;
}

.rare-on-brand .rare-heading__rule { background: var(--on-brand); }

/* ---------- Card ---------- */

.rare-card {
  display: block;
  border-radius: var(--radius-none);
  padding: var(--space-4);
}

@media (min-width: 48rem) {
  .rare-card { padding: var(--space-5); }
}

.rare-card--brand { background: var(--surface-brand-deep); color: var(--on-brand); }
.rare-card--panel { background: var(--surface-raised); color: var(--ink); }
.rare-card--subtle { background: var(--surface-brand-subtle); color: var(--ink); }
.rare-card--outline { border: var(--stroke-hairline) solid var(--border-hairline); color: var(--ink); }
.rare-card--plain { padding: 0; color: var(--ink); }
.rare-card--raised { box-shadow: var(--shadow-card); }

.rare-card__title {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
}

@media (min-width: 48rem) {
  .rare-card__title { font-size: 1.25rem; line-height: 1.375rem; }
}

.rare-card--plain .rare-card__title {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-accent);
  margin-bottom: var(--space-1);
}

.rare-card__body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: inherit;
}

.rare-card--plain .rare-card__body { font-size: 1rem; line-height: 1.5rem; }
.rare-card__body > p { margin: 0 0 var(--space-2) 0; }
.rare-card__body > p:last-child { margin-bottom: 0; }

/* ---------- Field ---------- */

.rare-field { display: block; }

.rare-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.rare-field__required { color: var(--status-danger); }

.rare-field__control {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3);
  border: var(--stroke-control) solid var(--border-control);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
}

textarea.rare-field__control { min-height: 7rem; resize: vertical; }

.rare-field__control::placeholder { color: var(--ink-muted); }

.rare-field__control:hover { border-color: var(--border-strong); }

.rare-field__control:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--border-brand);
}

.rare-field__control:disabled {
  background: var(--surface-disabled);
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.rare-field--invalid .rare-field__control { border-color: var(--status-danger); }

.rare-field__hint,
.rare-field__error {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rare-field__hint { color: var(--ink-muted); }

.rare-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--status-danger);
  font-weight: 700;
}

/* ---------- Choice ---------- */

.rare-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding-block: var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink);
  cursor: pointer;
}

.rare-choice__input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0 0;
  accent-color: var(--interactive-primary);
}

.rare-choice__input:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-choice__input:disabled { cursor: not-allowed; }
.rare-choice:has(.rare-choice__input:disabled) { color: var(--ink-disabled); cursor: not-allowed; }
.rare-choice__description { display: block; color: var(--ink-muted); font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- Alert ---------- */

.rare-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 4px solid currentColor;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rare-alert--success { color: var(--status-success); background: var(--status-success-surface); }
.rare-alert--warning { color: var(--status-warning); background: var(--status-warning-surface); }
.rare-alert--danger { color: var(--status-danger); background: var(--status-danger-surface); }
.rare-alert--info { color: var(--status-info); background: var(--status-info-surface); }

.rare-alert__icon { flex: none; margin-top: 0.0625rem; }
.rare-alert__content { color: var(--ink); }
.rare-alert__title { display: block; margin-bottom: var(--space-1); font-weight: 700; color: inherit; }
.rare-alert__content > p { margin: 0; }

/* ---------- Accordion ---------- */

.rare-accordion { border-top: var(--stroke-hairline) solid var(--border-hairline); }

.rare-accordion__item { border-bottom: var(--stroke-hairline) solid var(--border-hairline); }

.rare-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-target);
  padding: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.rare-accordion__summary::-webkit-details-marker { display: none; }

.rare-accordion__summary:hover { color: var(--ink-accent); }

.rare-accordion__summary:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-accordion__marker {
  flex: none;
  color: var(--ink-accent);
  transition: transform var(--rare-duration-fast) var(--rare-ease);
}

.rare-accordion__item[open] .rare-accordion__marker { transform: rotate(180deg); }

.rare-accordion__panel {
  padding: 0 0 var(--space-4) 0;
  max-width: var(--measure);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink-muted);
}

/* ---------- Icon and motif ---------- */

.rare-icon { display: inline-block; vertical-align: middle; flex: none; }
.rare-chevrons { display: block; }

/* ---------- Global accessibility guards ---------- */

@media (prefers-reduced-motion: reduce) {
  .rare-btn,
  .rare-accordion__marker,
  .rare-link {
    transition: none;
  }
  .rare-btn__spinner { animation-duration: 2s; }
}

@media (forced-colors: active) {
  .rare-btn,
  .rare-chip,
  .rare-badge,
  .rare-card,
  .rare-alert,
  .rare-field__control {
    border: var(--stroke-hairline) solid ButtonText;
  }
  .rare-btn:focus-visible,
  .rare-link:focus-visible,
  .rare-field__control:focus-visible,
  .rare-choice__input:focus-visible,
  .rare-accordion__summary:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ---------- Skip link and SiteHeader ---------- */

.rare-skiplink {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-brand);
  color: var(--on-brand);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.rare-skiplink:focus-visible {
  transform: translateY(0);
  outline: var(--stroke-control) solid var(--focus-ring-on-brand);
  outline-offset: 2px;
}

.rare-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-base);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.rare-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4rem;
  padding-inline: var(--gutter-mobile);
}

@media (min-width: 48rem) {
  .rare-header__bar { padding-inline: var(--gutter-tablet); }
}

@media (min-width: 64rem) {
  .rare-header__bar { padding-inline: var(--gutter-desktop); }
}

.rare-header__brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.rare-header__nav,
.rare-header__cta { display: none; }

.rare-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--stroke-control) solid transparent;
}

.rare-header__link:hover { color: var(--ink-accent); }

.rare-header__link.is-current {
  color: var(--ink-accent);
  border-bottom-color: var(--border-brand);
}

.rare-header__link:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: var(--stroke-control) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.rare-header__toggle:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-header__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--gutter-mobile) var(--space-5);
  background: var(--surface-raised);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  box-shadow: var(--shadow-overlay);
}

.rare-header__panel[hidden] { display: none; }
.rare-header__panel nav { display: flex; flex-direction: column; }
.rare-header__panel .rare-header__link { border-bottom: 0; padding-inline: 0; font-size: 1rem; }
.rare-header__panelCta { margin-top: var(--space-3); }
.rare-header__panelCta .rare-btn { width: 100%; }

@media (min-width: 48rem) {
  .rare-header__nav { display: flex; align-items: center; gap: var(--space-4); }
  .rare-header__cta { display: block; }
  .rare-header__toggle,
  .rare-header__panel { display: none; }
}

/* ---------- Modal ---------- */

.rare-modal {
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  overflow: visible;
}

.rare-modal--sm { width: min(24rem, calc(100% - 2rem)); }

/* A dialog backdrop cannot always read a custom property, so the scrim value
   from surface-scrim is written out here. */
.rare-modal::backdrop { background: #000000b8; }

.rare-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
  background: var(--surface-raised);
  color: var(--ink);
  border-top: 4px solid var(--border-brand);
  box-shadow: var(--shadow-overlay);
}

.rare-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.rare-modal__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
}

.rare-modal__close,
.rare-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap-target);
  height: var(--tap-target);
  margin: calc(var(--space-2) * -1);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.rare-modal__close:hover,
.rare-toast__close:hover { color: var(--ink-accent); }

.rare-modal__close:focus-visible,
.rare-toast__close:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-modal__body {
  padding: 0 var(--space-5) var(--space-5);
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink);
}

.rare-modal__body > p { margin: 0 0 var(--space-4) 0; }
.rare-modal__body > p:last-child { margin-bottom: 0; }

.rare-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  background: var(--surface-sunken);
}

/* ---------- Tabs ---------- */

.rare-tabs__list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.rare-tabs__tab {
  flex: none;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
}

.rare-tabs__tab:hover { color: var(--ink); }

.rare-tabs__tab.is-selected {
  color: var(--ink);
  border-bottom-color: var(--border-brand);
}

.rare-tabs__tab:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: -2px;
}

.rare-tabs__panel {
  padding-top: var(--space-5);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink);
  max-width: var(--measure);
}

.rare-tabs__panel:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Table ---------- */

.rare-table__scroll { overflow-x: auto; }

.rare-table__scroll:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink);
}

.rare-table__caption {
  text-align: left;
  padding-bottom: var(--space-3);
  font-weight: 700;
  color: var(--ink-muted);
}

.rare-table th,
.rare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.rare-table thead th {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: var(--stroke-control) solid var(--border-strong);
  white-space: nowrap;
}

.rare-table tbody th { font-weight: 700; }
.rare-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.rare-table tbody tr:nth-child(even) { background: var(--surface-sunken); }

/* ---------- Pagination ---------- */

.rare-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.rare-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rare-pagination__page,
.rare-pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding-inline: var(--space-3);
  border: var(--stroke-control) solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.rare-pagination__page:hover,
.rare-pagination__step:hover:not(:disabled) {
  color: var(--ink-accent);
  border-color: var(--border-brand);
}

.rare-pagination__page.is-current {
  background: var(--interactive-primary);
  border-color: var(--interactive-primary);
  color: var(--on-brand);
  cursor: default;
}

.rare-pagination__page:focus-visible,
.rare-pagination__step:focus-visible {
  outline: var(--stroke-control) solid var(--focus-ring);
  outline-offset: 2px;
}

.rare-pagination__step:disabled {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.rare-pagination__gap {
  min-width: var(--space-5);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.rare-pagination__prevIcon { transform: rotate(90deg); }
.rare-pagination__nextIcon { transform: rotate(-90deg); }

/* ---------- Toast ---------- */

.rare-toastRegion {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(24rem, calc(100% - 2rem));
}

.rare-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 4px solid currentColor;
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rare-toast--success { color: var(--status-success); }
.rare-toast--warning { color: var(--status-warning); }
.rare-toast--danger { color: var(--status-danger); }
.rare-toast--info { color: var(--status-info); }

.rare-toast__icon { flex: none; margin-top: 0.0625rem; }
.rare-toast__content { flex: 1; color: var(--ink); }
.rare-toast__title { display: block; margin-bottom: var(--space-1); font-weight: 700; color: inherit; }
.rare-toast__content > p { margin: 0; }

/* ---------- Avatar ---------- */

.rare-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--surface-brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
}

.rare-avatar--sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
.rare-avatar--lg { width: 4rem; height: 4rem; font-size: 1.25rem; }

@media (forced-colors: active) {
  .rare-header__link.is-current,
  .rare-tabs__tab.is-selected { border-bottom-color: Highlight; }
  .rare-pagination__page.is-current { border-color: Highlight; }
  .rare-modal__inner,
  .rare-toast { border: var(--stroke-hairline) solid ButtonText; }
}


/* ---------- Motion, named the way the club counts ---------- */

:root {
  --rare-hit: 120ms;    /* a hit: colour, border and press */
  --rare-phrase: 320ms; /* a phrase: something arriving or leaving */
  --rare-beat: 80ms;    /* one beat between staggered children */
}

/* ---------- BrushEdge ---------- */

.rare-brush {
  display: block;
  width: 100%;
  margin-block: -1px;
}

/* ---------- LabelChip, angled ---------- */

.rare-chip--angled {
  padding-right: calc(var(--space-4) + 0.75rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.75rem) 100%, 0 100%);
}

/* ---------- Figure ---------- */

.rare-figure { margin: 0; }

.rare-figure__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.rare-figure__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rare-figure--mono .rare-figure__img { filter: grayscale(1) contrast(1.05); }

/* Duotone: greyscale multiplied onto the brand red, so highlights land on
   red-500 and shadows fall to black, the club's own pairing. */
.rare-figure--duotone { background: var(--red-500); }

.rare-figure--duotone .rare-figure__img {
  filter: grayscale(1) contrast(1.08) brightness(0.95);
  mix-blend-mode: multiply;
}

.rare-figure--raised { box-shadow: var(--shadow-card); }

.rare-figure__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--surface-scrim);
  opacity: var(--opacity-scrim);
  pointer-events: none;
}

.rare-figure__overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-4);
  color: var(--neutral-0);
}

.rare-figure__caption {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--ink-muted);
}

/* ---------- Reveal: the count-in ---------- */

.rare-reveal[data-reveal='pending'] > * { opacity: 0; }

.rare-reveal[data-reveal='in'] > * {
  animation: rare-count-in var(--rare-phrase) var(--rare-ease) both;
}

.rare-reveal[data-reveal='in'] > *:nth-child(1) { animation-delay: calc(var(--rare-beat) * 0); }
.rare-reveal[data-reveal='in'] > *:nth-child(2) { animation-delay: calc(var(--rare-beat) * 1); }
.rare-reveal[data-reveal='in'] > *:nth-child(3) { animation-delay: calc(var(--rare-beat) * 2); }
.rare-reveal[data-reveal='in'] > *:nth-child(4) { animation-delay: calc(var(--rare-beat) * 3); }
.rare-reveal[data-reveal='in'] > *:nth-child(5) { animation-delay: calc(var(--rare-beat) * 4); }
.rare-reveal[data-reveal='in'] > *:nth-child(6) { animation-delay: calc(var(--rare-beat) * 5); }
.rare-reveal[data-reveal='in'] > *:nth-child(7) { animation-delay: calc(var(--rare-beat) * 6); }
.rare-reveal[data-reveal='in'] > *:nth-child(8) { animation-delay: calc(var(--rare-beat) * 7); }
.rare-reveal[data-reveal='in'] > *:nth-child(9) { animation-delay: calc(var(--rare-beat) * 8); }
.rare-reveal[data-reveal='in'] > *:nth-child(10) { animation-delay: calc(var(--rare-beat) * 9); }
.rare-reveal[data-reveal='in'] > *:nth-child(11) { animation-delay: calc(var(--rare-beat) * 10); }
.rare-reveal[data-reveal='in'] > *:nth-child(12) { animation-delay: calc(var(--rare-beat) * 11); }

@keyframes rare-count-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rare-reveal > *,
  .rare-reveal[data-reveal='pending'] > * {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* ---------- ClassCard ---------- */

.rare-classCard {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-top: 4px solid var(--border-brand);
  border-radius: var(--radius-none);
}

.rare-classCard__media .rare-figure__frame { border-radius: 0; }

.rare-classCard__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  flex: 1;
}

@media (min-width: 48rem) {
  .rare-classCard__body { padding: var(--space-5); }
}

.rare-classCard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.rare-classCard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .rare-classCard__name { font-size: 1.25rem; line-height: 1.375rem; }
}

.rare-classCard__details {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rare-classCard__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-3);
}

.rare-classCard__row dt { color: var(--ink-muted); }
.rare-classCard__row dd { margin: 0; color: var(--ink); font-weight: 700; }

.rare-classCard__note {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

.rare-classCard .rare-btn { margin-top: auto; }

/* ---------- CoachCard ---------- */

.rare-coachCard {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-raised);
  border-left: 4px solid var(--border-brand);
}

.rare-coachCard__body { display: grid; gap: var(--space-2); }

.rare-coachCard__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.rare-coachCard__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-accent);
}

.rare-coachCard__bio {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

.rare-coachCard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- TestimonialCard ---------- */

.rare-quote {
  margin: 0;
  padding: var(--space-5);
  background: var(--surface-brand-subtle);
}

.rare-quote__text {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--ink);
  max-width: var(--measure);
}

.rare-quote__text p { margin: 0; }
.rare-quote__text p::before { content: '\201C'; }
.rare-quote__text p::after { content: '\201D'; }

.rare-quote__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rare-quote__name { display: block; font-weight: 700; color: var(--ink); }
.rare-quote__role { display: block; color: var(--ink-muted); }

/* ---------- SocialFrame ---------- */

.rare-social {
  position: relative;
  overflow: hidden;
  background: var(--surface-sunken);
  border: var(--stroke-hairline) solid var(--border-hairline);
}

.rare-social__canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  overflow: hidden;
  background: var(--surface-base);
}

.rare-social__guides { position: absolute; inset: 0; pointer-events: none; }

.rare-social__safe {
  position: absolute;
  inset: var(--safe-inset);
  border: 3px dashed var(--status-info);
}

.rare-social__guides.is-story .rare-social__safe {
  inset: var(--safe-top-story) var(--safe-inset) var(--safe-bottom-story);
}

.rare-social__band {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--status-info-surface);
  opacity: 0.55;
}

.rare-social__band.is-top { top: 0; height: var(--safe-top-story); }
.rare-social__band.is-bottom { bottom: 0; height: var(--safe-bottom-story); }