/* synapse-1.23-header-menu-viewport-app-page-polish
   Static native diagram reintegration. Visual governance donates tokens and spatial vocabulary;
   no visual-governance runtime controller, cover runtime, diagnostic HUD, or runtime-domain-loader participates in normal startup. */
:root{
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-weight-bold:750;
  --color-title:var(--ink,#102b35);
  --plate-field-radius:1.1rem;
  --plate-node-radius:999px;
  --plate-node-font:clamp(.74rem,.68rem + .24vw,.88rem);
  --plate-node-ink:var(--ink,#102b35);
  --plate-node-border-strong:rgba(11,80,108,.16);
  --plate-node-surface-top:rgba(255,253,248,.98);
  --plate-node-surface-bottom:rgba(238,248,239,.92);
  --plate-focus-border:rgba(184,135,66,.28);
  --plate-focus-surface-top:rgba(255,253,248,.99);
  --plate-focus-surface-bottom:rgba(248,244,234,.94);
  --plate-dot-teal:rgba(11,80,108,.28);
  --plate-dot-gold:rgba(184,135,66,.30);
  --syn-casing:rgba(184,135,66,.34);
  --syn-casing-strong:rgba(184,135,66,.52);
  --syn-identity:var(--ink,#102b35);
}
.surface-diagram-band{
  position:relative;
  margin-block:clamp(.75rem,1.8vw,1.15rem);
}
.surface-diagram-shell{
  display:grid;
  min-width:0;
}
.surface-diagram-shell .diagram-panel.panel-card{
  --diagram-plate-min:clamp(10.25rem,19vw,14.5rem);
  --diagram-plate-inset:clamp(.82rem,2vw,1.16rem);
  display:grid;
  gap:clamp(.72rem,1.8vw,1.1rem);
  padding:clamp(.86rem,2.1vw,1.18rem);
  border:1px solid rgba(16,43,53,.13);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(255,253,248,.88),rgba(238,248,239,.70)),
    radial-gradient(circle at 88% 18%,rgba(11,80,108,.07),transparent 12rem),
    radial-gradient(circle at 4% 96%,rgba(184,135,66,.10),transparent 12rem);
  box-shadow:0 18px 44px rgba(16,43,53,.09);
  overflow:hidden;
}
.surface-diagram-shell .diagram-panel.panel-card > *{min-width:0;}
.surface-diagram-shell .diagram-panel__plate{
  min-height:var(--diagram-plate-min);
}
.surface-diagram-shell .diagram-panel__copy{
  display:grid;
  align-content:center;
  gap:.45rem;
}
.surface-diagram-shell .panel-kicker{
  margin:0;
  color:var(--gold,#b98742);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:clamp(.72rem,.66rem + .22vw,.86rem);
}
.surface-diagram-shell .panel-summary{
  margin:0;
  color:var(--muted,#47616b);
  font-size:clamp(.96rem,.88rem + .28vw,1.08rem);
  line-height:1.55;
}
.surface-diagram-shell .panel-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
  margin:.15rem 0 0;
  padding:0;
  list-style:none;
}
.surface-diagram-shell .panel-chip-list li{
  border:1px solid rgba(11,80,108,.13);
  border-radius:999px;
  padding:.36rem .58rem;
  background:rgba(255,253,248,.74);
  color:var(--ink,#102b35);
  font-size:.82rem;
  font-weight:750;
}
.surface-diagram-shell .l-cluster{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.surface-diagram-shell .l-cluster--start{justify-content:flex-start;}
.surface-diagram-shell .diagram-panel__actions{margin-top:.2rem;}
.surface-diagram-shell .diagram-panel__actions .button{min-height:2.35rem;padding:.55rem .78rem;font-size:.9rem;}
@media (min-width:820px){
  .surface-diagram-shell .diagram-panel.panel-card{
    grid-template-columns:minmax(14rem,.78fr) minmax(0,1fr);
    align-items:center;
  }
}
@media (max-width:760px){
  .surface-diagram-band{margin-block:.65rem;}
  .surface-diagram-shell .diagram-panel.panel-card{border-radius:19px;padding:.76rem;}
  .surface-diagram-shell .diagram-panel__plate{--diagram-plate-min:10rem;}
}
@media (orientation:landscape) and (max-height:560px){
  .surface-diagram-shell .diagram-panel.panel-card{grid-template-columns:minmax(13rem,.68fr) minmax(0,1fr);padding:.62rem .72rem;}
  .surface-diagram-shell .diagram-panel__plate{--diagram-plate-min:8.7rem;--diagram-plate-inset:.68rem;}
  .surface-diagram-shell .panel-summary{font-size:.92rem;line-height:1.42;}
  .surface-diagram-shell .panel-chip-list{display:none;}
}