/* Firefly XR demo — shared styling for the account form and the demo shell.
   Palette matches firefly_demo.html so the hosted demo reads as the same
   product, not a separate app. */

:root {
  --bg: #070b0d;
  --panel: #0d1417;
  --panel-2: #111c20;
  --line: #1d2c31;
  --ink: #d7e4e3;
  --ink-dim: #7f9997;
  --burnt: #e49a0f;
  --amber: #f6d43e;
  --danger: #ff6b6b;
  --ok: #5eead4;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Account form ---------- */

.auth-wrap {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.brand b { color: var(--burnt); }

.tagline {
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.auth-card h1 {
  font-size: 19px;
  margin: 0 0 6px;
  font-weight: 600;
}

.auth-sub {
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0 0 22px;
}

label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

input[type="email"], input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
}
input:focus {
  outline: none;
  border-color: var(--burnt);
}

.hint {
  font-size: 11px;
  color: var(--ink-dim);
  margin: -10px 0 16px;
}

button {
  font-family: var(--mono);
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--burnt);
  border: none;
  border-radius: 8px;
  color: #1a1205;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.switch {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
}
.switch button {
  background: none;
  border: none;
  color: var(--amber);
  text-decoration: underline;
  font-size: 12px;
  padding: 0;
}

.msg {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 16px;
  display: none;
}
.msg.show { display: block; }
.msg.error { background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.4); color: var(--danger); }
.msg.ok    { background: rgba(94,234,212,0.10); border: 1px solid rgba(94,234,212,0.35); color: var(--ok); }

/* ---------- Demo shell ---------- */

.demo-body { overflow: hidden; height: 100vh; height: 100svh; }

.stage {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
}

#video, #overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#video { object-fit: cover; }
/* Front cameras are mirrored so the picture reads like a mirror; the overlay
   is mirrored with it so projected points stay on the right features. */
.mirrored #video, .mirrored #overlay { transform: scaleX(-1); }

header.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(7,11,13,0.9), rgba(7,11,13,0));
  pointer-events: none;
}
header.hud * { pointer-events: auto; }

.rec { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim); text-transform: uppercase; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a3b3f; }
.rec-dot.live { background: var(--danger); animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,107,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,107,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}

.hud-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 12px; }
.stat { color: var(--burnt); min-width: 62px; text-align: right; }
.stat small { color: var(--ink-dim); }

.panel {
  position: fixed;
  top: 62px;
  right: 14px;
  z-index: 25;
  width: 250px;
  background: rgba(13,20,23,0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font-size: 12px;
}
.panel h2 {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 10px;
  font-weight: 600;
}
.panel h2:not(:first-child) { margin-top: 18px; }

.ov-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.ov-row input { margin: 0; accent-color: var(--burnt); }
.ov-row label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); flex: 1; }
.ov-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ov-count { color: var(--ink-dim); font-size: 10.5px; }

.controls { display: flex; gap: 8px; margin-top: 6px; }
.btn {
  flex: 1;
  padding: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn:hover { border-color: var(--burnt); }
.btn.primary { background: var(--burnt); border-color: var(--burnt); color: #1a1205; font-weight: 700; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.banner {
  position: fixed;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  background: rgba(13,20,23,0.96);
  border: 1px solid var(--line);
  max-width: min(90vw, 560px);
  text-align: center;
  display: none;
}
.banner.show { display: block; }
.banner.error { border-color: rgba(255,107,107,0.5); color: var(--danger); }

.telemetry { color: var(--ink-dim); line-height: 1.9; font-size: 11px; }
.telemetry b { color: var(--ink); font-weight: 500; float: right; }

@media (max-width: 640px) {
  .panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; border-radius: 12px 12px 0 0; max-height: 46vh; overflow-y: auto; }
}

/* ---------- Signup profile fields + verification states ---------- */

label .req, label .opt {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  margin-left: 6px;
  opacity: 0.75;
}
label .opt { color: var(--ink-dim); }
label .req { color: var(--burnt); }

input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
}
input[type="text"]:focus { outline: none; border-color: var(--burnt); }

/* Big glyph carrying the state of the confirmation flow. */
.pending-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 4px 0 18px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  background: rgba(228, 154, 15, 0.12);
  border: 1px solid rgba(228, 154, 15, 0.45);
  color: var(--burnt);
}
.pending-mark.ok {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.45);
  color: var(--ok);
}
.pending-mark.bad {
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.45);
  color: var(--danger);
}

.fineprint {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* The continue link is an <a> styled as the primary button, so it needs the
   block/centre treatment that <button> gets for free. */
a.btn-primary {
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

[hidden] { display: none !important; }

/* ---------- Touch devices ----------------------------------------------
   Keyed on (pointer: coarse) rather than a width breakpoint: what matters is
   that the input device is a fingertip, which is true of a large tablet and
   false of a small laptop window.

   Two specific problems this fixes:

   1. iOS Safari zooms the whole page whenever a focused input has a font-size
      below 16px. The user then has to pinch back out to see the form they are
      filling in. 16px is the threshold, not a preference.

   2. Apple's HIG and the WCAG target-size guidance both put the minimum
      comfortable tap target around 44px. The desktop controls sit near 39px,
      which is fine for a cursor and fiddly for a thumb.
   ---------------------------------------------------------------------- */
@media (pointer: coarse) {
  input[type="email"],
  input[type="password"],
  input[type="text"] {
    font-size: 16px;      /* stops iOS focus-zoom — do not lower */
    padding: 13px 14px;
    min-height: 48px;
  }

  .btn-primary,
  a.btn-primary {
    min-height: 48px;
    font-size: 14px;
  }

  .switch button { padding: 8px 4px; min-height: 44px; }

  /* Demo HUD controls */
  .btn { min-height: 44px; font-size: 12px; }

  /* Checkbox rows in the montage list — the label is the tap target, so give
     the whole row height rather than trying to enlarge the box itself. */
  .ov-row { padding: 9px 0; min-height: 44px; }
  .ov-row input[type="checkbox"] { width: 20px; height: 20px; }
  .ov-row label { font-size: 13px; }
}

/* The stage must track the visible viewport, not the layout viewport. On
   mobile browsers the address bar shrinks and grows as you scroll, and 100vh
   refers to the LARGER of those states — so a 100vh stage is taller than the
   screen and the bottom of the control panel sits under the browser chrome.
   dvh follows the visible area; the vh line stays as the fallback. */
.demo-body { height: 100vh; height: 100dvh; }
.stage { height: 100vh; height: 100dvh; }

/* Landscape on a phone is short. Cap the panel so it cannot swallow the
   camera view it is meant to control. */
@media (max-width: 900px) and (orientation: landscape) {
  .panel { max-height: 78vh; max-height: 78dvh; overflow-y: auto; }
}