/* V9.6.1 changes the mobile projects viewport only. The inherited V9.5.1
   table width, rows, columns, typography and all non-mobile layout remain.

   WHAT WAS REMOVED HERE, AND WHY.
   V9.6.1 added `.tablewrap .hide-mobile { display: table-cell; }` inside this
   query, to put all eleven columns on the phone behind a horizontal swipe. It
   out-specifies the `.hide-mobile{display:none}` that v7.css has applied below
   769 px since V7, so the five columns v7 hides came back. Combined with the
   unconditional 1280 px table minimum in v9-3.css it drew the ACTIONS column —
   the MAP button — 763 px past the right edge of a 393 px viewport, with
   document.elementFromPoint() at the anchor's centre returning null. Measured
   2026-09-05; reported by the architect on a real iPhone as "the map button
   doesn't work just tested on mobile". This is not a regression from the
   deep-link work of the same night: v9.6.2 serves the identical rule, so the
   button has been unreachable on a phone since V9.6.1 shipped.

   The swipe it was reaching for was never an affordance a reader could find,
   and the five columns' facts are not lost by hiding them: the row already
   prints REPD ref, GlobalGrid ref and updated date in .project-meta, and
   county and operator in .mobile-extra, both of which v9-3.css shows only
   below 769 px precisely so this trade is even.

   overflow-x: auto stays. Nothing should need it now — the table is asserted
   to fit its wrapper at 393 px by tests/browser_map_reachability_v9_7.mjs —
   but a long site name must be able to scroll rather than be clipped away. */
@media (max-width: 768px) {
  .tablewrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }

  /* THE ACTIONS COLUMN IS PINNED TO THE RIGHT EDGE.

     Hiding five columns and lifting the 1280 px minimum brings the table from
     1280 px to 588 px, which still does not fit a 371 px wrapper: measured at
     393 x 852, SITE NAME 131, TECHNOLOGY 114, STATUS 96, CAPACITY 60, NEWS
     SIGNAL 107, ACTIONS 80. Five columns of real REPD content do not fit a
     phone, and shrinking type until they do makes the page unreadable to make
     one button reachable.

     So the button stops depending on the fit. The last column is stuck to the
     right edge of the scrolling wrapper, which makes MAP visible and hit-
     testable at every horizontal scroll position and for every row, whatever
     a site name's length does to the columns beside it. That is a stronger
     guarantee than "it happens to fit today": a longer name in a later REPD
     release cannot push it off again.

     The two rules below then narrow the widest cells so the pinned column
     covers as little as possible — the badge wraps instead of forcing its
     whole label onto one line, and the signal note gets the width it needs
     rather than the 100 px it inherited from a desktop layout. */
  .tablewrap th:last-child,
  .tablewrap td:last-child {
    background: var(--panel);
    border-left: 1px solid var(--soft);
    position: sticky;
    right: 0;
  }

  .tablewrap th:last-child {
    background: #050505;
    z-index: 6;
  }

  .tablewrap .badge {
    white-space: normal;
  }

  .tablewrap .signal-note {
    max-width: 76px;
  }
}

/* The MAP cell's own sentence. A title attribute cannot be reached on a phone,
   which reports hover: none, so the reason a record has no map point -- or no
   receiver -- is printed in the cell instead of hidden behind a hover. */
.project-actions .map-note {
  flex: 1 0 100%;
  margin: 4px 0 0;
  color: #aab4c0;
  font: normal 9px/1.5 'Courier New', monospace;
  text-transform: none;
  white-space: normal;
}

/* The pager. Twenty rows are shown; these move the window over the filtered
   set. Sized for a thumb: 44 px is the smallest reliable touch target, and the
   previous build's 37 x 21 controls were the reason paging was unusable on a
   phone. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 28px;
  padding: 10px 12px;
  border: 1px solid #1f3b47;
  border-radius: 8px;
  background: #0d1b22;
}
.pager-btn {
  min-height: 44px;
  min-width: 96px;
  padding: 10px 16px;
  border: 1px solid #2b6f7f;
  border-radius: 6px;
  background: #10262f;
  color: #66ccff;
  font: bold 12px/1 'Courier New', monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-btn:not(:disabled):hover { background: #17394a; }
.pager-meta {
  flex: 1 1 auto;
  text-align: center;
  color: #aab4c0;
  font: normal 11px/1.5 'Courier New', monospace;
}
@media (max-width: 768px) {
  .pager-meta { order: -1; flex-basis: 100%; }
}

/* THE SEVEN COLUMNS COME BACK ON A PHONE.
   v7.css hides every .hide-mobile cell below 768 px. V9.6.1 overrode that with
   `.tablewrap .hide-mobile { display: table-cell; }`, and 202609051100 removed
   the override again - leaving only the COMMENT describing it above. Measured
   on the live parent at 393 px: COUNTY, OPERATOR, REPD REF, GLOBALGRID REF and
   REPD UPDATED all computed display:none, and pipelinenews_intelligence/
   202608312339 shows thirteen columns on the same viewport. The architect
   asked for them back. They scroll sideways inside .tablewrap, which already
   carries overflow-x:auto and touch scrolling; the page itself never widens. */
@media (max-width: 768px) {
  .tablewrap .hide-mobile,
  .tablewrap th.hide-mobile,
  .tablewrap td.hide-mobile { display: table-cell; }
  .tablewrap table { min-width: 1180px; }
}