/* Mobile-only adjustments for the ELEC6218 notes. Nothing here applies above 700px,
   so the desktop layout is untouched. */
@media (max-width:700px){
  /* --- Header bar -------------------------------------------------------------
     A single nowrap row on desktop; let it wrap on phones so the three controls
     stay inside the viewport. */
  nav[data-om-nav]{flex-wrap:wrap!important;gap:6px!important;padding:6px 8px!important;}
  nav[data-om-nav]>details{position:static!important;flex:1 1 44%!important;min-width:0!important;}
  nav[data-om-nav]>a{flex:1 1 100%!important;order:3;justify-content:center!important;font-size:11px!important;padding:7px 8px!important;letter-spacing:0.04em!important;}
  nav[data-om-nav] summary{display:flex!important;width:100%!important;justify-content:center!important;box-sizing:border-box!important;font-size:11px!important;padding:7px 6px!important;letter-spacing:0.03em!important;}
  /* With the <details> made static, the panel resolves against the sticky nav and can
     span its full width instead of hanging off-screen. */
  nav[data-om-nav] details>div{left:0!important;right:0!important;width:auto!important;max-width:none!important;top:calc(100% + 6px)!important;max-height:70vh!important;}
  nav[data-om-nav] details>div a{padding-top:9px!important;padding-bottom:9px!important;}
  nav[data-om-nav] details>div summary{width:auto!important;justify-content:flex-start!important;font-size:12px!important;padding:9px 15px!important;}

  /* --- Type scale --------------------------------------------------------------
     Desktop copy carries inline sizes ranging 13–15.5px depending on whether the
     paragraph sits in the main flow, a callout, an example card or a list. On a
     phone that variation reads as inconsistency rather than hierarchy, so every
     running-text element collapses to one reading size. !important is required
     because the sizes are inline attributes. Scoped away from the nav so the
     header rules above still win. */
  main p, main li, main dd, main dt, main blockquote,
  .doc-clip p, .doc-clip li, .doc-clip dd, .doc-clip dt, .doc-clip blockquote,
  doc-page p, doc-page li, doc-page dd, doc-page dt, doc-page blockquote{
    font-size:15px!important;line-height:1.62!important;
  }
  /* Any element pinned anywhere in the 13–15.5px reading band joins the same size.
     This has to match by inline value rather than by tag: notation grids, card bodies
     and definition rows set the size on a wrapper and leave the prose inside it
     unstyled, so normalizing the wrapper is what fixes the text that inherits from it.
     Both spacings are listed because the page's runtime re-serializes inline styles
     with a space after the colon, so only the spaced form exists in the live DOM.
     Sizes outside the band (11px eyebrows, 12px equation tags, 10px badges) are left
     alone — those steps are intentional. */
  [style*="font-size:13px"], [style*="font-size: 13px"],
  [style*="font-size:13.5px"], [style*="font-size: 13.5px"],
  [style*="font-size:14px"], [style*="font-size: 14px"],
  [style*="font-size:14.5px"], [style*="font-size: 14.5px"],
  [style*="font-size:15px"], [style*="font-size: 15px"],
  [style*="font-size:15.5px"], [style*="font-size: 15.5px"]{font-size:15px!important;}
  /* Card titles share the 15.5px value with those wrappers but are headings in all but
     name, so give them a real step up instead of a half-pixel one. */
  [style*="font-size:15.5px"][style*="font-weight:600"],
  [style*="font-size: 15.5px"][style*="font-weight: 600"],
  [style*="font-size:15.5px"][style*="font-weight:700"],
  [style*="font-size: 15.5px"][style*="font-weight: 700"]{font-size:16.5px!important;line-height:1.3!important;}

  /* Secondary text keeps a deliberate step down, applied uniformly. */
  figcaption, figcaption *, table, th, td{font-size:13px!important;line-height:1.5!important;}
  pre, pre *, code{font-size:12.5px!important;}

  /* Headings: hold the desktop ratios but pull the display sizes in so they fit. */
  h1{font-size:30px!important;line-height:1.15!important;}
  h2{font-size:20px!important;line-height:1.25!important;}
  h3{font-size:16px!important;line-height:1.3!important;}
  h4,h5,h6{font-size:15px!important;}

  /* Card labels, badges and equation tags: one small size instead of 9–12px spread. */
  [style*="letter-spacing"][style*="text-transform:uppercase"],
  [style*="letter-spacing"][style*="text-transform: uppercase"]{font-size:11px!important;}
  /* …but not the card titles above, which carry neither, nor the nav. */
  button{font-size:12px!important;}

  /* --- Overflow ---------------------------------------------------------------- */
  .doc-clip{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  pre{overflow-x:auto;}
  mjx-container{max-width:100%!important;overflow-x:auto;overflow-y:hidden;}
}