/* ============================================================
   BrotherVader — mobile/responsive hardening.
   Loaded LAST so it wins. Goal: the page always fits the device
   width (no sideways scroll, no zoomed-out "desktop in a phone"),
   on everything from a 320px phone up to desktop.
   ============================================================ */

/* 1) Kill horizontal overflow at the root. body had overflow-x:hidden
      but the html element did not, so fixed/odd children could still
      widen the page and let it pinch-zoom out. Clip both. */
html, body {
  overflow-x: clip;          /* clip = like hidden but no scroll container */
  max-width: 100%;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* 2) Media never overflows its column. */
img, svg, video, canvas, iframe { max-width: 100%; }

/* 3) Let flex/grid children actually shrink (the #1 cause of overflow:
      children default to min-width:auto and refuse to go below content). */
.nav-inner, .pr-cell, .pr-card, .pr-numrow, .pr-top, .pr-foot, .pr-trend,
.section-head, .cal-detail-head, .cal-detail-meta, .supp-row, .supp-main,
.food-est-row, .post-comment-inputs, .post-head, .wall-block, .ba-card,
.cal-stats, .cal-toolbar, .cal-ex, .daily-feed, .prmax-head, .prmax-meta {
  min-width: 0;
}
.cal-ex-name, .supp-name, .pr-name, .post-comment-text { min-width: 0; overflow-wrap: anywhere; }

/* 4) Big display type must wrap and never force width. */
.display, .hero-h, .section-title, .goal-h, .pr-num, .ba-delta-num, .prmax-bignum {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* ---------------- Phones (<= 600px) ---------------- */
@media (max-width: 600px) {
  .container { padding-left: 16px; padding-right: 16px; }

  /* tame the monumental type so it fits a narrow screen */
  .hero-h { font-size: clamp(40px, 13vw, 66px); }
  .section-title { font-size: clamp(34px, 11vw, 60px); }
  .pr-num { font-size: clamp(40px, 14vw, 64px) !important; }
  .pr-big .pr-num { font-size: clamp(46px, 16vw, 72px) !important; }
  .ba-delta-num { font-size: clamp(44px, 13vw, 72px); }

  /* PR cards: single column on phones so nothing is cramped */
  .pr-grid-main, .pr-grid-other { grid-template-columns: 1fr !important; }
  .pr-grid-main .pr-cell:first-child { grid-column: auto !important; }
  .pr-maximize { opacity: 1; }            /* always show the hint on touch */

  /* the delta box shouldn't force a 200px min on tiny screens */
  .ba-delta-inner { min-width: 0; width: 100%; }

  /* calendar cells breathe */
  .cal-stats { gap: 14px; flex-wrap: wrap; }
  .cal-toolbar { flex-wrap: wrap; gap: 12px; }

  /* nav brand a touch smaller so it never collides */
  .brand-word { font-size: 20px; }

  /* modals use the full width comfortably */
  .modal { max-width: 100% !important; }
  .prmax-head { gap: 16px; }
  .prmax-meta { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Small phones (<= 380px) ---------------- */
@media (max-width: 380px) {
  .container { padding-left: 13px; padding-right: 13px; }
  .cal-grid { gap: 3px; }
  .cal-date { font-size: 12px; }
  .chip { font-size: 12px; }
}

/* 5) Honor notches / safe areas on phones. */
@supports (padding: max(0px)) {
  .nav-inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .chat-fab { right: max(18px, env(safe-area-inset-right)); }
}