/* ===========================================================================
   thermometer.css: the pan thermometer fixed to the right edge.
   Built by shared/js/thermometer.js. Imported by base.css.

   Geometry, from the design system:
     56vh tall on desktop, 38vh on phones, vertically centred
     a 6px glass tube with a 1px outline at 40 percent opacity
     an 18px bulb at the foot
     10px chapter ticks, real buttons, in a <nav aria-label="Chapters">
     FYAH above the tube, COLD below the bulb

   Everything is drawn in currentColor, so the single .on-light class that
   thermometer.js mirrors from the top bar flips the whole widget from cream
   to ink. The only exception is the fill itself, which is always the gold to
   bonnet heat gradient in both worlds.

   --fill (0 to 1) is written by thermometer.js. Nothing else changes.
   =========================================================================== */

.thermo {
  position: fixed;
  top: 50%;
  right: clamp(1.5rem, 2.5vw, 2.75rem);
  z-index: var(--z-thermo);

  width: 6px;
  height: 56vh;

  transform: translateY(-50%);
  color: var(--cream);

  /* The widget is mostly empty space. Only the tick buttons take clicks. */
  pointer-events: none;

  transition: color var(--t-med) var(--ease-smoke);

  --fill: 0;
}

.thermo.on-light {
  color: var(--ink);
}

/* --- the glass tube ------------------------------------------------------- */

.thermo__tube {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--r-pill);

  /* The fill is clipped inside the tube, so the rounded ends read as glass. */
  overflow: hidden;
}

/* The window is the moving part. It reveals the bottom --fill of the gradient
   with clip-path, which is a compositor-only property. */
.thermo__window {
  position: absolute;
  inset: 0;
  clip-path: inset(calc(100% - var(--fill) * 100%) 0 0 0);
}

/* A full-height gradient sits behind the window, so the colour at any point on
   the tube is fixed: gold down at the bulb, scotch bonnet up at FYAH. */
.thermo__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--gold), var(--bonnet));
}

/* --- the bulb ------------------------------------------------------------- */

.thermo__bulb {
  position: absolute;
  bottom: -13px;
  left: 50%;

  width: 18px;
  height: 18px;
  margin-left: -9px;

  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 50%;
  background: var(--gold);
}

/* --- FYAH and COLD -------------------------------------------------------- */

.thermo__cap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  font-family: var(--font-sign);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.thermo__cap--hot {
  bottom: calc(100% + 0.9rem);
}

.thermo__cap--cold {
  top: calc(100% + 1.6rem); /* clears the bulb, which hangs below the tube */
}

/* --- chapter ticks -------------------------------------------------------- */

.thermo__ticks {
  position: absolute;
  inset: 0;
}

/* The button is a 44px square tap target centred on the tube. The line the
   visitor sees is the 10px ::after. --at is the chapter's film progress, 0 at
   the bulb and 1 at FYAH. */
.thermo__tick {
  position: absolute;
  left: 50%;
  bottom: calc(var(--at, 0) * 100%);

  width: 44px;
  height: 44px;
  margin-left: -22px;

  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;

  transform: translateY(50%); /* centre the button on its mark */
}

.thermo__tick::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;

  background: currentColor;
  opacity: 0.5;

  transition: opacity var(--t-fast) var(--ease-smoke),
    transform var(--t-fast) var(--ease-smoke);
}

.thermo__tick:hover::after,
.thermo__tick:focus-visible::after {
  opacity: 1;
  transform: scaleX(1.6);
}

.thermo__tick.is-active::after {
  opacity: 1;
  background: var(--gold);
  transform: scaleX(1.6);
}

.thermo.on-light .thermo__tick.is-active::after {
  background: var(--green);
}

/* The label hangs to the left of the tube. Only the active one is on show;
   the others appear on hover and on keyboard focus. */
.thermo__ticklabel {
  position: absolute;
  right: calc(100% - 12px);
  top: 50%;

  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;

  font-family: var(--font-sign);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;

  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-smoke);
}

.thermo__tick.is-active .thermo__ticklabel,
.thermo__tick:hover .thermo__ticklabel,
.thermo__tick:focus-visible .thermo__ticklabel {
  opacity: 1;
}

/* The focus ring belongs on the tick, not on the invisible 44px square. */
.thermo__tick:focus-visible {
  outline: none;
}

.thermo__tick:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* --- small screens -------------------------------------------------------- */

@media (max-width: 700px) {
  .thermo {
    height: 38vh;
    right: clamp(1rem, 4vw, 1.5rem);
  }
}

/* Below 360px the tube and its labels would sit on top of the body copy, so
   the whole widget steps out of the way. Everything it links to is still
   reachable from the overlay menu and by scrolling. */
@media (max-width: 359px) {
  .thermo {
    display: none;
  }
}