/* Direct SVG paths; theme colours come from the shared paper variables. */
.plain-page .plain-dog-art .plain-dog-silhouette {
  fill: var(--paper, #fafaf8);
  stroke: currentColor;
  stroke-width: 1.7;
}
.plain-page .plain-dog-art .plain-dog-nose {
  fill: currentColor;
  stroke: none;
}
.plain-page .plain-dog-art .plain-dog-eye { fill: currentColor; }
.plain-page .plain-dog-art .plain-dog-far-leg { stroke-width: 1.3; }
.plain-page .plain-dog-pose-out { opacity: 0; }
.plain-page .plain-dog-pose-in { opacity: 1; }

/* Only an automatic advance into frame 2 enables this finite pose change.
   A manually chosen frame is immediately readable as the seated drawing.
   Keeping the animation attached while paused preserves its exact progress. */
.plain-page [data-dog-pose-transition="true"] .plain-dog-pose-out {
  animation: bw-dog-pose-out .9s ease-in-out .35s both;
  animation-play-state: paused;
}
.plain-page [data-dog-pose-transition="true"] .plain-dog-pose-in {
  animation: bw-dog-pose-in .9s ease-in-out .35s both;
  animation-play-state: paused;
}
.plain-page [data-dog-pose-transition="true"][data-speech-playing="true"] .plain-dog-pose-out,
.plain-page [data-dog-pose-transition="true"][data-speech-playing="true"] .plain-dog-pose-in {
  animation-play-state: running;
}
@keyframes bw-dog-pose-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes bw-dog-pose-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .plain-page [data-dog-pose-transition="true"] .plain-dog-pose-out,
  .plain-page [data-dog-pose-transition="true"] .plain-dog-pose-in { animation: none; }
}
@media (forced-colors: active) {
  .plain-page .plain-dog-art .plain-dog-silhouette { fill: Canvas; }
}
@media print {
  .plain-page .plain-dog-art .plain-dog-silhouette { fill: #fff; }
  .plain-page [data-dog-pose-transition="true"] .plain-dog-pose-out,
  .plain-page [data-dog-pose-transition="true"] .plain-dog-pose-in { animation: none; }
}

/* The comparison changes only captions; its SVG is outside this component. */
.plain-page .plain-dog-comparison {
  margin-top: 20px;
  min-width: 0;
}
.plain-page .plain-dog-comparison > h4 {
  margin: 0 0 10px;
  color: var(--paper-muted);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}
.plain-page .plain-dog-caption-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.plain-page [data-dog-caption-controls][hidden],
.plain-page [data-dog-reading][hidden] {
  display: none !important;
}
.plain-page .plain-dog-caption-controls button {
  appearance: none;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--paper-control);
  border-radius: 3px;
  background: transparent;
  color: var(--paper-ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}
.plain-page .plain-dog-caption-controls button[aria-pressed="true"] {
  border-color: var(--paper-ink);
  box-shadow: inset 0 -3px 0 var(--paper-ink);
  font-weight: 700;
}
.plain-page .plain-dog-caption-controls button:focus-visible {
  outline: 2px solid var(--paper-ink);
  outline-offset: 3px;
}
.plain-page .plain-dog-reading > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.plain-page .plain-dog-reading + .plain-dog-reading { margin-top: 20px; }
.plain-page [data-dog-enhanced="true"] .plain-dog-reading { margin-top: 0; }
@media (hover: hover) {
  .plain-page .plain-dog-caption-controls button:hover {
    border-color: var(--paper-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}
@media (forced-colors: active) {
  .plain-page .plain-dog-caption-controls button {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  .plain-page .plain-dog-caption-controls button[aria-pressed="true"] {
    border: 2px solid Highlight;
    text-decoration: underline;
  }
  .plain-page .plain-dog-caption-controls button:focus-visible { outline-color: Highlight; }
}
@media print {
  .plain-page .plain-dog-caption-controls { display: none !important; }
  .plain-page [data-dog-reading],
  .plain-page [data-dog-reading][hidden] { display: block !important; }
  .plain-page .plain-dog-reading + .plain-dog-reading { margin-top: 12pt; }
  .plain-page .plain-dog-reading > p { font-size: 11pt; }
}