/* Guided-mode prototype styles. Every rule is scoped under [data-mode="guided"] or
   [data-vtest], so loading this file has zero effect on the desktop canvas path (which
   never sets either attribute). Referenced directly by index.html (render-blocking) —
   living under public/ (not src/styles/) is what lets that link use a stable literal
   `/proto.css` URL in both `npm run dev` and the built `dist/` output. */

html[data-mode="guided"],
html[data-mode="guided"] body {
  height: auto;
  overflow: auto;
}

/* --text-mute/--text-faint/--frozen-text fail WCAG 4.5:1 against --node-raised (the
   lightest background any of them sits on in this app) — desktop-shared debt, tracked
   separately for desktop. Lightened here, scoped to guided mode only, so guided text is
   accessible without touching a single desktop pixel. Computed against --node-raised
   #0F1A15 with a safety margin (axe re-verifies this at build time — see the e2e a11y test). */
html[data-mode="guided"] {
  --text-mute: #7B8C82;
  --text-faint: #6C8A79;
  --frozen-text: #768980;
}

html[data-mode="guided"] .proto-skip-link:focus {
  left: 8px !important;
  top: 8px !important;
}

html[data-mode="guided"] .proto-menu-row:focus-visible,
html[data-mode="guided"] .proto-menu-trigger:focus-visible,
html[data-mode="guided"] a:focus-visible,
html[data-mode="guided"] button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Deterministic visual-test mode (?vtest=1): kill all animation/transition so
   screenshots are stable. See src/proto/vtest.ts. */
html[data-vtest] * {
  animation: none !important;
  transition: none !important;
}

/* ---- Mobile guided-mode design system (design-review pass) ----
   Aurora/plasma backdrop + shared card/diagram/chip/label primitives.
   Uses existing tokens only; scoped under [data-mode="guided"]. */
html[data-mode="guided"] body { position: relative; }
html[data-mode="guided"] body::before {
  content: ""; position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(44% 34% at 16% 18%, var(--plasma-a), transparent 70%),
    radial-gradient(40% 32% at 86% 8%, var(--plasma-b), transparent 70%),
    radial-gradient(50% 40% at 60% 82%, var(--plasma-c), transparent 70%),
    radial-gradient(36% 30% at 30% 55%, var(--plasma-b), transparent 72%);
  animation: plasma-drift 26s ease-in-out infinite alternate;
}
html[data-vtest] body::before { animation: none !important; }
html[data-mode="guided"] #app { position: relative; z-index: 1; }
html[data-mode="guided"] .proto-wrap { max-width: 560px; margin: 0 auto; }
html[data-mode="guided"] .proto-card {
  background: var(--node-surface); border: 1px solid var(--border-idle);
  border-radius: 10px; padding: 16px 18px; box-shadow: var(--card-shadow);
}
html[data-mode="guided"] .proto-card--live {
  background: var(--node-raised); border-color: var(--node-active-border); box-shadow: var(--glow-mid);
}
html[data-mode="guided"] .proto-diagram {
  position: relative; background: var(--preview-bg); border: 1px solid var(--preview-border);
  border-radius: 12px; padding: 16px;
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 18px 18px;
}
html[data-mode="guided"] .proto-chip {
  display: inline-flex; align-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.2;
  padding: 5px 10px; background: var(--node-raised); border: 1px solid var(--border-idle);
  border-radius: 6px; color: var(--text-secondary);
}
html[data-mode="guided"] .proto-microlabel {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
}