/* Mobile layout corrections, shared by the staff, citizen and department shells.
 *
 * The pattern this file exists for: a header row written as
 * `display:flex; justify-content:space-between` with a title on the left and a
 * control on the right. On a desktop column that reads well. On a phone neither
 * side is allowed to wrap or shrink, so the title is squeezed into whatever the
 * control leaves it — a 44-character heading rendered into 54px, one word per
 * line. There were 27 such rows across the five stylesheets.
 *
 * The fix is deliberately `flex-wrap: wrap` rather than `flex-direction: column`:
 * a row that still fits (a short label and a number) keeps sitting on one line,
 * and only a row that genuinely cannot fit moves its control underneath. The
 * accompanying `min-width: 0` is what lets a long title shrink at all, since a
 * flex item defaults to min-width:auto and refuses to go below its longest word.
 */

@media (max-width: 640px) {

  .section-head,
  .list-card,
  .foot-head,
  .pop-head,
  .pop-fact,
  .pgroup-head,
  .pcard-top,
  .scn-head-top,
  .scn-mgroup-head,
  .mappop-head,
  .belief-top,
  .proposal-head,
  .cycle-summary,
  .ageing-row,
  .ward-modal-head,
  .dt-scn-scale,
  .work-top,
  .kpi-top,
  .row-split,
  .section-title,
  .driver-top,
  .case-top,
  .wi-grouprow > summary {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
  }

  .section-head > *,
  .list-card > *,
  .foot-head > *,
  .pop-head > *,
  .pgroup-head > *,
  .pcard-top > *,
  .scn-head-top > *,
  .scn-mgroup-head > *,
  .mappop-head > *,
  .belief-top > *,
  .proposal-head > *,
  .work-top > *,
  .kpi-top > *,
  .row-split > *,
  .section-title > *,
  .driver-top > *,
  .case-top > * {
    min-width: 0;
  }

  /* The title side of such a row should claim the full line and push its control
     onto the next one, rather than the two splitting a 390px screen between them. */
  .section-head > div:first-child,
  .work-top > div:first-child,
  .row-split > .main,
  .case-top > div:first-child {
    flex: 1 1 100%;
  }

  /* A callout is a bold lead-in plus an explanation. Side by side on a phone the
     lead-in collapsed to one word per line, so the two stack. */
  .notice {
    flex-direction: column;
    align-items: stretch;
    row-gap: 4px;
  }
  .notice b { white-space: normal; }

  /* Section headings on the map page carry a sub-line that was being squeezed
     against the "All actions" link beside it. */
  .section-head p,
  .work-head p { max-width: none; }

  .work-head {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .work-head > div:first-child { flex: 1 1 100%; min-width: 0; }
}

/* Narrow phones: a control that shared a line with a heading gets its own full
   width, so a button is tappable rather than shrunk to its text. */
@media (max-width: 420px) {
  .section-head > .text-link,
  .work-head > .btn,
  .work-top > .btn,
  .row-split > .side {
    flex: 1 1 100%;
  }
  .row-split > .side { justify-content: flex-start; }
}

/* ---- specific elements the sweep found squeezed on a phone ---------------- */

@media (max-width: 640px) {
  /* .ward-row was `1fr auto`: the four stat blocks on the right claimed their
     content width and left the ward name and councillor 97px, which wrapped a
     47-character line into five. The stats move under the name instead. */
  .ward-row { grid-template-columns: minmax(0, 1fr); }
  .ward-row .nums {
    flex-wrap: wrap;
    text-align: left;
    gap: 14px;
    padding-top: 2px;
  }

  /* Sample payloads and log excerpts: scroll the block, never the page. */
  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* A text input defaults to a ~20-character intrinsic width that ignores its
     container, so it was being clipped inside narrow cards. */
  input, select, textarea { max-width: 100%; min-width: 0; }

  /* Decorative blurred blobs are positioned beyond the hero's edge by design;
     they must not become scrollable width. */
  .ov-haze { overflow: hidden; }
}

@media (max-width: 480px) {
  /* Two columns of explanatory prose at ~160px each is one word per line. */
  .ov-loop-rail,
  .ov-relay-track,
  .ov-time,
  .ov-counters,
  .ov-scn-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* The register under the city map holds one row per monitoring point. Stacked
     into cards that is ~3,000px, which buries the briefing and the department
     panes beneath it. It stays a contained, scrollable list instead — the same
     role the 270px scroll box plays on a desktop, sized for a phone. */
  .mapshell-foot .table-wrap:has(table[data-stackable]) {
    overflow-y: auto !important;
    max-height: 62vh !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line, #e5ebef) !important;
    border-radius: 10px;
    padding: 6px;
    background: #fbfcfd !important;
  }
}