/* ============================================================ demo-gate.css — W517 · Demo-mode banner + toast (2026-07-06) Tokens-only. No hex outside css/v6-tokens.css. Loaded after v6-lock.css so it wins the cascade for its own selectors, but it only activates when is set by js/demo-gate.js. On non-demo hosts these rules match nothing. ============================================================ */ /* ── Top banner ─────────────────────────────────────────────────────── */ .atlas-demo-banner { display: none; position: sticky; top: 0; z-index: 100000; align-items: center; gap: 12px; padding: 8px 20px; background: var(--gold, #c18a25); color: var(--surface, #fffdf8); font: 700 12px/1.2 var(--font-ui, Inter, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } html[data-atlas-demo="1"] .atlas-demo-banner { display: flex; } .atlas-demo-banner__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--surface, #fffdf8); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); flex: 0 0 auto; } .atlas-demo-banner__label { font-weight: 900; letter-spacing: 0.12em; } .atlas-demo-banner__sub { font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.92; } /* Compact on narrow viewports — hide the sub line, keep the label. */ @media (max-width: 640px) { .atlas-demo-banner__sub { display: none; } .atlas-demo-banner { padding: 6px 14px; } } /* ── Toast (singleton, bottom-center) ───────────────────────────────── */ .atlas-demo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 100001; min-width: 260px; max-width: 460px; padding: 12px 18px; border-radius: var(--radius-pill, 999px); background: var(--ink, #101722); color: var(--surface, #fffdf8); font: 600 13px/1.35 var(--font-ui, Inter, system-ui, sans-serif); text-align: center; box-shadow: var(--soft-shadow, 0 10px 32px rgba(29, 24, 14, 0.18)); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .atlas-demo-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Locked-state affordance for elements we intentionally style as uninteractive in demo (org switcher chip, admin buttons). Apply `.rd-locked` in js. */ html[data-atlas-demo="1"] .rd-locked { opacity: 0.72; cursor: not-allowed; } html[data-atlas-demo="1"] .rd-locked::after { content: "· locked"; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #c18a25); }