/* ============================================================
   DSM AI Lab — Robustness layer (mobile/tablet hardening)
   Additive, self-contained. Included on every page.
   Scope: horizontal-overflow guard, mobile navigation,
   coarse-pointer touch targets, notch/safe-area insets.
   Nothing here changes desktop (>=768px) layout.
   ============================================================ */

/* --- 1. Horizontal-overflow guard ------------------------------------
   Decorative full-bleed grids, ambient lines and oversized hero
   visuals bled a few px past the viewport on phones, producing a
   horizontal scrollbar. `clip` removes the sideways scroll without
   creating a scroll container (so position:sticky/fixed keep working)
   and without touching vertical scrolling. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* Media should never force the page wider than the viewport. */
img, svg, video, canvas { max-width: 100%; }

/* --- 2. Coarse-pointer touch targets --------------------------------
   Bump the known interactive pill/button classes to a comfortable
   tap height on touch devices only. Purely a min-height + centering
   guarantee; desktop and visual design are untouched. */
@media (pointer: coarse) {
  .pill-label,
  .filter-pill,
  .cl-btn,
  .di-pill,
  .sa-pill,
  .mag-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- 3. Mobile navigation (injected by robustness.js) ---------------
   The site's <nav> is `hidden md:flex`, so below 768px there was no
   way to reach other pages. This provides an accessible slide-in
   menu. All of it is hidden at >=768px where the real nav returns. */
.dsm-mnav-btn {
  position: fixed;
  top: max(0.9rem, env(safe-area-inset-top));
  right: max(0.9rem, env(safe-area-inset-right));
  z-index: 2147483000;
  width: 44px;
  height: 44px;
  display: none;               /* shown via media query below */
  align-items: center;
  justify-content: center;
  background: #fafafa;
  color: #09090b;
  border: 1px solid #18181b;
  border-radius: 9999px;
  box-shadow: 3px 3px 0 rgba(24,24,27,.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .18s ease, transform .18s ease;
}
.dsm-mnav-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(24,24,27,.9); }
.dsm-mnav-btn:focus-visible { outline: 2px solid #4f81bd; outline-offset: 2px; }
.dsm-mnav-btn svg { width: 20px; height: 20px; pointer-events: none; }

.dsm-mnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  display: none;
  background: rgba(250,250,250,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dsm-mnav-overlay.open { display: block; }

.dsm-mnav-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(82vw, 340px);
  background: #fafafa;
  border-left: 1px solid #18181b;
  box-shadow: -8px 0 30px rgba(24,24,27,.12);
  padding: calc(env(safe-area-inset-top) + 5rem) 1.5rem
           calc(env(safe-area-inset-bottom) + 2rem) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.dsm-mnav-overlay.open .dsm-mnav-panel { transform: translateX(0); }

.dsm-mnav-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #71717a;
  margin-bottom: 1rem;
  border-bottom: 1px solid #18181b;
  padding-bottom: .75rem;
}
.dsm-mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;              /* generous tap target */
  padding: .5rem .25rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #09090b;
  text-decoration: none;
  border-bottom: 1px solid rgba(24,24,27,.12);
  -webkit-tap-highlight-color: transparent;
}
.dsm-mnav-link[aria-current="page"] { color: #c0504d; font-weight: 600; }
.dsm-mnav-link:active { background: rgba(24,24,27,.05); }
.dsm-mnav-link:focus-visible { outline: 2px solid #4f81bd; outline-offset: -2px; }
.dsm-mnav-link .dsm-mnav-arrow { color: #a1a1aa; font-size: 11px; }

.dsm-mnav-foot {
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a1a1aa;
}

/* Only expose the mobile menu below the site's md breakpoint. */
@media (max-width: 767.98px) {
  .dsm-mnav-btn { display: inline-flex; }
}

/* Lock scroll when the menu is open. */
body.dsm-mnav-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dsm-mnav-panel { transition: none; }
  .dsm-mnav-btn { transition: none; }
}