/**
 * 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;

  /**
   * …and it shipped again, on the one page nothing tested.
   *
   * `overflow-x: auto` makes the box scroll, and it did: on /performance/regulatory-position
   * at 360px the scroller measured 312px of client against 801px of content. The page
   * scrolled sideways anyway — 798px of document against a 360px viewport, `window.scrollX`
   * reaching 400, the header sliding off the left edge — because a scroll container's
   * overflow still contributes to the document's scrollable area unless painting is
   * contained. `overflow-x: hidden` on this element does not fix it; `contain: paint` does.
   *
   * Not a translation defect: English measured 799px on the same page. It was invisible
   * because `the page never scrolls sideways` tests two routes and this is not one of them,
   * and because the regulatory table is the widest on the site — five columns of climate
   * zone — so it is the only one that overran.
   */
  contain: paint;
}

.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;
}

/**
 * The numeric column, defined ONCE.
 *
 * Four blocks — thermal, regulatory, weight and the material register — each carried
 * their own copy of this rule, and all four had dropped `font-size` and
 * `letter-spacing` from it. So every number in every table on the site rendered at 16px
 * body size instead of 15px mono data size, against a design whose §4.2 signature is
 * that values are always mono. Nothing caught it: the height difference per row is a
 * pixel or two, and it never moved a page far enough to trip a tolerance.
 *
 * The `.ss-table` prefix keeps it to cells inside a table, which is the only place the
 * class is used.
 */
.ss-table .is-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;
}

/**
 * A table decides its own width; the scroller handles the overflow.
 *
 * WordPress breaks words document-wide (see theme.css). Inside a table that shrinks the
 * min-content width of every column, so the browser hands the table less room than its
 * content wants and the rows grow instead: the material register came out 416px per row
 * against the design's 260, and the page 33% OVER at 360 having been 65% under.
 *
 * Word-breaking exists to stop a long string overflowing a container that cannot scroll.
 * `.ss-table-scroll` can, so nothing here needs it.
 */
.ss-table-scroll .ss-table,
.ss-table-scroll .ss-table th,
.ss-table-scroll .ss-table td {
  overflow-wrap: normal;
}

.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;
}

/**
 * A note under the value it qualifies — on its OWN line.
 *
 * The port carried this rule across faithfully, including the fact that it has no
 * `display`. Table.module.css `.footnote` is a span with `margin-top` and nothing to
 * apply it to, so in the reference a material's note runs straight on from its name:
 * "INSULTERM 600The only proprietary material in the verified set."
 *
 * `block` is plainly what the margin was written for. It also settles a measurement:
 * running the two together makes "600The" one unbreakable token, which widens the
 * reference's table by 67px and shortens its rows — so the material register measures
 * taller here than the design at 360 and the difference is the design's defect, not this
 * one. Recorded in docs/HOME-PAGE-PARITY.md.
 */
.ss-table__footnote {
  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-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);
}

/* ── Download cards ───────────────────────────────────────────────────────── */

/**
 * Ported from components/blocks/Blocks.module.css (.download*).
 *
 * Here rather than in a block stylesheet because two blocks render one: download-list,
 * which shows a single detail's files, and technical-library, which shows every file on
 * the site. A card that is not yet a file takes the pending surface, so it reads as a
 * promise rather than as a broken link.
 */

.ss-download {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: var(--surface-base);
  color: var(--ss-ink);
  text-decoration: none;
  transition: border-color var(--motion-hover) var(--ease-standard);
}

a.ss-download:hover {
  border-color: var(--ss-ink);
  color: var(--ss-ink);
  text-decoration: none;
}

.ss-download--pending {
  border-color: var(--border-pending);
  background: var(--surface-pending);
}

.ss-download__type {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ss-blue);
}

.ss-download__type--pending {
  color: var(--text-pending);
}

.ss-download__title {
  font-size: 17px;
  line-height: 25px;
  font-weight: var(--weight-medium);
  color: var(--ss-ink);
}

.ss-download__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  margin-top: auto;
}