/**
 * Shared component styles — tables and figures.
 *
 * Ported from components/data/Table.module.css and components/core/Figure.module.css.
 * CSS Modules scoped these by build; WordPress has no equivalent, so the class names
 * carry the scope instead (`ss-table__numeric`, not `.numeric`). That is the only
 * difference — the rules themselves are unchanged, deliberately, because "no visual
 * drift from the approved design" has to survive the port.
 *
 * Loaded by every block that renders a table or a figure, via functions.php.
 */

/* ── Table shell ──────────────────────────────────────────────────────────── */

/**
 * Tables run the full content width and are the densest thing on the site, so they get
 * the most careful treatment: 1px zinc hairlines do all the separating work, the first
 * column sticks when the table scrolls sideways on a phone, and every column header is
 * a real <th scope> for screen readers.
 */

.ss-table-scroll {
  overflow-x: auto;

  /* The table may scroll; the page body must never scroll sideways. That defect
     shipped once — see docs/STATUS.md. */
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.ss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
}

.ss-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: var(--space-3);
}

.ss-table th,
.ss-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline);
  vertical-align: top;
}

.ss-table thead th {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-hairline);
  white-space: nowrap;
}

.ss-table tbody tr {
  transition: background-color var(--motion-hover) var(--ease-standard);
}

.ss-table tbody tr:hover {
  background: var(--surface-section);
}

.ss-table__numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ss-table__total {
  font-weight: var(--weight-semibold);
  border-top: 2px solid var(--border-hairline);
}

.ss-table__total td,
.ss-table__total th {
  border-bottom: 0;
}

.ss-table__footnote {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  margin-top: var(--space-4);
  max-width: 78ch;
}

/* The first column carries the identity of the row — it stays put when scrolling. */
@media (width <= 768px) {
  .ss-table--sticky-first th[scope="row"],
  .ss-table--sticky-first tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface-base);
    z-index: 1;
  }

  .ss-table--sticky-first tbody tr:hover th[scope="row"],
  .ss-table--sticky-first tbody tr:hover td:first-child {
    background: var(--surface-section);
  }
}

/* ── The one permitted use of --ss-signal ─────────────────────────────────── */

/* "Restricted: highlighted row in comparison tables only." Nowhere else on the site. */
.ss-table__highlight {
  background: var(--surface-highlight);
}

.ss-table__highlight td,
.ss-table__highlight th {
  border-left: 2px solid var(--table-row-highlight-accent);
}

.ss-table__highlight:hover {
  background: var(--surface-highlight);
}

/* ── Figures ──────────────────────────────────────────────────────────────── */

.ss-figure {
  font-variant-numeric: tabular-nums;
}

.ss-figure__inline,
.ss-figure__table {
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
  letter-spacing: var(--tracking-mono);
  color: var(--text-data);
}

.ss-figure__headline {
  font-family: var(--font-display);
  font-size: var(--type-figure-size);
  line-height: var(--type-figure-line);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--ss-blue);
  display: block;
}

.ss-figure__unit {
  /* Thin space is in the string; this keeps the unit from wrapping off the number. */
  white-space: nowrap;
}

.ss-figure__method {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  max-width: 62ch;
}

/* An unstated value renders as an em dash in pending grey, never as a zero. */
.ss-figure__unstated {
  color: var(--text-pending);
}

/* ── The held-figure badge ────────────────────────────────────────────────── */

/**
 * --ss-pending is NEVER blue. From the design system: "A held figure must never look
 * like a published one." Blue is the published colour; grey is the held one, and the
 * distance between them is the whole point.
 */

.ss-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-pending);
  background: var(--surface-pending);
  border: 1px solid var(--border-pending);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);

  /* "Watertightness · in test" is 344px on one line, which overflows a 360px screen.
     Wrapping is better than a page that scrolls sideways. */
  flex-wrap: wrap;
  max-width: 100%;
  white-space: normal;
}

.ss-pending-badge__property {
  color: var(--text-pending);
  font-weight: var(--weight-medium);
}

.ss-pending-text {
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
  letter-spacing: var(--tracking-mono);
  color: var(--text-pending);
}

.ss-pending-text__programme {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-pending);
  margin-top: var(--space-1);
}

/* ── The explicit "Not yet stated" list ───────────────────────────────────── */

.ss-held-list {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hairline);
}

.ss-held-list__title {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.ss-held-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.ss-held-list__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-pending);
}

/* ── The Spanish fallback notice ──────────────────────────────────────────── */

/**
 * Set apart deliberately. A specifier reading a Spanish page needs to know why the next
 * section is in English — otherwise the honest answer ("nobody has signed off the
 * translation yet") reads as an oversight. See SS\I18n.
 */
.ss-i18n-fallback {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  background: var(--surface-section);
  border-left: 2px solid var(--border-strong);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  max-width: var(--measure-prose);
}