/* ============================================================================
   SmartStack Kiosk — PORTRAIT layout for the 32" floor-standing kiosk.

   Applies ONLY to tall screens 821px and wider (the kiosk is 1080x1920).
   Phones in portrait are 820px and under, so they keep the existing mobile
   rules; landscape laptops never match this at all. Loaded AFTER each page's
   own <style>, so these rules win. Remove the <link> to revert.

   Sizing is in vw (1vw = 1% of screen width) so the whole design scales with
   the screen. Ergonomics: the kiosk's screen bottom sits just above waist
   height, so the top of the screen is for LOOKING (robot, headline) and
   everything TAPPABLE lives in the lower two-thirds.
   ========================================================================== */
@media (orientation:portrait) and (min-width:821px){

  /* ---- Fill the screen exactly; a kiosk must never scroll ---------------- */
  html,body{height:100%;overflow:hidden}
  .frame{width:100vw;height:100dvh;min-height:0;overflow:hidden;
    padding:2.4vw 3.4vw 3vw}

  /* ---- Top bar: logo + sound + language flags --------------------------- */
  /* logo on its own line, then sound + the 15 language flags centred below it -
     they do not fit beside the logo at 1080px wide */
  .topbar{flex-wrap:wrap;gap:1.6vw}
  .logo{display:flex}                     /* phone rules hide it; kiosk shows it */
  .logoimg{height:5.4vw}
  .tbright{width:100%;flex:0 0 auto;justify-content:center;gap:1.6vw}
  /* sound sits top-right beside the logo so the flags get the whole second row */
  .tbright button[data-mute-toggle]{position:absolute;right:0;top:0;padding:1vw 2vw;font-size:1.9vw}
  .tbright button[data-mute-toggle] svg{width:2.6vw;height:2.6vw}
  #homeFlags{flex:0 1 auto;overflow:visible;flex-wrap:wrap;justify-content:center;gap:1vw}
  #homeFlags .ss-flag .fl{width:4.4vw}
  .lang{padding:1vw 1.8vw;font-size:1.9vw;border-radius:999px}
  .lang svg{width:2.4vw;height:2.4vw}

  /* ---- Hero: headline, robot, mic evenly spread down the screen ---------- */
  .hero{flex:1 1 auto;min-height:0;flex-direction:column;justify-content:space-evenly;
    gap:0;margin-top:0;text-align:center}
  .headline{order:1;flex:0 0 auto}
  .headline h1{font-size:7.6vw;line-height:1.04}
  .hbar{width:12vw;height:.8vw;margin:1.6vw auto 1.4vw}
  .hsub{font-size:2.5vw;max-width:22em}

  /* the robot is the shop-floor attractor — make it big */
  .robot{order:2;position:relative;left:auto;top:auto;transform:none;
    height:44vw;margin:0 auto}
  /* the drop-shadow is cast by the whole video rectangle, which shows as a grey
     box once the white background is blended away - drop it at kiosk size */
  .robot video{filter:brightness(1.07)}

  /* primary action: a large mic at chest height */
  .micblock{order:3}
  .micbtn{width:30vw;height:30vw}
  .micbtn::before{inset:-2vw;border-width:.3vw}
  .micbtn .micico{width:11vw;height:11vw}
  .miclbl-in{font-size:3vw;padding:0 1vw}

  /* ---- The two choice cards, low down where they're easy to reach -------- */
  .cards{flex-direction:column;height:auto;gap:1.8vw;margin-top:1.6vw;margin-bottom:0}
  .hcard{flex:0 0 auto;width:100%;max-width:none;height:auto;min-height:16vw;
    padding:2.4vw 3vw;gap:2.6vw;border-radius:2.6vw}
  .hcard .hc-ic{width:9vw;height:9vw;border-radius:2.2vw}
  .hcard .hc-t{font-size:3.6vw}
  .hcard .hc-s{font-size:2.1vw}
  .hcard .hc-arrow{width:6vw;height:6vw}

  /* ---- Welcome gate (tap a language to start) --------------------------- */
  .gate-wrap{padding:3vw 4vw 4vw}
  .gate-logo{height:7vw;margin-bottom:1vw}
  .gate-welcome{font-size:13vw}
  .gate-main{flex-direction:column;justify-content:space-evenly;gap:2.4vw;max-width:none}
  .gate-robot{height:auto}
  .gate-robot video{height:50vw;filter:brightness(1.07)}
  .gate-flags{flex:0 0 auto;align-content:start;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5vw;max-width:none;width:100%}
  .gate-flag{padding:1.5vw 1vw;gap:1vw;border-radius:2vw}
  .gate-flag .gf-fl{width:9.5vw}
  .gate-flag .gf-nm{font-size:1.8vw}
  .gate-cta{margin-top:2.6vw;gap:2vw}
  .gate-cta-tx{font-size:3.2vw}
  .gate-chev{font-size:4.2vw}

  /* ---- Idle attract loop ------------------------------------------------ */
  .at-robot{height:55vw}
  .at-head{font-size:6vw}

  /* ==========================================================================
     ASK SCREEN (prototype-ask.html) - robot up top, pickers within reach
     9 categories become 3x3 and 6 goals 3x2, instead of one cramped row each.
     ========================================================================== */
  .askview{flex-direction:column;align-items:stretch;gap:1.6vw}
  .stage{margin-top:1vw}
  .robotcol{flex:0 0 auto;width:100%;justify-content:flex-start;gap:1.1vw;margin-top:0}

  /* ---- THE TALK BAND (ask screen) ------------------------------------------
     Talking is the whole point of this product, so the mic is the biggest thing
     on the screen. Read left to right: the robot says who is listening, the mic
     is the one obvious action, and typing is a quiet fallback beside it. Stacked
     vertically (as it was) the mic could never be more than ~16vw wide; across
     the full width it more than doubles. DOM order is mic/robot/type, so the
     three are re-ordered with flex order. ------------------------------------ */
  .askview .robotcol{flex-direction:row;align-items:center;justify-content:center;
    gap:3vw;width:100%;margin-top:1.6vw}
  .askview .robotcol .pose{order:1;height:30vw}
  .askview .robotcol .miccol{order:2;flex:0 0 auto}
  .askview .robotcol .typebtn{order:3}
  .askview .micbig{width:34vw;height:34vw}
  .askview .micbig::before{inset:-1.8vw;border-width:.35vw}
  .askview .micbig .micico{width:12vw;height:12vw}
  .askview .micbig .miclbl-in{font-size:3.2vw}
  /* the fallback should read as secondary - a quiet card, not a rival to the mic */
  .askview .typebtn{flex-direction:column;width:20vw;padding:2.2vw 1.4vw;border-radius:2.6vw;
    gap:1.2vw;font-size:2vw;line-height:1.2;text-align:center}
  .askview .typebtn .tico{width:7vw;height:7vw}

  /* the plan screens keep the stacked column (no type button there) */
  .qview .robotcol .pose{height:26vw}
  /* same off-white-backdrop fix as the home robot: without it the video shows as
     a pale grey box once its white is blended away at this size */
  .robotcol .pose{filter:brightness(1.07)}
  .micbig{width:16vw;height:16vw}
  .micbig::before{inset:-1.4vw}
  .micbig .micico{width:6vw;height:6vw}
  .micbig .miclbl-in{font-size:1.9vw}
  .typebtn{padding:1.1vw 2.4vw 1.1vw 1.1vw;font-size:2.1vw;gap:1.2vw}
  .typebtn .tico{width:5vw;height:5vw}

  /* landing: headline + the three picker sections */
  .land-lead{font-size:3.8vw}
  .land-sub{font-size:2.2vw;margin:.8vw 0 1vw}
  /* overflow:auto is the safety net - if a translation runs long, this list
     scrolls instead of clipping the product buttons off the bottom */
  .picks{overflow:auto;gap:.7vw}
  .pick-h{font-size:1.7vw;gap:1.2vw;margin:.9vw 0 .3vw}
  .ph-ic{width:4vw;height:4vw}
  .pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3vw}
  .pbtn{min-height:12vw;font-size:2.2vw;border-radius:2vw;padding:1.5vw 1vw 1.1vw;gap:.9vw}
  .pbtn-ic{width:6vw;height:6vw}
  .pbtn-ul{width:3.4vw;height:.35vw}
  .goal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3vw}
  .goalcard{min-height:12.6vw;border-radius:2vw;padding:1.5vw 1.4vw;gap:.6vw}
  .goalcard .g-ic{height:4vw}
  .goalcard .g-ic svg{width:3.6vw;height:3.6vw}
  .goalcard .g-tt{font-size:2.3vw}
  .goalcard .g-ds{font-size:1.75vw}
  .goalcard .g-arrow{width:4.2vw;height:4.2vw}
  .prod-row{grid-template-columns:1fr 1fr;gap:1.3vw}
  .prodbtn{border-radius:2vw;padding:1.6vw;gap:1.4vw}
  .prodbtn .pr-ic{width:5.6vw;height:5.6vw;border-radius:1.6vw}
  .prodbtn .pr-t{font-size:2.3vw}
  .prodbtn .pr-s{font-size:1.8vw}

  /* answer state: spoken reply, follow-up chips, product cards */
  .acap{font-size:3.3vw}
  .asub{font-size:2.1vw}
  /* answer state: keep the reply and its buttons together as one block, centred
     in the space under the talk band - a short probe question then sits at a
     comfortable height instead of stranding the buttons mid-screen with a void
     beneath. "safe" centring falls back to top-aligned when a long answer
     overflows, so nothing can end up scrolled out of reach. */
  .askview .acol{justify-content:safe center}
  .askview .abody{flex:0 1 auto;margin-top:1.6vw}
  .chips{grid-template-columns:1fr 1fr;gap:1.3vw}
  .chip{font-size:2.1vw;min-height:8.5vw}
  .pcard{width:31vw}
  .amic{gap:1.6vw;margin-top:1.6vw;padding-top:1.4vw}
  /* the subject, and the way onto something else */
  .trow{gap:1.4vw;margin-bottom:1.4vw}
  .tchip{padding:1vw 2.2vw;font-size:2vw;gap:1vw}
  .newq{padding:1.1vw 2.6vw;font-size:2.2vw;gap:1.2vw;border-width:.3vw}
  .newq svg{width:2.6vw;height:2.6vw}
  .ahint{font-size:2vw;margin-top:1.4vw}
  .micdot{width:7vw;height:7vw}
  .miclbl{font-size:2vw}
  .btn{min-height:6vw;font-size:2.1vw;padding:0 2.4vw;border-radius:1.6vw}
  .thinkview .robowrap{height:34vw}

  /* the phone rules make every panel content-sized for page scrolling; the kiosk
     never scrolls the page, so restore the flex chain - panels share the height
     and a long list scrolls inside itself instead of being clipped */
  .stage{flex:1 1 auto;min-height:0}
  .askview,.acol,.landing{flex:1 1 auto;min-height:0}

  /* ==========================================================================
     BUILD MY PLAN (prototype-plan.html) - 9 questions, then the tiered plan
     ========================================================================== */
  .qview{flex-direction:column;align-items:stretch;gap:1.6vw}
  .qcol{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .progress{margin-bottom:1.4vw}
  .prog-row{font-size:1.8vw;margin-bottom:.8vw}
  .prog-bar{height:1vw}
  .q-title{font-size:4.4vw}
  .q-hint{font-size:2.2vw;margin-top:.6vw}
  /* align-content:end keeps the answers low on the screen, easiest to reach,
     whether a question has 3 options or 6. Leftover space sits under the
     question as breathing room, not between the answers and the button. */
  .opts{flex:1 1 auto;min-height:0;overflow:auto;grid-template-columns:1fr 1fr;gap:1.6vw;margin-top:1.8vw;align-content:end}
  .opt{min-height:16vw;border-radius:2vw;padding:1.8vw 2.2vw;font-size:2.9vw;gap:1.6vw}
  .opt .ochk{width:3.4vw;height:3.4vw}
  .opt.sel .ochk::after{font-size:2vw}
  .opts.budget{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opt.bud .bl{font-size:2.6vw}
  .opt.bud .bd{font-size:1.8vw}
  .opt.bud .btag{font-size:1.6vw;padding:.4vw 1.2vw}
  .nav{margin-top:1.8vw;gap:1.4vw}
  .building{flex:1 1 auto;min-height:0}
  .building .robowrap{height:34vw}

  /* the finished plan */
  .plan{flex:1 1 auto;min-height:0}
  .plan-hero{gap:1.6vw;margin-bottom:1.2vw}
  .plan-hero .av{width:7vw;height:7vw}
  .plan-title{font-size:3.6vw}
  .plan-sub{font-size:2vw}
  .tier-tabs{gap:.8vw;border-radius:1.8vw;padding:.7vw;margin-bottom:1.4vw}
  .tier-tab{padding:1.4vw .8vw;border-radius:1.4vw;font-size:2.2vw}
  .legend{font-size:1.7vw;gap:2.4vw;margin-bottom:1vw}
  .tier-why{font-size:1.9vw;border-radius:1.6vw;padding:1.4vw 1.8vw;margin-bottom:1.4vw}
  .scroll{flex:1 1 auto;min-height:0;overflow:auto}
  .pitem{gap:1.6vw;padding:1.6vw 0}
  .pdot{width:1.4vw;height:1.4vw;margin-top:1vw}
  .pname{font-size:2.6vw}
  .ptime{font-size:1.7vw;padding:.6vw 1.4vw}
  .pform{font-size:1.9vw}
  .preason{font-size:2vw}
  .pprice{font-size:2.1vw}
  .timing{margin-top:2vw;padding-top:1.6vw}
  .timing-h{font-size:2.1vw;margin-bottom:1.2vw}
  .timing-grid{grid-template-columns:1fr 1fr;gap:1.2vw}
  .timing-card{border-radius:1.4vw;padding:1.4vw 1.8vw}
  .timing-when{font-size:1.7vw}
  .timing-list{font-size:2vw}
  .plan-actions{gap:1.6vw;margin-top:1.4vw;padding-top:1.4vw}
  .total{font-size:2.2vw}
  .sheet{max-height:80dvh}
}