/* Figure: the steering interface as an equation of interfaces.
   Drawing and every editable value live in static/js/steering-ui.js;
   markup is <d-figure id="steering-ui-figure" class="l-page"> in src/index.html. */

/* Colours come from the shared theme (static/js/theme.js), which also handles the
   light/dark switch; the literals here are only fallbacks for if it fails to
   load. The windows follow the page theme — they are wireframes of thin rules and
   small type, and the face thumbnails carry their own colour either way. The one
   exception is the mix panel's canvas, which stays light because the octopus
   artwork on it does; see .uise-canvas. */
.uise {
  --uise-ink: var(--vx-ink, #16160f);
  --uise-muted: var(--vx-muted, #6b6a63);
  --uise-rule: var(--vx-rule, #d8d7cf);
  --uise-surface: var(--vx-surface, #fcfcfb);
  --uise-block: var(--vx-block, #ebeae2);
  /* The two panels. `strong-*` rather than the pastels: these carry small text
     and hairlines, and they stay 91 ΔE apart under simulated dichromacy — though
     each one also names itself in words, so colour never works alone here. */
  --uise-cool: var(--vx-strong-cool, #3b499b);
  --uise-warm: var(--vx-strong-warm, #7c6b1d);
  margin: 2rem 0 2.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  color: var(--uise-ink);
}

/* ---- the equation: three blocks, two operators ---- */
/* Flex rather than grid, so each block keeps its own caption when the row wraps.
   `flex` is set per cell in the script, in proportion to that block's viewBox
   width, which is what makes all three draw at one scale. */
.uise-eq {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 14px;
}

.uise-cell {
  min-width: 0;
}

.uise-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Serif, to match the article's maths: these are the operators of a real
   equation, not decoration between pictures. Nudged up so they sit against the
   middle of the windows rather than the middle of the captions. */
.uise-op {
  flex: none;
  align-self: center;
  margin-top: -1.8em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1;
  color: var(--uise-muted);
}

/* ---- what each block is ---- */
.uise-term {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--uise-rule);
  text-align: center;
}
.uise-term-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.uise-term-name.is-cool {
  color: var(--uise-cool);
}
.uise-term-name.is-warm {
  color: var(--uise-warm);
}
.uise-term-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--uise-muted);
}

/* ---- the mockup's own type ---- */
.uise-svg text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}
.uise-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--uise-ink);
}
.uise-title.is-cool {
  fill: var(--uise-cool);
}
.uise-title.is-warm {
  fill: var(--uise-warm);
}
/* Section and pane names. Uppercased here rather than in the strings, so what a
   screen reader gets is still ordinary words. */
.uise-plabel {
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--uise-muted);
}
.uise-plabel.is-cool {
  fill: var(--uise-cool);
  font-weight: 700;
}
.uise-plabel.is-warm {
  fill: var(--uise-warm);
  font-weight: 700;
}
/* Values are set in the same serif as the article's numbers. */
.uise-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8.5px;
  fill: var(--uise-muted);
  font-variant-numeric: tabular-nums;
}
.uise-slottext {
  font-size: 8px;
  fill: var(--uise-muted);
}
/* Labels sitting on the map need to survive whatever speck they land on, hence
   the halo in the surface colour. */
.uise-maplabel {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--uise-ink);
  stroke: var(--uise-surface);
  stroke-width: 2.6px;
  paint-order: stroke;
}
.uise-maplabel.is-quiet {
  fill: var(--uise-muted);
  font-weight: 400;
}

/* ---- window chrome ---- */
.uise-window {
  fill: var(--uise-surface);
  stroke: var(--uise-rule);
  stroke-width: 1;
}
.uise-hairline {
  stroke: var(--uise-rule);
  stroke-width: 1;
}
.uise-dot {
  fill: var(--uise-rule);
}
.uise-pane {
  fill: var(--uise-block);
  fill-opacity: 0.45;
  stroke: var(--uise-rule);
  stroke-width: 1;
}
.uise-slot {
  fill: none;
  stroke: var(--uise-rule);
  stroke-width: 1;
}
.uise-glyph {
  fill: none;
  stroke: var(--uise-muted);
  stroke-width: 1;
}
.uise-glyph-line {
  stroke: var(--uise-muted);
  stroke-width: 1;
  stroke-linecap: round;
}
.uise-chip {
  fill: none;
  stroke: var(--uise-rule);
  stroke-width: 1;
}
.uise-chiptext {
  font-size: 7.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--uise-muted);
}

/* ---- the map ---- */
.uise-speck {
  fill: var(--uise-muted);
  fill-opacity: 0.34;
}
.uise-path {
  stroke: var(--uise-cool);
  stroke-width: 1.4;
  stroke-dasharray: 3 2.5;
  stroke-linecap: round;
}
.uise-target {
  fill: none;
  stroke: var(--uise-cool);
  stroke-width: 1.3;
}
.uise-target-dot {
  fill: var(--uise-cool);
}
.uise-ring {
  fill: none;
  stroke: var(--uise-ink);
  stroke-width: 1.2;
}
.uise-ring.is-base {
  stroke: var(--uise-cool);
  stroke-width: 2.2;
}
.uise-ring.is-quiet {
  stroke: var(--uise-rule);
  stroke-width: 1.2;
}
/* A marble in the octopus's grip; its colour is the artwork's own, set per slot
   in the script. */
.uise-ring.is-marble {
  stroke-width: 2;
}

/* ---- the mix panel: the octopus, its arms, and what they hold ---- */
/* A white canvas whichever way the page goes. The octopus is artwork, and the
   article keeps it on its own light surface everywhere it appears — so the ink
   drawn on this pane comes from the --vx-panel-* family, not the page's. */
.uise-canvas {
  fill: var(--vx-panel, #ffffff);
  stroke: var(--uise-rule);
  stroke-width: 1;
}
/* The artwork behind the arms, at about the opacity its own panel uses. */
.uise-watermark {
  opacity: 0.3;
}
.uise-spoke {
  stroke: var(--vx-panel-muted, #6b6a63);
  stroke-linecap: round;
  /* width is the weight, set per arm in the script */
}
.uise-hub {
  fill: var(--vx-panel-ink, #16160f);
}
.uise-hublabel {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 9px;
  fill: var(--vx-panel-ink, #16160f);
}
/* The weight, riding on the arm it belongs to. Haloed in the canvas colour,
   since it crosses both its own arm and the octopus behind it. */
.uise-wlabel {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  text-anchor: middle;
  fill: var(--vx-panel-ink, #16160f);
  stroke: var(--vx-panel, #ffffff);
  stroke-width: 2.4px;
  paint-order: stroke;
  font-variant-numeric: tabular-nums;
}

/* ---- thumbnails ---- */
.uise-frame {
  fill: none;
  stroke: var(--uise-rule);
  stroke-width: 1;
}
/* The arithmetic under the render, in the article's own serif: what the two
   panels either side of it add up to. */
.uise-formula {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  fill: var(--uise-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- controls inside the mockup ---- */
.uise-track {
  fill: var(--uise-rule);
}
.uise-fill {
  fill: var(--uise-muted);
}
.uise-fill.is-warm {
  fill: var(--uise-warm);
}
.uise-knob {
  fill: var(--uise-surface);
  stroke: var(--uise-warm);
  stroke-width: 2;
}

/* ---- narrow screens ---- */
/* Below this the three windows cannot share a row at a readable size, so the
   equation stacks: one block per line with its operator centred above it. */
@media screen and (max-width: 900px) {
  .uise-eq {
    gap: 4px 0;
  }
  .uise-cell {
    flex: 1 1 100% !important;
    max-width: 420px;
    margin: 0 auto;
  }
  .uise-op {
    flex: 1 0 100%;
    align-self: auto;
    margin: 2px 0 0;
    font-size: 22px;
    text-align: center;
  }
  .uise-term {
    padding-bottom: 4px;
  }
}