/* The dive, in the Engineering chapter: a full-screen drawing that the scroll zooms through, the
   words at its top left, and the zoom the view is at, read the way the app reads it. The stage is the
   page's own ground, not a panel on it: the drawing's edges melt into it on the canvas as it slides
   in and out. */
.dive .stage { background: var(--ground); }
.dive-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The words keep the corner #drawn's keep just before it, clear of the nav's 64 px, which comes
   back over the stage whenever the page is scrolled up. The sheet stands beside them, its top level
   with the headline's. */
.dive-copy { position: relative; z-index: 2; height: 100%; padding-top: clamp(76px, 12vh, 120px); display: flex; flex-direction: column; justify-content: flex-start; pointer-events: none; }
/* As wide as its longest line, so the drawing can be framed in the room the words leave. The
   headline keeps the page's own size: the drawing is framed round it, whatever it measures. */
.dive-head { width: max-content; max-width: 100%; will-change: opacity, transform; }
/* The readout is an object on the ground, one step up and solid: a frosted glass here would smear
   the lines under it into a grey haze and pick up the blue of a tolerance zone. It is a reading and
   nothing in it is a control, so it takes no clicks. */
.dive-read {
  right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 30px; padding: 16px 22px;
  border-radius: 20px; background: var(--raise-2); -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
/* Right to left the words stand at the top right, so the readout keeps the other corner. */
[dir="rtl"] .dive-read { right: auto; left: var(--gutter); }
/* As wide as the longest thing it says, so the scale and the track never shift as it changes. */
.dr-now { display: flex; flex-direction: column; gap: 6px; width: 176px; }
.dr-now b { font: 500 34px/1 var(--mono); letter-spacing: -0.02em; color: var(--snow); font-variant-numeric: tabular-nums; }
.dr-now span { font: 12.5px var(--mono); color: var(--snow-dim); white-space: nowrap; }
/* The stops spaced evenly along a track, as they are held evenly on the scroll, and a thumb that
   rides the live scale between them. The thumb is a reading, not a control, so it is inked like the
   figure it follows rather than in blue. */
.dr-track { position: relative; width: 300px; height: 44px; margin-right: 14px; }
.dr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
.dr-track ol { list-style: none; margin: 0; padding: 0; }
.dr-track li { position: absolute; top: 24px; transform: translateX(-50%); font: 12px/1 var(--mono); color: var(--snow-faint); transition: color 0.3s; white-space: nowrap; }
.dr-track li::before { content: ""; position: absolute; left: 50%; top: -15px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.25); }
.dr-track li.on { color: var(--snow); }
.dr-thumb { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--snow); box-shadow: 0 0 0 3px var(--raise-2); }

@media (max-width: 900px) {
  .dive-copy { justify-content: flex-start; padding-top: 90px; }
  .dive-read, [dir="rtl"] .dive-read { left: var(--gutter); right: var(--gutter); bottom: 22px; flex-wrap: wrap; align-items: stretch; gap: 10px; }
  /* On its own row whatever it says, so the readout never changes height between stops. */
  .dr-now { width: auto; flex: 1 0 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .dr-now b { font-size: 26px; }
  .dr-track { flex-basis: 100%; width: auto; margin: 0 16px; }
}

/* A short window keeps its height for the drawing: the readout shrinks to a slim bar in the corner,
   the scale and the stop's name on one line and the stops as dots. The figures of the stops, the
   scale says as the thumb reaches each dot. The name keeps the room of the longest a route has, so
   the bar never changes width between stops. */
@media (max-height: 700px) and (min-width: 600px) {
  [dir="rtl"] .dive-read { left: var(--gutter); right: auto; }
  .dive-read { left: auto; right: var(--gutter); bottom: 14px; flex-wrap: nowrap; align-items: center; gap: 18px; padding: 8px 18px; border-radius: 14px; }
  .dr-now { width: auto; flex: none; flex-direction: row; align-items: baseline; gap: 12px; }
  .dr-now b { min-width: 5ch; font-size: 18px; }
  .dr-now span { min-width: 22ch; font-size: 12px; }
  .dr-track { flex: none; width: 84px; height: 14px; margin: 0; }
  .dr-track::before { top: 6px; }
  .dr-track li { top: 5px; font-size: 0; }
  .dr-track li::before { top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; }
  .dr-thumb { top: 3px; width: 8px; height: 8px; margin-left: -4px; box-shadow: 0 0 0 2px var(--raise-2); }
}
/* A phone held short keeps its two rows, closer together. */
@media (max-height: 700px) and (max-width: 599px) {
  .dive-read { bottom: 16px; padding: 10px 14px; gap: 10px; }
  .dr-now b { font-size: 22px; }
}