/* ══════════════════════════════════════════════════════════════
   Gas Test Lab — fifth Lab-hub tab, sits before Flame Test. 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-art(-img) /
   .ion-chip-name / .ion-chip[aria-disabled] / .ion-ghost / .ion-bubble
   (+ modifiers) verbatim from ion-lab.css / flame-test.css. The stage
   itself also reuses `.ion-stage`/`.ion-glass` directly (js/gas-test.js
   ports ion-lab.js's actual renderGlass()/tubeContourD() SVG tube
   wholesale) rather than approximating a new one — `#gasStage` carries
   BOTH `.ion-stage` (base sizing/positioning + the drag-target glow)
   and `.gas-stage` (just the flex-width override below). Only the
   width override and the non-square tool artwork are genuinely new
   here. Depends on tokens defined in scholars-ui.css (:root vars).
   ══════════════════════════════════════════════════════════════ */

#gas-lab {
  position: relative;
}

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

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

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

.gas-scene .gas-stage {
  margin: 0;
  width: min(200px, 38vw);
  flex: 0 0 auto;
}

/* freeform tool objects (splints / litmus / reagent bottles) keep
   their own natural silhouette instead of the square ion-chip-art
   badge box — a taller box + object-fit:contain avoids distorting
   whichever shape lands inside it. */
.gas-tool-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 68px;
}

.gas-tool-art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(43, 25, 62, 0.22));
  transition: transform 0.3s var(--ease-spring);
}

.ion-chip:hover .gas-tool-art img {
  transform: scale(1.06);
}

.ion-ghost .gas-tool-art {
  width: 52px;
  height: 68px;
  filter: drop-shadow(0 10px 14px rgba(43, 25, 62, 0.35));
}

/* muted addendum on the Test shelf label while it's locked — plain
   sentence case so it reads as a hint, not another shelf title */
.gas-locked-hint {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  opacity: 0.75;
  white-space: nowrap;
}

[data-theme="dark"] .gas-tool-art img {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

[data-theme="dark"] .ion-ghost .gas-tool-art {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
}

@media (max-width: 768px) {
  /* comic flanking layout (bubble / tube / 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. #gasStage also
     carries the plain .ion-stage class, so its mobile height already
     comes from ion-lab.css too — only grid placement/width is new. */
  .gas-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    margin-top: 18px;
    max-width: 420px;
  }
  .gas-scene .gas-stage {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(150px, 42vw);
    margin-inline: auto;
    justify-self: center;
  }

  /* The shared lab shelf becomes a left-aligned, two-row scroller on
     phones.  These are small fixed sets, so keep the gases centred and
     all five test tools together on one centred row instead. */
  #gasShelfGases,
  #gasShelfTools {
    display: flex;
    overflow-x: visible;
    padding: 6px 0;
    justify-content: center;
  }

  #gasShelfGases {
    flex-wrap: wrap;
    gap: 8px 2px;
  }

  #gasShelfTools {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2px;
  }

  #gasShelfTools .ion-chip {
    flex: 0 1 68px;
    min-width: 0;
    padding-inline: 1px;
  }

  #gasShelfTools .ion-chip-name {
    white-space: normal;
    line-height: 1.15;
  }
}

@media (max-width: 560px) {
  .gas-tool-art {
    width: 50px;
    height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gas-tool-art img {
    transition: none;
  }
}