/* tebIQ web — narrow / foldable cover-screen / half-screen layout support
   (it/web-foldables). Covers folded cover screens and split-screen phone
   views down to ~340px, plus dual-pane foldables (Surface Duo, an unfolded
   Z Fold) that report a hinge via env(viewport-segment-*).

   LOAD ORDER: linked as the LAST stylesheet in index.html, right before
   </body>, after every <script> that injects its own <style> at runtime via
   document.body.appendChild (app-mobile-shell.js, app-rounds-sheet.js, …).
   A <link> placed after all of them wins cascade ties against those injected
   rules and every inline <style> block earlier in the page.

   WHAT WAS ALREADY FINE (measured 2026-10-09, signed-in mock session, at
   340/360/540/720/1350px): app-mobile-shell.js already folds the header
   actions into the ≡ menu and the note actions into "Details & actions" at
   ≤1100px, and no page scrolled sideways at any width. So this file only
   fixes what the survey actually found, and adds no blanket
   `overflow-x:hidden` on html/body — that would hide future regressions
   from test_web_narrow_layout.js and turn <body> into a scroll container,
   which breaks every position:sticky header inside it.

   Nothing here changes behavior above 600px on a normal (single-screen)
   display: every rule is inside a max-width query or a
   (horizontal-viewport-segments: 2) query that only a dual-pane device
   matches. */

/* ---- ≤600px: phones, half-screen split view, Surface Duo single pane ---- */
@media (max-width: 600px) {
  /* Ask tebIQ pop-out: its backdrop sits at z-index 400, under the mobile
     shell's bar (#mshBar, 1250) and the red record button (#mshRec, 1080,
     62px at right:16px bottom:16px). Centred at 84vh, the panel's Ask button
     landed directly UNDER the record button (measured at 340/360/540px), so
     the clinician could not send a question without first scrolling the
     record button away. Fill the space between the bar and the record
     button instead, with 12px side gutters — both controls stay reachable. */
  body.msh-on .ask-backdrop {
    align-items: stretch;
    padding: calc(var(--msh-bar-h, 52px) + 8px) 12px
             calc(16px + 62px + 10px + env(safe-area-inset-bottom, 0px));
  }
  body.msh-on .ask-panel { width: 100%; height: auto; max-height: none; border-radius: 18px; }
}

/* ---- ≤400px: folded cover screens (Z Flip/Fold) and phone split-screen - */
@media (max-width: 400px) {
  /* Every fixed-overlay modal in index.html shares this inline-style prefix
     (position:fixed;inset:0;background:rgba(0,0,0,…);…padding:20px) and no
     class. 12px gutters instead of 20px give the panel inside (already
     width:100%) real room on a 340px screen. !important is what lets a
     stylesheet beat a non-!important inline style. */
  [style*="position:fixed;inset:0;background:rgba(0,0,0,"] {
    padding: 12px !important;
  }

  /* Ask pop-out header: at 340px "Ask tebIQ" wrapped onto two lines and the
     patient line truncated to "Synthe…". Smaller mark, tighter gaps. */
  .ask-head { gap: 8px; padding: 14px 12px 10px; }
  .ask-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .ask-title { font-size: 19px; white-space: nowrap; }
  .ask-fontctl button { width: 30px; height: 30px; }
  .ask-x { width: 32px; height: 32px; }

  /* Fixed 2-column grids with no narrow collapse of their own: the Rounds
     team grid and the clinical-calculator list/detail split. */
  .wa-r-teamgrid { grid-template-columns: 1fr !important; }
  #calcModal > div > div[style*="grid-template-columns:1fr 1.3fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Note toolbar / header rows wrap instead of clipping. app-mobile-shell.js
     already does this under body.msh-on; this keeps it true when the shell
     is switched off (localStorage.msh_disable). */
  .wa-head-main, .wa-actions-bar, .wa-tabs, #composerBar {
    flex-wrap: wrap !important;
  }
  .wa-actions-bar { justify-content: flex-start !important; }
}

/* ---- Dual-pane foldables: put the hinge in a gutter, not under content -
   (horizontal-viewport-segments: 2) only matches a device that reports two
   side-by-side screen segments (Surface Duo, an unfolded Z Fold in a
   dual-pane posture). Desktop layout there is rail 58px · list · note ·
   tebIQ column, and the hinge (x 540–574 on a Duo) landed in the middle of
   the note. Here .wa becomes a two-pane grid: the left screen holds the
   chart list above the tebIQ column, the right screen holds the note, and
   the gap between them is exactly the hinge. The env() fallbacks reproduce
   a plain 50/50 split, so a browser that matched the query without exposing
   the env vars still gets a sane layout. */
@media (horizontal-viewport-segments: 2) and (min-width: 1101px) {
  .wa {
    display: grid !important;
    grid-template-columns: calc(env(viewport-segment-right 0 0, 50vw) - 58px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px));
  }
  .wa > .wa-list { grid-column: 1; grid-row: 1; min-width: 0; max-width: none !important; }
  .wa > .wa-assist { grid-column: 1; grid-row: 2; min-width: 0; border-left: none;
    border-top: 1px solid var(--line); }
  .wa > .wa-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
}