/* ── Kill the white navigation flash ─────────────────────────────────────────
   The <html> root canvas paints during the gap between pages. With no background
   it shows WHITE, which is the visible flash on every nav. Paint the canvas with
   the app background (light-only, C1) so navigation never flashes white — and so
   a cross-document view transition never snapshots a white incoming page. This is
   render-blocking (this file is the last thing in <head>), so it applies on the
   very first paint of every page. */
html { background: #FDFCFC; }                 /* Meridian --m-background (light) */
html[data-theme="dark"] { background: #121110; } /* Meridian --m-background (dark) */
html[data-theme="dark"]:has(> body.m-scheme-light) { background: #FDFCFC; }

/* 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.
   * clip, not hidden: hidden makes html/body a scroll container and breaks position:sticky. */
  html, body { overflow-x: clip !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: 30vw !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; }
}

/* ── Instant, flash-free same-origin navigation ──────────────────────────────
   Cross-document View Transitions: the browser cross-fades between pages instead
   of the white flash. Chrome/Edge 126+; other browsers ignore this @rule and
   navigate exactly as before (progressive enhancement, fully reversible). */
@view-transition { navigation: auto; }

/* ── Modal overlays must sit ABOVE the persistent nav shell ───────────────────
   nav.js injects a global left sidebar (z-index:1000) and a tier-preview strip
   (z-index:1200). Several pages declare their modal overlay as low as z-index
   250 (admin-analytics drilldowns) or 500 (my-settings certificate/profile
   pop-ups), so once the persistent shell shipped it painted OVER an open modal
   — the pop-up appeared partly or wholly behind the page/sidebar, i.e. "did not
   pop up". Force every modal overlay above the shell. The overlays are direct
   children of <body> (no transformed ancestor), so this escapes cleanly.
   Reversible: delete this block. */
.ovl,
.modal-overlay { z-index: 2000 !important; }