/* Maybank — shared paper (doc-page) screen geometry.
   Loaded by every page that renders a <doc-page>: the two white papers, the
   playbook, the checklist, the briefing worksheet and the case-study print
   sheet.

   Why this exists as document CSS rather than only inside the component.
   doc-page's desk look — a fixed 8.5in sheet on a grey ground, with the host
   growing to max-content so the ground reaches the sheet's far edge — makes
   the DOCUMENT wider than a phone viewport. iOS Safari responds by shrinking
   the whole page to fit: the narrow left column with the large white right
   gutter, with every page-level element (announcement bar, header, breadcrumb,
   article) scaled down and clipped. The component now corrects this itself,
   but a page can only ever hold ONE definition of <doc-page>, and whichever
   script registers it first wins. These rules are document-origin, so they
   apply to whichever definition won, and the phone can never inherit the
   desktop sheet geometry.

   Screen only. doc-page owns print geometry and nothing here reaches @media
   print, so the printed/PDF page is byte-for-byte what it was. */

doc-page { max-width: 100%; }

@media screen and (max-width: 899px) {
  doc-page {
    /* The sheet IS the page on a phone: full width, no desk, no min-width
       floor to push the document wider than the viewport. */
    --doc-page-w: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    background: var(--mb-white, #fff) !important;
  }
  doc-page::part(sheet) { box-shadow: none !important; border-radius: 0 !important; }
  /* Nothing inside a paper may exceed the sheet, and long tokens (email
     addresses, URLs, hyphenated compounds) break rather than push. */
  doc-page img, doc-page svg, doc-page video, doc-page canvas { max-width: 100%; height: auto; }
  doc-page :where(p, li, h1, h2, h3, h4, blockquote, dd, dt, figcaption, td, th) { overflow-wrap: break-word; }
  doc-page :where(div, section, article, header, footer, main) { min-width: 0; }
}

@media screen and (max-width: 700px) {
  /* 0.9in of margin on each side of a 375px phone leaves ~300px of column.
     One variable drives both the sheet padding and the full-bleed opener's
     negative margin, so narrowing it keeps the two in agreement. */
  doc-page { --doc-page-margin: 22px !important; }
}

@media screen and (max-width: 899px) {
  /* Belt and braces for the table-framed sheet. doc-page lays the sheet out
     in a table (that is how running headers and footers repeat at print).
     An auto-layout table sizes to the min-content width of its contents, so
     one wide child could still push the sheet past the phone viewport even
     though the host is correctly 100% wide. Capping the top-level children
     at the visible column width makes the content wrap instead — nothing is
     clipped or hidden, it just cannot lay out wider than the screen. */
  doc-page > *,
  doc-page > [slot="header"],
  doc-page > [slot="footer"] {
    max-width: calc(100vw - 2 * var(--doc-page-margin, 22px));
  }
}