/* Accessible HTML labels for generated teaching visuals. */
.system-map__visual,
.chart__visual {
  position: relative;
  margin: 1.5rem 0;
}

.system-map__visual {
  aspect-ratio: 920 / 380;
  min-height: 240px;
  overflow: hidden;
  border-radius: 1rem;
  background: #f8fafc;
}

.system-map__visual > img,
.chart__visual > img {
  display: block;
  width: 100%;
  height: 100%;
}

.system-map__visual > img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.visual-label {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgba(18, 41, 81, 0.14);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 12px rgba(11, 19, 48, 0.12);
  color: #10274d;
  text-align: center;
  font: 700 0.68rem/1.15 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.visual-label small {
  color: #475569;
  font: 500 0.55rem/1.2 "JetBrains Mono", monospace;
  letter-spacing: 0.025em;
}

.system-map__label--move { top: 7%; left: 50%; transform: translateX(-50%); }
.system-map__label--eat { bottom: 8%; left: 8%; }
.system-map__label--recover { right: 8%; bottom: 8%; }

.chart__visual {
  aspect-ratio: 560 / 330;
  overflow: hidden;
  border-radius: 0.55rem;
  background: #fff;
}

.chart__visual > img { object-fit: fill; }

.chart-visual-label {
  position: absolute;
  z-index: 1;
  padding: 0.24rem 0.42rem;
  border: 1px solid rgba(16, 39, 77, 0.12);
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.94);
  color: #10274d;
  font: 700 clamp(0.48rem, 1vw, 0.66rem)/1.2 "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chart-visual-label--demand { top: 12%; right: 4%; color: #88520a; }
.chart-visual-label--capacity { top: 39%; right: 5%; color: #164aaf; }
.chart-visual-label--symptoms {
  top: 53%;
  left: 52%;
  border-color: #10274d;
  background: #10274d;
  color: #fff;
  transform: translate(0, -50%);
}

.generated-flourish {
  display: block;
  width: 7.5rem;
  height: 0.75rem;
  margin: 0.1rem auto 0;
  object-fit: fill;
}

.hand-note--dark .generated-flourish { filter: brightness(0) invert(1); }

@media (max-width: 600px) {
  .system-map__visual { min-height: 0; }
  .visual-label { padding: 0.3rem 0.42rem; font-size: 0.53rem; }
  .visual-label small { font-size: 0.45rem; }
  .system-map__label--eat { left: 4%; }
  .system-map__label--recover { right: 4%; }
  .chart-visual-label { padding: 0.18rem 0.28rem; font-size: 0.44rem; }
  .chart-visual-label--symptoms { top: 53%; left: 52%; }
}