/* phone.css — shared phone-width layout rules, linked from every page with
   the standard CiViX header. Each page still carries its own inline <style>
   (see "Design tokens are hand-copied per page" in CLAUDE.md); anything that
   has to look the same on every page at phone width lives here instead, so a
   fix lands everywhere at once rather than drifting page by page.

   Check changes with `npm run phone-check` (scripts/phone-check.js), which
   renders every page at iPhone SE / 16 / 16 Pro Max widths.

   The standard header (logo / mode switch / theme toggle) lives in
   topbar.css. */

@media (max-width: 560px) {
  /* Card headers (take-action.html, calendar.html): tags go on their own
     row above the text. Side by side, a card's tags (~170px for
     "IN COMMITTEE" + "FEDERAL", more with calendar's "REAL ELECTION DATE")
     never shrink, so the text got squeezed to one or two words per line on
     Take Action and pushed Calendar wider than the screen. */
  .card-top { flex-wrap: wrap; row-gap: 8px; }
  .card-top > .card-tags,
  .card-top > .tag { order: -1; justify-content: flex-start; flex-shrink: 1; }
  .card-top > .card-synopsis,
  .card-top > .card-title { flex-basis: 100%; }
  .card-tags { flex-wrap: wrap; }
  .focus-headline { flex-wrap: wrap; row-gap: 6px; }
  .focus-headline > .tag { order: -1; }
}