/* Stacked data tables for phones. Pairs with responsive_tables.js, which puts the
 * column name on each cell as data-label. Shared by the staff, citizen and
 * department shells, so every colour comes from a token with a light fallback —
 * the citizen shell redefines these for dark mode and the cards follow.
 */
@media (max-width: 640px) {
  /* The scroll wrapper is what used to hide the right-hand columns; with rows
     stacked there is nothing to scroll, so it stops clipping and stops drawing a
     frame around what are now individual cards. */
  .table-card:has(table[data-stackable]),
  .table-wrap:has(table[data-stackable]) {
    overflow: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  table[data-stackable] {
    /* The rows and cells below are blocks, but the table box itself still laid
       itself out as a table and took its width from its widest content, so a
       seven-column register stayed ~353px wide inside a 320px screen. */
    display: block;
    width: 100%;
    white-space: normal;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* The header is the source of every label, so it is hidden from sight but kept
     for screen readers rather than display:none'd away. */
  table[data-stackable] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  table[data-stackable] tbody,
  table[data-stackable] tr,
  table[data-stackable] td {
    display: block;
    width: auto;
  }

  table[data-stackable] tr {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e5ebef);
    border-radius: 11px;
    margin: 0 0 9px;
    padding: 3px 0;
    overflow: hidden;
  }

  table[data-stackable] tr:last-child { margin-bottom: 0; }

  table[data-stackable] td {
    /* Block, not flex. A cell is not always a single value: several hold a <b>
       plus a <small class="subcell"> of explanation, and as flex items those two
       sat side by side, which squeezed a 62-character title into a 45px column
       and pushed the row 478px wide. As blocks they stack the way the cell reads
       on a desktop, whatever a given template puts inside it. */
    display: block;
    border: 0;
    border-top: 1px solid var(--line, #eef1f3);
    padding: 9px 13px;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
  }

  table[data-stackable] td:first-child { border-top: 0; }

  table[data-stackable] td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-3, #8b989f);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 1.5;
  }

  /* Cells the script could not name (spanning rows, empty states) take the full
     width of the card instead of showing an empty label gutter. */
  table[data-stackable] td:not([data-label])::before { content: none; }
  table[data-stackable] tr[data-row-span] { padding: 0; }

  /* A cell holding only a pill or a button reads better left-aligned under its
     label than pushed hard against the edge. */
  table[data-stackable] td > form { margin: 4px 0 0; }

  /* .subcell is a second line of explanation under a value; it was capped at
     220px for a desktop column. */
  table[data-stackable] .subcell { max-width: none; }

  table[data-stackable] .table-note { display: block; }
}