/* Cybereum · interaction-surfaces.css
   Canonical contracts for viewport-level interaction, fixed actions and
   cross-theme surfaces. This is architecture, not a browser patch: page CSS
   must not compete with these layers or recreate their geometry. */

:root{
  --cyb-layer-content:0;
  --cyb-layer-sticky:900;
  --cyb-layer-subnav:1000;
  --cyb-layer-header:1100;
  --cyb-layer-drawer:1090;
  --cyb-mobile-action-h:calc(3.65rem + env(safe-area-inset-bottom));
}

/* Semantic fixed-theme surfaces. Components opt into a complete token context
   rather than pinning individual text colours. */
.cyb-scheme-dark{
  color:var(--cyb-fg);
}

/* External SVG <use> paint is explicit. WebKit, Blink and Gecko therefore do
   not have to infer whether currentColor should cross the external-use boundary. */
.cyb-brand__wordmark use,
.cyb-svg-paint-current use,
.dm-hero__wordmark use{
  fill:currentColor;
}
.cyb-brand__wordmark{color:var(--cyb-accent)}
.dm-hero__wordmark{color:#e9f8ff}

/* One viewport overlay model. The header owns the mobile drawer; when open it
   is the only interactive viewport layer. No page-local z-index escalation is
   required and no !important declarations are used. */
.cyb-header{z-index:var(--cyb-layer-header)}
.cyb-subnav{z-index:var(--cyb-layer-subnav)}
@media(max-width:1099px){
  .cyb-header.is-open{
    isolation:isolate;
    background:var(--cyb-bg);
  }
  .cyb-header.is-open .cyb-menu{
    position:fixed;
    inset:var(--cyb-nav-h) 0 0;
    z-index:var(--cyb-layer-drawer);
    width:100%;
    min-width:0;
    min-height:calc(100dvh - var(--cyb-nav-h));
    max-height:calc(100dvh - var(--cyb-nav-h));
    padding:var(--cyb-space-3) var(--cyb-gutter) calc(var(--cyb-space-5) + env(safe-area-inset-bottom));
    overflow:auto;
    overscroll-behavior:contain;
    background:var(--cyb-bg);
    opacity:1;
  }
  .cyb-header.is-open .cyb-nav__link,
  .cyb-header.is-open .cyb-nav__entry{
    width:100%;
    min-width:0;
    border-radius:var(--cyb-radius-xs);
  }
  .cyb-header.is-open .cyb-nav__link[aria-current="page"],
  .cyb-header.is-open .cyb-nav__entry[aria-current="page"]{
    background:color-mix(in srgb,var(--cyb-accent) 7%,transparent);
    box-shadow:inset 2px 0 0 var(--cyb-accent);
  }
  html:has(.cyb-header.is-open) .cyb-subnav{
    visibility:hidden;
    pointer-events:none;
  }
  html:has(.cyb-header.is-open) body>main,
  html:has(.cyb-header.is-open) body>.sticky,
  html:has(.cyb-header.is-open) body>.sticky-cta{
    pointer-events:none;
  }
}

/* One persistent-action primitive for the existing homepage bar and future
   .cyb-sticky-action consumers. Safe-area geometry is owned here. */
.sticky,
.cyb-sticky-action{
  z-index:var(--cyb-layer-sticky);
  background:var(--cyb-glass-fill);
  border-top:1px solid var(--cyb-glass-line);
  box-shadow:var(--cyb-glass-shadow);
  -webkit-backdrop-filter:var(--cyb-glass-filter);
  backdrop-filter:var(--cyb-glass-filter);
}
@media(max-width:700px){
  .sticky,
  .cyb-sticky-action{
    gap:.5rem;
    padding:.45rem var(--cyb-gutter) calc(.45rem + env(safe-area-inset-bottom));
  }
  .sticky .cyb-button,
  .cyb-sticky-action .cyb-button{
    min-height:44px;
    padding:.62rem .65rem;
    font-size:clamp(.76rem,3.4vw,.9rem);
    line-height:1.12;
    white-space:normal;
  }
  body:has(> .sticky),
  body:has(> .cyb-sticky-action){
    padding-bottom:var(--cyb-mobile-action-h);
  }
}

@media(prefers-reduced-transparency:reduce){
  .cyb-header.is-open .cyb-menu,
  .sticky,
  .cyb-sticky-action{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}