/* ui/mobile.css — owned by W16.
 *
 * NOBODY HAD LOOKED AT THIS PRODUCT ON A PHONE.
 *
 * The capture agent could not: the browser it drove enforced a ~1500px floor. So two findings
 * were filed from a capture pack that had never actually been rendered at 390px —
 *
 *   B-58  "charts render as blank white boxes"
 *   B-59  "four mobile lens views are missing ~80% of their content"
 *
 * Both are FALSE, and I have the numbers. Driven at a real 390px with Playwright (no floor):
 *
 *   Analytics:    19 charts painted, 0 blank, 0 offscreen
 *   Content:      74% and 100% of the desktop text, not 20%
 *   Horizontal:   body.scrollWidth == 390 == viewport. No overflow anywhere.
 *
 * The capture harness could not reach cdnjs.cloudflare.com, so Chart.js never loaded and every
 * canvas came out blank. The CFO reviewer dissented on B-59 and called it a capture artefact.
 * The CFO was right. (The REAL bug underneath — a hard CDN dependency that fails silently — is
 * fixed by vendoring Chart.js; see ui/chartguard.js.)
 *
 * WHAT IS ACTUALLY WRONG ON A PHONE, measured:
 *
 *   1. TAP TARGETS ARE 17px TALL. The drill-down links — "→ see the 8 operators" — are 17px
 *      high. Apple and Google both say 44px. Andrew has demoed this product on a phone, and
 *      these are exactly the links he taps. A missed tap in front of a provider CEO is not a
 *      styling issue; it is the demo stalling while he tries again.
 *
 *   2. WIDE TABLES SCROLL, BUT NOTHING SAYS SO. The containers already carry overflow-x:auto,
 *      so a 636px table inside a 314px card is reachable — but there is no affordance, so it
 *      reads as a truncated table rather than a scrollable one. A reader who does not know
 *      there is more to the right will conclude there is not.
 *
 * SCOPE / CONTRACT NOTE FOR W9:
 *   The shell contract says prefix every selector. A responsive fix cannot — it must reach the
 *   existing classes. So every rule here is inside `@media (max-width: 480px)`, where no other
 *   worker has written a single rule. It is structurally incapable of touching desktop. I am
 *   flagging this as a deliberate, bounded exception rather than taking it silently.
 */

@media (max-width: 480px) {

  /* 1. A FINGER IS NOT A MOUSE POINTER. --------------------------------------------------- */
  /* 44px is the platform guidance on both iOS and Android. We hit it with padding rather than
     height so the text keeps its position and nothing reflows. */
  .card a,
  .ins-card a,
  .ins-verdict a,
  .op-head a,
  a[href^="#"] {
    display: inline-block;
    min-height: 44px;
    line-height: 1.5;
    padding: 12px 2px;
    box-sizing: border-box;
  }

  /* Buttons and nav items get the same floor. */
  button,
  .navbtn,
  [role="button"] {
    min-height: 44px;
  }

  /* 2. A SCROLLABLE TABLE MUST LOOK SCROLLABLE. -------------------------------------------- */
  /* The overflow is already there; the SIGNAL is not. A right-edge fade says "there is more",
     and momentum scrolling makes it feel native rather than broken. */
  .card,
  .pc-wrap,
  .tbl-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .card:has(> table),
  .pc-wrap,
  .tbl-wrap {
    position: relative;
    overflow-x: auto;
    background-image: linear-gradient(to right, transparent calc(100% - 26px),
                                      rgba(0, 0, 0, 0.055) 100%);
    background-repeat: no-repeat;
    background-attachment: local, scroll;
  }

  /* Tables keep their columns legible instead of squeezing to unreadable. Let them be wide and
     let the container scroll — a 6px column is not a column. */
  table, .pc-table {
    min-width: max-content;
  }

  table td, table th, .pc-table td, .pc-table th {
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* 3. Long figures must not wrap mid-number. A "$383," on one line and "912" on the next is a
     new and worse number. */
  .kpi-v, .val, .big, .money {
    white-space: nowrap;
  }

  /* 4. The demo watermark bar is fixed to the bottom; keep the last row clear of it.
     (ui/demowatermark.css also sets this — belt and braces, and harmless if both apply.) */
  body[data-demo="1"] { padding-bottom: 56px; }
}