/* Day91 — mobile.css
   Additive mobile overrides loaded after all other stylesheets.
   Targets phones (≤480px) and small tablets (≤680px).
   Nothing here removes content; everything degrades gracefully.
   ============================================================ */

/* ── 0. Viewport, safe areas and overflow guard ────────────────── */
:root {
  --mobile-gutter: max(1rem, env(safe-area-inset-left));
  --mobile-gutter-end: max(1rem, env(safe-area-inset-right));
}

html {
  min-width: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}
html.nav-is-open,
body.nav-is-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.nav-is-open {
  position: fixed;
  inset-inline: 0;
  width: 100%;
}

img, svg, video, iframe { max-width: 100%; }
main, footer, .shell, .band, .section, .hero, .hero2, .rail { min-width: 0; }

/* ── 1. Hamburger button (injected by mobile.js) ──────────────── */
.nav-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  padding: .5rem; border-radius: 8px; color: var(--ink);
  transition: background .15s ease; flex-shrink: 0;
}
.nav-burger:hover, .nav-burger:focus-visible { background: var(--paper-2); }
.nav-burger svg { width: 22px; height: 22px; display: block; pointer-events: none; }

/* ── 2. Nav drawer ─────────────────────────────────────────────── */
.nav-drawer {
  position: fixed; inset: 0; z-index: 300;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: var(--paper-3);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  contain: paint;
}
@supports (height: 100dvh) {
  .nav-drawer { height: 100dvh; min-height: 100dvh; }
}
.nav-drawer[aria-hidden="true"] { display: none; }
.nav-drawer.open { transform: none; box-shadow: -4px 0 24px rgba(0,0,0,.1); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding:
    max(.9rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    .9rem
    max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper-3); z-index: 1;
}
.nav-drawer-wordmark {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.nav-drawer-wordmark img { width: 26px; height: 26px; border-radius: 6px; }
.nav-drawer-close {
  background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--ink); padding: .5rem;
  transition: background .15s ease;
}
.nav-drawer-close:hover { background: var(--paper-2); }
.nav-drawer-close svg { width: 20px; height: 20px; display: block; }

.nav-drawer-body {
  padding:
    1rem
    max(1.25rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  flex: 1;
}

.nav-drawer-label {
  display: block;
  font-family: var(--mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  padding: 1rem 0 .35rem; margin-bottom: 0;
}
.nav-drawer-label:first-child { padding-top: .25rem; }

.nav-drawer-link {
  display: flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: .5rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: var(--ink);
  transition: background .12s;
}
.nav-drawer-link:last-of-type { border-bottom: none; }
.nav-drawer-link .nd {
  display: flex; align-items: center; gap: .45rem; flex: 1;
}
.nav-drawer-link .nn {
  font-family: var(--mono); font-size: .65rem; color: var(--signal);
  min-width: 1.5rem; flex-shrink: 0;
}
.nav-drawer-link strong {
  font-family: var(--display); font-size: .97rem; font-weight: 600;
}
.nav-drawer-link em {
  font-family: var(--mono); font-style: normal; font-size: .62rem;
  color: var(--muted); margin-left: auto; padding-left: .5rem; flex-shrink: 0;
}
.nav-drawer-sub {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin-top: 1.5rem;
  min-height: 52px; border-radius: 12px;
  background: var(--signal); color: #fff; text-decoration: none;
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: background .18s ease;
}
.nav-drawer-sub:hover { background: var(--signal-ink); color: #fff; }
.nav-drawer-sub .pip {
  width: 7px; height: 7px; border-radius: 50%; background: #9FE3BE;
}

/* drawer backdrop */
.nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 299;
  background: rgba(0,0,0,.35);
  overscroll-behavior: contain;
  touch-action: none;
}
.nav-backdrop.open { display: block; }

/* ── 3. Show burger, hide desktop nav on phones ───────────────── */
@media (max-width: 30rem) {           /* 480px */
  .nav-burger {
    display: flex;
    position: fixed;
    top: max(.4rem, env(safe-area-inset-top));
    right: var(--mobile-gutter-end);
    z-index: 21;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
  }
  .nav2 { display: none !important; }

  .masthead-in {
    padding:
      max(.6rem, env(safe-area-inset-top))
      var(--mobile-gutter-end)
      .6rem
      var(--mobile-gutter);
    align-items: center;
  }
}

/* ── 4. Touch targets ─────────────────────────────────────────── */
/* Nav buttons */
.nav2 .top,
.nav2 > a.lone { min-height: 44px; }

/* Toolstage open button */
.ts-open { min-height: 44px; padding: .65rem 1.1rem; }

/* Primary buttons */
.btn { min-height: 44px; }

/* Inline form inputs across all tool pages */
@media (max-width: 47.99rem) {
  html { scroll-behavior: auto; }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  textarea, select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom */
  }
  .field input, .field select { min-height: 44px; font-size: 16px; }

  input, select, textarea, button { max-width: 100%; }
  input, select, textarea { scroll-margin-block: 1.25rem; }
  textarea { min-height: 8rem; resize: vertical; }

  /* Animated hero decoration must never widen the document canvas. */
  .aurora {
    left: 0;
    right: 0;
    overflow: clip;
    contain: paint;
  }
}

/* ── 5. Hero rotating text overflow ──────────────────────────── */
@media (max-width: 36rem) {
  .h2-rot > span {
    white-space: normal;
    word-break: break-word;
  }
  /* keep the height stable while wrapping */
  .h2-rot { min-height: auto; }
}

/* ── 6. Toolstage on phones ───────────────────────────────────── */
@media (max-width: 30rem) {
  /* meter: drop the track bar, keep label + value */
  .ts-meter { grid-template-columns: 1fr auto; gap: .4rem; }
  .ts-meter .ts-track { display: none; }
  .ts-meter .val { text-align: left; }

  /* calendar: 4 columns instead of 8 */
  .ts-week { grid-template-columns: repeat(4, 1fr); }

  /* slightly larger mono text for legibility */
  .ts-sub  { font-size: .76rem; }
  .ts-note { font-size: .72rem; }
  .ts-path { font-size: .72rem; }
  .ts-cell { font-size: .7rem; }
  .ts-flag { font-size: .68rem; }
  .ts-row  { font-size: .88rem; }
}

/* ── 7. Tool card preview text ────────────────────────────────── */
@media (max-width: 30rem) {
  .tprev { font-size: .8rem; }
  .tprev .dim { font-size: .76rem; }
}

/* ── 8. Section / shell padding on phones ─────────────────────── */
@media (max-width: 30rem) {
  .shell { width: 100%; padding-inline: var(--mobile-gutter); }
  .hero { padding-top: 1.75rem; padding-bottom: 1.5rem; }
  .section { padding-block: 2.5rem; }
}

/* ── 9. Comparison & data table overflow ──────────────────────── */
/* Keep data inside an intentional horizontal scroller, never the page. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  border-radius: 8px;
}

@media (max-width: 47.99rem) {
  /* Data tables retain their columns and scroll within their own bounds. */
  .bm-table, .rp-table,
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  table > thead,
  table > tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }

  /* Comparison and pricing tables need enough room for readable columns. */
  .cmp > thead, .cmp > tbody,
  .vs > thead, .vs > tbody { min-width: 42rem; }

  pre, .mcpcmd {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .grid2, .toolgrid, .cat, .pair, .fields, .gcustom, .trackgrid { min-width: 0; }
  .tprev .row, .summary, .wire-row, .led-row { min-width: 0; }
  .tprev .row > *, .wire-row > *, .led-row > * { min-width: 0; overflow-wrap: anywhere; }
}

/* ── 10. Masthead wordmark on small screens ───────────────────── */
@media (max-width: 22rem) {          /* very small (≤352px) */
  .wm-type { font-size: .9rem; }
}

/* ── 11. Tool page form layouts ───────────────────────────────── */
@media (max-width: 47.99rem) {
  /* Check page: metric pairs stack vertically */
  .check-row,
  .pair-row { flex-direction: column; gap: .75rem; }

  /* Summary bar wraps */
  .summary { flex-wrap: wrap; gap: .5rem; }

  /* Actions stack */
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 calc(50% - .375rem); text-align: center; justify-content: center; }
}

@media (max-width: 22.5rem) {
  .actions .btn { flex-basis: 100%; width: 100%; }
  .fields .field { width: 100%; }
}

/* ── 12. Persona cards on phones ──────────────────────────────── */
@media (max-width: 30rem) {
  .personas { grid-template-columns: 1fr; }
}

/* ── 13. Scenes / SVG scenes on phones ───────────────────────── */
@media (max-width: 30rem) {
  /* Reduce scene height so it doesn't dominate the hero */
  .sc-bench svg,
  .sc-arm svg,
  .sc-press svg { max-height: 160px; }
}

/* ── 14. Announcement bar ─────────────────────────────────────── */
@media (max-width: 30rem) {
  .topbar { font-size: .7rem; padding: .45rem 1rem; }
  .topbar .sep { display: none; } /* hide the / separator if there are two msgs */
}

/* Long URLs and generated text must break inside their card, not the viewport. */
@media (max-width: 47.99rem) {
  .setup-note, .precedent, .srcs, .ghint, .small,
  .cat .price, .nav-drawer-link strong, .nav-drawer-link em {
    overflow-wrap: anywhere;
  }
}

/* ── 15. Reduced motion: drawer skips animation ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: none; }
}