/*
  Mobile stopgap.

  This is NOT the responsive design. It is a narrow fix for one specific
  failure: on a phone the page scrolls sideways and content gets clipped,
  which makes the app feel broken before anyone reads a question.

  The viewport meta tag was already correct on every page, so that was
  not the cause. The cause is fixed pixel widths — modals at 520-860px,
  sidebars at 200-250px, panels at 220-300px — which are wider than a
  phone and push the document out. A 380px .modal-box on a 360px screen
  overflows by 20px, and the browser lets the whole page scroll to show
  it.

  ---- Why a separate file, loaded last ----

  styles.css loads first, and five more stylesheets load after it
  (annotate, ai-ui, portals, study-tools, worksheet), several carrying
  their own fixed widths. An override appended to styles.css would be
  beaten by every one of them at equal specificity. Loading this last is
  what makes it actually apply, and keeping it separate means the real
  responsive pass can delete this file in one move rather than picking
  overrides out of a 1900-line stylesheet.

  It declares no @page rules, so worksheet.css keeps its print margins.

  ---- Deliberately not done here ----

  No overflow-x: hidden on body. It would mask the symptom while leaving
  content unreachable off-screen, and it breaks position: sticky in most
  browsers. Fixing the widths is the actual repair; hiding the scrollbar
  is not.
*/

/* iOS inflates font sizes in landscape unless told not to. */
html {
  -webkit-text-size-adjust: 100%;
}

/* Nothing embedded should ever be able to widen the document. Applies at
   every size, not just on phones — a 1200px-wide diagram overflows a
   laptop too. */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* Wide-by-nature content scrolls inside its own box rather than taking
   the page with it. */
pre,
table,
.bank-table-wrap,
.tax-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Long unbroken strings — pasted URLs, API keys, long ids — are a common
   overflow source in inputs and read-only fields. */
input,
textarea,
select {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  /* ---- Dialogs and floating panels ----
     Every one of these was a fixed px width. min() keeps the desktop
     size intact and only shrinks once the viewport is narrower, so no
     large-screen layout changes. */
  .modal-box,
  .pack-modal,
  .pack-modal-wide,
  .bank-modal,
  .tax-modal,
  .acct-modal,
  .board-dash,
  .ai-modal,
  .jam-modal,
  .sg-modal,
  .ws-picker {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }

  /* Popovers are absolutely positioned from a button's rect, so on a
     narrow screen they can start near the right edge and run off it.
     Pinning both edges keeps them on screen wherever the button is. */
  .study-settings-panel,
  .ws-menu,
  .pw-panel {
    width: auto;
    max-width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    box-sizing: border-box;
  }

  /* ---- Side columns ----
     Stack instead of sitting beside the main column. Each was a fixed
     width in a flex row, which is what forced the row wider than the
     screen. */
  .app-layout,
  .quiz-layout,
  .board-dash-body {
    flex-direction: column;
  }

  .app-sidebar,
  .diagram-panel,
  .bd-side {
    width: 100%;
    max-width: 100%;
  }

  /* Flex and grid children default to min-width:auto, which refuses to
     shrink below their content and is the usual reason a "responsive"
     row still overflows. */
  .app-main,
  .quiz-main,
  .home-wrap,
  .shelf-card,
  .bd-main {
    min-width: 0;
  }

  /* Padding tuned for a 1040px column wastes a third of a phone screen. */
  .home-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header actions wrap rather than pushing the header wide. */
  .app-header-row,
  .modal-actions,
  .bank-foot .modal-actions {
    flex-wrap: wrap;
  }
}

/* Tap targets. 44px is the long-standing accessibility floor and roughly
   the width of an adult fingertip; several controls here are ~28px. */
@media (max-width: 720px) and (pointer: coarse) {
  .btn,
  .ssp-key-test,
  .ws-tab-add,
  .pb-avatar {
    min-height: 44px;
  }
}