/*
 * CyberSlam component layer — the 13 components.
 *
 * Port note: the source bundle styles type through unprefixed class selectors
 * (.display-belt, .heading-label). Two of those survived the first pass of this
 * port and silently did nothing, because the generated classes are prefixed.
 * The RecordDonut's centre text overlapped as a result. Both are fixed; if this
 * is ever re-derived from the source, that rename is not optional.
 *
 * Ported from docs/cyberslam-design-system/components/bundle.css. Structural
 * and layout rules only: every colour, space, radius, border and type value
 * comes from a token. The port is byte-faithful apart from two mechanical
 * renames — `.cs-` to `.csds-`, and `--foo` to `--csds-foo` — so it can be
 * re-derived from the source if the source moves.
 *
 * Verified after porting: 0 hex literals, 0 unprefixed classes, and all 28
 * custom properties it references exist in tokens.css. A var() naming a
 * property that does not exist renders as nothing and looks like a styling
 * choice, so this is checked rather than assumed.
 *
 * RankingRow/StandingsTable and StatBar/RecordDonut are deliberate pairs — a
 * compact and a full form of the same data. Pick the one that fits the layout;
 * do not rebuild one from the other.
 */

/* CyberSlam component layer — structural/layout rules only.
   Color, spacing, radius, border and type values all come from tokens.css custom
   properties and the generated type-style classes (.display-*, .heading-*, .body-*, .accent-*).
   No component here introduces a color, size or radius that isn't a token. */

/* ---------- Button ---------- */
.csds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--csds-space-2);
  padding: var(--csds-space-2) var(--csds-space-4);
  border-radius: var(--csds-radius-xs);
  border: var(--csds-border-hairline) solid var(--csds-ink);
  background: var(--csds-surface-base);
  color: var(--csds-ink);
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.csds-btn:focus-visible {
  outline: var(--csds-border-thick) solid var(--csds-gold-light);
  outline-offset: 2px;
}
.csds-btn--secondary {
  background: var(--csds-surface-panel);
  border-color: var(--csds-border-default);
  color: var(--csds-ink-muted);
}
/* Blood, not crimson: ink on crimson is 4.13:1, under the 4.5 floor at the
   13-14px these buttons paint. Ink on blood is 6.61:1. */
.csds-btn--active {
  background: var(--csds-blood);
  border-color: var(--csds-blood);
  color: var(--csds-ink);
}
.csds-btn--gold {
  background: var(--csds-surface-base);
  border-color: var(--csds-gold);
  color: var(--csds-gold-light);
}
.csds-btn--danger {
  background: var(--csds-blood);
  border-color: var(--csds-blood);
  color: var(--csds-ink);
}
.csds-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Badge ---------- */
.csds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--csds-space-1);
  padding: 2px var(--csds-space-2);
  border-radius: var(--csds-radius-sm);
  border: var(--csds-border-hairline) solid currentColor;
  text-transform: uppercase;
  line-height: 1;
}
.csds-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.csds-badge--win { color: var(--csds-state-win); background: var(--csds-surface-panel); }
/* Diverges from the reference bundle, deliberately.
   Source: ink on a `crimson` fill. Measured 4.13:1 at the badge's 12px caption
   size, and the brand book restricts that exact pair to bold uppercase labels
   13px/700 and larger. `blood` gives 6.61:1 and is the token whose own note
   reads "dark crimson — destructive button fill, LOSS INDICATORS", so this is
   more semantically correct, not a compromise. */
.csds-badge--loss { color: var(--csds-ink); background: var(--csds-blood); border-color: var(--csds-blood); }
.csds-badge--draw { color: var(--csds-state-draw); background: var(--csds-surface-panel); }
.csds-badge--champion { color: var(--csds-surface-base); background: var(--csds-state-championship); border-color: var(--csds-state-championship); }
.csds-badge--perk { color: var(--csds-ink); background: var(--csds-surface-raised); border-color: var(--csds-state-perk); }
.csds-badge--perk .csds-badge__dot { background: var(--csds-state-perk); }
.csds-badge--injured { color: var(--csds-ink); background: var(--csds-surface-panel); border-color: var(--csds-state-loss); }

/* ---------- Tabs ---------- */
.csds-tabs {
  display: flex;
  border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
  gap: 0;
  overflow-x: auto;
}
.csds-tab {
  padding: var(--csds-space-3) var(--csds-space-4);
  background: var(--csds-surface-base);
  color: var(--csds-ink-muted);
  border: none;
  border-bottom: var(--csds-border-thick) solid transparent;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.csds-tab[aria-selected="true"] {
  background: var(--csds-crimson);
  color: var(--csds-ink);
  border-bottom-color: var(--csds-crimson);
}
.csds-tab:not([aria-selected="true"]):hover {
  color: var(--csds-ink);
}

/* ---------- Panel ---------- */
.csds-panel {
  background: var(--csds-surface-panel);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: var(--csds-radius-none);
  box-shadow: var(--csds-shadow-panel-inset);
  padding: var(--csds-space-4);
}
.csds-panel--active { border-color: var(--csds-crimson); border-top-width: var(--csds-border-thick); }
.csds-panel--championship { border-color: var(--csds-gold); border-width: var(--csds-border-thick); }
.csds-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--csds-space-3);
  padding-bottom: var(--csds-space-2);
  border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}

/* ---------- WrestlerCard ---------- */
/* The team card shares the wrestler card's frame and body (063, D3). */
.csds-wrestler-card,
.csds-team-card {
  display: flex;
  flex-direction: column;
  width: 240px;
  background: var(--csds-surface-panel);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
}
.csds-wrestler-card__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--csds-surface-raised);
  overflow: hidden;
}
.csds-wrestler-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csds-wrestler-card__nameplate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--csds-space-3);
  background: linear-gradient(to top, rgb(var(--csds-surface-base-rgb) / 0.92), rgb(var(--csds-surface-base-rgb) / 0));
  box-shadow: var(--csds-shadow-offset);
}
.csds-wrestler-card__nickname { color: var(--csds-ink-muted); text-transform: uppercase; }
.csds-wrestler-card__body,
.csds-team-card__body {
  padding: var(--csds-space-3) var(--csds-space-4);
  border-top: var(--csds-border-hairline) solid var(--csds-border-default);
  display: flex;
  flex-direction: column;
  gap: var(--csds-space-2);
}
.csds-wrestler-card__record { color: var(--csds-ink); }
.csds-wrestler-card__federations {
  display: flex;
  gap: var(--csds-space-2);
}
.csds-wrestler-card__fed-tag {
  padding: 2px var(--csds-space-2);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  color: var(--csds-ink-muted);
  text-transform: uppercase;
}

/* ---------- TeamCard ---------- */
/* Frame and body: shared with .csds-wrestler-card, above. */
.csds-team-card__portraits {
  display: flex;
  aspect-ratio: 4 / 5;
  background: var(--csds-surface-raised);
  overflow: hidden;
}
.csds-team-card__portraits img { width: 50%; height: 100%; object-fit: cover; display: block; }

/* ---------- RankingRow ---------- */
.csds-ranking-row {
  display: flex;
  align-items: center;
  gap: var(--csds-space-3);
  padding: var(--csds-space-2) var(--csds-space-3);
  background: var(--csds-surface-panel);
  border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}
.csds-ranking-row--active { background: var(--csds-state-loss); background: color-mix(in srgb, var(--csds-state-loss) 18%, var(--csds-surface-panel)); }
.csds-ranking-row__rank {
  width: 28px;
  text-align: center;
  color: var(--csds-ink-muted);
}
.csds-ranking-row__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  object-fit: cover;
  flex: none;
}
.csds-ranking-row__meta { flex: 1; min-width: 0; }
.csds-ranking-row__name { color: var(--csds-ink); }
.csds-ranking-row__sub { color: var(--csds-ink-muted); }
.csds-ranking-row__stat { width: 56px; text-align: right; color: var(--csds-ink); }

/* ---------- NavBar ---------- */
.csds-navbar {
  display: flex;
  flex-direction: column;
  background: var(--csds-surface-base);
}
.csds-navbar__top {
  display: flex;
  align-items: center;
  gap: var(--csds-space-6);
  padding: var(--csds-space-3) var(--csds-space-6);
  border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}
.csds-navbar__logo { color: var(--csds-ink); }
.csds-navbar__links {
  display: flex;
  gap: var(--csds-space-5);
  flex: 1;
}
.csds-navbar__link { color: var(--csds-ink-muted); text-transform: uppercase; }
/* Diverges from the reference bundle, deliberately.
   Source: crimson flat text. That is 3.44:1, and the brand book allows crimson
   as flat text only at headline scale (24px+) or as a graphic 3px and over;
   this link is 13px. The book's own stated pattern for an active state is "a
   crimson border or top rule", so the label stays ink and the crimson becomes
   a rule — the same treatment the global topbar uses. */
.csds-navbar__link--active {
  color: var(--csds-ink);
  box-shadow: inset 0 -2px 0 0 var(--csds-crimson);
}
.csds-navbar__ticker {
  display: flex;
  align-items: center;
  gap: var(--csds-space-3);
  padding: var(--csds-space-2) var(--csds-space-6);
  background: var(--csds-surface-panel);
  color: var(--csds-ink-muted);
  overflow: hidden;
  white-space: nowrap;
}
.csds-navbar__ticker-label {
  /* Diverges from the reference bundle: ink on a crimson fill at this label's
     11px is 4.13:1, below the 13px/700 floor the brand book sets for that pair.
     `blood` gives 6.61:1 and keeps the mark emphatic. */
  color: var(--csds-ink);
  background: var(--csds-blood);
  padding: 2px var(--csds-space-2);
  flex: none;
  text-transform: uppercase;
}

/* ---------- StatBar (win/loss/draw record) ---------- */
.csds-statbar { display: flex; flex-direction: column; gap: var(--csds-space-2); width: 220px; }
.csds-statbar__track {
  display: flex;
  height: 10px;
  background: var(--csds-surface-raised);
  overflow: hidden;
}
.csds-statbar__seg--win { background: var(--csds-state-win); }
.csds-statbar__seg--loss { background: var(--csds-state-loss); }
.csds-statbar__seg--draw { background: var(--csds-state-draw); }
.csds-statbar__legend { display: flex; gap: var(--csds-space-4); }
/* The donut's legend items share this rule (063, D3). */
.csds-statbar__legend-item,
.csds-donut__legend-item { display: flex; align-items: center; gap: var(--csds-space-1); color: var(--csds-ink-muted); }
.csds-statbar__swatch { width: 8px; height: 8px; flex: none; }
.csds-statbar__swatch--win { background: var(--csds-state-win); }
.csds-statbar__swatch--loss { background: var(--csds-state-loss); }
.csds-statbar__swatch--draw { background: var(--csds-state-draw); }

/* ---------- Modal ---------- */
.csds-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--csds-surface-base-rgb) / 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--csds-space-4);
}
.csds-modal {
  width: 100%;
  max-width: 420px;
  background: var(--csds-surface-panel);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  box-shadow: var(--csds-shadow-offset);
}
.csds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--csds-space-4);
  border-bottom: var(--csds-border-thick) solid var(--csds-state-loss);
}
.csds-modal__close {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: var(--csds-border-hairline) solid var(--csds-state-loss);
  background: transparent;
  color: var(--csds-state-loss);
  cursor: pointer;
}
.csds-modal__body { padding: var(--csds-space-4); display: flex; flex-direction: column; gap: var(--csds-space-3); }
.csds-modal__field { display: flex; flex-direction: column; gap: var(--csds-space-1); }
.csds-modal__select {
  padding: var(--csds-space-2) var(--csds-space-3);
  background: var(--csds-surface-base);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  color: var(--csds-ink);
}
.csds-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csds-space-3);
  padding: var(--csds-space-4);
  border-top: var(--csds-border-hairline) solid var(--csds-border-default);
}

/* ---------- ChampionshipBelt ---------- */
.csds-belt {
  background: var(--csds-surface-panel);
  border: var(--csds-border-thick) solid var(--csds-gold);
  padding: var(--csds-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--csds-space-3);
}
.csds-belt__header {
  display: flex;
  align-items: center;
  gap: var(--csds-space-3);
}
.csds-belt__icon { flex: none; display: flex; }
.csds-belt__titles { display: flex; flex-direction: column; gap: var(--csds-space-1); }
.csds-belt__holder { color: var(--csds-gold-light); }
.csds-belt__history {
  display: flex;
  flex-direction: column;
  border-top: var(--csds-border-hairline) solid var(--csds-border-default);
  padding-top: var(--csds-space-3);
}
.csds-belt__entry {
  display: flex;
  align-items: center;
  gap: var(--csds-space-3);
  padding: var(--csds-space-2) 0;
}
.csds-belt__dot {
  width: 8px; height: 8px;
  flex: none;
  background: var(--csds-gold);
  border-radius: 50%;
}
.csds-belt__entry-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.csds-belt__entry-name { color: var(--csds-ink); }
.csds-belt__entry-tag {
  flex: none;
  color: var(--csds-ink-muted);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  padding: 2px var(--csds-space-2);
}
.csds-belt__entry-tag--current { color: var(--csds-surface-base); background: var(--csds-gold); border-color: var(--csds-gold); }

/* ---------- StandingsTable ---------- */
.csds-standings {
  width: 100%;
  border-collapse: collapse;
  background: var(--csds-surface-panel);
}
.csds-standings th {
  text-align: left;
  color: var(--csds-ink-muted);
  text-transform: uppercase;
  padding: var(--csds-space-2) var(--csds-space-3);
  border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}
.csds-standings__num, .csds-standings th:nth-child(n+3) { text-align: right; }
.csds-standings td {
  padding: var(--csds-space-2) var(--csds-space-3);
  border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
  vertical-align: middle;
}
.csds-standings__row--active { background: var(--csds-surface-raised); }
.csds-standings__rank { color: var(--csds-ink-muted); width: 32px; }
.csds-standings__wrestler { display: table-cell; }
.csds-standings__trophy { display: inline-flex; margin-right: var(--csds-space-1); vertical-align: middle; }
.csds-standings__name-wrap { display: inline-flex; flex-direction: column; vertical-align: middle; }
.csds-standings__name { color: var(--csds-ink); }
.csds-standings__title { color: var(--csds-ink-muted); }
.csds-standings__action { text-align: right; }

/* ---------- RecordDonut ---------- */
.csds-donut { display: inline-flex; flex-direction: column; align-items: center; gap: var(--csds-space-3); }
.csds-donut__ring-wrap { position: relative; display: inline-flex; }
.csds-donut__ring circle { transition: stroke-dashoffset 0.2s ease; cursor: pointer; }
.csds-donut__ring circle:focus-visible { outline: none; filter: brightness(1.25); }
.csds-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.csds-donut__center .csds-display-belt { color: var(--csds-ink); line-height: 1; }
.csds-donut__center .csds-heading-label { color: var(--csds-ink-muted); margin-top: 2px; }
.csds-donut__tooltip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: var(--csds-surface-raised);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  color: var(--csds-ink);
  padding: var(--csds-space-1) var(--csds-space-2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.csds-donut__legend { display: flex; gap: var(--csds-space-4); }
.csds-donut__swatch { width: 8px; height: 8px; flex: none; display: inline-block; }
/* 071: what a ring is about, under it (csds_record_donut()'s caption). */
.csds-donut__caption { color: var(--csds-ink); text-align: center; max-width: 28ch; }

/* ---------- Empty and Locked (047) ---------- */
/*
 * One answer for "there is nothing here" and "you cannot see this yet".
 *
 * Before this, the codebase had EIGHT class names for the same two ideas:
 * fedman-empty (16 uses), fedman-fx-empty (21), fedman-fx-image-empty,
 * fedman-fx-picker-empty, fedman-fx-notice, fs-rankings-locked-notice,
 * rs-store-empty, rs-store-locked-notice and cm-history-empty — and the 046
 * baseline found them giving three different behaviours, including one that
 * rendered an empty black void.
 *
 * A section that vanishes reads as "this player has nothing here" when the
 * truth is about access. The distinction the two states draw:
 *
 *   csds-empty   there is genuinely nothing, and that is a normal state
 *   csds-locked  there IS something, and this viewer cannot see it yet
 *
 * The existing class names are aliased below rather than edited out of five
 * plugins' PHP. Each surface keeps its own class and they all look the same,
 * which is what the user sees; the aliases retire as each surface converts.
 */
.csds-empty,
.csds-locked,
.fedman-empty,
.fedman-fx-empty,
.fedman-fx-picker-empty,
.fedman-fx-notice,
.fs-rankings-locked-notice,
.rs-store-empty,
.rs-store-locked-notice,
.cm-history-empty {
  display: block;
  margin: 0;
  padding: var(--csds-space-5) var(--csds-space-4);
  background: var(--csds-surface-raised);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: var(--csds-radius-none);
  color: var(--csds-ink-muted);
  font: var(--csds-body-default);
  text-align: center;
}

/* Locked is not a failure state, so it is not crimson. A gold rule reads as
   "there is something behind this" without reading as an error. */
.csds-locked,
.fs-rankings-locked-notice,
.rs-store-locked-notice {
  border-left: var(--csds-border-thick) solid var(--csds-gold);
  text-align: left;
}

.csds-locked__reason,
.csds-empty__reason {
  display: block;
  color: var(--csds-ink);
  font: var(--csds-heading-card);
  margin-bottom: var(--csds-space-1);
}

/* The action that unlocks it, where one exists. Cream and underlined — the
   link token — never crimson, which at this size is 3.44:1. */
.csds-locked__action,
.csds-empty a,
.csds-locked a {
  color: var(--csds-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.csds-locked__action:hover,
.csds-empty a:hover,
.csds-locked a:hover { color: var(--csds-link-hover); }

/*
 * The state's padding, at a specificity that survives the page it lands on.
 *
 * The hub renders these as <p>, and the theme carries
 * `p:not(.has-background):last-of-type { padding-bottom: 0 }` — specificity
 * (0,2,1), which beats a single class. The result was a box with 20px of top
 * padding and none at the bottom, which reads as a rendering fault rather than
 * a design. Writing the four sides out did not help: the losing rule was the
 * shorthand, not its serialisation.
 *
 * The class is doubled to reach (0,3,0) rather than reaching for !important.
 */
.csds-page .csds-empty.csds-empty,
.csds-page .csds-locked.csds-locked,
.csds-page .fedman-empty.fedman-empty,
.csds-page .fedman-fx-empty.fedman-fx-empty,
.csds-page .fs-rankings-locked-notice.fs-rankings-locked-notice,
.csds-page .rs-store-empty.rs-store-empty,
.csds-page .rs-store-locked-notice.rs-store-locked-notice,
.csds-page .cm-history-empty.cm-history-empty {
  padding: var(--csds-space-5) var(--csds-space-4);
}

/* ------------------------------------------------ derived pages (054) --- */

/*
 * The derived content pages — the two divisions, the scoring formula and
 * championship history — needed no stylesheet of their own: `chrome.css`
 * already styles headings, lists and tables inside `.csds-content` on every
 * csds page. What they add is three things no other page carries, each by its
 * own class, so no other surface can be reached.
 */

/* The division banners are 1280px wide, and nothing else sizes an image. */
.csds-content__banner {
  margin: 0 0 var(--csds-space-6);
}

.csds-content__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * `[fight_simulator_vp_rules]` labels each row with a <th scope="row">. The
 * `.csds-content th` rule is for column headers — uppercase and muted — and on
 * a row it made every finish name read like a heading.
 */
.fs-vp-rules__table tbody th {
  font: var(--csds-body-default);
  letter-spacing: normal;
  text-transform: none;
  color: var(--csds-ink);
}

/* `[championship_history_all]`: one section per title. */
.cm-history-all__title {
  margin: 0 0 var(--csds-space-7);
}

/*
 * Championship Manager's history tables, on the site's ground.
 *
 * `championship-rankings.css` paints them for a light theme — #fff tables,
 * #f6f7f7 headers, pastel row tints — while the csds template sets light text,
 * so on a csds page every cell read cream on white: 1.34:1 measured on
 * /championship-history/ (054) and on the federation page's Championships tab,
 * which had been like that since 049. Retokenised here, under `.csds-page`, so
 * the plugin's own stylesheet and any page off the template are untouched.
 */
.csds-page .cm-history-table,
.csds-page .cm-history-defense-table {
  background: var(--csds-surface-panel);
  border-color: var(--csds-border-default);
  box-shadow: none;
}

.csds-page .cm-history-table th,
.csds-page .cm-history-table td,
.csds-page .cm-history-defense-table th,
.csds-page .cm-history-defense-table td {
  border-bottom-color: var(--csds-border-default);
  color: var(--csds-ink);
}

.csds-page .cm-history-table th,
.csds-page .cm-history-defense-table th,
.csds-page .cm-history-table th.sortable:hover {
  background: var(--csds-surface-raised);
  color: var(--csds-ink-muted);
}

.csds-page .cm-history-result--new-champ,
.csds-page .cm-history-result--defense,
.csds-page .cm-history-result--vacated,
.csds-page .cm-history-result--other {
  background: transparent;
}

/* A new champion was a green tint. On this ground it is a gold rule instead —
   gold is the palette's championship colour. */
.csds-page .cm-history-result--new-champ td:first-child {
  box-shadow: inset var(--csds-border-thick) 0 0 var(--csds-gold);
}

.csds-page .cm-history-details-row td {
  background: var(--csds-surface-base);
  border-bottom-color: var(--csds-border-default);
}

.csds-page .cm-history-defense-toggle {
  background: var(--csds-surface-raised);
  border-color: var(--csds-border-default);
  color: var(--csds-ink);
}

.csds-page .cm-history-defense-toggle:hover,
.csds-page .cm-history-defense-toggle:focus {
  border-color: var(--csds-gold);
}

.csds-page .cm-history-defense-toggle-label,
.csds-page .cm-history-defense-toggle-count {
  color: var(--csds-ink-muted);
}

.csds-page .cm-history-error {
  background: var(--csds-surface-raised);
  border-color: var(--csds-border-default);
  color: var(--csds-ink);
}

@media (max-width: 480px) {
  .csds-page .cm-history-main-row,
  .csds-page .cm-history-defense-table tr {
    border-color: var(--csds-border-default);
  }

  .csds-page .cm-history-main-row td:before,
  .csds-page .cm-history-defense-table td:before {
    color: var(--csds-ink-muted);
  }
}

/*
 * Wrestler Leveling System and Reward System widgets, on the site's ground.
 *
 * Both paint for a light theme — WLS in public-styles.css, Reward System in a
 * <style> block printed with each shortcode — so on a csds page the csds text
 * colour landed on their white panels: 1.41:1 measured on /about/ (054). Same
 * treatment as CM's tables above: retokenised under `.csds-page`, the plugins'
 * own styles untouched, so any page off the template renders as before.
 *
 * Status colours become rules, never text: a green or red word on this ground
 * would be the same failure in another colour.
 */
.csds-page .wls-profile-widget,
.csds-page .wls-leaderboard,
.csds-page .rs-inv-card,
.csds-page .rs-ach-card {
  background: var(--csds-surface-panel);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: var(--csds-radius-sm);
  box-shadow: none;
  color: var(--csds-ink);
}

/* Text: one readable colour for names and values, the muted one for the rest. */
.csds-page .wls-profile-widget .wls-perks-title,
.csds-page .wls-profile-widget .wls-perk-name,
.csds-page .wls-leaderboard-table thead th,
.csds-page .wls-rank,
.csds-page .wls-xp,
.csds-page .wls-wrestler-name,
.csds-page .rs-inv-card-title,
.csds-page .rs-ach-card-title,
.csds-page .rs-ach-card-date,
.csds-page .wls-championships-title {
  color: var(--csds-ink);
}

.csds-page .wls-xp-amount,
.csds-page .wls-achievement-date,
.csds-page .wls-progress-label,
.csds-page .wls-progress-stats,
.csds-page .wls-perk-description,
.csds-page .wls-championship-name,
.csds-page .wls-tier-perks .wls-perk-tier-name,
.csds-page .rs-inv-card-desc,
.csds-page .rs-inv-fed-label,
.csds-page .rs-inv-note,
.csds-page .rs-inv-feedback,
.csds-page .rs-ach-card-desc {
  color: var(--csds-ink-muted);
}

/*
 * The level's own colour. WLS passes it as --wls-level-color (1.5.3). An
 * administrator picks it, from #000000 to #eeee22 today, so it can never be
 * the text colour here: the name reads in ink and the level colour becomes a
 * rule beside it.
 */
.csds-page .wls-level-name {
  color: var(--csds-ink);
  padding-left: var(--csds-space-3);
  border-left: var(--csds-border-thick) solid var(--wls-level-color, var(--csds-border-default));
}

.csds-page .wls-level-badge {
  background: var(--csds-surface-raised);
  color: var(--csds-ink);
  border-radius: var(--csds-radius-none);
  border-left: var(--csds-border-thick) solid var(--wls-level-color, var(--csds-border-default));
}

/* Leaderboard rows. */
.csds-page .wls-leaderboard-table thead th,
.csds-page .wls-leaderboard-table tbody td {
  border-bottom-color: var(--csds-border-default);
}

.csds-page .wls-leaderboard-row:hover,
.csds-page .wls-leaderboard-row.wls-current-user,
.csds-page .wls-leaderboard-row.wls-current-user:hover {
  background: var(--csds-surface-raised);
}

/* Progress bar: the track goes dark; the fill keeps the level's colour. */
.csds-page .wls-progress-bar {
  background: var(--csds-surface-raised);
}

/* Nested panels inside the profile. */
.csds-page .wls-championships-section,
.csds-page .wls-tier-perks,
.csds-page .wls-perks-section {
  background: transparent;
  border-color: var(--csds-border-default);
}

.csds-page .wls-perk-item {
  background: var(--csds-surface-raised);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-left-width: var(--csds-border-thick);
}

.csds-page .wls-perk-active { border-left-color: var(--csds-state-win); }
.csds-page .wls-perk-inactive { border-left-color: var(--csds-state-loss); }
.csds-page .wls-perk-undefined-card { border-left-color: var(--csds-gold); }

.csds-page .wls-active-perks .wls-perks-title,
.csds-page .wls-inactive-perks .wls-perks-title {
  color: var(--csds-ink);
}

.csds-page .wls-perk-type,
.csds-page .wls-perk-type-rp,
.csds-page .wls-perk-type-combat,
.csds-page .wls-perk-type-social,
.csds-page .wls-perk-type-economic,
.csds-page .wls-perk-undefined,
.csds-page .rs-inv-qty {
  background: var(--csds-surface-base);
  color: var(--csds-ink-muted);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
}

/* Notes and warnings: a coloured rule, readable text. */
.csds-page .wls-perk-warning,
.csds-page .wls-perk-undefined-note,
.csds-page .wls-perk-override-badge,
.csds-page .wls-inactive-perks-note,
.csds-page .wls-error,
.csds-page .wls-info {
  background: var(--csds-surface-raised);
  color: var(--csds-ink);
  border-left: var(--csds-border-thick) solid var(--csds-gold);
}

.csds-page .wls-error,
.csds-page .wls-inactive-perks-note {
  border-left-color: var(--csds-state-loss);
}

.csds-page .wls-perk-warning .dashicons {
  color: var(--csds-gold);
}

/* Reward System card details. */
.csds-page .rs-inv-card-icon,
.csds-page .rs-ach-card-icon {
  background: var(--csds-surface-raised);
}

.csds-page .rs-inv-feedback.is-error { color: var(--csds-ink); border-left: var(--csds-border-thick) solid var(--csds-state-loss); padding-left: var(--csds-space-2); }
.csds-page .rs-inv-feedback.is-success { color: var(--csds-ink); border-left: var(--csds-border-thick) solid var(--csds-state-win); padding-left: var(--csds-space-2); }

/*
 * Reward System's "Activate" / "Use" button carries WordPress's admin classes,
 * `button button-primary`, which nothing styles on the front end: on a csds
 * page it measured 1.02:1. Drawn as `.csds-btn`.
 */
.csds-page .rs-inv-card .button {
  display: inline-flex;
  align-items: center;
  padding: var(--csds-space-2) var(--csds-space-4);
  border: var(--csds-border-hairline) solid var(--csds-ink);
  border-radius: var(--csds-radius-xs);
  background: var(--csds-surface-base);
  color: var(--csds-ink);
  font: var(--csds-body-button);
  text-transform: uppercase;
  cursor: pointer;
}

.csds-page .rs-inv-card .button:hover,
.csds-page .rs-inv-card .button:focus {
  border-color: var(--csds-gold);
  color: var(--csds-ink);
}

.csds-page .rs-inv-card .button:focus-visible {
  outline: var(--csds-border-thick) solid var(--csds-gold-light);
  outline-offset: 2px;
}

.csds-page .rs-inv-card .button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -------------------------------------------------- the store (0.10.1) --- */

/*
 * `[rs_storefront]` — the /store/ page and a federation's Store tab. Reward
 * System prints its own light theme in an inline <style> (white cards, white
 * fields, a grey cart, green prices): made for a light page, a white slab on
 * this one. Retokenised here under `.csds-page`, as the inventory cards above
 * were in 054; the plugin's own rules stay for any page off the template.
 * `.csds-page .x` outranks the inline `.x`, so no `!important`.
 *
 * Status colours become rules, never text (the rule above): "Not enough VP"
 * and a failed purchase read in ink beside a red rule.
 */
.csds-page .rs-store-card,
.csds-page .rs-storefront-side {
  background: var(--csds-surface-panel);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: var(--csds-radius-none);
  box-shadow: none;
  color: var(--csds-ink);
}

.csds-page .rs-store-card:hover {
  border-color: var(--csds-gold-dark);
}

/* Chosen: a gold frame, not WordPress blue. */
.csds-page .rs-store-card:has(.rs-store-select:checked),
.csds-page .rs-store-card:has(.rs-store-qty:not([value="0"]):focus) {
  border-color: var(--csds-gold);
  box-shadow: inset 0 0 0 var(--csds-border-hairline) var(--csds-gold);
}

/* Out of reach: dimmed on the same ground, never a light grey card. */
.csds-page .rs-store-card--disabled {
  background: var(--csds-surface-panel);
  opacity: 0.6;
}

.csds-page .rs-store-icon {
  background: var(--csds-surface-raised);
  border-radius: var(--csds-radius-sm);
}

.csds-page .rs-store-title {
  color: var(--csds-ink);
  font-family: var(--csds-font-heading);
  text-transform: uppercase;
}

.csds-page .rs-store-cost {
  color: var(--csds-gold-light);
}

.csds-page .rs-store-desc,
.csds-page .rs-store-search-label,
.csds-page .rs-store-stock-hint,
.csds-page .rs-store-qty-label,
.csds-page .rs-store-grid-empty,
.csds-page .rs-store-ap-note,
.csds-page .rs-store-locked,
/* The shared empty state above is one class; RS's inline #6b7280 comes later
   in the page and beat it (3.53:1, measured). */
.csds-page .rs-store-empty {
  color: var(--csds-ink-muted);
}

.csds-page .rs-store-balance-row,
.csds-page .rs-store-total,
.csds-page .rs-store-selected-list li {
  color: var(--csds-ink);
}

.csds-page .rs-store-selected-list li {
  border-bottom-color: var(--csds-border-default);
}

.csds-page .rs-store-unaffordable,
.csds-page .rs-store-feedback.is-error,
.csds-page .rs-store-feedback.is-success {
  padding-left: var(--csds-space-2);
  border-left: var(--csds-border-thick) solid var(--csds-state-loss);
  color: var(--csds-ink);
}

.csds-page .rs-store-feedback.is-success {
  border-left-color: var(--csds-state-win);
}

/* Fields: ground and text together (the 057 rule). */
.csds-page .rs-store-search-bar select,
.csds-page .rs-store-search-bar input[type="search"],
.csds-page .rs-store-qty {
  background: var(--csds-surface-raised);
  color: var(--csds-ink);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: var(--csds-radius-xs);
}

.csds-page .rs-store-search-bar input[type="search"]::placeholder {
  color: var(--csds-ink-muted);
}

.csds-page .rs-store-search-bar select:focus-visible,
.csds-page .rs-store-search-bar input[type="search"]:focus-visible,
.csds-page .rs-store-qty:focus-visible {
  outline: var(--csds-border-thick) solid var(--csds-gold-light);
  outline-offset: 2px;
}

/* The cart sticks under the top bar, not behind it (its own `top` is 14px). */
.csds-page .rs-storefront-side {
  top: calc(var(--csds-topbar-height-desktop) + var(--csds-space-4));
}

/*
 * "Purchase Selected" carries WordPress's admin button classes, which nothing
 * styles on the front end. Drawn as the site's primary action.
 */
.csds-page .rs-store-purchase.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--csds-space-3) var(--csds-space-4);
  border: 0;
  border-radius: var(--csds-radius-xs);
  background: var(--csds-blood);
  color: var(--csds-ink);
  font: var(--csds-body-button);
  text-transform: uppercase;
  cursor: pointer;
}

.csds-page .rs-store-purchase.button:hover,
.csds-page .rs-store-purchase.button:focus {
  box-shadow: inset 0 0 0 var(--csds-border-hairline) var(--csds-gold-light);
}

.csds-page .rs-store-purchase.button:focus-visible {
  outline: var(--csds-border-thick) solid var(--csds-gold-light);
  outline-offset: 2px;
}

.csds-page .rs-store-purchase.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * `.csds-content ul` (chrome.css, 0,1,1) gives every list bullets and an
 * indent, and beats WLS's own `list-style: none` (0,1,0) on its card lists.
 */
.csds-page .wls-perks-list,
.csds-page .wls-championships-list {
  list-style: none;
  padding-left: 0;
}

/*
 * WLS draws the fill with a blue `background` gradient, which paints over the
 * level colour it sets inline as `background-color` — so the bar was always
 * blue, a colour outside the palette. Here the gradient is dropped and the
 * level's own colour shows.
 */
.csds-page .wls-progress-fill {
  background-image: none;
}

/* ------------------------------------------------ More (tab rows) ---- */
/*
 * A tab row that opts in with `data-csds-more` puts the tabs that do not fit
 * under a "More" drop-down at its end (more-tabs.js, 0.10.0). Once the script
 * has taken the row it neither wraps nor scrolls: the drop-down sits inside
 * the row, and a row that scrolls clips it. A row the script never reached
 * keeps its owner's wrapping or scrolling, so nothing is lost without it.
 *
 * (0,2,1) over the federation row's phone rule (0,2,0), which scrolls it.
 */
body [data-csds-more][data-csds-more-ready] {
  flex-wrap: nowrap;
  overflow: visible;
}

body [data-csds-more][data-csds-more-ready] > * { flex: 0 0 auto; }

.csds-more {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* `display: flex` above would beat the browser's own `[hidden]` rule. */
.csds-more[hidden],
.csds-more__menu[hidden] { display: none; }

.csds-more__btn {
  margin: 0;
  padding: var(--csds-space-2) var(--csds-space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font: var(--csds-heading-nav);
  letter-spacing: var(--csds-heading-nav-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--csds-ink-muted);
  cursor: pointer;
}

.csds-more__btn:hover,
.csds-more__btn:focus-visible { color: var(--csds-ink); }

/* The current tab is in the drop-down: the button carries its name and its
   rule, as the row's own active tab does. */
.csds-more__btn.is-active {
  color: var(--csds-ink);
  border-bottom-color: var(--csds-crimson);
}

/* The wrestler profile and My Hub set their tabs in sentence case at body
   size; More matches the tabs beside it. */
.fedman-profile-tabs .csds-more__btn,
.fedman-hub-tabs .csds-more__btn {
  font: var(--csds-body-default);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* The profile's filter pills (Fight Record, Forum Activity): More is a pill. */
.fedman-subtabs .csds-more__btn {
  padding: var(--csds-space-1) var(--csds-space-3);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: 99px;
  background: var(--csds-surface-raised);
  font: var(--csds-body-caption);
  text-transform: none;
  letter-spacing: 0;
  color: var(--csds-ink);
}

.fedman-subtabs .csds-more__btn.is-active { border-color: var(--csds-crimson); }

.csds-more__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  margin-top: var(--csds-space-1);
  padding: var(--csds-space-2);
  background: var(--csds-surface-panel);
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: var(--csds-radius-xs);
}

/*
 * A tab in the drop-down is a row of the list, whatever its owner draws it as
 * in the tab row — the same element, re-skinned by where it sits. (0,4,1)
 * over the owners' tab rules, the highest of which is (0,3,1).
 */
body .csds-more > .csds-more__menu > [class] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--csds-space-2);
  width: 100%;
  margin: 0;
  padding: var(--csds-space-2) var(--csds-space-3);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--csds-ink);
  text-align: left;
  white-space: nowrap;
  box-shadow: none;
}

body .csds-more > .csds-more__menu > [class]:hover,
body .csds-more > .csds-more__menu > [class]:focus-visible { background: var(--csds-surface-raised); }

body .csds-more > .csds-more__menu > [class].is-active,
body .csds-more > .csds-more__menu > [aria-current="page"] {
  box-shadow: inset 2px 0 0 0 var(--csds-crimson);
}

/* ---------------------------------------------------------- motion ---- */
/*
 * Every drop-down slides (0.10.0). They are opened by different owners in
 * different ways — the `hidden` attribute (More, WNF's bell), a class (AWS's
 * picker), `popover` (the phone bar), `<details>` — so each is named here, and
 * all share the motion tokens. A menu shown with `display` cannot be animated
 * by an ordinary transition; `@starting-style` gives it a first frame to
 * slide from, and `allow-discrete` holds `display` until the slide out ends.
 * A browser without either simply shows and hides, as before. Nothing moves
 * for anyone who has asked their system for reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }

  .csds-more__menu,
  .csds-navcta .aws-menu,
  .csds-body .wnf-bell-panel {
    transition:
      opacity var(--csds-motion-duration) var(--csds-motion-ease),
      translate var(--csds-motion-duration) var(--csds-motion-ease),
      display var(--csds-motion-duration) allow-discrete;
  }

  .csds-more__menu[hidden],
  .csds-navcta .aws-menu:not(.aws-menu-open),
  .csds-body .wnf-bell-panel[hidden] {
    opacity: 0;
    translate: 0 calc(-1 * var(--csds-motion-slide));
  }

  @starting-style {
    .csds-more__menu:not([hidden]),
    .csds-navcta .aws-menu.aws-menu-open,
    .csds-body .wnf-bell-panel:not([hidden]) {
      opacity: 0;
      translate: 0 calc(-1 * var(--csds-motion-slide));
    }
  }

  /* The phone bar's panels rise from the bar. */
  .csds-bottompanel {
    opacity: 0;
    translate: 0 var(--csds-motion-slide);
    transition:
      opacity var(--csds-motion-duration) var(--csds-motion-ease),
      translate var(--csds-motion-duration) var(--csds-motion-ease),
      display var(--csds-motion-duration) allow-discrete,
      overlay var(--csds-motion-duration) allow-discrete;
  }

  .csds-bottompanel:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .csds-bottompanel:popover-open {
      opacity: 0;
      translate: 0 var(--csds-motion-slide);
    }
  }

  /*
   * Every `<details>` — the picker's profile toggle, the federation picker,
   * belt histories, archives — slides its content open and shut. The height
   * glides where the browser can size to `auto` (`interpolate-size`); where
   * it cannot, the content still fades in. A panel positioned absolutely
   * inside (the federation picker) is not clipped: its containing block is
   * the `<details>` itself, outside the clipped part.
   */
  .csds-body details::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    transition:
      block-size var(--csds-motion-duration) var(--csds-motion-ease),
      opacity var(--csds-motion-duration) var(--csds-motion-ease),
      content-visibility var(--csds-motion-duration) allow-discrete;
  }

  .csds-body details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* ---------- Stepper (060) ---------- */
/*
 * The list and its items are written under `.csds-stepper` (0,2,0): the
 * page's `.csds-content ol` / `li` (0,1,1) would otherwise number them and
 * give them a list's margin.
 *
 * Where a viewer is in a flow of several pages. Current is blood with ink
 * (6.61:1), never crimson (4.13:1 at this size). Done is state-win on the
 * base ground (6.3:1). To come is the muted ink on a hairline.
 */
.csds-stepper {
  margin: 0 0 var(--csds-space-6);
}
.csds-stepper .csds-stepper__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.csds-stepper .csds-stepper__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--csds-space-2);
  margin: 0;
  padding: 0;
  color: var(--csds-ink-muted);
  font: var(--csds-heading-label);
  letter-spacing: var(--csds-heading-label-letter-spacing);
  text-transform: uppercase;
  text-align: center;
}
/* The line joining this step to the one before it. */
.csds-stepper__step + .csds-stepper__step::before {
  content: "";
  position: absolute;
  top: 15px;
  right: calc(50% + 20px);
  left: calc(-50% + 20px);
  border-top: var(--csds-border-hairline) solid var(--csds-border-default);
}
.csds-stepper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: var(--csds-border-hairline) solid var(--csds-border-default);
  border-radius: 50%;
  background: var(--csds-surface-base);
  color: var(--csds-ink-muted);
  font: var(--csds-body-button);
}
.csds-stepper__step--current { color: var(--csds-ink); }
.csds-stepper__step--current .csds-stepper__dot {
  background: var(--csds-blood);
  border-color: var(--csds-blood);
  color: var(--csds-ink);
}
.csds-stepper__step--done { color: var(--csds-ink); }
.csds-stepper__step--done .csds-stepper__dot {
  border-color: var(--csds-state-win);
  color: var(--csds-state-win);
}
.csds-stepper__step--done + .csds-stepper__step::before {
  border-top-color: var(--csds-state-win);
}
.csds-stepper .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- cookie banner (065) --- */
/*
 * Complianz paints its banner from custom properties it prints on :root
 * (uploads/complianz/css/banner-*.css), filled from its own settings: a white
 * panel and a blue Accept on the dark site. They are redeclared here, on the
 * banner's own containers — an id outranks :root, and the properties inherit
 * to everything inside. Complianz's settings are not written.
 * Accept is blood, not crimson: ink on crimson is 4.13:1 at 15px.
 */
#cmplz-cookiebanner-container,
#cmplz-manage-consent {
  --cmplz_banner_background_color: var(--csds-surface-panel);
  --cmplz_banner_border_color: var(--csds-border-default);
  --cmplz_text_color: var(--csds-ink);
  --cmplz_hyperlink_color: var(--csds-link);
  --cmplz_button_accept_background_color: var(--csds-blood);
  --cmplz_button_accept_border_color: var(--csds-blood);
  --cmplz_button_accept_text_color: var(--csds-ink);
  --cmplz_button_deny_background_color: var(--csds-surface-raised);
  --cmplz_button_deny_border_color: var(--csds-border-default);
  --cmplz_button_deny_text_color: var(--csds-ink);
  --cmplz_button_settings_background_color: var(--csds-surface-raised);
  --cmplz_button_settings_border_color: var(--csds-border-default);
  --cmplz_button_settings_text_color: var(--csds-ink-muted);
  --cmplz_slider_active_color: var(--csds-crimson);
  --cmplz_slider_inactive_color: var(--csds-ink-muted);
  --cmplz_slider_bullet_color: var(--csds-ink);
  --cmplz_category_header_always_active_color: var(--csds-state-win);
}

/* The preferences view's category rows: a translucent light grey in
   Complianz's own sheet, which is not one of its properties. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background-color: var(--csds-surface-raised);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before {
  box-shadow: 0 0 0 2px var(--csds-gold-light);
}

/* ------------------------------------------------------------ plans ---- */

/*
 * The membership comparison (0.15.0, 068) — csds_plans_table(), on the
 * homepage and the levels page's Plan step, so it lives here, not in
 * home.css. A table on a wide screen — a
 * column per plan, a row per thing a plan grants — and on a phone the
 * landing mockup's swipeable cards, one per plan (scroll-snap; the next card
 * peeks in to say there is more). Both come from the same rows; the one not
 * in use is display:none, so a screen reader meets the plans once.
 */

.csds-plans__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The hidden labels are absolutely placed: without a positioned scroller
   they are placed against the PAGE, and the last card's label pushed it
   1,817px wide on a phone (the 058 trap). Each scroller is their frame. */
.csds-plans__table-wrap,
.csds-plans__cards {
	position: relative;
}

/* The back and forward buttons exist only once plans-carousel.js has added
   them, and show only where the cards do. */
.csds-plans__nav { display: none; }

.csds-plans__table-wrap {
	overflow-x: auto;
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
}

.csds-plans__table {
	width: 100%;
	border-collapse: collapse;
	font: var(--csds-body-default);
	color: var(--csds-ink);
}

.csds-plans__table th,
.csds-plans__table td {
	/* Stated, not inherited: inside page content `.csds-content th` (0,1,1)
	   makes every header a small uppercase label (the levels page). */
	font: var(--csds-body-default);
	letter-spacing: normal;
	text-transform: none;
	padding: var(--csds-space-3) var(--csds-space-4);
	border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
	text-align: center;
	vertical-align: middle;
}

.csds-plans__table tbody th {
	text-align: left;
	font: var(--csds-body-default);
	color: var(--csds-ink-muted);
	white-space: nowrap;
}

.csds-plans__table thead th {
	vertical-align: bottom;
	padding-top: var(--csds-space-5);
}

.csds-plans__table tfoot td {
	border-bottom: 0;
	padding-bottom: var(--csds-space-5);
}

/* A button is not a content link: `.csds-content a` (0,1,1) underlines it. */
.csds-plans .csds-btn {
	text-decoration: none;
}

.csds-plans__table tbody tr:hover {
	background: var(--csds-surface-raised);
}

.csds-plans__name {
	display: block;
	margin: 0;
	font: var(--csds-heading-section);
	font-family: var(--csds-font-display);
	text-transform: uppercase;
	color: var(--csds-ink);
}

.csds-plans__price {
	display: block;
	margin: 0;
	font: var(--csds-display-name);
	font-family: var(--csds-font-display);
	color: var(--csds-gold);
}

.csds-plans__per {
	font: var(--csds-body-caption);
	color: var(--csds-ink-muted);
}

.csds-plans__mark {
	display: inline-flex;
	vertical-align: middle;
}

.csds-plans__mark--yes { color: var(--csds-state-win); }
.csds-plans__mark--no  { color: var(--csds-ink-muted); }

.csds-plans__none { color: var(--csds-ink-muted); }

/* The viewer's current plan (the levels page). */
.csds-plans__held {
	display: inline-block;
	margin-top: var(--csds-space-1);
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-gold-light);
}

.csds-plans__card.is-held { border-color: var(--csds-gold); }

.csds-plans__cards { display: none; }

@media (max-width: 720px) {
	.csds-plans__table-wrap { display: none; }

	.csds-plans__carousel {
		position: relative;
	}

	/*
	 * Each card stops in the middle (068 revision). A card is the row's
	 * width less one side space on each side, and the row is padded by that
	 * same space, so every card — the first and the last too — centres
	 * exactly. The side space is the buttons' 44px: the neighbours peek in
	 * under them.
	 */
	.csds-plans__cards {
		--csds-plans-side: 44px;
		display: flex;
		gap: var(--csds-space-3);
		margin: 0;
		padding: 0 var(--csds-plans-side) var(--csds-space-2);
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.csds-plans__cards::-webkit-scrollbar { display: none; }

	.csds-plans__card {
		flex: 0 0 100%;
		display: flex;
		flex-direction: column;
		gap: var(--csds-space-2);
		margin: 0;
		padding: var(--csds-space-5);
		scroll-snap-align: center;
		background: var(--csds-surface-panel);
		border: var(--csds-border-hairline) solid var(--csds-border-default);
		border-radius: var(--csds-radius-xs);
	}

	.csds-plans__list {
		margin: 0 0 var(--csds-space-2);
	}

	.csds-plans__item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--csds-space-3);
		padding: var(--csds-space-2) 0;
		border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	}

	.csds-plans__item dt {
		font: var(--csds-body-caption);
		color: var(--csds-ink);
	}

	.csds-plans__item.is-no dt { color: var(--csds-ink-muted); }

	.csds-plans__item dd {
		margin: 0;
		font: var(--csds-body-caption);
		color: var(--csds-ink);
		text-align: right;
	}

	.csds-plans__card .csds-btn {
		margin-top: auto;
		text-align: center;
	}

	/* Back and forward, over the peeking cards at either edge: 44px touch
	   targets, centred on the row. */
	.csds-plans__nav {
		position: absolute;
		top: 50%;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		transform: translateY(-50%);
		border: var(--csds-border-hairline) solid var(--csds-border-default);
		border-radius: var(--csds-radius-xs);
		background: var(--csds-surface-raised);
		color: var(--csds-ink);
		cursor: pointer;
	}

	.csds-plans__nav--prev { left: 0; }
	.csds-plans__nav--next { right: 0; }

	.csds-plans__nav:hover:not(:disabled) { border-color: var(--csds-gold-light); }

	.csds-plans__nav:focus-visible {
		outline: var(--csds-border-thick) solid var(--csds-gold-light);
		outline-offset: 2px;
	}

	.csds-plans__nav:disabled {
		opacity: 0.4;
		cursor: default;
	}
}