/* ==========================================================================
   experiment.html only. Loaded after site.css.
   Everything here belongs to the transfer-engine widget in the daily-cycle
   section. No new colours: every value is a token from site.css.
   ========================================================================== */

/* 1. The widget is progressive. Without JS the reader gets the fallback
      paragraph and no dead controls; transfer-engine.js adds .is-ready, which
      swaps the fallback for the canvas and the buttons. */
.te-stage,
.te-controls,
.te-status{display:none}
.te.is-ready .te-stage{display:block}
.te.is-ready .te-controls{display:flex}
.te.is-ready .te-status{display:block}
.te.is-ready .te-fallback{display:none}

/* 2. The canvas is a hairline mount like a plate, but it sits on the themed
      page rather than on the void, because it draws in themed ink. Height is
      set by aspect ratio so the canvas is fluid and redraws on resize. */
.te-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--rule);
  background:none;
}
.te-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Below the two-column breakpoint the vessel and the histogram need more
   vertical room per unit of width, so the frame gets squarer. */
@media (max-width:820px){.te-stage{aspect-ratio:5/4}}
@media (max-width:520px){.te-stage{aspect-ratio:1/1}}

/* 3. Controls. Real buttons wearing the existing .btn-ghost skin; only the
      cursor, the disabled state and the row layout are new. */
.te-controls{gap:var(--sp-3);flex-wrap:wrap;align-items:center;margin-top:var(--sp-4)}
.te-controls .btn{cursor:pointer;font-family:var(--font-mono)}
.te-controls .btn[disabled]{opacity:.45;cursor:not-allowed}
.te-controls .btn[disabled]:hover{color:var(--ink);border-color:var(--rule)}

/* 4. The live readout and the honesty notes under the frame. */
.te-status{
  margin-top:var(--sp-3);
  font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:.06em;color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.te-rmnote{margin-top:var(--sp-3);font-size:var(--t-small);color:var(--ink-dim)}
.te-fallback{font-size:var(--t-small);color:var(--ink-dim);border:1px solid var(--rule);
  padding:var(--sp-5)}
.te-caption{margin-top:var(--sp-4);font-size:var(--t-small);color:var(--ink-dim);line-height:1.5}
/* The canvas wants the full wide track; the prose around it does not. Without
   this the captions set at nearly 1,000px and stop being readable. */
.te-caption,.te-rmnote,.te-fallback,.te-status{max-width:var(--measure)}
.te-caption + .te-caption{margin-top:var(--sp-3)}

/* 5. The schematic flag rides above the frame in the same register as a plate
      number, so it reads before the drawing does. */
.te-flag{
  font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--amber-ink);margin:0 0 var(--sp-3);
}

/* 6. .prose sets p colour at (0,1,1) and would repaint these components. */
.prose .te-caption,.prose .te-status,.prose .te-rmnote,.prose .te-fallback{color:var(--ink-dim)}
.prose .te-flag{color:var(--amber-ink)}