/* synapse-1.20-mobile-density-header-rhythm-copy-spacing
   Lightweight public presentation layer. It preserves chamber/viewport feel while the state-light
   marker is used only as static identity, not runtime authority. */
:root{
  --synapse-live-viewport-height:100svh;
  --synapse-chamber-glow:rgba(11,80,108,.075);
  --synapse-chamber-gold:rgba(184,135,66,.22);
  --synapse-chamber-border:rgba(16,43,53,.14);
}
body[data-public-chamber-shell="soft-active"]{
  background:
    radial-gradient(circle at 50% 0, rgba(11,80,108,.10), transparent 24rem),
    radial-gradient(circle at 0 18%, rgba(184,135,66,.12), transparent 18rem),
    linear-gradient(180deg,#eef8ef 0%, #f7fbf6 42%, #f8f4ea 100%);
}
.synapse-public-viewport{
  position:relative;
  isolation:isolate;
  min-height:calc(var(--synapse-live-viewport-height) - 4.75rem);
  padding-block:clamp(1rem,4vw,3rem) 3rem;
}
.synapse-public-viewport::before{
  content:"";
  position:fixed;
  inset:5rem .45rem .65rem .45rem;
  border:1px solid rgba(11,80,108,.08);
  border-radius:32px;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}
.active-chamber{
  position:relative;
  overflow:hidden;
  padding:clamp(.65rem,2vw,1rem);
  border:1px solid var(--synapse-chamber-border);
  border-radius:calc(var(--radius,24px) + 10px);
  background:
    linear-gradient(135deg,rgba(255,253,248,.70),rgba(238,248,239,.54)),
    radial-gradient(circle at 90% 8%, rgba(11,80,108,.08), transparent 14rem);
  box-shadow:0 24px 70px rgba(16,43,53,.12);
}
.active-chamber::before,
.active-chamber::after{
  content:"";
  position:absolute;
  width:4.5rem;
  height:4.5rem;
  pointer-events:none;
  opacity:.76;
}
.active-chamber::before{
  inset:.85rem auto auto .85rem;
  border-top:1px solid var(--synapse-chamber-gold);
  border-left:1px solid var(--synapse-chamber-gold);
  border-top-left-radius:18px;
}
.active-chamber::after{
  inset:auto .85rem .85rem auto;
  border-right:1px solid rgba(11,80,108,.20);
  border-bottom:1px solid rgba(11,80,108,.20);
  border-bottom-right-radius:18px;
}
.chamber-panel,
.route-panel,
.sub-chamber,
.route-chamber{
  position:relative;
  z-index:1;
}
.chamber-panel{
  background:
    linear-gradient(180deg,rgba(255,253,248,.90),rgba(255,255,255,.72));
  backdrop-filter:blur(16px);
}
.route-panel{
  border-color:rgba(184,135,66,.22);
  background:
    linear-gradient(180deg,rgba(255,253,248,.82),rgba(238,248,239,.72)),
    radial-gradient(circle at 80% 88%, rgba(184,135,66,.10), transparent 10rem);
}
.sub-chamber-grid{
  position:relative;
  gap:clamp(.75rem,2vw,1rem);
}
.sub-chamber{
  min-height:10rem;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,253,248,.84),rgba(255,255,255,.64));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sub-chamber::before{
  content:"";
  position:absolute;
  inset:0 auto auto 1.1rem;
  width:4.75rem;
  height:2px;
  background:linear-gradient(90deg,rgba(184,135,66,.45),rgba(11,80,108,.16));
}
.sub-chamber:hover{
  transform:translateY(-2px);
  border-color:rgba(11,80,108,.22);
  box-shadow:0 20px 44px rgba(16,43,53,.11);
}
.route-chamber{
  border-color:rgba(11,80,108,.14);
  background:
    linear-gradient(135deg,rgba(255,253,248,.90),rgba(238,248,239,.75));
}
body[data-synapse-viewport-ready="true"] .active-chamber{
  animation:synapseChamberIn .32s ease both;
}
@keyframes synapseChamberIn{
  from{opacity:.92; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}
@media (max-width:860px){
  .synapse-public-viewport{width:min(100% - .75rem,1120px);padding-top:.75rem;}
  .synapse-public-viewport::before{inset:4.7rem .25rem .45rem .25rem;border-radius:24px;}
  .active-chamber{padding:.55rem;border-radius:26px;gap:.65rem;}
  .active-chamber::before,.active-chamber::after{width:3rem;height:3rem;}
  .active-chamber::before{inset:.65rem auto auto .65rem;}
  .active-chamber::after{inset:auto .65rem .65rem auto;}
  .sub-chamber{min-height:auto;}
}
@media (prefers-reduced-motion: reduce){
  body[data-synapse-viewport-ready="true"] .active-chamber{animation:none;}
  .sub-chamber,.button{transition:none;}
}