/* PASS 93.4 — FINAL MOBILE / TABLET QA + LAUNCH HARDENING
   Scope: responsive containment, touch ergonomics, lower-page coherence, Studio/Radio Maker viewport safety.
   Intentionally does NOT alter player/audio logic, PayPal logic, D1/R2, AutoDJ, EQ processing, or fingerprint logic. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  overflow-x:hidden;
  min-width:0;
}
img,video,iframe,canvas,svg{max-width:100%}
button,input,select,textarea{max-width:100%}

/* Never allow a long URL/title/code-like value to blow out a phone layout. */
.hero-copy,.hero-radio,.content-section,.glass-panel,
.builder-shell,.studio-shell,.builder-stage,.studio-stage,
.ai1-modal-card,.billing-card,
.world-card,.artist-card,.station-tile,.host-card,
.competition-card,.plan-card,.maker-demo,.tech-node{
  min-width:0!important;
}
.hero-copy p,.content-section p,.section-head p,
.world-copy p,.station-tile p,.host-body p,
.quality-note,.live-meta,.builder-stage p,.studio-stage p{
  overflow-wrap:anywhere;
}

/* ---------------- TABLET: 761–1100 ---------------- */
@media (min-width:761px) and (max-width:1100px){
  .section-shell{width:min(calc(100% - 24px),1420px)!important}
  .content-section{padding:18px!important;border-radius:20px!important}
  .section-head{gap:16px!important;margin-bottom:14px!important}
  .section-head h2{font-size:clamp(27px,4vw,40px)!important}
  .section-head p{font-size:12px!important;line-height:1.48!important}

  /* Master Control stays complete but does not crush three columns into tablet width. */
  #control-deck .deck-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  #control-deck .console-channel{grid-column:1/-1!important}
  #control-deck .console-routing{grid-column:auto!important}

  /* Lower homepage: useful density, no 4–6 column postage stamps. */
  #artists .artist-grid,
  #network .station-wall,
  #hosts .host-carousel,
  #competitions .competition-grid,
  #history .history-line{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .feature-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .maker-demo-panels{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .ai1-video-feature{width:min(calc(100% - 24px),1180px)!important}
  .ai1-video-frame{width:min(860px,100%)!important}

  /* Studio / Maker overlays must fit landscape tablets without clipped footers. */
  .builder-shell,.studio-shell{
    width:min(calc(100vw - 20px),1260px)!important;
    height:min(94dvh,980px)!important;
    max-height:94dvh!important;
  }
  .builder-body,.studio-layout{min-height:0!important}
  .builder-stage,.studio-stage{min-height:0!important;overflow:auto!important}
}

/* ---------------- PHONE: <=760 ---------------- */
@media (max-width:760px){
  :root{--p934-edge:8px}

  body{padding-bottom:env(safe-area-inset-bottom,0px)}
  .section-shell{width:calc(100% - (var(--p934-edge) * 2))!important}
  .content-section,
  .ai1-video-panel,
  .final-call,
  .awards-shell,
  .maker-preview{
    padding:12px!important;
    border-radius:16px!important;
  }

  /* Headings stay dramatic but stop consuming half a phone screen. */
  .section-head{display:block!important;margin-bottom:11px!important}
  .section-head h2{font-size:clamp(24px,8.2vw,34px)!important;line-height:1!important;margin:5px 0 0!important}
  .section-head p{font-size:12px!important;line-height:1.45!important;margin-top:8px!important}
  .mini-label{font-size:8px!important;letter-spacing:.12em!important}

  /* First screen final phone fit — no horizontal spill, no tiny action targets. */
  .hero.section-shell{width:calc(100% - 12px)!important}
  .hero-copy,.hero-transmit-card,#control-deck{width:100%!important;max-width:100%!important}
  .hero-copy .hero-lede{font-size:12px!important;line-height:1.45!important}
  .hero-copy .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .hero-copy .hero-actions button{width:100%!important;min-height:42px!important;font-size:11px!important}
  .hero-copy .hero-split{grid-template-columns:1fr!important}
  .hero-copy .hero-split p{font-size:10px!important}
  .hero-copy .signal-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-copy .signal-ribbon>div{min-width:0!important}

  /* Master Control: all modules remain; each gets a usable phone width. */
  #control-deck .deck-head{align-items:flex-start!important}
  #control-deck .deck-clock{display:none!important}
  #control-deck .deck-grid{grid-template-columns:minmax(0,1fr)!important}
  #control-deck .console-channel,
  #control-deck .console-eq,
  #control-deck .console-routing{grid-column:auto!important;width:100%!important}
  #control-deck .transport-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  #control-deck .transport{width:100%!important;min-width:0!important;min-height:38px!important;font-size:9px!important}
  #control-deck .preset-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #control-deck .preset-row button{min-height:34px!important;font-size:8px!important}
  #control-deck .route{min-height:48px!important}
  #control-deck .route b{font-size:10px!important}
  #control-deck .route small{font-size:8px!important}
  #control-deck .deck-footer{display:flex!important;flex-wrap:wrap!important}
  #control-deck .deck-footer span{font-size:7px!important}

  /* Featured video is 16:9 and never becomes a giant slab. */
  .ai1-video-feature{width:calc(100% - 16px)!important;padding:8px 0 14px!important}
  .ai1-video-panel{padding:9px!important}
  .ai1-video-head h2{font-size:21px!important;line-height:1!important}
  .ai1-video-head p{font-size:11px!important;line-height:1.4!important}
  .ai1-video-frame{width:100%!important;aspect-ratio:16/9!important;min-height:0!important;overflow:hidden!important}
  .ai1-video-frame iframe,.ai1-video-frame video{width:100%!important;height:100%!important;aspect-ratio:16/9!important;display:block!important}

  /* Lower homepage: one deliberate column, not miniature desktop grids. */
  .split-worlds,
  #artists .artist-grid,
  #network .station-wall,
  #hosts .host-carousel,
  #competitions .competition-grid,
  #history .history-line,
  .feature-stack,
  .plan-grid,
  .maker-demo-panels,
  .award-categories{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .world-card{min-height:390px!important;border-radius:17px!important}
  .world-copy{left:15px!important;right:15px!important;bottom:15px!important}
  .world-copy h2{font-size:31px!important;line-height:1!important}
  .world-copy p{font-size:12px!important;line-height:1.45!important}
  .chips{gap:5px!important;margin:10px 0!important}
  .chips span{font-size:9px!important;padding:6px 8px!important}
  .artist-card,.station-tile,.host-card{border-radius:15px!important}
  .station-wall,.host-carousel,.artist-grid{margin-top:8px!important}

  /* The orbital engine becomes a readable vertical stack on phones. */
  #engine.tech-orbit{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:12px!important;
  }
  #engine .tech-core,
  #engine .tech-node{
    position:static!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    transform:none!important;
    inset:auto!important;
  }
  #engine .tech-core{padding:16px!important;border-radius:16px!important}
  #engine .tech-node{padding:10px 12px!important;border-radius:12px!important}

  /* Campaign / gallery controls stay inside the viewport. */
  .ai1-slider{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .ai1-slider-track{min-width:0!important}
  .ai1-slide img{width:100%!important;height:auto!important;display:block!important}
  .ai1-slider-controls{gap:6px!important;flex-wrap:wrap!important}

  /* Final CTA no longer looks like another giant hero. */
  .final-call{padding:22px 14px!important}
  .final-call h2{font-size:clamp(25px,8.5vw,34px)!important;line-height:.98!important}
  .final-call p{font-size:12px!important;line-height:1.46!important}
  .final-call .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .final-call .hero-actions button{width:100%!important;min-height:42px!important}
  .footer{padding:18px 8px calc(92px + env(safe-area-inset-bottom,0px))!important;font-size:10px!important}

  /* Radio Maker / Studio: no hidden save/footer/action buttons on small screens. */
  .builder-overlay,.studio-overlay{padding:4px!important}
  .builder-shell,.studio-shell{
    width:calc(100vw - 8px)!important;
    height:calc(100dvh - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  .builder-head,.studio-head{min-height:58px!important;height:auto!important;padding:8px 10px!important}
  .builder-body,.studio-layout{min-height:0!important;height:auto!important;overflow:hidden!important}
  .builder-nav,.studio-menu{
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:thin;
  }
  .builder-stage,.studio-stage{
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:11px!important;
    padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important;
  }
  .builder-foot,.studio-foot{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    min-height:58px!important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;
    background:rgba(4,11,17,.97)!important;
    backdrop-filter:blur(16px)!important;
  }
  .builder-foot button,.studio-foot button,
  .builder-stage button,.studio-stage button{
    min-height:42px;
  }
  .builder-stage input,.builder-stage select,.builder-stage textarea,
  .studio-stage input,.studio-stage select,.studio-stage textarea{
    font-size:15px!important;
  }

  /* Upload rights certification remains impossible to miss. */
  .live-upload-row>.live-rights{scroll-margin-top:72px!important}
  .live-upload-row .live-rights-check{min-height:48px!important}
  .live-upload-row>.live-upload{min-height:46px!important;font-weight:900!important}

  /* PayPal / owner / report dialogs fit without clipped actions. */
  .billing-overlay,.ai1-modal-overlay{padding:8px!important}
  .billing-card,.ai1-modal-card{
    width:min(calc(100vw - 16px),620px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    overflow:auto!important;
    border-radius:16px!important;
  }

  /* Touch targets: functional controls only; decorative pills are excluded. */
  button,.primary-cta,.secondary-cta,
  .cinema-arrow,.ai1-slider-arrow,
  .builder-nav button,.studio-menu button{
    touch-action:manipulation;
  }
}

/* Very narrow phones: keep controls from becoming 2-pixel labels. */
@media (max-width:390px){
  .hero-copy h1,.hero h1{font-size:22px!important}
  .cinema-caption strong{font-size:22px!important}
  #control-deck .transport-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #control-deck .preset-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .signal-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .section-head h2{font-size:26px!important}
}

/* Accessibility / keyboard QA — visible focus without redesign. */
:where(button,a,input,select,textarea):focus-visible{
  outline:2px solid color-mix(in srgb,var(--a1) 72%,white)!important;
  outline-offset:2px!important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}