/* BEElio V2 infographic components: screen colour, semantic shape, print-safe. */
.beelio-infographic {
  --info-accent: var(--beelio-blue, #2563EB);
  --info-soft: #EAF2FF;
  margin: 0 0 var(--beelio-space-5, 1.5rem);
  padding: clamp(16px, 2.2vw, 22px);
  overflow: hidden;
  color: var(--beelio-ink, #24324A);
  background: linear-gradient(145deg, var(--beelio-surface, #FFFFFF), var(--beelio-paper, #FFF9EE));
  border: 2px solid var(--beelio-border, #D9E2EC);
  border-color: color-mix(in srgb, var(--info-accent) 28%, var(--beelio-border, #D9E2EC));
  border-radius: var(--beelio-radius-lg, 24px);
  box-shadow: var(--beelio-shadow-sm, 0 4px 12px rgb(36 50 74 / 0.1));
  break-inside: avoid;
}

.beelio-infographic[data-subject="vietnamese"] { --info-accent: var(--beelio-vietnamese, #D6475D); --info-soft: #FFF0F2; }
.beelio-infographic[data-subject="english"] { --info-accent: var(--beelio-english, #168C68); --info-soft: #E8F8F1; }
.beelio-infographic[data-subject="science"] { --info-accent: var(--beelio-science, #6B8E23); --info-soft: #F1F7DE; }
.beelio-infographic[data-subject="history_geo"] { --info-accent: var(--beelio-history-geo, #B56A22); --info-soft: #FFF2E3; }

.beelio-infographic__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 12px;
  padding: 5px 12px;
  color: var(--info-accent);
  color: color-mix(in srgb, var(--info-accent) 82%, #172033);
  background: var(--info-soft);
  border: 1px solid var(--info-accent);
  border-color: color-mix(in srgb, var(--info-accent) 34%, transparent);
  border-radius: 999px;
  font-size: var(--beelio-text-xs, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.015em;
}

.beelio-infographic__label::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--info-accent);
  border: 2px solid currentColor;
  border-radius: 50%;
}

.beelio-infographic__canvas {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.beelio-infographic svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  max-height: 430px;
  color: var(--beelio-ink, #24324A);
  font-family: var(--beelio-font-body, "Be Vietnam Pro", sans-serif);
}

.beelio-infographic svg text { fill: currentColor; }
.beelio-infographic .bi-title { font-size: 21px; font-weight: 800; }
.beelio-infographic .bi-heading { font-size: 16px; font-weight: 800; }
.beelio-infographic .bi-label { font-size: 14px; font-weight: 700; }
.beelio-infographic .bi-small { font-size: 12px; font-weight: 650; }
.beelio-infographic .bi-formula { font-size: 17px; font-weight: 800; }
.beelio-infographic .bi-outline { fill: var(--beelio-surface, #FFFFFF); stroke: currentColor; stroke-width: 2; }
.beelio-infographic .bi-blue { fill: #DCEBFF; stroke: #2563EB; stroke-width: 2; }
.beelio-infographic .bi-gold { fill: #FFF0B3; stroke: #A96800; stroke-width: 2; }
.beelio-infographic .bi-green { fill: #DDF3E4; stroke: #2E7D48; stroke-width: 2; }
.beelio-infographic .bi-pink { fill: #FFE2E7; stroke: #B9344A; stroke-width: 2; }
.beelio-infographic .bi-violet { fill: #EDE8FF; stroke: #6549A8; stroke-width: 2; }
.beelio-infographic .bi-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.beelio-infographic .bi-arrow { fill: none; stroke: var(--info-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.beelio-infographic .bi-dashed { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-dasharray: 6 5; }
.beelio-infographic .bi-dot { fill: var(--beelio-gold, #F6B91A); stroke: #7A4B00; stroke-width: 1.5; }

@media (max-width: 700px) {
  .beelio-infographic { margin-inline: -8px; border-radius: var(--beelio-radius-md, 16px); }
  .beelio-infographic svg { width: 680px; max-width: none; max-height: none; }
  html[data-grade-band="early-primary"] .beelio-infographic svg { min-width: 700px; }
}

@media print {
  .beelio-infographic {
    margin: 5mm 0;
    padding: 4mm;
    overflow: visible;
    color: #000;
    background: #FFF !important;
    border: 1.2pt solid #000;
    border-radius: 3mm;
    box-shadow: none;
    print-color-adjust: economy;
    -webkit-print-color-adjust: economy;
  }
  .beelio-infographic__label { color: #000; background: #FFF; border: 1pt solid #000; }
  .beelio-infographic__label::before { background: #FFF; border-color: #000; }
  .beelio-infographic__canvas { overflow: visible; }
  .beelio-infographic svg { width: 100%; min-width: 0; max-height: 92mm; color: #000; }
  .beelio-infographic svg * { vector-effect: non-scaling-stroke; }
  .beelio-infographic .bi-blue,
  .beelio-infographic .bi-gold,
  .beelio-infographic .bi-green,
  .beelio-infographic .bi-pink,
  .beelio-infographic .bi-violet,
  .beelio-infographic .bi-outline,
  .beelio-infographic .bi-dot {
    fill: #FFF !important;
    stroke: #000 !important;
  }
  .beelio-infographic .bi-arrow,
  .beelio-infographic .bi-line,
  .beelio-infographic .bi-dashed { stroke: #000 !important; }
}