/* Babyphone — "Nachtlicht"
   The page is a light source: one warm glow sits behind everything, breathes,
   and changes with the connection state. Everything else stays quiet. */

/* ---------- tokens ---------- */
:root {
  --night:  #141021;  /* warm plum-black: a dark room with a warm lamp in it */
  --dusk:   #1e1830;  /* raised surface */
  --edge:   #2e2545;  /* hairline */
  --milk:   #f6efe8;  /* warm off-white — pure white glares at 2am */
  --haze:   #9d93b0;  /* secondary text */
  --glow:   #ffc48a;  /* the nightlight */
  --ember:  #ff9d6b;  /* its hotter core */
  --mint:   #8fe3bf;  /* the one cool note: connected */
  --on-glow: #2a1608;

  --shell: min(30rem, 100%);
  --r-lg: 26px;
  --r-sm: 14px;

  --display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
             system-ui, -apple-system, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --night:  #fbf5ef;
  --dusk:   #ffffff;
  --edge:   #ece0d4;
  --milk:   #221a30;
  --haze:   #776b8c;
  --glow:   #e08a3c;
  --ember:  #cf6f2c;
  --mint:   #1f9968;
  --on-glow: #fff6ec;
  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--night);
  color: var(--milk);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display, .pick__title, .cue__text, .brand {
  font-family: var(--display);
  letter-spacing: -0.02em;
}

a { color: var(--glow); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

/* ---------- the glow ---------- */
.aura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58vmin 52vmin at 50% 20%,
      color-mix(in srgb, var(--glow) 22%, transparent), transparent 70%),
    radial-gradient(70vmin 60vmin at 50% 96%,
      color-mix(in srgb, var(--ember) 10%, transparent), transparent 72%);
  transition: opacity .9s ease, filter 1.2s ease;
}

body[data-state="live"] .aura {
  background:
    radial-gradient(64vmin 58vmin at 50% 30%,
      color-mix(in srgb, var(--mint) 18%, transparent), transparent 72%);
}

body[data-state="dim"] .aura { opacity: .28; }

@media (prefers-reduced-motion: no-preference) {
  .aura { animation: breathe 7.5s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(1);    opacity: .82; }
    50%      { transform: scale(1.09); opacity: 1; }
  }
}

/* ---------- layout ---------- */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--shell);
  margin-inline: auto;
  padding: max(1rem, env(safe-area-inset-top)) 1.25rem 0;
}

.brand {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--milk);
  text-decoration: none;
}
.brand span { color: var(--glow); }

main {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin-inline: auto;
  padding: 0 1.25rem calc(2rem + env(safe-area-inset-bottom));
}

.view { display: none; }
body[data-view="home"]   #view-home,
body[data-view="baby"]   #view-baby,
body[data-view="parent"] #view-parent { display: block; }

/* ---------- controls ---------- */
button { font: inherit; color: inherit; cursor: pointer; }

.ghost {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--haze);
  transition: color .2s, border-color .2s;
}
.ghost:hover { color: var(--glow); border-color: var(--glow); }
.ghost svg { width: 18px; height: 18px; }

/* the icon shows where the toggle takes you, not where you are */
.i-moon { display: none; }
:root[data-theme="light"] .i-moon { display: block; }
:root[data-theme="light"] .i-sun { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--glow);
  color: var(--on-glow);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), filter .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }

.btn--quiet {
  background: transparent;
  color: var(--haze);
  border: 1px solid var(--edge);
}
.btn--quiet:hover { color: var(--milk); border-color: var(--haze); }

/* ---------- home ---------- */
.eyebrow {
  margin: 2.5rem 0 .75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--haze);
}

.display {
  margin: 0;
  font-size: clamp(3.6rem, 20vw, 5.6rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -0.05em;
}

.lede {
  margin: 1.5rem 0 2.25rem;
  max-width: 26ch;
  color: var(--haze);
  font-size: 1.02rem;
  line-height: 1.55;
}

.choose { display: grid; gap: .75rem; }

.pick {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 1rem;
  row-gap: .1rem;
  padding: 1.15rem 1.35rem;
  text-align: left;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--dusk);
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), border-color .2s;
}
.pick:hover { border-color: var(--glow); }
.pick:active { transform: scale(.985); }

.pick--primary {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--glow) 20%, var(--dusk)), var(--dusk) 70%);
  border-color: color-mix(in srgb, var(--glow) 45%, transparent);
}

.pick__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glow) 14%, transparent);
  color: var(--glow);
}
.pick__icon svg { width: 21px; height: 21px; }

.pick__title { font-size: 1.2rem; font-weight: 700; }
.pick__sub   { font-size: .8rem; color: var(--haze); line-height: 1.3; }

.rule {
  height: 1px;
  margin: 3rem 0 1.75rem;
  border: 0;
  background: linear-gradient(90deg, var(--edge), transparent);
}

.section-title {
  margin: 0 0 1.25rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--haze);
}

/* a real sequence, so it is numbered — quietly */
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.steps li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .5rem;
  align-items: baseline;
  font-size: .96rem;
  line-height: 1.45;
}
.steps li::before {
  content: counter(step);
  counter-increment: step;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--glow);
}
.steps { counter-reset: step; }

.trust {
  margin: 2.25rem 0 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--dusk);
  color: var(--haze);
  font-size: .89rem;
  line-height: 1.55;
}
.trust strong { color: var(--milk); font-weight: 600; }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
  font-size: .84rem;
  color: var(--haze);
}
.foot a { color: var(--haze); }
.foot a:hover { color: var(--glow); }

/* ---------- guided flow ---------- */
.cue {
  margin: 2rem 0 1.5rem;
  text-align: center;
}
.cue__step {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--glow);
}
.cue__text {
  margin: 0 auto;
  max-width: 19ch;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}
.cue__hint {
  margin: .7rem auto 0;
  max-width: 26ch;
  font-size: .89rem;
  color: var(--haze);
}

/* camera: fades in from a blur when the first frame arrives */
.cam {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  background: #000;
  opacity: 0;
  filter: blur(22px) saturate(.5);
  transform: scale(1.06);
  transition: opacity 1.1s ease, filter 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.cam.is-live { opacity: 1; filter: none; transform: none; }

.cam--peek { max-height: 22vh; object-fit: cover; }

/* square viewfinder — a QR code is square, and a round crop would cut off the
   three corner markers the scanner needs */
.finder {
  position: relative;
  width: min(74vw, 17rem);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--dusk);
  box-shadow: 0 0 0 1px var(--edge), 0 0 60px -12px color-mix(in srgb, var(--glow) 40%, transparent);
}
.finder .cam { height: 100%; border-radius: 0; object-fit: cover; }
.finder::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--glow) 50%, transparent);
}

.finder--sm { width: min(42vw, 10rem); border-radius: 18px; }
.finder--sm::after { border-radius: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .finder__sweep {
    position: absolute;
    left: 0; right: 0; height: 34%;
    background: linear-gradient(180deg, transparent,
      color-mix(in srgb, var(--glow) 26%, transparent), transparent);
    animation: sweep 2.6s ease-in-out infinite;
  }
  @keyframes sweep {
    0%, 100% { transform: translateY(-40%); }
    50%      { transform: translateY(240%); }
  }
}

/* the code the other phone reads */
.qr {
  width: min(76vw, 19rem);
  margin: 0 auto;
  padding: .85rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 70px -14px color-mix(in srgb, var(--glow) 55%, transparent);
}
.qr svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  .qr { animation: settle .55s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes settle {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
  }
}

/* two-phone handoff diagram: the moment people get stuck, drawn out */
.handoff {
  display: block;
  width: min(82vw, 20rem);
  margin: 1.75rem auto 0;
}
.handoff .phone { fill: none; stroke: var(--haze); stroke-width: 2; }
.handoff .phone--lit {
  fill: color-mix(in srgb, var(--glow) 90%, transparent);
  stroke: none;
}
.handoff .code { fill: var(--on-glow); }
.handoff .lens { fill: none; stroke: var(--haze); stroke-width: 2; }
.handoff .pupil { fill: var(--haze); }
.handoff .spark { fill: var(--glow); opacity: 0; }
.handoff .tag {
  fill: var(--haze);
  font-family: var(--body);
  font-size: 9px;
  text-anchor: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .handoff .spark { animation: fly 2.4s ease-in-out infinite; }
  .handoff .spark:nth-of-type(2) { animation-delay: .25s; }
  .handoff .spark:nth-of-type(3) { animation-delay: .5s; }
  @keyframes fly {
    0%       { opacity: 0; transform: translateX(0); }
    20%      { opacity: 1; }
    70%      { opacity: 1; transform: translateX(30px); }
    85%, 100%{ opacity: 0; transform: translateX(30px); }
  }
}

/* ---------- status ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--dusk);
  font-size: .8rem;
  color: var(--haze);
}
.chip .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--mint);
  flex: none;
}
.chip--warn .dot { background: var(--ember); }

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .chip .dot { animation: pulse 2.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .35; } }
}

.tools {
  display: grid;
  gap: .6rem;
  margin-top: 1.75rem;
}

/* ---------- parent live ---------- */
.stage {
  position: relative;
  margin-top: 1rem;
}
.stage .cam { max-height: 72svh; object-fit: contain; }

.stage__bar {
  display: flex;
  gap: .6rem;
  margin-top: .9rem;
}
.stage__bar .btn {
  min-height: 48px;
  padding: .8rem 1rem;
  font-size: .95rem;
  white-space: nowrap;
}

/* ---------- sound meter ---------- */
.meter { margin-top: 1rem; }

.meter__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--dusk);
  box-shadow: inset 0 0 0 1px var(--edge);
  overflow: hidden;
}
.meter__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--glow) 60%, var(--ember));
  transition: width .12s linear;
}
/* where the alarm threshold sits, so the bar explains the setting */
.meter__bar i {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--milk);
  opacity: .55;
}

.meter__label {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--haze);
  text-align: center;
}

/* The alarm takes the whole screen. The earlier version animated the body
   background, which sat behind every other layer and was invisible in
   practice — the one thing an alarm must never be. */
#alarmscreen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background: var(--ember);
  color: #2a1608;
}
.alarm__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.alarm__sub { margin: .6rem 0 0; font-size: .9rem; opacity: .65; }

@media (prefers-reduced-motion: no-preference) {
  #alarmscreen { animation: alarmpulse .8s ease-in-out infinite; }
  @keyframes alarmpulse { 50% { background: var(--glow); } }
}

/* The picture can be lifted out of a dark room or dimmed for the night.
   This sits on the wrapper, not the video: the video's own filter is the
   slow fade-in, and sharing it would make the slider lag by over a second. */
#stage { filter: brightness(var(--boost, 1)); }

/* ---------- settings rows ---------- */
.ctl {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
}
.ctl__label { font-size: .88rem; color: var(--milk); }
.ctl input[type="range"] { width: 45%; justify-self: end; accent-color: var(--glow); }
.ctl input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--glow); }

/* ---------- dim / nightlight ---------- */
body[data-state="dim"] .topbar,
body[data-state="dim"] main > * { opacity: 0; pointer-events: none; }
body[data-state="dim"] #dimscreen { display: grid; }

#dimscreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  place-items: center;
  background: #05040a;
  color: var(--haze);
  text-align: center;
  padding: 2rem;
}
#dimscreen .orb {
  width: 12px; height: 12px;
  margin: 0 auto 1.5rem;
  border-radius: 999px;
  background: var(--glow);
  box-shadow: 0 0 26px 6px color-mix(in srgb, var(--glow) 45%, transparent);
}
#dimscreen p { margin: 0; font-size: .82rem; opacity: .4; }

@media (prefers-reduced-motion: no-preference) {
  #dimscreen .orb { animation: breathe 5s ease-in-out infinite; }
  /* let the room go properly dark once the hint has been read */
  body[data-state="dim"] #dimscreen p { animation: hush 7s ease forwards; }
  @keyframes hush { 0%, 55% { opacity: .4; } 100% { opacity: 0; } }
}

/* ---------- sheet ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  align-items: end;
  justify-items: center;
  background: rgba(6, 4, 14, .62);
  backdrop-filter: blur(6px);
  animation: fade .25s ease both;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  width: var(--shell);
  max-width: 100%;
  padding: 1.75rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  background: var(--dusk);
  border-top: 1px solid var(--edge);
  animation: rise .38s cubic-bezier(.2,1,.3,1) both;
}
@keyframes rise { from { transform: translateY(100%); } }

.sheet { position: relative; }

.sheet__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
}

.sheet h2 {
  margin: 0 0 1.25rem;
  padding-right: 3rem;
  font-size: 1.35rem;
  font-weight: 700;
}
.sheet .steps { margin-bottom: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  .scrim, .sheet, .qr { animation: none; }
}

/* ---------- fallback code (machine data — kept out of the way) ---------- */
details.escape { margin-top: 1.5rem; }
details.escape > summary {
  font-size: .84rem;
  color: var(--haze);
  cursor: pointer;
  list-style: none;
  text-align: center;
}
details.escape > summary::-webkit-details-marker { display: none; }
details.escape > summary:hover { color: var(--glow); }

.escape__body { display: grid; gap: .6rem; margin-top: 1rem; }
.escape__body p { margin: 0; font-size: .82rem; color: var(--haze); }

textarea, input[type="text"] {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--night);
  color: var(--haze);
  font-family: var(--mono);
  font-size: .74rem;
  resize: none;
}

/* ---------- lost ---------- */
#lost {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  padding: 2rem;
  text-align: center;
  background: rgba(6, 4, 14, .9);
  backdrop-filter: blur(8px);
}
#lost h2 { margin: 0; font-size: 1.4rem; }
#lost p { margin: 0; max-width: 28ch; color: var(--haze); font-size: .92rem; }
#lost .btn { width: auto; }

/* ---------- prose (legal pages) ---------- */
.prose { padding-top: 2.5rem; }
.prose h1 { font-size: 2rem; margin: 0 0 1.5rem; letter-spacing: -0.03em; }
.prose h2 { font-size: 1.05rem; margin: 2.25rem 0 .6rem; }
.prose p, .prose li { color: var(--haze); font-size: .95rem; line-height: 1.6; }
.prose ul { padding-left: 1.1rem; }
.prose .fill {
  padding: 1rem 1.15rem;
  border: 1px dashed var(--edge);
  border-radius: var(--r-sm);
  color: var(--haze);
  font-size: .88rem;
}
.prose .fill b { color: var(--glow); font-weight: 600; }