@import url('/assets2/ui/apex-surface-system.v85_2.css');

/* v86.0 semantic layer
   The goal is not visual sameness. The goal is semantic consistency:
   - editorial surfaces explain
   - authority surfaces decide
   - appendix surfaces deepen review
*/
:root{
  --mvg-state-radius: 30px;
  --mvg-state-gap: clamp(1rem, 2vw, 1.4rem);
  --mvg-state-border: rgba(130, 150, 255, .16);
  --mvg-state-border-strong: rgba(130, 150, 255, .22);
  --mvg-state-shadow:
    0 28px 72px rgba(8, 14, 32, .28),
    inset 0 1px 0 rgba(255,255,255,.04);
  --mvg-state-panel:
    radial-gradient(120% 120% at 0% 0%, rgba(124,92,255,.18), transparent 40%),
    radial-gradient(110% 160% at 100% 0%, rgba(56,189,248,.16), transparent 42%),
    linear-gradient(135deg, rgba(12,18,34,.96), rgba(16,28,50,.96));
  --mvg-state-ink: rgba(248,250,255,.98);
  --mvg-state-muted: rgba(214,222,240,.82);
  --mvg-state-soft: rgba(194,205,228,.72);
  --mvg-editorial-panel: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,255,.96));
  --mvg-editorial-border: rgba(17, 30, 59, .10);
}
:root[data-theme="light"]{
  --mvg-state-shadow:
    0 30px 72px rgba(20, 34, 64, .14),
    0 10px 20px rgba(20, 34, 64, .08),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.mvg-surface-authority{
  background: var(--mvg-state-panel);
  color: var(--mvg-state-ink);
  border: 1px solid var(--mvg-state-border);
  border-radius: var(--mvg-state-radius);
  box-shadow: var(--mvg-state-shadow);
}
.mvg-surface-authority :is(h1,h2,h3,h4,strong,.mvg-state-title,.mvg-summary-title){
  color: var(--mvg-state-ink);
}
.mvg-surface-authority :is(p,li,small,.muted,.mini){
  color: var(--mvg-state-muted);
}
.mvg-surface-authority .tag,
.mvg-surface-authority .badge{
  color: rgba(245,248,255,.96);
  background: rgba(255,255,255,.06);
  border-color: rgba(200,210,255,.16);
}
.mvg-surface-editorial,
.mvg-surface-appendix{
  border-radius: var(--mvg-state-radius);
  border: 1px solid var(--mvg-editorial-border);
  background: var(--mvg-editorial-panel);
  box-shadow: var(--mvg-light-shadow, 0 18px 40px rgba(20, 34, 64, .08));
}
.mvg-surface-appendix{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,255,.94));
}
:root[data-theme="light"] .mvg-surface-authority a{
  color: rgba(242,247,255,.96);
}
.state-layer-module a:not(.btn),
.mvg-state-launch a:not(.btn),
.mvg-protocol-note a:not(.btn){
  text-decoration-thickness: .08em;
}