/* =====================================================================
 * Reconciliation. NOT part of the supplied design kit.
 *
 * The kit was drawn against version 1.78 and its own guide says to expect
 * this: "start from that current source, copy approved visual assets and
 * styles, reconcile selectors, then test affected workflows." This file is
 * that reconciliation and nothing else. It loads after the three kit
 * layers so a future kit refresh can overwrite theirs without taking these
 * with it.
 *
 * Keep it small. Anything in here is a note that the kit and the current
 * application disagree about something, so it should be read as a list of
 * disagreements rather than as a place to put new design.
 * ===================================================================== */

/* THE LEADS PAGE SCROLLED SIDEWAYS ON A PHONE, by exactly 20 pixels.
 *
 * `.body` is a one-column grid at phone width, and a bare `1fr` track has an
 * AUTO minimum - it refuses to shrink below the widest thing inside it. The
 * queue card's header is a flex row of a title and three chips that do not
 * wrap ("0 late", "0 due", "0 later"), and the kit's roomier header padding
 * and gap pushed that row's minimum past the 360px the phone actually has.
 * The track grew to 395px inside a 390px window and the whole page moved.
 *
 * Two rules, because either alone only half fixes it: let the header wrap so
 * the content fits, and let the track shrink so no future wide child can
 * take the page sideways with it again.
 *
 * Measured with scripts/shot-overflow.mjs, which loads each page twice - as
 * shipped and with the design layers switched off - so the number before the
 * fix is a fact rather than a guess. Leads: 20px with, 0px without, 0px
 * after. Every other page was 0px both ways. */
@media (max-width: 640px) {
  .body { grid-template-columns: minmax(0, 1fr); }
  .card-hd, .hcard-hd { flex-wrap: wrap; }
}