/* rl-mobile.css - GLOBAL responsive & touch layer for the Supply Chain Lab.
   Injected into every page by the Lambda (render_html), so all 85+ tools get
   phone/tablet support without editing each file. Everything here is scoped
   to small screens or coarse pointers - desktop rendering is untouched.
   Students join classes by QR on their PHONES: this file is why that works. */

/* ---------- base hygiene (all sizes, zero visual change on desktop) ------ */
html{-webkit-text-size-adjust:100%;}
img,svg,video{max-width:100%;}
.rl-home,.as-home,.host-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;box-sizing:border-box;}
.rl-topbar-in{min-height:58px;box-sizing:border-box;}

/* ---------- touch devices: real tap targets, no iOS zoom-on-focus -------- */
@media (pointer:coarse){
  button,.btn,.gbtn,.solve,.solvebtn,.pill-btn,.stage-open,.nav-cta,.sc-go,
  .as-btn,.as-check,.rlh-btn,.rl-home,.rlh-pill,.host-pill{min-height:44px;}
  input[type=range]{min-height:36px;}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;}
  input[type=text],input[type=number],select,textarea{font-size:16px;min-height:40px;}
  .leaflet-bar a{width:34px !important;height:34px !important;line-height:34px !important;}
  a,button{-webkit-tap-highlight-color:rgba(0,0,84,.12);}
  /* 2026-09-06 design-audit (probe2): these small brand/help links measured 14-18px tall
     at 390px (the visible logo/text, not the tap target) on 140+ pages -- below the 24px
     WCAG 2.5.8 floor. min-height alone fixed the height but .rl-brand collapses to just
     its ~18px logo image in width once `.rl-brand span{display:none}` hides the text (see
     max-width:640px below), so horizontal padding is needed too; each is already
     display:inline-flex (or gets it here) so both take effect without resizing the logo. */
  .rl-brand,.lp-brand,.support-brand,.brand,.rl-back,.labhelp-full,.as-open,.al-open{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding-left:8px;padding-right:8px;box-sizing:border-box;
  }
}

/* ---------- tablet & below --------------------------------------------- */
@media (max-width:900px){
  /* the lab's recurring two-column layouts collapse to one column */
  .wrap,.wrap.grid,.grid,.data-wrap,.sc-grid,.split{grid-template-columns:1fr !important;}
  .wrap{max-width:100%!important;box-sizing:border-box;}
  .grid2>*{min-width:0;}
  .wrap{padding-left:16px !important;padding-right:16px !important;}
  .container{padding-left:18px !important;padding-right:18px !important;}
}

/* ---------- phones ------------------------------------------------------ */
@media (max-width:640px){
  body{overflow-x:hidden;}
  /* topbar: keep brand + Lab Home, drop the middle topic label */
  .rl-topbar-in{flex-wrap:nowrap;gap:6px;min-height:60px;padding:8px 12px !important;}
  .as-top-in{box-sizing:border-box;min-height:60px;padding:8px 12px!important;}
  .rl-topic{display:none !important;}
  .rl-brand{margin-right:auto;min-width:0;}
  .rl-brand span:last-child{font-size:13px;}
  .rl-home,.as-home,.rlh-hostbtn.rlh-inbar,.host-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px!important;padding:8px 14px;}
  .lp-nav a{display:inline-flex;align-items:center;min-height:44px;}
  .nav{padding:8px 0!important;}
  .nav .nav-cta,.nav .rlh-hostbtn{min-height:44px!important;}
  /* heroes */
  .hero{padding-left:16px !important;padding-right:16px !important;}
  .hero h1{font-size:28px !important;line-height:1.1;}
  .hero p{font-size:14px !important;}
  /* KPI tiles + button rows wrap cleanly */
  .kpis{grid-template-columns:repeat(2,1fr) !important;}
  .tiles{grid-template-columns:1fr 1fr !important;}
  .btns{flex-wrap:wrap;}
  .btns .btn,.btns .gbtn{flex:1 1 46%;min-width:0 !important;}
  .pills{flex-wrap:wrap;}
  /* control panels: sliders full width, labels stack */
  .stepper .slider,.ctrl input[type=range]{width:100% !important;}
  .field{flex-wrap:wrap;gap:8px;}
  /* edu band + cards breathe less */
  .edu-band{padding:0 12px !important;}
  .edu-card{padding:16px 14px !important;}
  .edu-grid{grid-template-columns:1fr !important;}
  /* maps get a phone-friendly height */
  #map,#vrp_map,#cog_map{height:380px !important;}
  /* data tables scroll inside their card instead of stretching the page */
  .card,.panel,.rl-panel,.lp-panel,.data-card,.control-card{min-width:0;max-width:100%;}
  .data-card table,.panel table,.edu-card table,.card table,.grid2 table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* modals & host overlay fit the screen */
  .as-modal,.fin,.rlh-card{max-width:calc(100vw - 24px) !important;}
  .rlh-qr img,.rlh-qr svg,.as-qr img,.as-qr svg{width:180px !important;height:180px !important;}
  /* index tool grid */
  .cards,.tool-grid{grid-template-columns:1fr !important;}
  /* chain game nodes stack (its own CSS handles the arrows) */
  .chain{grid-template-columns:1fr !important;}
  /* leaderboard rows */
  .lb-row{font-size:13px;}
  /* learning + assessment are placed together by lab-layout.js */
  #rl-tools-dock{padding-bottom:env(safe-area-inset-bottom);}
  /* Bottom chrome lanes. The centred mobile Run bar (#rlh-fab, injected by
     rl-host on every game; #fab_bar on the VRP/CoG family) and the Learning
     pill both anchored at bottom:16px, so on phones the pill sat under the
     Run bar on every tool that has one. The Run bar keeps the thumb zone;
     the pill moves one lane up only when a visible run bar exists. */
  body:has(#fab_bar:not([hidden])) #ll-pill,body:has(#rlh-fab) #ll-pill,
  body:has(.labhelp-band) #ll-pill{bottom:calc(74px + env(safe-area-inset-bottom))!important;}
}

/* ---------- very small phones ------------------------------------------ */
@media (max-width:380px){
  .kpis{grid-template-columns:1fr 1fr !important;}
  .hero h1{font-size:24px !important;}
  .scen button{min-width:90px;font-size:11.5px;}
}

/* QA 2026-10-03: leave room under the content for the floating Run bar, like the Learning pill */
body:has(#rlh-fab)::after{content:"";display:block;height:72px}