/* JOVAX · V6.8w MOBILE-FIRST
   Shared phone + tablet polish for hub, template, and all founder worlds.
   Lift-all: prefer these rules over one-offs. HF 0. */

/* —— Global safe-area + tap floor —— */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
.jovax-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;box-sizing:border-box;
  border-radius:12px;cursor:pointer;flex-shrink:0;
  border:1px solid var(--glass-border,var(--line,#ffffff18));
  background:var(--glass,rgba(255,255,255,.04));color:var(--gold-bright,var(--gold2,#e8d4a8));
}
.jovax-burger span{display:block;height:2px;border-radius:2px;background:currentColor;width:100%}
.jovax-nav-backdrop{display:none;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55)}
body.sn-open .jovax-nav-backdrop,
body.hub-nav-open .jovax-nav-backdrop,
body.pub-nav-open .jovax-nav-backdrop,
body.ws-nav-open .jovax-nav-backdrop{display:block}

/* Ensure primary actions clear floating mascot */
.world-content,.ws-body,.main,.content{
  padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
}

/* —— HUB (index.html inline shell) —— */
@media (max-width:980px){
  /* beat hub inline !important rail */
  .shell{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .shell > .rail,
  aside.rail{display:none!important}
  header.top{
    position:sticky;top:0;z-index:30;
    height:auto;min-height:56px;
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top,0px));
    gap:10px;flex-wrap:nowrap;
  }
  header.top .brand{font-size:16px;flex-shrink:0}
  header.top .brand b{display:none}
  header.top .search,
  header.top .op{display:none!important}
  header.top .spacer{flex:1;min-width:8px}
  .jovax-burger--hub{display:flex!important;margin-left:auto}
  header.top .nav{
    display:none;
    position:absolute;right:12px;top:calc(100% + 6px);z-index:75;
    flex-direction:column;gap:0;min-width:200px;padding:8px;
    border-radius:14px;border:1px solid var(--line,#ffffff18);
    background:rgba(10,9,8,.97);box-shadow:0 16px 40px rgba(0,0,0,.55);
  }
  body.hub-nav-open header.top .nav{display:flex}
  header.top .nav a{
    display:flex;align-items:center;
    min-height:44px;padding:12px 14px;border-radius:10px;
    font-size:13px;letter-spacing:.1em;
  }
  .legal-banner{
    position:static;top:auto;
    font-size:10px;line-height:1.4;padding:8px 12px;
    text-align:left;
  }
  .main{padding:16px 14px calc(88px + env(safe-area-inset-bottom,0px));overflow-x:hidden;max-width:100%}
  .hero{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto auto;
    gap:12px;min-height:0;margin:6px 0 24px;
  }
  .hero .hero-center{grid-column:1/-1;order:-1;padding:4px 0 8px}
  .hero-center h1{font-size:clamp(32px,9vw,48px)}
  .hero-center p{font-size:14px;max-width:42ch}
  .actions{gap:10px}
  .actions a{
    min-height:44px;padding:12px 16px;font-size:11px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .feat{min-height:0;padding:12px;box-sizing:border-box;max-width:100%}
  .feat-vis{min-height:200px;aspect-ratio:3/4;max-height:340px}
  .feat-vis img.port{object-fit:cover;object-position:center 12%}
  .feat b{font-size:22px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fw-card{min-height:0}
  .fw-art{height:auto;aspect-ratio:3/4;max-height:none}
  .fw-art img.port{object-fit:cover;object-position:center 10%}
  .fw-meta{padding:12px}
  .fw-meta b{font-size:18px}
  .fw-meta em{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:40px;margin-top:8px;
  }
  .focus{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .focus-tile{min-height:72px;padding:20px 10px}
  .tri{grid-template-columns:1fr!important}
  .section-h h2{font-size:24px}
  .tri .btn{min-height:44px;padding:12px 18px;display:inline-flex;align-items:center}
}

/* Hub phone tighten */
@media (max-width:640px){
  .hero{grid-template-columns:1fr!important;overflow-x:hidden;width:100%;max-width:100%}
  .hero .feat{max-width:100%;margin:0 auto;width:100%;box-sizing:border-box}
  .feat-vis{min-height:240px;max-height:380px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fw-art{aspect-ratio:3/4}
  .hero-center h1{font-size:clamp(30px,10vw,40px);line-height:.95}
  .script{font-size:20px}
  .actions a{width:100%;max-width:320px}
}

/* Hub tablet mid-width (not phone stack, not cramped desktop) */
@media (min-width:641px) and (max-width:980px){
  .hero{grid-template-columns:1fr 1fr!important}
  .hero .hero-center{grid-column:1/-1}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .focus{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .main{padding:20px 22px calc(88px + env(safe-area-inset-bottom,0px))}
  .feat-vis{min-height:260px;max-height:420px}
}

/* —— WORLD / TEMPLATE public (world-raise) —— */
@media (max-width:900px){
  .world-topbar{
    min-height:56px;height:auto;
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top,0px));
    gap:8px;
  }
  .jovax-burger--sidenav{display:flex!important}
  .sn-nav a{
    min-height:44px;padding:12px 14px;font-size:13px;letter-spacing:.08em;
  }
  .world-sidenav{
    padding-top:calc(16px + env(safe-area-inset-top,0px));
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  }
  .hero-cine{
    min-height:0;
    border-radius:18px;
  }
  .hero-cine .hc-copy{padding:22px 18px}
  .hero-cine h1{font-size:clamp(32px,9vw,48px);line-height:.95}
  .hero-cine .lede{font-size:14px;line-height:1.55}
  .hero-cine .cta-row{gap:10px}
  .hero-cine .cta-row .btn,
  .hero-cine .cta-row a{
    min-height:44px;padding:12px 18px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .hero-cine .hc-vis{
    min-height:320px;aspect-ratio:3/4;max-height:520px;
  }
  .hero-cine .hc-vis .portrait{
    object-fit:cover;object-position:center 12%;
  }
  .hero-cine .chips span{padding:8px 12px;font-size:10px}
  .art-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
  .art-card{min-height:132px;padding:14px}
  .art-card h3{font-size:16px}
  .proj-grid{grid-template-columns:1fr;gap:12px}
  .cta-banner{padding:18px 16px;border-radius:16px}
  .cta-banner .btn{min-height:44px}
  .world-content{padding:14px 14px calc(96px + env(safe-area-inset-bottom,0px))}
}

/* Tablet mid: 2-col density, drawer nav stays (native feel) */
@media (min-width:701px) and (max-width:1024px){
  .hero-cine{
    grid-template-columns:1.05fr .95fr!important;
    min-height:380px;
  }
  .hero-cine .hc-vis{
    min-height:100%;aspect-ratio:auto;max-height:none;
  }
  .hero-cine .hc-copy{padding:28px 24px}
  .art-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lower-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .world-content{padding:18px 20px calc(96px + env(safe-area-inset-bottom,0px))}
  .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:700px){
  .hero-cine{grid-template-columns:1fr!important}
  .hero-cine .hc-vis{order:-1;min-height:300px;max-height:420px;aspect-ratio:3/4}
  .hero-cine .hc-vis .portrait{object-position:center 8%}
  .art-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-grid,.lower-grid,.process-steps{grid-template-columns:1fr}
}

/* —— WORKSPACE / STUDIO (dual-surface) —— */
.jovax-burger--workspace{display:none}
@media (max-width:900px){
  .ws-shell{grid-template-columns:1fr!important;overflow-x:hidden;max-width:100vw}
  .ws-rail{
    position:fixed!important;left:0;top:0;bottom:0;
    width:min(280px,86vw);height:100vh;max-height:100vh;z-index:80;
    transform:translateX(-105%);transition:transform .22s ease;
    border-right:1px solid var(--glass-border);
    overflow:auto;-webkit-overflow-scrolling:touch;
    padding-top:calc(16px + env(safe-area-inset-top,0px));
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }
  body.ws-nav-open .ws-rail{transform:translateX(0)}
  .ws-rail nav a{min-height:44px;padding:12px 12px;font-size:12px}
  .ws-top{
    position:sticky;top:0;z-index:30;
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top,0px));
    background:rgba(10,9,8,.9);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--glass-border);
  }
  .jovax-burger--workspace{display:flex!important;order:-1}
  .ws-body{padding:16px 14px calc(96px + env(safe-area-inset-bottom,0px));max-width:100%}
  .ws-grid-2,.ws-grid-3,.ws-grid-4{grid-template-columns:1fr}
  .ws-hero h1{font-size:clamp(26px,6vw,36px)}
  .co-pillars,.co-stub-grid{grid-template-columns:1fr}
}
@media (min-width:701px) and (max-width:1024px){
  .ws-grid-2{grid-template-columns:1fr 1fr}
  .ws-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-stub-grid{grid-template-columns:1fr 1fr}
  .ws-body{padding:18px 20px calc(96px + env(safe-area-inset-bottom,0px))}
}

/* —— Mascot: clear CTAs + safe-area —— */
.jovax-mcb{
  right:calc(12px + env(safe-area-inset-right,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
@media (max-width:640px){
  .jovax-mcb{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .jovax-mcb .mcb-launcher{width:56px;height:56px;min-width:56px;min-height:56px}
  .jovax-mcb .mcb-panel{
    bottom:70px;width:calc(100vw - 20px);
    max-height:min(48vh,340px);
  }
  /* Prefer top panel on phone so primary CTAs stay thumb-reachable */
  .jovax-mcb .mcb-panel,
  .jovax-mcb.mcb-safe .mcb-panel{
    bottom:auto;top:calc(56px + env(safe-area-inset-top,0px));
    max-height:min(50vh,360px);
  }
  .jovax-mcb .mcb-quick button{min-height:36px;padding:8px 12px}
  .jovax-mcb .mcb-compose button.send{min-height:44px}
}
@media (min-width:641px) and (max-width:900px){
  .jovax-mcb.mcb-safe .mcb-panel,
  .jovax-mcb .mcb-panel{
    bottom:auto;top:64px;
  }
}

/* —— Readable type floor on small screens —— */
@media (max-width:640px){
  body{font-size:15px;line-height:1.5}
  .sec-h,.section-h h2{font-size:clamp(22px,6vw,28px)}
  .ux-cue{font-size:13px;line-height:1.45}
  .what-pills span,.chips span{min-height:32px;display:inline-flex;align-items:center}
  .btn,.btn-gold,.btn-outline,.btn-ghost{
    min-height:44px;padding:12px 18px;
  }
  .btn-sm{min-height:40px;padding:10px 14px}
}

/* Chrome app-shell rail hide (pages that use chrome.css shell) */
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .app-shell > .rail,.rail{/* hub handled above; chrome pages */}
}

/* —— STUDIO rail drawer (template + founder studios) · V6.8w template-first —— */
.studio-top{
  display:none;position:sticky;top:0;z-index:35;
  align-items:center;gap:10px;min-height:56px;
  padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));
  background:rgba(10,9,8,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.studio-top .st-brand{font-family:var(--font-serif);font-size:15px;color:var(--gold-bright,#e8d4a8);letter-spacing:.04em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jovax-burger--studio{display:none}
@media (max-width:900px){
  .studio-shell{grid-template-columns:1fr!important;overflow-x:hidden;max-width:100vw}
  .studio-rail{
    position:fixed!important;left:0;top:0;bottom:0;
    width:min(260px,82vw);height:100vh;max-height:100vh;z-index:80;
    transform:translateX(-105%);transition:transform .22s ease;
    flex-direction:column;align-items:stretch!important;gap:4px;
    padding:16px 12px;padding-top:calc(16px + env(safe-area-inset-top,0px));
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
    overflow:auto;-webkit-overflow-scrolling:touch;
    border-right:1px solid rgba(255,255,255,.12);
  }
  body.studio-nav-open .studio-rail{transform:translateX(0)}
  .studio-rail a{
    width:auto!important;min-height:44px;height:auto;padding:12px 14px;
    justify-content:flex-start;gap:10px;border-radius:12px;font-size:13px;
  }
  .studio-top{display:flex!important}
  .jovax-burger--studio{display:flex!important}
  .studio-hero{min-height:0}
  .studio-hero .copy{padding:20px 16px}
  .studio-hero h1{font-size:clamp(30px,8vw,44px)}
  .studio-hero .vis{
    min-height:300px;aspect-ratio:3/4;max-height:440px;order:-1;
  }
  .studio-hero .vis img.primary{object-fit:cover;object-position:center 12%}
  .studio-hero .duo{right:12px;bottom:12px}
  .studio-hero .duo figure{width:64px}
  .studio-hero .duo img{width:64px;height:64px}
  .studio-body{padding:16px 14px calc(96px + env(safe-area-inset-bottom,0px))}
  .studio-mods{grid-template-columns:1fr;gap:12px}
  .studio-split{grid-template-columns:1fr}
  .cta-row a{min-height:44px;display:inline-flex;align-items:center;padding:12px 16px}
  .proof span{min-height:36px;display:inline-flex;align-items:center;padding:8px 12px}
}
@media (min-width:701px) and (max-width:1024px){
  .studio-hero{grid-template-columns:1.05fr .95fr!important;min-height:360px}
  .studio-hero .vis{order:0;min-height:100%;aspect-ratio:auto;max-height:none}
  .studio-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-body{padding:20px 22px calc(96px + env(safe-area-inset-bottom,0px))}
}

/* —— Workspace topbar chips: no overlap with legal banner —— */
@media (max-width:900px){
  .ws-top{
    flex-wrap:wrap!important;align-items:center;row-gap:8px;
    min-height:56px;height:auto!important;
  }
  .ws-top .spacer{flex-basis:100%;height:0;margin:0;display:none}
  .ws-top .chip{max-width:100%;line-height:1.2}
  .ws-top .chip:nth-of-type(n+4){/* keep primary chips */}
  .ws-main > .legal-banner,
  .ws-main .legal-banner--slim{
    position:relative;z-index:1;clear:both;
    font-size:10px;line-height:1.4;padding:8px 12px;
  }
  .ws-hero h1{font-size:clamp(24px,6.5vw,34px);line-height:1.05}
  .wavi-guide{flex-wrap:wrap}
}


/* V6.9a P0 overflow + hub scroll feel */
html,body{overflow-x:hidden;max-width:100%}
.shell,.shell>div,.main{max-width:100%}
@media (max-width:700px){
  .shell{grid-template-columns:1fr!important}
  .fw-card .fw-meta span{-webkit-line-clamp:2}
  img.port,img.comp{max-width:100%;height:auto}
}
@media (prefers-reduced-motion:no-preference){
  .shell>div{scroll-behavior:smooth}
}