/* Accidental Graphics: shared data layer + motion tokens.
   Used together with scripts/dataLayer.js (API documented there). Include in every page's <head>:
     <link rel="stylesheet" href="../css/data.css">
   Colours come from --ag-data-fg / --ag-data-dim (default: currentColor), so the same classes work on the
   dark apps (white on black) and on Isolation (black on white). Override them on any ancestor. */

:root {
  /* Motion tokens */
  --ag-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ag-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ag-dur-1: 120ms;
  --ag-dur-2: 220ms;
  --ag-dur-3: 420ms;

  /* Data aesthetic */
  --ag-data-fg: currentColor;
  --ag-data-dim: color-mix(in srgb, currentColor 55%, transparent);
  --ag-data-font: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --ag-data-size: 10px;
  --ag-data-track: .08em;
  --ag-data-line: 1px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ag-dur-1: 0ms;
    --ag-dur-2: 0ms;
    --ag-dur-3: 0ms;
  }
}

/* ---------- Base mono label ---------- */
.ag-mono,
.ag-readout,
.ag-hud,
.ag-fig,
.ag-tag {
  font-family: var(--ag-data-font);
  font-size: var(--ag-data-size);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ag-data-track);
  line-height: 1.25;
  text-transform: uppercase;
}

/* ---------- Readout: LABEL 042 PX ---------- */
.ag-readout {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  color: var(--ag-data-fg);
  white-space: nowrap;
}
.ag-readout__label,
.ag-readout__unit { color: var(--ag-data-dim); }
.ag-readout__value { display: inline-block; font-weight: 500; }
/* A readout that AGData.readouts() put into a slider's <label>: sits at its right edge. */
.ag-readout--in-label { float: right; margin-left: auto; padding-left: .75em; }
.ag-readout--after { margin-left: .5em; }

/* ---------- Number tick (AGData.tick(el) alternates the two classes to restart it) ---------- */
@keyframes ag-tick-a { from { transform: translateY(-.35em); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes ag-tick-b { from { transform: translateY(-.35em); opacity: .35; } to { transform: none; opacity: 1; } }
.ag-tick-a { animation: ag-tick-a var(--ag-dur-2) var(--ag-ease-out); }
.ag-tick-b { animation: ag-tick-b var(--ag-dur-2) var(--ag-ease-out); }
.ag-readout .ag-tick-a,
.ag-readout .ag-tick-b { display: inline-block; }

/* ---------- Specimen tag: SPEC. ISO-0007 ---------- */
.ag-tag {
  display: inline-block;
  padding: 1px 5px;
  border: var(--ag-data-line) solid var(--ag-data-fg);
  color: var(--ag-data-fg);
}

/* ---------- Figure caption: FIG. 01 — ... ---------- */
.ag-fig { color: var(--ag-data-dim); }
.ag-fig::before { content: attr(data-fig) " \2014  "; color: var(--ag-data-fg); }
.ag-fig:not([data-fig])::before { content: none; }

/* ---------- Dashed guide (horizontal by default) ---------- */
.ag-guide {
  border: 0;
  border-top: var(--ag-data-line) dashed var(--ag-data-dim);
  margin: 0;
}
.ag-guide--v { border-top: 0; border-left: var(--ag-data-line) dashed var(--ag-data-dim); align-self: stretch; }

/* ---------- Registration marks: put .ag-reg.ag-reg--tl etc. in a positioned box ----------
   Small crosses just OUTSIDE each corner, diagonally away from it (they never touch the artwork). */
.ag-reg {
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  color: var(--ag-data-fg);
}
.ag-reg::before,
.ag-reg::after { content: ""; position: absolute; background: currentColor; }
.ag-reg::before { left: 0; right: 0; top: 4px; height: var(--ag-data-line); }
.ag-reg::after { top: 0; bottom: 0; left: 4px; width: var(--ag-data-line); }
.ag-reg--tl { left: -14px; top: -14px; }
.ag-reg--tr { right: -14px; top: -14px; }
.ag-reg--bl { left: -14px; bottom: -14px; }
.ag-reg--br { right: -14px; bottom: -14px; }

/* ---------- Edge tick ruler: --ag-tick = minor spacing (CSS px), major every 10 ----------
   Sits outside the edge it measures; the ticks grow from the outer side toward the canvas. */
.ag-ruler {
  --ag-tick: 10px;
  position: absolute;
  pointer-events: none;
  color: var(--ag-data-fg);
  opacity: .6;
}
.ag-ruler--top,
.ag-ruler--bottom {
  left: 0;
  right: 0;
  height: 6px;
  background:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px calc(var(--ag-tick) * 10)) bottom left / 100% 6px no-repeat,
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px var(--ag-tick)) bottom left / 100% 3px no-repeat;
}
.ag-ruler--top { bottom: calc(100% + 1px); }
.ag-ruler--bottom { top: calc(100% + 1px); transform: scaleY(-1); }
.ag-ruler--left,
.ag-ruler--right {
  top: 0;
  bottom: 0;
  width: 6px;
  background:
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(var(--ag-tick) * 10)) top right / 6px 100% no-repeat,
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px var(--ag-tick)) top right / 3px 100% no-repeat;
}
.ag-ruler--left { right: calc(100% + 1px); }
.ag-ruler--right { left: calc(100% + 1px); transform: scaleX(-1); }

/* ---------- HUD (AGData.hud) ----------
   The box follows the canvas; rulers, marks and the two one-line text bands sit just outside it.
   --ag-hud-band is the room a tool leaves above and below its canvas for them, --ag-hud-side beside it
   (ruler + marks; 0 on mobile, where they are left out). */
:root { --ag-hud-band: 24px; --ag-hud-side: 16px; }
.ag-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  color: var(--ag-data-fg);
  overflow: visible;
  contain: layout style;
}
.ag-hud--fixed { position: fixed; inset: auto; }
.ag-hud__frame { position: absolute; }
.ag-hud__band {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  white-space: nowrap;
}
.ag-hud__band--top { bottom: calc(100% + 9px); }
.ag-hud__band--bottom { top: calc(100% + 5px); }
.ag-hud__slot {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: 0 14px;
  min-width: 0;
  overflow: hidden;
}
.ag-hud__slot:empty { display: none; }
.ag-hud__slot--tr,
.ag-hud__slot--br { margin-left: auto; justify-content: flex-end; }
.ag-hud .ag-readout { gap: .45em; flex: none; }
.ag-hud .ag-readout.is-overflow,
.ag-hud .ag-readout.is-idle { display: none; }
.ag-hud--edge .ag-hud__band { left: 8px; right: 8px; }
.ag-hud--no-top .ag-hud__band--top,
.ag-hud--no-top .ag-ruler--top,
.ag-hud--no-top .ag-reg--tl,
.ag-hud--no-top .ag-reg--tr,
.ag-hud--no-bottom .ag-hud__band--bottom,
.ag-hud--no-bottom .ag-reg--bl,
.ag-hud--no-bottom .ag-reg--br,
.ag-hud--no-side .ag-ruler--left,
.ag-hud--no-marks .ag-reg { display: none; }

/* Global D toggle: fades every .ag-data element. */
.ag-data {
  transition: opacity var(--ag-dur-2) var(--ag-ease-out), visibility 0s linear 0s;
}
html.ag-data-hidden .ag-data {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ag-dur-2) var(--ag-ease-out), visibility 0s linear var(--ag-dur-2);
}
@media (max-width: 768px) {
  :root { --ag-hud-band: 20px; --ag-hud-side: 0px; }
  .ag-hud { --ag-data-size: 9px; }
  .ag-hud__band--top { bottom: calc(100% + 7px); }
  .ag-hud__band--bottom { top: calc(100% + 4px); }
  .ag-hud__band { gap: 12px; }
  .ag-hud__slot { gap: 0 10px; }
}

/* ---------- Secondary motion (html.ag-motion is set by dataLayer.js; remove it to opt out) ----------
   Uses the independent `scale` property and animations, so it never overrides an app's own `transform`
   or `transition` declarations. :where() keeps the hover easing at zero specificity. */
@keyframes ag-press { to { scale: .97; } }
@keyframes ag-release { from { scale: .97; } 55% { scale: 1.015; } to { scale: 1; } }
html.ag-motion :is(button, input[type="button"], input[type="submit"], .ag-pressable):not(:disabled):active {
  animation: ag-press var(--ag-dur-1) var(--ag-ease-out) forwards;
}
html.ag-motion .ag-released { animation: ag-release var(--ag-dur-3) var(--ag-ease-out); }
:where(html.ag-motion) :where(button, a, select, summary, input, label, .ag-pressable) {
  transition:
    color var(--ag-dur-2) var(--ag-ease-out),
    background-color var(--ag-dur-2) var(--ag-ease-out),
    border-color var(--ag-dur-2) var(--ag-ease-out),
    box-shadow var(--ag-dur-2) var(--ag-ease-out),
    opacity var(--ag-dur-2) var(--ag-ease-out),
    outline-offset var(--ag-dur-1) var(--ag-ease-out);
}
:where(html.ag-motion) :where(button, a, select, summary, input):focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html.ag-motion :is(button, input[type="button"], input[type="submit"], .ag-pressable):active,
  html.ag-motion .ag-released,
  .ag-tick-a,
  .ag-tick-b { animation: none; }
}