/* mobile.css — 2026-05-19
 *
 * Mobile / tablet pass for MudUp.app. Chris's call: "make the website
 * mobile friendly". Mud engineers in the field run on phones and
 * tablets, so the rig-side workflows (DMR data entry, inventory,
 * volume) need to be usable on a narrow screen.
 *
 * Strategy: keep desktop CSS untouched; layer in `@media` overrides
 * at two breakpoints:
 *   • ≤ 1024px — tablet: cost sidebar stacks under main, nav-rail
 *                shrinks but stays
 *   • ≤ 768px  — phone: nav-rail collapses into a hamburger drawer,
 *                grids collapse to 1 col, header buttons shrink,
 *                touch targets bump to ≥ 44px
 *
 * No JS framework needed — the drawer is a checkbox + label
 * trick (CSS-only, accessible) wired up in layout.html.
 */

/* ─────────────────────────────────────────────────────────────────────
 * GLOBAL — apply at every viewport
 * 2026-05-19 b13 — Chris: "we shouldn't have to horizontal scroll for
 * anything on this app globally. input boxes/containers are way too
 * wide (globally)." Belt-and-suspenders:
 *   - body never gets a horizontal scroll
 *   - any .mu-card or .dmr-tab-pane that would push wider than its
 *     container hard-clips
 *   - inputs default to max-width: 100% of their cell
 *   - intentional horizontal scroll opts in via .dmr-table-scroll
 *     (used only by the mud-check table)
 * ───────────────────────────────────────────────────────────────────── */
/* 2026-05-19 (7m, Agent C iOS audit #5): `overflow-x: hidden` on
   html/body breaks `position: sticky` for descendants on iOS Safari
   (engineer reports tabstrip + mud-table thead scrolling away).
   Use `overflow-x: clip` instead — same horizontal-scroll prevention
   but preserves sticky in the scroll container chain. Same change
   on page wrappers. */
html, body { overflow-x: clip; max-width: 100vw; }
.dmr-tab-pane, .mu-card, .page-d1, .se-page, .dr-page, .tools-page {
  max-width: 100%;
  overflow-x: clip;
}
.input, input.input, select.input, textarea.input,
.dmr-cell-input {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Tables: scroll horizontally WHEN NEEDED (auto) so a wide fixed-layout
   table is never clipped — a table that fits shows no scrollbar. Previously
   defaulted to overflow-x: hidden, which silently cut off the rightmost
   columns (e.g. the wells-list Open/Delete actions) on narrow laptops.
   max-width:100% keeps the scroll inside the wrap, never the page. */
.table-wrap, .table-wrap-stand {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.table-wrap.is-scrollable, .dmr-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Make every <td> input fill its cell so the cell width controls
   the input width — kills the "input wider than container" leak. */
table.mu-table input.dmr-cell-input,
table.mu-table select.dmr-cell-input,
table.mu-table textarea.dmr-cell-input { width: 100%; min-width: 0; }

/* ─────────────────────────────────────────────────────────────────────
 * Drawer toggle (hidden on desktop; revealed on mobile)
 * ───────────────────────────────────────────────────────────────────── */
.nav-toggle-checkbox { display: none; }
.nav-toggle-btn {
  display: none;                /* shown by mobile @media */
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--text-1);
  margin-left: -4px;
}
.nav-toggle-btn svg { display: block; }

/* ─────────────────────────────────────────────────────────────────────
 * TABLET — ≤ 1024px
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Page container loses its 24px → 16px to recover horizontal room. */
  .page-d1 { padding: 16px; }

  /* DMR body: the cost sidebar (260px column) stacks BELOW the main
     content so the well/inventory/mud tables get the full viewport
     width. The body is `display: flex` (row); switch to column to
     stack. */
  .dmr-body {
    flex-direction: column !important;
  }
  .dmr-sidebar {
    width: auto !important;
    max-width: none;
    border-left: none !important;
    border-top: 1px solid var(--border-default);
  }

  /* DMR header gets cramped at 1024 — let buttons wrap to a 2nd row. */
  .dmr-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .dmr-header-right { flex-wrap: wrap; row-gap: 6px; }

  /* Existing dmr-grid-2 already collapses at 1100; reinforce it here so
     1024-px-wide tablets always get a single column. */
  .dmr-grid-2 { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────────
 * PHONE — ≤ 768px
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Hamburger drawer ─────────────────────────────────────────── */
  .nav-toggle-btn { display: inline-flex; align-items: center; }

  /* Hide the nav-rail by default; slide it in when the checkbox is
     checked. The label (the hamburger button) toggles the checkbox.
     `aria-expanded` stays in sync via JS in layout.html. */
  .nav-rail {
    position: fixed;
    top: 56px;                  /* below the appbar */
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
  }
  .nav-toggle-checkbox:checked ~ .appshell-body .nav-rail,
  .nav-rail.is-open {
    transform: translateX(0);
  }

  /* Translucent backdrop when drawer is open. */
  .nav-rail-backdrop {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 99;
  }
  .nav-toggle-checkbox:checked ~ .appshell-body .nav-rail-backdrop,
  .nav-rail-backdrop.is-open {
    display: block;
  }

  /* Nav links bump to 44px touch target. */
  .nav-link {
    height: 44px;
    font-size: 14px;
  }

  /* ── App bar ───────────────────────────────────────────────────── */
  .appbar-d1 {
    padding: 0 10px;
    gap: 8px;
  }
  /* Hide the user email on phones — it's long, leave the avatar icon. */
  .appbar-user .mono { display: none; }
  .appbar-user { padding: 0 4px; }
  /* Sign-out button: shrink label to icon only via display: none on
     trailing text would require markup change; keep button but cap
     height and let it shrink. */
  .appbar-right .btn { padding: 4px 8px; font-size: 11px; }

  /* ── Page padding ──────────────────────────────────────────────── */
  .page-d1 { padding: 12px; }
  /* 2026-05-19 b11 — Chris (wells list, screen 1): "three buttons up
     top should be on same row/in-line." Keep the H1 + action buttons
     side-by-side instead of stacking; shrink the buttons so they
     fit even with three across at iPhone width. The min-width: 0
     on the title block lets it ellipsis-truncate rather than
     pushing the row wider than the viewport. */
  .page-d1-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .page-d1-header > div:first-child {
    flex: 1 1 0; min-width: 0;
  }
  .page-d1-header h1 { font-size: 18px !important; }
  .page-d1-header .page-d1-actions {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .page-d1-header .page-d1-actions .btn {
    padding: 6px 8px; font-size: 11px; white-space: nowrap;
  }
  .page-d1-header .page-d1-actions .btn svg { width: 12px; height: 12px; }

  /* 2026-05-19 b15 — Chrome-MCP iPhone render showed wells/list H1
     truncating to "W..." because the 3 action buttons consume all
     header width. At ≤480px force the title block onto its own
     row by giving it flex-basis: 100%; actions wrap to a new row
     and can stay inline as a single button strip beneath. */
  @media (max-width: 480px) {
    .page-d1-header > div:first-child {
      flex: 1 1 100% !important;
      min-width: 0;
    }
    .page-d1-header .page-d1-actions {
      flex: 1 1 100%;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
    }
    /* 2026-06-06 (Chris) — declutter the wells toolbar. The view tabs get
       their own full-width row (a proper segmented control), then the
       action buttons share an even row below instead of wrapping ragged
       (toggle + 1 button on row 1, three buttons on row 2). */
    .page-d1-header .page-d1-actions .view-toggle {
      flex: 1 1 100%;
      display: flex;
      width: 100%;
    }
    .page-d1-header .page-d1-actions .view-toggle > a {
      flex: 1 1 0;
      text-align: center;
    }
    /* Each action (the New-report / Log-transfer / Actions <details> and the
       New-well <form>) grows to fill the row evenly → a tidy 2-up grid. */
    .page-d1-header .page-d1-actions > .dropdown-new-report,
    .page-d1-header .page-d1-actions > .dmr-actions-menu,
    .page-d1-header .page-d1-actions > form {
      flex: 1 1 40%;
      margin-left: 0 !important;
    }
    .page-d1-header .page-d1-actions > .dropdown-new-report > summary,
    .page-d1-header .page-d1-actions > .dmr-actions-menu > summary,
    .page-d1-header .page-d1-actions > form > .btn {
      width: 100%;
      justify-content: center;
    }
  }
  /* 2026-05-19 b11 — Chris: "Wells, dmrs, builds, should be squares
     all on same row/line - no need for them to be soo wide." */
  .kpi-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  /* 2026-05-19 (7l): drop aspect-ratio:1/1 — the squares wasted
     ~55 px of vertical space per tile (118×118 px squares for ~65 px
     of content). Keep the 3-up row + center alignment but let height
     follow content. Chris's iPhone screenshot showed the WELLS/DMRS/
     BUILDS strip dominating the above-the-fold area on /wells. */
  .kpi {
    padding: 10px 8px !important;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center;
  }
  .kpi-label { font-size: 10px !important; }
  .kpi-value { font-size: 22px !important; line-height: 1.1; margin: 2px 0; }
  .kpi-delta { font-size: 9px !important; }

  /* ── DMR shell ────────────────────────────────────────────────── */
  .dmr-page { padding: 8px; }
  .dmr-header {
    flex-direction: column;
    align-items: stretch;
  }
  .dmr-header-left,
  .dmr-header-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dmr-titlebar { flex-wrap: wrap; row-gap: 4px; }
  .dmr-titlebar h1 { font-size: 18px !important; }
  .dmr-header-divider { display: none; }

  /* 2026-05-19 b15 — Chrome-MCP iPhone render: DMR header consumes
     ~400px of every tab's vertical space. Breadcrumb duplicates the
     H1 + well-name rows that follow; hide on mobile. Header-right
     button row gets tighter padding so Saved/Save now/PDF/pill/Submit
     fit on fewer rows. */
  .dmr-breadcrumb { display: none !important; }
  .dmr-header { padding: 8px 0 !important; gap: 4px !important; }
  .dmr-titlebar { gap: 0 !important; margin-top: 0 !important; }
  .dmr-titlebar h1 { font-size: 17px !important; line-height: 1.2 !important; }
  .dmr-report-no { font-size: 14px !important; }
  .dmr-titlebar-well .mono { font-size: 12px !important; }
  .dmr-titlebar-date { gap: 6px !important; font-size: 11px !important; }
  .dmr-header-right { gap: 4px !important; padding-top: 4px; }
  .dmr-header-right .btn { padding: 4px 8px !important; font-size: 11px !important; }
  .dmr-header-right .btn svg { width: 12px !important; height: 12px !important; }
  .dmr-header-right #dmr-saved { font-size: 10px !important; }
  .dmr-header-right .pill { padding: 2px 6px; font-size: 9px; }

  /* 2026-05-19 b11 — Chris: "tab selection is not displaying
     correctly, half of it is cut off. perhaps a menu button (top
     left corner?)" On phones the horizontal-scroll tabstrip was
     unusable. Hide it entirely below 768px and show the native
     <select> tab picker instead — all 9 tabs reachable in a single
     tap, no horizontal scroll required. */
  .dmr-tabstrip { display: none !important; }
  .dmr-mobile-tabpicker {
    display: flex !important;
    flex-direction: column; gap: 4px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-surface);
  }
  .dmr-mobile-tab-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text-1);
  }

  /* Tab pane padding. */
  .dmr-tab-pane { padding: 10px 6px; }

  /* All `.dmr-grid-2` and `.dmr-grid-3` collapse to single column. */
  .dmr-grid-2,
  .dmr-grid-3 { grid-template-columns: 1fr !important; gap: 12px; }

  /* ─────────────────────────────────────────────────────────────────
   * 2026-05-19 b14 (autonomous iPhone audit) — Global mobile rules
   * generated from the parallel Reviewer + Auditor agent findings.
   * Knock out 30+ specific issues at once instead of touching each
   * file individually.
   * ─────────────────────────────────────────────────────────────── */

  /* G1. Collapse EVERY inline multi-column grid to one column on
     mobile. Opt-out via data-keep-grid="true" on the element. Hits
     the 23 inline grids the Auditor agent found (pump card spec,
     concentration 3-up, mud 3-up status, volume 4-up summary,
     supplier-extract 4-up KPIs, well-geometry 3-up specs, etc.). */
  [style*="grid-template-columns: repeat(3"]:not([data-keep-grid]),
  [style*="grid-template-columns: repeat(4"]:not([data-keep-grid]),
  [style*="grid-template-columns: repeat(5"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 1fr"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 70px"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 80px"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 100px"]:not([data-keep-grid]),
  [style*="grid-template-columns: 280px"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 380px"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 320px"]:not([data-keep-grid]),
  [style*="grid-template-columns: minmax(280px"]:not([data-keep-grid]) {
    /* 2026-05-19 (7l — Agent B finding #3): Volume tab's inner grid
       `1fr 70px 70px 56px` and pump-card spec strips `1fr 1fr 1fr`
       weren't in the catch list; collapse them to 1-col on phone. */
    grid-template-columns: 1fr !important;
  }

  /* G2. Neutralise any inline `min-width: NNNpx` declaration that's
     wider than the iPhone-small viewport. The Auditor agent found
     these on mud-interval selects (220px ×3), the load-overview
     min-width:320px wrapper, dropdown panels, etc.
     2026-05-19 (7n): added the 200px variant + the NO-SPACE forms
     (`min-width:220px`) — Agent pass 4 found `_tab_inventory.html:426`
     used `min-width:220px` with no space, which escaped the
     space-requiring substring match and let the Add-product select
     overflow + clip its Add button under `overflow-x: clip`. */
  [style*="min-width: 200px"],
  [style*="min-width: 220px"],
  [style*="min-width: 240px"],
  [style*="min-width: 250px"],
  [style*="min-width: 280px"],
  [style*="min-width: 300px"],
  [style*="min-width: 320px"],
  [style*="min-width: 360px"],
  [style*="min-width: 380px"],
  [style*="min-width: 400px"],
  [style*="min-width:200px"],
  [style*="min-width:220px"],
  [style*="min-width:240px"],
  [style*="min-width:250px"],
  [style*="min-width:280px"],
  [style*="min-width:300px"],
  [style*="min-width:320px"] {
    min-width: 0 !important;
  }

  /* G2b. Belt-and-suspenders: any select / input inside a flex form
     in a DMR tab pane must be allowed to shrink so it never bursts
     the form past the viewport (clipping sibling Add/Save buttons). */
  .dmr-tab-pane form select,
  .dmr-tab-pane form input.input {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* G3. Cap any inline `width: NNNpx` fixed declaration that would
     overflow at iPhone width. Date / time / number inputs sized in
     pixels at desktop become full-width on phone. */
  input[style*="width: 130px"],
  input[style*="width: 170px"],
  input[style*="width: 200px"],
  input[style*="width: 220px"],
  select[style*="width: 200px"],
  select[style*="width: 220px"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* G4. Action button rows that pack 3+ buttons inline get flex-wrap.
     Mostly already handled, but make explicit for any new ones. */
  [class*="actions"], [class*="-actions"] { flex-wrap: wrap !important; }

  /* G5. Reviewer agent: some templates have their own
     @media (max-width: 700px) blocks. Apply common rules at 768px
     too so the 700-768 range isn't a dead zone. (Old per-template
     rules still run BEFORE these globals due to mobile.css order.) */

  /* G6-G8 — verifier-agent gap-closers. Extends G2 + G3 to the
     additional widths the audit caught + adds the minmax-responsive
     pattern. */

  /* G6. Flex form labels with smaller min-width floors (140-180px). */
  [style*="min-width: 140px"],
  [style*="min-width: 150px"],
  [style*="min-width: 160px"],
  [style*="min-width: 180px"],
  [style*="min-width: 200px"] {
    min-width: 0 !important;
  }

  /* G7. Input widths 240-300px (between G3 cap and where they'd
     consume too much viewport). */
  input[style*="width: 240px"],
  input[style*="width: 260px"],
  input[style*="width: 280px"],
  input[style*="width: 300px"],
  select[style*="width: 240px"],
  select[style*="width: 260px"],
  select[style*="width: 280px"],
  select[style*="width: 300px"] {
    width: 100% !important;
  }

  /* G8. Minmax grids with mid-breakpoint floors (220-300px). The
     batch-7d schematic grid uses `minmax(0, 3fr) minmax(220px, 1fr)`
     intentionally — at iPhone width that 220px floor on the right
     column forces the schematic column down to ~170px and breaks
     the layout. Collapse to 1fr; the sidebar drops below the SVG. */
  [style*="minmax(220px"]:not([data-keep-grid]),
  [style*="minmax(240px"]:not([data-keep-grid]),
  [style*="minmax(280px"]:not([data-keep-grid]),
  [style*="minmax(300px"]:not([data-keep-grid]) {
    grid-template-columns: 1fr !important;
  }

  /* Field rows: stack label above input on narrow. */
  .dmr-field-row {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }
  .dmr-field-row label {
    font-size: 11px;
    color: var(--text-3);
  }

  /* mu-card paddings shrink. */
  .mu-card-header { padding: 8px 10px; font-size: 13px; }
  .mu-card-body { padding: 10px; }

  /* 2026-05-19 b13 — Chris: "current activity (green background) still
     way too long vertically." Compress aggressively on mobile:
     - 3-col grid collapses to single row
     - Drop the middle narrative section (it's mostly a link to Remarks
       and the activity text already appears in the left panel)
     - Compact padding + smaller fonts
     - KPI grid becomes 4-col so MD/TVD/ROP/Inc sit on one row */
  .dmr-current-activity-grid {
    grid-template-columns: 1fr !important;
  }
  /* 2026-05-19 (7q — Chris's iPhone design review #3): "current
     activity (green background) still way too long vertically." The
     b13 pass collapsed the grid + hid the middle narrative + made the
     KPI strip 4-up, but the LEFT panel still carried 14px×18px padding
     + a 6px gap + a 15px activity line + a helper line, and the KPI
     strip kept 8px padding + an 8px row-gap — together ~half the card
     height was vertical whitespace. Compress aggressively: tighter
     padding, smaller gaps, drop the per-report helper line, single
     compact KPI row. Target ≈ half the prior height at 390px. */
  .dmr-current-activity-grid > div {
    padding: 8px 12px !important;
    gap: 2px !important;
  }
  .dmr-current-activity-grid > div > div[style*="font-size: 18px"] {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }
  /* Left panel's "Report N · X hrs drilling" helper line — drop it on
     phone; report number is already in the DMR header and drilling
     hours live on the Remarks tab. Saves a full text row. */
  .dmr-current-activity-grid > div:first-child > .t-helper {
    display: none !important;
  }
  .dmr-current-activity-grid > div:nth-child(2) {
    /* Middle narrative section — hide on phone, content lives in left + Remarks. */
    display: none !important;
  }
  .dmr-current-activity-grid > div:last-child {
    /* KPI strip: tight single row of four (MD/TVD/ROP/Inclination)
       with minimal padding so the strip is one compact band. */
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 6px 12px !important;
  }
  .dmr-current-activity-grid > div:last-child .t-label { font-size: 9px !important; }
  .dmr-current-activity-grid > div:last-child .mono {
    font-size: 13px !important;
    line-height: 1.1 !important;
  }
  /* Shrink the trailing unit tags (ft / ft/hr / °) so each KPI value
     stays on one line in its narrow quarter-column. */
  .dmr-current-activity-grid > div:last-child .mono span { font-size: 9px !important; }

  /* 2026-05-19 b13 — Chris: "equipment cards have content that stretches
     vertically and can't be seen, make everything go vertically."
     The pump card uses inline `grid-template-columns: 1fr 1fr 1fr 1fr`
     (and others) for spec strips; on phone those tiny columns clip
     values. Force every grid inside an equipment card to 1-column so
     each field is full-width and readable, top to bottom. */
  [data-pump-card] { grid-template-columns: 1fr !important; }
  [data-pump-card][style*="grid-template-columns"],
  .mu-card[data-pump-card],
  .mu-card .mu-card-body[style*="grid-template-columns"],
  .mu-card > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* The 2-up equipment-units grid → 1-up on phone. */
  .dmr-tab-pane[data-dmr-tab="pump"] > div[style*="grid-template-columns: minmax"],
  .dmr-tab-pane[data-dmr-tab="pump"] div[style*="minmax(0, 1fr) minmax(0, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 2026-05-19 b11 — Chris: "input areas across the page stretch
     way too far out of view horizontally." Cap every input + select
     + textarea at the parent's width so they can't push their
     container past the viewport. The min-width: 0 prevents inputs
     inside flex children from refusing to shrink. */
  .input, input.input, select.input, textarea.input,
  .dmr-cell-input, .dmr-tab-pane input, .dmr-tab-pane select, .dmr-tab-pane textarea {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .dmr-tab-pane > *, .mu-card > *, .mu-card-body > * { max-width: 100%; }

  /* 2026-05-19 (7q — Chris's iPhone design review #2): "input
     boxes/containers are way too wide (globally)." On phone the
     .dmr-field-row stacks label-above-input (rule above) and the
     input then fills the full single-column width via dmr.css's
     `.dmr-field-row input.input { width: 100% }` — so a 4-digit depth
     or a pH value sits in an input that spans the whole screen, mostly
     empty. Cap numeric / short / date / time inputs to a sensible
     left-aligned width so they read as small fields, not full-bleed
     bars. Free-standing selects get the same treatment.

     Scope: free-standing form inputs inside `.dmr-tab-pane`,
     `.page-d1`, and well-setup field rows. EXCLUDES `.dmr-mud-table`
     cell inputs (those are dense in-table fields tuned separately) and
     keeps the iOS no-zoom 16px font + 44px tap target from the touch-
     target block below. `text-align: left` overrides the right-align
     dmr.css applies to `.input.num`. */
  .dmr-tab-pane :not(.dmr-mud-table) input[type="number"],
  .dmr-tab-pane :not(.dmr-mud-table) input.num,
  .dmr-tab-pane :not(.dmr-mud-table) input[type="date"],
  .dmr-tab-pane :not(.dmr-mud-table) input[type="time"],
  .dmr-tab-pane :not(.dmr-mud-table) input[type="datetime-local"],
  .page-d1 input[type="number"],
  .page-d1 input.num,
  .page-d1 input[type="date"],
  .page-d1 input[type="time"],
  .page-d1 input[type="datetime-local"],
  .dmr-field-row input[type="number"],
  .dmr-field-row input.num,
  .dmr-field-row input[type="date"],
  .dmr-field-row input[type="time"] {
    max-width: 180px !important;
    width: 100%;
    text-align: left;
  }
  /* Date / time pickers need a touch more room for the native iOS
     spinner controls than a bare number field. */
  .dmr-tab-pane :not(.dmr-mud-table) input[type="date"],
  .dmr-tab-pane :not(.dmr-mud-table) input[type="time"],
  .dmr-tab-pane :not(.dmr-mud-table) input[type="datetime-local"],
  .page-d1 input[type="date"],
  .page-d1 input[type="time"],
  .page-d1 input[type="datetime-local"],
  .dmr-field-row input[type="date"],
  .dmr-field-row input[type="time"] {
    max-width: 200px !important;
  }
  /* Belt-and-suspenders: re-assert the cap inside the stacked
     .dmr-field-row, whose dmr.css `width: 100%` would otherwise win on
     specificity for numeric inputs. The label still sits full-width
     above; only the input itself is capped + left-aligned. */
  .dmr-field-row .input.num,
  .dmr-field-row input.num.input {
    max-width: 180px !important;
  }

  /* 2026-05-19 b11 — Chris: "Section title headers aren't displaying
     correctly, implement putting different text on their own lines."
     Add a global stacked-header pattern that ANY mu-card-header can
     opt into by adding the .mu-card-header-stacked class. Line 1 =
     title; subsequent lines = action groups. */
  .mu-card-header,
  .mu-card-header.is-stacked,
  .mu-card-header-stacked {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  /* mu-card headers that have action buttons inside flex children
     should wrap the buttons onto their own line below the title. */
  .mu-card-header > * { min-width: 0; flex-wrap: wrap; }

  /* ── Tables ────────────────────────────────────────────────────── */
  /* Every `.mu-table` wrapper gets a horizontal scroll. The mud-tab
     table already has its own `.dmr-table-scroll`; reinforce it. */
  .mu-table { font-size: 11px; }
  .mu-table th,
  .mu-table td { padding: 6px 4px; }
  .dmr-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── iOS Safari polish — remove the gray flash on tap ─────────────
     2026-05-19. `tap-highlight-color: transparent` removes the ugly
     gray/blue rectangle iOS draws over tapped elements. Native iOS
     apps don't show this — websites that don't override it feel
     amateur. */
  *, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Touch targets + iOS no-auto-zoom ──────────────────────────────
     2026-05-19 (Chris: "make sure you are actually looking at the
     mobile view"): the prior 14-px font on inputs triggered iOS
     Safari's focus-zoom behaviour (the page zooms in on every input
     tap, forcing the user to manually pinch-zoom out). 16 px is the
     iOS threshold that suppresses this.
     2026-05-19 (7m fix): only force 16-px on focusable INPUTS — iOS
     doesn't auto-zoom on button taps, so `.btn` doesn't need it and
     leaving it on clobbers tighter header-action-button rules like
     `.page-d1-header .page-d1-actions .btn { font-size: 11px }`.
     Chris's 19:26 iPhone screenshot showed the wells "+ New report
     / + New well / Actions" row wrapping to 2 lines because of
     this. */
  .input,
  input,
  select,
  textarea {
    min-height: 36px;
    font-size: 16px !important;
  }
  .btn { min-height: 36px; }
  .btn.btn-sm { min-height: 32px; padding: 6px 10px; }
  .input[type="number"] { min-width: 60px; }

  /* 2026-05-19 (7m, Agent C iOS audit #4): icon-only delete / copy
     buttons in mud + inventory + well-geometry templates use inline
     style="padding: 0 2px; height: 14px" which collapses tap target
     to ~14×14 px — well below iOS 44-pt floor and impossible to hit
     reliably at the doghouse. Force them up to 36 px. */
  .btn[style*="height: 14px"],
  .btn[style*="height: 16px"],
  .btn[style*="padding: 0 2px"],
  .btn[style*="padding: 0 4px"] {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 6px 8px !important;
  }

  /* 2026-05-19 (7m, Agent A iPhone audit #5): inventory tab has
     dozens of 9/10-px labels (RECEIVE pill, "+ line item", SKU
     subscript, supplier-extract `.se-stat-l` at 9 px). Below iOS
     legibility floor. Lift to 12 px on mobile via attribute selector
     to avoid touching every inline style. */
  .dmr-page [style*="font-size: 9px"],
  .dmr-page [style*="font-size: 10px"],
  .se-page [style*="font-size: 9px"],
  .se-page [style*="font-size: 10px"] {
    font-size: 12px !important;
  }

  /* DMR-cell-input was sized for dense desktop tables. Bump to a
     finger-tappable target AND past the iOS auto-zoom threshold. */
  .dmr-cell-input {
    min-height: 36px;
    font-size: 16px !important;
  }
  /* Mud table is the tightest case — cells were 22 px tall to fit
     wide-grid layout. Bump to 36 px on mobile; the table already
     scrolls horizontally so a few extra pixels of column width is
     acceptable. */
  .dmr-mud-table .dmr-cell-input {
    height: 36px !important;
    font-size: 16px !important;
  }
  /* Date inputs need extra width — iOS renders the calendar picker
     differently and 16-px font widens the spinner controls. */
  input[type="date"], input[type="time"], input[type="datetime-local"] {
    min-height: 40px;
  }

  /* ── Cost sidebar on phone ─────────────────────────────────────── */
  .dmr-sidebar {
    margin-top: 12px;
    padding: 8px;
  }
  .dmr-sidebar-section { padding: 8px 6px; }

  /* ── Wells / builds / recon list pages ────────────────────────── */
  /* If a page uses .table-wrap + the desktop filter-bar, let the
     filter bar wrap and the table inside scroll horizontally. */
  .filter-bar { flex-wrap: wrap; row-gap: 6px; }
  .filter-bar .search { flex: 1 1 100%; }
  /* 2026-05-19 (mobile audit batch 7h): the 5-chip status .seg on
     /builds was clipping "Running" to "R…" at 390px. Allow the seg to
     scroll horizontally on mobile so every chip stays tappable. Hide
     the scrollbar visually — it's a touch swipe gesture, not a desktop
     scroll. Also let the bar itself take full-width so .seg can stretch
     instead of being squeezed by the trailing count-meta + spacer. */
  .filter-bar .seg {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar .seg::-webkit-scrollbar { display: none; }
  .filter-bar .seg button { flex-shrink: 0; }

  /* 2026-05-19 (Chris 2nd screenshot): forcing min-width on tables
     and relying on horizontal scroll was wrong — Chris doesn't want
     to swipe sideways in portrait. Switch to a card-per-row layout:
     each <tr> stacks as a vertical card, each <td> becomes a labeled
     row inside the card. No horizontal scroll. Engineers see every
     field they need in one swipe down.

     Pattern:
       1. <thead> hidden on mobile (labels move to per-cell prefixes).
       2. <table>/<tbody>/<tr>/<td> all become block-level.
       3. Each <td data-mobile-label="Rig"> gets a small uppercase
          prefix rendered via `::before`. <td>s without the attr
          (the primary content cells) render plain.
       4. <td data-hide-mobile> stays hidden so secondary fields
          (checkbox, counts) don't clutter the card.
       5. Tables use `overflow-wrap: break-word` (NOT anywhere) so
          well names break on word/hyphen boundaries, not per-letter. */
  .table-wrap,
  .table-wrap-stand {
    overflow-x: visible;    /* no horizontal scroll on phone */
  }
  .mu-table,
  .mu-table tbody,
  .builds-table,
  .builds-table tbody {
    display: block;
    width: 100%;
  }
  .mu-table thead,
  .builds-table thead {
    display: none;
  }
  .mu-table tr,
  .builds-table tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-default, #d0d7de);
  }
  /* 2026-05-19 b15 — Chrome MCP iPhone render: wells list showed a
     "rats nest" because `display: block` above was overriding the
     `hidden` HTML attribute used by .well-detail-row (it expands only
     on chevron-click). Restore default behaviour: any [hidden] row
     stays hidden until JS removes the attribute. */
  .mu-table tr[hidden],
  .builds-table tr[hidden] { display: none !important; }
  /* 2026-05-19 (7l — Agent B finding #1): DMR data-entry tables
     (mud / volume / pump runs / remarks IADC / well-bundle / survey)
     were getting transformed into 10,000-px-tall card stacks because
     the global .mu-table card-transform applies to EVERY mu-table.
     Add a `.no-mobile-cards` opt-out class that re-enables proper
     table layout with horizontal scrolling. Data-entry tables get
     the class in their templates; read-mostly card-friendly tables
     (concentration, wells/builds/recon lists) stay card-stacked. */
  /* 2026-06-06 (7t): the opt-out also covers `.builds-table` now, so the
     admin editing/log grids (admin_users per-row forms, admin_activity
     log) can keep their real table structure + horizontal scroll on a
     phone instead of the 7p compact-table crush. */
  .mu-table.no-mobile-cards,
  .mu-table.no-mobile-cards thead,
  .mu-table.no-mobile-cards tbody,
  .mu-table.no-mobile-cards tr,
  .mu-table.no-mobile-cards th,
  .mu-table.no-mobile-cards td,
  .builds-table.no-mobile-cards,
  .builds-table.no-mobile-cards thead,
  .builds-table.no-mobile-cards tbody,
  .builds-table.no-mobile-cards tr,
  .builds-table.no-mobile-cards th,
  .builds-table.no-mobile-cards td {
    display: revert !important;
    width: auto !important;
    padding: revert !important;
  }
  .mu-table.no-mobile-cards td[data-mobile-label]::before,
  .mu-table.no-mobile-cards td[data-mobile-label]::after,
  .builds-table.no-mobile-cards td[data-mobile-label]::before,
  .builds-table.no-mobile-cards td[data-mobile-label]::after {
    content: none !important;
  }
  .mu-table.no-mobile-cards,
  .builds-table.no-mobile-cards { display: table !important; }
  .mu-table.no-mobile-cards thead,
  .builds-table.no-mobile-cards thead { display: table-header-group !important; }
  .mu-table.no-mobile-cards tbody,
  .builds-table.no-mobile-cards tbody { display: table-row-group !important; }
  .mu-table.no-mobile-cards tr,
  .builds-table.no-mobile-cards tr { display: table-row !important; }
  .mu-table.no-mobile-cards th,
  .mu-table.no-mobile-cards td,
  .builds-table.no-mobile-cards th,
  .builds-table.no-mobile-cards td { display: table-cell !important; height: auto !important; min-height: 0 !important; }
  .mu-table.no-mobile-cards [data-hide-mobile],
  .builds-table.no-mobile-cards [data-hide-mobile] { display: table-cell !important; }
  /* 2026-05-19 (7o — REAL iOS Simulator audit): the opt-out tables were
     shrinking to the viewport and CRUSHING columns — the Volume
     capacity table rendered "Drill String" as "Dril / l / Stri / ng"
     stacked one fragment per line. Root cause: the global
     `max-width: 100%` on `.dmr-tab-pane > *` / `.mu-card > *` forced
     the table to fit the viewport, so auto-layout starved the narrow
     columns. Fix: let the table size to its content (`width:
     max-content`, `max-width: none`) so it overflows and the wrapper
     scrolls horizontally instead of crushing. `white-space: nowrap`
     on cells stops mid-word breaks; long cells widen the table (which
     scrolls) rather than shattering. This is the intended "dense data
     table scrolls sideways on a phone" behaviour. */
  .mu-table.no-mobile-cards,
  .builds-table.no-mobile-cards {
    width: max-content !important;
    max-width: none !important;
    min-width: 100%;
  }
  .mu-table.no-mobile-cards th,
  .mu-table.no-mobile-cards td,
  .builds-table.no-mobile-cards th,
  .builds-table.no-mobile-cards td {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  /* Tables that opt out need to be in a horizontally-scrolling wrap
     so the engineer can still see every column. The standard
     .table-wrap above gets `overflow-x: visible` from the card path;
     when the table opts out, restore horizontal scroll. The wrapper
     itself must also escape the `max-width: 100%` / `overflow-x: clip`
     it inherits from the page-shell rules. */
  .table-wrap:has(.mu-table.no-mobile-cards),
  .table-wrap:has(.builds-table.no-mobile-cards),
  .dmr-table-scroll:has(.mu-table.no-mobile-cards),
  .dmr-table-scroll:has(.builds-table.no-mobile-cards) {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  .mu-table td,
  .builds-table td,
  .mu-table tbody td,
  .builds-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 0 !important;
    text-align: left !important;
    border-bottom: none !important;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    /* 2026-05-19 (7l — Chris's iPhone screenshot of /wells revealed
       em-dash cells looked airy while populated cells looked tight):
       components.css:283 sets `height: var(--row-height-table)` (32px)
       on tbody td for the desktop dense-table layout. The mobile
       rule above forgot to defeat that. Em-dash content needs ~18 px
       intrinsically, hits the 32-px floor, leaves ~14 px of dead
       vertical space per cell — and ~56 px per card across the
       chevron / well-name / rig / operator / last-DMR rows. Force
       auto-height so the cell sizes to its content. */
    height: auto !important;
    min-height: 0;
    line-height: 1.35;
  }
  /* Label prefix for `<td data-mobile-label="...">` — small caps tag
     ahead of the value so the engineer knows what the field is even
     without the <thead>. */
  .mu-table td[data-mobile-label]::before,
  .builds-table td[data-mobile-label]::before {
    content: attr(data-mobile-label) " · ";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3, #6e7781);
    margin-right: 4px;
  }
  /* Authoring hook: <th data-hide-mobile> / <td data-hide-mobile>
     drops on phone so secondary cells don't show up in the card. */
  [data-hide-mobile] { display: none !important; }

  /* Home tile grid (4 program tiles) — already auto-fit; just trim
     the gap. */
  .page-d1 > div[style*="grid-template-columns"] { gap: 10px !important; }

  /* 2026-05-19 b15 — KPI strip override REMOVED. Chris's call:
     "Wells, dmrs, builds, should be squares all on same row/line —
     no need for them to be soo wide." The 3-up rule at line ~208
     (with aspect-ratio:1/1) is the correct mobile layout; the old
     2-up at line 590 was fighting it via same-specificity later-
     wins. Don't reintroduce. */

  /* Mockup pages: drop the auto-link nav to the corner so the body
     can use the full width. */
  body { font-size: 14px; }

  /* ─── 7p: UN-STACK TABLES (Chris's design-review comments) ───────────
     Chris rejected the per-row card-stacking outright: "look like a
     normal table, not things stacked on top of each other. Check for
     stacking globally." + "we shouldn't have to horizontal scroll for
     anything on this app globally" — EXCEPT he OK'd the mud-check table.
     This block is LAST in the phone @media so it overrides every
     card-stacking rule above (equal specificity → later wins). Tables
     render as COMPACT REAL tables that fit the viewport: headers
     visible, tight columns, secondary columns dropped, cells wrap
     within their column (never stacked label-over-value), no sideways
     scroll. The mud-check table is the lone h-scroll exception. */
  .mu-table, .builds-table {
    display: table !important; width: 100% !important; table-layout: auto !important;
    font-size: 11px !important; max-width: 100% !important;
  }
  .mu-table thead, .builds-table thead { display: table-header-group !important; }
  .mu-table.mobile-cards tbody, .builds-table.mobile-cards tbody { display: table-row-group !important; }
  .mu-table.mobile-cards tr, .builds-table.mobile-cards tr {
    display: table-row !important; width: auto !important;
    padding: 0 !important; border-bottom: 0 !important;
  }
  .mu-table th, .mu-table td, .builds-table th, .builds-table td {
    display: table-cell !important; width: auto !important;
    padding: 5px 6px !important; text-align: left !important;
    vertical-align: middle !important; height: auto !important;
    white-space: normal !important; overflow-wrap: break-word !important;
    word-break: normal !important; line-height: 1.3 !important;
  }
  .mu-table thead th, .builds-table thead th {
    font-size: 10px !important; white-space: nowrap !important;
  }
  /* The per-cell "LABEL ·" prefix only made sense when stacked — kill it. */
  .mu-table td[data-mobile-label]::before,
  .builds-table td[data-mobile-label]::before { content: none !important; }
  /* Secondary columns still drop so the essential 3–4 fit the width.
     2026-05-19 (7p-fix): the `display: table-cell !important` on
     `.mu-table th/td` above (specificity 0,1,1) was OUT-SPECIFYING a
     plain `[data-hide-mobile]` (0,1,0), so hidden columns reappeared
     and crammed the wells table into 4-line name wraps. Scope the hide
     to `.mu-table [data-hide-mobile]` (0,2,0) so it wins. */
  .mu-table [data-hide-mobile],
  .builds-table [data-hide-mobile],
  thead [data-hide-mobile],
  [data-hide-mobile] { display: none !important; }
  .mu-table tr[hidden], .builds-table tr[hidden] { display: none !important; }
  /* No horizontal scroll on data/list tables — they must fit. */
  .table-wrap, .table-wrap-stand, .dmr-table-scroll {
    overflow-x: hidden !important; max-width: 100% !important;
  }
  /* EXCEPTION Chris explicitly allowed: the mud-check table may scroll
     sideways (too many columns to fit). Columns stay clean (nowrap). */
  .table-wrap:has(.dmr-mud-table),
  .dmr-table-scroll:has(.dmr-mud-table) { overflow-x: auto !important; }
  .dmr-mud-table { width: max-content !important; }
  .dmr-mud-table th, .dmr-mud-table td { white-space: nowrap !important; }

  /* ─── 7q: EQUIPMENT CARDS — let content grow vertically ──────────────
     2026-05-19 (Chris's iPhone design review #6): "equipment cards have
     content that stretches vertically and can't be seen, make
     everything go vertically, this is better/more compact."

     Root cause: every `.mu-card` carries `overflow: hidden`
     (components.css — keeps child tables clipped to the rounded
     corners). On the Equipment tab each unit card holds a spec strip
     (multi-col grid) + a runs table that is a direct child of the card
     with NO `.table-wrap` scroll wrapper. The b13 + G1 rules already
     stack the spec grids to 1-col and the 7p block fits the runs table
     to the viewport — but the card's `overflow: hidden` still clips any
     residual horizontal overflow, and any inner element that sets its
     own height could clip the rest. Per Chris: let everything flow
     vertically and be fully visible.

     Placed AFTER the 7p block so it wins source-order for this scope.
     Scoped to the pump/equipment tab only — desktop + every other tab
     are untouched. */
  .dmr-tab-pane[data-dmr-tab="pump"] .mu-card {
    overflow: visible !important;   /* don't clip the runs table / spec strip */
    height: auto !important;
    max-height: none !important;
  }
  /* Inner grids + strips: full-height, visible, vertical. The spec
     strip and the per-pump 4-up grid already collapse to 1-col via
     b13/G1; this guarantees they can't be height-clipped and that the
     fields render top-to-bottom. */
  .dmr-tab-pane[data-dmr-tab="pump"] .mu-card > div,
  .dmr-tab-pane[data-dmr-tab="pump"] [data-pump-card] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Runs table inside an equipment card: fit the card width and let it
     grow as tall as needed (rows wrap, nothing clipped). It opts out of
     card-stacking via `.no-mobile-cards`; the 7p block already renders
     it as a compact real table at `width: 100%`, so just make sure it
     never forces horizontal overflow that the (now-visible) card edge
     would otherwise have hidden. */
  .dmr-tab-pane[data-dmr-tab="pump"] .mu-card table.mu-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    height: auto !important;
  }
  .dmr-tab-pane[data-dmr-tab="pump"] .mu-card table.mu-table th,
  .dmr-tab-pane[data-dmr-tab="pump"] .mu-card table.mu-table td {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    height: auto !important;
    /* Drop the inline desktop column widths (width:80px/100px/110px…)
       so the four data columns share the viewport evenly instead of
       summing past it and clipping under the card edge. */
    width: auto !important;
  }

  /* ─── 7r (2026-05-27 audit pass): UNIVERSAL TAP-TARGET FLOOR ─────────
     iOS HIG = 44pt minimum tap target. Several icon-only / small buttons
     across the app render below that (some as small as 12×14 px). This
     block enforces a 44×44 minimum on touch chrome.

     For icons that visually MUST stay small (info ⓘ, star ★, help ⓘ
     icons), we expand the tap area via a ::before pseudo-element with
     inset:-12px so the visual size is unchanged but the touch hit
     region is finger-sized. This is the documented Apple/Google trick
     for tight icon buttons. */
  .appbar .btn,
  .appbar-d1 .btn,
  .appbar-brand,
  .nav-toggle-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .appbar-d1 .btn-sm,
  .appbar-right .btn { /* keep header buttons tight visually but at 44 floor */
    min-height: 44px;
  }
  /* Wells "List | By pad" toggle pills — currently ~32 px height. */
  .view-toggle a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Builds page status filter (All N / Pass N / Warn N / Fail N / Running N)
     — `.seg` segmented control. Bump the button row floor. */
  .filter-bar .seg { min-height: 44px; }
  .filter-bar .seg button {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Icon-only ghost buttons (row delete, reorder arrows, etc.) — the
     existing rules at lines 645-652 catch the inline-styled ones, but
     extend the floor to the explicit class names too. */
  .dmr-reorder-btn,
  .btn-icon,
  .btn[aria-label]:not(.btn-sm-no-bump) {
    min-height: 44px;
    min-width: 44px;
  }

  /* DMR help icon (16×12 px) — preserve visual size via expanded
     hit region. The icon itself stays small (Chris likes the dense
     desktop layout); the ::before grows the tappable area to 44 px. */
  .dmr-help-icon {
    position: relative;
  }
  .dmr-help-icon::before {
    content: '';
    position: absolute;
    inset: -14px;
  }

  /* Tools page info ⓘ and favorite ★ chip — same trick. */
  .tool-card-info,
  .tool-card-star {
    position: relative;
  }
  .tool-card-info::before,
  .tool-card-star::before {
    content: '';
    position: absolute;
    inset: -12px;
  }

  /* ─── 7s (2026-05-27 audit pass): WELLS LIST — phone-friendly names ───
     At 390 px the wells table renders 5 columns (Well · Pad · Rig ·
     Operator · Last DMR). The Well column uses `font-family: var(--font-mono)`
     + 600 weight, so long names like "Bruce Mountain 3874-7-6-3NH" break
     on every hyphen → 3+ lines per row. Drop the mono font on phones,
     allow the text to wrap on any character, and let the cell shrink
     to fit. The metadata cells (Rig, Operator) get min-width:0 so they
     can ellipsis-truncate instead of pushing the table sideways. */
  .well-row a.t-link.mono,
  .well-row .well-name,
  .well-row td a.mono {
    font-family: var(--font-sans) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }
  .well-row td {
    min-width: 0;
  }
  /* Optional: when the table layout breaks down at very narrow widths,
     this rule keeps the well-name cell from getting wider than the row. */
  .well-row td:nth-child(3) { /* Well column */
    max-width: 100%;
  }

  /* ─── 7t (2026-06-06): READ-LIST TABLES → TAP-FRIENDLY CARDS ─────────
     Chris on iPhone: "tables are too hard to navigate on mobile — the
     /wells page especially." The 7p block (above) forced EVERY mu-table
     into a compact 5–6-column real table to satisfy his earlier "don't
     stack" call. On a 390-px phone that crammed Well · Pad · Rig ·
     Operator · Last-DMR at 11 px — unreadable, and the row wasn't a
     single tap target.

     Resolution per Chris's 2026-06-06 instruction (which supersedes the
     7p "no stacking" call FOR READ-ORIENTED LIST TABLES only): a table
     opts IN to a stacked-card layout with `.mobile-cards`. Each <tr>
     becomes a bordered card; each <td data-mobile-label="…"> renders as
     a labeled line; the primary cell (well/status/well-name) reads big;
     [data-hide-mobile] cells drop. This is the mirror of the
     `.no-mobile-cards` opt-out that dense DATA-ENTRY grids use (those
     keep horizontal scroll and are untouched here).

     Higher specificity (`.mu-table.mobile-cards` = 0,2,0) + later source
     order beats the bare-element 7p rules (0,1,0). Scoped tightly so it
     ONLY affects tables that explicitly opt in — wells / builds / recon
     / DMR-list. Everything else (mud-check, volume, inventory, pump,
     geometry, concentration, admin grids) is unchanged. */
  .mu-table.mobile-cards,
  .mu-table.mobile-cards tbody,
  .builds-table.mobile-cards,
  .builds-table.mobile-cards tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .mu-table.mobile-cards thead,
  .builds-table.mobile-cards thead { display: none !important; }
  /* Each data row = a tap-friendly card. */
  .mu-table.mobile-cards > tbody > tr:not([hidden]),
  .builds-table.mobile-cards > tbody > tr:not([hidden]) {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 14px !important;
    margin-bottom: 10px;
    border: 1px solid var(--border-default, #d0d7de) !important;
    border-radius: var(--radius-3, 6px);
    background: var(--bg-surface, #fff);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.06));
  }
  /* [hidden] rows (e.g. the wells expand-detail row) stay collapsed
     until JS reveals them — never render as an empty card. */
  .mu-table.mobile-cards > tbody > tr[hidden],
  .builds-table.mobile-cards > tbody > tr[hidden] { display: none !important; }
  /* Cells stack as labeled lines. */
  .mu-table.mobile-cards > tbody > tr > td,
  .builds-table.mobile-cards > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 3px 0 !important;
    text-align: left !important;
    border-bottom: none !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Secondary cells drop so the card stays tight. */
  .mu-table.mobile-cards [data-hide-mobile],
  .builds-table.mobile-cards [data-hide-mobile] { display: none !important; }
  /* Label prefix from data-mobile-label, restored (the 7p block killed
     it). Small uppercase tag ahead of the value. */
  .mu-table.mobile-cards > tbody > tr > td[data-mobile-label]::before,
  .builds-table.mobile-cards > tbody > tr > td[data-mobile-label]::before {
    content: attr(data-mobile-label) " · ";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3, #6e7781);
    margin-right: 4px;
  }
  /* Primary cell (no data-mobile-label, no data-hide-mobile) reads as
     the card title: a touch bigger + tighter to the top. The well /
     report name inside it drops the mono font so long hyphenated names
     wrap on any character instead of one-segment-per-line. */
  .mu-table.mobile-cards > tbody > tr > td:not([data-mobile-label]):not([data-hide-mobile]) {
    font-size: 14px !important;
    padding-top: 0 !important;
  }
  .mu-table.mobile-cards > tbody > tr > td .mono,
  .builds-table.mobile-cards > tbody > tr > td .mono {
    font-family: var(--font-sans) !important;
    overflow-wrap: anywhere;
  }
  /* The wells list keeps its chevron as a small in-card expander. The
     chevron button (col 2) floats to the top-right of the card so the
     well-name line stays the primary tap target (opens the well) while
     the expander reveals the DMR list inline. */
  .mu-table.mobile-cards .well-row > td:nth-child(2) {
    display: inline-block !important;
    width: auto !important;
    float: right;
    margin-left: 8px;
    padding: 0 !important;
  }
  /* 2026-06-06 (Chris) — pair the row SELECT checkbox with the expand
     arrow: float it left (mirroring the right-floated chevron) and
     vertically center both on the well-name line, instead of the
     checkbox sitting alone as a block line above the name. */
  .mu-table.mobile-cards .well-row > td:nth-child(1) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    float: left;
    margin-right: 10px;
    padding: 0 !important;
    min-height: 30px; /* ≈ the chevron button height, so they line up */
  }
  .mu-table.mobile-cards .well-row > td:nth-child(1) input[type="checkbox"] {
    margin: 0;
  }
  /* The labeled detail lines (Pad/Rig/Operator/…) start below the checkbox
     float, full-width — only the well-name title shares the top line with
     the checkbox + arrow. */
  .mu-table.mobile-cards .well-row > td[data-mobile-label] { clear: left; }
  /* The expanded DMR detail row inside the wells card list: render it as
     a full-width block (not a card) and let its inner table scroll if
     it must, rather than crushing. */
  .mu-table.mobile-cards > tbody > tr.well-detail-row:not([hidden]) {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 10px;
  }
  .mu-table.mobile-cards > tbody > tr.well-detail-row > td {
    padding: 10px 12px !important;
    border-radius: var(--radius-3, 6px);
  }
  .mu-table.mobile-cards .well-detail-row table { font-size: 11px; }
  .mu-table.mobile-cards .well-detail-row table th[style*="width"] { width: auto !important; }
  /* When a mobile-cards table lives directly inside a `.mu-card` /
     `.mu-card-body` (well-detail DMR/builds/documents sections), the
     stacked cards would butt against the parent card's border (double
     border). Give the tbody a little breathing room + a small top gap.
     The page-level list tables (wells/builds/recon/dmr) live in a
     `.table-wrap`, not a card, so they stay full-bleed. */
  .mu-card > .mu-table.mobile-cards > tbody,
  .mu-card-body > .mu-table.mobile-cards > tbody {
    padding: 10px 10px 2px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * TABLET-PORTRAIT OVERRIDES — 600–980 px
 *
 * 2026-05-19 (Chris's "do the same thing for tablet view" ask after
 * the iPhone audit was 95%): the phone block above (max-width: 768)
 * pulls KPI cards into 3-up squares with `aspect-ratio: 1/1`. That's
 * the right call at 390 / 480; at 768 (iPad portrait) the squares
 * become absurdly tall (~250 px) with a tiny number floating in the
 * middle. The builds page also gets 5 KPIs awkwardly wrapping into
 * 3-up + 2 with huge gaps.
 *
 * Sits AFTER the phone block so it wins source-order at 768. Below
 * 600, the phone-mode 3-up squares stay (real phones).
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 980px) {
  /* Undo the aspect-ratio: 1/1 square forced by the phone block —
     cards keep their natural height. */
  .kpi {
    aspect-ratio: auto !important;
    padding: 12px 14px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .kpi-label { font-size: 11px !important; }
  .kpi-value { font-size: 26px !important; margin: 4px 0 !important; }
  .kpi-delta { font-size: 11px !important; }
  /* Builds page: 5 KPIs in one row instead of 3+2. Wells page only has
     3 KPIs but the same 5-up grid leaves them at ~138 px each, which
     is fine — better than the 250-px tall squares the phone block
     produces. */
  .kpi-strip { grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important; }

  /* Table-as-card layout: at tablet, lay rows out 2-up so we use the
     extra horizontal space. The card pattern (block-level tr/td with
     data-mobile-label prefixes) stays — just two cards per row. */
  .mu-table tbody,
  .builds-table tbody {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mu-table tr,
  .builds-table tr {
    border: 1px solid var(--border-default, #d0d7de) !important;
    border-radius: 6px;
    background: var(--bg-surface, #fff);
  }

  /* DMR header was compressed for 390-px phones. Tablet has room — let
     the breadcrumb back in and restore titlebar to a normal size. */
  .dmr-breadcrumb { display: flex !important; }
  .dmr-titlebar h1 { font-size: 20px !important; }
  .dmr-titlebar-well .mono { font-size: 13px !important; }
  .dmr-titlebar-date { font-size: 12px !important; }
  .dmr-header-right .btn { padding: 6px 10px !important; font-size: 12px !important; }
  .dmr-header-right .btn svg { width: 14px !important; height: 14px !important; }

  /* 2026-05-19 (7m, Agent B tablet audit findings #1-#5) ───────────
     The phone block hides / collapses things that have room at 768.
     Restore them so iPad portrait isn't a wasted layout. */

  /* #1: wells-list expanded detail row must span both grid columns
     when the 2-up tbody grid kicks in (tablet block above). */
  .mu-table.mobile-cards tr.well-detail-row { grid-column: 1 / -1; }

  /* #2: DMR tab strip stays VISIBLE at tablet (was hidden on phone).
     2026-05-19 (7n): 9 tabs sum to ~960 px — wider than 768. Let the
     strip scroll horizontally + hide the ⌘N keyboard hints (no
     hardware keyboard on an iPad) to reclaim ~34 px/tab. */
  .dmr-tabstrip {
    display: flex !important;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .dmr-tabstrip::-webkit-scrollbar { display: none; }
  .dmr-tab .dmr-kbd, .dmr-tab kbd { display: none !important; }
  .dmr-mobile-tabpicker { display: none !important; }

  /* 7n (tablet Agent #3): [data-hide-mobile] was only hidden in the
     ≤768 block, so in the 769-980 window the wells-list checkbox +
     spacer cells reappeared as empty 2-up grid items → ragged cards.
     Re-hide them across the whole tablet range. */
  .mu-table [data-hide-mobile],
  .builds-table [data-hide-mobile] { display: none !important; }

  /* 7n (tablet Agent #5): hydraulics `1fr 360px` shell wasn't in the
     catch-list; the 360-px rail squished the main column to ~370 px
     at 768. Stack it 1-col at tablet too. */
  [style*="grid-template-columns: 1fr 360px"]:not([data-keep-grid]) {
    grid-template-columns: 1fr !important;
  }

  /* #3: DMR data grids should be 2-col at tablet (were 1-col on phone),
     so well-bundle / pump / mud / volume / hydraulics-dashboard cards
     use the available width. */
  .dmr-grid-2 { grid-template-columns: 1fr 1fr !important; }
  .dmr-grid-3 { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(3"]:not([data-keep-grid]),
  [style*="grid-template-columns: repeat(4"]:not([data-keep-grid]),
  [style*="grid-template-columns: 1fr 1fr"]:not([data-keep-grid]) {
    grid-template-columns: 1fr 1fr !important;
  }

  /* #4: current-activity middle (narrative) column re-shown so
     "Drilling interval 0–2,500 ft" hint isn't gone at tablet. */
  .dmr-current-activity-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .dmr-current-activity-grid > div:nth-child(2) { display: block !important; }

  /* #5: page-d1-header H1 bumped from 18 → 22 px on tablet (phone
     block compressed it for 390-px viewports). Action buttons get
     a tiny bit more padding too. */
  .page-d1-header h1 { font-size: 22px !important; }
  .page-d1-header .page-d1-actions .btn { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Very small phones — ≤ 420px (single-handed use)
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .appbar-d1 { height: 52px; }
  .nav-rail { top: 52px; width: 86vw; max-width: 280px; }
  .nav-rail-backdrop { top: 52px; }
  .appbar-name { display: none; }    /* leave just the M mark */
  .dmr-tabstrip .dmr-tab span { font-size: 11px; }
  .mu-card-header { font-size: 12px; }

  /* 2026-05-19 b15 — 1-col collapse removed. Per Chris, KPI squares
     stay 3-up even on iPhone (~115px each at 390 viewport). */
}

/* 2026-06-06 (Chris) — the per-well DMR list (.dmr-mini, shown when a well card
   is expanded on /wells) is a nested table whose fixed column widths overflow a
   phone and "look terrible". Drop the inline widths + tighten so the remaining
   Date / R-# / Status / Open columns fit. (MD-end, Activity, and the per-report
   Delete carry data-hide-mobile, so they're already dropped on mobile — deleting
   a report from a phone now requires opening it / using desktop, deliberately.) */
@media (max-width: 768px) {
  .dmr-mini { font-size: 11px; }
  .dmr-mini th,
  .dmr-mini td { width: auto !important; padding: 6px 6px !important; white-space: normal; }
  .dmr-mini .btn-sm { padding: 4px 8px; }
}

/* Mobile criticals sweep (fly-v665 follow-up) */
@media (max-width: 768px) {
  /* Bigger checkbox tap targets — the wells bulk-select + DMR row
     checkboxes were ~13px and unhittable with a finger. */
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }

  /* r13 mobile MEDIUM (fleet LANE 3): the DMR-list card read scrambled —
     status pill, then Day/Date/MD labeled lines, with the tappable R-###
     link buried mid-card. Flex-order the cells: report link + activity
     first, status pill second, labeled lines after. DOM order unchanged. */
  #dmrs .mu-table.mobile-cards > tbody > tr { display: flex !important; flex-direction: column; }
  #dmrs .mu-table.mobile-cards > tbody > tr > td:nth-child(5) { order: -2; }
  #dmrs .mu-table.mobile-cards > tbody > tr > td:nth-child(1) { order: -1; }

  /* Mobile fleet 2026-06-11: the WBM/OBM/SBM toggle buttons are bare
     <button>s (no .btn) at 22px — half the touch floor, on a consequential
     action (flips the check's governing range). */
  .dmr-mud-type-toggle button { min-height: 36px !important; height: auto !important; }
  /* No-space inline font-size variants escaped the legibility bump. */
  .dmr-page [style*="font-size:9px"], .dmr-page [style*="font-size:10px"],
  .se-page [style*="font-size:9px"], .se-page [style*="font-size:10px"] {
    font-size: 12px !important;
  }
  /* Mud tab frozen lane ate 270px of a 390px screen — slim it so a full
     check column fits beside the labels (names wrap to two lines). */
  .dmr-mud-table col.dmr-mud-prop-colgroup-col { width: 112px !important; }
  .dmr-mud-table colgroup col:nth-child(2) { width: 44px !important; }
  .dmr-mud-table th.dmr-mud-unit-head, .dmr-mud-table td.dmr-mud-unit-cell { left: 112px; }
  .dmr-mud-table th.dmr-mud-prop-cell { white-space: normal !important; font-size: 11px; }
  .dmr-cell-checkbox { min-width: 24px; min-height: 24px; }

  /* Collapse the bit-run + nozzle inline grids (8-up / 5-up on desktop)
     to 2-up so each field is finger-wide instead of a 60px sliver. */
  .dmr-bitrun-grid,
  .dmr-nozzle-grid { grid-template-columns: 1fr 1fr !important; }

  /* Invoice-recon KPI strip — was a 5-col grid that crushed each value.
     Stack 2-up and bump the value font so the numbers stay legible.
     (Base rule lives in invoice-recon.css; override here.) */
  .ledger-strip { grid-template-columns: 1fr 1fr !important; }
  .ledger-strip .value { font-size: 18px; }

  /* Supplier-extract result stats — 4-col grid → 2-up on phones.
     (Base rule is an inline <style> in supplier_extract/index.html.) */
  .se-result-stats { grid-template-columns: repeat(2, 1fr) !important; }
}