/* =============================================================================
   water-lab.css — water-lab.html's instruments, on the lesson shell.

   The shell owns the chrome; this is the two things only this lesson draws:
   the temperature column beside the panel, and the add-a-thing tray standing
   on the model's paper. The page positions
   both from the panel's rect, so nothing here restates the shell's geometry.
   ========================================================================== */

/* ---- the temperature column ----
   Left and top are written by the page: the column stands just right of the
   glass, centred on the room the panel leaves. */
#tempbar {
  position: fixed;
  z-index: 5;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  transform: translateY(-50%);
}

#tempbar .tcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

#tempbar .tlabel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

#tempbar .tlabel.hot  { color: var(--accent-hot) }
#tempbar .tlabel.cold { color: var(--accent-cold) }

#trange {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 20px;
  height: 340px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

#trange::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

#trange::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ink);
  cursor: pointer;
}

#treadout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  align-self: flex-start;
  margin-top: 32px;
}

#treadout .tval {
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#treadout .tdesc {
  font-family: var(--font-aside);
  font-size: 19px;
  color: var(--ink-2);
  line-height: 1.05;
  margin-top: 6px;
  white-space: pre-line;
}

/* ---- the add-a-thing tray ----
   Centred on the free room, like the model; `left` is written by the page.
   Kodo's .pill, because the tray stands on the model's paper rather than on
   the glass (Design.md: the shape follows what a control lies on). */
#tray {
  position: fixed;
  bottom: 30px;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.addcol {
  display: none;             /* the page turns each column on at its own step */
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Each wears its substance's colour, so the button and what it drops into
   the water are the same idea: water the H-bond blue, salt the ion-dipole
   amber. */
#addwater { --pill-fill: var(--action-blue) }
#addsalt  { --pill-fill: var(--action-amber) }

/* Step 5's readout in the panel: the ratio across the top, then the
   phase-change points in the slider's own colours. */
.lshell-panel .stat.wide { grid-column: 1 / -1 }
.lshell-panel .stat.cold .stat-value { color: var(--accent-cold) }
.lshell-panel .stat.hot  .stat-value { color: var(--accent-hot) }

/* Docked panel: the column moves to the stage's left edge, above the glass. */
@media (max-width: 760px) {
  #treadout { margin-top: 0 }
  #treadout .tval { font-size: 24px }
  #tray { bottom: auto }
}