/*! Core Support design system 1.0.0 (2026-10-24). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Core Support base: an opt-in document class, three scope roots, resets that outrank wp-admin's
   element rules without fighting component classes, type roles and layout helpers.
   Nothing here targets a bare element, so loading the bundle in wp-admin or a theme restyles
   only markup that sits inside .csx-page, .csx-scope or .csx-admin. */

/* Opt-in document class for standalone screens (a full-page portal template, the demos).
   In WordPress add it with the body_class filter only on templates the plugin owns. */
.csx-body {
  margin: 0;
  background: var(--csx-canvas);
  color: var(--csx-body);
  font-family: var(--csx-font);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Scope roots. .csx-page is a full front-end page, .csx-scope is a fragment inside a theme
   (a block, a shortcode), .csx-admin is the wp-admin shell (see admin-shell). */
.csx-page,
.csx-scope,
.csx-admin {
  color: var(--csx-body);
  font-family: var(--csx-font);
  font-feature-settings: var(--csx-font-features);
  font-weight: var(--csx-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.csx-page,
.csx-scope {
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

.csx-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--csx-canvas);
}

.csx-main {
  flex: 1 0 auto;
}

.csx-main:focus {
  outline: 0;
}

/* Resets: one class of specificity (0,1,0). That beats wp-admin's element rules (p, h2, li, a)
   and ties with component classes, which load later and so win. */
.csx-page,
.csx-page *,
.csx-page *::before,
.csx-page *::after,
.csx-scope,
.csx-scope *,
.csx-scope *::before,
.csx-scope *::after,
.csx-admin,
.csx-admin *,
.csx-admin *::before,
.csx-admin *::after {
  box-sizing: border-box;
}

.csx-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, pre, table, fieldset, legend),
.csx-scope :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, pre, table, fieldset, legend),
.csx-admin :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, pre, table, fieldset, legend) {
  margin: 0;
  padding: 0;
}

.csx-page :where(fieldset),
.csx-scope :where(fieldset),
.csx-admin :where(fieldset) {
  min-width: 0;
  border: 0;
}

.csx-page :where(p, li, dt, dd, td, th, label, legend),
.csx-scope :where(p, li, dt, dd, td, th, label, legend),
.csx-admin :where(p, li, dt, dd, td, th, label, legend) {
  font-size: inherit;
  line-height: inherit;
}

.csx-page :where(ul, ol),
.csx-scope :where(ul, ol),
.csx-admin :where(ul, ol) {
  list-style: none;
}

.csx-page :where(img, svg, video),
.csx-scope :where(img, svg, video),
.csx-admin :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

.csx-page :where(img, video),
.csx-scope :where(img, video),
.csx-admin :where(img, video) {
  height: auto;
}

.csx-page :where(button, input, select, textarea),
.csx-scope :where(button, input, select, textarea),
.csx-admin :where(button, input, select, textarea) {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* Headings: front-end ladder */
.csx-page :where(h1, h2, h3, h4, h5, h6),
.csx-scope :where(h1, h2, h3, h4, h5, h6),
.csx-admin :where(h1, h2, h3, h4, h5, h6) {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
  text-wrap: balance;
}

.csx-page :where(h1),
.csx-scope :where(h1) {
  font-size: var(--csx-fs-1);
  line-height: var(--csx-lh-tight);
  letter-spacing: var(--csx-track-display);
}

.csx-page :where(h2),
.csx-scope :where(h2) {
  font-size: var(--csx-fs-2);
  letter-spacing: var(--csx-track-heading);
}

.csx-page :where(h3),
.csx-scope :where(h3) {
  font-size: var(--csx-fs-4);
}

.csx-page :where(h4, h5, h6),
.csx-scope :where(h4, h5, h6) {
  font-size: var(--csx-fs-5);
}

/* Headings: wp-admin ladder, denser like the screens around it */
.csx-admin :where(h1) {
  font-size: var(--csx-fs-3);
}

.csx-admin :where(h2) {
  font-size: var(--csx-fs-5);
}

.csx-admin :where(h3, h4, h5, h6) {
  font-size: 0.9375rem;
}

.csx-page :where(p, li, dd),
.csx-scope :where(p, li, dd),
.csx-admin :where(p, li, dd) {
  text-wrap: pretty;
}

/* Links */
.csx-page :where(a),
.csx-scope :where(a),
.csx-admin :where(a) {
  color: var(--csx-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--csx-dur-fast) var(--csx-ease);
}

/* (0,1,1): level with wp-admin's a:hover and loaded after it, below any component :hover rule */
.csx-page a:where(:hover),
.csx-scope a:where(:hover),
.csx-admin a:where(:hover) {
  color: var(--csx-link-hover);
}

/* Focus: one 2px ring everywhere. wp-admin adds a box-shadow ring to a:focus; this removes it. */
.csx-page :where(a, button, input, select, textarea, summary, [tabindex]):focus,
.csx-scope :where(a, button, input, select, textarea, summary, [tabindex]):focus,
.csx-admin :where(a, button, input, select, textarea, summary, [tabindex]):focus {
  box-shadow: none;
}

.csx-page :where(a, button, summary, [tabindex]):focus-visible,
.csx-scope :where(a, button, summary, [tabindex]):focus-visible,
.csx-admin :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

/* Inline code, keys, strong text, selection */
.csx-page :where(code, kbd, samp),
.csx-scope :where(code, kbd, samp),
.csx-admin :where(code, kbd, samp) {
  margin: 0;
  font-family: var(--csx-font-mono);
  font-size: 0.875em;
}

.csx-page :where(p, li, td, dd) > :where(code),
.csx-scope :where(p, li, td, dd) > :where(code),
.csx-admin :where(p, li, td, dd) > :where(code) {
  padding: 1px 6px;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-sm);
  background: var(--csx-code-bg);
  color: var(--csx-code-ink);
  overflow-wrap: anywhere;
}

.csx-page :where(strong, b),
.csx-scope :where(strong, b),
.csx-admin :where(strong, b) {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-semibold);
}

.csx-page ::selection,
.csx-scope ::selection,
.csx-admin ::selection {
  background: var(--csx-accent-soft);
  color: var(--csx-ink);
}

.csx-page [hidden],
.csx-scope [hidden],
.csx-admin [hidden] {
  display: none !important;
}

/* Type roles as classes, for when the element and the look differ */
.csx-display {
  color: var(--csx-ink);
  font-size: var(--csx-fs-display);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-tight);
  letter-spacing: var(--csx-track-display);
}

.csx-title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-2);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
  letter-spacing: var(--csx-track-heading);
}

.csx-subtitle {
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
}

.csx-lede {
  color: var(--csx-muted);
  font-size: var(--csx-fs-lede);
  line-height: var(--csx-lh-body);
}

.csx-small {
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.55;
}

.csx-meta {
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  line-height: 1.5;
}

.csx-muted {
  color: var(--csx-muted);
}

.csx-mono {
  font-family: var(--csx-font-mono);
  font-variant-numeric: tabular-nums;
}

.csx-num {
  font-variant-numeric: tabular-nums;
}

.csx-kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border: 1px solid var(--csx-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--csx-radius-sm);
  background: var(--csx-surface);
  color: var(--csx-muted);
  font-family: var(--csx-font);
  font-size: var(--csx-fs-8);
  font-weight: var(--csx-weight-medium);
  line-height: 1.6;
  text-align: center;
}

/* Sections own vertical rhythm, containers own width */
.csx-section {
  padding-block: var(--csx-section-pad);
  padding-inline: var(--csx-gutter);
}

.csx-section--tight {
  padding-block: var(--csx-space-8);
}

.csx-section--flush-top {
  padding-top: 0;
}

.csx-section--band {
  border-block: 1px solid var(--csx-line);
  background: var(--csx-surface);
}

.csx-section--band + .csx-section--band {
  border-top: 0;
}

.csx-container {
  width: 100%;
  max-width: var(--csx-content);
  margin-inline: auto;
}

.csx-container--wide {
  max-width: var(--csx-wide);
}

.csx-container--narrow {
  max-width: var(--csx-narrow);
}

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

.csx-stack--tight {
  gap: var(--csx-space-2);
}

.csx-stack--loose {
  gap: var(--csx-space-7);
}

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

.csx-grid {
  display: grid;
  gap: var(--csx-space-4);
}

.csx-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.csx-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.csx-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .csx-grid--3,
  .csx-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .csx-grid--2,
  .csx-grid--3,
  .csx-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Split: a narrow column beside a wide one. Default puts the narrow column first
   (a section header beside its content); --main puts the wide column first (content and aside). */
.csx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--csx-space-7) var(--csx-space-9);
  align-items: start;
}

.csx-split--main {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--csx-space-6);
}

.csx-split--sticky > :first-child {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--csx-nav-h) + var(--csx-space-6));
}

@media (max-width: 959px) {
  .csx-split,
  .csx-split--main {
    grid-template-columns: minmax(0, 1fr);
  }

  .csx-split--sticky > :first-child {
    position: static;
  }
}

.csx-center {
  text-align: center;
}

.csx-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.csx-skip {
  position: absolute;
  top: -100px;
  left: var(--csx-space-4);
  z-index: 100;
  padding: var(--csx-space-2) var(--csx-space-4);
  border-radius: var(--csx-radius);
  background: var(--csx-btn);
  color: var(--csx-btn-ink);
  font-weight: var(--csx-weight-semibold);
  text-decoration: none;
}

.csx-skip:focus {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--csx-space-3));
  color: var(--csx-btn-ink);
}

/* Text link with a trailing icon */
.csx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--csx-link);
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
}

.csx-link:hover {
  color: var(--csx-link-hover);
  text-decoration: underline;
}

.csx-link svg {
  flex: none;
  transition: transform var(--csx-dur) var(--csx-ease);
}

.csx-link:hover svg {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .csx-page :where(a),
  .csx-scope :where(a),
  .csx-admin :where(a),
  .csx-link svg {
    transition: none;
  }

  .csx-link:hover svg {
    transform: none;
  }
}

/* ---- buttons ---- */
/* Buttons: 36px Tabler-style controls with 6px corners. Every selector doubles the root class
   (.csx-btn.csx-btn, specificity 0,2,0) so wp-admin's a:focus and a theme's button[type=submit]
   (both 0,1,1) never restyle them, without !important. */

.csx-btn.csx-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--csx-space-2);
  width: auto;
  min-height: var(--csx-control-h);
  padding: 7px var(--csx-space-4);
  border: 1px solid var(--csx-line-control);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-input);
  color: var(--csx-ink);
  font-family: inherit;
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  line-height: 1.43;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--csx-dur-fast) var(--csx-ease), border-color var(--csx-dur-fast) var(--csx-ease), color var(--csx-dur-fast) var(--csx-ease);
}

.csx-btn.csx-btn:hover {
  background: var(--csx-subtle);
  color: var(--csx-ink);
}

.csx-btn.csx-btn:focus {
  color: var(--csx-ink);
}

.csx-btn.csx-btn:focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-btn.csx-btn svg {
  flex: none;
}

/* Primary: Tabler blue, white label (5.0:1, 7.0:1 on hover) */
.csx-btn--primary.csx-btn--primary,
.csx-btn--primary.csx-btn--primary:focus {
  border-color: var(--csx-btn);
  background: var(--csx-btn);
  color: var(--csx-btn-ink);
}

.csx-btn--primary.csx-btn--primary:hover {
  border-color: var(--csx-btn-hover);
  background: var(--csx-btn-hover);
  color: var(--csx-btn-ink);
}

/* Ghost: no frame until hover; toolbars, dismiss buttons, quiet actions */
.csx-btn--ghost.csx-btn--ghost,
.csx-btn--ghost.csx-btn--ghost:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--csx-muted);
}

.csx-btn--ghost.csx-btn--ghost:hover {
  border-color: transparent;
  background: var(--csx-subtle);
  color: var(--csx-ink);
}

/* Danger: an outline button with red text; a destructive action is never the loudest thing */
.csx-btn--danger.csx-btn--danger,
.csx-btn--danger.csx-btn--danger:focus {
  color: var(--csx-danger-ink);
}

.csx-btn--danger.csx-btn--danger:hover {
  border-color: var(--csx-danger);
  background: var(--csx-danger-soft);
  color: var(--csx-danger-ink);
}

/* Pressed toggle (filters, view switches) */
.csx-btn.csx-btn[aria-pressed="true"] {
  border-color: var(--csx-accent);
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

/* Script-revealed buttons ship with the hidden attribute; keep them hidden in any context */
.csx-btn.csx-btn[hidden] {
  display: none;
}

/* Sizes and shapes */
.csx-btn--sm.csx-btn--sm {
  min-height: var(--csx-control-h-sm);
  padding: 4px 10px;
  font-size: var(--csx-fs-7);
  gap: 6px;
}

.csx-btn--lg.csx-btn--lg {
  min-height: var(--csx-control-h-lg);
  padding: 10px 20px;
  font-size: var(--csx-fs-5);
}

.csx-btn--block.csx-btn--block {
  display: flex;
  width: 100%;
}

.csx-btn--icon.csx-btn--icon {
  width: var(--csx-control-h);
  padding: 0;
}

.csx-btn--icon.csx-btn--sm {
  width: var(--csx-control-h-sm);
}

/* Disabled */
.csx-btn.csx-btn:disabled,
.csx-btn.csx-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Groups */
.csx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2);
}

.csx-actions--center {
  justify-content: center;
}

.csx-actions--end {
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .csx-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .csx-actions--stack-sm > .csx-btn.csx-btn {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .csx-btn.csx-btn,
  .csx-btn--sm.csx-btn--sm {
    min-height: var(--csx-target);
  }

  .csx-btn--icon.csx-btn--icon,
  .csx-btn--icon.csx-btn--sm {
    width: var(--csx-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-btn.csx-btn {
    transition: none;
  }
}

/* ---- badges ---- */
/* Badges: Tabler's light badges. 4px corners, a soft tint and a dark ink of the same hue.
   Status dots and counts live here too. Dots are decorative: a word always sits next to one. */

.csx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: var(--csx-radius-sm);
  background: var(--csx-subtle);
  color: var(--csx-muted);
  font-size: var(--csx-fs-8);
  font-weight: var(--csx-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.csx-badge svg {
  flex: none;
}

.csx-badge--info {
  background: var(--csx-info-soft);
  color: var(--csx-info-ink);
}

.csx-badge--ok {
  background: var(--csx-ok-soft);
  color: var(--csx-ok-ink);
}

.csx-badge--warn {
  background: var(--csx-warn-soft);
  color: var(--csx-warn-ink);
}

.csx-badge--danger {
  background: var(--csx-danger-soft);
  color: var(--csx-danger-ink);
}

.csx-badge--accent {
  background: var(--csx-btn);
  color: var(--csx-btn-ink);
}

.csx-badge--outline {
  padding: 1px 7px;
  border: 1px solid var(--csx-line-strong);
  background: transparent;
  color: var(--csx-muted);
}

.csx-badge--pill {
  border-radius: var(--csx-radius-pill);
}

.csx-badge--mono {
  font-family: var(--csx-font-mono);
  font-variant-numeric: tabular-nums;
}

.csx-badge__dot,
.csx-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.csx-dot {
  width: 8px;
  height: 8px;
  background: var(--csx-line-control);
}

.csx-dot--ok {
  background: var(--csx-ok);
}

.csx-dot--warn {
  background: var(--csx-warn);
}

.csx-dot--danger {
  background: var(--csx-danger);
}

.csx-dot--info {
  background: var(--csx-accent);
}

/* Count pill: tab and nav counters, column totals */
.csx-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--csx-radius-pill);
  background: var(--csx-subtle);
  color: var(--csx-muted);
  font-size: var(--csx-fs-8);
  font-weight: var(--csx-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

/* Chips: short checkable facts in a row, under hero actions or inside a card */
.csx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--csx-space-2) var(--csx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-chips--center {
  justify-content: center;
}

.csx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  line-height: 1.5;
}

.csx-chip svg {
  flex: none;
  color: var(--csx-ok-ink);
}

/* Tag link: the one pill that is clickable (popular searches, article tags). A badge never is. */
.csx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--csx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-tags .csx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--csx-line-strong);
  border-radius: var(--csx-radius-pill);
  background: var(--csx-surface);
  color: var(--csx-body);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
  transition: border-color var(--csx-dur-fast) var(--csx-ease), color var(--csx-dur-fast) var(--csx-ease);
}

.csx-tags .csx-tag:hover {
  border-color: var(--csx-accent);
  color: var(--csx-link);
}

@media (pointer: coarse) {
  .csx-tags .csx-tag {
    min-height: var(--csx-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-tags .csx-tag {
    transition: none;
  }
}

/* ---- nav ---- */
/* Nav: a white 60px bar with a bottom hairline. The current link carries a 2px blue rule on the
   bar's bottom edge, like Tabler's navbar. Sticks below the WordPress toolbar when one is shown. */

.csx-nav {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 40;
  border-bottom: 1px solid var(--csx-line);
  background: var(--csx-surface);
}

.csx-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--csx-space-6);
  width: 100%;
  max-width: calc(var(--csx-content) + 2 * var(--csx-gutter));
  min-height: var(--csx-nav-h);
  margin-inline: auto;
  padding-inline: var(--csx-gutter);
}

.csx-nav--wide .csx-nav__inner {
  max-width: calc(var(--csx-wide) + 2 * var(--csx-gutter));
}

.csx-nav .csx-nav__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.csx-nav .csx-nav__brand:hover {
  color: var(--csx-ink);
}

.csx-nav__mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--csx-radius);
  background: var(--csx-btn);
  color: var(--csx-btn-ink);
}

.csx-nav__tag {
  padding: 1px 8px;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-pill);
  color: var(--csx-muted);
  font-size: var(--csx-fs-8);
  font-weight: var(--csx-weight-medium);
}

.csx-nav__menu {
  display: flex;
  flex: 1;
  align-self: stretch;
  min-width: 0;
}

.csx-nav__menu > nav {
  display: flex;
  align-items: stretch;
}

.csx-nav__links {
  display: flex;
  align-items: stretch;
  gap: var(--csx-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-nav__links > li {
  display: flex;
}

.csx-nav .csx-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--csx-space-3);
  color: var(--csx-muted);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
}

.csx-nav .csx-nav__link:hover {
  color: var(--csx-ink);
}

.csx-nav .csx-nav__link[aria-current="page"] {
  color: var(--csx-ink);
}

.csx-nav .csx-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: var(--csx-space-3);
  bottom: -1px;
  left: var(--csx-space-3);
  height: 2px;
  background: var(--csx-accent);
}

.csx-nav__link:focus-visible {
  outline-offset: -2px;
}

.csx-nav__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--csx-space-2);
  margin-left: auto;
}

/* Theme toggle: the moon shows in light, the sun in dark. The two tokens flip with the theme,
   so a toggle inside a pinned wp-admin shell follows that shell, not the page. */
.csx-theme-toggle__moon,
.csx-theme-toggle__sun {
  align-items: center;
}

.csx-theme-toggle__moon {
  display: var(--csx-show-light);
}

.csx-theme-toggle__sun {
  display: var(--csx-show-dark);
}

.csx-nav__toggle.csx-nav__toggle {
  display: none;
}

/* Under 900px the links fold into a panel below the bar. Without JS they stay in the bar. */
@media (max-width: 899px) {
  .csx-nav.has-menu .csx-nav__toggle.csx-nav__toggle {
    display: inline-flex;
  }

  .csx-nav.has-menu .csx-nav__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: var(--csx-space-2) var(--csx-gutter) var(--csx-space-4);
    border-bottom: 1px solid var(--csx-line);
    background: var(--csx-surface);
    box-shadow: var(--csx-shadow-menu);
  }

  .csx-nav.has-menu .csx-nav__menu.is-open {
    display: block;
  }

  .csx-nav.has-menu .csx-nav__links {
    flex-direction: column;
    gap: 0;
  }

  .csx-nav.has-menu .csx-nav__link {
    width: 100%;
    min-height: var(--csx-target);
    padding: 0 var(--csx-space-2);
    border-radius: var(--csx-radius);
  }

  .csx-nav.has-menu .csx-nav__link[aria-current="page"] {
    background: var(--csx-accent-soft);
    color: var(--csx-link);
  }

  .csx-nav.has-menu .csx-nav__link[aria-current="page"]::after {
    display: none;
  }

  .csx-nav:not(.has-menu) .csx-nav__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .csx-nav:not(.has-menu) .csx-nav__menu {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
  }

  .csx-nav:not(.has-menu) .csx-nav__links {
    min-height: var(--csx-target);
  }
}

@media (max-width: 560px) {
  .csx-nav__cta.csx-nav__cta {
    display: none;
  }

  .csx-nav__tag {
    display: none;
  }
}

@media (pointer: coarse) {
  .csx-nav .csx-nav__link {
    min-height: var(--csx-target);
  }
}

/* ---- hero ---- */
/* Hero: a white band with a bottom hairline over the gray canvas. Three layouts: centered with a
   search (support portals, docs homes), split with a coded window (plugin landing pages), and a
   compact page header for inner pages (changelog, roadmap). */

.csx-hero {
  padding: clamp(3rem, 2.2rem + 3.4vw, 5rem) var(--csx-gutter);
  border-bottom: 1px solid var(--csx-line);
  background: var(--csx-surface);
}

.csx-hero__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-display);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-tight);
  letter-spacing: var(--csx-track-display);
  text-wrap: balance;
}

.csx-hero__lede {
  max-width: 640px;
  margin-top: var(--csx-space-3);
  color: var(--csx-muted);
  font-size: var(--csx-fs-lede);
  line-height: var(--csx-lh-body);
}

.csx-hero__search {
  max-width: 640px;
  margin-top: var(--csx-space-7);
}

.csx-hero__actions {
  margin-top: var(--csx-space-7);
}

.csx-hero__chips {
  margin-top: var(--csx-space-5);
}

/* Popular searches under the search field: a label and a row of tag links */
.csx-hero__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2);
  margin-top: var(--csx-space-4);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-hero__links ul {
  display: contents;
}

/* Centered */
.csx-hero--center {
  text-align: center;
}

.csx-hero--center .csx-hero__lede,
.csx-hero--center .csx-hero__search {
  margin-inline: auto;
}

.csx-hero--center .csx-hero__links,
.csx-hero--center .csx-hero__actions,
.csx-hero--center .csx-hero__chips {
  justify-content: center;
}

.csx-hero--center .csx-hero__title {
  max-width: 820px;
  margin-inline: auto;
}

/* Split: copy on the left, a coded window on the right */
.csx-hero--split .csx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--csx-space-9);
  align-items: center;
}

@media (max-width: 959px) {
  .csx-hero--split .csx-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csx-hero__visual {
  min-width: 0;
}

/* Page header for inner pages: smaller title, start aligned, room for breadcrumbs and actions */
.csx-hero--page {
  padding-block: var(--csx-space-8) var(--csx-space-7);
}

.csx-hero--page .csx-hero__title {
  font-size: var(--csx-fs-1);
}

.csx-hero--page .csx-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--csx-space-4) var(--csx-space-6);
}

.csx-hero--page .csx-hero__actions {
  margin-top: 0;
}

/* Coded window: a browser frame holding real components as a product picture (aria-hidden) */
.csx-window {
  overflow: hidden;
  border: 1px solid var(--csx-line-strong);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-canvas);
  box-shadow: var(--csx-shadow-menu);
  text-align: left;
}

.csx-window__bar {
  display: flex;
  align-items: center;
  gap: var(--csx-space-3);
  padding: 10px var(--csx-space-4);
  border-bottom: 1px solid var(--csx-line);
  background: var(--csx-surface);
}

.csx-window__dots {
  display: flex;
  gap: 6px;
}

.csx-window__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--csx-line-strong);
}

.csx-window__title {
  flex: 1;
  overflow: hidden;
  padding: 3px var(--csx-space-3);
  border-radius: var(--csx-radius-sm);
  background: var(--csx-subtle);
  color: var(--csx-muted);
  font-size: var(--csx-fs-8);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csx-window__body {
  display: grid;
  gap: var(--csx-space-3);
  padding: var(--csx-space-4);
  font-size: var(--csx-fs-7);
}

/* ---- section-header ---- */
/* Section header: Tabler's page-header row. Title and one intro line on the left, one link or
   button on the right, aligned to the bottom. --center stacks it for marketing sections. */

.csx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--csx-space-3) var(--csx-space-6);
  margin-bottom: var(--csx-space-6);
}

.csx-head__text {
  max-width: 680px;
}

.csx-head__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-2);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
  letter-spacing: var(--csx-track-heading);
}

.csx-head__intro {
  margin-top: var(--csx-space-2);
  color: var(--csx-muted);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

.csx-head__aside {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2);
}

.csx-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.csx-head--center .csx-head__text {
  margin-inline: auto;
}

/* Small: a sub-section inside a page or a card group */
.csx-head--sm {
  margin-bottom: var(--csx-space-4);
}

.csx-head--sm .csx-head__title {
  font-size: var(--csx-fs-4);
  letter-spacing: 0;
}

.csx-head--sm .csx-head__intro {
  margin-top: var(--csx-space-1);
  font-size: var(--csx-fs-prose-sm);
}

/* ---- cards ---- */
/* Cards: Tabler's card. White surface, one hairline, 8px corners, the faintest shadow in light
   mode and none in dark. A header bar, a body, an optional footer bar, and a status strip. */

.csx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-2) var(--csx-space-3);
  padding: var(--csx-space-4) var(--csx-space-5);
  border-bottom: 1px solid var(--csx-line);
}

.csx-card__title {
  display: flex;
  align-items: center;
  gap: var(--csx-space-2);
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.5;
}

.csx-card__title svg {
  flex: none;
  color: var(--csx-muted);
}

.csx-card__title--lg {
  font-size: var(--csx-fs-4);
  line-height: var(--csx-lh-heading);
}

.csx-card__subtitle {
  margin-top: 2px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

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

.csx-card__body {
  flex: 1 1 auto;
  padding: var(--csx-space-5);
}

.csx-card__body + .csx-card__body {
  border-top: 1px solid var(--csx-line);
}

.csx-card__body--flush {
  padding: 0;
}

.csx-card__body > * + * {
  margin-top: var(--csx-space-3);
}

.csx-card__body--flush > * + * {
  margin-top: 0;
}

.csx-card__text {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: var(--csx-lh-body);
}

.csx-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  padding: var(--csx-space-3) var(--csx-space-5);
  border-top: 1px solid var(--csx-line);
}

.csx-card__footer > :last-child:not(:first-child) {
  margin-left: auto;
}

.csx-card__footer--end {
  justify-content: flex-end;
}

/* Icon tile: a 40px soft-blue square for a card's or feature's icon */
.csx-card__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--csx-radius);
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

/* Status strip across the top edge, for the featured or current item */
.csx-card__status {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 3px;
  border-radius: var(--csx-radius-lg) var(--csx-radius-lg) 0 0;
  background: var(--csx-accent);
}

.csx-card__status--ok {
  background: var(--csx-ok);
}

.csx-card__status--warn {
  background: var(--csx-warn);
}

.csx-card__status--danger {
  background: var(--csx-danger);
}

/* Whole-card link: the title link's ::after covers the card */
.csx-card--link {
  transition: border-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-card--link:hover {
  border-color: var(--csx-line-strong);
}

.csx-card--link .csx-card__link {
  color: var(--csx-ink);
  text-decoration: none;
}

.csx-card--link .csx-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.csx-card--link .csx-card__link:focus-visible {
  outline: 0;
}

.csx-card--link:focus-within {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-card--link:hover .csx-card__link {
  color: var(--csx-link);
}

@media (prefers-reduced-motion: reduce) {
  .csx-card--link {
    transition: none;
  }
}

/* ---- bento ---- */
/* Bento: a six-column grid of cards, each opening with a well that holds a small coded UI built
   from real components (badges, switches, meters, list rows). Two wide over three narrow is the
   default rhythm. Also home to the mini panel, meter and uptime bars used in wells and stat cards. */

.csx-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--csx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-bento > li {
  display: flex;
  grid-column: span 2;
  min-width: 0;
}

.csx-bento > li > .csx-card {
  flex: 1;
}

.csx-bento > .csx-bento__wide {
  grid-column: span 3;
}

.csx-bento > .csx-bento__full {
  grid-column: span 6;
}

@media (max-width: 1023px) {
  .csx-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csx-bento > li {
    grid-column: span 1;
  }

  .csx-bento > .csx-bento__wide,
  .csx-bento > .csx-bento__full {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .csx-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .csx-bento > li,
  .csx-bento > .csx-bento__wide,
  .csx-bento > .csx-bento__full {
    grid-column: span 1;
  }
}

.csx-bento__well {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 176px;
  padding: var(--csx-space-5);
  overflow: hidden;
  border-bottom: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg) var(--csx-radius-lg) 0 0;
  background: var(--csx-subtle);
}

/* Mini panel: a small surface inside a well */
.csx-mini {
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
  color: var(--csx-body);
  font-size: var(--csx-fs-7);
  line-height: 1.45;
}

.csx-mini__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-2);
  min-height: 40px;
  padding: 8px var(--csx-space-3);
}

.csx-mini__row + .csx-mini__row {
  border-top: 1px solid var(--csx-line);
}

.csx-mini__label {
  display: flex;
  align-items: center;
  gap: var(--csx-space-2);
  min-width: 0;
  overflow: hidden;
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csx-mini__label svg {
  flex: none;
  color: var(--csx-muted);
}

.csx-mini__muted {
  flex: none;
  color: var(--csx-muted);
  font-variant-numeric: tabular-nums;
}

.csx-mini__stack {
  display: grid;
  gap: 6px;
  width: 100%;
}

/* Meter: a 6px progress bar. The span's width is the one inline value Core Support allows. */
.csx-meter {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--csx-radius-pill);
  background: var(--csx-line);
}

.csx-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--csx-accent);
}

.csx-meter--ok > span {
  background: var(--csx-ok);
}

.csx-meter--warn > span {
  background: var(--csx-warn);
}

.csx-meter--danger > span {
  background: var(--csx-danger);
}

/* Uptime bars: one bar per day, colored by state, never sized by inline values */
.csx-bars {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-bars > li {
  flex: 1;
  min-width: 3px;
  border-radius: 2px;
  background: var(--csx-ok);
}

.csx-bars > .csx-bars__warn {
  background: var(--csx-warn);
}

.csx-bars > .csx-bars__danger {
  background: var(--csx-danger);
}

.csx-bars > .csx-bars__none {
  background: var(--csx-line);
}

/* ---- features ---- */
/* Features: open columns with an icon tile or a step number, a short title and one or two
   sentences. --cards puts each one on a card. Check lists say what is and isn't included. */

.csx-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--csx-space-7) var(--csx-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-features--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.csx-features--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .csx-features--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .csx-features,
  .csx-features--2,
  .csx-features--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--csx-space-6);
  }
}

.csx-feature {
  display: grid;
  align-content: start;
  gap: var(--csx-space-2);
  min-width: 0;
}

.csx-features--cards .csx-feature {
  padding: var(--csx-space-5);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-feature__icon,
.csx-feature__step {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--csx-space-2);
  border-radius: var(--csx-radius);
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

.csx-feature__step {
  border-radius: 50%;
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.csx-feature__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
}

.csx-feature__text {
  color: var(--csx-muted);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

/* Check lists: a green check for included, a muted dash for not included */
.csx-checks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-checks > li {
  position: relative;
  padding-left: 28px;
  color: var(--csx-body);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

.csx-checks > li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--csx-ok-soft);
}

.csx-checks > li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 6px;
  height: 9px;
  border-right: 2px solid var(--csx-ok-ink);
  border-bottom: 2px solid var(--csx-ok-ink);
  transform: rotate(45deg);
}

.csx-checks--no > li {
  color: var(--csx-muted);
}

.csx-checks--no > li::before {
  background: var(--csx-subtle);
}

.csx-checks--no > li::after {
  top: 9px;
  left: 5px;
  width: 8px;
  height: 0;
  border-right: 0;
  border-bottom: 2px solid var(--csx-muted);
  transform: none;
}

/* ---- pricing ---- */
/* Pricing: plan cards in a row. The featured plan gets a blue border and the status strip,
   never a different background. Prices are real numbers with the billing period in words. */

.csx-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--csx-space-4);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-pricing--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 840px;
  margin-inline: auto;
}

.csx-pricing > li {
  display: flex;
  min-width: 0;
}

@media (max-width: 899px) {
  .csx-pricing,
  .csx-pricing--2 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
  }
}

.csx-plan {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--csx-space-6);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-plan--featured {
  border-color: var(--csx-accent);
  box-shadow: 0 0 0 1px var(--csx-accent), var(--csx-shadow-card);
}

.csx-plan--featured::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 4px;
  border-radius: var(--csx-radius-lg) var(--csx-radius-lg) 0 0;
  background: var(--csx-accent);
}

.csx-plan__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-2);
}

.csx-plan__name {
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
}

.csx-plan__desc {
  margin-top: 6px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.55;
}

.csx-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--csx-space-5);
}

.csx-plan__amount {
  color: var(--csx-ink);
  font-size: 2.25rem;
  font-weight: var(--csx-weight-semibold);
  line-height: 1;
  letter-spacing: var(--csx-track-display);
  font-variant-numeric: tabular-nums;
}

.csx-plan__term {
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-plan .csx-plan__cta {
  margin-top: var(--csx-space-5);
}

.csx-plan__list {
  align-content: start;
  margin-top: var(--csx-space-5);
  padding-top: var(--csx-space-5);
  border-top: 1px solid var(--csx-line);
}

/* A second list (what the plan leaves out) follows the first without another rule */
.csx-plan__list + .csx-plan__list {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
}

.csx-pricing__note {
  max-width: 640px;
  margin: var(--csx-space-5) auto 0;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  text-align: center;
}

/* ---- faq ---- */
/* FAQ: Tabler's accordion on native details and summary. One card, rows split by hairlines,
   a chevron that turns when a row opens. No script needed. */

.csx-faq {
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-faq__item + .csx-faq__item {
  border-top: 1px solid var(--csx-line);
}

.csx-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-4);
  min-height: 56px;
  padding: var(--csx-space-3) var(--csx-space-5);
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-medium);
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-faq__q::-webkit-details-marker {
  display: none;
}

.csx-faq__q::marker {
  content: "";
}

.csx-faq__q:hover {
  background: var(--csx-subtle);
}

.csx-faq__q:focus-visible {
  outline-offset: -2px;
}

.csx-faq__icon {
  display: inline-flex;
  flex: none;
  color: var(--csx-muted);
  transition: transform var(--csx-dur) var(--csx-ease);
}

.csx-faq__item[open] > .csx-faq__q .csx-faq__icon {
  transform: rotate(180deg);
}

.csx-faq__item[open] > .csx-faq__q {
  color: var(--csx-link);
}

.csx-faq__a {
  padding: 0 var(--csx-space-5) var(--csx-space-5);
  color: var(--csx-body);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

.csx-faq__a > * + * {
  margin-top: var(--csx-space-2);
}

.csx-faq__contact {
  margin-top: var(--csx-space-4);
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
}

@media (prefers-reduced-motion: reduce) {
  .csx-faq__q,
  .csx-faq__icon {
    transition: none;
  }
}

/* ---- forms ---- */
/* Forms: Tabler's 36px controls with 6px corners. Control selectors double their class
   (.csx-input.csx-input, 0,2,0) so they outrank wp-admin's input[type=text] and
   its core select rule (both 0,1,1); state rules reach 0,3,0 to outrank wp-admin's :focus rules (0,2,1).
   Borders use --csx-line-control (3:1 or better on every surface). */

.csx-form {
  display: grid;
  gap: var(--csx-space-4);
}

.csx-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--csx-space-4);
}

@media (max-width: 640px) {
  .csx-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csx-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  margin-top: var(--csx-space-1);
}

.csx-form--card {
  padding: var(--csx-space-6);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.csx-label {
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  line-height: var(--csx-lh-ui);
}

.csx-label__opt {
  margin-left: 4px;
  color: var(--csx-muted);
  font-weight: var(--csx-weight-regular);
}

.csx-hint {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

.csx-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--csx-danger-ink);
  font-size: var(--csx-fs-prose-sm);
  font-weight: var(--csx-weight-medium);
  line-height: 1.5;
}

.csx-error svg {
  flex: none;
  margin-top: 2px;
}

/* Text inputs, selects, textareas */
.csx-input.csx-input,
.csx-select.csx-select,
.csx-textarea.csx-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--csx-control-h);
  margin: 0;
  padding: 7px var(--csx-space-3);
  border: 1px solid var(--csx-line-control);
  border-radius: var(--csx-radius);
  background-color: var(--csx-surface);
  box-shadow: var(--csx-shadow-input);
  color: var(--csx-ink);
  font-family: inherit;
  font-size: var(--csx-fs-6);
  line-height: 20px;
  transition: border-color var(--csx-dur-fast) var(--csx-ease), box-shadow var(--csx-dur-fast) var(--csx-ease);
}

.csx-textarea.csx-textarea {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
}

.csx-select.csx-select {
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--csx-muted) 50%), linear-gradient(135deg, var(--csx-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  cursor: pointer;
}

.csx-select.csx-select option {
  background: var(--csx-surface);
  color: var(--csx-ink);
}

.csx-input.csx-input::placeholder,
.csx-textarea.csx-textarea::placeholder {
  color: var(--csx-muted);
  opacity: 1;
}

.csx-input.csx-input:hover,
.csx-select.csx-select:hover,
.csx-textarea.csx-textarea:hover {
  border-color: var(--csx-muted);
  color: var(--csx-ink);
}

.csx-input.csx-input:focus,
.csx-select.csx-select:focus,
.csx-textarea.csx-textarea:focus {
  border-color: var(--csx-focus);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--csx-focus);
  color: var(--csx-ink);
}

.csx-input.csx-input[aria-invalid="true"],
.csx-select.csx-select[aria-invalid="true"],
.csx-textarea.csx-textarea[aria-invalid="true"] {
  border-color: var(--csx-danger);
}

.csx-input.csx-input[aria-invalid="true"]:focus,
.csx-textarea.csx-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--csx-danger);
}

.csx-input.csx-input[readonly],
.csx-textarea.csx-textarea[readonly] {
  background-color: var(--csx-subtle);
}

.csx-input.csx-input:disabled,
.csx-select.csx-select:disabled,
.csx-textarea.csx-textarea:disabled {
  background-color: var(--csx-subtle);
  color: var(--csx-muted);
  cursor: not-allowed;
}

.csx-input--mono.csx-input--mono {
  font-family: var(--csx-font-mono);
  font-size: var(--csx-fs-7);
}

.csx-input--sm.csx-input--sm,
.csx-select--sm.csx-select--sm {
  min-height: var(--csx-control-h-sm);
  padding-block: 4px;
  font-size: var(--csx-fs-7);
}

.csx-input--narrow.csx-input--narrow {
  max-width: 140px;
}

/* Input with an addon (a unit, a URL prefix) */
.csx-input-group {
  display: flex;
  min-width: 0;
}

.csx-input-group__addon {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0 var(--csx-space-3);
  border: 1px solid var(--csx-line-control);
  background: var(--csx-subtle);
  color: var(--csx-muted);
  font-size: var(--csx-fs-6);
  white-space: nowrap;
}

.csx-input-group__addon:first-child {
  border-right: 0;
  border-radius: var(--csx-radius) 0 0 var(--csx-radius);
}

.csx-input-group__addon:last-child {
  border-left: 0;
  border-radius: 0 var(--csx-radius) var(--csx-radius) 0;
}

.csx-input-group > .csx-input.csx-input {
  flex: 1;
  min-width: 0;
}

.csx-input-group > .csx-input-group__addon:first-child + .csx-input.csx-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.csx-input-group > .csx-input.csx-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Checkbox and radio. Drawn here so they follow the theme instead of wp-admin's white boxes. */
.csx-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--csx-body);
  font-size: var(--csx-fs-6);
  line-height: var(--csx-lh-ui);
  cursor: pointer;
}

.csx-check__text {
  display: grid;
  gap: 2px;
}

.csx-check__text strong {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
}

.csx-check__input.csx-check__input {
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid var(--csx-line-control);
  border-radius: var(--csx-radius-sm);
  background: var(--csx-surface);
  box-shadow: none;
  color: var(--csx-on-accent);
  line-height: 1;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.csx-check__input.csx-check__input[type="radio"] {
  border-radius: 50%;
}

.csx-check__input.csx-check__input::before {
  content: "";
  float: none;
  width: 10px;
  height: 10px;
  margin: 0;
  background: var(--csx-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--csx-dur-fast) var(--csx-ease);
}

.csx-check__input.csx-check__input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  clip-path: none;
}

.csx-check__input.csx-check__input:checked,
.csx-check__input.csx-check__input:indeterminate {
  border-color: var(--csx-accent);
  background: var(--csx-accent);
}

.csx-check__input.csx-check__input:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  margin: 0;
  transform: scale(1);
}

.csx-check__input.csx-check__input[type="radio"]:checked::before {
  width: 8px;
  height: 8px;
}

.csx-check__input.csx-check__input:indeterminate::before {
  width: 10px;
  height: 2px;
  clip-path: none;
  transform: scale(1);
}

.csx-check__input.csx-check__input:focus {
  border-color: var(--csx-line-control);
  box-shadow: none;
}

.csx-check__input.csx-check__input:checked:focus {
  border-color: var(--csx-accent);
}

.csx-check__input.csx-check__input:focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-check__input.csx-check__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Search: an input with a leading icon, optionally a button. --lg for heroes. */
.csx-search {
  display: flex;
  gap: var(--csx-space-2);
  min-width: 0;
}

.csx-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.csx-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  display: inline-flex;
  color: var(--csx-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.csx-search .csx-search__input.csx-search__input {
  padding-left: 38px;
}

.csx-search--lg .csx-search__input.csx-search__input {
  min-height: 48px;
  padding-left: 46px;
  font-size: var(--csx-fs-5);
}

.csx-search--lg .csx-search__icon {
  left: 16px;
}

.csx-search--lg .csx-btn.csx-btn {
  min-height: 48px;
  padding-inline: var(--csx-space-5);
  font-size: var(--csx-fs-5);
}

.csx-search__kbd {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 480px) {
  .csx-search--lg {
    flex-direction: column;
  }

  .csx-search__kbd {
    display: none;
  }
}

@media (pointer: coarse) {
  .csx-input.csx-input,
  .csx-select.csx-select {
    min-height: var(--csx-target);
  }

  .csx-check {
    min-height: var(--csx-target);
    align-items: center;
  }

  .csx-check__input.csx-check__input {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-input.csx-input,
  .csx-select.csx-select,
  .csx-textarea.csx-textarea,
  .csx-check__input.csx-check__input::before {
    transition: none;
  }
}

/* ---- tables ---- */
/* Tables: Tabler's table. A card frame, a tinted head row in small caps-style labels, hairline
   rows, right-aligned tabular numbers. Under 640px --stack turns each row into a labelled stack
   (every cell carries data-label). */

.csx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-table-wrap--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.csx-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--csx-body);
  font-size: var(--csx-fs-6);
  line-height: var(--csx-lh-ui);
  text-align: left;
}

.csx-table caption {
  padding: var(--csx-space-4) var(--csx-space-5);
  border-bottom: 1px solid var(--csx-line);
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  text-align: left;
}

.csx-table th,
.csx-table td {
  padding: var(--csx-space-3) var(--csx-space-5);
  border-bottom: 1px solid var(--csx-line);
  font-size: var(--csx-fs-6);
  text-align: left;
  vertical-align: middle;
}

.csx-table thead th,
.csx-table thead td {
  padding-block: 10px;
  background: var(--csx-subtle);
  color: var(--csx-muted);
  font-size: var(--csx-fs-8);
  font-weight: var(--csx-weight-semibold);
  letter-spacing: var(--csx-track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.csx-table tbody tr:last-child > * {
  border-bottom: 0;
}

.csx-table tbody th {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
}

.csx-table .csx-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.csx-table--compact th,
.csx-table--compact td {
  padding-block: var(--csx-space-2);
}

.csx-table--hover tbody tr:hover {
  background: var(--csx-subtle);
}

.csx-table tr.csx-table__group th {
  padding-block: var(--csx-space-2);
  background: var(--csx-canvas);
  color: var(--csx-ink);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-semibold);
}

.csx-yes,
.csx-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.csx-yes svg {
  color: var(--csx-ok-ink);
}

.csx-no {
  color: var(--csx-muted);
}

@media (max-width: 640px) {
  .csx-table-wrap:has(.csx-table--stack) {
    overflow: visible;
  }

  .csx-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .csx-table--stack,
  .csx-table--stack caption,
  .csx-table--stack tbody,
  .csx-table--stack tr {
    display: block;
  }

  .csx-table--stack tr {
    padding: var(--csx-space-2) 0;
    border-bottom: 1px solid var(--csx-line);
  }

  .csx-table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .csx-table--stack th,
  .csx-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--csx-space-4);
    padding: 6px var(--csx-space-4);
    border-bottom: 0;
    text-align: right;
  }

  .csx-table--stack tbody th {
    font-size: var(--csx-fs-5);
    text-align: left;
  }

  .csx-table--stack td[data-label]::before {
    content: attr(data-label);
    flex: none;
    color: var(--csx-muted);
    font-weight: var(--csx-weight-medium);
    text-align: left;
  }

  .csx-table--stack tr.csx-table__group {
    padding: 0;
  }
}

/* ---- cta ---- */
/* CTA: a card-shaped close. Icon tile, a heading and one line on the left, actions on the right.
   --center stacks it for the end of a page. No dark band, no gradient. */

.csx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-6);
  padding: var(--csx-space-7);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-cta__main {
  display: flex;
  align-items: flex-start;
  gap: var(--csx-space-4);
  max-width: 700px;
}

.csx-cta__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--csx-radius);
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

.csx-cta__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-2);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
  letter-spacing: var(--csx-track-heading);
}

.csx-cta__text {
  margin-top: 6px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

.csx-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--csx-space-2) var(--csx-space-5);
  margin: var(--csx-space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--csx-fs-6);
}

.csx-cta--soft {
  border-color: var(--csx-info-line);
  background: var(--csx-info-soft);
  box-shadow: none;
}

.csx-cta--soft .csx-cta__icon {
  background: var(--csx-surface);
}

.csx-cta--center {
  flex-direction: column;
  padding: var(--csx-space-9) var(--csx-space-7);
  text-align: center;
}

.csx-cta--center .csx-cta__main {
  flex-direction: column;
  align-items: center;
}

.csx-cta--center .csx-cta__links {
  justify-content: center;
}

@media (max-width: 640px) {
  .csx-cta {
    padding: var(--csx-space-6) var(--csx-space-5);
  }

  .csx-cta__main {
    flex-direction: column;
  }

  .csx-cta .csx-actions {
    width: 100%;
  }
}

/* ---- footer ---- */
/* Footer: a white band with a top hairline. Brand and one line about the product, three link
   columns titled with paragraphs (not headings), then a bottom bar with the status line. */

.csx-footer {
  padding: var(--csx-space-9) var(--csx-gutter) 0;
  border-top: 1px solid var(--csx-line);
  background: var(--csx-surface);
  font-size: var(--csx-fs-6);
}

.csx-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: var(--csx-space-7) var(--csx-space-9);
}

.csx-footer .csx-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  text-decoration: none;
}

.csx-footer .csx-footer__logo:hover {
  color: var(--csx-ink);
}

.csx-footer__about {
  max-width: 38ch;
  margin-top: var(--csx-space-3);
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: var(--csx-lh-body);
}

.csx-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--csx-space-6);
}

.csx-footer__title {
  margin-bottom: var(--csx-space-3);
  color: var(--csx-ink);
  font-size: var(--csx-fs-prose-sm);
  font-weight: var(--csx-weight-semibold);
}

.csx-footer__links {
  display: grid;
  gap: var(--csx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-footer .csx-footer__links a {
  color: var(--csx-muted);
  text-decoration: none;
}

.csx-footer .csx-footer__links a:hover {
  color: var(--csx-ink);
  text-decoration: underline;
}

.csx-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-2) var(--csx-space-5);
  margin-top: var(--csx-space-9);
  padding-block: var(--csx-space-4) var(--csx-space-6);
  border-top: 1px solid var(--csx-line);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--csx-space-2);
}

@media (max-width: 767px) {
  .csx-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .csx-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  .csx-footer .csx-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--csx-target);
  }

  .csx-footer__links {
    gap: 0;
  }
}

/* ---- admin-shell ---- */
/* Admin shell: a plugin settings page that sits inside WordPress's own <div class="wrap">.
   The shell paints its own canvas so it can be light or dark on its own; wp-admin's menu and
   toolbar keep the user's admin color scheme. Pin the theme with data-theme on .csx-admin.
   Selectors that compete with wp-admin's rule for an h1 inside the wrap div (0,1,1) use two
   classes (0,2,0). */

.csx-admin {
  margin-top: var(--csx-space-3);
  padding: var(--csx-space-6);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-canvas);
  color: var(--csx-body);
  font-size: var(--csx-fs-6);
  line-height: var(--csx-lh-ui);
}

/* Fill the whole content area instead of floating as a panel. The offsets undo the default
   padding of WordPress's content column and the margins of its wrap div (WordPress 6.x). */
.csx-admin--bleed {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
  margin: -10px -20px 0 -22px;
  padding: var(--csx-space-6) var(--csx-space-7) var(--csx-space-10);
  border-radius: 0;
}

/* Full: the shell is the whole screen (a preview outside WordPress, or a full-screen app page) */
.csx-admin--full {
  min-height: 100vh;
  margin: 0;
  padding: var(--csx-space-7) var(--csx-gutter) var(--csx-space-10);
  border-radius: 0;
}

@media (max-width: 782px) {
  .csx-admin {
    padding: var(--csx-space-4);
  }

  .csx-admin--bleed {
    margin: -10px -12px 0 -10px;
    padding: var(--csx-space-4) var(--csx-space-3) var(--csx-space-8);
  }
}

.csx-admin__inner {
  max-width: var(--csx-admin-max);
  margin-inline: auto;
}

/* Title row */
.csx-admin__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--csx-space-4);
  margin-bottom: var(--csx-space-5);
}

.csx-admin__heading {
  display: grid;
  gap: var(--csx-space-1);
  min-width: 0;
}

.csx-admin__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.csx-admin__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--csx-radius);
  background: var(--csx-btn);
  color: var(--csx-btn-ink);
}

.csx-admin .csx-admin__title {
  margin: 0;
  padding: 0;
  color: var(--csx-ink);
  font-size: var(--csx-fs-3);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.csx-admin .csx-admin__lede {
  max-width: 72ch;
  margin: 0;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

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

/* Section tabs under the title row (use .csx-tabs--links) */
.csx-admin__tabs {
  margin-bottom: var(--csx-space-5);
}

.csx-admin__notices {
  display: grid;
  gap: var(--csx-space-3);
  margin-bottom: var(--csx-space-5);
}

.csx-admin__notices:empty {
  display: none;
}

/* Body: a main column and an aside, or a plain stack */
.csx-admin__stack {
  display: grid;
  gap: var(--csx-space-4);
}

.csx-admin__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--csx-space-4);
  align-items: start;
}

.csx-admin__main,
.csx-admin__aside {
  display: grid;
  gap: var(--csx-space-4);
  min-width: 0;
}

@media (max-width: 1100px) {
  .csx-admin__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csx-admin .csx-admin__section-title {
  margin: var(--csx-space-3) 0 0;
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.5;
}

/* Save bar: the form's closing row. --sticky pins it to the bottom of the viewport while the
   form is on screen, for long settings pages. */
.csx-admin__savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  padding: var(--csx-space-3) var(--csx-space-5);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-admin__savebar--sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  box-shadow: var(--csx-shadow-bar);
}

.csx-admin__savebar-text {
  display: inline-flex;
  align-items: center;
  gap: var(--csx-space-2);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-admin__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--csx-space-2) var(--csx-space-4);
  margin-top: var(--csx-space-7);
  padding-top: var(--csx-space-4);
  border-top: 1px solid var(--csx-line);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

/* ---- tabs ---- */
/* Tabs: Tabler's nav-tabs. A hairline under the row, a 2px blue rule under the current tab.
   Three uses: in-page panels ([data-csx-tabs], role="tablist", needs tabs.js), section links
   (--links, aria-current="page", no script) and a segmented filter (--segmented). Selectors pair
   a parent and child class (0,2,0) so wp-admin's a:hover and a:focus never recolor a tab. */

.csx-tabs__list {
  display: flex;
  gap: var(--csx-space-1);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--csx-line);
  list-style: none;
  scrollbar-width: thin;
}

.csx-tabs__list > li {
  display: flex;
}

.csx-tabs .csx-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0 0 -1px;
  padding: 0 var(--csx-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--csx-muted);
  font-family: inherit;
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.csx-tabs .csx-tab:hover,
.csx-tabs .csx-tab:focus {
  color: var(--csx-ink);
}

.csx-tabs .csx-tab:focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: -2px;
}

.csx-tabs .csx-tab[aria-selected="true"],
.csx-tabs .csx-tab[aria-current="page"] {
  border-bottom-color: var(--csx-accent);
  color: var(--csx-ink);
}

.csx-tabs .csx-tab svg {
  flex: none;
}

.csx-tabs .csx-tab .csx-count {
  margin-left: 2px;
}

.csx-tabs__panel {
  padding-top: var(--csx-space-5);
}

/* Each panel carries a label that only shows without JS, when every panel is visible */
.csx-tabs__label {
  margin-bottom: var(--csx-space-3);
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-semibold);
}

.csx-tabs.is-ready .csx-tabs__label {
  display: none;
}

.csx-tabs:not(.is-ready) .csx-tabs__list[role="tablist"] {
  display: none;
}

/* Inside a card: the list becomes the card's header row */
.csx-card > .csx-tabs > .csx-tabs__list {
  padding-inline: var(--csx-space-3);
}

.csx-card > .csx-tabs > .csx-tabs__panel {
  padding: var(--csx-space-5);
}

/* Segmented: a boxed row of filters; the current one sits on a raised tint */
.csx-tabs--segmented .csx-tabs__list {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
}

.csx-tabs--segmented .csx-tab {
  min-height: 30px;
  margin: 0;
  padding: 0 var(--csx-space-3);
  border-bottom: 0;
  border-radius: var(--csx-radius-sm);
  font-size: var(--csx-fs-7);
}

.csx-tabs--segmented .csx-tab[aria-selected="true"],
.csx-tabs--segmented .csx-tab[aria-current="page"] {
  background: var(--csx-subtle);
  box-shadow: inset 0 0 0 1px var(--csx-line-strong);
  color: var(--csx-ink);
}

@media (pointer: coarse) {
  .csx-tabs .csx-tab,
  .csx-tabs--segmented .csx-tab {
    min-height: var(--csx-target);
  }
}

/* ---- form-rows ---- */
/* Form rows: the settings-table pattern rebuilt. Each row puts a label and its help text in a
   left column and the control in a right column; under 782px (wp-admin's own breakpoint) the
   two stack. Rows split by hairlines; meant for a card body with --flush. */

.csx-form-rows {
  margin: 0;
  padding: 0;
}

.csx-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: var(--csx-space-2) var(--csx-space-7);
  padding: var(--csx-space-5);
}

.csx-form-row + .csx-form-row {
  border-top: 1px solid var(--csx-line);
}

.csx-form-row__head {
  display: grid;
  align-content: start;
  gap: var(--csx-space-1);
  padding-top: 7px;
}

.csx-form-row__label {
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  line-height: var(--csx-lh-ui);
}

.csx-form-row__help {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

.csx-form-row__control {
  display: grid;
  align-content: start;
  gap: var(--csx-space-2);
  min-width: 0;
  max-width: 560px;
}

.csx-form-row__control--wide {
  max-width: none;
}

/* A row whose control is a switch or a check: the head lines up with the switch, not a field */
.csx-form-row--inline .csx-form-row__head {
  padding-top: 0;
}

/* Group inside a row: a few checks or switches stacked */
.csx-form-row__group {
  display: grid;
  gap: var(--csx-space-3);
}

@media (max-width: 782px) {
  .csx-form-row {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--csx-space-4);
  }

  .csx-form-row__head {
    padding-top: 0;
  }

  .csx-form-row__control {
    max-width: none;
  }
}

/* ---- switch ---- */
/* Switch: Tabler's form-switch on a real checkbox with role="switch". The label wraps the input
   and its text, so the whole row toggles it. The doubled class (0,2,0) outranks wp-admin's
   input[type=checkbox] (0,1,1); state rules reach 0,3,0. */

.csx-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--csx-space-3);
  color: var(--csx-body);
  font-size: var(--csx-fs-6);
  line-height: var(--csx-lh-ui);
  cursor: pointer;
}

.csx-switch__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.csx-switch__label {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
}

.csx-switch__desc {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

/* --end: text first, switch at the far right (list rows, integration toggles) */
.csx-switch--end {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.csx-switch__input.csx-switch__input {
  position: relative;
  display: inline-block;
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--csx-line-control);
  border-radius: var(--csx-radius-pill);
  background: var(--csx-subtle);
  box-shadow: none;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--csx-dur) var(--csx-ease), border-color var(--csx-dur) var(--csx-ease);
}

.csx-switch__input.csx-switch__input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  float: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: var(--csx-line-control);
  transition: transform var(--csx-dur) var(--csx-ease), background-color var(--csx-dur) var(--csx-ease);
}

.csx-switch__input.csx-switch__input:checked,
.csx-switch__input.csx-switch__input.is-on {
  border-color: var(--csx-accent);
  background: var(--csx-accent);
}

/* .is-on draws an "on" switch from a span inside an aria-hidden mock (bento wells, windows) */
.csx-switch__input.csx-switch__input:checked::before,
.csx-switch__input.csx-switch__input.is-on::before {
  content: "";
  width: 14px;
  height: 14px;
  margin: 0;
  background: var(--csx-on-accent);
  transform: translateX(16px);
}

.csx-switch__input.csx-switch__input:focus {
  border-color: var(--csx-line-control);
  box-shadow: none;
}

.csx-switch__input.csx-switch__input:checked:focus {
  border-color: var(--csx-accent);
}

.csx-switch__input.csx-switch__input:focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-switch__input.csx-switch__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.csx-switch:has(.csx-switch__input:disabled) {
  cursor: not-allowed;
}

@media (pointer: coarse) {
  .csx-switch {
    align-items: center;
    min-height: var(--csx-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-switch__input.csx-switch__input,
  .csx-switch__input.csx-switch__input::before {
    transition: none;
  }
}

/* ---- choice-cards ---- */
/* Choice cards: a radio group laid out as bordered cards. The label wraps a real radio
   (.csx-check__input from forms) so the radio still shows the choice where :has() is missing. */

.csx-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--csx-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.csx-choices--stack {
  grid-template-columns: minmax(0, 1fr);
}

.csx-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--csx-space-3);
  min-width: 0;
  padding: var(--csx-space-3) 14px;
  border: 1px solid var(--csx-line-strong);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  color: var(--csx-body);
  font-size: var(--csx-fs-6);
  line-height: var(--csx-lh-ui);
  cursor: pointer;
  transition: border-color var(--csx-dur-fast) var(--csx-ease), background-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-choice:hover {
  border-color: var(--csx-line-control);
}

.csx-choice__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.csx-choice__title {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
}

.csx-choice__desc {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

.csx-choice__icon {
  display: inline-flex;
  flex: none;
  margin-left: auto;
  color: var(--csx-muted);
}

.csx-choice:has(.csx-check__input:checked) {
  border-color: var(--csx-accent);
  background: var(--csx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--csx-accent);
}

.csx-choice:has(.csx-check__input:checked) .csx-choice__icon {
  color: var(--csx-link);
}

.csx-choice:has(.csx-check__input:focus-visible) {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-choice:has(.csx-check__input:focus-visible) .csx-check__input.csx-check__input {
  outline: 0;
}

.csx-choice:has(.csx-check__input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .csx-choice {
    transition: none;
  }
}

/* ---- copy-field ---- */
/* Copy field: a read-only value joined to its buttons (Show, Copy). For API keys, webhook URLs,
   shortcodes and license keys. copy-field.js also powers the copy button on docs code blocks. */

.csx-copy {
  display: flex;
  min-width: 0;
}

.csx-copy__input.csx-copy__input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--csx-subtle);
  font-family: var(--csx-font-mono);
  font-size: var(--csx-fs-7);
  text-overflow: ellipsis;
}

.csx-copy .csx-copy__btn.csx-copy__btn {
  flex: none;
  margin-left: -1px;
  border-radius: 0;
  box-shadow: none;
}

.csx-copy .csx-copy__btn.csx-copy__btn:last-of-type {
  border-top-right-radius: var(--csx-radius);
  border-bottom-right-radius: var(--csx-radius);
}

.csx-copy .csx-copy__btn.csx-copy__btn:focus-visible {
  position: relative;
  z-index: 1;
}

.csx-copy .csx-copy__btn.is-copied {
  color: var(--csx-ok-ink);
}

/* The two labels swap while "Copied" shows; widths stay steady */
.csx-copy__done {
  display: none;
}

.is-copied > .csx-copy__idle {
  display: none;
}

.is-copied > .csx-copy__done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.csx-copy__idle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 420px) {
  .csx-copy {
    flex-wrap: wrap;
    row-gap: var(--csx-space-2);
  }

  .csx-copy__input.csx-copy__input {
    flex-basis: 100%;
    border-radius: var(--csx-radius);
  }

  .csx-copy .csx-copy__btn.csx-copy__btn {
    flex: 1;
    margin-left: 0;
    border-radius: var(--csx-radius);
  }

  .csx-copy .csx-copy__btn.csx-copy__btn + .csx-copy__btn {
    margin-left: var(--csx-space-2);
  }
}

/* ---- notices ---- */
/* Notices: Tabler's alerts. A soft tint, a matching border, an icon in the status ink, a title
   and a sentence, optional actions and a dismiss button. Class names never match wp-admin's
   .notice selectors, so WordPress leaves them where you put them. */

.csx-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--csx-space-3);
  padding: var(--csx-space-3) var(--csx-space-4);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  color: var(--csx-body);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

.csx-notice__icon {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
  color: var(--csx-muted);
}

.csx-notice__body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.csx-notice__title {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-semibold);
}

.csx-notice__text {
  color: var(--csx-body);
  font-size: var(--csx-fs-prose-sm);
}

.csx-notice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2) var(--csx-space-3);
  margin-top: var(--csx-space-2);
}

.csx-notice .csx-notice__link {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.csx-notice .csx-notice__link:hover {
  color: var(--csx-ink);
  text-decoration-thickness: 2px;
}

.csx-notice__dismiss.csx-btn.csx-btn {
  flex: none;
  margin: -6px -8px -6px 0;
  color: var(--csx-body);
}

.csx-notice__dismiss.csx-btn.csx-btn:hover {
  background: transparent;
  color: var(--csx-ink);
}

.csx-notice--info {
  border-color: var(--csx-info-line);
  background: var(--csx-info-soft);
}

.csx-notice--info .csx-notice__icon {
  color: var(--csx-info-ink);
}

.csx-notice--success {
  border-color: var(--csx-ok-line);
  background: var(--csx-ok-soft);
}

.csx-notice--success .csx-notice__icon {
  color: var(--csx-ok-ink);
}

.csx-notice--warning {
  border-color: var(--csx-warn-line);
  background: var(--csx-warn-soft);
}

.csx-notice--warning .csx-notice__icon {
  color: var(--csx-warn-ink);
}

.csx-notice--error {
  border-color: var(--csx-danger-line);
  background: var(--csx-danger-soft);
}

.csx-notice--error .csx-notice__icon {
  color: var(--csx-danger-ink);
}

/* Banner: full width inside a card's top edge, no corners */
.csx-notice--flush {
  border-width: 0 0 1px;
  border-radius: 0;
}

/* ---- list-table ---- */
/* List table: the wp-admin list screen rebuilt in Tabler's grammar. Status views with counts,
   a bulk-action toolbar, a check column, a primary column with row actions, status badges,
   a pagination footer. Under 640px rows become labelled stacks. Needs tables, forms, badges. */

.csx-list-table {
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-list-table__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  padding: var(--csx-space-3) var(--csx-space-4) 0;
  border-bottom: 1px solid var(--csx-line);
}

.csx-list-table__views {
  display: flex;
  gap: var(--csx-space-1);
  margin: 0 0 -1px;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.csx-list-table .csx-list-table__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--csx-space-2);
  border-bottom: 2px solid transparent;
  color: var(--csx-muted);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.csx-list-table .csx-list-table__view:hover,
.csx-list-table .csx-list-table__view:focus {
  color: var(--csx-ink);
}

.csx-list-table .csx-list-table__view[aria-current="page"] {
  border-bottom-color: var(--csx-accent);
  color: var(--csx-ink);
}

.csx-list-table__view:focus-visible {
  outline-offset: -2px;
}

.csx-list-table__search {
  flex: 0 1 280px;
  min-width: 200px;
  padding-bottom: var(--csx-space-3);
}

.csx-list-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2);
  padding: 10px var(--csx-space-4);
  border-bottom: 1px solid var(--csx-line);
  background: var(--csx-surface);
}

.csx-list-table__toolbar .csx-select.csx-select {
  width: auto;
  min-width: 170px;
}

.csx-list-table__selected {
  margin-left: auto;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-variant-numeric: tabular-nums;
}

.csx-list-table.has-selection .csx-list-table__selected {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
}

.csx-list-table__table th.csx-list-table__check,
.csx-list-table__table td.csx-list-table__check {
  width: 44px;
  padding-right: 0;
}

.csx-list-table__table tbody tr {
  transition: background-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-list-table__table tbody tr:hover {
  background: var(--csx-subtle);
}

.csx-list-table__table tbody tr:has(.csx-check__input:checked) {
  background: var(--csx-accent-soft);
}

.csx-list-table__primary {
  min-width: 220px;
}

.csx-list-table .csx-list-table__title {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
}

.csx-list-table .csx-list-table__title:hover,
.csx-list-table .csx-list-table__title:focus {
  color: var(--csx-link);
  text-decoration: underline;
}

.csx-list-table__meta {
  display: block;
  margin-top: 2px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

/* Row actions: shown on row hover or keyboard focus, always on touch screens */
.csx-list-table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--csx-space-3);
  margin-top: 4px;
  font-size: var(--csx-fs-7);
  opacity: 0;
  transition: opacity var(--csx-dur-fast) var(--csx-ease);
}

.csx-list-table__table tr:hover .csx-list-table__actions,
.csx-list-table__table tr:focus-within .csx-list-table__actions {
  opacity: 1;
}

.csx-list-table .csx-list-table__action {
  padding: 0;
  border: 0;
  background: none;
  color: var(--csx-link);
  font-size: inherit;
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.csx-list-table .csx-list-table__action:hover,
.csx-list-table .csx-list-table__action:focus {
  color: var(--csx-link);
  text-decoration: underline;
}

.csx-list-table .csx-list-table__action--danger,
.csx-list-table .csx-list-table__action--danger:hover,
.csx-list-table .csx-list-table__action--danger:focus {
  color: var(--csx-danger-ink);
}

.csx-list-table__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  padding: 10px var(--csx-space-4);
  border-top: 1px solid var(--csx-line);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

/* Pagination */
.csx-pagination {
  display: flex;
  align-items: center;
  gap: var(--csx-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-pagination .csx-pagination__link {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--csx-radius);
  color: var(--csx-body);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.csx-pagination .csx-pagination__link:hover,
.csx-pagination .csx-pagination__link:focus {
  border-color: var(--csx-line-strong);
  color: var(--csx-ink);
}

.csx-pagination .csx-pagination__link[aria-current="page"] {
  border-color: var(--csx-btn);
  background: var(--csx-btn);
  color: var(--csx-btn-ink);
}

.csx-pagination .csx-pagination__link[aria-disabled="true"] {
  color: var(--csx-muted);
  pointer-events: none;
}

@media (pointer: coarse) {
  .csx-list-table__actions {
    opacity: 1;
  }

  .csx-pagination .csx-pagination__link {
    min-width: var(--csx-target);
    height: var(--csx-target);
  }
}

@media (max-width: 640px) {
  .csx-list-table__search {
    flex-basis: 100%;
  }

  .csx-list-table__toolbar .csx-select.csx-select {
    flex: 1;
    min-width: 0;
  }

  .csx-list-table__selected {
    flex-basis: 100%;
    margin-left: 0;
  }

  .csx-list-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .csx-list-table__table,
  .csx-list-table__table tbody {
    display: block;
  }

  .csx-list-table__table tbody tr {
    position: relative;
    display: grid;
    gap: 6px;
    padding: var(--csx-space-3) var(--csx-space-4) var(--csx-space-3) 52px;
    border-bottom: 1px solid var(--csx-line);
  }

  .csx-list-table__table tbody tr:last-child {
    border-bottom: 0;
  }

  .csx-list-table__table td {
    display: flex;
    justify-content: space-between;
    gap: var(--csx-space-4);
    padding: 0;
    border: 0;
    text-align: right;
  }

  .csx-list-table__table td.csx-list-table__primary {
    display: block;
    text-align: left;
  }

  .csx-list-table__table td.csx-list-table__check {
    position: absolute;
    top: var(--csx-space-3);
    left: var(--csx-space-4);
    width: auto;
    padding: 0;
  }

  .csx-list-table__table td[data-label]:not(.csx-list-table__primary)::before {
    content: attr(data-label);
    flex: none;
    color: var(--csx-muted);
    font-weight: var(--csx-weight-medium);
    text-align: left;
  }

  .csx-list-table__actions {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-list-table__actions,
  .csx-list-table__table tbody tr {
    transition: none;
  }
}

/* ---- list-rows ---- */
/* List rows: Tabler's list group. A media slot (avatar or icon tile), a title and one meta line,
   and an end slot for badges, a time, a switch or a chevron. Lives in a flush card body, or
   boxed on its own. --links makes every row one link. */

.csx-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-list__item {
  display: flex;
  align-items: center;
  gap: var(--csx-space-3);
  min-width: 0;
  padding: var(--csx-space-3) var(--csx-space-5);
}

.csx-list__item + .csx-list__item {
  border-top: 1px solid var(--csx-line);
}

.csx-list--boxed {
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
}

.csx-list--boxed .csx-list__item {
  padding: 10px 14px;
}

.csx-list--compact .csx-list__item {
  padding-block: var(--csx-space-2);
}

.csx-list__media {
  display: inline-flex;
  flex: none;
}

.csx-list__main {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.csx-list__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  line-height: var(--csx-lh-ui);
  overflow-wrap: anywhere;
}

.csx-list__meta {
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  line-height: 1.45;
}

.csx-list__end {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--csx-space-2);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-list__chevron {
  display: inline-flex;
  flex: none;
  color: var(--csx-muted);
}

/* Every row is a link */
.csx-list--links .csx-list__item {
  padding: 0;
}

.csx-list .csx-list__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--csx-space-3);
  min-width: 0;
  padding: var(--csx-space-3) var(--csx-space-5);
  color: var(--csx-body);
  text-decoration: none;
  transition: background-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-list--boxed .csx-list__link {
  padding: 10px 14px;
}

.csx-list .csx-list__link:hover,
.csx-list .csx-list__link:focus {
  background: var(--csx-subtle);
  color: var(--csx-body);
}

.csx-list .csx-list__link:hover .csx-list__title {
  color: var(--csx-link);
}

.csx-list .csx-list__link:focus-visible {
  outline-offset: -2px;
}

/* Avatar: initials in a circle, or an icon in a square tile */
.csx-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--csx-accent-soft);
  color: var(--csx-link);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-semibold);
}

.csx-avatar--square {
  border-radius: var(--csx-radius);
}

.csx-avatar--muted {
  background: var(--csx-subtle);
  color: var(--csx-muted);
}

.csx-avatar--ok {
  background: var(--csx-ok-soft);
  color: var(--csx-ok-ink);
}

.csx-avatar--warn {
  background: var(--csx-warn-soft);
  color: var(--csx-warn-ink);
}

.csx-avatar--sm {
  width: 28px;
  height: 28px;
}

@media (max-width: 520px) {
  .csx-list__item,
  .csx-list .csx-list__link {
    flex-wrap: wrap;
  }

  .csx-list__end {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-list .csx-list__link {
    transition: none;
  }
}

/* ---- empty-state ---- */
/* Empty state: Tabler's empty. An icon in a soft circle, a title that says what is missing,
   one sentence on what happens next, and at most two actions. */

.csx-empty {
  display: grid;
  justify-items: center;
  gap: var(--csx-space-2);
  padding: var(--csx-space-8) var(--csx-space-6);
  text-align: center;
}

.csx-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--csx-space-2);
  border-radius: 50%;
  background: var(--csx-subtle);
  color: var(--csx-muted);
}

.csx-empty__icon--accent {
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

.csx-empty__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
}

.csx-empty__text {
  max-width: 46ch;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: var(--csx-lh-body);
}

.csx-empty__actions {
  margin-top: var(--csx-space-3);
}

.csx-empty--dashed {
  border: 1px dashed var(--csx-line-strong);
  border-radius: var(--csx-radius-lg);
}

.csx-empty--compact {
  padding: var(--csx-space-6) var(--csx-space-4);
}

.csx-empty--compact .csx-empty__icon {
  width: 44px;
  height: 44px;
}

.csx-empty--compact .csx-empty__title {
  font-size: var(--csx-fs-5);
}

/* ---- stat-cards ---- */
/* Stat cards: Tabler's dashboard tiles. A label, one big tabular number, a delta in words and
   color, and a meter or a sparkline. Numbers come from the product; never invent them for a
   marketing page. */

.csx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--csx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-stat {
  display: grid;
  align-content: start;
  gap: var(--csx-space-1);
  min-width: 0;
  padding: var(--csx-space-4) var(--csx-space-5);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-2);
}

.csx-stat__label {
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-medium);
}

.csx-stat__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--csx-space-2);
}

.csx-stat__value {
  color: var(--csx-ink);
  font-size: 1.75rem;
  font-weight: var(--csx-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.csx-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-medium);
  font-variant-numeric: tabular-nums;
}

.csx-stat__delta--up {
  color: var(--csx-ok-ink);
}

.csx-stat__delta--down {
  color: var(--csx-danger-ink);
}

.csx-stat__foot {
  display: grid;
  gap: 6px;
  margin-top: var(--csx-space-2);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-stat__spark {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: var(--csx-space-2);
  color: var(--csx-accent);
}

/* ---- portal ---- */
/* Portal: the support home. Topic cards (icon, title, one line, article count), a ticket list
   with status and priority badges, and a contact card that states reply times. The search
   field is .csx-search--lg inside the centered hero. */

/* Topic cards */
.csx-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--csx-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-topics > li {
  display: flex;
  min-width: 0;
}

.csx-topic {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--csx-space-1) var(--csx-space-4);
  padding: var(--csx-space-5);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
  transition: border-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-topic:hover {
  border-color: var(--csx-line-strong);
}

.csx-topic:focus-within {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-topic__icon {
  display: inline-grid;
  grid-row: span 3;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--csx-radius);
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

.csx-topic__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.4;
}

.csx-topic .csx-topic__link {
  color: var(--csx-ink);
  text-decoration: none;
}

.csx-topic .csx-topic__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.csx-topic .csx-topic__link:focus-visible {
  outline: 0;
}

.csx-topic:hover .csx-topic__link {
  color: var(--csx-link);
}

.csx-topic__text {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.55;
}

.csx-topic__count {
  margin-top: var(--csx-space-1);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-variant-numeric: tabular-nums;
}

/* Ticket list */
.csx-tickets {
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-tickets__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  padding: var(--csx-space-3) var(--csx-space-5);
  border-bottom: 1px solid var(--csx-line);
}

.csx-tickets__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
}

.csx-tickets__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-tickets__list > li + li {
  border-top: 1px solid var(--csx-line);
}

.csx-tickets .csx-ticket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--csx-space-2) var(--csx-space-4);
  padding: 14px var(--csx-space-5);
  color: var(--csx-body);
  text-decoration: none;
  transition: background-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-tickets .csx-ticket:hover,
.csx-tickets .csx-ticket:focus {
  background: var(--csx-subtle);
  color: var(--csx-body);
}

.csx-tickets .csx-ticket:focus-visible {
  outline-offset: -2px;
}

.csx-ticket__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.csx-ticket__subject {
  overflow: hidden;
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csx-tickets .csx-ticket:hover .csx-ticket__subject {
  color: var(--csx-link);
}

.csx-ticket__meta {
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-variant-numeric: tabular-nums;
}

.csx-ticket__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--csx-space-1);
}

.csx-ticket__chevron {
  display: inline-flex;
  color: var(--csx-muted);
}

.csx-tickets__foot {
  padding: var(--csx-space-3) var(--csx-space-5);
  border-top: 1px solid var(--csx-line);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

@media (max-width: 640px) {
  .csx-tickets .csx-ticket {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--csx-space-4);
  }

  .csx-ticket__subject {
    white-space: normal;
  }

  .csx-ticket__badges {
    grid-column: 2;
    justify-content: flex-start;
  }

  .csx-ticket__chevron {
    display: none;
  }
}

/* Contact card */
.csx-contact {
  display: grid;
  align-content: start;
  gap: var(--csx-space-4);
  padding: var(--csx-space-6);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-contact__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
}

.csx-contact__text {
  margin-top: var(--csx-space-1);
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.55;
}

.csx-contact__facts {
  display: grid;
  gap: var(--csx-space-3);
  margin: 0;
  padding: var(--csx-space-4) 0;
  border-block: 1px solid var(--csx-line);
}

.csx-contact__fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--csx-space-3);
  align-items: start;
}

.csx-contact__fact svg {
  grid-row: span 2;
  margin-top: 2px;
  color: var(--csx-muted);
}

.csx-contact__fact dt {
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-contact__fact dd {
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-medium);
}

@media (prefers-reduced-motion: reduce) {
  .csx-topic,
  .csx-tickets .csx-ticket {
    transition: none;
  }
}

/* ---- docs ---- */
/* Docs: a three-column reading layout (section nav, article, on-page contents), article prose,
   callouts, numbered steps, a code block with a copy button, previous and next links, a
   "was this helpful" vote and the bordered article lists used on a docs home. */

.csx-docs {
  display: grid;
  grid-template-columns: var(--csx-docs-nav) minmax(0, 1fr);
  gap: var(--csx-space-9);
  width: 100%;
  max-width: calc(var(--csx-wide) + 2 * var(--csx-gutter));
  margin-inline: auto;
  padding: var(--csx-space-7) var(--csx-gutter) var(--csx-space-10);
}

.csx-docs--toc {
  grid-template-columns: var(--csx-docs-nav) minmax(0, 1fr) var(--csx-docs-toc);
}

.csx-docs__nav,
.csx-docs__toc {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--csx-nav-h) + var(--csx-space-6));
  align-self: start;
  max-height: calc(100vh - var(--csx-nav-h) - var(--csx-space-9));
  overflow-y: auto;
  scrollbar-width: thin;
}

.csx-docs__main {
  min-width: 0;
  max-width: var(--csx-narrow);
}

.csx-docs__toggle.csx-docs__toggle {
  display: none;
}

@media (max-width: 1199px) {
  .csx-docs--toc {
    grid-template-columns: var(--csx-docs-nav) minmax(0, 1fr);
  }

  .csx-docs__toc {
    display: none;
  }
}

@media (max-width: 899px) {
  .csx-docs,
  .csx-docs--toc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--csx-space-4);
    padding-top: var(--csx-space-4);
  }

  .csx-docs__nav {
    position: static;
    max-height: none;
    padding: var(--csx-space-4);
    border: 1px solid var(--csx-line);
    border-radius: var(--csx-radius-lg);
    background: var(--csx-surface);
  }

  .csx-docs.has-toggle .csx-docs__toggle.csx-docs__toggle {
    display: inline-flex;
    justify-self: start;
  }

  .csx-docs.has-toggle .csx-docs__nav:not(.is-open) {
    display: none;
  }

  .csx-docs__main {
    max-width: none;
  }
}

/* Section navigation */
.csx-docnav {
  font-size: var(--csx-fs-6);
  line-height: 1.45;
}

.csx-docnav__search {
  margin-bottom: var(--csx-space-5);
}

.csx-docnav__group + .csx-docnav__group {
  margin-top: var(--csx-space-5);
}

.csx-docnav__heading {
  margin-bottom: 6px;
  padding: 0 10px;
  color: var(--csx-ink);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-semibold);
}

.csx-docnav__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-docnav .csx-docnav__link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--csx-radius-sm);
  color: var(--csx-body);
  text-decoration: none;
}

.csx-docnav .csx-docnav__link:hover,
.csx-docnav .csx-docnav__link:focus {
  background: var(--csx-subtle);
  color: var(--csx-ink);
}

.csx-docnav .csx-docnav__link[aria-current="page"] {
  background: var(--csx-accent-soft);
  color: var(--csx-link);
  font-weight: var(--csx-weight-semibold);
}

.csx-docnav__link:focus-visible {
  outline-offset: -2px;
}

/* On this page */
.csx-toc__title {
  margin-bottom: var(--csx-space-2);
  color: var(--csx-ink);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-semibold);
}

.csx-toc__list {
  display: grid;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--csx-line);
  list-style: none;
}

.csx-toc .csx-toc__link {
  display: block;
  margin-left: -1px;
  padding: 5px var(--csx-space-3);
  border-left: 2px solid transparent;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  line-height: 1.45;
  text-decoration: none;
}

.csx-toc .csx-toc__link:hover,
.csx-toc .csx-toc__link:focus {
  color: var(--csx-ink);
}

.csx-toc .csx-toc__link[aria-current="true"] {
  border-left-color: var(--csx-accent);
  color: var(--csx-link);
}

.csx-toc__item--sub .csx-toc__link {
  padding-left: var(--csx-space-6);
}

/* Breadcrumbs */
.csx-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--csx-space-4);
  padding: 0;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  list-style: none;
}

.csx-breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--csx-line-control);
}

.csx-breadcrumbs .csx-breadcrumbs__link {
  color: var(--csx-muted);
  text-decoration: none;
}

.csx-breadcrumbs .csx-breadcrumbs__link:hover,
.csx-breadcrumbs .csx-breadcrumbs__link:focus {
  color: var(--csx-ink);
  text-decoration: underline;
}

/* Article head */
.csx-docs__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-1);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-tight);
  letter-spacing: var(--csx-track-display);
}

.csx-docs__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2) var(--csx-space-3);
  margin: var(--csx-space-3) 0 var(--csx-space-7);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

/* Prose: long-form text inside an article */
.csx-prose {
  color: var(--csx-body);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-prose);
  overflow-wrap: break-word;
}

.csx-prose > * + * {
  margin-top: 1.1em;
}

.csx-prose h2 {
  margin-top: 2.2em;
  color: var(--csx-ink);
  font-size: var(--csx-fs-2);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
  letter-spacing: var(--csx-track-heading);
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--csx-nav-h) + var(--csx-space-6));
}

.csx-prose h3 {
  margin-top: 1.8em;
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
  line-height: var(--csx-lh-heading);
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--csx-nav-h) + var(--csx-space-6));
}

.csx-prose h2 + *,
.csx-prose h3 + * {
  margin-top: 0.6em;
}

.csx-prose > :first-child {
  margin-top: 0;
}

.csx-prose .csx-prose__lede {
  color: var(--csx-muted);
  font-size: var(--csx-fs-lede);
  line-height: var(--csx-lh-body);
}

.csx-prose ul:not([class]),
.csx-prose ol:not([class]) {
  padding-left: 1.4em;
}

.csx-prose ul:not([class]) {
  list-style: disc;
}

.csx-prose ol:not([class]) {
  list-style: decimal;
}

.csx-prose li + li {
  margin-top: 0.4em;
}

.csx-prose li::marker {
  color: var(--csx-muted);
}

.csx-prose a:not([class]) {
  color: var(--csx-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.csx-prose a:not([class]):hover {
  color: var(--csx-link-hover);
}

.csx-prose blockquote {
  padding-left: var(--csx-space-4);
  border-left: 3px solid var(--csx-line-strong);
  color: var(--csx-muted);
}

.csx-prose hr {
  height: 0;
  margin-block: 2em;
  border: 0;
  border-top: 1px solid var(--csx-line);
}

.csx-prose figure img {
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
}

.csx-prose figcaption {
  margin-top: var(--csx-space-2);
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
}

.csx-prose .csx-table-wrap {
  font-size: var(--csx-fs-6);
}

/* Callouts */
.csx-callout {
  display: flex;
  gap: var(--csx-space-3);
  padding: 14px var(--csx-space-4);
  border: 1px solid var(--csx-line);
  border-left-width: 4px;
  border-radius: var(--csx-radius);
  background: var(--csx-subtle);
  color: var(--csx-body);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

.csx-callout__icon {
  display: inline-flex;
  flex: none;
  margin-top: 3px;
  color: var(--csx-muted);
}

.csx-callout__body > * + * {
  margin-top: 4px;
}

.csx-callout__title {
  color: var(--csx-ink);
  font-weight: var(--csx-weight-semibold);
}

.csx-callout--note {
  border-color: var(--csx-info-line);
  border-left-color: var(--csx-accent);
  background: var(--csx-info-soft);
}

.csx-callout--note .csx-callout__icon {
  color: var(--csx-info-ink);
}

.csx-callout--tip {
  border-color: var(--csx-ok-line);
  border-left-color: var(--csx-ok);
  background: var(--csx-ok-soft);
}

.csx-callout--tip .csx-callout__icon {
  color: var(--csx-ok-ink);
}

.csx-callout--warning {
  border-color: var(--csx-warn-line);
  border-left-color: var(--csx-warn);
  background: var(--csx-warn-soft);
}

.csx-callout--warning .csx-callout__icon {
  color: var(--csx-warn-ink);
}

.csx-callout--danger {
  border-color: var(--csx-danger-line);
  border-left-color: var(--csx-danger);
  background: var(--csx-danger-soft);
}

.csx-callout--danger .csx-callout__icon {
  color: var(--csx-danger-ink);
}

/* Steps: numbered circles joined by a hairline */
.csx-steps {
  padding: 0;
  list-style: none;
  counter-reset: csx-step;
}

.csx-steps > li {
  position: relative;
  padding: 0 0 var(--csx-space-5) 44px;
  counter-increment: csx-step;
}

.csx-steps > li + li {
  margin-top: 0;
}

.csx-steps > li::before {
  content: counter(csx-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--csx-accent-soft);
  color: var(--csx-link);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-semibold);
  line-height: 28px;
  text-align: center;
}

.csx-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 6px;
  left: 13.5px;
  width: 1px;
  background: var(--csx-line);
}

.csx-steps > li:last-child {
  padding-bottom: 0;
}

.csx-steps__title {
  display: block;
  color: var(--csx-ink);
  font-weight: var(--csx-weight-semibold);
}

/* Code block */
.csx-code {
  overflow: hidden;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-code-bg);
}

.csx-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3);
  min-height: 40px;
  padding: 4px 6px 4px var(--csx-space-4);
  border-bottom: 1px solid var(--csx-line);
  background: var(--csx-surface);
}

.csx-code__file {
  overflow: hidden;
  color: var(--csx-muted);
  font-family: var(--csx-font-mono);
  font-size: var(--csx-fs-8);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csx-code pre {
  margin: 0;
  padding: var(--csx-space-4);
  overflow-x: auto;
  color: var(--csx-code-ink);
  font-family: var(--csx-font-mono);
  font-size: var(--csx-fs-7);
  line-height: 1.65;
  tab-size: 4;
  white-space: pre;
}

.csx-code pre:focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: -2px;
}

.csx-code code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.csx-code__k {
  color: var(--csx-code-keyword);
}

.csx-code__s {
  color: var(--csx-code-string);
}

.csx-code__c {
  color: var(--csx-code-comment);
  font-style: italic;
}

.csx-code__n {
  color: var(--csx-code-name);
}

/* Previous and next */
.csx-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--csx-space-4);
  margin-top: var(--csx-space-9);
}

.csx-pager .csx-pager__link {
  display: grid;
  gap: 2px;
  padding: 14px var(--csx-space-4);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  color: var(--csx-ink);
  font-weight: var(--csx-weight-semibold);
  text-decoration: none;
  transition: border-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-pager .csx-pager__link:hover,
.csx-pager .csx-pager__link:focus {
  border-color: var(--csx-accent);
  color: var(--csx-link);
}

.csx-pager__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-regular);
}

.csx-pager__link--next {
  grid-column: 2;
  justify-items: end;
  text-align: right;
}

@media (max-width: 640px) {
  .csx-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .csx-pager__link--next {
    grid-column: 1;
  }
}

/* Was this helpful */
.csx-helpful {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-3);
  margin-top: var(--csx-space-8);
  padding-top: var(--csx-space-6);
  border-top: 1px solid var(--csx-line);
}

.csx-helpful__question {
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
}

.csx-helpful__status {
  flex-basis: 100%;
  min-height: 1.5em;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
}

/* Article list for a docs home or a section page */
.csx-doclist {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  list-style: none;
}

.csx-doclist > li + li {
  border-top: 1px solid var(--csx-line);
}

.csx-doclist .csx-doclist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-4);
  padding: var(--csx-space-3) var(--csx-space-4);
  color: var(--csx-body);
  font-weight: var(--csx-weight-medium);
  text-decoration: none;
}

.csx-doclist .csx-doclist__link:hover,
.csx-doclist .csx-doclist__link:focus {
  background: var(--csx-subtle);
  color: var(--csx-link);
}

.csx-doclist__link svg {
  flex: none;
  color: var(--csx-muted);
}

.csx-doclist__link:focus-visible {
  outline-offset: -2px;
}

.csx-docgroups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--csx-space-7) var(--csx-space-6);
  align-items: start;
}

.csx-docgroups__title {
  margin-bottom: var(--csx-space-3);
  color: var(--csx-ink);
  font-size: var(--csx-fs-4);
  font-weight: var(--csx-weight-semibold);
}

@media (pointer: coarse) {
  .csx-docnav .csx-docnav__link,
  .csx-toc .csx-toc__link {
    padding-block: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-pager .csx-pager__link {
    transition: none;
  }
}

/* ---- changelog ---- */
/* Changelog: a release timeline. The date sits in a left column, each release hangs off one
   vertical hairline with a dot (blue for the latest), and every change starts with a type
   badge of fixed width so the text lines up: New, Improved, Fixed, Removed, Security. */

.csx-changelog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3) var(--csx-space-6);
  margin-bottom: var(--csx-space-7);
}

.csx-releases {
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-release {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--csx-space-6);
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--csx-nav-h) + var(--csx-space-6));
}

.csx-release__date {
  padding-top: 5px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-7);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.csx-release__entry {
  position: relative;
  min-width: 0;
  padding: 0 0 var(--csx-space-8) var(--csx-space-7);
  border-left: 1px solid var(--csx-line-strong);
}

.csx-release:last-child .csx-release__entry {
  padding-bottom: var(--csx-space-2);
}

.csx-release__entry::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--csx-canvas);
  border-radius: 50%;
  background: var(--csx-line-control);
}

.csx-release--latest .csx-release__entry::before {
  background: var(--csx-accent);
  box-shadow: 0 0 0 3px var(--csx-accent-soft);
}

.csx-release__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csx-space-2) var(--csx-space-3);
}

.csx-release__version {
  color: var(--csx-ink);
  font-size: var(--csx-fs-3);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.csx-release__version a {
  color: inherit;
  text-decoration: none;
}

.csx-release__version a:hover {
  color: var(--csx-link);
  text-decoration: underline;
}

.csx-release__summary {
  max-width: 68ch;
  margin-top: var(--csx-space-2);
  color: var(--csx-body);
  font-size: var(--csx-fs-5);
  line-height: var(--csx-lh-body);
}

.csx-changes {
  display: grid;
  gap: 10px;
  max-width: 72ch;
  margin: var(--csx-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.csx-change {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--csx-space-3);
  color: var(--csx-body);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.6;
}

.csx-change__type {
  display: inline-flex;
  justify-content: center;
  padding: 1px 6px;
  border-radius: var(--csx-radius-sm);
  background: var(--csx-subtle);
  color: var(--csx-ink);
  font-size: var(--csx-fs-8);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.6;
}

.csx-change__type--new {
  background: var(--csx-ok-soft);
  color: var(--csx-ok-ink);
}

.csx-change__type--improved {
  background: var(--csx-info-soft);
  color: var(--csx-info-ink);
}

.csx-change__type--fixed {
  background: var(--csx-warn-soft);
  color: var(--csx-warn-ink);
}

.csx-change__type--removed {
  background: var(--csx-danger-soft);
  color: var(--csx-danger-ink);
}

.csx-release__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--csx-space-2) var(--csx-space-5);
  margin-top: var(--csx-space-4);
  font-size: var(--csx-fs-6);
}

@media (max-width: 640px) {
  .csx-release {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .csx-release__date {
    padding: 0 0 6px var(--csx-space-7);
    border-left: 1px solid var(--csx-line-strong);
    text-align: left;
  }

  .csx-release__entry::before {
    top: -18px;
  }

  .csx-change {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .csx-change__type {
    justify-self: start;
    min-width: 80px;
  }
}

/* ---- roadmap ---- */
/* Roadmap: four status columns on a tinted board (Considering, Planned, In progress, Shipped),
   each holding idea cards with a tag and a vote button. Columns stack to two, then one. */

.csx-roadmap__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-3) var(--csx-space-6);
  margin-bottom: var(--csx-space-6);
}

.csx-roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--csx-space-4);
  align-items: start;
}

@media (max-width: 1100px) {
  .csx-roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .csx-roadmap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csx-roadmap__col {
  min-width: 0;
  padding: var(--csx-space-3);
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius-lg);
  background: var(--csx-subtle);
}

.csx-roadmap__head {
  display: flex;
  align-items: center;
  gap: var(--csx-space-2);
  padding: 2px 4px var(--csx-space-3);
}

.csx-roadmap__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-6);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.4;
}

.csx-roadmap__head .csx-count {
  margin-left: auto;
  background: var(--csx-surface);
}

.csx-roadmap__none {
  padding: var(--csx-space-3) 4px;
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
}

.csx-ideas {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx-idea {
  display: grid;
  gap: var(--csx-space-2);
  padding: 14px;
  border: 1px solid var(--csx-line);
  border-radius: var(--csx-radius);
  background: var(--csx-surface);
  box-shadow: var(--csx-shadow-card);
}

.csx-idea__title {
  color: var(--csx-ink);
  font-size: var(--csx-fs-5);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.csx-idea .csx-idea__link {
  color: var(--csx-ink);
  text-decoration: none;
}

.csx-idea .csx-idea__link:hover,
.csx-idea .csx-idea__link:focus {
  color: var(--csx-link);
  text-decoration: underline;
}

.csx-idea__text {
  color: var(--csx-muted);
  font-size: var(--csx-fs-prose-sm);
  line-height: 1.5;
}

.csx-idea__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csx-space-2);
  margin-top: 2px;
}

/* Vote: a pill button with a count. aria-pressed marks the visitor's own vote. */
.csx-vote.csx-vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: 0;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--csx-line-control);
  border-radius: var(--csx-radius-pill);
  background: var(--csx-surface);
  box-shadow: none;
  color: var(--csx-body);
  font-family: inherit;
  font-size: var(--csx-fs-7);
  font-weight: var(--csx-weight-semibold);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--csx-dur-fast) var(--csx-ease), background-color var(--csx-dur-fast) var(--csx-ease);
}

.csx-vote.csx-vote:hover {
  border-color: var(--csx-accent);
  color: var(--csx-ink);
}

.csx-vote.csx-vote:focus-visible {
  outline: 2px solid var(--csx-focus);
  outline-offset: 2px;
}

.csx-vote.csx-vote[aria-pressed="true"] {
  border-color: var(--csx-accent);
  background: var(--csx-accent-soft);
  color: var(--csx-link);
}

.csx-vote.csx-vote:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (pointer: coarse) {
  .csx-vote.csx-vote {
    min-height: var(--csx-target);
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .csx-vote.csx-vote {
    transition: none;
  }
}