/* Tyto Sensory Labs — canonical site material system.
   MCP4SH is the visual reference: near-black / neutral graphite frosted glass,
   with metallic gold and silver reserved for intentional accents only.
   Page identities (notably Lab Notes blueprint paper) remain page-specific. */
:root {
  --bg: #000000 !important;
  --bg-soft: #030303 !important;
  --panel: rgba(2,2,2,0.22) !important;
  --border: rgba(220,225,232,0.10) !important;
  --shadow: 0 22px 52px rgba(0,0,0,0.38) !important;

  --tyto-black: #000000;
  --tyto-graphite: #080808;
  --tyto-graphite-deep: #020202;
  --tyto-glass-top: rgba(4,4,4,0.22);
  --tyto-glass-bottom: rgba(0,0,0,0.12);
  --tyto-glass-hover-top: rgba(8,8,8,0.32);
  --tyto-glass-hover-bottom: rgba(0,0,0,0.19);
  --tyto-glass-solid: rgba(2,2,2,0.62);
  --tyto-line: rgba(220,225,232,0.10);
  --tyto-line-strong: rgba(230,234,240,0.15);
  --tyto-silver: #bfc4ca;
  --tyto-gold: #d4c28f;
  --tyto-gold-deep: #7a6940;
  --tyto-blur: blur(8px) saturate(52%);
  --tyto-blur-soft: blur(5px) saturate(54%);
}

html {
  background: var(--tyto-black) !important;
}
body {
  background:
    radial-gradient(circle at 50% -18%, rgba(10,10,10,0.18) 0%, rgba(3,3,3,0.08) 28%, rgba(0,0,0,0.96) 58%, #000 84%) fixed !important;
  background-color: var(--tyto-black) !important;
}

/* Persistent site chrome */
.topbar {
  background: rgba(0,0,0,0.62) !important;
  border-bottom-color: rgba(220,225,232,0.08) !important;
  backdrop-filter: blur(8px) saturate(52%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(52%) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
}

/* Canonical frosted glass. Keep this selector intentionally broad so pages do
   not drift into subtly different blue/brown blacks again. */
.panel,
.feature-card,
.faq-item,
.video-shell,
.shots-shell,
.ecosystem-strip,
.review-modal-card {
  background: linear-gradient(180deg, var(--tyto-glass-top) 0%, var(--tyto-glass-bottom) 100%) !important;
  border-color: var(--tyto-line) !important;
  backdrop-filter: var(--tyto-blur) !important;
  -webkit-backdrop-filter: var(--tyto-blur) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.018) !important;
}

/* Secondary glass controls / pills / utility surfaces. */
.btn-secondary,
.section-tag,
.badge,
.chip,
.status {
  background: rgba(1,1,1,0.34) !important;
  border-color: var(--tyto-line) !important;
  backdrop-filter: var(--tyto-blur-soft) !important;
  -webkit-backdrop-filter: var(--tyto-blur-soft) !important;
}
.btn-secondary:hover,
.section-tag:hover,
.badge:hover {
  background: rgba(7,7,7,0.46) !important;
}

/* FAQ uses precisely the same material as the content cards, just shallower. */
.faq-item {
  background: linear-gradient(180deg, rgba(4,4,4,0.21), rgba(0,0,0,0.11)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.014) !important;
}
.faq-item[open] summary {
  border-bottom-color: rgba(220,225,232,0.09) !important;
}

/* Reviews: gold remains the editorial outline/divider, but every actual glass
   surface is neutral black/graphite. No cyan/blue material tint. */
.review-card {
  background: linear-gradient(180deg, rgba(4,4,4,0.19), rgba(0,0,0,0.10)) !important;
  border-color: rgba(212,194,143,0.34) !important;
  backdrop-filter: blur(8px) saturate(52%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(52%) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.012) !important;
}
.review-card:hover,
.review-card:focus-visible {
  background: linear-gradient(180deg, rgba(9,9,9,0.34), rgba(1,1,1,0.23)) !important;
  border-color: rgba(230,214,170,0.60) !important;
}
.review-text { color: #d9dadc !important; }
.review-modal-card {
  background: linear-gradient(180deg, rgba(5,5,5,0.78), rgba(0,0,0,0.74)) !important;
  border-color: rgba(212,194,143,0.52) !important;
  backdrop-filter: blur(9px) saturate(52%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(52%) !important;
}
.review-modal-close {
  background: rgba(3,3,3,0.82) !important;
  backdrop-filter: blur(9px) saturate(55%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(55%) !important;
}
.status.info {
  border-color: rgba(191,196,202,0.26) !important;
  color: #cfd3d8 !important;
}

/* Forms are neutral glass too. */
input[type="text"],
input[type="email"],
textarea,
select {
  background-color: rgba(2,2,2,0.44) !important;
  border-color: rgba(220,225,232,0.10) !important;
  color: #f2f2f2 !important;
}

/* OCPF keeps gold controls, but its stage/supporting cards share the same cold
   site material instead of carrying their older blue-grey/warm background. */
.product-stage {
  background:
    linear-gradient(rgba(255,255,255,0.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.017) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, rgba(180,184,190,0.038), transparent 34%),
    linear-gradient(180deg, #070707 0%, #010101 100%) !important;
  border-color: var(--tyto-line) !important;
}
.product-stage::after {
  background: radial-gradient(circle at 50% 45%, transparent 0%, rgba(0,0,0,0.09) 52%, rgba(0,0,0,0.76) 100%) !important;
}
.feature-card {
  background: rgba(3,3,3,0.26) !important;
}
.notice {
  background: rgba(3,3,3,0.31) !important;
  backdrop-filter: var(--tyto-blur-soft) !important;
  -webkit-backdrop-filter: var(--tyto-blur-soft) !important;
}
.radial-demo::after,
.radial-demo {
  /* Preserve the radial control design, but keep its black portions neutral. */
  color-scheme: dark;
}

/* MCP4SH media / ecosystem material — neutral, transparent and blurred enough
   for the Spa motion to remain legible through the useful content. */
.video-shell,
.shots-shell,
.ecosystem-strip {
  background: linear-gradient(180deg, rgba(4,4,4,0.20) 0%, rgba(0,0,0,0.10) 100%) !important;
  border-color: var(--tyto-line) !important;
  backdrop-filter: blur(9px) saturate(52%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(52%) !important;
}
.ecosystem-strip {
  background: linear-gradient(180deg, rgba(4,4,4,0.23), rgba(0,0,0,0.13)) !important;
}
.ecosystem-link {
  background: rgba(2,2,2,0.23) !important;
  border-color: rgba(220,225,232,0.09) !important;
  backdrop-filter: blur(5px) saturate(52%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(52%) !important;
}
.ecosystem-link:hover {
  background: rgba(7,7,7,0.34) !important;
}

/* Home / generic footer surfaces from the original individual pages. The
   injected shared footer is styled below in site-footer.js as well. */
.footer-nav,
body > footer:not(.tyto-site-footer) {
  background: rgba(0,0,0,0.34) !important;
  border-color: rgba(220,225,232,0.08) !important;
  backdrop-filter: blur(8px) saturate(52%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(52%) !important;
}


/* Global navigation: project pages use site-level destinations only.
   On phones Reviews + Lab Notes remain visible on every page. */
.site-global-nav {
  display: none;
  align-items: center;
  gap: 1.15rem;
  font-size: .875rem;
}
.site-global-nav a {
  color: #8f9296;
  text-decoration: none;
  transition: color 160ms ease;
  white-space: nowrap;
}
.site-global-nav a:hover,
.site-global-nav a:focus-visible { color: #fff; }
.mobile-global-links {
  display: none;
}
@media (min-width: 768px) {
  .site-global-nav { display: flex; }
}
@media (max-width: 767px) {
  .mobile-global-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    width: min(100% - 1.5rem, 80rem);
    margin: -.1rem auto .55rem;
  }
  .mobile-global-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .38rem .72rem;
    border: 1px solid rgba(220,225,232,.10);
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    color: #bfc4ca;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 650;
    backdrop-filter: blur(5px) saturate(52%);
    -webkit-backdrop-filter: blur(5px) saturate(52%);
  }
  .mobile-global-links a[aria-current="page"] {
    color: #f0e3bc;
    border-color: rgba(212,194,143,.34);
  }
}

/* Same material on every form factor: responsive layout changes, not identity. */

/* Lab Notes: only the surrounding site chrome is canonical glass. Blueprint
   paper/cards and their zoomed sheet deliberately keep the saturated blue
   project identity. */
body.note-modal-open .topbar,
body.review-modal-open .topbar { filter: none; }
.note-modal-close {
  backdrop-filter: blur(9px) saturate(55%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(55%) !important;
}

/* Compact site-wide mobile navigation. Desktop retains the full global nav. */
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.mobile-site-menu { display:none; position:relative; flex:0 0 auto; }
.mobile-site-menu summary {
  list-style:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(225,230,236,.15);
  border-radius:999px;
  background:rgba(1,1,1,.40);
  color:#e5e7e9;
  cursor:pointer;
  backdrop-filter:blur(4px) saturate(48%);
  -webkit-backdrop-filter:blur(4px) saturate(48%);
  box-shadow:0 8px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.018);
}
.mobile-site-menu summary::-webkit-details-marker { display:none; }
.mobile-site-menu summary::marker { content:""; }
.mobile-site-menu[open] summary { border-color:rgba(212,194,143,.38); color:#f0e3bc; }
.mobile-site-menu-icon { width:15px; display:grid; gap:3px; }
.mobile-site-menu-icon i { display:block; height:1px; width:100%; background:currentColor; border-radius:1px; }
.mobile-site-menu-panel {
  position:absolute;
  z-index:90;
  right:0;
  top:calc(100% + 10px);
  width:min(220px, calc(100vw - 1.25rem));
  padding:.45rem;
  border:1px solid rgba(225,230,236,.15);
  border-radius:16px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(7px) saturate(48%);
  -webkit-backdrop-filter:blur(7px) saturate(48%);
  box-shadow:0 22px 58px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.018);
}
.mobile-site-menu-panel a {
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.58rem .72rem;
  border-radius:11px;
  color:#bfc4ca;
  text-decoration:none;
  font-size:.84rem;
  font-weight:650;
}
.mobile-site-menu-panel a:hover,
.mobile-site-menu-panel a:focus-visible { background:rgba(255,255,255,.045); color:#fff; outline:none; }
.mobile-site-menu-panel a[aria-current="page"] { color:#f0e3bc; background:rgba(122,105,64,.11); }
@media (max-width:767px) {
  .mobile-site-menu { display:block; }
  .mobile-global-links { display:none!important; }
  .topbar > div { gap:.55rem; }
  .topbar > div > a:first-child { min-width:0; font-size:.78rem; letter-spacing:.145em; }
  .topbar > div > a.btn { flex:0 0 auto; }
}