/* Northing Labs — line-art drawings (injected by drawings.js).
 * Single-weight strokes in currentColor; ONE accent element per drawing. */

.nl-drawing {
  display: block;
  width: 100%;
  height: auto;
  color: var(--line);
  overflow: visible;
}

/* Base look: every shape is an unfilled, round-capped 1.5 line. :where() keeps
   specificity at zero so the class rules below always win. */
.nl-drawing :where(path, line, rect, circle, polyline, polygon, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Drafting labels */
.nl-drawing .nl-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  fill: var(--muted-on-dark);
  stroke: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nl-drawing .nl-label--ink { fill: var(--ink); font-weight: 500; }
.nl-drawing .nl-total { font-size: 17px; letter-spacing: 0; fill: var(--text-on-dark); font-weight: 500; }
.nl-drawing .nl-card { font-size: 12px; font-weight: 500; fill: var(--text-on-dark); letter-spacing: 0; }
.nl-drawing .nl-deg { font-size: 7.5px; letter-spacing: 0.04em; }
.nl-drawing .nl-coord { font-size: 8px; }

/* Line variants */
.nl-drawing .nl-faint { stroke-opacity: 0.45; }
.nl-drawing .nl-dash { stroke-dasharray: 3 5; stroke-opacity: 0.5; }
.nl-drawing .nl-dot { fill: currentColor; stroke: none; }
.nl-drawing .nl-solid { fill: var(--ink); }

/* The ONE accent: a lit indicator */
.nl-drawing .nl-accent { fill: var(--signal); stroke: var(--signal); }
.nl-drawing .nl-beam,
.nl-drawing .nl-north { stroke: var(--signal); }
.nl-drawing .nl-beam { fill: none; stroke-width: 2; }
.nl-drawing .nl-north { fill: var(--signal); }

/* Quiet sheet placeholder */
.nl-drawing--sheet-empty { opacity: 0.6; }
.nl-drawing--sheet-empty .nl-label { font-size: 9px; }

/* Click ripple sits invisible until the idle loop runs */
.nl-drawing .nl-ripple { opacity: 0; stroke: var(--text-on-dark); }

/* ---------- Idle loops (after drawn, motion allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-cursor,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-ripple,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-button,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-knob,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-beam,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-wave,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-led,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-needle,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-cross,
  html:not(.reduce-motion) .nl-drawing.is-drawn .nl-pip {
    transform-box: fill-box;
    transform-origin: center;
  }

  /* presence: click pulse every ~4s */
  html:not(.reduce-motion) .nl-drawing--presence.is-drawn .nl-cursor { animation: nl-click-cursor 4s var(--ease-out, ease-out) 1s infinite; transform-origin: 0% 0%; }
  html:not(.reduce-motion) .nl-drawing--presence.is-drawn .nl-ripple { animation: nl-click-ripple 4s ease-out 1s infinite; }
  html:not(.reduce-motion) .nl-drawing--presence.is-drawn .nl-button { animation: nl-click-button 4s ease-out 1s infinite; }

  /* tools: knob slides gently */
  html:not(.reduce-motion) .nl-drawing--tools.is-drawn .nl-knob { animation: nl-knob 6.5s ease-in-out infinite alternate; }

  /* systems: scan beam sweeps */
  html:not(.reduce-motion) .nl-drawing--systems.is-drawn .nl-beam {
    transform-box: view-box;
    transform-origin: 230px 164px;
    animation: nl-sweep 2.6s ease-in-out infinite alternate;
  }

  /* operations: waves pulse outward, LED blinks */
  html:not(.reduce-motion) .nl-drawing--operations.is-drawn .nl-wave {
    transform-box: view-box;
    transform-origin: 122px 98px;
    animation: nl-wave 2.4s ease-out infinite;
  }
  html:not(.reduce-motion) .nl-drawing--operations.is-drawn .nl-wave--2 { animation-delay: 0.25s; }
  html:not(.reduce-motion) .nl-drawing--operations.is-drawn .nl-wave--3 { animation-delay: 0.5s; }
  html:not(.reduce-motion) .nl-drawing--operations.is-drawn .nl-led { animation: nl-led 1.2s steps(1, end) infinite; }

  /* compass: slow wobble after the needle settles */
  html:not(.reduce-motion) .nl-drawing--compass.is-drawn .nl-needle {
    transform-box: view-box;
    transform-origin: 150px 150px;
    animation: nl-wobble 6s ease-in-out 0s infinite alternate;
  }

  /* sheet: crosshair blinks once, pip breathes */
  html:not(.reduce-motion) .nl-drawing--sheet-empty.is-drawn .nl-cross { animation: nl-blink 1.4s ease-in-out 0.4s 1; }
  html:not(.reduce-motion) .nl-drawing--sheet-empty.is-drawn .nl-pip { animation: nl-led 3s steps(1, end) infinite; }
}

@keyframes nl-click-cursor {
  0%, 78%, 100% { transform: translate(0, 0); }
  84% { transform: translate(2px, 2px); }
  90% { transform: translate(0, 0); }
}
@keyframes nl-click-ripple {
  0%, 82% { opacity: 0; transform: scale(0.3); }
  86% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes nl-click-button {
  0%, 82%, 94%, 100% { transform: scale(1); }
  86% { transform: scale(0.965); }
}
@keyframes nl-knob {
  from { transform: translateX(-60px); }
  to { transform: translateX(68px); }
}
@keyframes nl-sweep {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}
@keyframes nl-wave {
  0% { opacity: 0.15; transform: scale(0.88); }
  35% { opacity: 1; }
  100% { opacity: 0.05; transform: scale(1.12); }
}
@keyframes nl-led {
  0%, 60% { opacity: 1; }
  60.01%, 100% { opacity: 0.25; }
}
@keyframes nl-wobble {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}
@keyframes nl-blink {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.15; }
}