/* Planning read-only demo: the device gate, the preview bar and the frame of the prepared screens.
   The app's own stylesheet (app.css, the renderer build, unchanged) is loaded after this file, only on
   screens large enough; the selectors below are specific enough to win over its base rules. */
@font-face { font-family: Demo Display; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/bigshouldersdisplay-3-Do0xzsdm.ttf') format('truetype'); }
@font-face { font-family: Demo Mono; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/ibmplexmono-1-ClCTSiDw.ttf') format('truetype'); }

html, body { margin: 0; }
[hidden] { display: none !important; }

/* ── Device gate (phones, narrow windows) ─────────────────────────────────── */
body.demo-gate-active { background: #000; color: #f2f2f0; overflow: auto; }
.demo-device-gate { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; padding: clamp(24px, 6vw, 64px); display: flex; flex-direction: column; align-items: flex-start; font-family: Demo Mono, ui-monospace, monospace; background: #000; color: #f2f2f0; }
.demo-device-gate .gate-brand { display: flex; align-items: center; gap: 12px; font-family: Demo Display, 'Arial Narrow', sans-serif; font-size: 34px; font-weight: 700; letter-spacing: .02em; }
.demo-device-gate .gate-body { width: 100%; max-width: 620px; margin: auto 0; padding: 48px 0; }
.demo-device-gate .gate-eyebrow { margin: 0 0 24px; font-size: 11px; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9f; }
.demo-device-gate .gate-workspace { width: 78px; height: 60px; margin-bottom: 24px; color: #14b8a6; }
.demo-device-gate .gate-title { margin: 0; max-width: 560px; font-family: Demo Display, 'Arial Narrow', sans-serif; font-size: clamp(44px, 8vw, 80px); font-weight: 700; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; outline: none; }
.demo-device-gate .gate-description { margin: 24px 0 32px; max-width: 470px; font-size: 13px; line-height: 1.85; color: #9a9a9f; }
.demo-device-gate .gate-return, .demo-device-gate .gate-retry { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 48px; padding: 14px 20px; border: 1px solid #f2f2f0; border-radius: 0; background: #f2f2f0; color: #000; font: 400 11px/1.6 Demo Mono, ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.demo-device-gate .gate-retry { margin: 0 12px 12px 0; }
.demo-device-gate .gate-return:hover, .demo-device-gate .gate-retry:hover { background: #d5d5d2; border-color: #d5d5d2; }
.demo-device-gate .gate-return:focus-visible, .demo-device-gate .gate-retry:focus-visible { outline: 2px solid #14b8a6; outline-offset: 5px; }
.demo-device-gate .gate-status { margin: 0; padding-top: 24px; width: 100%; border-top: 1px solid rgba(255, 255, 255, .15); color: #7c7c83; font-size: 10px; line-height: 1.8; letter-spacing: .04em; text-transform: uppercase; }

/* ── Page frame: the bar on top, the app below at full height ─────────────── */
html body:not(.demo-gate-active) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: #000; }
.preview-shell { flex: none; position: relative; z-index: 2; background: #000; color: #f2f2f0; border-bottom: 1px solid #ffffff26; font: 12px/1.4 Demo Mono, ui-monospace, monospace; }
.preview-shell .preview-bar { display: flex; align-items: center; gap: 18px; min-height: 46px; padding: 6px 16px; }
.preview-shell .website-return { flex: none; color: #fff; text-decoration: none; border: 1px solid #4b4b52; padding: 7px 12px; font-size: 11px; letter-spacing: .04em; }
.preview-shell .website-return:hover { background: #1f1f23; }
.preview-shell .preview-label { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1 Demo Display, 'Arial Narrow', sans-serif; letter-spacing: .03em; }
.preview-shell .preview-label span { font: 11px Demo Mono, ui-monospace, monospace; letter-spacing: .02em; color: #aab3bf; margin-left: 4px; }
.preview-shell .preview-context { flex: 1 1 auto; min-width: 0; margin: 0; color: #9a9a9f; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-shell .theme-picker { flex: none; display: flex; gap: 2px; border: 1px solid #3a3a40; padding: 2px; }
.preview-shell .theme-picker button { border: 0; background: transparent; color: #c4c4c9; padding: 5px 10px; font: 11px Demo Mono, ui-monospace, monospace; cursor: pointer; }
.preview-shell .theme-picker button[aria-pressed=true] { background: #f2f2f0; color: #000; }
.preview-shell .preview-path { display: flex; align-items: center; gap: 2px; padding: 4px 16px 6px; border-top: 1px solid #1d1d21; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.preview-shell .preview-path > span { color: #7f7f86; padding-right: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.preview-shell .preview-path button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #b9b9be; padding: 5px 9px; font: 12px Demo Mono, ui-monospace, monospace; cursor: pointer; }
.preview-shell .preview-path button:hover { color: #fff; background: #17171a; }
.preview-shell .preview-path button[aria-current=page] { color: #fff; border-bottom-color: #14b8a6; }
.preview-shell button:focus-visible, .preview-shell a:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

html body > #root { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; position: relative; overflow: hidden; contain: layout paint; background: rgb(var(--ui-canvas)); color: rgb(var(--fg-primary)); }
#root > .h-screen { height: 100%; width: 100%; }
#root, #root * { -webkit-user-select: none; user-select: none; }
#root[aria-busy=true] { cursor: progress; }

/* ── Frozen controls: only navigation answers ─────────────────────────────── */
#root [data-preview-nav] { cursor: pointer; }
#root [data-preview-nav]:focus-visible { outline: 2px solid #14b8a6; outline-offset: 1px; }
#root [data-preview-inert], #root [data-preview-inert] * { cursor: default; }
#root [data-preview-field] { cursor: default; }
/* A field that was editable in the app keeps its editable look; check boxes stay enabled but take no input. */
#root [data-preview-field=live] { opacity: 1; -webkit-text-fill-color: currentColor; }
#root [data-preview-field=live]::placeholder { -webkit-text-fill-color: rgb(var(--fg-disabled)); }
#root input[type=checkbox][data-preview-field], #root input[type=radio][data-preview-field] { pointer-events: none; }
#root .field-cell:has([data-preview-field=live]):not(:has([data-preview-field=locked])) { background-color: rgb(var(--field-bg)); }
#root [data-preview-field]::-webkit-calendar-picker-indicator { cursor: default; }
#root img { max-width: none; }
.preview-status { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; margin: 0; padding: 12px 20px; background: #111; color: #fff; border: 1px solid #f43f5e; font: 12px Demo Mono, ui-monospace, monospace; }

@media (max-width: 1180px) { .preview-shell .preview-label span { display: none; } }
@media (prefers-reduced-motion: reduce) { #root *, #root *::before, #root *::after { animation: none !important; transition: none !important; } }