/* FyreFly Systems: Gimel line scenes. Pairs with /scientific/alef/scenes/scenes.css (which carries the canvas,
   the chapter list, the timeline and the buttons, shared with the Alef gasket journey) and gimel-scenes.js.
   Markup: scripts/scientific-figures/scene-gimel-*.html.

   This file changes the accent only: Alef's drawings highlight in purple, Gimel's in its teal.
   Override the same custom properties as for the Alef scenes, on .scn-gimel or any ancestor:

     --fi-scene-bg / -line / -muted / -rule   ground, wireframe, labels and hairlines (scenes.css)
     --fi-scene-accent       highlighted lines, default var(--gimel)      (#0b7a67 light, #3cc4a8 dark)
     --fi-scene-accent-ink   highlighted labels and text, default var(--gimel-ink)
     --scn-ratio             aspect ratio of a free-standing loop (default 16 / 10) */

.scn-gimel {
  --fi-scene-accent: var(--gimel, #0b7a67);
  --fi-scene-accent-ink: var(--gimel-ink, #0a6b5a);
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scn-gimel {
    --fi-scene-accent: var(--gimel, #3cc4a8);
    --fi-scene-accent-ink: var(--gimel-ink, #5fd3bb);
  }
}
:root[data-theme="dark"] .scn-gimel {
  --fi-scene-accent: var(--gimel, #3cc4a8);
  --fi-scene-accent-ink: var(--gimel-ink, #5fd3bb);
}

/* A free-standing loop: the drawing, then its caption. */
.scn-gimel > .scn-scene { aspect-ratio: var(--scn-ratio, 16 / 10); }
.scn-gimel > .scn-caption { margin-top: var(--space-3, 12px); }

/* The plant journey reuses the gasket journey's stage and controls; its drawing fills the stage. */
.scn-gimel__fill { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* Six chapters instead of four: three per row on a narrow stage. */
@container scn-gasket (max-width: 859px) {
  .scn-gimel--plant .scn-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scn-gimel--plant .scn-chapter__title { font-size: 12.5px; overflow-wrap: break-word; hyphens: auto; }
}

/* Loop controls (built by loopControls() in gimel-scenes.js): play/pause, timeline, reset, and the step on screen. */
.scn-gimel > .scn-controls--loop { margin-top: var(--space-3, 12px); }
.scn-controls--loop .scn-readout { align-items: flex-start; min-width: 0; }
.scn-controls--loop .scn-btn[disabled] { opacity: 0.45; cursor: default; }