/* Demo page only: the linear-vs-transport comparison. Loaded after style.css,
   so these extend the `.demo*` rules there. */

/* Two graphs need more room than one: use the full `.wide` column. */
.demo {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
}

.demo-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.demo-compare .demo-main {
  padding: 1rem;
}

.demo-panel-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.demo-math {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}

/* The transport panel is the point of the page; the mixture is the foil. */
.demo-transport {
  border-color: var(--sand);
}

.demo-stat {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.demo-stat output {
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.demo-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Below this the controls no longer fit beside two graphs: controls on top,
   graphs still side by side so the contrast survives. */
@media (max-width: 900px) {
  .demo {
    grid-template-columns: 1fr;
  }

  .demo-controls {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  .demo-compare {
    grid-template-columns: 1fr;
  }
}

/* `.post-summary`'s margin shorthand cancels `.narrow`'s centering; restore it
   so the footnote lines up with the intro above the panels. */
.post-summary.narrow {
  margin: 1.5rem auto 0;
}

/* ---------- palettes: recolouring a painting toward a barycenter ---------- */

.palette-refs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.palette-ref {
  margin: 0;
}

.palette-ref img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
}

.palette-ref figcaption {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}

/* One pixel per swatch, stretched: `pixelated` keeps the swatch edges hard. */
.palette-strip {
  display: block;
  width: 100%;
  height: 14px;
  margin: 0.35rem 0;
  border-radius: 3px;
  image-rendering: pixelated;
}

.palette-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.palette-mix {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.palette-mix input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}

.palette-strips {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 0.75rem;
  margin: 0.5rem 0 0;
}

.palette-strips dt {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.palette-strips dd {
  margin: 0;
}

.palette-analysis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  max-width: 900px;
  margin: 1.5rem auto 1rem;
}

.palette-analysis .demo-main {
  padding: 1rem;
}

.palette-analysis-readout {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.palette-analysis-readout p {
  margin: 0;
}

.simplex-mark circle {
  fill: none;
  stroke: var(--fg);
  stroke-width: 2;
}

.simplex-mark text {
  fill: var(--fg);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.palette-compare .demo-controls .palette-mix {
  margin-top: 0;
}

/* The demo-compare canvases' strips sit under their own picture; the painted
   palette stays with the slider that fades back to it. */
.palette-demo .demo-controls .palette-mix {
  margin-top: 1rem;
}

.palette-lhats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

.palette-lhats dt {
  color: var(--muted);
}

.palette-lhats dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
}

.palette-lhats .button {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}

.palette-credits {
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .palette-analysis {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hamiltonian shooting page ---------- */

.shooting {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 900px;
  margin: 2rem auto 1rem;
}

.shooting-controls {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shooting-controls label {
  color: var(--muted);
  font-size: 0.85rem;
}

.shooting-controls select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
}

.shooting-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.shooting-transport input[type="range"] {
  flex: 1 1 100px;
  min-width: 0;
}

.shooting-transport output {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shooting-speeds {
  display: flex;
  gap: 0.4rem;
}

.shooting-speeds .button {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

.shooting-speeds .button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-fg);
}

.shooting-threshold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}

.shooting-threshold label {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 0.85rem;
}

.shooting-threshold input[type="range"] {
  flex: 1 1 100px;
  min-width: 0;
}

.shooting-threshold output {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shooting-figure {
  padding: 1rem;
}

.shooting-edges line {
  stroke: var(--rule);
  transition: stroke 0.08s linear, stroke-width 0.08s linear, stroke-opacity 0.08s linear;
}

.shooting-arrows polygon {
  transition: opacity 0.08s linear, fill 0.08s linear;
}

@media (max-width: 900px) {
  .shooting {
    grid-template-columns: 1fr;
  }

  .shooting-controls {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}