/*
 * Shared semantic components. Load after tokens.css and base.css.
 * State meaning stays in visible markup and ARIA; CSS adds a redundant shape,
 * boundary, and tokenized color treatment without generating interface copy.
 */

/* Visible labels stay adjacent to decorative pictorial cues. */
:where(
  .icon-label,
  .control__content,
  .nav-link__content,
  .card__meta,
  .badge__content,
  .status__content,
  .loading-indicator
) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  .component-icon,
  .control__icon,
  .nav-link__icon,
  .card__icon,
  .badge__icon,
  .status__icon,
  .paywall__icon
) {
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  color: currentColor;
}

:where(
  .icon-label__text,
  .control__label,
  .nav-link__label,
  .badge__label,
  .status__text,
  .loading-indicator__label
) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* Actions: secondary is the neutral default; tiers opt into stronger or lighter emphasis. */
:where(
  .button,
  .action,
  .btn,
  .nav-toggle,
  .site-nav__toggle,
  .dialog__close,
  [data-component="action"]
) {
  --action-bg: var(--color-action-secondary-bg);
  --action-text: var(--color-action-secondary-text);
  --action-border: var(--color-action-secondary-border);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-min-block);
  min-inline-size: var(--target-size-min);
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--action-border);
  border-radius: var(--radius-control);
  color: var(--action-text);
  background-color: var(--action-bg);
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(
  .button--primary,
  .action--primary,
  .btn--primary,
  [data-action-tier="primary"]
) {
  --action-bg: var(--color-action-primary-bg);
  --action-text: var(--color-action-primary-text);
  --action-border: var(--color-action-primary-border);

  box-shadow: var(--shadow-raised);
}

:where(
  .button--secondary,
  .action--secondary,
  .btn--secondary,
  [data-action-tier="secondary"]
) {
  --action-bg: var(--color-action-secondary-bg);
  --action-text: var(--color-action-secondary-text);
  --action-border: var(--color-action-secondary-border);
}

:where(
  .button--tertiary,
  .action--tertiary,
  .btn--tertiary,
  [data-action-tier="tertiary"]
) {
  --action-bg: transparent;
  --action-text: var(--color-action-tertiary-text);
  --action-border: transparent;

  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

:where(
  .button,
  .action,
  .btn,
  .nav-toggle,
  .site-nav__toggle,
  .dialog__close,
  [data-component="action"]
):focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .button,
    .action,
    .btn,
    .nav-toggle,
    .site-nav__toggle,
    .dialog__close,
    [data-component="action"]
  ):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    --action-bg: var(--color-surface-canvas);
    --action-text: var(--color-brand-ink-950);
    --action-border: var(--color-brand-gold-700);

    box-shadow: var(--shadow-raised);
  }

  :where(
    .button--primary,
    .action--primary,
    .btn--primary,
    [data-action-tier="primary"]
  ):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    --action-bg: var(--color-brand-ink-950);
    --action-text: var(--color-brand-gold-300);
    --action-border: var(--color-brand-gold-500);
  }

  :where(
    .button--tertiary,
    .action--tertiary,
    .btn--tertiary,
    [data-action-tier="tertiary"]
  ):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    --action-bg: var(--color-surface-canvas);
    --action-text: var(--color-brand-gold-700);
    --action-border: transparent;

    box-shadow: none;
    text-decoration-thickness: 0.12em;
  }
}

:where(
  .button,
  .action,
  .btn,
  .nav-toggle,
  .site-nav__toggle,
  .dialog__close,
  [data-component="action"]
):not(:disabled):not([aria-disabled="true"]):active {
  --action-border: var(--color-border-strong);

  box-shadow: var(--shadow-inset);
}

:where(
  .button,
  .action,
  .btn,
  [data-component="action"]
):where(
  .is-selected,
  [aria-pressed="true"],
  [aria-checked="true"],
  [data-state="selected"]
) {
  --action-bg: var(--color-brand-gold-300);
  --action-text: var(--color-brand-ink-950);
  --action-border: var(--color-brand-gold-700);

  box-shadow: var(--shadow-inset);
  text-decoration: none;
}

:where(
  .button,
  .action,
  .btn,
  .nav-toggle,
  .site-nav__toggle,
  .dialog__close,
  [data-component="action"]
):where(:disabled, [aria-disabled="true"], .is-disabled, [data-state="disabled"]) {
  --action-bg: var(--color-surface-canvas);
  --action-text: var(--color-text-secondary);
  --action-border: var(--color-border-subtle);

  box-shadow: none;
  text-decoration: none;
  cursor: not-allowed;
}

:where(
  .button,
  .action,
  .btn,
  [data-component="action"]
):where(.is-success, [data-state="success"]) {
  --action-bg: var(--color-status-success-bg);
  --action-text: var(--color-status-success);
  --action-border: var(--color-status-success);
}

:where(
  .button,
  .action,
  .btn,
  [data-component="action"]
):where(.is-warning, [data-state="warning"]) {
  --action-bg: var(--color-status-warning-bg);
  --action-text: var(--color-status-warning);
  --action-border: var(--color-status-warning);

  border-style: double;
}

:where(
  .button,
  .action,
  .btn,
  [data-component="action"]
):where(.is-locked, [data-state="locked"]) {
  --action-bg: var(--color-surface-canvas);
  --action-text: var(--color-text-primary);
  --action-border: var(--color-border-strong);

  border-style: dashed;
  box-shadow: var(--shadow-inset);
}

:where(
  .button,
  .action,
  .btn,
  [data-component="action"]
):where(.is-error, [data-state="error"]) {
  --action-bg: var(--color-status-error-bg);
  --action-text: var(--color-status-error);
  --action-border: var(--color-status-error);

  border-style: double;
}

:where(
  .button,
  .action,
  .btn,
  [data-component="action"]
):where(.is-loading, [aria-busy="true"], [data-state="loading"]) {
  --action-border: var(--color-status-info);

  box-shadow: var(--shadow-inset);
  cursor: wait;
}

/*
 * Both idle and pending content occupy the same grid cell. Visibility swaps do
 * not remove either label from sizing, so pending controls retain their width.
 */
:where(.stable-control, [data-stable-control]) {
  display: inline-grid;
  grid-template-areas: "control-content";
  align-items: center;
  justify-items: center;
}

:where(.stable-control__idle, .control__idle, [data-control-content="idle"]),
:where(.stable-control__pending, .control__loading, [data-control-content="loading"]) {
  grid-area: control-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.stable-control__pending, .control__loading, [data-control-content="loading"]) {
  visibility: hidden;
}

:where(.stable-control__pending, .control__loading, [data-control-content="loading"])[hidden] {
  display: inline-flex;
}

:where(.stable-control, [data-stable-control]):where(
  .is-loading,
  [aria-busy="true"],
  [data-state="loading"]
)
  :where(.stable-control__idle, .control__idle, [data-control-content="idle"]) {
  visibility: hidden;
}

:where(.stable-control, [data-stable-control]):where(
  .is-loading,
  [aria-busy="true"],
  [data-state="loading"]
)
  :where(.stable-control__pending, .control__loading, [data-control-content="loading"]):not([hidden]) {
  visibility: visible;
}

/* Loading indicators always retain operation text beside the decorative ring. */
:where(.spinner, .loading-indicator__icon, [data-loading-indicator]) {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  border: calc(var(--border-width) + var(--border-width)) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-pill);
  animation: component-loading-spin calc(var(--motion-reveal) + var(--motion-reveal)) linear infinite;
}

:where(.spinner, .loading-indicator__icon, [data-loading-indicator])[data-paused="true"],
[data-loading-paused="true"]
  :where(.spinner, .loading-indicator__icon, [data-loading-indicator]) {
  animation-play-state: paused;
}

@keyframes component-loading-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Shared inline links preserve underlines in every state. */
:where(.link, .text-link, [data-component="link"]) {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  max-inline-size: 100%;
  color: var(--color-brand-ink-700);
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

:where(.link, .text-link, [data-component="link"]):focus-visible {
  border-radius: var(--radius-control);
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  :where(.link, .text-link, [data-component="link"]):not([aria-disabled="true"]):hover {
    color: var(--color-brand-gold-700);
    text-decoration-thickness: 0.12em;
  }
}

:where(.link, .text-link, [data-component="link"]):not([aria-disabled="true"]):active {
  color: var(--color-brand-ink-950);
  text-decoration-style: double;
}

:where(.link, .text-link, [data-component="link"]):where(
  [aria-current],
  [aria-selected="true"],
  .is-selected,
  [data-state="selected"]
) {
  color: var(--color-brand-ink-950);
  background-color: var(--color-brand-gold-300);
  border-radius: var(--radius-control);
  box-shadow: 0 var(--border-width) 0 currentColor;
  padding-inline: var(--space-1);
  text-decoration-thickness: 0.12em;
}

:where(.link, .text-link, [data-component="link"]):where(
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  color: var(--color-text-secondary);
  background-color: transparent;
  box-shadow: none;
  text-decoration-style: dashed;
  cursor: not-allowed;
}

:where(.link, .text-link, [data-component="link"]):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  color: var(--color-status-info);
  text-decoration-style: dotted;
  cursor: wait;
}

/* Site navigation uses a persistent underline shape plus aria-current text state. */
:where(.site-nav__link, .nav-link, .navigation__link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-min-block);
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-text-inverse);
  background-color: transparent;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
}

:where(.site-nav__link, .nav-link, .navigation__link)::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-1);
  block-size: var(--focus-width);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-gold-300);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-standard);
}

:where(.site-nav__link, .nav-link, .navigation__link):focus-visible {
  border-color: var(--color-brand-gold-300);
  outline: var(--focus-width) solid var(--color-focus-ring-inverse);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  :where(.site-nav__link, .nav-link, .navigation__link):not([aria-disabled="true"]):hover {
    border-color: var(--color-brand-gold-500);
    color: var(--color-brand-gold-300);
    background-color: var(--color-brand-ink-950);
  }

  :where(.site-nav__link, .nav-link, .navigation__link):not([aria-disabled="true"]):hover::after {
    transform: scaleX(1);
  }
}

:where(.site-nav__link, .nav-link, .navigation__link):not([aria-disabled="true"]):active {
  border-color: var(--color-border-strong);
  color: var(--color-text-inverse);
  background-color: var(--color-brand-ink-950);
  box-shadow: var(--shadow-inset);
}

:where(.site-nav__link, .nav-link, .navigation__link):where(
  [aria-current="page"],
  [aria-current="location"],
  [aria-selected="true"],
  .is-selected,
  [data-state="selected"]
) {
  border-color: var(--color-brand-gold-300);
  color: var(--color-brand-gold-300);
  background-color: var(--color-brand-ink-950);
}

:where(.site-nav__link, .nav-link, .navigation__link):where(
  [aria-current="page"],
  [aria-current="location"],
  [aria-selected="true"],
  .is-selected,
  [data-state="selected"]
)::after {
  transform: scaleX(1);
}

:where(.site-nav__link, .nav-link, .navigation__link):where(
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  border-color: var(--color-border-strong);
  color: var(--color-border-subtle);
  background-color: transparent;
  cursor: not-allowed;
}

:where(.site-nav__link, .nav-link, .navigation__link):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  border-style: dashed;
  border-color: var(--color-brand-gold-300);
  color: var(--color-brand-gold-300);
  cursor: wait;
}

:where(.nav-toggle, .site-nav__toggle) {
  --action-bg: transparent;
  --action-text: var(--color-brand-gold-300);
  --action-border: var(--color-brand-gold-300);
}

:where(.nav-toggle, .site-nav__toggle)[aria-expanded="true"] {
  --action-bg: var(--color-brand-gold-300);
  --action-text: var(--color-brand-ink-950);
  --action-border: var(--color-brand-gold-300);

  box-shadow: var(--shadow-inset);
}

/* Equivalent content cards share geometry, spacing, elevation, and title treatment. */
:where(.card, .content-card, [data-component="card"]) {
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
  overflow-wrap: break-word;
}

:where(.card__header, .content-card__header) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-inline-size: 0;
  margin-block-end: var(--space-3);
}

:where(.card__title, .content-card__title) {
  margin: 0;
  color: var(--color-brand-ink-900);
  font-family: var(--font-display);
  font-size: var(--text-step-1);
  font-weight: 700;
  line-height: var(--line-heading);
  text-wrap: balance;
}

:where(.card__body, .content-card__body) {
  min-inline-size: 0;
  color: var(--color-text-primary);
}

:where(.card__body, .content-card__body) > :last-child {
  margin-block-end: 0;
}

:where(.card__meta, .content-card__meta) {
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
}

:where(.card__actions, .content-card__actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

:where(a.card, button.card, .card--interactive, [data-card-interactive="true"]) {
  color: var(--color-text-primary);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

:where(a.card, button.card, .card--interactive, [data-card-interactive="true"]):focus-visible {
  border-color: var(--color-brand-ink-900);
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  :where(a.card, button.card, .card--interactive, [data-card-interactive="true"]):not(
    :disabled,
    [aria-disabled="true"],
    [aria-busy="true"]
  ):hover {
    border-color: var(--color-brand-gold-700);
    box-shadow: var(--shadow-floating);
  }
}

:where(a.card, button.card, .card--interactive, [data-card-interactive="true"]):not(
  :disabled,
  [aria-disabled="true"]
):active {
  border-color: var(--color-brand-ink-900);
  box-shadow: var(--shadow-inset);
}

:where(.card, .content-card, [data-component="card"]):where(
  .is-selected,
  [aria-selected="true"],
  [aria-pressed="true"],
  [aria-checked="true"],
  [data-state="selected"]
) {
  border-color: var(--color-brand-gold-700);
  background-color: var(--color-brand-gold-300);
  box-shadow: var(--shadow-inset);
}

:where(.card, .content-card, [data-component="card"]):where(
  :disabled,
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-canvas);
  box-shadow: none;
  cursor: not-allowed;
}

:where(.card, .content-card, [data-component="card"]):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  border-color: var(--color-status-info);
  border-style: dashed;
  box-shadow: var(--shadow-inset);
  cursor: wait;
}

:where(.card, .content-card, [data-component="card"]):where(
  .is-success,
  [data-state="success"]
) {
  border-inline-start: var(--focus-width) solid var(--color-status-success);
  background-color: var(--color-status-success-bg);
}

:where(.card, .content-card, [data-component="card"]):where(
  .is-warning,
  [data-state="warning"]
) {
  border-inline-start: var(--focus-width) double var(--color-status-warning);
  background-color: var(--color-status-warning-bg);
}

:where(.card, .content-card, [data-component="card"]):where(
  .is-locked,
  [data-state="locked"]
) {
  border-color: var(--color-border-strong);
  border-style: dashed;
  background-color: var(--color-surface-canvas);
  box-shadow: var(--shadow-inset);
}

:where(.card, .content-card, [data-component="card"]):where(
  .is-error,
  [data-state="error"]
) {
  border-inline-start: var(--focus-width) double var(--color-status-error);
  background-color: var(--color-status-error-bg);
}

/* Badges use visible text plus a distinct decorative marker shape. */
:where(.badge, [data-component="badge"]) {
  --badge-fg: var(--color-text-primary);
  --badge-bg: var(--color-surface-canvas);
  --badge-border: var(--color-border-strong);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-size-floor);
  max-inline-size: 100%;
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--badge-border);
  border-radius: var(--radius-pill);
  color: var(--badge-fg);
  background-color: var(--badge-bg);
  font-size: var(--text-step--1);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

:where(.badge, [data-component="badge"])::before {
  content: "";
  flex: 0 0 auto;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border: var(--border-width) solid currentColor;
  background-color: currentColor;
}

:where(.badge--info, .badge[data-state="info"], .badge[data-status="info"]) {
  --badge-fg: var(--color-status-info);
  --badge-bg: var(--color-status-info-bg);
  --badge-border: var(--color-status-info);
}

:where(.badge--info, .badge[data-state="info"], .badge[data-status="info"])::before {
  border-radius: var(--radius-pill);
  background-color: transparent;
}

:where(
  .badge--success,
  .badge[data-state="success"],
  .badge[data-status="success"],
  .badge[data-status="correct"],
  .badge[data-status="free"]
) {
  --badge-fg: var(--color-status-success);
  --badge-bg: var(--color-status-success-bg);
  --badge-border: var(--color-status-success);
}

:where(
  .badge--success,
  .badge[data-state="success"],
  .badge[data-status="success"],
  .badge[data-status="correct"],
  .badge[data-status="free"]
)::before {
  border-radius: var(--radius-pill);
}

:where(
  .badge--warning,
  .badge[data-state="warning"],
  .badge[data-status="warning"]
) {
  --badge-fg: var(--color-status-warning);
  --badge-bg: var(--color-status-warning-bg);
  --badge-border: var(--color-status-warning);
}

:where(
  .badge--warning,
  .badge[data-state="warning"],
  .badge[data-status="warning"]
)::before {
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

:where(
  .badge--error,
  .badge[data-state="error"],
  .badge[data-status="error"],
  .badge[data-status="incorrect"]
) {
  --badge-fg: var(--color-status-error);
  --badge-bg: var(--color-status-error-bg);
  --badge-border: var(--color-status-error);
}

:where(
  .badge--error,
  .badge[data-state="error"],
  .badge[data-status="error"],
  .badge[data-status="incorrect"]
)::before {
  border: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

:where(
  .badge--selected,
  .badge[data-state="selected"],
  .badge[data-status="selected"],
  .badge[data-status="premium"]
) {
  --badge-fg: var(--color-brand-ink-950);
  --badge-bg: var(--color-brand-gold-300);
  --badge-border: var(--color-brand-gold-700);
}

:where(
  .badge--selected,
  .badge[data-state="selected"],
  .badge[data-status="selected"],
  .badge[data-status="premium"]
)::before {
  border-radius: var(--space-1);
  background-color: var(--color-brand-ink-950);
}

:where(
  .badge--locked,
  .badge[data-state="locked"],
  .badge[data-status="locked"]
) {
  --badge-fg: var(--color-text-primary);
  --badge-bg: var(--color-surface-canvas);
  --badge-border: var(--color-border-strong);

  border-style: dashed;
}

:where(
  .badge--locked,
  .badge[data-state="locked"],
  .badge[data-status="locked"]
)::before {
  border-radius: var(--radius-control) var(--radius-control) var(--space-1) var(--space-1);
  background-color: transparent;
}

:where(.badge--loading, .badge[data-state="loading"], .badge[data-status="loading"]) {
  --badge-fg: var(--color-status-info);
  --badge-bg: var(--color-status-info-bg);
  --badge-border: var(--color-status-info);
}

:where(.badge--loading, .badge[data-state="loading"], .badge[data-status="loading"])::before {
  border: calc(var(--border-width) + var(--border-width)) solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  animation: component-loading-spin calc(var(--motion-reveal) + var(--motion-reveal)) linear infinite;
}

:where(.badge, [data-component="badge"]):where(
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  --badge-fg: var(--color-text-secondary);
  --badge-bg: var(--color-surface-canvas);
  --badge-border: var(--color-border-subtle);

  border-style: dashed;
}

/* Forms retain persistent labels, instructions, and associated error text. */
:where(.form-field, .field-group) {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.form-field > label, .field-group > label, .form-label) {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  max-inline-size: 100%;
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

:where(.required-indicator, .form-required) {
  color: var(--color-status-error);
  font-weight: 700;
}

:where(.field-hint, .form-hint, .field-instruction) {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="color"]),
  .field-group > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):not([type="color"]),
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
) {
  inline-size: 100%;
  min-block-size: var(--control-min-block);
  max-inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-inset);
  line-height: 1.35;
}

:where(.form-textarea, .form-field > textarea, .field-group > textarea) {
  min-block-size: calc(
    var(--control-min-block) + var(--control-min-block) + var(--control-min-block)
  );
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ):not(:disabled):not([aria-disabled="true"]):not([aria-invalid="true"]):hover {
    border-color: var(--color-brand-ink-700);
  }
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):focus-visible {
  border-color: var(--color-brand-ink-900);
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):not(:disabled):not([aria-disabled="true"]):active {
  border-color: var(--color-brand-ink-950);
  box-shadow: var(--shadow-inset);
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):where(:disabled, [aria-disabled="true"], .is-disabled, [data-state="disabled"]) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-canvas);
  box-shadow: none;
  cursor: not-allowed;
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):where([readonly], [data-state="locked"]) {
  border-color: var(--color-border-strong);
  border-style: dashed;
  background-color: var(--color-surface-canvas);
  box-shadow: var(--shadow-inset);
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):where([aria-invalid="true"], .is-error, [data-state="error"]) {
  border-color: var(--color-status-error);
  background-color: var(--color-status-error-bg);
  box-shadow: 0 0 0 var(--border-width) var(--color-status-error);
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):where(.is-warning, [data-state="warning"]) {
  border-color: var(--color-status-warning);
  background-color: var(--color-status-warning-bg);
  border-style: double;
}

:where(
  .form-control,
  .form-input,
  .form-select,
  .form-textarea,
  .form-field > input,
  .field-group > input,
  .form-field > select,
  .field-group > select,
  .form-field > textarea,
  .field-group > textarea
):where(.is-success, [data-state="success"]) {
  border-color: var(--color-status-success);
  background-color: var(--color-status-success-bg);
  box-shadow: 0 0 0 var(--border-width) var(--color-status-success);
}

:where(.form-field, .field-group):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  padding: var(--space-3);
  border: var(--border-width) dashed var(--color-status-info);
  border-radius: var(--radius-control);
  background-color: var(--color-status-info-bg);
  cursor: wait;
}

:where(.choice, .choice-control, .check-field, .radio-field) {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: var(--target-size-min);
  max-inline-size: 100%;
  padding-block: var(--space-2);
  color: var(--color-text-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
  cursor: pointer;
}

:where(.choice, .choice-control, .check-field, .radio-field)
  > :where(input[type="checkbox"], input[type="radio"]),
:where(input[type="checkbox"], input[type="radio"]).form-control {
  flex: 0 0 auto;
  inline-size: var(--target-size-floor);
  block-size: var(--target-size-floor);
  margin: 0;
  accent-color: var(--color-brand-ink-900);
}

:where(.choice, .choice-control, .check-field, .radio-field):has(
  > input:checked
) {
  color: var(--color-brand-ink-950);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: var(--color-brand-gold-700);
  text-decoration-thickness: var(--focus-width);
  text-underline-offset: var(--space-1);
}

:where(.choice, .choice-control, .check-field, .radio-field):has(
  > input:disabled
) {
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

:where(.form-field, .field-group) input[type="range"] {
  inline-size: 100%;
  min-block-size: var(--control-min-block);
  accent-color: var(--color-brand-ink-900);
  cursor: pointer;
}

:where(.form-field, .field-group) input[type="file"] {
  inline-size: 100%;
  max-inline-size: 100%;
  color: var(--color-text-primary);
}

:where(.form-field, .field-group) input[type="file"]::file-selector-button {
  min-block-size: var(--control-min-block);
  margin-inline-end: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-action-secondary-border);
  border-radius: var(--radius-control);
  color: var(--color-action-secondary-text);
  background-color: var(--color-action-secondary-bg);
  font-weight: 700;
  cursor: pointer;
}

:where(.field-error, .form-error, [data-validation-message]) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-status-error);
  font-size: var(--text-step--1);
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

:where(.field-error, .form-error, [data-validation-message])::before {
  content: "";
  flex: 0 0 auto;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  margin-block-start: var(--space-1);
  background-color: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

:where(.validation-summary, .error-summary, [data-validation-summary]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-status-error);
  border-inline-start-width: var(--focus-width);
  border-radius: var(--radius-control);
  color: var(--color-status-error);
  background-color: var(--color-status-error-bg);
  box-shadow: var(--shadow-inset);
  overflow-wrap: anywhere;
}

:where(.validation-summary, .error-summary, [data-validation-summary])::before {
  content: "";
  inline-size: var(--space-3);
  block-size: var(--space-3);
  margin-block-start: var(--space-1);
  background-color: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

:where(.validation-summary, .error-summary, [data-validation-summary]) > * {
  min-inline-size: 0;
}

:where(.validation-summary, .error-summary, [data-validation-summary]) :where(h2, h3, p) {
  color: inherit;
}

:where(.validation-summary, .error-summary, [data-validation-summary]) ul {
  margin-block-end: 0;
}

:where(.validation-summary, .error-summary, [data-validation-summary]) a {
  color: inherit;
  font-weight: 700;
  text-decoration-thickness: 0.12em;
}

:where(.validation-summary, .error-summary, [data-validation-summary]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

/* Tabs wrap instead of forcing page-level overflow. */
:where(.tabs, [data-component="tabs"]) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.tab-list, .tabs__list, [role="tablist"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0 0 var(--space-4);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-canvas);
  list-style: none;
}

:where(.tab, .tabs__tab, [role="tab"]) {
  appearance: none;
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-min-block);
  min-inline-size: var(--target-size-min);
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-brand-ink-700);
  background-color: transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

:where(.tab, .tabs__tab, [role="tab"])::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-1);
  block-size: var(--focus-width);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-gold-700);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-standard);
}

:where(.tab, .tabs__tab, [role="tab"]):focus-visible {
  border-color: var(--color-brand-ink-900);
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  :where(.tab, .tabs__tab, [role="tab"]):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--color-brand-gold-700);
    color: var(--color-brand-ink-950);
    background-color: var(--color-surface-raised);
  }
}

:where(.tab, .tabs__tab, [role="tab"]):not(:disabled):not([aria-disabled="true"]):active {
  border-color: var(--color-brand-ink-900);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-inset);
}

:where(.tab, .tabs__tab, [role="tab"]):where(
  [aria-selected="true"],
  .is-selected,
  [data-state="selected"]
) {
  border-color: var(--color-brand-gold-700);
  color: var(--color-brand-ink-950);
  background-color: var(--color-brand-gold-300);
  box-shadow: var(--shadow-inset);
}

:where(.tab, .tabs__tab, [role="tab"]):where(
  [aria-selected="true"],
  .is-selected,
  [data-state="selected"]
)::after {
  transform: scaleX(1);
}

:where(.tab, .tabs__tab, [role="tab"]):where(
  :disabled,
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-canvas);
  box-shadow: none;
  cursor: not-allowed;
}

:where(.tab, .tabs__tab, [role="tab"]):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  border-color: var(--color-status-info);
  border-style: dashed;
  color: var(--color-status-info);
  background-color: var(--color-status-info-bg);
  cursor: wait;
}

:where(.tab-panel, .tabs__panel, [role="tabpanel"]) {
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}

:where(.tab-panel, .tabs__panel, [role="tabpanel"])[hidden] {
  display: none;
}

/* Native details/summary retains disclosure semantics and an adjacent text label. */
:where(.accordion, [data-component="accordion"]) {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.accordion__item, details.accordion-item) {
  min-inline-size: 0;
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
  overflow: clip;
}

:where(.accordion__summary, details.accordion-item > summary) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--control-min-block);
  padding: var(--space-4) var(--space-5);
  color: var(--color-brand-ink-900);
  background-color: var(--color-surface-raised);
  font-family: var(--font-display);
  font-size: var(--text-step-1);
  font-weight: 700;
  line-height: var(--line-heading);
  overflow-wrap: anywhere;
  cursor: pointer;
  list-style: none;
}

:where(.accordion__summary, details.accordion-item > summary)::-webkit-details-marker {
  display: none;
}

:where(.accordion__summary, details.accordion-item > summary)::after {
  content: "";
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border-inline-end: calc(var(--border-width) + var(--border-width)) solid currentColor;
  border-block-end: calc(var(--border-width) + var(--border-width)) solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--motion-fast) var(--ease-standard);
}

:where(.accordion__summary, details.accordion-item > summary):focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: calc(0px - var(--focus-width));
}

@media (hover: hover) and (pointer: fine) {
  :where(.accordion__summary, details.accordion-item > summary):hover {
    color: var(--color-brand-gold-700);
    background-color: var(--color-surface-canvas);
  }
}

:where(.accordion__summary, details.accordion-item > summary):active {
  color: var(--color-brand-ink-950);
  box-shadow: var(--shadow-inset);
}

:where(.accordion__item[open], details.accordion-item[open]) {
  border-color: var(--color-brand-gold-700);
}

:where(.accordion__item[open], details.accordion-item[open])
  > :where(.accordion__summary, summary) {
  color: var(--color-brand-ink-950);
  background-color: var(--color-brand-gold-300);
}

:where(.accordion__item[open], details.accordion-item[open])
  > :where(.accordion__summary, summary)::after {
  transform: rotate(225deg);
}

:where(.accordion__body, .accordion__panel, details.accordion-item > :not(summary)) {
  min-inline-size: 0;
  padding-inline: var(--space-5);
}

:where(.accordion__body, .accordion__panel) {
  padding-block: var(--space-4) var(--space-5);
}

:where(.accordion__item, details.accordion-item):where(
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  border-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-canvas);
  box-shadow: none;
}

:where(.accordion__item, details.accordion-item):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  border-color: var(--color-status-info);
  border-style: dashed;
  background-color: var(--color-status-info-bg);
  cursor: wait;
}

:where(.accordion__item, details.accordion-item):where(
  .is-success,
  [data-state="success"]
) {
  border-inline-start: var(--focus-width) solid var(--color-status-success);
  background-color: var(--color-status-success-bg);
}

:where(.accordion__item, details.accordion-item):where(
  .is-warning,
  [data-state="warning"]
) {
  border-inline-start: var(--focus-width) double var(--color-status-warning);
  background-color: var(--color-status-warning-bg);
}

:where(.accordion__item, details.accordion-item):where(
  .is-locked,
  [data-state="locked"]
) {
  border-color: var(--color-border-strong);
  border-style: dashed;
  background-color: var(--color-surface-canvas);
}

:where(.accordion__item, details.accordion-item):where(
  .is-error,
  [data-state="error"]
) {
  border-inline-start: var(--focus-width) double var(--color-status-error);
  background-color: var(--color-status-error-bg);
}

/* Semantic statuses pair explicit visible text with a marker and boundary shape. */
:where(.status, .notice, [data-component="status"]) {
  --status-fg: var(--color-status-info);
  --status-bg: var(--color-status-info-bg);
  --status-border: var(--color-status-info);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--space-4);
  border: var(--border-width) solid var(--status-border);
  border-inline-start-width: var(--focus-width);
  border-radius: var(--radius-control);
  color: var(--status-fg);
  background-color: var(--status-bg);
  box-shadow: var(--shadow-inset);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

:where(.status, .notice, [data-component="status"])::before {
  content: "";
  inline-size: var(--space-3);
  block-size: var(--space-3);
  margin-block-start: var(--space-1);
  border: calc(var(--border-width) + var(--border-width)) solid currentColor;
  border-radius: var(--radius-pill);
  background-color: transparent;
}

:where(.status, .notice, [data-component="status"]) > * {
  min-inline-size: 0;
}

:where(.status__title, .notice__title) {
  display: block;
  margin-block-end: var(--space-1);
  color: inherit;
  font-weight: 700;
  line-height: 1.35;
}

:where(.status__message, .notice__message) {
  margin: 0;
  color: inherit;
}

:where(.status__actions, .notice__actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

:where(
  .status--success,
  .notice--success,
  .status[data-state="success"],
  .status[data-status="success"],
  .status[data-status="correct"]
) {
  --status-fg: var(--color-status-success);
  --status-bg: var(--color-status-success-bg);
  --status-border: var(--color-status-success);
}

:where(
  .status--success,
  .notice--success,
  .status[data-state="success"],
  .status[data-status="success"],
  .status[data-status="correct"]
)::before {
  border: 0;
  background-color: currentColor;
}

:where(
  .status--warning,
  .notice--warning,
  .status[data-state="warning"],
  .status[data-status="warning"]
) {
  --status-fg: var(--color-status-warning);
  --status-bg: var(--color-status-warning-bg);
  --status-border: var(--color-status-warning);

  border-inline-start-style: double;
}

:where(
  .status--warning,
  .notice--warning,
  .status[data-state="warning"],
  .status[data-status="warning"]
)::before {
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

:where(
  .status--error,
  .notice--error,
  .status[data-state="error"],
  .status[data-status="error"],
  .status[data-status="incorrect"]
) {
  --status-fg: var(--color-status-error);
  --status-bg: var(--color-status-error-bg);
  --status-border: var(--color-status-error);

  border-inline-start-style: double;
}

:where(
  .status--error,
  .notice--error,
  .status[data-state="error"],
  .status[data-status="error"],
  .status[data-status="incorrect"]
)::before {
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

:where(
  .status--locked,
  .notice--locked,
  .status[data-state="locked"],
  .status[data-status="locked"]
) {
  --status-fg: var(--color-text-primary);
  --status-bg: var(--color-surface-canvas);
  --status-border: var(--color-border-strong);

  border-style: dashed;
}

:where(
  .status--locked,
  .notice--locked,
  .status[data-state="locked"],
  .status[data-status="locked"]
)::before {
  border-radius: var(--radius-control) var(--radius-control) var(--space-1) var(--space-1);
}

:where(
  .status--selected,
  .notice--selected,
  .status[data-state="selected"],
  .status[data-status="selected"]
) {
  --status-fg: var(--color-brand-ink-950);
  --status-bg: var(--color-brand-gold-300);
  --status-border: var(--color-brand-gold-700);
}

:where(
  .status--selected,
  .notice--selected,
  .status[data-state="selected"],
  .status[data-status="selected"]
)::before {
  border-radius: var(--space-1);
  border-color: var(--color-brand-ink-950);
  background-color: var(--color-brand-ink-950);
}

:where(
  .status--loading,
  .notice--loading,
  .status[data-state="loading"],
  .status[data-status="loading"],
  .status[aria-busy="true"]
) {
  --status-fg: var(--color-status-info);
  --status-bg: var(--color-status-info-bg);
  --status-border: var(--color-status-info);

  border-style: dashed;
}

:where(
  .status--loading,
  .notice--loading,
  .status[data-state="loading"],
  .status[data-status="loading"],
  .status[aria-busy="true"]
)::before {
  border-inline-end-color: transparent;
  animation: component-loading-spin calc(var(--motion-reveal) + var(--motion-reveal)) linear infinite;
}

:where(.status, .notice, [data-component="status"]):where(
  [aria-disabled="true"],
  .is-disabled,
  [data-state="disabled"]
) {
  --status-fg: var(--color-text-secondary);
  --status-bg: var(--color-surface-canvas);
  --status-border: var(--color-border-subtle);

  border-style: dashed;
  box-shadow: none;
}

/* Progress always has an adjacent label/value; color never carries completion alone. */
:where(.progress-group, .progress-component, [data-component="progress"]) {
  --progress-ratio: 0;

  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.progress__header, .progress__labels) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  color: var(--color-text-primary);
  font-weight: 700;
}

:where(.progress__value-text, .progress__status) {
  color: var(--color-text-secondary);
  font-size: var(--text-step--1);
  font-weight: 700;
}

:where(progress.progress, .progress-group progress, [data-component="progress"] progress) {
  inline-size: 100%;
  block-size: var(--space-3);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-brand-ink-900);
  background-color: var(--color-surface-canvas);
  accent-color: var(--color-brand-ink-900);
}

:where(progress.progress, .progress-group progress, [data-component="progress"] progress)::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-canvas);
}

:where(progress.progress, .progress-group progress, [data-component="progress"] progress)::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

:where(progress.progress, .progress-group progress, [data-component="progress"] progress)::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

:where(.progress__track, .progress-track) {
  position: relative;
  inline-size: 100%;
  block-size: var(--space-3);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-canvas);
  box-shadow: var(--shadow-inset);
}

:where(.progress__bar, .progress-bar) {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-brand-ink-900);
  transform: scaleX(var(--progress-ratio, 0));
  transform-origin: left center;
  transition: transform var(--motion-standard) var(--ease-standard);
}

[dir="rtl"] :where(.progress__bar, .progress-bar) {
  transform-origin: right center;
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-success,
  [data-state="success"]
) {
  color: var(--color-status-success);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-success,
  [data-state="success"]
) :where(progress, .progress__bar, .progress-bar) {
  color: var(--color-status-success);
  background-color: var(--color-status-success);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-warning,
  [data-state="warning"]
) {
  color: var(--color-status-warning);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-warning,
  [data-state="warning"]
) :where(progress, .progress__bar, .progress-bar) {
  color: var(--color-status-warning);
  background-color: var(--color-status-warning);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-error,
  [data-state="error"]
) {
  color: var(--color-status-error);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-error,
  [data-state="error"]
) :where(progress, .progress__bar, .progress-bar) {
  color: var(--color-status-error);
  background-color: var(--color-status-error);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-loading,
  [aria-busy="true"],
  [data-state="loading"]
) :where(.progress__track, .progress-track) {
  border-color: var(--color-status-info);
  border-style: dashed;
  background-color: var(--color-status-info-bg);
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-loading,
  [aria-busy="true"],
  [data-state="loading"]
) :where(.progress__bar, .progress-bar) {
  background-color: var(--color-status-info);
  transform: scaleX(var(--progress-ratio, 0));
}

:where(.progress-group, .progress-component, [data-component="progress"]):where(
  .is-locked,
  [data-state="locked"]
) :where(progress, .progress__track, .progress-track) {
  border-style: dashed;
  border-color: var(--color-border-strong);
}

/* Dialog geometry lives in layout.css; this layer supplies surface and state treatment. */
:where(.dialog-layer, .dialog-overlay, [data-dialog-overlay]) {
  color: var(--color-text-primary);
  background-color: var(--color-surface-inverse);
}

:where(dialog.dialog) {
  padding: 0;
  border: 0;
  color: var(--color-text-primary);
  background-color: transparent;
}

:where(dialog.dialog)::backdrop {
  background-color: var(--color-surface-inverse);
  opacity: 0.8;
}

:where(.dialog__surface, [data-dialog-surface], dialog.dialog) {
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
}

:where(.dialog__header, .dialog__footer) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface-raised);
}

.dialog__header {
  border-block-end: var(--border-width) solid var(--color-border-subtle);
}

.dialog__footer {
  border-block-start: var(--border-width) solid var(--color-border-subtle);
}

:where(.dialog__title, [data-dialog-title]) {
  min-inline-size: 0;
  margin: 0;
  color: var(--color-brand-ink-900);
  font-family: var(--font-display);
  font-size: var(--text-step-2);
  line-height: var(--line-heading);
  overflow-wrap: anywhere;
}

:where(.dialog__body, [data-dialog-scroll]) {
  padding: var(--space-5);
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
}

:where(.dialog__close, [data-dialog-close]) {
  flex: 0 0 auto;
  min-inline-size: var(--target-size-min);
  min-block-size: var(--target-size-min);
}

:where(.dialog__surface, [data-dialog-surface], dialog.dialog):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  border-color: var(--color-status-info);
  border-style: dashed;
}

:where(.dialog__surface, [data-dialog-surface], dialog.dialog):where(
  .is-success,
  [data-state="success"]
) {
  border-color: var(--color-status-success);
  border-block-start-width: var(--focus-width);
}

:where(.dialog__surface, [data-dialog-surface], dialog.dialog):where(
  .is-warning,
  [data-state="warning"]
) {
  border-color: var(--color-status-warning);
  border-block-start-width: var(--focus-width);
  border-block-start-style: double;
}

:where(.dialog__surface, [data-dialog-surface], dialog.dialog):where(
  .is-locked,
  [data-state="locked"]
) {
  border-color: var(--color-border-strong);
  border-style: dashed;
}

:where(.dialog__surface, [data-dialog-surface], dialog.dialog):where(
  .is-error,
  [data-state="error"]
) {
  border-color: var(--color-status-error);
  border-block-start-width: var(--focus-width);
  border-block-start-style: double;
}

/* Paywalls communicate access with a lock shape, visible heading/text, and actions. */
:where(.paywall, [data-component="paywall"]) {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--space-6);
  border: var(--border-width) dashed var(--color-border-strong);
  border-block-start: var(--focus-width) solid var(--color-brand-gold-700);
  border-radius: var(--radius-panel);
  color: var(--color-text-primary);
  background-color: var(--color-surface-canvas);
  box-shadow: var(--shadow-inset);
  overflow-wrap: anywhere;
}

:where(.paywall__heading, .paywall__title) {
  margin: 0;
  color: var(--color-brand-ink-900);
  font-family: var(--font-display);
  font-size: var(--text-step-2);
  line-height: var(--line-heading);
}

:where(.paywall__access) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  font-weight: 700;
}

:where(.paywall__access)::before {
  content: "";
  flex: 0 0 auto;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border: calc(var(--border-width) + var(--border-width)) solid currentColor;
  border-radius: var(--radius-control) var(--radius-control) var(--space-1) var(--space-1);
}

:where(.paywall__message) {
  max-inline-size: var(--reading-max);
  margin: 0;
  color: var(--color-text-secondary);
}

:where(.paywall__actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  inline-size: 100%;
}

:where(.paywall, [data-component="paywall"]):where(
  [aria-busy="true"],
  .is-loading,
  [data-state="loading"]
) {
  border-color: var(--color-status-info);
  background-color: var(--color-status-info-bg);
  cursor: wait;
}

:where(.paywall, [data-component="paywall"]):where(
  .is-success,
  [data-state="success"]
) {
  border-color: var(--color-status-success);
  border-block-start-style: solid;
  background-color: var(--color-status-success-bg);
}

:where(.paywall, [data-component="paywall"]):where(
  .is-warning,
  [data-state="warning"]
) {
  border-color: var(--color-status-warning);
  border-block-start-style: double;
  background-color: var(--color-status-warning-bg);
}

:where(.paywall, [data-component="paywall"]):where(
  .is-locked,
  [data-state="locked"]
) {
  border-color: var(--color-border-strong);
  border-block-start-color: var(--color-brand-gold-700);
  background-color: var(--color-surface-canvas);
}

:where(.paywall, [data-component="paywall"]):where(
  .is-error,
  [data-state="error"]
) {
  border-color: var(--color-status-error);
  border-block-start-style: double;
  background-color: var(--color-status-error-bg);
}

/* Light/dark surface combinations retain explicit, surface-appropriate focus contrast. */
:where(.surface-inverse, [data-surface="inverse"]) {
  color: var(--color-text-inverse);
  background-color: var(--color-surface-inverse);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(h1, h2, h3, h4, h5, h6, .card__title, .content-card__title) {
  color: var(--color-brand-gold-300);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.link, .text-link, [data-component="link"]) {
  color: var(--color-brand-gold-300);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.link, .text-link, [data-component="link"]):where(
    [aria-current],
    [aria-selected="true"],
    .is-selected,
    [data-state="selected"]
  ) {
  color: var(--color-brand-ink-950);
  background-color: var(--color-brand-gold-300);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.link, .text-link, [data-component="link"]):where(
    [aria-disabled="true"],
    .is-disabled,
    [data-state="disabled"]
  ) {
  color: var(--color-border-subtle);
  background-color: transparent;
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.link, .text-link, [data-component="link"]):where(
    [aria-busy="true"],
    .is-loading,
    [data-state="loading"]
  ) {
  color: var(--color-brand-gold-300);
  background-color: var(--color-brand-ink-950);
}

@media (hover: hover) and (pointer: fine) {
  :where(.surface-inverse, [data-surface="inverse"])
    :where(.link, .text-link, [data-component="link"]):not(
      :where(
        [aria-current],
        [aria-selected="true"],
        [aria-disabled="true"],
        [aria-busy="true"],
        .is-selected,
        .is-disabled,
        .is-loading,
        [data-state]
      )
    ):hover {
    color: var(--color-text-inverse);
  }
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button--primary, .action--primary, .btn--primary, [data-action-tier="primary"]) {
  --action-bg: var(--color-action-primary-inverse-bg);
  --action-text: var(--color-action-primary-inverse-text);
  --action-border: var(--color-action-primary-inverse-border);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button--secondary, .action--secondary, .btn--secondary, [data-action-tier="secondary"]) {
  --action-bg: transparent;
  --action-text: var(--color-brand-gold-300);
  --action-border: var(--color-brand-gold-300);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button--tertiary, .action--tertiary, .btn--tertiary, [data-action-tier="tertiary"]) {
  --action-bg: transparent;
  --action-text: var(--color-brand-gold-300);
  --action-border: transparent;
}

@media (hover: hover) and (pointer: fine) {
  :where(.surface-inverse, [data-surface="inverse"])
    :where(.button--primary, .action--primary, .btn--primary, [data-action-tier="primary"]):not(
      :where(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state])
    ):hover {
    --action-bg: var(--color-brand-gold-300);
    --action-text: var(--color-brand-ink-950);
    --action-border: var(--color-text-inverse);
  }

  :where(.surface-inverse, [data-surface="inverse"])
    :where(.button--secondary, .action--secondary, .btn--secondary, [data-action-tier="secondary"]):not(
      :where(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state])
    ):hover {
    --action-bg: var(--color-brand-ink-950);
    --action-text: var(--color-brand-gold-300);
    --action-border: var(--color-brand-gold-500);
  }

  :where(.surface-inverse, [data-surface="inverse"])
    :where(.button--tertiary, .action--tertiary, .btn--tertiary, [data-action-tier="tertiary"]):not(
      :where(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state])
    ):hover {
    --action-bg: var(--color-brand-ink-950);
    --action-text: var(--color-text-inverse);
    --action-border: transparent;
  }
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    .is-selected,
    [aria-pressed="true"],
    [aria-checked="true"],
    [data-state="selected"]
  ) {
  --action-bg: var(--color-brand-gold-300);
  --action-text: var(--color-brand-ink-950);
  --action-border: var(--color-brand-gold-700);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    [data-state="disabled"]
  ) {
  --action-bg: var(--color-brand-ink-950);
  --action-text: var(--color-border-subtle);
  --action-border: var(--color-border-strong);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    .is-success,
    [data-state="success"]
  ) {
  --action-bg: var(--color-status-success-bg);
  --action-text: var(--color-status-success);
  --action-border: var(--color-status-success);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    .is-warning,
    [data-state="warning"]
  ) {
  --action-bg: var(--color-status-warning-bg);
  --action-text: var(--color-status-warning);
  --action-border: var(--color-status-warning);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    .is-locked,
    [data-state="locked"]
  ) {
  --action-bg: var(--color-surface-canvas);
  --action-text: var(--color-text-primary);
  --action-border: var(--color-border-strong);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    .is-error,
    [data-state="error"]
  ) {
  --action-bg: var(--color-status-error-bg);
  --action-text: var(--color-status-error);
  --action-border: var(--color-status-error);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.button, .action, .btn, [data-component="action"]):where(
    .is-loading,
    [aria-busy="true"],
    [data-state="loading"]
  ) {
  --action-border: var(--color-status-info);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .button,
    .action,
    .btn,
    .link,
    .text-link,
    .nav-toggle,
    .site-nav__toggle,
    .dialog__close,
    [data-component="action"],
    [data-component="link"]
  ):focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]) {
  border-color: var(--color-border-strong);
  color: var(--color-text-inverse);
  background-color: var(--color-brand-ink-950);
}

@media (hover: hover) and (pointer: fine) {
  :where(.surface-inverse, [data-surface="inverse"])
    :where(a.card, button.card, .card--interactive, [data-card-interactive="true"]):not(
      :where(:disabled, [aria-disabled="true"], [aria-busy="true"], [data-state])
    ):hover {
    border-color: var(--color-brand-gold-500);
    box-shadow: var(--shadow-floating);
  }
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(a.card, button.card, .card--interactive, [data-card-interactive="true"]):focus-visible {
  border-color: var(--color-brand-gold-300);
  outline-color: var(--color-focus-ring-inverse);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):not(
    :where(
      :disabled,
      [aria-disabled="true"],
      [aria-busy="true"],
      [aria-selected="true"],
      [aria-pressed="true"],
      [aria-checked="true"],
      .is-disabled,
      .is-loading,
      .is-selected,
      [data-state]
    )
  )
  :where(.card__body, .content-card__body, .card__meta, .content-card__meta) {
  color: var(--color-text-inverse);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-selected,
    [aria-selected="true"],
    [aria-pressed="true"],
    [aria-checked="true"],
    [data-state="selected"]
  ) {
  border-color: var(--color-brand-gold-700);
  color: var(--color-brand-ink-950);
  background-color: var(--color-brand-gold-300);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    :disabled,
    [aria-disabled="true"],
    .is-disabled,
    [data-state="disabled"]
  ) {
  border-color: var(--color-border-strong);
  color: var(--color-border-subtle);
  background-color: var(--color-brand-ink-950);
  box-shadow: none;
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    [aria-busy="true"],
    .is-loading,
    [data-state="loading"]
  ) {
  border-color: var(--color-status-info);
  color: var(--color-status-info);
  background-color: var(--color-status-info-bg);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-success,
    [data-state="success"]
  ) {
  border-color: var(--color-status-success);
  color: var(--color-status-success);
  background-color: var(--color-status-success-bg);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-warning,
    [data-state="warning"]
  ) {
  border-color: var(--color-status-warning);
  color: var(--color-status-warning);
  background-color: var(--color-status-warning-bg);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-locked,
    [data-state="locked"]
  ) {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background-color: var(--color-surface-canvas);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-error,
    [data-state="error"]
  ) {
  border-color: var(--color-status-error);
  color: var(--color-status-error);
  background-color: var(--color-status-error-bg);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-selected,
    [aria-selected="true"],
    [aria-pressed="true"],
    [aria-checked="true"],
    [data-state="selected"]
  ) :where(.card__title, .content-card__title),
:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-locked,
    [data-state="locked"]
  ) :where(.card__title, .content-card__title) {
  color: var(--color-brand-ink-950);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-success,
    [data-state="success"]
  ) :where(.card__title, .content-card__title) {
  color: var(--color-status-success);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-warning,
    [data-state="warning"]
  ) :where(.card__title, .content-card__title) {
  color: var(--color-status-warning);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    [aria-busy="true"],
    .is-loading,
    [data-state="loading"]
  ) :where(.card__title, .content-card__title) {
  color: var(--color-status-info);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(.card, .content-card, [data-component="card"]):where(
    .is-error,
    [data-state="error"]
  ) :where(.card__title, .content-card__title) {
  color: var(--color-status-error);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ) {
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ):where(:disabled, [aria-disabled="true"], .is-disabled, [data-state="disabled"]) {
  color: var(--color-text-secondary);
  background-color: var(--color-surface-canvas);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ):where([readonly], [data-state="locked"]) {
  background-color: var(--color-surface-canvas);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ):where([aria-invalid="true"], .is-error, [data-state="error"]) {
  background-color: var(--color-status-error-bg);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ):where(.is-warning, [data-state="warning"]) {
  background-color: var(--color-status-warning-bg);
}

:where(.surface-inverse, [data-surface="inverse"])
  :where(
    .form-control,
    .form-input,
    .form-select,
    .form-textarea,
    .form-field > input,
    .field-group > input,
    .form-field > select,
    .field-group > select,
    .form-field > textarea,
    .field-group > textarea
  ):where(.is-success, [data-state="success"]) {
  background-color: var(--color-status-success-bg);
}

/* Reduced motion keeps status and loading meaning while removing rotation. */
@media (prefers-reduced-motion: reduce) {
  :where(
    .spinner,
    .loading-indicator__icon,
    [data-loading-indicator],
    .badge--loading,
    .badge[data-state="loading"],
    .badge[data-status="loading"],
    .status--loading,
    .notice--loading,
    .status[data-state="loading"],
    .status[data-status="loading"],
    .status[aria-busy="true"]
  ),
  :where(
    .badge--loading,
    .badge[data-state="loading"],
    .badge[data-status="loading"],
    .status--loading,
    .notice--loading,
    .status[data-state="loading"],
    .status[data-status="loading"],
    .status[aria-busy="true"]
  )::before {
    animation: none !important;
    transform: none !important;
  }

  :where(.site-nav__link, .nav-link, .navigation__link)::after,
  :where(.tab, .tabs__tab, [role="tab"])::after,
  :where(.accordion__summary, details.accordion-item > summary)::after,
  :where(.progress__bar, .progress-bar) {
    transition-duration: var(--motion-reduced) !important;
  }
}