/* Page & Parley — phone layout (≤760px). Screens are inline-styled, so these rules
   match on the rendered style attribute and override with !important.
   Opt-outs: data-m-keep (keep grid/flex as-is). Opt-ins: data-m-stack, data-m-hide, data-m-show. */
@media (max-width: 760px) {
  html, body { overflow-x: clip !important; max-width: 100vw; }
  body > * { overflow-x: clip; }
  [style*="grid-template-columns"] > *, [style*="display: flex"]:not([style*="flex-wrap: wrap"]) > * { min-width: 0 !important; }
  [data-m-show] { display: flex !important; }
  [data-m-hide] { display: none !important; }

  /* Every element fits the viewport (popovers excepted) */
  body *:not([style*="position: absolute"]):not([style*="position: fixed"]) { max-width: 100%; }
  body img, body video, body iframe { max-width: 100%; height: auto; }

  /* Page containers: tight gutters */
  [style*="margin: 0px auto"], [style*="margin: 0 auto"] { padding-left: 16px !important; padding-right: 16px !important; }
  section[style*="padding"], main[style*="padding"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Multi-column grids collapse to one column */
  [style*="grid-template-columns"]:not([data-m-keep]) { grid-template-columns: minmax(0, 1fr) !important; }
  [data-m-two] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Flex rows that hold a fixed-width sidebar/panel stack vertically */
  [style*="display: flex"]:not([style*="flex-direction: column"]):not([data-m-keep]):has(> aside) {
    flex-direction: column !important; align-items: stretch !important;
  }
  [data-m-stack] { flex-direction: column !important; align-items: stretch !important; }
  /* Cover + text + badge rows: the badge drops under the text instead of squeezing it */
  [style*="display: flex"]:not([style*="flex-direction: column"]):has(> [style*="flex: 1"][style*="min-width: 0"]) { flex-wrap: wrap !important; }
  [style*="display: flex"]:not([style*="flex-direction: column"]) > [style*="flex: 1"][style*="min-width: 0"] { flex: 1 1 180px !important; }
  aside[style] { width: 100% !important; flex-basis: auto !important; position: static !important; }

  /* Tables and tab strips scroll sideways */
  body table { display: block; overflow-x: auto; }
  /* Tab strips scroll sideways (scrollbar hidden) */
  [role="tablist"], [data-m-scroll],
  [style*="display: flex"][style*="border-bottom"]:has(> button, > a) { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  [role="tablist"] > *, [data-m-scroll] > *,
  [style*="display: flex"][style*="border-bottom"]:has(> button, > a) > * { flex-shrink: 0 !important; white-space: nowrap; }
  /* No visible scrollbars on phone */
  * { scrollbar-width: none !important; }
  *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

  /* Buttons: long labels wrap instead of overflowing */
  body .ppb { white-space: normal !important; height: auto !important; text-align: left; max-width: 100%; }
  /* Draft Drop character rows: name on its own line, role + remove below */
  [data-m-charrow] { flex-wrap: wrap !important; }
  [data-m-charrow] > input { flex: 1 1 100% !important; width: 100% !important; }
  [data-m-charrow] > select { flex: 1 1 0 !important; width: auto !important; }

  /* AppNav compact */
  [data-pp-brand] { flex: 1 1 auto !important; min-width: 0 !important; gap: 8px !important; }
  [data-pp-brand] img { width: 36px !important; height: 36px !important; }
  [data-pp-brand] span { font-size: 19px; }
  [data-pp-slogan] { display: none !important; }
  [data-pp-actions] { flex: 0 0 auto !important; gap: 2px !important; }
  [data-pp-chev] { display: none !important; }
  [data-pp-actions] > [data-m-show] { order: 9; margin-left: 4px; }
  /* Nav popovers become full-width sheets */
  [data-pp-pop] { position: fixed !important; left: 12px !important; right: 12px !important; top: 72px !important; width: auto !important; min-width: 0 !important; }
}