/* ── Workshop layer: callouts, tally, hero, mechanisms, night shift ──
   Speaks the site's token language (see :root in index.html). */

/* ---- Callouts: drawing-flag annotations ---- */
#callout-layer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 60; }

.callout-flag {
  position: absolute;
  transform: translate(-2px, -100%);
  font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--brass-hi, #eccf8a);
  background: color-mix(in srgb, var(--panel, #141b24) 88%, transparent);
  border: 1px solid var(--brass, #d0aa5c);
  border-radius: 3px;
  padding: 3px 8px;
  max-width: min(340px, calc(100vw - 24px));
  width: max-content;
  opacity: 0;
  transition: opacity .18s ease;
}
.callout-flag::before {           /* leader line */
  content: "";
  position: absolute;
  width: 14px; height: 1px;
  background: var(--brass, #d0aa5c);
  transform-origin: left center;
}
.callout-flag.pos-top::before    { left: 2px; bottom: -8px; transform: rotate(135deg); }
.callout-flag.pos-bottom         { transform: translate(-2px, 0); }
.callout-flag.pos-bottom::before { left: 2px; top: -8px; transform: rotate(-135deg); }
.callout-flag.pos-left           { transform: translate(-100%, 0); }
.callout-flag.pos-left::before   { right: -12px; top: 50%; transform: rotate(0deg); }
.callout-flag.pos-right          { transform: translate(0, 0); }
.callout-flag.pos-right::before  { left: -12px; top: 50%; }
.callout-flag.on { opacity: 1; }

[data-callout] { cursor: help; }
[data-callout]:focus-visible { outline: 1px dashed var(--brass, #d0aa5c); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .callout-flag { transition: none; }
}

/* ---- Hero: the living drawing ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hero-fig { margin: 0; user-select: none; }

#hero-drawing {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: none;
}
#hero-drawing.grabbing { cursor: grabbing; }

#hero-drawing .cl {
  stroke: color-mix(in srgb, var(--teal, #35b8ac) 45%, transparent);
  stroke-width: 1;
  stroke-dasharray: 16 5 3 5;
}
#hero-drawing .ln   { fill: none; stroke: var(--dim, #8a97a6); stroke-width: 1.1; }
#hero-drawing .ln.thin { stroke-width: .7; opacity: .8; }
#hero-drawing .face { fill: var(--panel, #141b24); stroke: var(--dim, #8a97a6); stroke-width: 1.1; }
#hero-drawing .face.hi { fill: var(--panel-hi, #1a222d); }
#hero-drawing .bore { fill: var(--bg, #0a0e13); stroke: #6a7684; stroke-width: 1; }
#hero-drawing .accent { stroke: var(--brass, #d0aa5c); stroke-width: 1.2; }

#hero-drawing .balloon circle {
  fill: var(--bg2, #0e131a);
  stroke: var(--brass, #d0aa5c);
  stroke-width: 1;
}
#hero-drawing .balloon text {
  fill: var(--brass-hi, #eccf8a);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  text-anchor: middle;
}
#hero-drawing .balloon line { stroke: var(--brass, #d0aa5c); stroke-width: .7; opacity: .65; }

#hero-drawing .part { will-change: transform; }
#hero-drawing .part:hover .balloon circle { fill: var(--panel-hi, #1a222d); }

.hero-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.ctl-lbl {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--dim, #8a97a6);
  text-transform: uppercase;
}

#hero-explode {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 28px;
  background: transparent;
  cursor: ew-resize;
}
#hero-explode::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--line, #232e3b);
}
#hero-explode::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -12px;
  border-radius: 50%;
  border: 2px solid var(--brass, #d0aa5c);
  background:
    radial-gradient(circle at 50% 50%, var(--panel-hi, #1a222d) 0 38%, transparent 39%),
    repeating-conic-gradient(var(--brass, #d0aa5c) 0 6deg, var(--panel, #141b24) 6deg 18deg);
}
#hero-explode::-moz-range-track { height: 2px; background: var(--line, #232e3b); }
#hero-explode::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--brass, #d0aa5c);
  background:
    radial-gradient(circle at 50% 50%, var(--panel-hi, #1a222d) 0 38%, transparent 39%),
    repeating-conic-gradient(var(--brass, #d0aa5c) 0 6deg, var(--panel, #141b24) 6deg 18deg);
}
#hero-explode:focus-visible { outline: 1px dashed var(--brass, #d0aa5c); outline-offset: 4px; }