/* Veyra design system — additive signature layer.
   Palette / type / radius tokens live in style.css (:root + html[data-theme=light]);
   this file NEVER restyles existing rules — it only adds .vy-* classes that
   surfaces opt into during the per-surface layout pass. Nothing here changes
   the page until a class is applied. */

/* ── Signature material: film grain ────────────────────────────────────────
   Applied by adding <div class="vy-grain"> as a body child in a verified step.
   Kept out of the DOM for now so it can't interfere with the copilot's
   body-level CpStage until verified live. */
.vy-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="light"] .vy-grain{opacity:.04;mix-blend-mode:multiply}

/* ── Instrument detailing ───────────────────────────────────────────────── */
/* Hairline tick-ruler under a header (add class to the header element). */
.vy-tickrule{position:relative}
.vy-tickrule::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background:repeating-linear-gradient(90deg,var(--border-3) 0 1px,transparent 1px 10px);opacity:.7}

/* Registration / crop marks — put on a position:relative panel with the four spans. */
.vy-regmarks{position:relative}
.vy-regmarks>.vy-rm{position:absolute;width:11px;height:11px;opacity:.5;z-index:2;pointer-events:none}
.vy-rm.tl{top:-1px;left:-1px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}
.vy-rm.tr{top:-1px;right:-1px;border-top:1px solid var(--accent);border-right:1px solid var(--accent)}
.vy-rm.bl{bottom:-1px;left:-1px;border-bottom:1px solid var(--accent);border-left:1px solid var(--accent)}
.vy-rm.br{bottom:-1px;right:-1px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}

/* ── Odometer numeral — trailing digits recede (wrap the fast digits in .vy-lo). */
.vy-odo{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vy-odo .vy-lo{color:var(--faint)}

/* ── Spread-spine mid rule (order book) ─────────────────────────────────── */
.vy-mid{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--accent);border-bottom:1px dashed var(--border-2);padding:8px 0;margin:6px 0}
.vy-mid .vy-m{font-family:var(--num);color:var(--accent);font-variant-numeric:tabular-nums}
.vy-mid .vy-tag{font-family:var(--num);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border-2);border-radius:3px;padding:3px 7px}

/* ── Density scopes (apply to a surface root; consume via var(--vy-*) in scoped rules) */
.vy-compact{--vy-py:7px;--vy-px:12px;--vy-row:30px;--vy-fs:12px}
.vy-comfortable{--vy-py:11px;--vy-px:16px;--vy-row:40px;--vy-fs:13px}