/* Mobile responsiveness for the Policy Design workbench.
   Loaded ONLY by fire/index.html and gated entirely behind max-width media
   queries, so the desktop layout is byte-for-byte unchanged. Fixes the
   horizontal overflow caused by the engine's legacy fixed widths
   (.group 720px / .provision 710px) and absolutely-positioned option controls. */

@media (max-width: 760px) {
  /* never let the page itself force a horizontal scroll */
  html, body { max-width: 100%; }
  .shell, .wrap { max-width: 100%; box-sizing: border-box; }

  /* context bar: stack labels + full-width controls */
  .context { display: block; }
  .context label { display: block; margin: 10px 0 4px; font-weight: bold; }
  .context select, .context input {
    width: 100% !important; box-sizing: border-box; max-width: 100%;
  }
  .context .hint { margin-top: 8px; }

  /* engine output — drop the legacy fixed pixel widths */
  .outermost_container, .group, .groupname, .provision,
  .headerdivleft, .headerdivinput, .table-row {
    width: auto !important; max-width: 100% !important;
  }

  /* option controls were absolutely positioned at left:370–410px — let them flow */
  .option, .optionlist, .multioption, .radiobuttongroup {
    position: static !important; left: auto !important; width: auto !important; height: auto !important;
  }
  .level0 .radiobuttongroup, .level2 .radiobuttongroup { left: auto !important; }

  /* provisions stack: description on top, control beneath, full width */
  [kind="provision"] { display: block; width: auto !important; }
  [kind="provision"] select,
  [kind="provision"] input[type="text"] { max-width: 100%; box-sizing: border-box; }

  /* shrink the deep-nesting indents so level-5 rows don't run off-screen */
  .level3 { text-indent: 16px; } .level4 { text-indent: 20px; }
  .level5, .level6, .level7, .level8, .level9, .level10,
  .level11, .level12, .level13 { text-indent: 24px; }

  /* last-resort: if a deep row is still wider than the screen, scroll the plan
     region (with a visible scrollbar) instead of clipping it */
  #renderhost, #submissionwindow { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* chrome: flow nav, rules panel, modals wrap/fit instead of pushing width */
  .flownav, .flowctl, .pills { flex-wrap: wrap; gap: 8px; }
  .rules { width: auto; max-width: 100%; box-sizing: border-box; }
  .uw button { display: block; width: 100%; margin: 6px 0; }
  .modal .box { max-width: 94vw; }
}