/* ============================================================
   mobile-trust.css — Trust pages mobile polish pass.
   Covers Privacy, Security (both LegalShell) and Disclosures (custom).
   Same pattern as mobile-qc.css / mobile-faq.css. Load after globals.css.
   Every rule is scoped and gated to small screens; desktop is untouched.

   ── SCOPE HOOKS (grounded in the shipped components) ──
   • LegalShell.jsx renders a bare <React.Fragment> with no wrapper. Add one:
       <main className={"lbd-legal " + (pageClass || "")}>…</main>
     Then Privacy.jsx / Security.jsx pass pageClass (e.g. "lbd-privacy").
     The card treatment below targets the shared .lbd-legal, so it also
     covers the FAQ page — it GENERALIZES the mobile-faq.css card block to
     every LegalShell page. (You can trim mobile-faq.css down to just its
     numbered ::before counter; the duplicated card rules are identical and
     harmless if both files load.)
   • Disclosures.jsx also returns a bare <React.Fragment>. Wrap its three
     children in <main className="lbd-disclosures">…</main>.

   ════════════════════════════════════════════════════════════
   PART A — LegalShell pages (Privacy, Security, FAQ)
   Identical markup to FAQ: header.section--ivory (paddingTop 168) +
   section--cream holding <article> blocks (lbd-h3 title + P bodies).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Header — clear the 56px glass bar without the desktop 168px void. */
  .lbd-legal > header.section--ivory {
    padding-top: 92px !important;
    padding-bottom: 26px !important;
  }
  .lbd-legal > header .lbd-lede { margin-top: 16px !important; max-width: 100% !important; font-size: 17px !important; }

  .lbd-legal > section.section--cream { padding-top: 10px !important; padding-bottom: 52px !important; }
  .lbd-legal .section--cream .section__inner { max-width: 100% !important; }

  /* Each section becomes a distinct card, not a ruled paragraph. */
  .lbd-legal .section--cream .section__inner > article {
    padding: 20px 18px !important;
    margin-bottom: 12px;
    background: var(--cream-elevated);
    border: 1px solid var(--paper-line-strong);
    border-bottom: 1px solid var(--paper-line-strong) !important;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }
  /* :not(.lbd-faq): the FAQ loads mobile-faq.css whose h3 rule (20px) must win the tie. */
  .lbd-legal:not(.lbd-faq) .section--cream .section__inner > article > .lbd-h3 {
    font-size: 19px !important; line-height: 1.28 !important; margin-bottom: 10px !important;
  }
  .lbd-legal .section--cream .section__inner > article .lbd-body {
    font-size: 16.5px !important; line-height: 1.6 !important;
  }
  .lbd-legal .section--cream .section__inner > article a {
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-word;
  }
  /* Closing note sits apart from the card stack. */
  .lbd-legal .section--cream .section__inner > div:last-child { margin-top: 22px !important; }
}

/* ════════════════════════════════════════════════════════════
   PART B — Disclosures (custom two-column page)
   Desktop: 220px sticky index + 1fr content. globals already collapses
   the grid and de-stickies the index at <=880px, but nothing HIDES the
   13-item index — so on mobile it dumps a long redundant TOC above the
   content. Every section is already numbered inline in the body, so the
   sidebar index is redundant on phones (mirrors how globals hides the
   Vision sticky index). Hide it and let the content run full width.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .lbd-disclosures .disc-index { display: none !important; }
}

@media (max-width: 640px) {
  /* Header — same 168px → 92px reclaim as the LegalShell pages. */
  .lbd-disclosures > header.section--ivory {
    padding-top: 92px !important;
    padding-bottom: 24px !important;
  }
  .lbd-disclosures > header .lbd-lede { margin-top: 16px !important; max-width: 100% !important; font-size: 17px !important; }

  /* Trust panel + content bands tighten. */
  .lbd-disclosures > section.section--cream { padding-top: 24px !important; padding-bottom: 56px !important; }

  /* Numbered sections become distinct cards; drop the desktop 26px body
     indent so the paragraph uses the full card width on a phone. */
  .lbd-disclosures article[id] {
    padding: 20px 18px !important;
    margin-bottom: 12px;
    background: var(--cream-elevated);
    border: 1px solid var(--paper-line-strong);
    border-bottom: 1px solid var(--paper-line-strong) !important;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    scroll-margin-top: 76px !important;
  }
  .lbd-disclosures article[id] > div[style*="padding-left: 26px"] {
    padding-left: 0 !important;
  }
  .lbd-disclosures article[id] .lbd-body { font-size: 16.5px !important; line-height: 1.6 !important; }
  .lbd-disclosures article[id] a {
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-word;
  }
}