/* Bani's home screen as a live copy (js/bani-app.js). Every class starts with ba- so it never meets the site's own. */
:root, .ba-app { --feed-soft: #FFF0E5; --feed-mid: #FFD4B8; --feed: #EE9466; --feed-deep: #8F4A2A; --diaper-soft: #E6F1FD; --diaper-mid: #B3D4F7; --diaper: #3B86D9; --diaper-deep: #164A80; --sleep-soft: #EEEAFE; --sleep-mid: #CBC1FA; --sleep: #6E5BE6; --sleep-deep: #33278A; --growth-soft: #E5F6EA; --growth-mid: #B5E3C3; --growth: #38A064; --growth-deep: #175A35; --med-soft: #FDE9EE; --med-mid: #F8BFCC; --med: #D9506F; --med-deep: #85203A; --care-soft: #E7F5FC; --care-mid: #BCE1F3; --care: #3B98C6; --care-deep: #1D5C7D; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1); }
/* The screen it lives in is the size it measures against. */
:has(> .ba-app) { container-type: inline-size; }
/* The app on the phone keeps its own light look, whatever the page's theme. */
.ba-app { --bg: #FBF6F2; --surface: #FFFFFF; --muted: #F3EBE4; --border: #EADFD6; --text: #271D1F; --text-2: #5C4D50; --text-3: #7A6A6D; --tint: #2F6DB0; --bunny: #7FB3EA; --word: #46536B; color-scheme: light; }
.ba-app { isolation: isolate; --u: calc(100cqw / 390); position: absolute; inset: 0; display: flex; flex-direction: column; font-size: calc(15 * var(--u)); direction: rtl; color: var(--text); user-select: none; -webkit-user-select: none; }
.ba-app .ba-sky { position: absolute; inset: 0 0 auto; height: 52%; z-index: -1; background: linear-gradient(160deg, #F7E5B0, #EFEADB 48%, #CFDDEE); }
.ba-app .ba-sky .ba-n { position: absolute; inset: 0; background: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 55%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 40% 60%, #fff 50%, transparent 51%), linear-gradient(160deg, #14213C, #1A2A4A 48%, #2A4170); opacity: 0; transition: opacity 1.4s var(--ease-io); }
.ba-app.ba-night .ba-sky .ba-n { opacity: 1; }
.ba-app .ba-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, var(--bg)); }
.ba-app.ba-night .ba-sky::after { background: linear-gradient(transparent 55%, var(--bg)); }
.ba-app.ba-night { --ink-app: #F4F1FA; }
.ba-app .ba-status { height: calc(54 * var(--u)); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 0 calc(34 * var(--u)); font: 600 calc(16 * var(--u)) / 1 'Rubik', system-ui; direction: ltr; color: var(--ink-app, #18141A); transition: color 0.8s; }
.ba-app .ba-status i { display: inline-flex; gap: calc(6 * var(--u)); align-items: center; }
.ba-app .ba-status svg { height: calc(12 * var(--u)); fill: currentColor; }
.ba-app .ba-head { position: relative; display: grid; justify-items: center; padding-top: calc(2 * var(--u)); }
.ba-app .ba-head .logo { position: absolute; left: calc(20 * var(--u)); top: calc(6 * var(--u)); font-size: calc(19 * var(--u)); transition: color 0.8s; }
.ba-app.ba-night .ba-head .logo .b { fill: #FFF4D6; filter: drop-shadow(0 0 4px rgba(255, 240, 200, 0.8)); }
.ba-app.ba-night .ba-head .logo .w { fill: rgba(222, 231, 248, 0.92); }
.ba-app .ba-face { width: calc(92 * var(--u)); height: calc(92 * var(--u)); border-radius: 50%; padding: calc(4 * var(--u)); background: conic-gradient(from 200deg, #F3B7A6, #D8C8F2, #F3B7A6); }
.ba-app .ba-face svg { width: 100%; height: 100%; border-radius: 50%; background: #FBEFE6; }
.ba-app .ba-hello { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); color: var(--ink-app, var(--text-2)); transition: color 0.8s; }
.ba-app .ba-name { font-size: calc(32 * var(--u)); font-weight: 800; line-height: 1.1; color: var(--ink-app, var(--text)); transition: color 0.8s; }
.ba-app .ba-rings { display: flex; gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); }
.ba-app .ba-ring { width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--surface); line-height: 1; box-shadow: 0 0 0 calc(3 * var(--u)) var(--r) inset; }
.ba-app .ba-ring b { font-size: calc(20 * var(--u)); color: var(--r); }
.ba-app .ba-ring small { font-size: calc(10 * var(--u)); color: var(--text-2); margin-top: calc(2 * var(--u)); }
.ba-app .ba-tiles { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(11 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)) 0; }
.ba-app .ba-tabs { margin-top: auto; height: calc(84 * var(--u)); display: flex; justify-content: space-around; align-items: flex-start; padding-top: calc(12 * var(--u)); background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--border); }
.ba-app .ba-tabs span { display: grid; justify-items: center; gap: calc(3 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--text-3); }
.ba-app .ba-tabs span.ba-on { color: #141012; font-weight: 700; }
.ba-app .ba-tabs svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-tile { position: relative; text-align: start; height: calc(128 * var(--u)); border-radius: calc(26 * var(--u)); padding: calc(16 * var(--u)); background: linear-gradient(160deg, var(--soft), var(--mid)); color: var(--deep); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-14 * var(--u)) var(--strong); transition: transform 0.45s var(--spring), box-shadow 0.3s ease; }
.ba-tile:active, .ba-tile.ba-press { transform: scale(0.95); transition-duration: 0.12s; transition-timing-function: ease-out; }
.ba-tile .ba-ic { position: absolute; inset-inline-end: calc(14 * var(--u)); top: calc(14 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--strong); }
.ba-tile .ba-ic svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ba-tile .ba-tt { display: block; max-width: 64%; }
.ba-tile .ba-when { display: block; font-size: calc(12 * var(--u)); color: var(--strong); filter: brightness(0.8); }
.ba-tile .ba-what { display: block; font-size: calc(16 * var(--u)); font-weight: 700; line-height: 1.2; color: var(--text); }
.ba-tile .ba-row { display: flex; justify-content: space-between; align-items: baseline; }
.ba-tile .ba-title { font-size: calc(18 * var(--u)); font-weight: 800; color: var(--text); }
.ba-tile .ba-sub { font-size: calc(13 * var(--u)); color: var(--strong); filter: brightness(0.8); }
.ba-tile.ba-fresh::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 calc(3 * var(--u)) #fff inset; animation: fresh 1.6s var(--ease-out) forwards; pointer-events: none; }
@keyframes fresh { from { opacity: 1; } to { opacity: 0; } }
.ba-feed { --soft: var(--feed-soft); --mid: var(--feed-mid); --strong: var(--feed); --deep: var(--feed-deep); }
.ba-diaper { --soft: var(--diaper-soft); --mid: var(--diaper-mid); --strong: var(--diaper); --deep: var(--diaper-deep); }
.ba-sleep { --soft: var(--sleep-soft); --mid: var(--sleep-mid); --strong: var(--sleep); --deep: var(--sleep-deep); }
.ba-growth { --soft: var(--growth-soft); --mid: var(--growth-mid); --strong: var(--growth); --deep: var(--growth-deep); }
.ba-med { --soft: var(--med-soft); --mid: var(--med-mid); --strong: var(--med); --deep: var(--med-deep); }
.ba-care { --soft: var(--care-soft); --mid: var(--care-mid); --strong: var(--care); --deep: var(--care-deep); }

/* A sheet that grows out of the tile that was tapped. */
.ba-sheet { position: absolute; z-index: 20; inset: 0; border-radius: calc(44 * var(--u, 1px)); background: linear-gradient(170deg, var(--soft), #fff 70%); display: flex; flex-direction: column; padding: calc(70 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u)); transform-origin: 0 0; visibility: hidden; }
.ba-sheet.ba-open { visibility: visible; }
.ba-sheet h4 { margin: 0; font-size: calc(26 * var(--u)); font-weight: 800; }
.ba-sheet .ba-close { position: absolute; top: calc(62 * var(--u)); inset-inline-start: calc(18 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.8); display: grid; place-items: center; font-size: calc(22 * var(--u)); color: var(--text-2); }
.ba-sheet .ba-body { flex: 1; display: grid; align-content: center; justify-items: center; gap: calc(20 * var(--u)); }
.ba-sheet .ba-fade { opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity 0.25s ease-out, transform 0.35s var(--ease-out); }
.ba-sheet.ba-ready .ba-fade { opacity: 1; transform: none; }
.ba-sides { display: flex; gap: calc(16 * var(--u)); }
.ba-side { width: calc(140 * var(--u)); height: calc(140 * var(--u)); border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 calc(4 * var(--u)) var(--mid) inset; transition: transform 0.4s var(--spring), box-shadow 0.3s, background 0.3s; }
.ba-side b { font-size: calc(20 * var(--u)); color: var(--deep); }
.ba-side span { font-size: calc(26 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: calc(4 * var(--u)); }
.ba-side:active { transform: scale(0.94); transition-duration: 0.1s; }
.ba-side.ba-on { background: var(--strong); box-shadow: 0 0 0 calc(4 * var(--u)) var(--strong) inset, 0 0 0 calc(10 * var(--u)) var(--mid); color: #fff; }
.ba-side.ba-on b { color: #fff; }
.ba-chips { display: grid; gap: calc(12 * var(--u)); width: 100%; }
.ba-chip { height: calc(64 * var(--u)); border-radius: calc(20 * var(--u)); background: #fff; font-size: calc(19 * var(--u)); font-weight: 700; box-shadow: 0 0 0 calc(2 * var(--u)) var(--mid) inset; transition: transform 0.4s var(--spring), background 0.2s; }
.ba-chip:active { transform: scale(0.96); transition-duration: 0.1s; }
.ba-save { height: calc(60 * var(--u)); width: 100%; border-radius: 999px; background: var(--strong); color: #fff; font-size: calc(18 * var(--u)); font-weight: 700; transition: transform 0.4s var(--spring), opacity 0.2s; }
.ba-save:active { transform: scale(0.97); transition-duration: 0.1s; }
.ba-save[disabled] { opacity: 0.35; }
.ba-stepper { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.ba-stepper button { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: #fff; font-size: calc(30 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) var(--mid) inset; color: var(--deep); transition: transform 0.4s var(--spring); }
.ba-stepper button:active { transform: scale(0.9); transition-duration: 0.1s; }
.ba-stepper output { font-size: calc(44 * var(--u)); font-weight: 800; min-width: 3.2ch; text-align: center; }

.ba-toast { position: absolute; z-index: 30; inset-inline: calc(16 * var(--u)); bottom: calc(22 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u)); background: rgba(28, 22, 30, 0.92); color: #fff; font-size: calc(14 * var(--u)); display: flex; gap: calc(10 * var(--u)); align-items: center; transform: translateY(140%); transition: transform 0.5s var(--ease-out); }
.ba-toast.ba-show { transform: none; }
.ba-toast svg { width: calc(22 * var(--u)); flex: none; fill: var(--bunny); }

@media (prefers-reduced-motion: reduce) {
  .ba-tile, .ba-side, .ba-chip, .ba-save, .ba-stepper button, .ba-toast, .ba-sheet .ba-fade { transition: none; }
  .ba-tile.ba-fresh::after { animation: none; }
}