/* A narrow window (a phone, a split screen): the list pages keep their main column and drop the rest; the
   capture page has its own note instead (needs-wide). Loaded last, so these rules win over each page's own. */
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  .page { overflow-wrap: anywhere; }
  .tiles, .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-step { flex-wrap: wrap; }
  .guide-act { flex-basis: 100%; padding-left: 34px; }
  .rcol { display: none; }
  /* The Workflows table keeps the workflow and its status. */
  .dt-h, .dt-r { grid-template-columns: minmax(0, 1fr) auto !important; }
  .dt-h > :nth-child(2), .dt-h > :nth-child(3), .dt-h > :nth-child(5),
  .dt-r > :nth-child(2), .dt-r > :nth-child(3), .dt-r > :nth-child(5) { display: none; }
  .row { flex-wrap: wrap; row-gap: 8px; }
  .row > .rmain { flex-basis: 100%; }
  .stack-st, .svc-part-st { width: auto; }
  .section-head { flex-wrap: wrap; }
  /* The workflow page needs its browser and activity side by side, so it shows its note instead. */
  .needs-room > :not(.narrow-note) { display: none !important; }
  .needs-room > .narrow-note { display: flex; flex: 1; align-items: center; justify-content: center; padding: 24px; }
}