/* ──────────────────────────────────────────────────────────────────────────
   mobile.css — phone-usability layer for every page in public/.

   Loaded LAST in each page's <head>, after that page's own <style> block, so
   equal-specificity rules here win. Everything lives inside a max-width media
   query, so nothing in this file can reach a viewport of 768px or wider: the
   desktop render is byte-for-byte the same as before this file existed.

   Three blocks, all `screen`-only so the pages' print stylesheets (linesheets,
   packing lists, the PO and stock tables) print exactly as they always have:
     1. screen and (max-width: 767px)                      — layout + type
     2. screen and (max-width: 767px) and (pointer: coarse) — touch targets
     3. screen and (max-width: 767px) — page-scoped fixes, keyed on ids and
        classes that exist on only one page.

   Deliberate mobile-only trade-off: tables that used to let the PAGE scroll
   sideways (stock-intelligence, purchase-orders) now scroll inside their own
   wrapper. That captures their sticky <thead>, so the header pins to the
   wrapper rather than the viewport on a phone. The alternative — a page that
   scrolls sideways — is worse on a phone, and desktop keeps the old behaviour.
   ────────────────────────────────────────────────────────────────────────── */

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

  /* ── 1. Containment ───────────────────────────────────────────────────── */
  /* Nothing may make the document wider than the viewport. Overflow is the
     job of a named scroll container, never of <body>. */
  html, body { max-width: 100%; }

  img, svg, video, canvas, iframe, object, embed { max-width: 100%; height: auto; }
  canvas { height: auto; }
  pre, code { overflow-x: auto; max-width: 100%; }
  /* Long SKUs, URLs and emails are the usual silent culprits. */
  body { overflow-wrap: break-word; }

  /* ── 2. Header + nav (server-injected markup, shared by every page) ───── */
  header {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
  }
  .logo-block { gap: 10px; min-width: 0; flex: 1 1 100%; }
  .logo-img   { height: 26px; flex: none; }
  .logo-sub   { min-width: 0; overflow-wrap: anywhere; }

  .nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
  }
  .nav-item { flex: none; }

  /* The sub-tab bar is server-injected with an inline style attribute, so the
     overrides it needs have to outrank that. */
  .subtabs {
    flex-wrap: wrap !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100%;
  }
  .subtabs > a { letter-spacing: 0.05em !important; }
  /* The account dropdown is centred on its trigger, which pushes it off the
     right edge on a narrow screen. Pin it to the right instead. */
  .nav-dropdown { left: auto; right: 0; transform: none; }

  /* ── 3. Page shells: trade the 32–40px desktop gutters for 16px ───────── */
  .page,
  .controls, .filter-bar, .summary-bar, .stats-bar, .bulk-bar, .footer-bar,
  .chart-section, .picker-controls, .view-toggle-bar, .month-divider,
  .buyer-info, .order-ref, .inventory-flag, .date-filter-bar,
  .data-banner, .receipt-prompt, .order-header, .detail-fields,
  .detail-bottom, .detail-notes, .timeline-section, .summary-tile-wrap,
  #rename-banner, #dup-sku-banner, #bad-sku-banner, #adjustments-view {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page { padding-top: 20px; padding-bottom: 48px; }

  /* ── 4. Bars stack ────────────────────────────────────────────────────── */
  /* Filter bars, control bars, header rows and button rows become columns. */
  .controls, .filter-bar, .filters, .date-filter-bar, .bulk-bar, .footer-bar,
  .picker-controls, .page-header, .chart-header, .run-row,
  .error-toolbar, .action-bar, .adjm-controls, .log-header, .header-row,
  .supplier-row, .rcv-ss-row, .modal-footer, .detail-bottom, .vp-header,
  .size-split-header, .polling-row, .webhook-row, .receipt-prompt,
  .data-banner, .buyer-info, .order-ref, .inventory-flag {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .filters .fld { width: 100%; }

  /* The stat and summary bars are readouts, not controls. Stacking them one
     per row pushed the actual list seven screenfuls down, so they wrap two-up
     instead. The tiles' desktop dividers are vertical, which only reads as a
     divider while they are in a row — dropped here. */
  .stats-bar, .summary-bar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 18px;
  }
  .stats-bar > .stat, .summary-bar > .summary-tile { flex: 1 1 40%; min-width: 0; }
  .summary-tile { border-right: none; }
  .stats-bar-right { flex: 1 1 100%; }
  /* `margin-left: auto` was pushing a right-hand group to the far edge of a
     row that no longer exists. */
  .stats-bar-right, .picker-meta, .chart-legend, .tl-comment-actions {
    margin-left: 0;
  }
  .stats-bar-right, .chart-legend, .log-header-left, .control-group,
  .tile-delta-row, .pill-group, .win-toggle, .ms-actions, .tl-reactions,
  .detail-bottom-actions, .recip-row, .ship-row, .adj-row, .li-ded-row {
    flex-wrap: wrap;
  }
  /* Segmented toggles keep their row shape but may wrap onto a second line. */
  .win-toggle, .period-toggle, .view-toggle-bar { max-width: 100%; }

  /* Button rows: full-width, readable, and never side by side at 390px. */
  .modal-footer { align-items: stretch; }
  .modal-footer > button, .modal-footer > .btn { width: 100%; }

  /* ── 5. Multi-column grids collapse ───────────────────────────────────── */
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-grid, .projection-row { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; min-height: 0; }
  .top-products-grid { grid-template-columns: 1fr; }
  .detail-fields { grid-template-columns: 1fr 1fr; }
  .addr-sections { grid-template-columns: 1fr; }
  /* Side-by-side panels become stacked sections. */
  .panel-form { border-right: none; border-bottom: 1px solid var(--border); padding: 20px 16px; }
  .panel-products { min-width: 0; }

  /* Cells inside a collapsed grid must be allowed to shrink. */
  .tile, .stat, .stat-card, .summary-tile, .sales-tile, .inv-tile,
  .revenue-tile, .tile-grid > *, .projection-row > * { min-width: 0; }
  .tile { padding: 14px 16px 16px; }
  .summary-tile { padding-right: 0; margin-right: 0; }

  /* ── 6. Tables get their own horizontal scroll container ──────────────── */
  /* A wrapper, where one exists, owns the scroll and the table keeps its
     min-width so columns stay legible. */
  .table-wrap, .mt-wrap, .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-wrap > table, .mt-wrap > table, .table-scroll > table {
    display: table;
    overflow-x: visible;
  }
  /* Every other table becomes its own scroll container. `min-width: 0` undoes
     page-level min-widths, which would otherwise widen the container itself
     rather than its contents. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  :not(.table-wrap):not(.mt-wrap):not(.table-scroll) > table { min-width: 0; }

  /* Row-grids that behave like tables (a header row sharing the data rows'
     column template) keep their columns and scroll as a unit. */
  :has(> .sync-row), :has(> .btest-row), :has(> .marg-line), :has(> .ts-row),
  :has(> .ad-row), :has(> .log-row) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .sync-row { min-width: 640px; }
  .btest-row { min-width: 560px; }
  .marg-line { min-width: 420px; }
  .ts-row { min-width: 420px; }

  /* ── 7. Modals and dialogs fit the viewport and scroll internally ─────── */
  .modal-overlay, .adj-overlay, .stock-choice-overlay {
    padding: 16px;
    align-items: flex-start;
    overflow-y: auto;
  }
  .modal, .modal-box, .adj-modal, .stock-choice-modal, .dialog, .popup {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto 0;
  }
  .modal-header, .modal-body { padding-left: 16px; padding-right: 16px; }
  .modal-footer { padding-left: 16px; padding-right: 16px; }

  /* ── 8. Type: nothing below 14px ──────────────────────────────────────
     The desktop design leans on 8–13px uppercase micro-labels. On a phone they
     are unreadable, so 14px is the floor. Letter-spacing eases back with them,
     or the widened labels stop fitting their bars. */
  body { font-size: 14px; }

  /* Generated from every `font-size: <14px` rule in public/*.html (print
     blocks excluded). Each selector is repeated verbatim so it lands later
     in the cascade than its original at identical specificity — that is
     what lifts the 8–13px micro-labels to the 14px floor without a
     hand-written guess at which page owns which class. Regenerate by
     re-running the extractor if a page adds a new small-type rule. */
  .logo-sub, .nav-link, .nav-dropdown-link, .page-title, .refresh-btn, .section-label, 
  .period-btn, .tile-label, .tile-units, .tile-note, .attention-msg, .attention-time, 
  .attention-empty, .activity-icon, .activity-desc, .activity-meta, .activity-link, 
  .activity-empty, .loading-msg, .digest-new-pill, .digest-week, .digest-sub, .digest-link, .sub, 
  .gbtn, .note, .divider, label, button, .err, .stat-label, .control-label, .filter-btn, 
  .btn-refresh, .fetch-time, .search-input, thead th, tbody td, .prod-name, .prod-meta, 
  .size-chip, .dl-btn, .state-row td, .page-caption, .ads-toggle, .ads-date, .status-text, 
  .thr-input, .thr-hint, .meta-banner, .grp-name, .grp-meta, .pill, .ad-row, .prov, .prov-sample, 
  .problem-row, .history-title, .history-row, .history-empty, .sum-lab, .sum-split, .basis, 
  .clampnote, .basis-key, .tile-tag, .tile-sub, .section-heading, .legend-item, .chart-empty, 
  .verdict-step, .verdict-note, .btest-head, .btest-row, .btest-note, .ustep-line, .ustep-note, 
  .form-err, .form-ok, .ustep-ok, .verdict-sub, .debug > summary, .fold > summary, .daywarn, 
  .tab-btn, table.mt th, table.mt td, .mt-note, .act-why, .act-empty, .diag > summary, .blockerr, 
  .blockerr code, .marg, .marg strong, .marg-line, .ts-grain button, .ts-sub, .ts-row, 
  .ts-row.head, .diag-h, .notif-desc, .chip, .interval-label, .interval-btn, .interval-note, 
  .thr-head, .thr-note, .thr-label, .recip-label, .notif-recip, .save-btn, .notif-status, 
  .notif-chev, .filter-label, .filter-select, .new-po-btn, td, .type-badge, .status-badge, 
  .status-select, .status-select option, .invoiced-chip, .overdue-chip, .action-btn, .detail-line, 
  .detail-hist, .detail-note, .detail-table, .detail-table th, .field label, .field input, 
  .field select, .field textarea, .field-hint, .type-btn, .rcv-line-name, .rcv-line-sub, 
  .rcv-row select, .rcv-row input, .rcv-note, .rcv-ss-row, .add-supplier-btn, .line-flag-count, 
  #paste-text, .paste-summary, .paste-row, .pr-raw, .pr-sku, .paste-note, .inline-supplier input, 
  .product-option, .po-lines-head, .po-line input, .po-extra input, .po-line .line-sku, 
  .line-total, .add-line-btn, .subtotal-label, .po-total-row, .btn-primary, .btn-secondary, 
  .btn-danger, .toast, .warn, th, .grp-row th, .controls-label, .year-select, .win-btn, 
  .month-btn, .grain-btn, .error-notice, #chart-tooltip, .tt-name, .scale-btn, .tile-delta, 
  .pr-heading, .pr-qualifier, .pr-tag, .pr-sub, .pr-delta, .profit-tip-box, .info-icon, 
  .tile-profit, .tp-window-label, .prints-table, .prints-table th, .prints-empty, .tp-thumb-empty, 
  .tp-name, .tp-units-label, .tp-revenue, .tp-empty, .tp-loading, .tp-incomplete, .banner, 
  .banner button, .field input[type=text], .btn, .you-tag, .admin-master, .lbtn, .access-all, 
  .agroup h4, .chk, .settings-note, .email-inp, h1, .config-banner, .webhook-row, 
  .webhook-register-btn, .stat-card-label, .stat-card-sub, .sync-indicator, .action-card-title, 
  .action-card-desc, .polling-label, .polling-sub, .log-caption, .log-subnote, .dup-reason, 
  .log-count, .log-chevron, .log-empty, .log-row, .log-time, .error-toolbar-label, .resolve-btn, 
  .auto-draft-badge, .dismiss-sku-btn, .dismissed-badge, .dup-product-row, .dup-action-label, 
  .dup-apply-btn, .sync-row, .pos-row, .diag-link, .window-btn, .ms-btn, .ms-opt, .ms-action, 
  .quick-filter-btn, .filter-search, .snapshot-btn, .last-snap-text, .bulk-count, 
  .bulk-field-label, .bulk-select, .bulk-num-input, .bulk-apply-btn, .bulk-clear-btn, 
  tbody tr.variant-row td, td.no-data, .expand-icon, .variant-sku, .cls-select, .new-data-badge, 
  .rate-star, #rename-banner, #rename-banner .rn-entry, #rename-banner .rn-btn, #dup-sku-banner, 
  #dup-sku-banner .dup-entry, #dup-sku-banner .dup-sku, #dup-sku-banner .dup-expand-btn, 
  #bad-sku-banner, #bad-sku-banner .bad-entry, #bad-sku-banner .bad-sku, 
  #bad-sku-banner .bad-expand-btn, .sku-warn-icon, .data-banner, .data-banner-icon, .po-badge, 
  .receipt-prompt-text, .receipt-yes-btn, .receipt-no-btn, .state-badge, .lead-input, .flag-label, 
  .stockout-sub, .dead-badge, td.share-cell, .rat-sub, .rat-edit input, .rat-edit .rat-clear, 
  .size-split-title, .size-split-meta, .size-split-label, .size-split-pct, .size-split-units, 
  .size-split-no-data, .footer-meta, .pdf-btn, .adj-btn, .ledger-head, .ledger-win-btn, 
  .ledger-recon, .ledger-table, .ledger-table th, .ledger-flag, tr.ledger-pre-head td, 
  .ledger-explain-btn, .ledger-note, .adj-title, .adj-sub, .adj-ledger-label, .adj-ledger-hint, 
  .adj-field label, .adj-field input, .adj-field select, .adj-save, .adj-cancel, 
  .view-toggle-bar button, .adjm-controls select, .adjm-total, .adjm-reason-h, .adjm-person-h, 
  .adjm-line, .adjm-empty, .filters label, .filters input, .filters select, .filters .chk label, 
  .filters .clear, .count, table, .action, .oid, .res, .reason, .sim, .page-meta, .run-btn, 
  .run-status, .stat-sub, .section-title, .section-badge, .diag-table th, .diag-table td.mono, 
  .diff-badge, .status-pill, .empty-row, .drift-leg-item, .readonly-notice, .badge, .trigger, .id, 
  .recipients, .resend-msg, .page-subtitle, .wow-badge, .pace-delta, .td-name, .td-units, 
  .rank-num, .alert-name, .alert-meta, .wsl-summary, .wsl-row, .wsl-more, .empty-state, 
  .error-state, .retry-btn, .panel-heading, .sort-select, .row-stock-total, input, textarea, 
  .rate-note, .success-label, .url-copy-wrap input, #picker-search, .picker-meta, 
  .row-thumb-empty, .row-name, .row-new, .newin-ovr, .row-sku, .row-cat, .row-price, .rs-size, 
  .row-stock-total-label, .row-vis, #picker-status, .select-all-btn, .dup-entry, 
  .dup-entry .dup-sku, .cust-name, .cust-meta, .total-label, .info-label, .info-value, 
  .buyer-detail-input, .order-ref-label, .order-ref-value, .buyer-form-title, .addr-section-title, 
  .opt, .buyer-form-field label, .buyer-form-field input, .same-billing, .shipping-note, 
  .shipping-note strong, .order-notice, .submit-notice, .filter-pill, .pc-name, .pc-new, .pc-sku, 
  .pc-desc, .pc-price-label, .pc-price-val, .size-label, .lp-restock, .pc-backorder-note, 
  .pc-row-total, .row-units-count, .linesheet-pdf-btn, textarea.notes, .grand-label, .btn-submit, 
  .save-draft-btn, .draft-indicator, #status, #submitted-msg h2, #submitted-msg p, .float-cart, 
  .fc-units, .fc-up, .qty-input, .month-label, .month-summary, .ships-cell, .ships-cell.fu-due, 
  .ships-cell.fu-done, .order-ref-col, .order-store, .order-location, .order-col, .order-total, 
  .draft-hint, .test-badge, .held-badge, .held-banner, .stock-choice-title, .stock-choice-sub, 
  .stock-choice-btn, .stock-choice-btn span, .test-banner, .test-toggle-wrap, .view-badge, 
  .edit-label, .edit-input, .save-indicator, .stock-log-panel > summary, .stock-log-row, 
  .oa-section-label, .oa-btn-white, .oa-btn-magenta, .items-title, .items-table th, 
  .items-table td, .li-qty-input, .pack-btn, .li-awaiting-eta, tr.pl-unavailable .li-unavail-flag, 
  .items-summary-units, .li-added, .ded-yes, .ded-status, .li-deduct-one, .li-split-one, 
  .li-undeduct-one, .pack-bar .sel-all-label, .pack-actions-label, .bulk-pack-btn, .pick-count, 
  .deduct-note, .deduct-remaining-btn, .deduct-status, .adjustments-title, .adj-label-input, 
  .adj-amount-input, .add-adjustment-btn, .extras-title, .dist-toggle, .dist-pct-input, 
  .dist-pct-suffix, .save-items-btn, .ship-hint, .ship-err, .approx-weight, .items-summary-total, 
  .buyer-link, .copy-link-btn, .empty-msg, .detail-notes, .new-draft-label, .new-draft-url, 
  .new-draft-copy, .timeline-title, .tl-label, .tl-date, .tl-actor, .tl-comment-entry, 
  .tl-comment-stamp, .tl-eta-label, .tl-paid-label, .tl-followup-label, .followup-btn, 
  .followup-last, .paid-chip, .reaction-btn, .reaction-count, .eta-current, .tl-comment-input, 
  .tl-comment-edit-input, .tl-eta-edit-input, .tl-comment-save, .tl-comment-save-edit, 
  .tl-comment-cancel-edit, .tl-eta-save-edit, .tl-eta-cancel-edit, .tl-comment-edit, 
  .tl-comment-del, .tl-eta-edit, .tl-eta-del, .tl-edited, .fulfill-btn, .track-label, 
  .track-summary-val, .track-summary a, .track-copy-btn, .track-field label, .track-input, 
  .track-save-btn, .track-stamp, .track-status, .date-filter-label, .date-select, .date-clear-btn, 
  .add-product-search, .product-result-item, .pri-name, .pri-sku, .pri-vis, .pri-stock, 
  .add-no-results, .vp-product-name, .vp-back-btn, .variant-pick-row, .vpr-size, .vpr-sku, 
  .vpr-rrp, .vpr-stock, .modal-title 
  { font-size: 14px; }

  /* Inline `style="font-size:Npx"` beats any selector, so the floor has to
     match the attribute text itself. Only the values that actually occur in
     public/*.html are listed, so a larger inline size is never touched. */
  [style*="font-size:7px"], [style*="font-size: 7px"], [style*="font-size:8px"], 
  [style*="font-size: 8px"], [style*="font-size:8.5px"], [style*="font-size: 8.5px"], 
  [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:9.5px"], 
  [style*="font-size: 9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"], 
  [style*="font-size:10.5px"], [style*="font-size: 10.5px"], [style*="font-size:11px"], 
  [style*="font-size: 11px"], [style*="font-size:12px"], [style*="font-size: 12px"], 
  [style*="font-size:12.5px"], [style*="font-size: 12.5px"], [style*="font-size:13px"], 
  [style*="font-size: 13px"] 
  { font-size: 14px !important; }

  /* Letter-spacing was tuned for 9–11px caps; at 14px it pushes labels out of
     their containers, so ease it off for the uppercase micro-label family. */
  .logo-sub, .nav-link, .nav-dropdown-link, .page-title, .section-label,
  .section-title, .tile-tag, .tile-label, .stat-label, .filter-label,
  .control-label, .controls-label, .period-btn, .win-btn, .filter-btn,
  .quick-filter-btn, .action-btn, .refresh-btn, .oa-btn-white, .oa-btn-magenta,
  .dl-btn, .pill, thead th, .panel-heading, .modal-title {
    letter-spacing: 0.05em;
  }

  th, td { font-size: 14px !important; }
  input, select, textarea, button, option {
    /* 16px stops iOS Safari zooming the page when a field takes focus. */
    font-size: 16px;
  }

  /* ── 9. Forms and inputs fill the column they now sit in ──────────────── */
  input[type="text"], input[type="search"], input[type="email"], input[type="url"],
  input[type="tel"], input[type="number"], input[type="password"], input[type="date"],
  select, textarea {
    max-width: 100%;
  }
  .filter-bar input, .filter-bar select, .controls input, .controls select,
  .picker-controls input, .picker-controls select, .date-filter-bar input,
  .date-filter-bar select, .adjm-controls input, .adjm-controls select,
  .filters input, .filters select {
    width: 100%;
  }
}

/* ── 10. Touch targets ─────────────────────────────────────────────────────
   Scoped to coarse pointers AND phone widths, so a touchscreen laptop at
   1440px is untouched. */
@media screen and (max-width: 767px) and (pointer: coarse) {
  button, [role="button"], input[type="button"], input[type="submit"],
  input[type="reset"], select, summary,
  .nav-link, .nav-dropdown-link, .btn, .action-btn, .filter-btn, .pill,
  .win-btn, .period-btn, .quick-filter-btn, .refresh-btn, .modal-close,
  .oa-btn-white, .oa-btn-magenta, .dl-btn, .adj-vis-btn, .dist-vis-btn,
  .reaction-btn, .linesheet-pdf-btn, .select-all-btn, .bulk-clear-btn,
  .logo-block, .diag-link, .subtabs > a, .action-bar > a, .header-row > a,
  .page-header > a, .activity-link, .nav-btn, .status-select,
  .type-btn, .interval-btn, .save-btn, .tab-btn, .month-btn, .grain-btn,
  .scale-btn, .rn-btn, .dup-expand-btn, .add-line-btn, .add-supplier-btn,
  .new-po-btn, .webhook-register-btn, .lbtn, .gbtn, .resolve-btn, .retry-btn,
  .run-btn, .pdf-btn, .adj-btn, .snapshot-btn, .window-btn, .ms-btn,
  .ledger-win-btn, .followup-btn, .track-copy-btn, .copy-link-btn {
    /* `!important`: #toggle-archived-btn and the sub-tab links carry their
       height and display in an inline style attribute. */
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
  }
  input[type="text"], input[type="search"], input[type="email"], input[type="url"],
  input[type="tel"], input[type="number"], input[type="password"], input[type="date"],
  textarea {
    min-height: 44px;
  }
  /* A native checkbox scaled to 44px looks broken and would burst the narrow
     fixed columns it sits in (.rcv-row's 32px slot, for one). The tap target
     is the LABEL — clicking it toggles the box — so the label carries the 44px
     and the control itself only grows past its 13px default. */
  input[type="checkbox"], input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
  }
  label:has(input[type="checkbox"]), label:has(input[type="radio"]),
  input[type="checkbox"] + label, input[type="radio"] + label,
  .chk, .chk label, .sel-all-label, .rcv-ss-row label {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Inline links inside prose keep their flow; only standalone nav-style
     links are padded out to a comfortable target. */
  .nav-link, .nav-dropdown-link {
    display: inline-flex;
    align-items: center;
  }
  /* A button that is only an icon still needs a square target. */
  .modal-close, .adj-vis-btn, .dist-vis-btn { min-width: 44px; }
}

/* ── 11. Page-scoped fixes ───────────────────────────────────────────────── */
@media screen and (max-width: 767px) {

  /* sales-dashboard.html — the window toggle is a 7-button segmented control
     nearly 500px wide. */
  #win-toggle { flex-wrap: wrap; border: none; gap: 1px; }
  #win-toggle .win-btn { border: 1px solid var(--border2); flex: 1 0 auto; }

  /* wholesale-orders.html — the order row is an 8-column grid at 902px. Two
     columns keeps every field on screen without inventing a new layout. */
  .order-header {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
  }
  .order-header > * { min-width: 0; }

  /* wholesale-new.html — the product picker's search box is a fixed 220px in
     a column that is now narrower than that. */
  #picker-search { width: 100%; }
  #sort-select { width: 100%; }
  .product-row { grid-template-columns: 40px auto 1fr; gap: 8px 10px; padding: 10px 16px; }

  /* stock-intelligence.html — size splits and the ledger fold-out. */
  .size-split-rows { max-width: 100%; }
  .ledger-table { min-width: 0; }

  /* notifications.html — label / number / hint row. */
  .thr-row { grid-template-columns: 1fr; gap: 6px; }
  .thr-input { width: 100%; }

  /* purchase-orders.html — line editors inside the receive modal. */
  .po-lines-head, .po-line { grid-template-columns: 1fr 56px 64px 64px 24px; gap: 6px; }
  .paste-row { grid-template-columns: 18px 1fr; gap: 6px; }

  /* weekly-digest.html / index.html already collapse their own grids; only the
     print-style tables need the scroll container, which §6 gives them. */
}
