/* ══════════════════════════════════════════════════════════════
   Flame Test Lab — fourth Lab-hub tab. Reuses .lab-wrap / .lab-intro /
   .lab-sub / .lab-hint / .lab-shelf* / .lab-rinse / .lab-sound-toggle /
   .section-label / .home-heading-friendly em / .ion-chip / .ion-chip-
   formula / .ion-chip-dot / .ion-chip-name / .ion-ghost / .ion-bubble
   (+ modifiers) verbatim from reaction-lab.css and ion-lab.css — only
   genuinely new components (the burner stage sizing/layout and the
   "not examined" chip badge) are styled here.
   Depends on tokens defined in scholars-ui.css (:root vars).
   ══════════════════════════════════════════════════════════════ */

#flame-lab {
  position: relative;
}

#flame-lab .home-heading-friendly {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}

#flame-lab .section-label {
  margin-bottom: 8px;
}

#flame-lab .lab-hint {
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.flame-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 28px);
  max-width: 940px;
  margin: 18px auto 0;
}

.flame-scene .flame-stage {
  margin: 0;
  width: min(230px, 40vw);
  flex: 0 0 auto;
}

.flame-stage {
  position: relative;
  height: clamp(190px, 30vh, 280px);
  margin: 0 auto;
  max-width: 720px;
  transition: filter 0.25s ease;
}

.flame-stage canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

.flame-stage.drag-target {
  filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.45));
}

/* "not examined" tag under the Lead chip's name — same muted/dashed
   language the rest of the site uses for secondary metadata, not an
   error state */
.flame-chip-badge {
  display: block;
  margin-top: 1px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

@media (max-width: 768px) {
  /* comic flanking layout (bubble / burner / bubble) — same grid technique
     as Ion Lab's .ion-scene mobile layout (css/ion-lab.css). The bubbles'
     own grid-column/comic-sans sizing already comes from ion-lab.css's
     unscoped mobile rules (.ion-bubble / .ion-bubble--observation /
     .ion-bubble--conclusion apply to any .ion-bubble on the page); only
     the scene/stage container needs its own copy here. */
  .flame-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    margin-top: 18px;
    max-width: 420px;
  }
  .flame-scene .flame-stage {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(150px, 42vw);
    margin-inline: auto;
    justify-self: center;
  }

  /* The shared mobile shelf uses a left-aligned scrolling grid.  Flame
     tests are a small fixed set, so wrap them as centred 4 + 3 rows. */
  #flameShelf {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 2px;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    overflow-x: visible;
    padding: 6px 0;
  }
}