/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Interactive diagram viewer (diagram_controller.js): fullscreen fills the
   screen and centers the (still pannable/zoomable) canvas, rather than
   stretching the sanitized SVG to the viewport's aspect ratio. */
[data-controller="diagram"]:fullscreen {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.dark [data-controller="diagram"]:fullscreen {
  background: #171717;
}

[data-controller="diagram"]:fullscreen [data-diagram-target="viewport"] {
  width: 100%;
  height: 100%;
}

/* Tailwind Preflight caps svg at max-width: 100%, which would keep the diagram
   shrunk to its container at scale 1 instead of its natural/intended size. */
[data-diagram-target="canvas"] svg {
  max-width: none;
  -webkit-user-drag: none;
}

/* Panning must not select the SVG text or start a native drag — otherwise a drag
   (especially zoomed in, where the pointer is always over a shape/label) grabs the
   text instead of moving the diagram (see diagram_controller.js). */
[data-diagram-target="viewport"] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
[data-controller="diagram"].is-panning [data-diagram-target="viewport"] {
  cursor: grabbing;
}

/* Terminal proof (terminal_controller.js): blinking cursor while the transcript
   waits on the verdict. Suppressed under reduced motion — the markup already
   ships settled, so there's nothing to animate in that case. */
@keyframes terminal-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.terminal-cursor[data-blinking="true"] { animation: terminal-blink 1s step-end infinite; }
@media (prefers-reduced-motion: reduce) {
  .terminal-cursor[data-blinking="true"] { animation: none; }
}