/* Global mobile (<=640px) fixes from the 2026-09-08 UX audit.
 * Scoped entirely to small screens + !important so it beats each page's inline <style>
 * without touching desktop. Two systemic defects: the top-bar identity-chip / wordmark
 * collision, and wide tables that clip instead of scrolling. */
@media (max-width: 640px) {
  /* kill any page-level horizontal gutter (audit: "dead white right space"); wide tables
   * still scroll INSIDE their .mobwrap / .table-wrap containers, this only clips the doc. */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* ---- top bar: keep logo left, controls right, on ONE row, no collision ---- */
  nav.topnav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  nav.topnav > * { min-width: 0 !important; }
  /* drop the wordmark text on phone (logo mark stays) to free the row */
  .nav-wordmark { display: none !important; }
  .nav-right { gap: 8px !important; flex-shrink: 0 !important; flex-wrap: nowrap !important; }
  /* the "DT · Name" identity chip: one line, truncate instead of wrapping to 3 lines */
  .nav-badge {
    max-width: 40vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* de-duplicate redundant menu triggers if a page renders two */
  .drawer-toggle + .drawer-toggle { display: none !important; }

  /* ---- wide tables & matrices: scroll horizontally instead of clipping ----
   * min-width:0 defeats the flex/grid-child default (min-width:auto) that makes a
   * scroll container grow to its content and push the page wide instead of scrolling. */
  .table-wrap, .tablewrap, .table-scroll, [class*="-wrap"],
  .heatmap-wrap, [id$="-wrap"], [id$="heatmap-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* let the inner grid/table stay its natural width so it scrolls inside the wrap */
  .heatmap { width: max-content !important; }
}

/* /learn module cards: never crush below a legible width on phone (audit CRITICAL).
 * Overrides the JS-set fixed column count only at <=640px; desktop is untouched. */
@media (max-width: 640px) {
  .mod-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .welcome-stats { grid-template-columns: repeat(2, 1fr) !important; }
}