/* The demo page.
 *
 * A demo wears the tools' studio: console on the left, the machine in the
 * middle, the instruments on the right, all of it in one screen. What is
 * here is only what a running model needs and a calculator does not — the
 * scenario buttons, the transport, the valve bars, and the control loop in
 * the slot a tool gives its chart.
 */

/* --------------------------------------------------------------- console */

.d-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.d-scenario {
  font: 600 0.64rem/1 var(--body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45em 0.75em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.d-scenario:hover { color: var(--fg); border-color: var(--faint); }
.d-scenario.is-on { color: var(--bg); background: var(--fg); border-color: var(--fg); }

.d-scenario-note {
  color: var(--dim);
  font-size: 0.72rem;
  line-height: 1.45;
  margin-bottom: 0.7rem;
  border-left: 1px solid var(--line);
  padding-left: 0.6rem;
}

.d-console .d-field { margin: 0; padding: 0.45rem 0 0; border-top: 1px solid var(--line); }
.d-console .d-field > label {
  font: 600 0.6rem/1.2 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.d-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.d-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--line);
  outline-offset: 4px;
}
.d-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
}
.d-slider::-moz-range-thumb {
  width: 12px; height: 12px; border: 0;
  border-radius: 50%;
  background: var(--fg);
  cursor: pointer;
}

.d-value {
  font: 600 0.84rem/1 var(--body);
  font-variant-numeric: tabular-nums;
  min-width: 3.1em;
  text-align: right;
}
.d-unit { color: var(--faint); font-size: 0.7rem; }

/* The console inherits the tools' rule that help text does not belong in
   it — the label carries the guidance as a title, and the page prints it in
   full under the machine. */

.d-transport { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.d-speed {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: 600 0.58rem/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.d-speed select {
  font: 600 0.66rem/1 var(--body);
  color: var(--fg);
  background: rgba(5, 5, 5, 0.72);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.35em 0.3em;
}

/* ----------------------------------------------------------------- stage */

.d-phase {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  z-index: 3;
  font: 600 0.64rem/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.d-phase.is-warn { color: var(--fg); }
.d-phase.is-warn::before { content: "▲ "; }

/* ------------------------------------------------------- control scheme */

/* It sits where a tool puts its chart, for the same reason: the thing that
   explains the picture belongs beside the picture, not under the fold. */
.d-scheme .d-blocks { list-style: none; margin: 0.5rem 0 0; display: grid; gap: 1px; }

.d-scheme .d-blocks li {
  position: relative;
  padding: 0.3rem 0 0.3rem 0.75rem;
  border-left: 1px solid var(--line);
  opacity: 0.45;
  transition: opacity 0.2s, border-color 0.2s;
}
.d-scheme .d-blocks li::before {
  content: "";
  position: absolute;
  left: -3px; top: 0.62rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s;
}
.d-scheme .d-blocks li.is-live { opacity: 1; border-left-color: rgba(255, 255, 255, 0.8); }
.d-scheme .d-blocks li.is-live::before { background: var(--fg); }

.d-scheme .d-blocks b {
  display: block;
  font: 600 0.62rem/1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.d-scheme .d-blocks span {
  display: none;              /* the note is the title attribute on hover */
}

.d-feedback {
  margin-top: 0.5rem;
  color: var(--faint);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}
.d-feedback span { margin-right: 0.35em; }

/* ----------------------------------------------------------- instruments */

.d-readout .t-hud { gap: 0.45rem 0.9rem; }
.d-readout .t-hud li { position: relative; }
.d-readout .t-hud b { font-variant-numeric: tabular-nums; }
.d-readout .t-hud i {
  font-style: normal;
  font-size: 0.6rem;
  color: var(--faint);
  margin-left: 0.25em;
}

.d-chip-bar {
  display: block;
  height: 2px;
  background: var(--line);
  margin-top: 0.3rem;
}
.d-chip-bar i { display: block; height: 100%; background: var(--fg); margin: 0; }

.d-valves { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }

.d-valves-head {
  font: 600 0.58rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.d-valves-head span { color: rgba(255, 255, 255, 0.2); margin-left: 0.4em; }

.d-valve-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem 0.8rem;
  margin-top: 0.4rem;
}

.d-valve {
  display: grid;
  grid-template-columns: 1.7em 1fr;
  align-items: center;
  gap: 0.4rem;
}
.d-valve span {
  font: 600 0.58rem/1 var(--body);
  letter-spacing: 0.08em;
  color: var(--faint);
}
.d-valve i {
  display: block;
  height: 5px;
  width: 0;
  background: var(--fg);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: width 0.08s linear;
}

.d-outcome {
  margin-top: 0.8rem;
  border-left: 2px solid var(--fg);
  padding-left: 0.7rem;
  color: var(--dim);
  font-size: 0.74rem;
  line-height: 1.5;
}
.d-outcome.is-bad { color: var(--fg); }

@media (max-width: 1100px) {
  .d-valve-rows { grid-template-columns: repeat(4, 1fr); }
  .d-scheme .d-blocks span { display: block; margin-top: 0.25rem;
    font-size: 0.72rem; line-height: 1.45; color: var(--dim); }
}

/* The scheme is a legend, not a panel: it names the loop and lights the live
   block, and it must not sit on the machine it explains. */
.d-scheme.is-overlay { width: clamp(10.5rem, 19%, 15rem); padding: 0.6rem 0.7rem 0.5rem; }

/* a console column is 14rem wide; nothing in it may be wider */
.d-console .d-field { min-width: 0; overflow-wrap: anywhere; }
.d-console .t-advanced-panel { display: grid; gap: 0.1rem; }

/* The console is a grid track, and a grid item defaults to min-content for
   its minimum width — a slider and two figures together are wider than the
   column, so the field has to be told it may shrink. */
.d-console .d-field { width: 100%; max-width: 100%; min-width: 0; }
.d-console .d-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.d-console .d-slider { min-width: 0; }


/* Every child of the console lives inside the column, whatever its content
   would prefer: a grid item defaults to its min-content width, and a row of
   scenario buttons would otherwise push the track past the stage. */
.d-console { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.d-console > *, .d-console .t-advanced-panel > * { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------- reading width */

/* The studio wants the whole window; prose does not. A wide wrap narrows
   the blocks a tool has, and a demo has three it does not — the experiment
   list, the parts of the machine and the physics note. */
.sg-wrap.is-wide .t-experiment ol,
.sg-wrap.is-wide .t-about p,
.sg-wrap.is-wide .t-model-note { max-width: 54rem; }

.t-experiment ol {
  margin: 0.4rem 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.t-experiment li { line-height: 1.6; padding-left: 0.3rem; }
.t-experiment li::marker { color: var(--faint); font-size: 0.85em; }

/* Six parts across five columns leaves one hanging under the row and the
   next heading landing on it. Three columns fit the longest note, and the
   section that follows keeps its distance. */
.t-walkthrough .t-annotations { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.t-about {
  margin-top: clamp(2.2rem, 6vh, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.t-about .sg-display { margin: 0.4rem 0 1rem; }
.t-about p { margin-bottom: 0.9rem; line-height: 1.7; color: var(--dim); }

/* ------------------------------------------------------ pneumatic system */

/* The system is the thing being flown, so it gets the room a tool's chart
   gets and a little more: tanks, manifold, four branches, the yaw pair and
   the isolated mains, with the live figure beside each part. */
.d-scheme.is-overlay { width: clamp(16.5rem, 29%, 20.5rem); padding: 0.65rem 0.75rem 0.6rem; }

.d-sys { display: block; width: 100%; height: auto; margin-top: 0.35rem; overflow: visible; }

.d-sys-vessel { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.2; }
.d-sys-fill { fill: rgba(255, 255, 255, 0.16); transition: width 0.25s linear; }
.d-sys-pipe {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}
.d-sys-pipe.is-shut { stroke: rgba(255, 255, 255, 0.18); stroke-dasharray: none; }
.d-sys-node { fill: var(--fg); }
.d-sys-valve {
  fill: rgba(255, 255, 255, 0.0);
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.d-sys-valve.is-shut { stroke: rgba(255, 255, 255, 0.22); }
.d-sys-nozzle { fill: rgba(5, 5, 5, 0.9); stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.1; }
.d-sys-jet { fill: rgba(255, 255, 255, 0.55); }

.d-sys text { font-family: var(--body); }
.d-sys-lab { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; fill: rgba(255, 255, 255, 0.85); }
.d-sys-cap { font-size: 8px; font-weight: 600; letter-spacing: 0.1em; fill: rgba(255, 255, 255, 0.5); }
.d-sys-val { font-size: 10px; fill: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
.d-sys-val.is-strong { font-weight: 600; fill: var(--fg); }
/* shut text is greyed; a shut pipe is only a faint line — never a fill,
   which once turned the isolated main line into a grey triangle */
.d-sys text.is-shut { fill: rgba(255, 255, 255, 0.34); }
.d-sys-legend { font-size: 7.5px; fill: rgba(255, 255, 255, 0.34); letter-spacing: 0.02em; }

/* the control loop under it, as one line of stages */
.d-loop-head { margin-top: 0.55rem; }
.d-scheme .d-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.2rem;
  margin-top: 0.35rem;
  counter-reset: loop;
}
.d-scheme .d-blocks li {
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  opacity: 0.5;
}
.d-scheme .d-blocks li::before { content: none; }
.d-scheme .d-blocks li.is-live { opacity: 1; border-color: rgba(255, 255, 255, 0.7); }
.d-scheme .d-blocks b { font-size: 0.54rem; letter-spacing: 0.06em; }

@media (max-width: 1100px) {
  .d-scheme.is-overlay { width: auto; }
}
/* solid enough that a plume behind it does not read as part of the drawing */
.d-scheme.is-overlay { background: rgba(5, 5, 5, 0.88); }

/* the body toggle sits with the zoom cluster, in the same button style */
.d-xray {
  position: absolute;
  right: 0.7rem;
  bottom: 3.1rem;
  z-index: 4;
  width: auto;
  padding: 0 0.6em;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------- physics, figure, CTA */

/* The physics note reads on the left; the car, drawn the way the landing
   draws its pictures, stands on the right. */
.d-about {
  display: grid;
  grid-template-columns: minmax(0, 54rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.d-figure { position: relative; height: clamp(16rem, 34vw, 28rem); }
.d-figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.d-source {
  margin-top: 1.4rem;
  color: var(--faint);
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 54rem;
}
.d-source a { color: var(--dim); text-decoration: underline; text-underline-offset: 0.2em; }
.d-source a:hover { color: var(--fg); }

.d-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: 1.6rem;
}

@media (max-width: 900px) {
  .d-about { grid-template-columns: 1fr; }
  .d-figure { height: 14rem; order: -1; }
}

/* the suction drawing, shown under the pneumatic one in its own experiment */
.d-sys-extra { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--line); }
.d-sys-extra[hidden] { display: none; }
.d-fan-blades { fill: rgba(255, 255, 255, 0.75); }

/* the one control that runs the flight: bright, full width, unmistakable */
.d-transport { display: block; }
.d-start { width: 100%; justify-content: center; text-align: center; }

/* Two lead figures — altitude and flight time — share the top row, each in
   the tools' large lead type, instead of one spanning it. */
.d-readout .t-hud .is-lead { grid-column: auto; }

/* The landing's own field runs on a demo page — the same two canvases, the
   same rules — so the figure beside the physics note is gathered out of the
   background and handed back to it, rather than drawn on top. */
#field, #field2 {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}