/* ==========================================================================
   Table  (.pf-table)
   A small data table for a case study — the evidence a stat strip can't hold
   (more than four numbers) and a chart shouldn't fake (nominal rows with two
   or three measures each: an ideas-portal vote list, a research-session
   roster, an insight-scoring excerpt). Same bones as the chart's table twin,
   so the two read as one system: hairline row rules, small-caps column heads,
   tabular numerals in the number columns, and text in text tokens only (no
   pink anywhere — R5).

   Markup: <div class="pf-table__scroll" tabindex="0" role="group"
   aria-labelledby="…"> › <table class="pf-table"> › <caption
   class="pf-table__caption"> (what is tabulated — the figcaption carries the
   point) › <thead> with <th scope="col"> › <tbody> › optional <tfoot> row of
   .pf-table__note cells for a totals / context line.

   Sits in a figure as .pf-figure--table (v0.9.82: on the gray stage like a chart
   or a meter, the table itself held to the reading measure). Text columns wrap; number columns
   never do. Should a wide table still outgrow a phone column, it scrolls
   sideways inside __scroll (a focusable region, the global focus ring — R7)
   instead of crushing its columns. No JS.

   --cards (v0.9.84, opt-in): a text-heavy table (one long description column beside
   short nominal ones) does not scroll well or crush well on a narrow column: the
   description wraps to five or six lines while the short columns sit mostly empty
   (Louis, 2026-09-30, the insight table). Below 40rem of the scroll region's own width
   the rows become stacked cards: the first cell is the card's title (no label), every
   other cell a label / value pair whose label comes from `data-label` on the <td>
   (author it from the column head). A container query, not a viewport breakpoint, so
   it follows the box the table actually has. Because display:block on table parts drops
   the table semantics in some engines, a --cards table also carries explicit ARIA table
   roles in its markup (role=table / rowgroup / row / columnheader / cell), Roselli's
   pattern, so the reading order and the header association survive both layouts.
   ========================================================================== */

.pf-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  container-type: inline-size;              /* the --cards step reads this box's width (v0.9.84) */
}

.pf-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  line-height: var(--pf-lh-tight);
  color: var(--pf-ink);
}

/* What is tabulated (e.g. "Top add-in requests in the ideas portal, Oct 2025 to
   Sep 2026"). Small caps serif, secondary — a subtitle, not a heading; mirrors
   .pf-chart__title so a table and a chart on the same page match. */
.pf-table__caption {
  caption-side: top;
  padding: 0 0 var(--pf-space-2);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-ink-secondary);
}

.pf-table th,
.pf-table td {
  padding: var(--pf-space-1) var(--pf-space-2);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--pf-border) solid var(--pf-hairline);
  font-weight: var(--pf-weight-body);
}
.pf-table th {
  vertical-align: bottom;
  color: var(--pf-ink-secondary);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
}
/* No outer gutter: the first column aligns with the caption and figcaption, and a
   four-column table fits a phone column without scrolling. */
.pf-table th:first-child,
.pf-table td:first-child {
  padding-inline-start: 0;
}
.pf-table th:last-child,
.pf-table td:last-child {
  padding-inline-end: 0;
}

/* Number columns: right-aligned, tabular figures, never wrapped, and shrunk to
   their content (width: 1% is the table-layout idiom for "as narrow as the
   widest cell") so the text columns keep the room on a phone. */
.pf-table td.pf-table__num,
.pf-table th.pf-table__num {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Meta cells (v0.9.94, opt-in; v0.9.95 a typeface step): a short value beside a text column (an
   evidence count, a date) set in the DISPLAY face, condensed caps in ink, the same voice as the
   badges, so the serif description reads as the row's subject and the values as data, in the table
   and the cards alike. v0.9.94 only greyed them and Louis (2026-10-01) called it right: grey serif
   still reads as the same text. A nominal value (a status) is better as an outlined badge
   (.pf-badge.pf-badge--sm, square), which keeps it apart from a level pill beside it. */
.pf-table td.pf-table__meta {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-ink);
}

/* Phone column: halve the inter-column gutter so a four-column table gives its
   text column the room (the outer gutter is already zero). */
@media (max-width: 480px) {
  .pf-table th,
  .pf-table td {
    padding-inline: var(--pf-space-1);
  }
  .pf-table th:first-child,
  .pf-table td:first-child {
    padding-inline-start: 0;
  }
  .pf-table th:last-child,
  .pf-table td:last-child {
    padding-inline-end: 0;
  }
}

/* A totals / context line in <tfoot>: secondary ink, no rule under it (the
   figcaption follows). Give the cell colspan across every column. */
.pf-table .pf-table__note {
  padding-top: var(--pf-space-2);
  border-bottom: 0;
  color: var(--pf-ink-secondary);
  line-height: var(--pf-lh-body);
}

/* Card-only words (v0.9.90): a span inside a cell that shows ONLY in the card layout, so a value
   can name itself where the column head isn't on screen ("Emerging" → "Emerging insight", the
   pill "High" → "High confidence") while the table keeps its short cells under their heads. Hidden
   with display:none in the table, so a screen reader hears the head + short value there, and the
   full words in the cards. */
.pf-table__card-only {
  display: none;
}
/* Its complement (v0.9.93): shows only in the TABLE. Inside a flex container (a .pf-badge pill)
   a card-only suffix becomes a second flex item and picks up the container's gap ("HIGH  CONFIDENCE"),
   so a pill swaps whole words instead: <span class="pf-table__table-only">High</span><span
   class="pf-table__card-only">High confidence</span>, one visible run either way. */
.pf-table__table-only {
  display: inline;
}

/* --- Cards below 40rem of the scroll region (v0.9.84; v0.9.85 the inline meta row) --- */
@container (max-width: 40rem) {
  .pf-table--cards .pf-table__card-only {
    display: inline;
  }
  .pf-table--cards .pf-table__table-only {
    display: none;
  }
  .pf-table--cards,
  .pf-table--cards tbody,
  .pf-table--cards tfoot,
  .pf-table--cards caption {
    display: block;
  }
  /* The column heads stay in the accessibility tree (the roles keep them associated) but leave
     the layout: the labels are repeated in each card via data-label. */
  .pf-table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* A row is a card: the first cell (the description) is its title on a line of its own; the
     other cells sit on ONE meta row beneath it, each a tiny caps label beside its value, and
     wrap only when the box is too narrow for all of them. v0.9.84 stacked the fields as three
     label / value rows, which left dead space between them and stretched the badge across its
     grid cell (Louis, 2026-09-30). */
  .pf-table--cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pf-space-1) var(--pf-space-3);
    padding: var(--pf-space-2) 0;
    border-bottom: var(--pf-border) solid var(--pf-hairline);
  }
  .pf-table--cards tbody tr:last-child {
    border-bottom: 0;
  }
  .pf-table--cards td {
    display: inline-flex;
    align-items: baseline;
    gap: var(--pf-space-1);
    width: auto;
    padding: 0;
    border-bottom: 0;
  }
  .pf-table--cards td::before {
    content: attr(data-label);
    font-size: var(--pf-text-xs);
    color: var(--pf-ink-secondary);
    text-transform: uppercase;
    letter-spacing: var(--pf-tracking-caps);
  }
  .pf-table--cards td:first-child {
    display: block;
    flex: 1 0 100%;
    line-height: var(--pf-lh-body);
  }
  .pf-table--cards td:first-child::before {
    content: none;
  }
  /* Unlabelled meta (v0.9.90): a cell authored WITHOUT data-label drops the tiny caps label and
     reads by its own words (pair it with .pf-table__card-only), so the row becomes one line,
     "Emerging insight  [High confidence]  8 observations". Louis (2026-10-01): the caps labels
     beside the values never read well in the cards, at any size. v0.9.93: plain inline-block, not
     the labelled cell's inline-flex (whose gap split "Emerging" from its card-only " insight" into
     a double space), and no middot between cells: on a phone the card's text column is ~190px, the
     meta line always wraps, and a wrapped line opened on an orphan dot. The column gap and the
     pill's own edge separate the values. */
  .pf-table--cards td:not([data-label]) {
    display: inline-block;
  }
  .pf-table--cards td:not([data-label])::before {
    content: none;
  }
  /* Number cells lose the column behaviour (the 1% shrink width) but keep nowrap, so "18
     observations" stays on one line beside its label. */
  .pf-table--cards td.pf-table__num {
    width: auto;
    text-align: left;
    white-space: nowrap;
  }
  .pf-table--cards tfoot tr {
    display: block;
    padding-top: var(--pf-space-2);
  }
  .pf-table--cards tfoot td,
  .pf-table--cards .pf-table__note {
    display: block;
    width: auto;
  }
  .pf-table--cards .pf-table__note::before {
    content: none;
  }
}