/* On the DL — mobile overrides.
   Media queries can't be expressed inline, so the responsive layer lives here.
   Every rule is an override of an inline style, keyed to a data-m hook.
   Desktop design is untouched. */

@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  [data-screen-label] { overflow-x: hidden; }

  [data-m~="pad"] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-m~="stack"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-m~="rowcol"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  [data-m~="headpad"] { padding-top: 20px !important; padding-bottom: 16px !important; }
  [data-m~="vpad"] { padding-top: 36px !important; padding-bottom: 40px !important; padding-left: 18px !important; padding-right: 18px !important; }
  [data-m~="wrap"] { flex-wrap: wrap !important; }
  /* Photo mosaics stay a grid — never a single stacked column */
  [data-m~="mosaic"] { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }

  [data-m~="wordmark"] { font-size: 46px !important; }
  [data-m~="namebig"] { font-size: 42px !important; }
  [data-m~="hbig"] { font-size: 30px !important; line-height: 1.18 !important; }

  [data-m~="imgtall"] { height: 300px !important; }
  [data-m~="mapframe"] { height: 340px !important; }
  [data-m~="avatar"] { width: 120px !important; height: 120px !important; }
  [data-m~="chat"] { height: 460px !important; }

  /* Postcard goes portrait: front face fits whole, letter face scrolls internally */
  [data-m~="card"] { height: 620px !important; }
  [data-m~="cardcol"] { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  [data-m~="cardwrap"] { width: 100% !important; }
  [data-m~="cardback"] { padding: 20px 18px !important; }
  [data-m~="letterscroll"] { min-height: 0 !important; gap: 0 !important; }
  [data-m~="sig"] { font-size: 42px !important; }
  [data-m~="vrule"] { display: none !important; }
}

@media (max-width: 560px) {
  [data-m~="pad"] { padding-left: 18px !important; padding-right: 18px !important; }
  [data-m~="stack"] { gap: 26px !important; }

  [data-m~="wordmark"] { font-size: 38px !important; }
  [data-m~="namebig"] { font-size: 34px !important; }
  [data-m~="hbig"] { font-size: 26px !important; }

  [data-m~="imgtall"] { height: 240px !important; }
  [data-m~="mapframe"] { height: 300px !important; }
  [data-m~="avatar"] { width: 96px !important; height: 96px !important; }
  [data-m~="chat"] { height: 400px !important; }

  [data-m~="mosaic"] { grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; }
  [data-m~="rolllabel"] { font-size: 9px !important; padding: 4px 5px !important; letter-spacing: 0.04em !important; }
  /* Quiz: all four answers stay a 2×2 grid and fit one screen — as on desktop */
  [data-m~="optgrid"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  [data-m~="optlabel"] { font-size: 13px !important; line-height: 1.35 !important; margin-top: 10px !important; }
  [data-m~="qhead"] { font-size: 23px !important; margin-bottom: 20px !important; }
  [data-m~="vpad"] { padding-top: 22px !important; padding-bottom: 26px !important; }
  /* Postcard on a phone: 3 × 6 fills the sheet exactly — 18 photos, no blank cells.
     Tiles go slightly wide of square so six rows fit; the letter face is sized to
     be read in full without scrolling. */
  [data-m~="roll"] { grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; }
  [data-m~="rolltile"] { aspect-ratio: 4 / 3 !important; }
  [data-m~="card"] { height: 588px !important; }
  [data-m~="hidephone"] { display: none !important; }
  [data-m~="cardtitle"] { font-size: 21px !important; }
  [data-m~="letterp"] { font-size: 11.5px !important; line-height: 1.4 !important; margin-bottom: 5px !important; }
  [data-m~="signoff"] { padding-top: 8px !important; margin-top: 4px !important; }
  [data-m~="backhead"] { padding-bottom: 8px !important; margin-bottom: 12px !important; }
  [data-m~="cardback"] { padding: 14px !important; }
  [data-m~="sig"] { font-size: 24px !important; }
  /* Enter: pull the whole block to true vertical centre on first paint */
  [data-m~="centerpad"] { padding: 18px !important; }
}