/* EKOM report surface — screen-only responsive overrides for /analysis/* and /one-pagers/*.
 *
 * WHAT IT FIXES. Every page under those two paths is a fixed-width sheet — `:root{--page-w:780px}`
 * consumed once as `.page{width:var(--page-w)}` — and none of them declares a single non-print
 * media query. Below 780px the sheet is wider than the viewport, so the page scrolls sideways.
 *
 * WHERE IT IS LOADED. There is no shared layout here: these pages were hand-authored over months
 * and span six distinct stylesheet families. This file is injected at the END of <head> by
 * functions/_middleware.js, the same seam that already injects /consent.js, so one file covers
 * every page including any added later.
 *
 * WHY NO !important. The injection lands after each page's own inline <style>, so these rules win
 * every tie on source order at identical selector text. !important would have made the override
 * unanswerable by a future page that legitimately needs to differ. If a rule here ever stops
 * taking effect, the cause is injection order, not specificity — check the middleware first.
 *
 * THE PRINT CONTRACT. Every rule in this file is inside `@media screen`. @media screen and
 * @media print are mutually exclusive contexts, so nothing here can reach a printed page,
 * wherever in the cascade it lands. That is what makes it safe to load AFTER the inline
 * `@media print` block that tools/guards/print-order.mjs exists to keep last. The invariant is
 * mechanical, so it is asserted: tools/guards/responsive-screen-only.mjs fails the build if any
 * declaration in this file sits outside an `@media screen` context.
 *
 * THE BREAKPOINTS ARE DERIVED, NOT CHOSEN. The designed content column is 780 - 128 = 652px.
 *   860px — where the sheet plus its shadow stops fitting: make the sheet fluid, nothing more.
 *           A 768px viewport gets 728px of content here, MORE than the design's 652px, so no
 *           multi-column layout needs to collapse yet.
 *   640px — where 652px of content genuinely no longer fits: collapse the column grids.
 */

@media screen and (max-width: 860px) {

  /* The sheet. --page-w is consumed only by .page; both are set so the fix holds if that changes. */
  :root { --page-w: 100%; }
  .page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 34px 24px;
    box-shadow: none;
    overflow-wrap: break-word;
  }
  .page:first-child { margin-top: 0; }

  /* The one fixed width ≥200px anywhere in the corpus. At 390px it alone overflows the sheet. */
  .contact-card { min-width: 0; display: block; }

  /* 21 of 25 analyses carry a table, up to six columns wide (dealer-group rooftop tables), and
     none is wrapped in a scroll container. display:block is what makes overflow-x apply to a
     table box; rows stay column-aligned inside the anonymous table box it creates. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Field names, SKUs and image filenames run to ~40 unbroken characters inside these spans.
     `anywhere` (not break-word) so they can also shrink the container's min-content width. */
  .mono, .find-ex, .find-fix, .pi-ex, .sku-list, .le-value, .action-value, .step-found, code {
    overflow-wrap: anywhere;
  }

  /* Prose max-widths were sized against the 652px column; below it they only fight the padding. */
  .btf-para, .btf-callout, .analyst-para, .phase-lead, .intro, .dek, .mast .dek, .masthead h1 {
    max-width: 100%;
  }

  /* licensed-merchandise pins its section heading open; at 390px that alone is wider than the page. */
  .sh h2 { white-space: normal; }

  /* A number gutter beside a paragraph reads as two crushed columns once the paragraph is narrow.
     Covers the 90px, 110px and 78px variants of the same rule. */
  .stat-callout { grid-template-columns: 1fr; gap: 12px; }
}

@media screen and (max-width: 640px) {

  .page { padding: 26px 16px; }

  /* The cover holds its footer down with min-height:660px. Below 640px that is a screen of air. */
  .cover { min-height: 0; }

  /* Two-column grids — one per stylesheet family, same shape. */
  .cover-meta, .poc-grid, .col-grid, .dataset-grid, .es-grid,
  .finds, .defect-grid, .xform, .attr-row {
    grid-template-columns: 1fr;
  }

  /* Four-column stat strips stay two-up: these hold short numbers, and one-up wastes a screen. */
  .glance-row, .meta, .frame, .stat-row { grid-template-columns: 1fr 1fr; }

  /* The receipt device — field / evidence / verdict — earns its meaning from being three columns
     read across, so it is narrowed rather than collapsed. Fixed outer tracks, minmax(0,1fr) in
     the middle so a long value shrinks the track instead of widening the grid. Covers the
     150/96, 170/100 and 104/108 variants and consumer-gifting's 140/90 row. */
  .field-check, .live-evidence-row {
    grid-template-columns: 88px minmax(0, 1fr) 66px;
  }

  /* Three steps side by side, as a grid with 24px gutter tracks on 16 pages and as flex on 4.
     Overriding display to flex-column collapses both forms with one rule; the gutter tracks and
     the arrow glyphs they hold have no meaning in a stacked list. */
  .step-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .step-arrow { display: none; }

  /* Label → value → verdict rows laid out as one flex line. They fit inside the designed 652px
     column and do not fit at 390px — resale-recommerce's widest .action-card-head wants 394px of
     content in a 316px box, and it was the last page still overflowing after everything above.
     flex-wrap is inert until the line genuinely cannot fit, so it changes nothing on the pages
     where it already did; min-width:0 is what lets a long field name shrink its own track instead
     of setting the row's floor. */
  .action-card-head, .pi-head, .col-flag-head, .btf-inner,
  .dataset-stat, .col-row, .op-header, .contact-line {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .action-card-head > *, .pi-head > *, .col-flag-head > *,
  .btf-inner > *, .op-header > *, .contact-line > * { min-width: 0; }
}
