/* Flow's page: the ground behind the pane, in hero_ui's surface colours
   (light #f8fafc, the shell's neutral dark #131315). The type is hero_ui's
   system sans, so the page loads no fonts. Everything else, both themes
   included, is in the component. */
:root { color-scheme: light dark; }
html, body { margin: 0; height: 100%; background: #f8fafc; overscroll-behavior-x: none; }
@media (prefers-color-scheme: dark) { html, body { background: #131315; } }
html[data-ground="night"], html[data-ground="night"] body { background: #131315; }
html[data-ground="day"], html[data-ground="day"] body { background: #f8fafc; }
/* The ground (web/backdrop.js) under the space, which is clear over it. */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; height: 100dvh; }


/* The hands (web/hands.js): the cursor and a faint outline of the hand on a
   layer that takes no clicks; a hint when a gesture acts; the camera's
   picture, small, when asked for. */
.hands-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.hands-hint { position: fixed; z-index: 51; left: 50%; top: 72px; transform: translate(-50%, -6px); pointer-events: none;
  padding: 7px 14px; border-radius: 99px; font: 500 .8125rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #e9e9ec; background: rgba(26, 26, 29, .72); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #3fd0b6) 30%, transparent), 0 8px 28px rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.hands-hint[data-theme="light"] { color: #0f172a; background: rgba(255, 255, 255, .82); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink, #12897a) 26%, transparent), 0 8px 28px rgba(20, 30, 40, .12); }
.hands-hint.on { opacity: 1; transform: translate(-50%, 0); }
.hands-preview { position: fixed; z-index: 49; right: 16px; top: 70px; width: 168px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .75rem;
  pointer-events: none; opacity: 0; transition: opacity .3s; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); }
.hands-preview.on { opacity: .9; }
.hands-preview.mirror { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .hands-hint, .hands-preview { transition: none; } .hands-hint, .hands-hint.on { transform: translate(-50%, 0); } }

/* A public door's sign-in (door.js) */
.door { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 50; background: radial-gradient(120% 90% at 50% 0%, #1a2126 0%, #0d1114 70%); color: #e8ecef; font-family: var(--sans, system-ui, sans-serif); }
.door-card { width: min(100%, 24rem); display: flex; flex-direction: column; gap: .75rem; padding: 2rem; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); backdrop-filter: blur(12px); }
.door-card h1 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; }
.door-say { margin: 0 0 .25rem; color: #a9b4bb; line-height: 1.45; }
.door-err { margin: 0; min-height: 1.2em; color: #ff9c8a; font-size: .875rem; }
.door-card input { padding: .7rem .8rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.door-card input:focus { outline: 2px solid #4fb8a4; outline-offset: 1px; }
.door-card button { padding: .7rem .8rem; border: 0; border-radius: 10px; background: #4fb8a4; color: #071210; font: inherit; font-weight: 600; cursor: pointer; }
.door-card button:disabled { opacity: .6; cursor: default; }
.door-out { position: fixed; left: 12px; bottom: 12px; z-index: 40; padding: .35rem .6rem; border-radius: 8px; border: 1px solid rgba(127,127,127,.3); background: transparent; color: inherit; font-size: .75rem; opacity: .6; cursor: pointer; }
.door-out:hover { opacity: 1; }