/* concepts/baby-zen/app/css/sheet-settings.css
   ---------------------------------------------------------------------------
   Screen 3 — the Settings sheet.

   Every number below was measured out of planning/design/Settings.png after
   dev/fasit.mjs normalised it onto the 390 x 844 grid the app is built in, not
   chosen by eye. If you change one, re-run:

       node concepts/baby-zen/app/dev/fasit.mjs settings --boxes

   Two things about that mockup are worth knowing before you "fix" something
   here. It is a photograph of a phone, so its screen aspect is 0.431 rather
   than 0.462 and normalising squeezes it ~7 % vertically: circles in the fasit
   read a couple of points wider than tall, and that is the camera, not the
   design. And the type scale sits ~15 % under iOS standard (dev/MALINGER.md,
   deviation A7) — the sizes below look small in code and correct on screen.

   Layout: header and Done are pinned outside the scroll container, so the
   Advanced section can sit under the preview card without moving anything the
   fasit measures.
   --------------------------------------------------------------------------- */

.bz-set {
  /* Fasit: the card spans x 6.3–383.3 and y 150.5–793.5. The bottom gap is
     large because the fasit keeps the sheet clear of the home indicator. */
  bottom: 50px;
  left: 6px;
  right: 6px;
  height: 644px;
  max-height: calc(100% - 96px);
  /* Sampled down the middle of the fasit: a bright lip at the top edge falling
     to rgb(24,29,67) by y 200 and rgb(16,23,54) by y 550. */
  background:
    radial-gradient(150% 55px at 50% 0%, rgba(168, 170, 235, 0.24), rgba(168, 170, 235, 0) 100%),
    linear-gradient(180deg, #171d43 0%, #101733 62%, #0d1430 100%);
  border-color: rgba(176, 188, 255, 0.26);
  border-top-color: rgba(206, 212, 255, 0.4);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(90, 80, 190, 0.18);
}

/* A short screen wins over the fasit's generous bottom gap. */
@media (max-height: 720px) {
  .bz-set { bottom: max(16px, var(--safe-bottom)); max-height: calc(100% - 56px); }
}

.bz-set .bz-sheet-body {
  flex: 1 1 auto;
  padding: 0 20px;
  /* The fasit-measured column runs from "Crying sensitivity" to the preview
     card; Advanced follows it below the fold. The mask dissolves whatever is
     scrolling up behind the pinned title instead of letting it collide with
     it — and at rest the first 14 px of the body are empty, so it changes
     nothing the fasit measures. */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px);
}
.bz-set .bz-sheet-body::-webkit-scrollbar { width: 0; }

/* ── Header ───────────────────────────────────────────────────────────────── */
/* Fasit: X circle y 169.5–205.5 centred on x 344; "Settings" baseline y 200.5. */
.bz-set-head {
  position: relative;
  flex: none;
  height: 39px;
  margin: 17px 20px 0;
}

.bz-set-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* The fasit does not centre the title on the X — it sits ~4 pt lower. */
  padding-top: 15px;
  text-align: center;
  font-size: 23.6px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
}

.bz-set .bz-sheet-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 39px;
  height: 39px;
  color: #f2f3fb;
  background: rgba(150, 145, 220, 0.12);
  border-color: rgba(190, 190, 255, 0.18);
}
.bz-set .bz-sheet-close svg { width: 28px; height: 28px; }

/* ── Section headings and helper copy ─────────────────────────────────────── */
/* Rows are inset 3.5 px inside the 20 px body padding: the fasit puts label
   glyphs at x ~32 while the cards and the CTA start at x 27. */
.bz-set-section {
  margin: 28.6px 3.5px 0;
  font-size: 16.35px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
}

.bz-set-sub {
  margin: 22px 3.5px 0;
  font-size: 15.7px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
}

.bz-set-help {
  margin: 15.5px 3.5px 0;
  font-size: 12.85px;
  line-height: 1;
  color: rgba(169, 175, 217, 0.68);
}
.bz-set-help--tight { margin-top: 7px; }
/* Only the fasit's one-line helper needs line-height 1; Advanced copy wraps. */
.bz-set-adv .bz-set-help { line-height: 1.4; }

/* One hairline, four different gaps around it — the fasit's rhythm is not a
   constant, so each position states its own. */
.bz-set-rule {
  height: 1px;
  margin: 22px 3.5px 0;
  border: 0;
  background: rgba(176, 188, 255, 0.1);
}
.bz-set-help + .bz-set-rule { margin-top: 24.8px; }
.bz-set-schedule > .bz-set-rule { margin-top: 14px; }
.bz-set-schedule + .bz-set-rule { margin-top: 17px; }

/* ── Segmented control ────────────────────────────────────────────────────── */
/* Fasit: track y 266.5–314 (h 47.5), selected pill x 141–249 (w 108). */
.bz-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  height: 47.5px;
  margin: 14.2px -1.5px 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(176, 188, 255, 0.13);
  background: rgba(126, 140, 224, 0.05);
  /* The rail is slightly concave in the fasit — a dark inner edge at the top. */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(176, 188, 255, 0.05);
}
.bz-seg[data-seg='autostop'] { --n: 4; height: 40px; }

.bz-seg-thumb {
  position: absolute;
  top: 1.75px;
  bottom: 1.75px;
  left: 2px;
  width: calc(100% / var(--n, 3) - 4px);
  border-radius: var(--r-pill);
  /* Sampled across the pill: brightest at the top-left, deepest bottom-right. */
  background: linear-gradient(158deg, #9a86fb 0%, #7d64f7 42%, #675dd9 100%);
  box-shadow: 0 2px 10px rgba(103, 93, 217, 0.55), 0 0 20px rgba(139, 92, 246, 0.35);
  transform: translateX(calc(var(--i, 0) * (100% + 4px)));
  transition: transform var(--dur-ui) var(--ease);
}

.bz-seg-opt {
  position: relative;
  z-index: 1;
  font-size: 13.8px;
  line-height: 1;
  color: #bec3e4;
  transition: color var(--dur-ui) var(--ease);
}
.bz-seg-opt[aria-checked='true'] { color: #ffffff; font-weight: 600; }

/* ── Rows ─────────────────────────────────────────────────────────────────── */
.bz-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 7.5px 0 3.5px;
}

/* Fasit: switch y 384–415.5, label baseline y 406. */
.bz-set-row--lead { height: 32px; margin-top: 16.5px; }
.bz-set-row--stack { height: 32px; margin-top: 13.5px; align-items: flex-start; }
.bz-set-row--stack .bz-switch { align-self: center; }
.bz-set-schedule .bz-set-row--value { margin-top: 16.7px; }

.bz-set-label {
  font-size: 15.7px;
  line-height: 1;
  color: var(--ink);
}
/* The fasit sets this row's label heavier than the ones below it. Liberation
   Sans has no medium face, so the screenshot harness renders it regular and the
   measurement stays honest; SF Pro on the phone shows the weight. */
.bz-set-row--lead .bz-set-label { font-size: 18px; font-weight: 500; letter-spacing: -0.006em; }
.bz-set-label--sm { font-size: 15px; }

.bz-set-value {
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  color: var(--cyan-bright);
  font-variant-numeric: tabular-nums;
}
.bz-set-value--sm { font-size: 13.5px; color: var(--ink-dim); font-weight: 500; }

/* Vibration keeps the fasit's label position and hangs the honesty note under
   it, inside the height the switch already occupies — so nothing below moves. */
.bz-set-stack { display: block; padding-top: 5.7px; }
.bz-set-row--stack .bz-set-label { display: block; font-size: 16.4px; line-height: 17.2px; }
.bz-set-hint {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  line-height: 1.1;
  color: rgba(169, 175, 217, 0.52);
}

/* ── Switch ───────────────────────────────────────────────────────────────── */
/* Fasit: 57.5 x 32 with a 27 pt knob, 2.5 pt inset. */
.bz-switch {
  position: relative;
  flex: none;
  width: 57.5px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(126, 140, 224, 0.18);
  border: 1px solid rgba(176, 188, 255, 0.14);
  transition: background var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.bz-switch[aria-checked='true'] {
  /* Sampled: rgb(51,196,252) at the top edge, rgb(46,182,252) at the bottom. */
  background: linear-gradient(180deg, #3fc8fd 0%, #2aa9f9 100%);
  border-color: rgba(120, 220, 255, 0.42);
  /* The fasit's switch barely glows — sampling 5 pt outside it finds sheet
     background, not halo. Keep the lift, lose the aura. */
  box-shadow: 0 0 7px rgba(56, 190, 252, 0.22), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bz-switch-knob {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fdfdff;
  box-shadow: 0 2px 6px rgba(4, 8, 30, 0.45);
  transition: transform var(--dur-ui) var(--ease);
}
.bz-switch[aria-checked='true'] .bz-switch-knob { transform: translateX(25.5px); }

/* ── Slider ───────────────────────────────────────────────────────────────── */
/* Fasit: rail x 33–354 at y 486–490.5, knob Ø 24 centred on the rail. */
.bz-set-schedule { display: block; }

.bz-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: calc(100% - 15px);
  height: 24px;
  margin: 12.8px 9px 0 6px;
  background: transparent;
  cursor: pointer;
}

/* The filled part ends at the thumb's centre: 12 px + f x (track − 24 px).
   Doing that arithmetic in CSS keeps it right before first layout. */
.bz-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background-image:
    linear-gradient(90deg, #4a7cf9 0%, #45dcf8 100%),
    linear-gradient(rgba(176, 188, 255, 0.16), rgba(176, 188, 255, 0.16));
  background-repeat: no-repeat;
  background-size: calc(12px + var(--f, 0) * (100% - 24px)) 100%, 100% 100%;
}
.bz-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9.5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(4, 8, 30, 0.5), 0 0 12px rgba(90, 170, 250, 0.35);
}
.bz-range::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background-image:
    linear-gradient(90deg, #4a7cf9 0%, #45dcf8 100%),
    linear-gradient(rgba(176, 188, 255, 0.16), rgba(176, 188, 255, 0.16));
  background-repeat: no-repeat;
  background-size: calc(12px + var(--f, 0) * (100% - 24px)) 100%, 100% 100%;
}
.bz-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(4, 8, 30, 0.5);
}

/* Fasit: "5 min" / "30 min" sit under the rail ends, cap y 505–514. */
.bz-set-ends {
  display: flex;
  justify-content: space-between;
  margin: 3.8px 9px 0 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-faint);
}

/* ── Alert off ────────────────────────────────────────────────────────────── */
/* SIKKERHET kap. 4: switching the counterweight off is allowed, never silent.
   The schedule it would have used is what makes room for the warning, so the
   sheet gets shorter rather than pushing Done out of reach. */
.bz-set-warn {
  margin: 12px 3.5px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--warm-baby);
}
.bz-set[data-alert='on'] .bz-set-warn { display: none; }
.bz-set[data-alert='off'] .bz-set-schedule,
.bz-set[data-alert='off'] .bz-set-prev { display: none; }

/* ── Preview card ─────────────────────────────────────────────────────────── */
/* Fasit: card x 27–362.5, y 595–690.5; bell circle Ø 75 centred at (77, 644). */
.bz-set-prev {
  display: flex;
  align-items: center;
  gap: 21.5px;
  height: 95.5px;
  margin-top: 15px;
  padding-left: 12.5px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid rgba(176, 188, 255, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.bz-set-prev-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.05) 72%);
  border: 1px solid rgba(140, 120, 250, 0.22);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.18), inset 0 0 16px rgba(139, 92, 246, 0.1);
}
.bz-set-prev-icon svg { display: block; }

/* The fasit sets the two lines a shade above the card's centre line. */
.bz-set-prev-text { display: block; margin-top: 4px; }
.bz-set-prev-title {
  display: block;
  font-size: 15.4px;
  line-height: 1;
  font-weight: 600;
  color: var(--ink);
}
.bz-set-prev-body {
  display: block;
  margin-top: 11.9px;
  font-size: 12.8px;
  line-height: 1;
  color: var(--ink-dim);
}

/* The halo breathes once every four seconds — the same ambient tempo the hero
   uses. Parked in screenshot mode by tokens.css, off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .bz-set-prev-icon { animation: bz-set-halo var(--dur-breath) var(--ease) infinite; }
}
@keyframes bz-set-halo {
  0%, 100% { box-shadow: 0 0 18px rgba(139, 92, 246, 0.18), inset 0 0 16px rgba(139, 92, 246, 0.1); }
  50%      { box-shadow: 0 0 26px rgba(139, 92, 246, 0.3), inset 0 0 18px rgba(139, 92, 246, 0.14); }
}

/* ── Advanced ─────────────────────────────────────────────────────────────── */
/* DESIGN-SPEC kap. 4.3. Not in the fasit, and it must not disturb what is: it
   sits at the end of the scroll container, under the preview card and above
   the pinned Done button, so every measured band lands identically whether it
   is open or closed. */
.bz-set-adv { margin-top: 26px; }
.bz-set-adv[open] { padding-bottom: 8px; }

.bz-set-adv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  cursor: pointer;
  list-style: none;
}
.bz-set-adv-head::-webkit-details-marker { display: none; }
.bz-set-adv-head::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.8px solid var(--ink-dim);
  border-bottom: 1.8px solid var(--ink-dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-ui) var(--ease);
}
.bz-set-adv[open] .bz-set-adv-head::after { transform: rotate(-135deg) translate(-2px, -2px); }

.bz-set-adv .bz-set-row--value { margin-top: 18px; }
.bz-set-adv .bz-range { margin-top: 9px; }

.bz-set-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 11px);
  height: 44px;
  margin: 4px 7.5px 0 3.5px;
  font-size: 15.7px;
  color: var(--ink);
  text-align: left;
}
.bz-set-chev {
  width: 8px;
  height: 8px;
  border-right: 1.8px solid var(--ink-faint);
  border-bottom: 1.8px solid var(--ink-faint);
  transform: rotate(-45deg);
}
[aria-expanded='true'] .bz-set-chev { transform: rotate(45deg); }

.bz-set-anc {
  margin: 2px 3.5px 6px;
  padding: 12px 14px;
  border-radius: var(--r-tile);
  background: var(--card);
  border: 1px solid var(--stroke-soft);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* ── Done ─────────────────────────────────────────────────────────────────── */
/* Fasit: x 27–363, y 712.5–764, with 29 pt of card below it. */
.bz-set-foot {
  flex: none;
  padding: 22px 20px 29px;
}
/* Sampled straight off Settings.png: cyan at the left, indigo through the
   middle, violet at the right, with a bright top lip and a shaded foot. The
   shared --gradient-cta is a shade more cyan than this button photographs. */
.bz-set-done {
  height: 51.5px;
  font-size: 19.6px;
  font-weight: 600;
  background:
    linear-gradient(180deg, rgba(215, 255, 255, 0.3) 0%, rgba(215, 255, 255, 0) 40%,
                    rgba(12, 30, 250, 0.14) 100%),
    linear-gradient(90deg, #299ef9 0%, #3a72fa 28%, #645afa 60%, #9e5ffc 100%);
  /* The fasit's button is rimmed with light all the way round — that rim is
     what the fasit check reads as the button's edge, not the fill. */
  box-shadow:
    inset 0 0 0 1px rgba(196, 236, 255, 0.34),
    0 8px 26px rgba(70, 120, 250, 0.35),
    0 0 38px rgba(139, 92, 246, 0.26);
}

/* ── Focus ────────────────────────────────────────────────────────────────── */
.bz-set :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}
.bz-set .bz-seg-opt:focus-visible { border-radius: var(--r-pill); outline-offset: -1px; }
.bz-range:focus-visible { outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .bz-seg-thumb, .bz-switch-knob { transition: none; }
}

/* The fasit's slider knob is flat white with a soft grey drop shadow — no
   bloom. Ours carried a cyan-white glow borrowed from the track's fill. */
.bz-sheet--settings input[type='range']::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bz-sheet--settings input[type='range']::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}