/* pipeline.css — visual styling for the Arke pipeline animation.
   Shared between the standalone /pipeline page and the front-page embed.
   Font size is inherited from the <svg> element's `font-size` attribute,
   so the same classes render at 18px in standalone and 16px in embed. */

.pipe-frozen      { stroke: var(--pebble); stroke-width: 2; fill: none; }
.pipe-active      { stroke: var(--accent); stroke-width: 2; fill: none; }
.pipe-dot         { fill: var(--pebble); transition: fill 0.25s ease-out; }
.pipe-dot.themed  { fill: var(--accent); }
#exitArrow         { transition: fill 0.25s ease-out; }
.pipe-arrow-frozen { fill: var(--pebble); }
.pipe-arrow-themed { fill: var(--accent); }

.arrow-frozen      { stroke: var(--pebble); stroke-width: 2; fill: none; }
.arrow-active      { stroke: var(--accent); stroke-width: 2; fill: none; opacity: 0; }
.arrow-frozen-head { fill: var(--pebble); }
.arrow-active-head { fill: var(--accent); opacity: 0; }

.chat-plate         { fill: var(--panel); }
.chat-plate-outline { fill: none; stroke: var(--accent); stroke-width: 2; transition: opacity 0.4s ease-out; }
.chat-line {
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
  fill: var(--text);
  white-space: pre;
}
.chat-line.slot-0 { fill: var(--faint); }
.chat-line.slot-1 { fill: var(--muted); }
.chat-line.slot-2 { fill: var(--text); }
.chat-line.slot-3 { fill: var(--text); }
.chat-line .italic { font-style: italic; }

.phase-container        { fill: var(--panel); stroke: none; }
.phase-container.active { fill: var(--accent); stroke: none; }
.phase-label            { font-family: "Times New Roman", Times, "Liberation Serif", serif; fill: var(--text); }
.phase-label.active     { fill: var(--parchment); }

.display-text {
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
  fill: var(--text);
  dominant-baseline: middle;
  white-space: pre;
}
.display-text .italic, .display-text.italic   { font-style: italic; }
.display-text .code-ref, .display-text.code-ref { text-decoration: underline; }
.strike-line { stroke: var(--pebble); stroke-width: 2; }