/*
  Shared shell polish layered above existing page-specific styles.
  This file is intentionally additive: it fixes responsive chrome and layout
  contracts without replacing the existing product surfaces.
*/

:root{
  --ac-shell-max:1240px;
  --ac-shell-glass:rgba(243,241,232,.92);
  --ac-shell-line:rgba(12,23,20,.14);
  --ac-shell-shadow:0 14px 36px rgba(7,17,29,.08);
}

html{min-width:0;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100vw}
.nav-menu{max-height:calc(100dvh - 96px);overflow:auto}
.nav-menu a{display:flex;min-height:38px;align-items:center;padding:7px 10px;text-decoration:none}
.nav-primary a::before{content:none!important;display:none!important}
@media(max-width:1120px){.topnav{position:relative;top:auto}}
nav.topnav:empty{min-height:70px}
@media(max-width:700px){nav.topnav:empty{min-height:62px}}
img,svg,canvas,video{max-width:100%;height:auto}
.page,.page>*,
.panel,.card,fieldset,
.shell-context,.shell-page-guide,
.topnav,.topnav>*{min-width:0}
p,li,td,th,a,label,summary{overflow-wrap:anywhere}
h1,h2,h3,button,.button{overflow-wrap:normal;word-break:normal;hyphens:none}

/* Public shell: use the homepage's calm cream/glass treatment everywhere. */
body.public-site{
  background:
    radial-gradient(circle at 8% -10%,rgba(12,23,20,.10),transparent 32rem),
    radial-gradient(circle at 96% 8%,rgba(12,23,20,.07),transparent 28rem),
    var(--color-bg);
}
body.public-site .page{
  width:min(100%,var(--ac-shell-max));
  max-width:var(--ac-shell-max);
  margin-inline:auto;
}
body.public-site .topnav.nav--public{
  position:sticky;
  top:0;
  z-index:500;
  width:auto;
  max-width:none;
  min-height:70px;
  margin:calc(-1 * var(--space-7)) calc(50% - 50vw) 24px;
  padding:12px max(18px,calc((100vw - var(--ac-shell-max))/2));
  border:0!important;
  border-bottom:1px solid var(--ac-shell-line)!important;
  border-radius:0!important;
  background:var(--ac-shell-glass)!important;
  box-shadow:var(--ac-shell-shadow)!important;
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
body.public-site .topnav.nav--public>.nav-brand{
  flex:0 0 auto!important;
  min-width:max-content;
  margin-right:18px;
}
body.public-site .topnav.nav--public>.nav-public{
  display:flex;
  flex:0 1 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
  margin-left:auto;
  flex-wrap:nowrap!important;
  overflow:visible;
}
body.public-site .topnav.nav--public>.nav-public>a{
  flex:0 0 auto;
  white-space:nowrap;
}
body.public-site .topnav.nav--public>.nav-public>.button.primary{
  border-color:var(--ac-ink);
  background:var(--ac-ink);
  color:#fff;
  box-shadow:0 8px 20px rgba(12,23,20,.16);
}
body.public-site .topnav.nav--public>.nav-public>.button.primary:hover{
  background:var(--ac-ink-soft);
  border-color:var(--ac-ink-soft);
}
body.public-site .topnav.nav--public.nav--public-compact>.nav-public{
  display:none!important;
}
body.public-site .topnav.nav--public.nav--public-compact>.nav-mobile-toggle{
  display:inline-flex!important;
  margin-left:auto;
}

/* Public pages should read as sections, not a stack of unrelated microsites. */
body.public-site :is(.panel,.card,fieldset){
  border-radius:14px;
}
body.public-site main.page>section,
body.public-site main.page>header{
  max-width:100%;
}

/* Authenticated surfaces keep their functionality, but gain the same sizing discipline. */
body.guided-workspace .page,
body.guided-workspace .page.home{
  min-width:0;
}
body.guided-workspace :is(.panel,.card,.setup-step,.install-card,.storage-option,.provider){
  min-width:0;
}
body.guided-workspace :is(.table-scroll,.responsive-table,pre,.contract,.proof-output){
  max-width:100%;
}
body.guided-workspace :is(.shell-context,.shell-page-guide,.workspace-journey){
  max-width:100%;
}

/* Desktop navigation must never create a surprise second row. */
@media(min-width:1121px){
  body.public-site .topnav.nav--public>.nav-mobile-toggle{display:none!important}
}

/* Switch to the existing full-screen menu before labels can collide. */
@media(max-width:1120px){
  body.public-site .topnav.nav--public{
    min-height:64px;
    margin-top:-24px;
    margin-bottom:18px;
    padding:10px 18px;
  }
  body.public-site .topnav.nav--public>.nav-public{display:none!important}
  body.public-site .topnav.nav--public>.nav-mobile-toggle{
    display:inline-flex!important;
    flex:0 0 auto;
    margin-left:auto;
  }
}

/* Small screens: safe spacing, no horizontal shell overflow, touch-friendly controls. */
@media(max-width:700px){
  body.public-site .page{
    width:100%;
    padding:14px 14px calc(28px + env(safe-area-inset-bottom));
  }
  body.public-site .topnav.nav--public{
    margin:-14px -14px 16px;
    padding:max(8px,env(safe-area-inset-top)) 14px 8px;
  }
  body.public-site .brand-copy strong{font-size:14px}
  body.public-site .brand-copy small{display:none}
  body.public-site .brand-mark{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  body.public-site :is(.action-row,.button-row,.hero-actions){
    align-items:stretch;
  }
  body.public-site :is(.action-row,.button-row,.hero-actions)>.button,
  body.public-site :is(.action-row,.button-row,.hero-actions)>button{
    flex:1 1 100%;
    width:100%;
    justify-content:center;
    text-align:center;
  }
  body.guided-workspace .page,
  body.guided-workspace .page.home{
    max-width:100%;
    overflow-x:clip;
  }
  body.guided-workspace :is(.action-row,.hero-actions)>:is(.button,button){
    max-width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  body.public-site .topnav.nav--public{transition:none!important}
}


/* Styling consistency pass: public chrome and responsive focus states. */
body.public-site .topnav.nav--public .nav-brand,
body.public-site .topnav.nav--public .nav-public>a,
body.public-site .topnav.nav--public .nav-mobile-toggle{
  border-radius:10px;
}
body.public-site .topnav.nav--public .nav-public>a:not(.button){
  padding:9px 10px;
  color:var(--ac-ink-soft);
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
body.public-site .topnav.nav--public .nav-public>a:not(.button):hover,
body.public-site .topnav.nav--public .nav-public>a:not(.button):focus-visible,
body.public-site .topnav.nav--public .nav-public>a[aria-current="page"]{
  background:rgba(167,255,79,.24);
  color:var(--ac-ink);
}
body.public-site .topnav.nav--public :is(a,button):focus-visible{
  outline:3px solid var(--ac-ink);
  outline-offset:3px;
}
body.public-site .public-mobile-menu{
  background:var(--ac-ink);
}
body.public-site .public-mobile-menu a{
  border-radius:10px;
}
/* The menu owns its light-on-dark link and focus pairs in theme.css. */
body.public-site .public-mobile-close,
body.public-site .nav-mobile-toggle{
  min-width:44px;
  min-height:44px;
}
@media(max-width:1120px){
  body.public-site .topnav.nav--public{
    box-shadow:0 10px 28px rgba(7,17,29,.08)!important;
  }
}
@media(max-width:700px){
  body.public-site .topnav.nav--public{
    min-height:62px;
  }
  body.public-site .nav-mobile-toggle{
    padding:8px 10px;
  }
}


/* System-wide responsive shell contract.
   Pages own their visual composition; the shell owns viewport safety. */
body.ac-product :where(main,.page,.topnav,.shell-context,.shell-page-guide){min-inline-size:0;max-inline-size:100%}
body.ac-product :where(.nav-brand,.nav-primary,.nav-public,.nav-utilities,.nav-mobile-menu){min-inline-size:0}
body.ac-product :where(.nav-menu,.nav-mobile-menu){overscroll-behavior:contain}
@media(max-width:480px){
  body.public-site .topnav.nav--public,
  body.guided-workspace .topnav{
    max-width:100%;
  }
  body.public-site .nav-brand,
  body.guided-workspace .nav-brand{
    min-width:0!important;
  }
  body.public-site .nav-brand .brand-copy,
  body.guided-workspace .nav-brand .brand-copy{
    min-width:0;
    overflow:hidden;
  }
  body.public-site .nav-brand .brand-copy strong,
  body.guided-workspace .nav-brand .brand-copy strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}