/* ---------------------------------------------------------------------------
   mobile.css — phone fixes for the built pages.

   The problem this file solves, measured rather than guessed at: on a 390px
   screen several pages laid out panels 430–490px wide. Because an ancestor
   clips horizontal overflow, the page did not scroll — the right-hand slice of
   the workbench queue, the CRM triggers, the dashboard KPIs and the automation
   cards was simply unreachable. The "Decide" button on /workbench was cut in
   half with no way to get to it.

   The cause is almost always the same two things:

     1. A grid or flex item defaults to `min-width: auto`, so it refuses to
        shrink below its content's minimum width. A one-column grid does not
        help if the item inside it will not shrink.
     2. A label with `white-space: nowrap` (a pill, a provenance chip, a button)
        sets that minimum width high enough to push the whole panel over.

   So this file does two general things and a handful of specific ones. It is
   loaded last, so it wins ties without needing !important.

   NOTE: the Astro sources for these pages are not in this repository — it holds
   the built output. If the site is rebuilt from source, port these rules into
   the components rather than re-patching the build.
--------------------------------------------------------------------------- */

@media (max-width: 760px) {

  /* 1 ----------------------------------------------------------------------
     Let laid-out boxes shrink. This is the fix for the clipped panels: a grid
     or flex child with min-width:auto cannot go below its content width, and
     the overflow is then hidden by an ancestor rather than scrolled to.
     Scoped to page content; it only ever permits shrinking. */
  main, main *, header .head-in, header .head-in *, footer, footer * { min-width: 0; }

  /* Long unbroken strings (loan numbers, emails, hashes) break instead of
     forcing a box wider than the screen. */
  body { overflow-wrap: break-word; }

  /* 2 ----------------------------------------------------------------------
     Rows built for a desktop width wrap instead of overflowing. These are all
     flex rows that pair a title with controls, or a body with an action. */
  .panel-head, .panel-h, .panel-foot,
  .filters, .item, .item-head, .item-act, .item-body,
  .t-head, .task-head, .m-l, .m-srcs, .block-h, .sec-head,
  .role-switch, .restart, .ctrl, .chips,
  .kpi, .kpi-row, .lane-h, .card-h, .row-h, .head-row,
  .acts, .cta-row, .btn-row {
    flex-wrap: wrap;
  }

  /* 3 ----------------------------------------------------------------------
     Labels that were told never to wrap. On a phone a 200px pill on one line
     is what pushes a 354px panel to 430px. */
  .pill, .prov, .chip, .tag, .badge, .rs, .sp, .cap-h, .btn, .b-tag, .lbl {
    white-space: normal;
  }

  /* Buttons keep their shape while wrapping. */
  .btn { height: auto; min-height: 38px; padding-block: 10px; text-align: center; }

  /* 4 ----------------------------------------------------------------------
     Layouts that must go to one column. Anything with a fixed or minmax()
     second column will not collapse on its own.

     Rows whose columns are already narrow enough to fit — the dashboard
     funnel is `10px 108px 1fr 34px 48px`, about 250px — are deliberately NOT
     in this list. Collapsing those made them worse, not better: the count and
     the amount ended up on their own lines, far from the bar they describe. */
  .wb-grid, .dash-grid, .dash-main, .dash-side, .two-col, .cols2, .grid2,
  .grid3, .split, .letterwrap, .csec-grid, .card-grid, .panel-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Four KPI tiles across is unreadable on a phone; two is fine. */
  .kpis, .kpi-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* 5 ----------------------------------------------------------------------
     Things that are legitimately wide get to scroll rather than be clipped:
     the kanban board, the demo control strip, any table not already wrapped. */
  .board, .kanban, .track, .timeline-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 6 ----------------------------------------------------------------------
     Tap targets. The site nav links were 27px tall; 44px is the size a thumb
     actually hits. Only padding changes, so nothing moves on desktop. */
  .nav a, .foot a, .foot-in a, nav a {
    padding-block: 9px;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .nav { flex-wrap: wrap; row-gap: 2px; }
}

/* On the narrowest phones the two-up rows inside cards stack as well. */
@media (max-width: 460px) {
  .item-act { width: 100%; }
  .item-act .btn { width: 100%; }
  .filters { width: 100%; }
  .kpis, .kpi-grid, .stat-grid { grid-template-columns: minmax(0, 1fr) !important; }
}