/* jishie responsive layer — loaded after each page's inline <style> so these
   rules win by source order on small screens. Best practices 2026: safe-area
   insets, no sideways page scroll, wide content scrolls in its own box, touch-
   sized targets, and 16px form controls (no iOS focus-zoom). Desktop is untouched
   except for safety rules (media max-width, overflow guards). */

/* 1 — never let the whole page scroll sideways; media stays contained */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* long unbreakable tokens (URLs, ids) in prose wrap instead of overflowing */
td code, dd code, p code, li code { overflow-wrap: anywhere; }

/* 2 — safe-area padding for notched / rounded displays */
@supports (padding: max(0px)) {
  .wrap, .httpbar, header.site, header.top, footer {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* 3 — wide content scrolls inside its own container, not the page */
.curl, pre { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* 4 — touch devices: 16px controls stop iOS Safari zooming on focus */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* 5 — tablets: collapse two-column record/detail grids */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
}

/* 6 — phones */
@media (max-width: 720px) {
  /* data tables become horizontally scrollable without pushing the page wide */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* header + nav stack and wrap instead of overflowing off-screen */
  header.site, header.top { flex-wrap: wrap; row-gap: .5rem; }
  nav.top, header.top nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: .55rem .9rem; }
  /* stat / KPI bands to two-up */
  .statgrid, .kpis, .catwall, .coverage { grid-template-columns: repeat(2, 1fr); }
  /* comfortable, thumb-sized tap targets on primary controls */
  nav.top a, header.top nav a, .cta, .cta.sec { min-height: 44px; display: inline-flex; align-items: center; }
  /* headline scales with the viewport so it never overflows */
  h1 { font-size: clamp(1.5rem, 6.5vw, 2.2rem); overflow-wrap: anywhere; }
}

/* 7 — small phones */
@media (max-width: 460px) {
  .statgrid, .kpis, .catwall, .coverage { grid-template-columns: 1fr; }
  .wrap {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  nav.top, header.top nav { font-size: 13px; }
}

/* 8 — respect reduced-motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 9 — dark mode (auto, prefers-color-scheme) ────────────────────────────────
   The whole design is CSS-variable-driven, so redefining the palette flips every
   page and every SSR surface at once. Only two roles use --ink as a dark *surface*
   (code blocks, primary CTA) and a few buttons put white text on the link accent;
   those get explicit accessible colors so contrast holds. No JS, no toggle — we
   follow the OS preference, matching the light/dark theme-color metas. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1412;
    --card: #161d1a;
    --ink: #e7efec;
    --ink-soft: #a6b4af;
    --soft: #98a6a1;
    --line: #2a3430;
    --cobalt: #7d97ff;      /* link/accent — light for AA contrast on dark */
    --cobalt-dim: #1a2450;
    --verify: #45c495;
    --verify-dim: #0f2b22;
    --amber: #d99f45;
    --amber-dim: #2f2612;
    --red: #e77a72;
    --red-dim: #2f1714;
  }
  /* code surfaces stay dark (they used --ink as a background, now light) */
  pre, details pre, .snip { background: #0a0f0d; color: #d7e0dd; }
  /* inline code chips that hardcode a light-blue background */
  .sub code { background: var(--cobalt-dim); color: var(--ink); }
  /* primary CTA + white-on-accent buttons: a fixed blue that passes AA with #fff */
  .cta { background: #2f4bd6; color: #fff; }
  .cta:hover { background: #3f5ae0; }
  .curl button, .search button, form.search button, .bigsearch button { background: #2f4bd6; color: #fff; }
  /* readable text selection on the lighter accent */
  ::selection { background: var(--cobalt); color: #0e1412; }
  /* keep avatar/logo frames from glowing on dark cards */
  img { background: transparent; }
}