/* Model Optimization page — interactive chunk internals only.
   Content styling lives on Bricks global classes (ACSS tokens); this file
   covers the three canvas consoles + their tooltips/legends, which Bricks
   has no fields for. Site rem basis is 10px (root-font-size 62.5%). */

body { overflow-x: hidden; }

.mo-stage { width: 100%; }

/* ---- console frame ---- */
.mo-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-l);
  padding: var(--space-s);
  width: 100%;
}

.mo-frame__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-light);
}

.mo-frame__status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.mo-frame__dot {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--radius-circle);
  background: var(--primary-semi-light);
  box-shadow: 0 0 8px var(--primary-trans-50);
}

.mo-frame__dot--green { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }

.mo-legend {
  display: flex;
  gap: 1.4rem;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mo-legend b {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-circle);
  margin-right: 0.5rem;
  vertical-align: middle;
  position: relative;
  top: -0.1rem;
}

.mo-legend .is-incumbent b { background: #ef6a55; }
.mo-legend .is-variant b { background: var(--primary-semi-light); }
.mo-legend .is-selected b { background: #eab308; }
.mo-legend .is-good b { background: var(--primary-semi-light); }
.mo-legend .is-risk b { background: #a8715f; }
.mo-legend .is-recovered b { background: #34d399; }

/* ---- canvas stage ---- */
.mo-frame__stage {
  position: relative;
  aspect-ratio: 602 / 478;
  min-height: 30rem;
}

.mo-frame__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* axis + zone labels */
.mo-axis {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--neutral-light);
  pointer-events: none;
  z-index: 2;
}

.mo-axis--x { bottom: 0.4rem; left: 50%; transform: translateX(-50%); }
.mo-axis--y { left: 0.4rem; top: 50%; transform: rotate(180deg); writing-mode: vertical-rl; }
.mo-axis--zone { text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.55; }

/* tooltips / chips */
.mo-tip {
  position: absolute;
  z-index: 3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(24, 24, 27, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translate(-50%, -50%);
}

.mo-tip.is-on { opacity: 1; }
.mo-tip--incumbent { color: #ff8a70; }
.mo-tip--selected { color: #eab308; }
.mo-tip--delta { color: var(--white); }
.mo-tip--recovery { color: var(--neutral-light); text-align: center; }
.mo-tip--recovery em { display: block; font-style: normal; color: #34d399; }

/* ---- animated dot field (halftone pulse) ---- */
.mo-dot-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: clip;
}
.mo-dot-field canvas { display: block; width: 100%; height: 100%; }
.mo-dot-field--opacity-50 { opacity: 0.5; }

/* dot band: height-constrained wave strip (set height on the element) */
.mo-dot-band {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.mo-dot-band canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* headline cycling word */
.mo-accent { transition: opacity 0.45s ease; }
.mo-accent.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .mo-accent { transition: none; }
  .mo-tip { transition: none; }
}