/* ==========================================================================
   horseshoe.oglas.app — diagrams.css
   Scoped styles for the two hand-written SVG figures (bend + compass).
   Every selector is either a `.dg-…` class created by diagrams.js or is
   scoped inside `figure[data-diagram]`; nothing here restyles the page.
   Colours and type come from the tokens in styles.css.
   ========================================================================== */

/* --- figure footprint ------------------------------------------------------
   The canvases reserve their full height before diagrams.js mounts, so the
   SVG appearing never reflows the page. 600 x 410 (bend) / 600 x 560
   (compass) match the SVG viewBoxes exactly. */

figure[data-diagram] .figure-canvas {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

figure[data-diagram="bend"] .figure-canvas {
  aspect-ratio: 600 / 410;
}

figure[data-diagram="compass"] .figure-canvas {
  aspect-ratio: 600 / 560;
}

figure[data-diagram] .diagram-controls,
figure[data-diagram] .diagram-readout {
  max-width: 720px;
  margin-inline: auto;
}

figure[data-diagram] .dg-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Invisible live regions (belt-and-braces if .visually-hidden is absent). */
.dg-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Bend diagram
   ========================================================================== */

.dg-bend__svg {
  user-select: none;
  -webkit-user-select: none;
}

/* The straight axis, revealed underneath the line once the spectrum bends. */
.dg-bend__ghost {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
}

.dg-bend__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-bend__line--left {
  stroke: var(--red);
}

.dg-bend__line--right {
  stroke: var(--blue);
}

.dg-bend__dot {
  stroke-width: 2;
}

.dg-bend__dot--left {
  fill: var(--red);
  stroke: var(--bg-soft);
}

.dg-bend__dot--right {
  fill: var(--blue);
  stroke: var(--bg-soft);
}

.dg-bend__dot--centre {
  fill: var(--bg-soft);
  stroke: var(--text-dim);
  stroke-width: 1.5;
}

.dg-bend__label {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

.dg-bend__label--pole {
  font-size: 21px;
}

.dg-bend__label--left {
  fill: var(--red);
}

.dg-bend__label--right {
  fill: var(--blue);
}

.dg-bend__label--centre {
  fill: var(--text-faint);
  font-size: 16px;
  letter-spacing: 0.16em;
}

.dg-bend__leaders {
  opacity: 0;
  transition: opacity 0.3s ease 0s;
}

.dg-bend__leader {
  stroke-width: 1;
  opacity: 0.55;
}

.dg-bend__leader--left {
  stroke: var(--red);
}

.dg-bend__leader--right {
  stroke: var(--blue);
}

.dg-bend__measure {
  opacity: 1;
  transition: opacity 0.3s ease 0s;
}

.dg-bend__measure line {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1;
}

.dg-bend__measure-label {
  fill: var(--text-faint);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
}

.dg-bend__caption {
  opacity: 0;
  fill: var(--text-dim);
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  transition: opacity 0.35s ease 0s;
}

/* The two annotation layers swap once the morph has opened the horseshoe. */
.dg-bend__svg[data-mode="bent"] .dg-bend__caption {
  opacity: 1;
  transition-delay: 0.7s;
}

.dg-bend__svg[data-mode="straight"] .dg-bend__measure {
  opacity: 1;
  transition-delay: 0.7s;
}

.dg-bend__svg[data-mode="bent"] .dg-bend__measure {
  opacity: 0;
  transition-delay: 0s;
}

.dg-bend__svg[data-mode="bent"] .dg-bend__leaders {
  opacity: 1;
  transition-delay: 0.7s;
}

.dg-bend__svg[data-mode="straight"] .dg-bend__leaders {
  opacity: 0;
  transition-delay: 0s;
}

/* ==========================================================================
   Compass
   ========================================================================== */

.dg-compass__svg {
  user-select: none;
  -webkit-user-select: none;
}

.dg-compass__plane {
  fill: var(--bg);
  fill-opacity: 0.45;
  stroke: var(--line);
  stroke-width: 1;
}

.dg-compass__tint {
  stroke-width: 1;
}

.dg-compass__tint--red {
  fill: var(--red);
  fill-opacity: 0.09;
  stroke: var(--red);
  stroke-opacity: 0.28;
}

.dg-compass__tint--blue {
  fill: var(--blue);
  fill-opacity: 0.09;
  stroke: var(--blue);
  stroke-opacity: 0.28;
}

.dg-compass__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.dg-compass__axis {
  stroke: var(--line-strong);
  stroke-width: 1.25;
}

.dg-compass__arc {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
}

.dg-compass__arc-dot {
  fill: var(--gold);
  opacity: 0.9;
}

.dg-compass__arc-label {
  fill: var(--gold);
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
}

.dg-compass__axis-label {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.16em;
}

.dg-compass__quad {
  fill: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
}

.dg-compass__quad--main {
  fill: var(--text);
  font-size: 19px;
  letter-spacing: 0.1em;
}

.dg-compass__hint {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.02em;
}

/* --- the movable point ---------------------------------------------------- */

.dg-compass__marker {
  cursor: grab;
  touch-action: none;
}

.dg-compass__marker:active {
  cursor: grabbing;
}

.dg-compass__hit {
  fill: transparent;
  fill-opacity: 0;
  pointer-events: all;
  touch-action: none;
}

.dg-compass__cross {
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.8;
}

.dg-compass__ring {
  fill: var(--bg);
  stroke: var(--gold);
  stroke-width: 2.5;
}

.dg-compass__dot {
  fill: var(--gold);
}

/* ==========================================================================
   Reduced motion: every diagram transition is a snap.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dg-bend__caption,
  .dg-bend__measure,
  .dg-bend__leaders {
    transition: none !important;
  }
}