/* ============================================================
   iCHARLES V6.0.3 — VISUAL-QA CORRECTIONS
   Driven by the first automated screenshot pack.
   Locked Iko identity unchanged.
   ============================================================ */

/* ---- HEADER: keep the interface in one intentional row ---- */
body.v60-ghostops .v60-header-micro{
  display:none!important;
}
body.v60-ghostops .v60-header-tools{
  flex:0 0 auto!important;
  margin-left:8px!important;
}
@media(min-width:1280px){
  body.v60-ghostops .v4-unified-nav{
    gap:clamp(8px,1.05vw,16px)!important;
  }
  body.v60-ghostops .v4-unified-nav a{
    padding-inline:9px!important;
  }
  body.v60-ghostops .v60-theme-toggle{
    min-width:76px!important;
  }
}

/* ---- HOME: explicit two-column placement at every real desktop width ----
   V6.0.1 fixed 821–1279, but the QA pack exposed the same placement conflict
   at 1440 where Iko dropped below the first viewport. */
@media(min-width:821px){
  body.v60-ghostops-home .clarity-hero{
    grid-template-rows:1fr!important;
    align-items:center!important;
  }
  body.v60-ghostops-home .hero-copy{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    transform:none!important;
  }
  body.v60-ghostops-home .hero-core{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:stretch!important;
    margin:0!important;
    transform:none!important;
  }
}
@media(min-width:1280px){
  body.v60-ghostops-home .clarity-hero{
    grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr)!important;
    gap:clamp(36px,4vw,72px)!important;
    padding-top:44px!important;
    padding-bottom:74px!important;
  }
  body.v60-ghostops-home .hero-copy{
    max-width:700px!important;
  }
  body.v60-ghostops-home .hero-core{
    min-height:680px!important;
  }
  body.v60-ghostops-home .iko-v5-core-logo{
    width:min(44vw,630px)!important;
    top:49%!important;
  }
  body.v60-ghostops-home .iko-v5-core-orbit{
    width:min(48vw,680px)!important;
    top:49%!important;
  }
  body.v60-ghostops-home .iko-v5-core-rail{
    width:min(57vw,820px)!important;
    top:76%!important;
  }
}

/* ---- LIGHT THEME: Ghost Ops "ice console" rather than washed gray ---- */
html[data-ui-theme="light"]{
  --v60-bg:#eef6fd!important;
  --v60-bg-soft:#e5f0fa!important;
  --v60-surface:rgba(255,255,255,.94)!important;
  --v60-surface-2:rgba(247,251,255,.96)!important;
  --v60-surface-3:rgba(232,244,253,.88)!important;
  --v60-text:#102840!important;
  --v60-heading:#061b2f!important;
  --v60-muted:#405b73!important;
  --v60-muted-2:#647a90!important;
  --v60-line:rgba(19,128,190,.25)!important;
  --v60-line-strong:rgba(0,171,224,.48)!important;
}
html[data-ui-theme="light"] body.v60-ghostops{
  background:
    radial-gradient(circle at 12% 16%,rgba(0,210,244,.07),transparent 28rem),
    radial-gradient(circle at 84% 72%,rgba(215,45,213,.055),transparent 30rem),
    linear-gradient(135deg,#f7fbff 0%,#edf6fd 54%,#f8f3ff 100%)!important;
}
html[data-ui-theme="light"] body.v60-ghostops .iko-v5-atmosphere>img{
  opacity:.075!important;
  filter:saturate(.62) contrast(.9) brightness(1.22)!important;
}
html[data-ui-theme="light"] body.v60-ghostops-home .iko-v5-atmosphere>img{
  opacity:.20!important;
  filter:saturate(.80) contrast(.95) brightness(1.08)!important;
}
html[data-ui-theme="light"] body.v60-ghostops p,
html[data-ui-theme="light"] body.v60-ghostops .lead,
html[data-ui-theme="light"] body.v60-ghostops .story p,
html[data-ui-theme="light"] body.v60-ghostops .v45-service-copy p,
html[data-ui-theme="light"] body.v60-ghostops .v45-section-head p,
html[data-ui-theme="light"] body.v60-ghostops .contact-copy p,
html[data-ui-theme="light"] body.v60-ghostops main#case-main .copy p{
  color:#405b73!important;
  opacity:1!important;
}
html[data-ui-theme="light"] body.v60-ghostops .hero h1 span,
html[data-ui-theme="light"] body.v60-ghostops .section-title span{
  color:transparent!important;
  -webkit-text-stroke:1px rgba(27,83,119,.19)!important;
  opacity:.74!important;
}
html[data-ui-theme="light"] body.v60-ghostops .iko-v5-page-mark{
  opacity:.13!important;
}
html[data-ui-theme="light"] body.v60-ghostops .identity-panel,
html[data-ui-theme="light"] body.v60-ghostops .terminal,
html[data-ui-theme="light"] body.v60-ghostops .wizard-shell,
html[data-ui-theme="light"] body.v60-ghostops .studio-intro-map,
html[data-ui-theme="light"] body.v60-ghostops .privacy-grid,
html[data-ui-theme="light"] body.v60-ghostops .sent-box,
html[data-ui-theme="light"] body.v60-ghostops .v48-sent-box,
html[data-ui-theme="light"] body.v60-ghostops .v45-service{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(31,130,190,.24)!important;
  box-shadow:0 18px 48px rgba(42,85,118,.10)!important;
}

/* ---- MOBILE: eliminate the horizontal clipping visible across pages ---- */
@media(max-width:820px){
  html,
  body.v60-ghostops{
    overflow-x:hidden!important;
    max-width:100%!important;
  }

  body.v60-ghostops .shell,
  body.v60-ghostops main,
  body.v60-ghostops main>section{
    max-width:100%!important;
  }

  body.v60-ghostops main h1{
    width:auto!important;
    max-width:100%!important;
    font-size:clamp(42px,12.7vw,54px)!important;
    line-height:.91!important;
    letter-spacing:-.055em!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.v60-ghostops main h1 span{
    white-space:normal!important;
    max-width:100%!important;
  }

  body.v60-ghostops-home .hero-copy h1{
    font-size:clamp(44px,13vw,56px)!important;
    max-width:100%!important;
  }

  body.v60-ghostops .hero,
  body.v60-ghostops .live-app-hero,
  body.v60-ghostops .studio-intro{
    overflow:hidden!important;
  }

  body.v60-ghostops header:not(.sample-site header){
    height:72px!important;
    min-height:72px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    overflow:visible!important;
  }

  body.v60-ghostops .v423-header-left{
    height:72px!important;
    min-height:72px!important;
    align-items:center!important;
    padding:0!important;
    min-width:0!important;
  }

  body.v60-ghostops .v423-menu-button{
    width:58px!important;
    min-width:58px!important;
    min-height:52px!important;
    padding:0 8px!important;
  }

  body.v60-ghostops .brand{
    gap:8px!important;
    min-width:0!important;
  }
  body.v60-ghostops .brand img{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
  body.v60-ghostops .brand strong{
    font-size:10px!important;
    letter-spacing:.08em!important;
    white-space:nowrap!important;
  }

  body.v60-ghostops .v60-header-tools{
    position:absolute!important;
    right:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    z-index:30!important;
  }

  body.v60-ghostops .v60-theme-toggle{
    min-width:40px!important;
    width:40px!important;
    min-height:34px!important;
    padding:3px!important;
  }
  body.v60-ghostops .v60-theme-track{
    width:32px!important;
    height:24px!important;
  }
  body.v60-ghostops .v60-theme-knob{
    width:14px!important;
    height:14px!important;
    top:4px!important;
    left:3px!important;
  }
  html[data-ui-theme="light"] body.v60-ghostops .v60-theme-knob{
    transform:translateX(11px)!important;
  }
  body.v60-ghostops .v60-theme-dark-mark,
  body.v60-ghostops .v60-theme-light-mark{
    display:none!important;
  }

  body.v60-ghostops .lead,
  body.v60-ghostops .hero-lead,
  body.v60-ghostops .contact-copy p,
  body.v60-ghostops .story p{
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.6!important;
  }

  /* Large decorative page marks may not intrude into mobile title text. */
  body.v60-ghostops .iko-v5-page-mark{
    width:116px!important;
    max-width:30vw!important;
    right:-34px!important;
    opacity:.10!important;
  }
}
