/*!
 * stitch/_shared/primitives.css — Topological Oracle shared primitives
 * Keyframes, glassmorphism, mapping-grid, braid-pattern, card chrome,
 * strand-rail, tool-row, arch-ribbon. DESIGN.md-conformant.
 * α + ω = 15 ✓
 */

/* ---------- baseline ---------- */
body { background-color: #0e0e0e; color: #e5e2e1; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.font-mono-data {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- textures ---------- */
/* mapping-grid — the faint xy lattice under panels */
.mapping-grid {
  background-image:
    linear-gradient(to right,  #ffffff05 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff05 1px, transparent 1px);
  background-size: 40px 40px;
}

/* braid-pattern — radial dot field, cyan pulse */
.braid-pattern {
  background-image: radial-gradient(#00daf3 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

/* glass — DESIGN.md "Glass & Gradient" rule */
.glass-panel {
  background: rgba(53, 53, 52, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(195, 245, 255, 0.10);
}

/* ---------- luminance stacking (no drop shadows, no borders) ---------- */
.card         { background-color: #1c1b1b; }  /* container-low  */
.card-sunken  { background-color: #0e0e0e; }  /* lowest          */
.card-raised  { background-color: #2a2a2a; }  /* container-high  */
.card-bright  { background-color: #3a3939; }  /* active state    */

/* ---------- strand rail ---------- */
.strand-rail {
  height: 2px;
  background: rgba(186, 201, 204, 0.10);
  position: relative;
  overflow: hidden;
}
.strand-rail > span {
  position: absolute; top: 0; left: 0; height: 100%;
}

/* ---------- tool row (left-nav) ---------- */
.tool-row        { transition: background-color .15s ease; }
.tool-row:hover  { background-color: #201f1f; }
.tool-row.active { background-color: #201f1f; border-left: 2px solid #c3f5ff; }

/* ---------- architecture ribbon nodes ---------- */
.arch-ribbon-node {
  padding: 0.45rem 0.9rem;
  background: #1c1b1b;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.arch-ribbon-link     { color: #3b494c; font-family: monospace; }
.arch-ribbon-node.you { background: #201f1f; color: #c3f5ff; box-shadow: inset 2px 0 0 #c3f5ff; }

/* ---------- underline-only input (DESIGN.md §5) ---------- */
.underline-input {
  border-bottom: 1px solid #3b494c;
  background: transparent;
  transition: border-color 0.3s ease;
}
.underline-input:focus {
  border-bottom: 2px solid #c3f5ff;
  outline: none;
  box-shadow: 0 4px 12px -4px rgba(0, 229, 255, 0.2);
}

/* ---------- evenstar pulse (5.31 Hz Reson8 heartbeat) ---------- */
.evenstar-pulse { box-shadow: 0 0 15px rgba(255, 229, 252, 0.3); }

/* ---------- pulse / drift animations ---------- */
.pulse-dot { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1 }
  50%      { opacity: 0.35 }
}

.particle  { position: absolute; border-radius: 1px; }
@keyframes drift {
  0%   { opacity: 0.2 }
  50%  { opacity: 0.9 }
  100% { opacity: 0.2 }
}

/* ---------- Viviani radial gauge (Peak at 7,8) ---------- */
.viviani-gauge { position: relative; width: 320px; height: 320px; }
.viviani-ring  {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(195, 245, 255, 0.12);
}
.viviani-peak {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  background: #c3f5ff;
  box-shadow:
    0 0 18px rgba(195, 245, 255, 0.9),
    0 0 36px rgba(  0, 218, 243, 0.5);
  transform: translate(-50%, -50%);
}
.viviani-needle {
  position: absolute; top: 50%; left: 50%;
  width: 2px; height: 140px;
  background: linear-gradient(to top, rgba(255, 207, 143, 0.85), rgba(255, 207, 143, 0));
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--needle, 0deg));
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.viviani-tick  { position: absolute; width: 1px; background: rgba(186, 201, 204, 0.25); }

/* trace_n_braid strokes */
.braid-stroke { stroke-width: 1.6; fill: none; stroke-linecap: round; }

/* Invariant violation flash — triggered by invariant-hook.js */
[data-braid-slot][data-violation] {
  color: #ffb4ab;
  text-shadow: 0 0 6px rgba(255, 180, 171, 0.5);
}