/* SuusStudio™ UI V0.3 · release integrity fixes */

@media (min-width:761px){
  /* V4.4 used the founder ::after as a large blurred glow. V0.3 reuses it as the small identity label, so every inherited geometry/filter property must be reset. */
  .v4-shell .v4-founder::after{
    inset:16px 16px auto auto!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    transform:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
}

@media (max-width:760px){
  /* Mobile hero must stay visibly inside the viewport. Desktop max-content spans caused glyph clipping inside the scene's overflow clip. */
  .v4-shell .v4-hero-copy{
    width:100%!important;
    max-width:100%!important;
    padding-top:42px!important;
  }
  .v4-shell .v4-hero-copy h1{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(3.05rem,16.5vw,4.65rem)!important;
    line-height:.72!important;
    letter-spacing:-.052em!important;
    overflow:visible!important;
  }
  .v4-shell .v4-hero-copy h1 span{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    overflow:visible!important;
  }
  .v4-shell .v4-hero-copy h1 span:nth-child(2){
    width:calc(100% - 12px)!important;
    margin-left:12px!important;
  }
  .v4-shell .v4-hero-copy h1 span:nth-child(3){
    margin-left:0!important;
  }

  /* Long editorial display words must remain whole on the two narrowest supported phone widths. */
  .v4-shell #work .v4-scene-head h2,
  .v4-shell #worlds .v4-scene-head h2{
    max-width:100%!important;
    font-size:clamp(2.25rem,9.2vw,3.6rem)!important;
    line-height:.82!important;
    letter-spacing:-.045em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* Explicit hyphens are legal browser line-break opportunities. Keep these technical display terms on one line by scaling the heading to the available mobile measure. */
  .v4-shell #systems .v4-scene-head h2,
  .v4-shell #drone .v4-scene-head h2{
    max-width:100%!important;
    font-size:clamp(2.15rem,10vw,3rem)!important;
    line-height:.82!important;
    letter-spacing:-.045em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}

/* ===== Real-device phone repair =====
   Android Chrome exposes touch + coarse pointer media features. Several pre-V0.3 safety layers use
   (pointer:coarse), so viewport-only QA did not exercise this cascade. These overrides are intentionally
   scoped to phone-sized coarse-pointer devices and loaded last. */
@media (max-width:760px) and (pointer:coarse){
  /* HERO · the legacy founder name plate rendered as an opaque blank rectangle on Android.
     The compact IDENTITY / 01 marker remains visible, while the duplicate plate is removed on phones. */
  .v4-shell .v4-founder-label{
    display:none!important;
    visibility:hidden!important;
  }
  .v4-shell .v4-founder::after{
    inset:16px 16px auto auto!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    transform:none!important;
    filter:none!important;
    box-shadow:none!important;
  }

  /* VISUAL ARCHIVE · V4.6 coarse-pointer pseudo-artwork was still owning ::before/::after and hiding
     the actual V0.3 image, producing tall narrow strips. V0.3 owns the mobile dossier row completely. */
  .v4-shell .v4-world,
  .v4-shell .v4-world:nth-child(even){
    display:grid!important;
    grid-template-columns:minmax(104px,32%) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    min-height:168px!important;
    height:auto!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .v4-shell .v4-world::before,
  .v4-shell .v4-world::after,
  .v4-shell .v4-world:nth-child(even)::before,
  .v4-shell .v4-world:nth-child(even)::after{
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    background:none!important;
    clip-path:none!important;
    transform:none!important;
  }
  .v4-shell .v4-world>img,
  .v4-shell .v4-world:nth-child(even)>img{
    display:block!important;
    visibility:visible!important;
    opacity:.78!important;
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:168px!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:center!important;
    clip-path:none!important;
    transform:none!important;
    filter:saturate(.72) contrast(1.08)!important;
  }
  .v4-shell .v4-world>div,
  .v4-shell .v4-world:nth-child(odd)>div,
  .v4-shell .v4-world:nth-child(even)>div{
    position:relative!important;
    inset:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:stretch!important;
    padding:18px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-width:0!important;
  }
  .v4-shell .v4-world h3{
    font-size:clamp(1.72rem,7.5vw,2.55rem)!important;
    line-height:.88!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* DRONE · crop the canonical vector to the physical platform itself. Hide duplicate legacy HUD/text
     overlays and place the human-review gate in normal flow below the visual. */
  .v4-shell .v4-drone .v4-scene-head{
    padding-bottom:0!important;
  }
  .v4-shell .v4-drone .v4-scene-head::before,
  .v4-shell .v4-drone .v4-scene-head::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
  .v4-shell .v4-drone-stage{
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    margin-top:18px!important;
    overflow:hidden!important;
    background:#030407!important;
  }
  .v4-shell .v4-drone-image{
    position:relative!important;
    width:100%!important;
    height:360px!important;
    min-height:360px!important;
    margin:0!important;
    border:0!important;
    background:#030407 url('/v46-drone.svg') center 45%/215% auto no-repeat!important;
  }
  .v4-shell .v4-drone-image::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    pointer-events:none!important;
    background:
      linear-gradient(180deg,rgba(3,4,7,.98) 0%,rgba(3,4,7,.42) 18%,transparent 34%,transparent 68%,rgba(3,4,7,.60) 84%,rgba(3,4,7,.98) 100%),
      radial-gradient(circle at 50% 48%,transparent 40%,rgba(3,4,7,.28) 100%)!important;
  }
  .v4-shell .v4-drone-image>img,
  .v4-shell .v4-drone-image>canvas,
  .v4-shell .v4-drone-hud,
  .v4-shell .v4-scan,
  .v4-shell .v4-sensor-paths{
    display:none!important;
    visibility:hidden!important;
  }
  .v4-shell .v4-human-gate{
    position:relative!important;
    inset:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:0!important;
    padding:20px 18px 22px!important;
    background:linear-gradient(90deg,rgba(111,13,36,.18),rgba(5,5,8,.98) 32%)!important;
    border-left:2px solid var(--v03-oxblood-hi)!important;
    box-shadow:none!important;
  }

  /* AI TEAM · remove the duplicate legacy caption and let the canonical stamp participate in layout
     instead of absolutely occupying the same bottom line. Also remove inherited fixed-height shells. */
  .v4-shell .v4-ai-collective.v46-real-artwork-mounted{
    height:auto!important;
    min-height:0!important;
    padding:18px 16px 22px!important;
    overflow:hidden!important;
  }
  .v4-shell .v4-ai-collective.v46-real-artwork-mounted>span{
    display:none!important;
    visibility:hidden!important;
  }
  .v4-shell .v4-ai-collective.v46-real-artwork-mounted .v46-real-artwork-wall{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
  }
  .v4-shell .v4-ai-collective.v46-real-artwork-mounted .v46-real-artwork-stamp{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:18px 0 0!important;
    padding-top:14px!important;
    border-top:1px solid rgba(242,238,230,.12)!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:8px 10px!important;
  }
}

@media (max-width:400px){
  .v4-shell .v4-hero-copy h1{
    font-size:clamp(2.9rem,16vw,4.05rem)!important;
    line-height:.74!important;
  }
}

@media (max-width:340px){
  .v4-shell .v4-hero-copy h1{
    font-size:2.82rem!important;
    letter-spacing:-.045em!important;
  }
  .v4-shell .v4-hero-copy h1 span:nth-child(2){
    width:calc(100% - 8px)!important;
    margin-left:8px!important;
  }

  .v4-shell #work .v4-scene-head h2,
  .v4-shell #worlds .v4-scene-head h2{
    font-size:1.95rem!important;
    letter-spacing:-.035em!important;
  }

  .v4-shell #systems .v4-scene-head h2,
  .v4-shell #drone .v4-scene-head h2{
    font-size:2.05rem!important;
    letter-spacing:-.04em!important;
  }
}