/* ── fluid media: nothing may force the page wider than the screen ──── */
img,svg,video,canvas,iframe,embed,object{max-width:100%}
img,video{height:auto}
pre,code,kbd,samp{max-width:100%}
pre{overflow-x:auto}
/* ── wide tables scroll inside their wrapper, not the page ──────────── */
.mt-table-wrap,.vi-table-wrap,.fl-wrap,.tscroll,.tabs,.um-card,.rs-page .rs-card{
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
/* ── small-screen fallbacks for grids that shipped without one ──────── */
@media (max-width:1000px){
  #rs-lower{grid-template-columns:1fr !important}
  #sa-pane-dw .sa-kpis{grid-template-columns:repeat(2,1fr) !important}
  .rs-panel{grid-template-columns:1fr !important}
  .sa-grid3{grid-template-columns:1fr !important}
  .cov-row{grid-template-columns:1fr !important;gap:8px}
  /* raise the existing 44px comfort rule to the 48px minimum */
  button,.fbtn,.btn,a.fbtn,input[type="submit"]{min-height:48px}
  .sb-burger{width:48px;height:48px}
}
@media (max-width:620px){
  #sa-pane-dw .sa-kpis{grid-template-columns:1fr !important}
  /* inputs that declared a fixed min-width overflow a 360px viewport */
  #fl-loc,#fl-q,#rs-q,.rs-in,.fl-in,.fl-sel,.sa-sel,.rs-sel{
    min-width:0;width:100%;max-width:100%}
  .fl-chips{width:100%}
  .fl-chips>*{flex:1 1 auto;min-width:0}
  .rs-tools{width:100%}
  /* module tab strips scroll sideways rather than wrapping into a block */
  .sa-tabs,.fl-bar,.rs-hd-r{overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .sa-tab,.fl-bar>*,.rs-hd-r>*{flex:0 0 auto}
  .sa-kpi-v{font-size:23px}
  .fl-attrs,.fl-fam,.fl-loc{max-width:none}
}
/* ══ TOUCH DEVICES ════════════════════════════════════════════════════
   No cursor to hover with, so targets get bigger and every hover-only
   affordance becomes permanently visible.                              */
@media (hover:none){
  /* ── 48x48 minimum tap targets ────────────────────────────────────── */
  button,a.fbtn,.fbtn,.btn,[role="button"],summary,
  input[type="submit"],input[type="button"],input[type="reset"],
  select,textarea,input[type="text"],input[type="search"],
  input[type="email"],input[type="password"],input[type="number"],
  .sa-sel,.fl-sel,.rs-sel,.rs-in,.fl-in,.fl-btn,.sa-tab,
  .fl-dd-b,.rs-seg button,.fl-tab{min-height:48px}
  /* icon-only controls: these were 17-30px square */
  .sa-dl,.rs-dl,.fl-ico,.fl-exp,.fl-x,.fl-pg button,
  .mt-del,.mt-close,.sb-burger{
    min-width:48px;min-height:48px;
    display:inline-flex;align-items:center;justify-content:center}
  /* the switch stays visually small; the label around it is the target */
  .sa-tg,.fl-tg,.rs-tg{min-height:48px}
  .fl-more{display:inline-flex;align-items:center;min-height:48px}
  /* checkboxes are the smallest target in the findings table */
  input[type="checkbox"],input[type="radio"],.fl-cb{width:22px;height:22px}
  table.fl td:first-child,table.fl th:first-child{min-width:48px}
  .fl-opt,.sa-opt{min-height:48px}
  /* ── space between adjacent links so a thumb cannot hit two ───────── */
  .fl-chips{gap:10px}
  .rs-hd-r{gap:12px}
  .fl-pg{gap:8px}
  .sa-tabs{gap:6px}
  .fl-bulk{gap:10px}
  .sb-item{margin-bottom:3px}
  nav a+a{margin-left:10px}
  td a+a,.sa-legend a+a,.rs-note a+a,.fl-loc a+a{margin-left:12px}
  .rs-hd-r>*+*,.fl-tools>*+*{margin-left:2px}
  /* ── nothing important may hide behind :hover ─────────────────────── */
  .mt-row .mt-del{opacity:1}
  .pf-tab{opacity:1}
  .sa-dl,.rs-dl,.fl-ico,.fl-exp,.fl-x{opacity:1}
  /* ── tap feedback, since there is no hover cue ────────────────────── */
  button:active,.fbtn:active,.btn:active,.sa-tab:active,.fl-btn:active,
  .fl-ico:active,.sa-dl:active,.rs-dl:active,.fl-dd-b:active,
  .rs-seg button:active{filter:brightness(1.3)}
  table.fl tr.r:active td,table.rs-t tr:active td,
  table.sa-tbl tr:active td{background:var(--bg3)}
  a:active{opacity:.72}
}
/* ══ PHONE LEGIBILITY & TAP FLOOR ═════════════════════════════════════
   390px audit findings: uppercase mono micro-labels render at 9-9.5px
   (sidebar section headers, KPI kickers, grade legend, panel headers)
   and a few controls collapse to 24-31px (.ipi-count chips, .mt-close,
   .btn when the accessibility layer's 24px floor wins the cascade).
   Phone-only floors, !important so they are the last word regardless of
   layer order above. */
@media (max-width:620px){
  .sb-sect span,.sb-ctx-l,.sb-sublabel,.sb-pop-h,
  .mt-active,.mt-panel-kicker,.mt-fact-l,.mt-reco-badge,.mt-vuln-kev,
  .es-l,.sd-kicker,.sd-lbl,.ev-kpi-l,.vi-srcs-l,.vi-modal-field .l,
  .hud-panel .ph,.spark-l span,
  [style*="font-size:9.5px"],[style*="font-size:9px"],
  [style*="font-size:8.5px"],[style*="font-size:8px"]{
    font-size:11px !important}
  .mt-close{min-width:38px !important;min-height:38px !important}
  .ipi-count{min-height:34px !important}
  .btn,a.fbtn,.fbtn{min-height:44px !important}
}