also loses the
article's 16px paragraph margin, which would otherwise leave a gap inside the card.
Verified at 320/360/390 across all five pages with cards: 207 cards, 0 misaligned.
This goes upstream with the rest of this file. */
.legal-card-body { padding: 11px 14px; }
.legal-card-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--charcoal); }
.legal-card dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); font-size: 14px; line-height: 1.6; }
.legal-card dt { font-weight: 600; color: var(--dark-teal); padding: 10px 8px 10px 14px; border-top: 1px solid var(--legal-rule); }
.legal-card dd { color: var(--charcoal); padding: 10px 14px 10px 8px; border-top: 1px solid var(--legal-rule); }
.legal-card dl > dt:first-child, .legal-card dl > dt:first-child + dd { border-top: 0; }
@container doc (max-width: 579px) {
.legal-table-wrap { display: none; }
.legal-cards { display: block; margin: 20px 0 24px; }
}
/* 580px. THE HANDOVER SAYS 520, AND 520 IS WRONG -- corrected here with the measurement.
Handover section 4 derives its switch point from "the worst-case table's min-content width
measures 469px", giving "~50px of headroom". Measured on the built page, the strictly-
necessary cookie table's min-content is 566px, not 469. So 520 gave no headroom at all: it
gave a 46px sideways scroll across viewports 568-615, where the table rendered into a
container too narrow for it.
The INTENT behind the number is the thing to keep -- the table renders only when it actually
fits -- so 580 honours the intent and 520 does not. That is ~14px over the measured minimum,
and it closes the scroll window completely.
Not fixed by shrinking the type: only the bottom of the handover's own ranges PLUS tighter
padding (14px body / 12px head / 10px pad) gets min-content under 520, at 507px, and the
handover argues against exactly that trade -- "shrinking the type to make it fit is the wrong
trade on a page people read because they need it". It was right. Cards showing between a 566
and 580px container, where a table would only just fit, is the right side to err on.
If the table ever gains a column or the type changes, re-measure. Do not assume 580 still
holds any more than 469 did. */
/* BEFORE RE-LITIGATING 580 BECAUSE A CELL WRAPS ODDLY: check whether the table FITS first.
It happened once. The complaints timetable broke "1. Acknowledgement" across two lines and the
switch point was the obvious suspect. It was not involved. Measured: the table's min-content
was 394px in a 686px container -- it fit with 292px to SPARE. The first column was 163px while
the label needed 164px, because auto table layout hands the first column whatever the wider
columns leave. The table had room; the column was starved.
The fix was therefore on the table rule, not here: numbers are bound to the word they quantify
with a non-breaking space, in tools/legal-build.mjs. A cell wrapping badly is evidence about
COLUMN distribution far more often than about the switch point. Compare the table's min-content
to its container before touching anything in this block.
Fallback for browsers with no container-query support. The viewport widths here are DERIVED
from the layout rather than guessed: at desktop the article column is the container minus the
rail (232px), the grid gap (56px) and the page gutters (48px), so it reaches 580px at a 916px
viewport; below the 900px rail breakpoint the article is the viewport minus 48px of gutters,
so it reaches 580px at 628px. If either number changes this block changes with it -- which is
exactly why the container query is the primary mechanism and this is only the fallback. */
@supports not (container-type: inline-size) {
@media (max-width: 627px), (min-width: 900px) and (max-width: 915px) {
.legal-table-wrap { display: none; }
.legal-cards { display: block; margin: 20px 0 24px; }
}
}
/* ---------------------------------------------------------------------------------------------
NARROW -- handover section 3, "contents on mobile"
--------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
.legal-body { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 0 40px; }
/*