/* ══════════════════════════════════════════════════════════════════════════
   OHR MOBILE POLISH LAYER
   Phone-browser corrections. Load AFTER ohr-polish.css and after each page's
   inline <style> so these win without !important where possible.

   Scope discipline: everything except the overflow guard lives inside a
   max-width media query, so desktop rendering is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HORIZONTAL OVERFLOW GUARD ──────────────────────────────────────────
   Safety net only — real causes are fixed below. `clip` (not `hidden`) so we
   don't create a scroll container, which would break position:sticky headers. */
html, body { max-width: 100%; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* Scroll-reveal transforms translate on the X axis and push the page wide
   before they fire. Keep the fade, drop the horizontal travel on phones. */
@media (max-width: 768px) {
  [data-reveal="right"], [data-reveal="left"] { transform: none !important; }
}

/* ── 2. HEADER / LOGO ──────────────────────────────────────────────────────
   .logo-img is height:72px sitewide with no mobile override, rendering ~329px
   wide on a 375px screen. That alone overflows every header. */
@media (max-width: 768px) {
  .logo-img { height: 34px; width: auto; max-width: 62vw; }
  .hdr { gap: 8px; }
  .logo { min-width: 0; flex: 0 1 auto; }
}
@media (max-width: 400px) {
  .logo-img { height: 30px; max-width: 56vw; }
}

/* ── 3. MOBILE NAV DRAWER (enhanced by ohr-mobile-nav.js) ──────────────────
   The drawer replaces the desktop nav below 768px. Links are cloned from the
   existing .hdr-nav / .hdr-right so every page keeps its own destinations. */
.ohr-mnav-btn { display: none; }

@media (max-width: 768px) {
  /* Hide the desktop nav ONLY once the drawer exists, so a JS failure leaves
     the original links reachable rather than stranding the user. */
  body.ohr-mnav-ready .hdr-nav,
  body.ohr-mnav-ready .hdr-right { display: none; }

  .ohr-mnav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    margin-left: auto;
    background: none; border: 1px solid var(--rule, #E5E0D8);
    border-radius: var(--radius-sm, 6px);
    color: var(--ink, #1A1A1A);
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ohr-mnav-btn svg { width: 20px; height: 20px; display: block; }

  /* The theme toggle is a designed 56×28 pill switch — keep it exactly, and
     extend only the INVISIBLE hit area to 48px so it stays thumb-friendly.
     (overflow must go visible for the extender; the knob never leaves the
     pill bounds, so nothing else depends on the clip.) */
  .hdr .theme-toggle {
    flex: 0 0 auto; margin-left: 0;
    overflow: visible !important;
  }
  .hdr .theme-toggle::before {
    content: ''; position: absolute;
    top: -10px; bottom: -10px; left: -4px; right: -4px;
    border-radius: 24px; z-index: 1;
  }
}

/* Drawer chrome lives outside the media query (JS only builds it on phones,
   and the [hidden] attribute keeps it inert until opened). */
.ohr-mnav-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .44);
  opacity: 0; transition: opacity .22s var(--ease-out-smooth, cubic-bezier(.16,1,.3,1));
}
.ohr-mnav-backdrop.open { opacity: 1; }

.ohr-mnav-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999;
  width: min(84vw, 320px);
  background: var(--paper, #FAFAF5);
  border-left: 1px solid var(--rule, #E5E0D8);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s var(--ease-out-smooth, cubic-bezier(.16,1,.3,1));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ohr-mnav-panel.open { transform: translateX(0); }

.ohr-mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--rule-lt, #EEE9E1);
  flex: 0 0 auto;
}
.ohr-mnav-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-lt, #6B6B6B);
}
.ohr-mnav-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--ink, #1A1A1A);
  -webkit-tap-highlight-color: transparent;
}
.ohr-mnav-close svg { width: 20px; height: 20px; }

.ohr-mnav-links { display: flex; flex-direction: column; padding: 8px 0 20px; }
.ohr-mnav-links a {
  display: flex; align-items: center; min-height: 52px;
  padding: 12px 18px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; font-weight: 400;
  color: var(--ink, #1A1A1A); text-decoration: none;
  border-bottom: 1px solid var(--rule-lt, #EEE9E1);
  -webkit-tap-highlight-color: transparent;
}
.ohr-mnav-links a:active { background: var(--paper-mid, #F4F0E8); }

/* Primary + secondary CTAs keep their emphasis inside the drawer. */
.ohr-mnav-links a.ohr-mnav-cta {
  margin: 16px 18px 0; border-radius: var(--radius-sm, 6px);
  background: var(--red, #C1272D); color: #FFF; font-weight: 500;
  justify-content: center; border-bottom: none;
}
.ohr-mnav-links a.ohr-mnav-cta-alt {
  margin: 10px 18px 0; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--rule, #E5E0D8); border-bottom: 1px solid var(--rule, #E5E0D8);
  justify-content: center;
}

body.ohr-mnav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ohr-mnav-panel, .ohr-mnav-backdrop { transition: none; }
}

/* ── 4. TOUCH TARGETS ──────────────────────────────────────────────────────
   Targeted at controls the audit measured under ~40px. Deliberately NOT a
   blanket `a { min-height }` — that would wreck inline prose links. */
@media (max-width: 768px) {
  .side-nav-toggle,
  .ohr-modal-close,
  .kpi-modal-close {
    min-width: 44px; min-height: 44px;
  }

  .watch-add-btn, .watch-add-select,
  .sal-tgl, .kpi-modal-range-btn,
  .tp-zip-select, .up-cta,
  .btn-outline, .btn-solid, .btn-primary, .btn-secondary,
  .fc-submit, .fc-input, .tier-cta, .lock-btn, .lock-cta, .cta-btn, .un-btn {
    min-height: 44px;
  }

  .kpi-l, .m-l { min-height: 32px; }

  .side-nav-item { min-height: 44px; }
}

/* ── 5. iOS ZOOM-ON-FOCUS ──────────────────────────────────────────────────
   Safari zooms the viewport whenever a focused field is under 16px.
   !important is required: several forms set font-size inline (13–15px), which
   would otherwise win and re-trigger the zoom. */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="number"],
  input[type="url"], select, textarea {
    font-size: 16px !important;
  }

  /* Grid and flex items take min-content as their automatic minimum, so a
     <textarea>'s intrinsic width (default cols=20) can force its track wider
     than the container. min-width:0 lets them shrink to fit. */
  form > *, .el-form > *, .fc-form > * { min-width: 0; }
  form input, form select, form textarea { min-width: 0; }
  input, select, textarea { max-width: 100%; }
  textarea { width: 100%; }

  /* Two-up form rows (written inline in several pages) stack on a phone —
     side-by-side fields leave ~170px each, below a usable width. */
  form [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5b. LEAD-CAPTURE BLOCK (Free dashboard) ────────────────────────────────
   #bradley-cta was rebuilt 2026-09-08 around ohr-contact.js; its layout now
   lives in the page's own .bc-* rules and the module's injected styles, both of
   which carry their own ≤768px branches. Nothing to override here. */

/* ── 6. LEGIBILITY FLOOR ───────────────────────────────────────────────────
   Sub-11px metadata is unreadable on a phone. Attribution/citation text is
   also a licence-visibility concern, so it gets the largest lift. */
@media (max-width: 768px) {
  .kpi-cite, .nh-aux-cite, .card-updated, .sec-note, .sec-scope,
  .nonmls-source, .news-source, .ft-disc, .ohr-form-legal,
  .whn-ey, .nh-section-label, .side-nav-group-label, .nav-favs-hint,
  .hero-path-label, .how-tag, .pf-grp, .proof-plan, .card-header-d,
  .dyn-date, .hs-prob-name, .nm-dates, .watch-count {
    font-size: 11.5px !important;
    line-height: 1.45;
  }

  .armls-attribution, .armls-attr-copy, .armls-attr-disc {
    font-size: 12px !important;
    line-height: 1.5;
  }
}

/* ── 7. WIDE CONTENT → HORIZONTAL SCROLLERS ────────────────────────────────
   Tables that exceed the viewport should scroll inside their own box rather
   than widening the page. .ohr-hscroll is applied by ohr-mobile-nav.js, which
   wraps any table wider than its container. */
.ohr-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.ohr-hscroll > table { min-width: max-content; }

@media (max-width: 768px) {
  /* Wrappers whose overflow:hidden (for border-radius) silently CLIPS content
     instead of letting it scroll. */
  .rvi-table-wrap { overflow-x: auto !important; }

  /* Fixed second columns that can't fit next to a 1fr column on a phone. */
  .pdf-shell { grid-template-columns: 1fr !important; }

  /* A flex row whose <select> won't shrink below its longest option. */
  .watch-add-select, .watch-add > * { min-width: 0; }
  .watch-add { max-width: 100%; }
}

/* ── 8. SECTION HEADER WRAPPING (Pro / Elite) ──────────────────────────────
   .sec-div is a flex row whose children all carry flex-shrink:0, so the label
   + badge + note + scope run several hundred px past the screen edge. */
@media (max-width: 768px) {
  .sec-div {
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: 6px 10px;
  }
  .sec-label, .sec-badge, .sec-note, .sec-scope {
    flex-shrink: 1 !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .sec-label { font-size: 19px; }
  .sec-scope { padding-left: 0; display: block; }
  /* The decorative rule has nothing to fill once the row wraps. */
  .sec-line { display: none; }
}

/* ── 8b. ARMLS ATTRIBUTION (Free) ──────────────────────────────────────────
   margin:24px -24px 0 full-bleeds the block out of a card whose mobile padding
   is smaller, pushing it past the viewport. Licence text must stay fully
   visible, so drop the bleed rather than clipping it. */
@media (max-width: 768px) {
  .armls-attribution { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ── 9. FOOTERS ────────────────────────────────────────────────────────────
   These are single-row flex strips with flex-wrap:nowrap, so links get
   crushed (Contact OHR was rendering 8px wide) rather than wrapping. */
@media (max-width: 768px) {
  .pf-right, .pf-left, .ft-bot, .page-footer, .pf-in,
  .bn-links, .bottom-note > div, .ft-links {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 10px 18px !important;
  }
  /* Each link stays intact; the ROW wraps instead of the words. */
  .pf-link, .bn-links > a, .ft-links > a, .ft-bot a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* NOTE: 11 responsive rules across Elite / Pro / Free / public / membership used
   to be restated here because each sat in a @media block ABOVE the base rule it
   overrode and so never applied. They were fixed at source on 2026-08-05 — each
   page now carries a "RESPONSIVE FIXES — MUST STAY BELOW THE BASE RULES" block
   at the end of its first <style>. Nothing to patch from here; if one of those
   layouts regresses, check that block hasn't been moved back up. */

/* ── 10. LONG STRINGS ──────────────────────────────────────────────────────
   Emails, URLs and ZIP lists shouldn't force the page wide. */
@media (max-width: 768px) {
  a[href^="mailto:"], a[href^="http"], code, .mono-wrap {
    overflow-wrap: anywhere;
  }
}