/* GRASTROK ENRICH 2026-11-04 — DOM glow helpers only (canvas glow lives in JS) */
.enrich-glow-gold{text-shadow:0 0 6px rgba(240,200,90,.7),0 0 14px rgba(220,50,40,.35)}
.enrich-glow-red{box-shadow:0 0 10px rgba(220,50,40,.45),0 0 22px rgba(240,200,90,.2)}
.enrich-accent-blue{box-shadow:0 0 8px rgba(110,170,255,.4)}
@media (prefers-reduced-motion: reduce){.enrich-glow-gold,.enrich-glow-red,.enrich-accent-blue{text-shadow:none;box-shadow:none}}

/* V2 2026-11-04 — diagram-3x overlap fixes (additive; nothing hidden permanently) */
.diagram-stage .diagram-toolbar{max-width:calc(100% - 1.4rem);flex-wrap:wrap;gap:.3rem;padding:.3rem .4rem}
.diagram-stage .diagram-toolbar button{padding:.3rem .55rem}
#g3x-strata.g3x-strata{left:.7rem;right:auto;bottom:.7rem;top:auto;max-width:min(22rem,42%);max-height:9rem;overflow:hidden;opacity:.92}
#g3x-strata .g3x-strata-k{font-size:.62rem;letter-spacing:.14em;opacity:.7}
@media (max-width:860px){
  #g3x-strata.g3x-strata{max-width:calc(100% - 1.4rem);max-height:4.2rem;opacity:.85}
}

/* V3 — Flash stage pulse + UI nudges (additive) */
.diagram-stage.v3-flash{animation:v3flash .38s ease-out}
@keyframes v3flash{0%{box-shadow:inset 0 0 0 9999px rgba(150,230,255,.10)}100%{box-shadow:inset 0 0 0 9999px rgba(150,230,255,0)}}
@media (prefers-reduced-motion:reduce){.diagram-stage.v3-flash{animation:none}}
.diagram-toolbar button.flash{border-color:rgba(150,230,255,.6)}
.diagram-toolbar{top:1.1rem}
/* V3: strata moved bottom-right so it no longer overlaps .diagram-inspector (bottom-left) */
#g3x-strata.g3x-strata{left:auto;right:.7rem}
@media (max-width:720px){#g3x-strata.g3x-strata{right:.7rem;left:auto;bottom:auto;top:3.4rem;max-width:calc(100% - 1.4rem)}}

/* V4 2026-11-04 — CSS only. Clear fixed site header + free the log. Removes nothing. */
/* 1) Push whole diagram page (stage, toolbar, Layers) below fixed .site-header */
.diagram-page {
  padding-top: 8.2rem;
}
@media (max-width: 860px) {
  .diagram-page { padding-top: 8.6rem; }
}
/* Keep in-stage chrome clear of the stage top edge / header bleed */
.diagram-stage .diagram-toolbar {
  top: 0.7rem;
}
.diagram-stage .diagram-legend {
  top: 0.7rem;
}

/* 2) Move #g3x-strata off the bottom-right log; park under toolbar on the left.
   Soft CSS collapse: compact by default, expand on hover/focus (no HTML/JS). */
#g3x-strata.g3x-strata {
  left: 0.7rem;
  right: auto;
  top: 4.6rem;
  bottom: auto;
  max-width: min(20rem, 46%);
  max-height: 2.35rem;
  overflow: hidden;
  opacity: 0.9;
  pointer-events: auto;
  transition: max-height 0.22s ease, opacity 0.18s ease;
  z-index: 6;
}
#g3x-strata.g3x-strata:hover,
#g3x-strata.g3x-strata:focus-within {
  max-height: 9.5rem;
  opacity: 0.96;
}
@media (max-width: 860px) {
  #g3x-strata.g3x-strata {
    top: 4.2rem;
    left: 0.55rem;
    max-width: calc(100% - 1.2rem);
    max-height: 2.1rem;
  }
  #g3x-strata.g3x-strata:hover,
  #g3x-strata.g3x-strata:focus-within {
    max-height: 7.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #g3x-strata.g3x-strata { transition: none; }
}
/* Ensure log stays readable on the bottom-right */
.diagram-stage .diagram-log {
  z-index: 7;
}