/* =============================================================================
   water-tutor.css — the on-stage chrome for water-tutor-lab.html only.

   This prototype gives its right rail to the tutor, so the lesson's spine (step
   numbers, step name, the two arrows) and its Fact button sit over the model
   instead.

   What is left here is layout and this page's own decisions: where the stage
   and the rail sit, the scrim under the title, the tray. The buttons are
   kodo.css's (.pill, .pill--ghost, .textbtn) and this file only names their
   colours. Nothing below can reach a featured lesson.
   ========================================================================== */

:root { --rail: 372px }

/* ---- the stage is the whole window ----
   The canvas cannot draw past its own edge, so a stage that stops at the rail
   clips the model the moment the framing centres it on the window. It spans
   both grid columns instead, and the rail rides on top: transparent, taking the
   mouse only where the launcher and the sheet actually are, so a drag on the
   bare right-hand side still orbits the molecule under it. */
#stage { grid-column: 1 / -1; grid-row: 1 }

/* kodo.css puts #side in row 1 already; with the stage spanning every column,
   auto-placement would otherwise drop the rail into a row of its own. */
#askchat { pointer-events: auto }

/* ---- the add-a-thing tray ----
   Centred on the WINDOW, like the model, and slid left by the same amount when
   the sheet opens: --shift is written from the render loop, so the buttons and
   the molecule move together rather than one chasing the other. */
#tray {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 6;
  transform: translateX(calc(-50% - var(--shift, 0px)));
  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
}

/* The two tray buttons are kodo.css's .pill; each wears its own substance's
   colour, so the button and the thing it drops into the water are the same
   idea: water the H-bond blue, salt the ion-dipole amber. --pill-fill is the
   only thing this page has to say about them, and the nudge ring picks it up. */
#addwater { --pill-fill: var(--action-blue) }
#addsalt  { --pill-fill: var(--action-amber) }

/* ---- the title block, on a scrim ----
   Name, place in the lesson, and this step's title, in one block over the model.
   The scrim is the block's own ground: without it the type competes with
   whatever sphere happens to drift under it. */
#titleblock {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 18px 12px 34px 26px;
  pointer-events: none;
  /* The scrim membrane-lab's #chrome uses, turned the other way up: the paper's
     own colour, solid where the type is and fading out below it, so there is no
     hard edge lying across the molecules. A box with a border would read as a
     panel sitting on the scene; this reads as the scene going quiet. */
  background: linear-gradient(to bottom,
    rgba(239, 230, 214, .97) 0%, rgba(239, 230, 214, .88) 52%,
    rgba(239, 230, 214, 0) 100%)
}

/* Only the things you click take the mouse; a scrim that eats a drag meant for
   the model is the worst kind of invisible bug. */
#steps { pointer-events: auto }

/* The title block does NOT ride --shift. The model and the pills move because
   the sheet would otherwise cover them; the block sits above the sheet's top
   edge, so sliding it would only break the one thing on the page that is
   reliably centred. */

/* #titleblock's scrim is z 6 and would wash out the floating wordmark. */
.sitenav.floating { z-index: 8 }


/* kodo.css pins #brand to the stage corner; here it is the block's first row,
   the lesson's name and the step numbers side by side. */
#brand {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px
}

#brand h1 { margin: 0; 
font-size: 22px;
letter-spacing: .2px;
color: var(--ink);
opacity: .75;
}

/* The step's one claim, over the scrim. It is what the student should take away
   if they read nothing else, so it gets the width and the type. */
#stepclaim {
  margin: 16px auto 0;
  max-width: 46em;
  text-align: center;
  font-family: var(--font-slab);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink)
}

/* ---- the tabs ----
   Named steps as ghost pills, the way membrane-lab names its six. The look is
   kodo.css's .pill--ghost; the row's own spacing is all that is left here. */
#steps { margin-bottom: 0; gap: 6px; flex-wrap: wrap }
/* Tighter than kodo's ghost pill, so all five hold one row beside the header. */
#steps > * { padding-left: 12px; padding-right: 12px }

/* ---- the launcher, at the foot of the rail ----
   The tutor is where you go when the lesson has said its piece, so it waits at
   the bottom rather than sitting under the title competing with it. */
#askslot {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  pointer-events: auto
}

#askopen .sub { display: none }


/* =============================================================================
   The water furniture.

   The temperature column and the salt readout are this lesson's instruments,
   not shared chrome: only the two water pages ever drew them, so they live
   here rather than in a sheet everything loads.
   ========================================================================== */
#tempbar {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

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

#tempbar .tlabel {
  font-family: var(--font-editorial);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}

#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;
  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(--text-strong);
  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(--text-strong);
  cursor: pointer;
}

#treadout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  position: absolute;
  top: 32px;
  left: 50px;
}

#treadout .tval {
  font-family: var(--font-editorial);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: 1;
}

#treadout .tdesc {
  font-family: var(--font-aside);
  font-size: 19px;          /* off-scale; snapping it to 20 is a look, not a move */
  color: var(--text-muted);
  line-height: 1.05;
  margin-top: 6px;
  white-space: pre-line;
}

/* The salt readout: sits above the tray rather than under it, and rides the
   same shift so the whole bottom-centre group moves as one. */
#saltinfo {
  position: absolute;
  left: 50%;
  bottom: 116px;
  transform: translateX(calc(-50% - var(--shift, 0px)));
  z-index: 5;
  display: none;
  text-align: center;
  font-family: var(--font-editorial);
  font-weight: var(--weight-medium);
  font-size: 14px;          /* off-scale; --text-sm is 13 and --text-base 16 */
  color: var(--text-dim);
  line-height: var(--leading-body);
  white-space: nowrap;
}