/* ==========================================================================
   Corner-radius system (Nov 2026)
   Loaded LAST on every page so these rules settle every corner on the site.
   Selectors carry :not(#radius-system) (ID weight) so they win over the older
   page rules without !important; delete those older rules over time.
   Dark themes only (archival-dark, dark); the light theme is being retired.

   Rule: rounded = a thing you look at or pick up; square = page structure.
     0                 structure: header, footer, full-width/edge-to-edge
                       bands, list rows, dividers, blocks with a coloured
                       accent bar (About rows, Start Here chapter boxes).
     edge-attached     a panel fixed to a screen edge rounds only the corners
                       that float (bottom sheets: top two; side panels and
                       the phone/tablet menu drawer: the inner two).
     --radius-surface  24px  every floating surface: cards, detail panes,
                       filter rails, toolbars, sheets, modals, feature panels.
     --radius-inset    16px  a container inside a surface, or a compact tile.
     --radius-control  8px   every button, input, chip, tab, toggle.
     50%               dots, avatars, round icon buttons.
   An image that touches its panel's edge takes the panel's corners.
   A floating toolbar goes square when it runs edge to edge (<=768px).
   ========================================================================== */

/* The three values are defined in css/tokens.css. */

/* ---------- Surfaces (24) ---------- */

/* Archive search toolbar (Wrestlers, Venues, Masks, Voices, Vault): floats
   beside the grid from 769px up; edge to edge (square) below. */
@media (min-width: 769px) {
  html[data-theme]:not(#radius-system) .archive-toolbar {
    border-radius: var(--radius-surface);
  }

  /* Desktop/tablet split-view detail pane (was 32 at >=1121, 24 below). */
  html[data-theme]:not(#radius-system) .archive-detail {
    border-radius: var(--radius-surface);
  }

  /* Timeline: event rail + detail panel side by side. */
  html[data-theme]:not(#radius-system) .timeline-rail-shell,
  html[data-theme]:not(#radius-system) .timeline-detail {
    border-radius: var(--radius-surface);
  }
}

/* Archive filter rail (Wrestlers, Venues, Voices) on desktop. Below 1366px
   the same element becomes the bottom sheet (24 on its top corners). */
@media (min-width: 1366px) {
  html[data-theme]:not(#radius-system) .archive-rail {
    border-radius: var(--radius-surface);
  }
}

/* Traditions: the three main panels. */
html[data-theme]:not(#radius-system) .styles-experimental__panel,
html[data-theme]:not(#radius-system) .styles-documented-preview .styles-experimental__feature-card {
  border-radius: var(--radius-surface);
}

/* Promotions: every dossier tile, the leader tiles and the big photo. */
html[data-theme]:not(#radius-system) .promotions-grid > *,
html[data-theme]:not(#radius-system) .promotions-leader {
  border-radius: var(--radius-surface);
}

html[data-theme]:not(#radius-system) .promotions-hero__media,
html[data-theme]:not(#radius-system) .promotions-leader__media {
  clip-path: inset(0 round var(--radius-surface));
}

/* Home "Trails" feature card (12 on phones before). */
html[data-theme]:not(#radius-system) .home-trails__feature {
  border-radius: var(--radius-surface);
}

/* Mask image lightbox: a floating modal; its bottom control bar sits flush. */
html[data-theme]:not(#radius-system) .mask-lightbox {
  border-radius: var(--radius-surface);
  overflow: hidden;
}

html[data-theme]:not(#radius-system) .mask-detail-lightbox__controls {
  border-radius: 0;
}

/* Support page cards. */
html[data-theme]:not(#radius-system) .support-action-card,
html[data-theme]:not(#radius-system) .support-help-card {
  border-radius: var(--radius-surface);
}

/* Lineage side panel: fixed to the right edge, so only its inner corners. */
@media (min-width: 701px) {
  html[data-theme]:not(#radius-system) .lineage-detail {
    border-radius: var(--radius-surface) 0 0 var(--radius-surface);
  }
}

/* Menu drawer (<=1120px): fixed to the right edge, inner corners only. */
@media (max-width: 1120px) {
  html[data-theme]:not(#radius-system) .site-nav {
    border-radius: var(--radius-surface) 0 0 var(--radius-surface);
  }
}

/* ---------- Insets and compact tiles (16) ---------- */

html[data-theme]:not(#radius-system) .era-filter-control,
html[data-theme]:not(#radius-system) .venue-filter-stack,
html[data-theme]:not(#radius-system) .styles-experimental__quick-facts,
html[data-theme]:not(#radius-system) .vault-info-rail__item,
html[data-theme]:not(#radius-system) .styles-experimental__style-card,
html[data-theme]:not(#radius-system) .styles-documented-preview .styles-experimental__feature-image {
  border-radius: var(--radius-inset);
}

/* Home stats strip floats over the hero; it clips its own cells. */
html[data-theme]:not(#radius-system) .hero-kpi-strip {
  border-radius: var(--radius-inset);
}

html[data-theme]:not(#radius-system) .hero-kpi-strip > * {
  border-radius: 0;
}

/* Outline and texture layers drawn with ::before/::after follow their
   element's corners (otherwise an active outline is cut off at the corners). */
html[data-theme]:not(#radius-system) :is(
  .archive-toolbar,
  .styles-experimental__panel,
  .styles-experimental__style-card,
  .styles-experimental__feature-image,
  .support-action-card,
  .support-help-card,
  .home-trails__feature
)::before,
html[data-theme]:not(#radius-system) :is(
  .archive-toolbar,
  .styles-experimental__panel,
  .styles-experimental__style-card,
  .styles-experimental__feature-image,
  .support-action-card,
  .support-help-card,
  .home-trails__feature
)::after {
  border-radius: inherit;
}

/* ---------- Controls (8) ---------- */

html[data-theme]:not(#radius-system) :is(
  .lineage-filter-trigger,
  .ds-button.ds-filter-control,
  .promotions-titles__page-button,
  .lineage-graph-nav button,
  .about-contact-submit
) {
  border-radius: var(--radius-control);
}