/* ============================================================================
 * THE DASHBOARD DRESS — `.sx-dash`
 *
 * WHAT THIS FILE IS. One scope that lets the Macro Lab primitives (which speak
 * only the `--md-*` contract) wear the pitch surface's cream `--sx-*` palette.
 * The kit does not re-implement the /macro design system; it re-dresses it. Map
 * the contract once here and `DashboardPanel`, `KpiTile`, `DeltaBadge`,
 * `RankBars`, `RadialGauge` and every other primitive land on the cream surface
 * looking native, with no fork and no second component library to maintain.
 *
 * WHY `.md-root` IS ALSO APPLIED. `.md-title` / `.md-metric` resolve their
 * variants off `[data-md-title]` / `[data-md-metric]` on a `.md-root` ancestor.
 * The kit's root element carries `md-root sx-dash` plus `data-md-theme="fresh"`
 * so the primitives find the ancestor they expect — and then this scope's own
 * declarations, which come later in the cascade, win on the tokens.
 *
 * THE TYPE RULE (owner, 2026-09-15, verbatim: "SMAL FUCKING TEXT that people will
 * NOT READ"). Serif display for the ROOM TITLE only; every other string is the sans.
 * Numerals are tabular everywhere. THE FLOOR IS 13px AND NOTHING SITS BELOW IT:
 * body and chips 15px (`--sxd-body`), captions and labels 14px (`--sxd-caption`),
 * footnotes 13px on ONE LINE (`--sxd-foot`), card titles 17px, KPI numerals 26px.
 * A footnote that needs two lines is not a footnote — cut it or make it a caption.
 * Whitespace lives BETWEEN cards, not inside them.
 * ========================================================================== */

.sx-dash {
  /* ---- surfaces ------------------------------------------------------- */
  --md-bg: transparent;
  --md-surface: var(--sx-paper, #fffdf8);
  --md-surface-2: color-mix(in srgb, var(--sx-cream, #f5f0e6) 60%, var(--sx-paper, #fffdf8));
  --md-surface-3: var(--sx-cream-deep, #ece5d6);
  --md-border: var(--sx-hairline, rgba(27, 22, 17, 0.14));
  --md-border-strong: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  --md-grid: transparent;
  --md-blur: 0px;
  --md-radius: 10px;
  --md-radius-sm: 7px;
  --md-shadow: none;

  /* ---- ink ------------------------------------------------------------ */
  --md-text: var(--sx-ink, #1b1611);
  --md-text-secondary: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  --md-text-muted: var(--sx-ink-45, rgba(27, 22, 17, 0.45));

  /* ---- the accent set already on this surface (red · gold · olive) ---- */
  --md-accent: var(--sx-accent, #b0473c);
  --md-accent-2: var(--sx-bronze, #b8983f);
  --md-accent-soft: var(--sx-accent-soft, rgba(176, 71, 60, 0.08));
  --md-accent-text: var(--sx-accent, #b0473c);
  --md-accent-gradient: linear-gradient(96deg, var(--sx-accent, #b0473c), var(--sx-bronze, #b8983f));
  --md-positive: var(--sx-jade, #5c8456);
  --md-negative: var(--sx-accent, #b0473c);
  --md-warning: var(--sx-bronze, #b8983f);
  --md-neutral: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  --md-chart-brand: var(--sx-accent, #b0473c);
  --md-chart-competitive: var(--sx-bronze, #b8983f);
  --md-chart-industry: var(--sx-jade, #5c8456);

  /* ---- faces ---------------------------------------------------------- */
  --md-font-sans: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --md-font-display: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); /* card titles are SANS — serif is the room title */
  --md-font-serif: var(--sx-serif, "DM Serif Display", Georgia, "Times New Roman", serif);
  --md-font-mono: var(--sx-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);

  /* ---- the kit's own dial ---------------------------------------------- */
  /* SPACING, FINAL (design pass, 2026-09-15): 24px between cards, 20px inside one. The 14px
     both used to be is what made a grid of containers read as one dense block. */
  --sxd-gap: var(--sx-card-gap, 1.5rem);
  --sxd-pad: var(--sx-card-pad, 1.25rem);
  --sxd-body: 0.9375rem; /* 15px — every string a reader actually reads */
  --sxd-caption: 0.875rem; /* 14px */
  --sxd-foot: 0.8125rem; /* 13px — a footnote, ONE line, or cut */
  --sxd-title: 1.0625rem; /* 17px */
  --sxd-kpi: 1.625rem; /* 26px */
  --sxd-bar-h: 0.5rem;
  --sxd-muted-op: 0.38;

  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--sxd-body);
  line-height: 1.5;
  color: var(--sx-ink, #1b1611);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Nothing in the kit is ever a serif except a room title that opts in. */
.sx-dash .md-title,
.sx-dash .sx-dash__title {
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: -0.005em;
}
.sx-dash__display {
  font-family: var(--sx-serif, "DM Serif Display", Georgia, "Times New Roman", serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ------------------------------------------------------------------ grid */
.sx-dash__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sxd-gap);
  align-items: start;
  min-width: 0;
}
.sx-dash__grid--tight {
  --sxd-gap: 0.625rem;
}
.sx-dash__col {
  min-width: 0;
  grid-column: span var(--sxd-span, 12) / span var(--sxd-span, 12);
}
@media (max-width: 900px) {
  .sx-dash__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sx-dash__col {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ card */
/* LEVEL 2 of three. Paper, radius 16, an 8% hairline and ONE soft shadow — the weight that
   lifts a card off the cream without the 1px box every container used to wear at the same
   strength. `.sx-card` is the same level under a name a hand-rolled container can borrow. */
.sx-dash__card,
.sx-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sx-paper, #fffdf8);
  border: 1px solid var(--sx-card-line, rgba(27, 22, 17, 0.08));
  border-radius: var(--sx-radius-card, 1rem);
  box-shadow: var(--sx-card-shadow, 0 1px 2px rgba(27, 22, 17, 0.06));
  overflow: hidden;
}
/* ⛔ CARDS NEVER NEST CARDS. If one lands inside another it is demoted to a tile, in CSS,
   so the mistake is invisible rather than doubled. */
.sx-card .sx-card {
  border: 0;
  box-shadow: none;
  border-radius: var(--sx-radius-tile, 0.75rem);
  background: var(--sx-tile-fill, rgba(27, 22, 17, 0.03));
}
.sx-dash__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--sxd-pad) var(--sxd-pad) 0.5rem;
}
.sx-dash__card-heading {
  min-width: 0;
}
.sx-dash__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
.sx-dash__title {
  margin: 0;
  font-size: var(--sxd-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--sx-ink, #1b1611);
}
.sx-dash__caption {
  margin: 0.25rem 0 0;
  font-size: var(--sxd-caption);
  line-height: 1.4;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
}
.sx-dash__card-body {
  padding: 0.25rem var(--sxd-pad) var(--sxd-pad);
  min-width: 0;
}
.sx-dash__card-body--flush {
  padding: 0;
}
.sx-dash__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem var(--sxd-pad);
  border-top: 1px solid var(--sx-hairline-soft, rgba(27, 22, 17, 0.08));
  font-size: var(--sxd-foot);
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
/* ⛔ A FOOTNOTE IS ONE LINE. It truncates rather than wrapping into a paragraph a reader
 * will skip; the whole string stays available as the element's own hover title. */
.sx-dash__card-foot > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-dash__footnote {
  margin: 0.5rem 0 0;
  font-size: var(--sxd-foot);
  line-height: 1.35;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- controls */
.sx-dash__control {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.sx-dash__select {
  appearance: none;
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sx-ink, #1b1611);
  background: var(--sx-paper, #fffdf8);
  border: 1px solid var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border-radius: 6px;
  padding: 0.3rem 1.5rem 0.3rem 0.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--sx-ink-45, rgba(27, 22, 17, 0.45)) 50%),
    linear-gradient(135deg, var(--sx-ink-45, rgba(27, 22, 17, 0.45)) 50%, transparent 50%);
  background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.sx-dash__select:focus-visible {
  outline: 2px solid var(--sx-accent, #b0473c);
  outline-offset: 1px;
}
.sx-dash__seg {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border-radius: 7px;
  background: var(--sx-cream, #f5f0e6);
}
.sx-dash__seg-btn {
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  cursor: pointer;
  white-space: nowrap;
}
.sx-dash__seg-btn[aria-pressed="true"] {
  background: var(--sx-ink, #1b1611);
  color: var(--sx-paper, #fffdf8);
}
.sx-dash__toggle {
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sx-accent, #b0473c);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sx-dash__toggle:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------- KPI */
.sx-dash__kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border: 1px solid var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border-radius: 10px;
  overflow: hidden;
}
.sx-dash__kpi {
  min-width: 0;
  padding: 0.75rem 0.875rem;
  background: var(--sx-paper, #fffdf8);
}
.sx-dash__kpi-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
.sx-dash__kpi-value {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: var(--sxd-kpi);
  font-weight: 600;
  line-height: 1;
  color: var(--sx-ink, #1b1611);
  font-variant-numeric: tabular-nums;
}
.sx-dash__kpi-value--unknown {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  font-style: italic;
}
.sx-dash__kpi-suffix {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
.sx-dash__kpi-denom {
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
}
.sx-dash__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sx-dash__pill--up {
  color: var(--sx-jade, #5c8456);
  background: var(--sx-jade-soft, rgba(92, 132, 86, 0.1));
}
.sx-dash__pill--down {
  color: var(--sx-accent, #b0473c);
  background: var(--sx-accent-soft, rgba(176, 71, 60, 0.08));
}
.sx-dash__pill--flat {
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  background: var(--sx-ink-12, rgba(27, 22, 17, 0.12));
}

/* ------------------------------------------------------------------ bars */
.sx-dash__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.sx-dash__row {
  min-width: 0;
}
.sx-dash__row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.sx-dash__row-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--sx-ink, #1b1611);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-dash__row--highlight .sx-dash__row-label {
  font-weight: 700;
}
.sx-dash__rank {
  flex: 0 0 auto;
  width: 1.15rem;
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  font-variant-numeric: tabular-nums;
}
.sx-dash__row-value {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sx-dash__track {
  margin-top: 0.3rem;
  height: var(--sxd-bar-h);
  border-radius: 2px;
  background: var(--sx-cream-deep, #ece5d6);
  overflow: hidden;
}
.sx-dash__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--sx-bronze, #b8983f);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sx-dash__fill--highlight {
  background: var(--sx-accent, #b0473c);
}
.sx-dash__fill--positive {
  background: var(--sx-jade, #5c8456);
}
.sx-dash__fill--negative {
  background: var(--sx-accent, #b0473c);
}
.sx-dash__fill--neutral {
  background: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
}
.sx-dash__row-detail {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  overflow-wrap: anywhere;
}
.sx-dash__row-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding: 3px 5px;
  margin: -3px -5px;
}
.sx-dash__row-link:hover {
  background: var(--sx-cream, #f5f0e6);
}

/* ------------------------------------------------------------ delta bars */
.sx-dash__delta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) minmax(4.5rem, auto);
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}
.sx-dash__delta--muted {
  opacity: var(--sxd-muted-op);
}
.sx-dash__delta-label {
  font-size: 0.875rem;
  color: var(--sx-ink, #1b1611);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-dash__delta-track {
  position: relative;
  height: 1.1rem;
  background: linear-gradient(to right, transparent 0, transparent 100%);
}
.sx-dash__delta-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
}
.sx-dash__delta-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--sx-ink-12, rgba(27, 22, 17, 0.12));
  border-left: 1px dashed var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  border-right: 1px dashed var(--sx-ink-30, rgba(27, 22, 17, 0.3));
}
.sx-dash__delta-fill {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  border-radius: 2px;
}
.sx-dash__delta-fill--up {
  background: var(--sx-jade, #5c8456);
}
.sx-dash__delta-fill--down {
  background: var(--sx-accent, #b0473c);
}
.sx-dash__delta-fill--noise {
  background: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
}
.sx-dash__delta-value {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  white-space: nowrap;
}
.sx-dash__band-note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}

/* ----------------------------------------------------------------- chips */
.sx-dash__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}
.sx-dash__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  border: 1px solid var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--sx-ink-70, rgba(27, 22, 17, 0.7));
  background: var(--sx-paper, #fffdf8);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sx-dash__chip-count {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
.sx-dash__chip--moved {
  border-color: color-mix(in srgb, var(--sx-jade, #5c8456) 45%, transparent);
  background: var(--sx-jade-soft, rgba(92, 132, 86, 0.1));
  color: var(--sx-jade, #5c8456);
}
.sx-dash__chip--within-noise {
  border-color: var(--sx-hairline-soft, rgba(27, 22, 17, 0.08));
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  background: transparent;
}
.sx-dash__chip--at-the-bar {
  border-color: color-mix(in srgb, var(--sx-bronze, #b8983f) 50%, transparent);
  background: var(--sx-bronze-soft, rgba(184, 152, 63, 0.12));
  color: var(--sx-bronze, #b8983f);
}
.sx-dash__chip--highlight {
  border-color: var(--sx-accent, #b0473c);
  background: var(--sx-accent-soft, rgba(176, 71, 60, 0.08));
  color: var(--sx-accent, #b0473c);
  font-weight: 600;
}

/* ------------------------------------------------------------ gauge/dist */
.sx-dash__gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
/* ⛔ A COVERAGE SHARE IS NOT A GRADE. `RadialGauge` colours its ring off `scoreVar`, so
 * 62% reads red and 68% reads green — a judgement this product has no basis to make about
 * how much of a floor has been read. Inside a gauge, every semantic token collapses to the
 * one neutral bronze; the NUMBER beside it is the whole message. Scoped to the gauge, so
 * nothing else in the kit loses its positive/negative distinction. */
.sx-dash__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 7rem;
  --md-positive: var(--sx-bronze, #b8983f);
  --md-negative: var(--sx-bronze, #b8983f);
  --md-neutral: var(--sx-bronze, #b8983f);
  --md-accent: var(--sx-bronze, #b8983f);
}
.sx-dash__gauge-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  text-align: center;
}
.sx-dash__gauge-denom {
  font-size: 0.8125rem;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sx-dash__stamp {
  margin: 0.5rem 0 0;
  font-family: var(--sx-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}

/* ---------------------------------------------------------------- matrix */
.sx-dash__matrix-wrap {
  overflow-x: auto;
}
.sx-dash__matrix {
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.sx-dash__matrix th {
  font-weight: 600;
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  text-align: left;
  padding: 0.25rem 0.4rem;
  white-space: nowrap;
}
.sx-dash__matrix thead th {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
.sx-dash__matrix td {
  padding: 0.3rem 0.4rem;
  text-align: center;
  border: 1px solid var(--sx-paper, #fffdf8);
  color: var(--sx-ink, #1b1611);
  min-width: 2.25rem;
}
.sx-dash__matrix-empty {
  color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
}

/* ----------------------------------------------------------------- pairs */
.sx-dash__pair {
  display: grid;
  grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--sx-hairline-soft, rgba(27, 22, 17, 0.08));
}
.sx-dash__pair:last-child {
  border-bottom: 0;
}
.sx-dash__pair-bars {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.sx-dash__pair-line {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
}
.sx-dash__pair-when {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
.sx-dash__pair--muted {
  opacity: var(--sxd-muted-op);
}

/* ---------------------------------------------------------------- series */
.sx-dash__series {
  width: 100%;
  display: block;
}
.sx-dash__series-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- empty */
.sx-dash__empty {
  margin: 0;
  padding: 0.5rem 0;
  font-size: var(--sxd-caption);
  line-height: 1.45;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}


/* ----------------------------------------------------------- disclosure */
/* THE LONG TAIL, CLOSED. `DashDisclosure` — a labelled control with a count, never a dump. */
.sx-dash__disclosure {
  margin-top: 0.625rem;
  border-top: 1px solid var(--sx-hairline-soft, rgba(27, 22, 17, 0.08));
  padding-top: 0.5rem;
}
.sx-dash__disclosure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.sx-dash__disclosure-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  font-size: var(--sxd-caption);
  font-weight: 600;
  color: var(--sx-ink-70, rgba(27, 22, 17, 0.7));
}
.sx-dash__disclosure-count {
  font-size: var(--sxd-foot);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
/* A REAL BUTTON, not a hairline hint: tappable, outlined, 14px. */
.sx-dash__disclosure-btn {
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--sxd-caption);
  font-weight: 600;
  color: var(--sx-ink, #1b1611);
  background: var(--sx-cream, #f5f0e6);
  border: 1px solid var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border-radius: 7px;
  padding: 0.35rem 0.7rem;
  min-height: 2rem;
  cursor: pointer;
  white-space: nowrap;
}
.sx-dash__disclosure-btn:hover {
  border-color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
}
.sx-dash__disclosure-btn:focus-visible {
  outline: 2px solid var(--sx-accent, #b0473c);
  outline-offset: 1px;
}
.sx-dash__disclosure-body {
  padding-top: 0.625rem;
}
/* ⛔ THE TAIL IS MOUNTED, AND THIS IS WHAT KEEPS IT SHUT. `DashDisclosure` force-mounts its
 * content so paper, find-in-page and the room suites can still reach a tail nobody has opened —
 * which means Radix leaves it VISIBLE and the closing is CSS's job, right here. Delete this rule
 * and every disclosure on the floor springs open. `@media print` overrides it deliberately. */
.sx-dash__disclosure-body[data-state="closed"] {
  display: none;
}

/* ------------------------------------------------------------- dropdown */
/* `DashSelect` — the readable dropdown a room gets above four options. */
.sx-dash__dropdown {
  height: auto;
  min-height: 2rem;
  width: auto;
  min-width: 9rem;
  max-width: 100%;
  gap: 0.4rem;
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--sxd-caption);
  font-weight: 600;
  color: var(--sx-ink, #1b1611);
  background: var(--sx-paper, #fffdf8);
  border-color: var(--sx-hairline, rgba(27, 22, 17, 0.14));
  border-radius: 7px;
  padding: 0.3rem 0.6rem;
}
.sx-dash__dropdown:focus {
  outline: 2px solid var(--sx-accent, #b0473c);
  outline-offset: 1px;
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
}
.sx-dash__dropdown-menu {
  background: var(--sx-paper, #fffdf8);
  border-color: var(--sx-hairline, rgba(27, 22, 17, 0.14));
  color: var(--sx-ink, #1b1611);
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.sx-dash__dropdown-item {
  font-size: var(--sxd-caption);
  color: var(--sx-ink, #1b1611);
  cursor: pointer;
}

/* ------------------------------------------------------- chip overflow */
/* "+N more" — the chip wall's replacement. One control, the rest in a popover. */
.sx-dash__chip--more {
  font-weight: 700;
  color: var(--sx-accent, #b0473c);
  border-color: color-mix(in srgb, var(--sx-accent, #b0473c) 45%, transparent);
  background: var(--sx-accent-soft, rgba(176, 71, 60, 0.08));
  cursor: pointer;
}
.sx-dash__chip-overflow {
  width: 22rem;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: 22rem;
  overflow-y: auto;
  background: var(--sx-paper, #fffdf8);
  border-color: var(--sx-hairline, rgba(27, 22, 17, 0.14));
  padding: 0.75rem;
}
.sx-dash__chip-overflow-label {
  margin: 0 0 0.5rem;
  font-size: var(--sxd-foot);
  font-weight: 600;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
/* The flat tail exists for PAPER only — a printed page has no popover to open. */
.sx-dash__chips--print-tail {
  display: none;
}

/* ----------------------------------------------------------------- print */
@media print {
  .sx-dash__control,
  .sx-dash__toggle,
  .sx-dash__seg,
  .sx-dash__select,
  .sx-dash__dropdown,
  .sx-dash__disclosure-btn,
  .sx-dash__chip--more {
    display: none !important;
  }
  /* Paper has no control to click: every tail unfolds flat. */
  .sx-dash__chips--print-tail {
    display: flex !important;
  }
  .sx-dash__disclosure-body {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .sx-dash__card {
    break-inside: avoid;
    border-color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * THE DESIGN PASS — 2026-09-15
 *
 * Owner: "do a pass and make it beautiful and visual and graphical and audit any
 * weird text dumps and bad fonts and bad alignment — make me proud."
 *
 * Everything below is ONE header, THREE surfaces, colour that means something, and
 * a clamp that ends the text dumps. Every size resolves to a `--sx-*` token declared
 * once on `.sx-root`, so the whole floor moves from one file.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ THE HEADER */
/* One per room, above the tabs, NEVER inside a card. It replaces both of the two
   header systems the floor had, and the KPI band that used to sit under them. */
.sx-page-hdr {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 var(--sx-section-gap, 2rem);
  padding: 0 0 1.125rem;
  border-bottom: 1px solid var(--sx-card-line, rgba(27, 22, 17, 0.08));
  font-family: var(--sx-sans, "Be Vietnam Pro", -apple-system, sans-serif);
  font-variant-numeric: tabular-nums;
}
.sx-page-hdr__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sx-page-hdr__lead {
  min-width: 0;
  flex: 1 1 24rem;
}
/* The ONE place 11px is allowed on this floor: tracked caps, never prose. */
.sx-page-hdr__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--sx-eyebrow, 0.6875rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-accent, #b0473c);
}
/* 40px, not the 64px the editorial rooms opened with — a title that competes with
   the content is a title nobody reads past. */
.sx-page-hdr__title {
  margin: 0;
  font-family: var(--sx-serif, "DM Serif Display", Georgia, serif);
  font-size: var(--sx-display, 2.5rem);
  line-height: var(--sx-display-lh, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--sx-ink, #1b1611);
  text-wrap: balance;
}
.sx-page-hdr__lede {
  margin: 0.5rem 0 0;
  max-width: 54rem;
  font-size: var(--sx-lede, 1rem);
  line-height: 1.55;
  color: var(--sx-ink-70, rgba(27, 22, 17, 0.7));
  text-wrap: pretty;
}
.sx-page-hdr__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.125rem;
}

/* THE STAT STRIP — what replaced the KPI band. Inline, dot-separated, one row.
   Denominators ride in the hover (`title`), so the page stays a sentence long. */
.sx-page-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 1.375rem;
  margin: 0.25rem 0 0;
}
.sx-page-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  position: relative;
  padding: 0.125rem 0;
  cursor: default;
}
/* The separator is a dot drawn BETWEEN stats, so no stat carries a trailing one. */
.sx-page-stat + .sx-page-stat::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  transform: translateY(-50%);
}
.sx-page-stat__value {
  font-size: var(--sx-stat, 1.25rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sx-ink, #1b1611);
  font-variant-numeric: tabular-nums;
}
.sx-page-stat__label {
  font-size: var(--sx-foot, 0.8125rem);
  line-height: var(--sx-foot-lh, 1.125rem);
  color: var(--sx-ink-55, rgba(27, 22, 17, 0.55));
}
/* A null is never a zero — it is quiet, italic, and says so in words. */
.sx-page-stat--unknown .sx-page-stat__value {
  font-size: var(--sx-caption, 0.875rem);
  font-style: italic;
  font-weight: 500;
  color: var(--sx-ink-45, rgba(27, 22, 17, 0.45));
}
/* THE DENOMINATOR, clipped until wanted — present in the document for paper, for
   find-in-page and for a screen reader; drawn only when the stat is hovered or focused. */
.sx-page-stat__of {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sx-page-stat:hover .sx-page-stat__of,
.sx-page-stat:focus-within .sx-page-stat__of {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 3;
  width: max-content;
  max-width: 22rem;
  height: auto;
  margin: 0;
  padding: 0.3125rem 0.5rem;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border-radius: 0.5rem;
  background: var(--sx-ink, #1b1611);
  color: var(--sx-paper, #fffdf8);
  font-size: var(--sx-foot, 0.8125rem);
  line-height: var(--sx-foot-lh, 1.125rem);
  box-shadow: 0 4px 12px rgba(27, 22, 17, 0.18);
}

/* A stat with a denominator underlines on hover, so a reader learns there is one. */
.sx-page-stat[title]:hover .sx-page-stat__value {
  text-decoration: underline;
  text-decoration-color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  text-underline-offset: 0.25rem;
}
@media (max-width: 720px) {
  .sx-page-hdr__title {
    font-size: 2rem;
    line-height: 2.25rem;
  }
  .sx-page-hdr__controls {
    width: 100%;
  }
}

/* ------------------------------------------------------- LEVEL 3: THE TILE */
/* Borderless, ink at 3%, radius 12. It exists only inside a card. */
.sx-tiles {
  display: grid;
  grid-template-columns: repeat(var(--sx-tiles-cols, 2), minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
}
@media (max-width: 760px) {
  .sx-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sx-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: var(--sx-radius-tile, 0.75rem);
  background: var(--sx-tile-fill, rgba(27, 22, 17, 0.03));
  font-size: var(--sx-body, 0.9375rem);
  line-height: var(--sx-body-lh, 1.5rem);
  color: var(--sx-ink, #1b1611);
}
.sx-tile__label {
  margin: 0;
  font-size: var(--sx-caption, 0.875rem);
  line-height: var(--sx-caption-lh, 1.25rem);
  font-weight: 600;
  color: var(--sx-ink-80, rgba(27, 22, 17, 0.8));
}
.sx-tile__value {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sx-tile__denom {
  margin: 0;
  font-size: var(--sx-foot, 0.8125rem);
  line-height: var(--sx-foot-lh, 1.125rem);
  color: var(--sx-ink-55, rgba(27, 22, 17, 0.55));
}
.sx-tile__body {
  min-width: 0;
  font-size: var(--sx-body, 0.9375rem);
  line-height: var(--sx-body-lh, 1.5rem);
  color: var(--sx-ink-75, rgba(27, 22, 17, 0.75));
}
.sx-tile__body > p {
  margin: 0;
}
.sx-tile__body > p + p {
  margin-top: 0.5rem;
}

/* ------------------------------------------ COLOUR THAT MEANS SOMETHING */
/* A FILLED pill per verdict; a GREY OUTLINE for the two provenance words, which
   say how a line came to exist and nothing about the world. No other element on
   this floor is allowed any of these five colours. */
.sx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--sx-foot, 0.8125rem);
  line-height: var(--sx-foot-lh, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fffdf8;
}
.sx-badge--bet { background: var(--sx-bet, #4a7a44); }
.sx-badge--whitespace { background: var(--sx-whitespace, #6b4a9c); }
.sx-badge--watch { background: var(--sx-watch, #9a7318); }
.sx-badge--risk { background: var(--sx-risk, #a83a2f); }
.sx-badge--strength { background: var(--sx-strength, #2f5f8a); }
.sx-badge--measured,
.sx-badge--written {
  background: transparent;
  border-color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  color: var(--sx-ink-62, rgba(27, 22, 17, 0.62));
  font-weight: 500;
}

/* The headline figure on an insight card takes its badge's colour — one card, one
   colour, so the eye pairs the verdict with the number without reading either. */
.sx-figure {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0;
  font-size: 1.75rem; /* 28px */
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink, #1b1611);
}
.sx-figure__suffix {
  font-size: var(--sx-caption, 0.875rem);
  font-weight: 500;
  color: var(--sx-ink-55, rgba(27, 22, 17, 0.55));
}
.sx-figure--bet { color: var(--sx-bet, #4a7a44); }
.sx-figure--whitespace { color: var(--sx-whitespace, #6b4a9c); }
.sx-figure--watch { color: var(--sx-watch, #9a7318); }
.sx-figure--risk { color: var(--sx-risk, #a83a2f); }
.sx-figure--strength { color: var(--sx-strength, #2f5f8a); }
.sx-tile__value--bet { color: var(--sx-bet, #4a7a44); }
.sx-tile__value--whitespace { color: var(--sx-whitespace, #6b4a9c); }
.sx-tile__value--watch { color: var(--sx-watch, #9a7318); }
.sx-tile__value--risk { color: var(--sx-risk, #a83a2f); }
.sx-tile__value--strength { color: var(--sx-strength, #2f5f8a); }

/* ------------------------------------------------------------- THE CLAMP */
/* Three lines, then a control. The text is ALWAYS in the document — only the
   height changes — so find-in-page, print and the room suites all still see it. */
.sx-clamp {
  min-width: 0;
}
.sx-clamp__body {
  font-size: var(--sx-body, 0.9375rem);
  line-height: var(--sx-body-lh, 1.5rem);
  color: var(--sx-ink-75, rgba(27, 22, 17, 0.75));
}
.sx-clamp__body > p {
  margin: 0;
}
.sx-clamp__body > p + p {
  margin-top: 0.5rem;
}
.sx-clamp__body--closed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sx-clamp-lines, 3);
  line-clamp: var(--sx-clamp-lines, 3);
  overflow: hidden;
}
.sx-clamp__btn {
  margin-top: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--sx-foot, 0.8125rem);
  line-height: var(--sx-foot-lh, 1.125rem);
  font-weight: 600;
  color: var(--sx-accent, #b0473c);
  cursor: pointer;
}
.sx-clamp__btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

/* --------------------------------------------------------- THE SHARE BAR */
.sx-sharebar {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  min-width: 0;
}
.sx-sharebar__track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--sx-ink-12, rgba(27, 22, 17, 0.12));
  overflow: hidden;
}
.sx-sharebar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--sx-chart-olive, #7d7a3e);
}
/* Accent is reserved for the CUSTOMER's own rows, in every bar and every chip. */
.sx-sharebar__fill--accent {
  background: var(--sx-chart-accent, #b0473c);
}
.sx-sharebar__label {
  margin: 0;
  font-size: var(--sx-foot, 0.8125rem);
  line-height: var(--sx-foot-lh, 1.125rem);
  color: var(--sx-ink-55, rgba(27, 22, 17, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------- GRIDS THAT FILL */
.sx-dash__grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Every child of an auto grid sits in one track — a 12-track `span` would punch a
   hole straight back through it. */
.sx-dash__grid--auto > .sx-dash__col,
.sx-dash__grid--auto > .sx-dash__card {
  grid-column: auto;
}
/* A LONE LAST CARD SPANS ITS ROW, rather than leaving the reader's eye a hole to
   fall through: the 4th of 4, the 7th of 7, the 10th of 10 in a three-up grid. */
@media (min-width: 1040px) {
  .sx-dash__grid--auto > *:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------- ONE CHART PALETTE */
/* Three roles, three colours: accent = the customer's names, olive = this world,
   sand = everything else. A fourth colour means the chart is two charts. */
.sx-dash {
  --md-chart-brand: var(--sx-chart-accent, #b0473c);
  --md-chart-competitive: var(--sx-chart-olive, #7d7a3e);
  --md-chart-industry: var(--sx-chart-sand, #cbbfa4);
  --sxd-chart-1: var(--sx-chart-accent, #b0473c);
  --sxd-chart-2: var(--sx-chart-olive, #7d7a3e);
  --sxd-chart-3: var(--sx-chart-sand, #cbbfa4);
}
/* A chart's own labels sit at the footnote floor — 13px, never smaller. */
.sx-dash svg text {
  font-size: var(--sx-foot, 0.8125rem);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------ THE FLOOR, ON BORROWED PRIMITIVES */
/*
   ⛔ THE 13px FLOOR IS A PROPERTY OF THE SURFACE, NOT OF THE KIT'S OWN FILES.
   The kit WEARS the Macro Lab primitives, and those ship their own Tailwind sizes:
   `RankBars` alone draws its rank numeral at 12px, its detail line at ELEVEN, and a
   row badge at NINE. Every one of those painted on the pitch floor, under a kit whose
   own test proved it never went below 13 — the test was true and the page was not,
   because it only ever read the kit's stylesheet. The dress is where this is fixed:
   inside `.sx-dash` a borrowed primitive is re-sized to this floor, once.
*/
.sx-dash [class*="text-[9px]"],
.sx-dash [class*="text-[10px]"],
.sx-dash [class*="text-[11px]"],
.sx-dash [class*="text-[12px]"],
.sx-dash .text-\[9px\],
.sx-dash .text-\[10px\],
.sx-dash .text-\[11px\],
.sx-dash .text-xs {
  font-size: var(--sx-foot, 0.8125rem) !important;
  line-height: var(--sx-foot-lh, 1.125rem) !important;
}
.sx-dash .text-sm {
  font-size: var(--sx-body, 0.9375rem);
  line-height: var(--sx-body-lh, 1.5rem);
}

/* THE QUIET DETAIL LINE — the per-row evidence, in a hover on screen and PRINTED on
   paper. Three qualified statements under each of twelve bars is a text dump; the
   same three, one hover away, are evidence a reader reaches for when they want it. */
.sx-dash__ranks--quiet-detail [class*="text-[11px]"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sx-dash__ranks--quiet-detail li:hover [class*="text-[11px]"],
.sx-dash__ranks--quiet-detail li:focus-within [class*="text-[11px]"] {
  position: static;
  width: auto;
  height: auto;
  margin: 0.25rem 0 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  color: var(--sx-ink-55, rgba(27, 22, 17, 0.55));
}

@media print {
  /* Paper has no "More" to press: every clamp unfolds. */
  .sx-clamp__body--closed {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
  }
  .sx-clamp__btn {
    display: none !important;
  }
  /* Paper has no hover either: every quiet detail line comes back, in full. */
  .sx-dash__ranks--quiet-detail [class*="text-[11px]"] {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0.25rem 0 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: normal !important;
  }
  /* Paper has no hover: every header denominator unfolds inline, as plain text. */
  .sx-page-stat__of {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 0.375rem !important;
    overflow: visible !important;
    clip-path: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--sx-ink-55, rgba(27, 22, 17, 0.55)) !important;
    padding: 0 !important;
  }
  .sx-page-hdr {
    break-after: avoid;
  }
  .sx-card {
    break-inside: avoid;
    box-shadow: none;
    border-color: var(--sx-ink-30, rgba(27, 22, 17, 0.3));
  }
}