/* Cradle "next" front end (preview). Everything here is scoped to html[data-ui="next"],
   so the classic UI is untouched until the preview becomes the default.
   Tij = the water home · Adem = the serif sentence and the spring sheets. */

@font-face { font-family: "Outfit"; src: url("/fonts/Outfit.woff2") format("woff2"); font-weight: 200 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader.woff2") format("woff2"); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Italic.woff2") format("woff2"); font-weight: 300 400; font-style: italic; font-display: swap; }

#nx-water { position: fixed !important; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 0 !important; pointer-events: none; display: none; }

[data-ui="next"] { --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --serif: "Newsreader", Georgia, "Times New Roman", serif; }
[data-ui="next"] #app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
[data-ui="next"] .toast { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }

/* ---- bottom navigation (replaces the top tab bar) ---- */
.nx-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0 auto; max-width: 620px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: calc(54px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass); border-top: 1px solid var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.nx-tabs button { font-size: 12.5px; color: var(--text-dim); min-height: 44px; }
.nx-tabs button.active { color: var(--text); font-weight: 500; }
.nx-tabs button.active::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 2px auto 0; }

/* ---- the Today scene: sky above, water below ---- */
html[data-nx-scene] { background-color: #f3f6fb; transition: background-color 1.1s; }
html[data-nx-scene="sleep"] { background-color: #e8eaf6; }
html[data-nx-scene="night"] { background-color: #090d20; }
html[data-nx-scene] body::before { display: none; }
html[data-nx-scene] .nx-tabs { background: transparent; border-top-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-nx-scene] .nx-tabs button { color: rgba(255, 255, 255, .74); }
html[data-nx-scene] .nx-tabs button.active { color: #fff; }

.nx-hero { text-align: center; margin-top: clamp(14px, 5vh, 44px); pointer-events: none; }
.nx-eye { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); }
.nx-big { font-weight: 200; font-size: clamp(64px, 20vw, 86px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 4px; animation: nx-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.nx-big u { text-decoration: none; font-size: .3em; font-weight: 300; letter-spacing: 0; margin: 0 .22em 0 .06em; color: var(--text-dim); }
.nx-say { font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; margin: 12px auto 0; max-width: 21ch; text-wrap: balance; }
.nx-say em { font-style: italic; }
.nx-link { pointer-events: auto; margin-top: 10px; font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); }
@keyframes nx-in { from { filter: blur(8px); opacity: 0; transform: translateY(10px); } }

.nx-buoy {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; will-change: transform;
  font-size: 12.5px; padding: 5px 12px 5px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: #1b2740; box-shadow: 0 5px 16px rgba(20, 40, 90, .2);
}
.nx-buoy i { width: 7px; height: 7px; border-radius: 50%; background: #f0962e; }

.nx-peek {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(158px + env(safe-area-inset-bottom)); z-index: 10;
  display: grid; justify-items: center; gap: 5px; padding: 8px 18px; min-height: 0;
  font-size: 12.5px; color: rgba(255, 255, 255, .92);
}
.nx-peek::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .7); }

.nx-acts {
  position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 10; margin: 0 auto; max-width: 620px; padding: 0 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center;
}
.nx-acts button { display: grid; justify-items: center; gap: 5px; font-size: 12px; color: #fff; min-height: 0; }
.nx-acts button i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-style: normal;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .42); transition: transform .3s cubic-bezier(.3, 1.9, .5, 1), background .2s; }
.nx-acts button:active i { transform: scale(.84); background: rgba(255, 255, 255, .38); }
.nx-acts button.done i { background: rgba(255, 255, 255, .46); }

/* ---- sheets: glass, rounder, on a spring ---- */
[data-ui="next"] .sheet {
  border-radius: 28px 28px 0 0; background: var(--glass); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  animation: nx-rise .55s cubic-bezier(.2, 1.25, .3, 1);
}
@keyframes nx-rise { from { transform: translateY(60px); opacity: 0; } }
[data-ui="next"] .sheet h2 { font-weight: 500; letter-spacing: -.02em; }
.nx-sheet-say { font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 2px 0 14px; }
.nx-sheet-say em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .nx-big, [data-ui="next"] .sheet { animation: none; }
}

/* =====================================================================
   Every other page: Adem's slow colour field, translucent surfaces,
   serif for the sentences that matter. Overrides the skin tokens.
   ===================================================================== */
html[data-ui="next"] {
  --ground: #f6f7fa; --surface: rgba(255, 255, 255, .76); --surface-2: rgba(255, 255, 255, .5); --hover: rgba(27, 39, 64, .05);
  --border: rgba(27, 39, 64, .09); --border-strong: rgba(27, 39, 64, .18); --divider: rgba(27, 39, 64, .08);
  --text: #1b2740; --text-dim: #5c6781; --text-faint: #8d96ab;
  --accent: #3f7fd0; --accent-ink: #ffffff; --accent-soft: rgba(63, 127, 208, .13);
  --glass: rgba(246, 247, 250, .8); --radius: 18px; --radius-sm: 14px;
  --nx-a1: rgba(185, 218, 255, .95); --nx-a2: rgba(255, 214, 192, .85); --nx-a3: rgba(198, 238, 218, .85);
}
html[data-ui="next"][data-theme="dark"] {
  --ground: #0a0d20; --surface: rgba(255, 255, 255, .065); --surface-2: rgba(255, 255, 255, .1); --hover: rgba(255, 255, 255, .06);
  --border: rgba(238, 241, 255, .1); --border-strong: rgba(238, 241, 255, .2); --divider: rgba(238, 241, 255, .08);
  --text: #eef1ff; --text-dim: #a3abc8; --text-faint: #6c7493;
  --accent: #8fb6f5; --accent-ink: #0a0d20; --accent-soft: rgba(143, 182, 245, .16);
  --glass: rgba(12, 16, 38, .8);
  --nx-a1: rgba(43, 51, 146, .8); --nx-a2: rgba(87, 56, 144, .62); --nx-a3: rgba(27, 88, 118, .62);
}
html[data-ui="next"]:not([data-nx-scene]) body::before {
  display: block; inset: -14%; opacity: 1; background-size: 100% 100%; background-repeat: no-repeat;
  background-image:
    radial-gradient(42% 32% at 14% 12%, var(--nx-a1), transparent 72%),
    radial-gradient(46% 36% at 96% 42%, var(--nx-a2), transparent 72%),
    radial-gradient(46% 34% at 8% 88%, var(--nx-a3), transparent 72%);
  animation: nx-aur 28s ease-in-out infinite alternate;
}
@keyframes nx-aur { to { transform: translate(4%, -3%) scale(1.08) rotate(3deg); } }

html[data-nx-scene] .topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
[data-ui="next"] .chip.active { color: var(--ground); }
[data-ui="next"] .activity .count { color: var(--ground); }
[data-ui="next"] .btn { border-radius: 14px; }
[data-ui="next"] .btn-primary { border-radius: 16px; font-weight: 500; }
[data-ui="next"] .section-title { letter-spacing: .14em; font-weight: 500; }
[data-ui="next"] .skin-grid, [data-ui="next"] .field:has([data-action="skin-pick"]) { display: none; }

/* logging sheets: big, round, one tap */
[data-ui="next"] .choice { border-radius: 22px; padding: 20px 8px 16px; font-size: 15px; font-weight: 500; background: var(--surface); gap: 8px; }
[data-ui="next"] .choice .dd { font-size: 28px; color: var(--accent); }
[data-ui="next"] .choice.suggested { border-color: var(--accent); background: var(--accent-soft); }
[data-ui="next"] .choice-grid { gap: 8px; margin-bottom: 8px; }
[data-ui="next"] .slider-val { font-weight: 300; font-size: 30px; letter-spacing: -.02em; }

/* sentences */
[data-ui="next"] .auth-wrap h1 { font-family: var(--serif); font-weight: 300; font-size: 46px; letter-spacing: -.02em; }
[data-ui="next"] .tagline { font-size: 16px; }
[data-ui="next"] .onboard { max-width: 360px; }
[data-ui="next"] .onboard h1 { font-family: var(--serif); font-weight: 300; font-size: 38px; line-height: 1.08; letter-spacing: -.02em; text-align: left; margin-top: 4px; text-wrap: balance; }
[data-ui="next"] .onboard .logo, [data-ui="next"] .ob-dots { justify-content: flex-start; }
[data-ui="next"] .ob-lead { text-align: left; margin: 0 0 6px; max-width: 32ch; font-size: 15.5px; }
[data-ui="next"] .ob-note { text-align: left; margin: 0; }
[data-ui="next"] .ob-card { justify-items: start; text-align: left; border-radius: 22px; padding: 18px; }
[data-ui="next"] .ob-chips { justify-content: flex-start; }
[data-ui="next"] .ask-card h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; align-items: flex-start; }
[data-ui="next"] .ask-card h3 .dd { margin-top: 4px; }
[data-ui="next"] .ask-card .ask-q { display: inline-block; background: var(--text); color: var(--ground); border-radius: 16px 16px 4px 16px; padding: 7px 13px; font-size: 13.5px; margin-bottom: 12px; }
[data-ui="next"] .ask-card { border-radius: 22px; padding: 18px; }
[data-ui="next"] .dev-hero h2, [data-ui="next"] .week-card h1 { font-family: var(--serif); font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
[data-ui="next"] .stat-tile strong { font-weight: 300; font-size: 28px; }

/* ---- Stats: the ring you scrub (Baan) ---- */
.nx-ring { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 2px auto 6px; user-select: none; -webkit-user-select: none; }
.nx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-r-track { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.nx-r-sleep { fill: none; stroke: #8c97ea; stroke-width: 8; stroke-linecap: round; opacity: .85; }
.nx-r-feed { fill: #ee9026; }
.nx-r-diaper { fill: #46a57f; }
.nx-r-now { fill: var(--text); stroke: var(--ground); stroke-width: 3.5; }
.nx-r-hour { font-size: 10px; fill: var(--text-faint); text-anchor: middle; dominant-baseline: central; }
.nx-hand { fill: var(--ground); stroke: var(--text); stroke-width: 2.5; opacity: 0; transition: opacity .2s; pointer-events: none; }
.nx-ring.scrub .nx-hand { opacity: 1; }
.nx-hit { fill: none; stroke: transparent; stroke-width: 56; pointer-events: stroke; touch-action: none; cursor: grab; }
.nx-blob {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: linear-gradient(140deg, #ffc56e, #ff8552); color: #fff; text-align: center;
  display: grid; place-content: center; justify-items: center; gap: 1px; pointer-events: none;
  border-radius: 46% 54% 57% 43% / 48% 42% 58% 52%; animation: nx-morph 9s ease-in-out infinite; transition: background 1s;
}
.nx-blob.cool { background: linear-gradient(140deg, #a9b3ff, #5f6fe2); }
@keyframes nx-morph { 33% { border-radius: 58% 42% 44% 56% / 42% 56% 44% 58%; } 66% { border-radius: 42% 58% 52% 48% / 56% 46% 54% 44%; } }
.nx-blob small { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.nx-blob b { font-size: clamp(26px, 8vw, 34px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.nx-blob span { font-size: 12px; opacity: .92; }
.nx-ring-hint { text-align: center; font-size: 12.5px; color: var(--text-faint); margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .nx-blob, html[data-ui="next"] body::before { animation: none !important; } }