/* Figure: latent code → generator → image.
   Behaviour lives in static/js/latent-to-image.js;
   markup is <figure id="latent-to-image-figure"> 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 latent value scale lives in the JS, from VXTheme.diverging. */
.lti {
  --lti-surface: var(--vx-surface, #fcfcfb);
  --lti-ink: var(--vx-ink, #16160f);
  --lti-ink-muted: var(--vx-muted, #6b6a63);
  --lti-rule: var(--vx-rule, #d8d7cf);
  --lti-block: var(--vx-block, #ebeae2);
  --lti-accent: var(--vx-accent, #eb6834); /* the selected latent code and its path */
  /* The generator itself, in the palette's pastel blue. Blue rather than the
     palette's teal because the latent values are already drawn on a teal→sand
     scale, and a teal block would sit 10 ΔE from a negative cell; this sits 48
     away, and 89 from the accent that flows through it. */
  --lti-structure: var(--vx-pastel-cool, #8990ba);
  margin: 2rem 0 2.5rem;
}

.lti-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--lti-surface);
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

/* ---- headings ---- */
.lti-title {
  font-size: 13px;
  font-weight: 700;
  fill: var(--lti-ink);
}
.lti-subtitle {
  font-size: 11px;
  fill: var(--lti-ink-muted);
}

/* ---- latent matrix ---- */
.lti-row {
  cursor: pointer;
}
.lti-row:focus {
  outline: none;
}
.lti-row-band {
  fill: transparent;
  stroke: none;
}
.lti-row-active .lti-row-band {
  fill: var(--lti-accent);
  fill-opacity: 0.1;
}
.lti-row-selected .lti-row-band {
  stroke: var(--lti-accent);
  stroke-width: 1.5;
}
.lti-row:focus .lti-row-band {
  stroke: var(--lti-ink);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}

.lti-cell-body {
  stroke: var(--lti-surface);
  stroke-width: 1;
}
.lti-row-active .lti-cell-body {
  stroke: var(--lti-ink);
  stroke-width: 1.25;
}
.lti-cell-value {
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: #2c2c22;
  pointer-events: none;
  user-select: none;
}
.lti-cell-value-strong {
  fill: #fffdf8;
}

.lti-row-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--lti-ink-muted);
  pointer-events: none;
  user-select: none;
}
.lti-row-active .lti-row-label {
  fill: var(--lti-accent);
}
.lti-col-label {
  font-size: 10px;
  fill: var(--lti-ink-muted);
}

/* ---- generator stack ---- */
.lti-connector {
  fill: var(--lti-ink);
  fill-opacity: 0.05;
  stroke: none;
}
/* One constant colour. These used to switch between a neutral and an accent
   fill as the pulse passed, which flashed on every row change. The blocks are
   the generator's fixed structure, so they keep their own colour and leave the
   accent to mean "the code you picked, and where it is". */
.lti-block-body {
  fill: var(--lti-structure);
  fill-opacity: 0.22;
  stroke: var(--lti-structure);
  stroke-width: 1;
}
.lti-block-label {
  font-size: 10px;
  fill: var(--lti-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- flow ---- */
.lti-fan {
  fill: none;
  stroke: var(--lti-rule);
  stroke-width: 1;
}
.lti-fan-active {
  stroke: var(--lti-accent);
  stroke-width: 1.5;
}
.lti-wire {
  fill: none;
  stroke: var(--lti-accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.lti-dot {
  fill: var(--lti-accent);
  stroke: var(--lti-surface);
  stroke-width: 1.5;
}

/* ---- output tiles ---- */
.lti-tile-fallback {
  stroke: none;
}
.lti-hatch-line {
  stroke: var(--lti-rule);
  stroke-width: 2;
}
.lti-tile-fallback-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--lti-ink-muted);
  paint-order: stroke;
  stroke: var(--lti-surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.lti-tile-frame {
  fill: none;
  stroke: var(--lti-rule);
  stroke-width: 1;
}

/* ---- caption ---- */
.lti-controls {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 8px;
}
.lti-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lti-ink-muted);
}
.lti-caption b {
  font-weight: 700;
  color: var(--lti-ink);
}
.lti-hint {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-style: italic;
  color: var(--lti-ink-muted);
}

@media screen and (max-width: 768px) {
  .lti-controls {
    display: block;
  }
  .lti-hint {
    display: block;
    margin: 6px 0 0;
  }
}