/* concepts/baby-zen/app/css/main-screen.css
   ---------------------------------------------------------------------------
   Screen 1. The geometry below is not styled by feel — every number comes out
   of dev/MALINGER.md, which was measured off Start.png at a 390 x 844
   viewport. If you change one, re-run dev/fasit.mjs.

   The column is flex with fixed rows and one flexible row (the hero), so a
   taller phone gives its extra height to the artwork and everything else stays
   where the fasit put it.
   --------------------------------------------------------------------------- */

.bz-main {
  align-items: center;
  /* Fasit: the logo row starts at y 53. env() is 0 in a browser tab and ~47
     on a notched iPhone in standalone, so max() keeps both honest. */
  padding: calc(max(var(--safe-top), 44px) + 9px) 20px calc(max(var(--safe-bottom), 24px) + 14px);
}

/* ── Top bar: centred logo, pill pinned right ─────────────────────────────── */
.bz-topbar {
  position: relative;
  flex: none;
  width: 100%;
  height: 42px;
  display: grid;
  place-items: center;
}

.bz-logo { display: block; width: 43px; height: 46px; }
.bz-logo svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(120, 180, 255, 0.35)); }

.bz-pill {
  position: absolute;
  right: -6px;                     /* fasit: pill spans x 237.5–376, y 55.5–88 */
  top: 2.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px 0 10px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--stroke-soft);
  color: var(--ink-dim);
  font-size: 10.5px;
  letter-spacing: -0.005em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bz-pill svg { width: 18px; height: 13.5px; flex: none; }

.bz-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}
.bz-pill[data-state='off'] .bz-pill-dot,
.bz-pill[data-state='unknown'] .bz-pill-dot {
  background: rgba(169, 175, 217, 0.45);
  box-shadow: none;
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.bz-title {
  flex: none;
  margin-top: 11px;
  font-family: var(--font-serif);
  font-size: 37px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.004em;
  background: var(--gradient-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(150, 170, 255, 0.22));
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* Fasit: y 174–430. The hero owns the slack, so a 926 pt screen gives the moon
   the extra room rather than opening a gap above the button. */
.bz-hero {
  flex: 1 1 auto;
  width: 100%;
  min-height: 210px;
  margin-top: 22px;
  position: relative;
}

/* ── Zen Mode ─────────────────────────────────────────────────────────────
   Fasit: a 212 pt circle centred at y 539.

   The ring is four layers, and the reason is worth writing down. A single
   gradient-filled ring looks right in a screenshot of itself and wrong beside
   the mockup: in Start.png the stroke's *core* is blown to white at every
   angle (L 212–250) and all the colour lives in the bloom either side of it —
   seven points inside the stroke the mockup still reads violet on the right
   and teal on the left, and seven points outside it does the same. Ours was a
   coloured hairline with a diffuse box-shadow that registered as nothing. So:

     glow   the same conic, blurred, masked to a wide annulus, spilling both ways
     ring   the conic itself, masked to the stroke
     core   a near-white hairline on top — this is what makes it read as light
     face   the dark glass, transparent at its rim so the inward bloom survives

   Stops are written at the screen angle they land on, clockwise from the top,
   so the ring can be checked against the fasit by reading the numbers: pale
   blue at 12 o'clock, violet down the right, indigo across the bottom, cyan up
   the left. */
.bz-zen {
  --zen-conic: conic-gradient(from 0deg,
      #8ed8fa 0deg, #a78bfa 58deg, #b070ee 92deg, #8b5cf6 138deg,
      #6a72ee 186deg, #4fe0ec 248deg, #52e2ee 288deg, #8ed8fa 360deg);

  flex: none;
  position: relative;
  width: 212px;
  height: 212px;
  margin-top: 3px;
  border-radius: 50%;
  isolation: isolate;
}

.bz-zen-glow,
.bz-zen-ring,
.bz-zen-core,
.bz-zen-face {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* A narrow annulus centred on the stroke, not a filled disc: the mask has to
   put the bloom *on* the line and let it fall away both ways. Widen it and the
   button turns into a luminous donut, which is the failure this replaced. */
.bz-zen-glow {
  inset: -13px;
  background: var(--zen-conic);
  filter: blur(8px) saturate(1.25);
  opacity: 0.8;
  -webkit-mask: radial-gradient(closest-side,
      transparent 0 72%, rgba(0, 0, 0, 0.3) 81%, #000 88%,
      rgba(0, 0, 0, 0.45) 94%, transparent 100%);
          mask: radial-gradient(closest-side,
      transparent 0 72%, rgba(0, 0, 0, 0.3) 81%, #000 88%,
      rgba(0, 0, 0, 0.45) 94%, transparent 100%);
}

.bz-zen-ring {
  inset: 0;
  background: var(--zen-conic);
  -webkit-mask: radial-gradient(closest-side, transparent 0 96.6%, #000 97.9%);
          mask: radial-gradient(closest-side, transparent 0 96.6%, #000 97.9%);
}

/* The white-hot centre of the stroke. Its colours are the crest values read
   straight off Start.png at five angles — white at the top, right and bottom,
   turning cyan down the left — so this is not a gradient somebody liked, it is
   a transcription. A flat white core measured L244 at 7 o'clock where the
   mockup reads L203, and a plain conic underneath measured L190 at 6 o'clock
   where the mockup reads L245; the ring needs both, at the right angles. */
.bz-zen-core {
  inset: 2px;
  background: conic-gradient(from 0deg,
      #dafbfc 0deg, #f4f7fe 55deg, #fcf5fe 92deg, #f6f8fc 140deg,
      #eef7fb 180deg, #8ae9f8 225deg, #8ef8fc 270deg, #cdf6fd 312deg, #dafbfc 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 96.2%, #000 98%);
          mask: radial-gradient(closest-side, transparent 0 96.2%, #000 98%);
}

.bz-zen-face {
  inset: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* The mockup's stack of mark, label and caption sits about four points below
     the button's geometric centre — the caption needs room to breathe against
     the ring's lower arc, and the eye reads the group as centred anyway. */
  padding-top: 8px;
  /* Fading to transparent at the rim is what lets the ring's bloom reach
     inward the way the mockup's does. An opaque face erases it. */
  background: radial-gradient(closest-side,
      rgba(19, 28, 74, 0.88) 0%, rgba(6, 10, 36, 0.93) 82%, rgba(6, 10, 36, 0) 100%);
}
/* The second, fainter ring inside the bright one. */
.bz-zen-face::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(150, 180, 255, 0.14);
}

.bz-zen-mic { display: block; width: 48px; height: 71px; margin-bottom: 12px; }
.bz-zen-mic svg { width: 100%; height: 100%; }

.bz-zen-label {
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-indent: 0.16em;                 /* tracking adds a trailing gap; recentre */
  /* The fasit keeps all eight letters cyan-teal; an earlier ramp to violet was
     borrowed from the ring, which does turn. The type does not. */
  background: linear-gradient(100deg, #5ee6f0 0%, #6fe3f2 55%, #8bd8f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bz-zen-action {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-dim);
}

/* The button breathes while a session is live, and turns its gradient slowly
   while sound is playing. Both are transform/opacity only. */
.bz-main[data-phase='listening'] .bz-zen,
.bz-main[data-phase='soothing'] .bz-zen,
.bz-main[data-phase='fading-out'] .bz-zen {
  animation: bz-breathe var(--dur-breath) var(--ease) infinite;
}
.bz-main[data-phase='soothing'] .bz-zen {
  box-shadow: 0 0 46px rgba(139, 92, 246, 0.5), 0 0 90px rgba(79, 224, 236, 0.28);
}

@keyframes bz-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

.bz-ripple {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 220, 255, 0.55), rgba(180, 220, 255, 0));
  pointer-events: none;
  animation: bz-ripple 620ms var(--ease) forwards;
}
@keyframes bz-ripple {
  to { transform: scale(26); opacity: 0; }
}

/* ── Status line ──────────────────────────────────────────────────────────── */
/* Fasit: text band y 669–679, centred, ~17 px. */
.bz-status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 19px;
  height: 20px;
  font-size: 14px;
  color: var(--ink);
}

.bz-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(79, 224, 236, 0.85);
  flex: none;
}
.bz-main[data-phase='listening'] .bz-status-dot { animation: bz-pulse 1.9s var(--ease) infinite; }
.bz-main[data-phase='soothing'] .bz-status-dot,
.bz-main[data-phase='fading-out'] .bz-status-dot {
  background: var(--violet);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.9);
}
@keyframes bz-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Five bars that follow the real microphone level. Hidden unless a session is
   running, because a meter that moves when nothing is listening is a lie. */
.bz-meter {
  --level: 0;
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
  margin-left: 2px;
}
.bz-main[data-phase='listening'] .bz-meter,
.bz-main[data-phase='soothing'] .bz-meter,
.bz-main[data-phase='fading-out'] .bz-meter { display: flex; }

.bz-meter i {
  width: 2px;
  border-radius: 1px;
  background: var(--cyan);
  opacity: 0.8;
  height: calc(3px + 10px * var(--level) * var(--bar, 1));
  transition: height 90ms linear;
}
.bz-meter i:nth-child(1) { --bar: 0.45; }
.bz-meter i:nth-child(2) { --bar: 0.8; }
.bz-meter i:nth-child(3) { --bar: 1; }
.bz-meter i:nth-child(4) { --bar: 0.7; }
.bz-meter i:nth-child(5) { --bar: 0.4; }

/* ── Privacy line ─────────────────────────────────────────────────────────── */
.bz-privacy {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  height: 16px;
  font-size: 12px;
  color: var(--ink-faint);
}
.bz-privacy svg { width: 14px; height: 16px; }

/* ── Bottom cards ─────────────────────────────────────────────────────────── */
/* Fasit: y 724–805, cards 152 wide with an 8 pt gap and 38/40 pt side margins. */
.bz-bottom {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 312px;
  margin-top: 20px;
}

.bz-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: 82px;
  padding-top: 15px;
  border-radius: var(--r-card);
  /* Top-lit, as the mockup draws it: the interior runs L21–24 at the top down
     to L15–17 at the bottom, with a bright lip along the bottom edge. A flat
     fill made our cards recede where the fasit's sit on the surface. */
  background: linear-gradient(180deg,
      rgba(130, 145, 230, 0.14) 0%, rgba(120, 134, 216, 0.055) 100%);
  border: 1px solid rgba(176, 188, 255, 0.17);
  box-shadow: inset 0 -1px 0 rgba(186, 198, 255, 0.2);
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--dur-ui) var(--ease), transform 140ms var(--ease);
}
.bz-card:active { transform: scale(0.978); background: var(--card-strong); }
.bz-card svg { height: 29px; width: auto; }
.bz-card-label { font-size: 13px; line-height: 1; letter-spacing: -0.005em; }

/* ── Overlays ─────────────────────────────────────────────────────────────── */
/* The long-crying banner: the counterweight to masking, so it sits above the
   button where it cannot be missed, not tucked into a corner. */
.bz-banner {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(max(var(--safe-top), 44px) + 58px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: var(--r-card);
  background: rgba(46, 45, 94, 0.92);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), var(--glow-violet);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: bz-drop 480ms var(--ease);
}
.bz-banner svg { width: 34px; height: 34px; flex: none; }
.bz-banner-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.bz-banner-title { font-size: 16px; font-weight: 600; }
.bz-banner-body { font-size: 13.5px; color: var(--ink-dim); }
.bz-banner-dismiss {
  margin-left: auto; align-self: flex-start;
  font-size: 22px; line-height: 1; color: var(--ink-faint);
}
@keyframes bz-drop {
  from { transform: translate3d(0, -16px, 0); opacity: 0; }
}

/* One reusable explainer card: privacy, a denied microphone, a backgrounded
   tab. Same shape every time so it never reads as an error dialog. */
.bz-note {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(max(var(--safe-bottom), 24px) + 18px);
  padding: 20px;
  border-radius: 22px;
  background: rgba(13, 19, 48, 0.96);
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: left;
  animation: bz-rise 420ms var(--ease);
}
.bz-note-title { display: block; font-size: 17px; font-weight: 600; }
.bz-note-body { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
.bz-note-dismiss {
  margin-top: 16px;
  width: 100%;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--card-strong);
  border: 1px solid var(--stroke);
  font-size: 16px;
  font-weight: 500;
}
@keyframes bz-rise {
  from { transform: translate3d(0, 20px, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bz-zen, .bz-status-dot { animation: none !important; }
}

/* ── Short screens ──────────────────────────────────────────────────────────
   The column above is authored against the fasit's 390 x 844. On an iPhone SE
   (375 x 667) that composition is about 90 pt too tall, and since the app
   frame never scrolls, the overflow does not announce itself — it simply
   takes the bottom cards off the screen. So the fixed rows step down at two
   heights, in the order a designer would sacrifice them: first the breathing
   room, then the button, and the hero last, because the hero is the thing
   people look at.

   Nothing here touches 844, so the fasit check is unaffected. */

@media (max-height: 800px) {
  .bz-main { padding-top: calc(max(var(--safe-top), 40px) + 6px); padding-bottom: calc(max(var(--safe-bottom), 20px) + 10px); }
  .bz-title { margin-top: 8px; font-size: 34px; }
  .bz-hero { margin-top: 16px; min-height: 170px; }
  .bz-zen { width: 190px; height: 190px; }
  .bz-zen-mic { width: 48px; height: 64px; margin-bottom: 8px; }
  .bz-zen-label { font-size: 18px; }
  .bz-zen-action { font-size: 15px; margin-top: 6px; }
  .bz-status { margin-top: 14px; }
  .bz-bottom { margin-top: 14px; }
  .bz-card { height: 76px; padding-top: 13px; gap: 11px; }
}

@media (max-height: 700px) {
  .bz-hero { min-height: 120px; margin-top: 12px; }
  .bz-zen { width: 168px; height: 168px; }
  .bz-zen-mic { width: 42px; height: 56px; margin-bottom: 6px; }
  .bz-zen-label { font-size: 16px; letter-spacing: 0.14em; text-indent: 0.14em; }
  .bz-status { margin-top: 12px; height: 18px; }
  .bz-privacy { margin-top: 4px; }
  .bz-card { height: 70px; padding-top: 11px; gap: 9px; }
  .bz-card svg { height: 25px; }
}

@media (max-height: 620px) {
  .bz-title { font-size: 30px; margin-top: 4px; }
  .bz-hero { min-height: 86px; margin-top: 8px; }
  .bz-zen { width: 150px; height: 150px; }
  .bz-zen-mic { width: 36px; height: 48px; margin-bottom: 4px; }
  .bz-card { height: 64px; padding-top: 9px; gap: 7px; }
  .bz-card svg { height: 22px; }
}