/* Sleepy Feedy
   Made for one thumb at 3 a.m.: big targets, the answers on top, colour only on the three kinds of thing. */

:root {
    color-scheme: light;
    --ground: #f4f1ec;
    --surface: #ffffff;
    --raised: #ebe7e0;
    --ink: #1c1b19;
    --soft: #6b6862;
    --line: #dfdad2;

    /* One hue per kind of thing, used on its data */
    --feed: #c2553a;
    --feed-tint: #f6e4dd;
    --sleep: #3d5a88;
    --sleep-tint: #e1e7f1;
    --diaper: #6c8a2e;
    --diaper-tint: #e7eed9;
    --poop: #8a6a2e;

    --danger: #b3261e;
    --radius: 14px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ground: #14161a;
    --surface: #1c1f24;
    --raised: #262a31;
    --ink: #e8e5df;
    --soft: #979ca4;
    --line: #2d3138;

    --feed: #e08a6f;
    --feed-tint: #3a2620;
    --sleep: #8fa8d6;
    --sleep-tint: #212c3f;
    --diaper: #a3c26a;
    --diaper-tint: #27301b;
    --poop: #c9a465;
    --danger: #f2827a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }

/* Added to the home screen: no rubber-band bounce, no long-press callouts on buttons, and a strip
   behind the status bar so the clock stays readable while the page scrolls under it */
@media (display-mode: standalone) {
    html, body { overscroll-behavior: none; }
    button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--ground); z-index: 20; }
}

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    padding: env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }

:focus-visible { outline: 3px solid var(--sleep); outline-offset: 2px; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; color: var(--soft); margin-bottom: 10px; }

.app, .top, .signin { max-width: 560px; margin: 0 auto; }

/* Header */
.top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0 12px;
    padding: 16px 0 12px;
}

.top h1, .top-link, .sync { white-space: nowrap; }

.top-link { font-weight: 600; color: var(--sleep); text-underline-offset: 3px; padding: 8px 4px; }
#back-link { margin-right: auto; }
.top-share { background: none; border: 0; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.top-links { display: flex; gap: 6px; margin-left: auto; }
.top-links + .sync { flex-basis: 100%; margin-top: -2px; }

.sync { font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.sync.is-error { color: var(--danger); }

/* At a glance: three answers, big */
.glance {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 4px 16px;
    margin-bottom: 24px;
}

.glance-row {
    padding: 14px 0 14px 14px;
    border-left: 4px solid var(--line);
    margin: 10px 0;
}

.glance-row.feed { border-left-color: var(--feed); }
.glance-row.sleep { border-left-color: var(--sleep); }
.glance-row.diaper { border-left-color: var(--diaper); }

.g-label { font-size: 14px; color: var(--soft); }
.g-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.g-value.g-empty { color: var(--soft); }
.g-sub { font-size: 15px; color: var(--soft); margin-top: 2px; }
.g-sub strong { color: var(--ink); font-weight: 600; }

/* The three jobs */
.block { margin-bottom: 24px; }

.buttons { display: grid; gap: 10px; }
.buttons.one { grid-template-columns: 1fr; }
.buttons.two { grid-template-columns: 1fr 1fr; }
.buttons.three { grid-template-columns: repeat(3, 1fr); }

.big {
    min-height: 68px;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 18px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform 120ms ease, background-color 120ms ease;
}

.big:active { transform: scale(0.97); }
.big small { font-size: 12px; font-weight: 500; color: var(--feed); }

.feed-btn { background: var(--feed-tint); }
.feed-btn.is-last { box-shadow: inset 0 0 0 2px var(--feed); }
.sleep-btn { background: var(--sleep-tint); }
.diaper-btn { background: var(--diaper-tint); }
.diaper-btn[data-kind="poop"], .diaper-btn[data-kind="both"] { color: var(--ink); }

.big.stop { background: var(--ink); color: var(--ground); }
.big.secondary { background: var(--raised); }

@media (hover: hover) {
    .big:hover { filter: brightness(0.97); }
    :root[data-theme="dark"] .big:hover { filter: brightness(1.12); }
}

/* Weight: the latest figure and its change, with the one action beside it */
.weight {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 12px 12px 12px 16px;
}

.weight-btn { background: var(--raised); min-height: 56px; padding: 0 18px; font-size: 17px; }

.log-row.weight .log-what::before { background: var(--ink); }

.add-earlier { margin: -8px 0 28px; text-align: center; }

.link {
    background: none;
    border: 0;
    color: var(--sleep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 8px 4px;
}

/* The day ribbon */
.today {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
}

.today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.today-head h2 { margin: 0; color: var(--ink); font-size: 17px; }

.day-switch { display: flex; gap: 6px; }

.icon {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--raised);
    font-size: 24px;
    line-height: 1;
}

.icon:disabled { opacity: 0.35; cursor: default; }

.ribbon { display: grid; gap: 6px; }

.lane { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.lane-name { font-size: 12px; color: var(--soft); }

.track {
    position: relative;
    height: 22px;
    background: var(--raised);
    border-radius: 6px;
    overflow: hidden;
}

.bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; min-width: 3px; }
.bar.sleep { background: var(--sleep); }
.bar.feed { background: var(--feed); }
.bar.is-running { opacity: 0.6; }

.mark {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--diaper);
}

.mark.poop { background: var(--poop); }
.mark.both { background: var(--poop); box-shadow: 0 0 0 2px var(--diaper); }

.now-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.5; }

.ribbon-scale {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0 66px;
    font-size: 11px;
    color: var(--soft);
    font-variant-numeric: tabular-nums;
}

.totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.totals dt { font-size: 13px; color: var(--soft); }
.totals dd { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.totals dd.sub { font-size: 13px; font-weight: 500; color: var(--soft); }

/* The log */
.log-day { font-size: 14px; font-weight: 600; color: var(--soft); margin: 18px 0 6px; }
.log-list { list-style: none; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.log-list li + li { border-top: 1px solid var(--line); }

.log-row {
    width: 100%;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    border: 0;
    background: none;
    text-align: left;
}

.log-time { font-variant-numeric: tabular-nums; color: var(--soft); font-size: 15px; }
.log-what { min-width: 0; overflow-wrap: anywhere; position: relative; padding-left: 14px; }
.log-what::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.log-row.feed .log-what::before { background: var(--feed); }
.log-row.sleep .log-what::before { background: var(--sleep); }
.log-row.diaper .log-what::before { background: var(--diaper); }
.log-what small { display: block; color: var(--soft); font-size: 13px; }
.log-detail { font-variant-numeric: tabular-nums; color: var(--soft); font-size: 15px; white-space: nowrap; }
.log-detail.is-running { color: var(--feed); font-weight: 600; }

.empty { color: var(--soft); padding: 12px 0; }

.foot { text-align: center; margin-top: 32px; font-size: 15px; color: var(--soft); }
.foot a { color: var(--soft); padding: 8px 4px; }

/* Edit sheet */
.sheet {
    border: 0;
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    max-width: 560px;
    margin: auto auto 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height: 92vh;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sheet::backdrop { background: rgba(0, 0, 0, 0.45); }

.sheet form { display: grid; gap: 16px; }
.sheet h2 { font-size: 20px; color: var(--ink); margin: 0; }

fieldset { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset[hidden], .field[hidden] { display: none; }
legend { font-size: 14px; color: var(--soft); margin-bottom: 6px; width: 100%; }

fieldset label {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    background: var(--raised);
    font-weight: 600;
    cursor: pointer;
}

fieldset label:has(input:checked) { background: var(--ink); color: var(--ground); }
fieldset input { position: absolute; opacity: 0; pointer-events: none; }
fieldset label:has(input:focus-visible) { outline: 3px solid var(--sleep); outline-offset: 2px; }

.field { display: grid; gap: 6px; }
.field span { font-size: 14px; color: var(--soft); }
.field small { font-size: 13px; color: var(--soft); }

.field input {
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--ground);
    color: var(--ink);
    width: 100%;
}

.error { color: var(--danger); font-size: 15px; }

.sheet-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.spacer { flex: 1; }

.primary, .secondary, .danger {
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    font-weight: 600;
}

.primary { background: var(--ink); color: var(--ground); }
.secondary { background: var(--raised); }
.danger { background: none; color: var(--danger); padding: 0 8px; }

/* Toast with undo */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(528px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: var(--ink);
    color: var(--ground);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.toast[hidden] { display: none; }
.toast span { flex: 1; font-size: 15px; }
.toast .link { color: var(--ground); min-height: 44px; }

/* Sign in */
.signin { min-height: 80vh; display: grid; place-items: center; }

.signin-form {
    width: 100%;
    max-width: 340px;
    display: grid;
    gap: 12px;
}

.signin-form h1 { font-size: 28px; margin-bottom: 8px; }
.signin-form label { font-size: 15px; color: var(--soft); }

.signin-form input {
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    font-size: 18px;
}

.signin-form .primary { min-height: 52px; font-size: 17px; }

/* Reports: every chart is one kind of thing in its own hue, so colour never has to tell two apart */
.range { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.range button {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--raised);
    font-size: 15px;
    font-weight: 600;
}

.range button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

.range-note { font-size: 14px; color: var(--soft); margin: 10px 0 12px; }

.summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.summary dt { font-size: 13px; color: var(--soft); }
.summary dd { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -0.01em; }
.summary dd.sub { font-size: 13px; font-weight: 500; color: var(--soft); letter-spacing: 0; }

.chart {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 14px 16px 12px;
    margin-bottom: 10px;
}

.chart h3 { font-size: 14px; font-weight: 600; color: var(--soft); }

.readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-height: 30px; margin-bottom: 10px; }
.readout strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.readout span { font-size: 14px; color: var(--soft); }
.readout small { flex-basis: 100%; font-size: 14px; color: var(--soft); min-height: 20px; }

.plot-wrap { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 6px; }

.y-axis, .plot { position: relative; height: 120px; }
.y-axis span { position: absolute; right: 0; transform: translateY(50%); font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.plot { touch-action: pan-y; cursor: default; }
.plot:focus-visible { outline-offset: 4px; }

.grid-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }

.cols { position: absolute; inset: 0; display: grid; }
.col { position: relative; border-radius: 4px 4px 0 0; }
.col.is-pick { background: var(--raised); }

.b {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(22px, calc(100% - 2px));
    min-height: 2px;
    border-radius: 4px 4px 0 0;
}

.b.sleep { background: var(--sleep); }
.b.feed { background: var(--feed); }
.b.diaper { background: var(--diaper); }
.b.poop { background: var(--poop); }
.b.zero { background: var(--soft); height: 2px; border-radius: 0; }
.col.is-partial .b { opacity: 0.45; }

.x-axis { grid-column: 2; position: relative; display: grid; height: 18px; margin-top: 4px; font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; }
.x-axis span { justify-self: center; white-space: nowrap; }
.x-axis.free span { position: absolute; transform: translateX(-50%); }

.line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.line polyline { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }

.dot {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface);
}

.dot.is-pick { transform: scale(1.5); }

.days-wrap { background: var(--surface); border-radius: var(--radius); overflow-x: auto; }

.days { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.days th, .days td { padding: 10px 6px; text-align: right; white-space: nowrap; }
.days th:first-child, .days td:first-child { text-align: left; padding-left: 14px; }
.days th:last-child, .days td:last-child { padding-right: 14px; }
.days thead th { font-size: 12px; font-weight: 600; color: var(--soft); }
.days tbody th { font-weight: 600; }
.days tbody tr { border-top: 1px solid var(--line); }
.days .is-partial td, .days .is-partial th { color: var(--soft); }

.report-note { font-size: 14px; color: var(--soft); }

/* Landing: one action, one way back in, and what we keep */
[hidden] { display: none !important; }

.landing { max-width: 460px; margin: 0 auto; padding: max(48px, 10dvh) 0 40px; }
.landing-name { font-size: clamp(40px, 12vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.landing-lead { font-size: 20px; line-height: 1.35; margin: 14px 0 28px; text-wrap: pretty; }
.landing-start { width: 100%; min-height: 60px; font-size: 19px; border-radius: var(--radius); }
.landing-small { font-size: 14px; color: var(--soft); margin-top: 10px; text-align: center; }



/* The landing's demo loop: the app in miniature at 340 x 366, scaled to fit (promo.js) */
.promo { margin: 28px 0 32px; pointer-events: none; user-select: none; -webkit-user-select: none; }
.promo-stage {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--ground);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.08);
}
.promo-mini {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 456px;
    overflow: hidden;
    transform-origin: 0 0;
    font-size: 15px;
}
.promo-app, .promo-reports { position: absolute; inset: 0; padding: 12px 14px 14px; }
.promo-top { display: flex; align-items: baseline; justify-content: space-between; height: 26px; margin-bottom: 4px; }
.promo-top b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.promo-top span { font-size: 13px; font-weight: 600; color: var(--sleep); text-decoration: underline; text-underline-offset: 3px; padding: 2px 4px; border-radius: 6px; }
.promo-top span.is-pressed { background: var(--sleep-tint); }
.promo-totals { margin-top: 10px; gap: 4px; grid-template-columns: 1fr 1.5fr 0.8fr 0.8fr; }
.promo-totals dt { font-size: 11px; }
.promo-totals dd { font-size: 16px; white-space: nowrap; }
.promo-totals dd.sub { font-size: 11px; }
.promo-reports { background: var(--ground); display: flex; flex-direction: column; gap: 8px; visibility: hidden; }
.promo-rtitle { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; height: 24px; }
.promo-card { background: var(--surface); border-radius: 12px; padding: 9px 12px 10px; }
.promo-read { line-height: 1.2; }
.promo-read b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.promo-read small { font-size: 11px; color: var(--soft); }
.promo-sub { font-size: 11px; color: var(--soft); }
.promo-chart { margin-top: 4px; }
.promo-chart svg { display: block; }
.promo-chart .pg-grid { stroke: var(--line); stroke-width: 1; }
.promo-chart .pg-label { fill: var(--soft); font-size: 8.5px; text-anchor: end; font-variant-numeric: tabular-nums; }
.promo-chart polyline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
.promo-chart circle { fill: var(--ink); stroke: var(--surface); stroke-width: 1; }
.promo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.promo-tiles dt { font-size: 10.5px; color: var(--soft); }
.promo-tiles dd { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.promo-tiles dd.sub { font-size: 10px; font-weight: 500; color: var(--soft); }
.promo-plot { display: grid; grid-template-columns: 26px 1fr; gap: 4px; height: 70px; margin-top: 6px; }
.promo-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 8.5px; color: var(--soft); text-align: right; margin: -4px 0; }
.promo-cols { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; align-items: end; border-bottom: 1px solid var(--line); }
.promo-cols span { background: var(--sleep); border-radius: 2px 2px 0 0; }
.promo-cols span.is-part { opacity: 0.45; }
.promo-glance { background: var(--surface); border-radius: 12px; padding: 3px 12px; height: 90px; display: grid; gap: 3px; }
.promo-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    padding: 0 6px 0 10px;
    border-left: 3px solid var(--line);
    --flash: 0;
}
.promo-row::before { content: ""; position: absolute; inset: 0; border-radius: 0 6px 6px 0; opacity: var(--flash); }
.promo-row.feed { border-left-color: var(--feed); }
.promo-row.feed::before { background: var(--feed-tint); }
.promo-row.sleep { border-left-color: var(--sleep); }
.promo-row.sleep::before { background: var(--sleep-tint); }
.promo-row.diaper { border-left-color: var(--diaper); }
.promo-row.diaper::before { background: var(--diaper-tint); }
.promo-row .pl { position: relative; font-size: 13px; color: var(--soft); }
.promo-row .pv { position: relative; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.promo-buttons { display: grid; gap: 8px; margin-top: 14px; }
.promo-buttons .buttons { gap: 8px; }
.promo-buttons .big { min-height: 0; height: 44px; padding: 0 6px; font-size: 15px; border-radius: 11px; gap: 0; line-height: 1.1; white-space: nowrap; letter-spacing: -0.01em; }
.promo-buttons .buttons.two .big { font-size: 14px; }
.promo-buttons .big small { font-size: 9.5px; }
.promo-buttons .big.is-pressed { transform: scale(0.95); filter: brightness(0.92); }
.promo-ribbon { position: relative; margin-top: 14px; gap: 5px; }
.promo-ribbon .track { height: 16px; border-radius: 5px; }
.promo-ribbon .bar { top: 2px; bottom: 2px; border-radius: 3px; }
.promo-ribbon .mark { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.promo-now { pointer-events: none; }
.promo-scale { margin-top: 3px; font-size: 10px; }
.promo-finger {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 24%, transparent);
    border: 2px solid color-mix(in srgb, var(--surface) 85%, transparent);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
    --ripple: 1;
}
.promo-finger::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    opacity: calc(0.45 - var(--ripple) * 0.45);
    transform: scale(calc(1 + var(--ripple) * 1.1));
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes grow { from { width: 0; } }
@keyframes fade { from { opacity: 0; } }

.landing-points { list-style: none; display: grid; gap: 10px; margin: 0 0 32px; }
.landing-points li { background: var(--surface); border-radius: var(--radius); padding: 14px 16px 14px 30px; position: relative; color: var(--soft); text-wrap: pretty; }
.landing-points li::before { content: ""; position: absolute; left: 14px; top: 21px; width: 8px; height: 8px; border-radius: 50%; }
.landing-points li.feed::before { background: var(--feed); }
.landing-points li.sleep::before { background: var(--sleep); }
.landing-points li.diaper::before { background: var(--diaper); }
.landing-points strong { color: var(--ink); }

.landing-story { font-size: 17px; text-wrap: pretty; margin-bottom: 8px; }

.landing-note { font-size: 14px; color: var(--soft); text-wrap: pretty; }

.link.quiet { color: var(--soft); font-weight: 500; }

/* Share sheet */
.share-body { display: grid; gap: 8px; }
.share-body h2 { font-size: 20px; color: var(--ink); margin: 0 0 4px; }
.share-label { font-size: 13px; color: var(--soft); margin-top: 8px; }
.share-link { font-size: 15px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.share-copied { color: var(--diaper); font-weight: 600; }
.share-qr { width: min(200px, 60vw); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.share-qr svg { display: block; width: 100%; height: 100%; }

/* The playful dashboard (/test): a pocket pet on a little LCD */
:root {
    --lcd: #b8c49a;
    --lcd-ink: #29331f;
    --lcd-mid: #7b8a62;
    --lcd-light: #d5ddbd;
    --shell: #f2c9b8;
    --shell-edge: #e3ac96;
}

:root[data-theme="dark"] {
    --lcd: #9fae84;
    --shell: #4a3a44;
    --shell-edge: #3a2d35;
}

[data-mode="game"] .glance { display: none; }

.game { margin-bottom: 24px; }

.pet-shell {
    background: var(--shell);
    border-radius: 44% 44% 36% 36% / 30% 30% 24% 24%;
    padding: 36px 30px 30px;
    box-shadow: inset 0 -6px 0 var(--shell-edge);
}

.lcd {
    max-width: 320px;
    margin: 0 auto;
    background: var(--lcd);
    color: var(--lcd-ink);
    border-radius: 14px;
    padding: 10px 12px 12px;
    box-shadow: inset 0 0 0 3px var(--lcd-mid);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.lcd-top { display: flex; justify-content: space-between; font-size: 13px; }

.lcd-screen { position: relative; height: 150px; margin: 4px 0 8px; }
.lcd-stage { position: absolute; inset: 0; }

.pet { position: absolute; left: 50%; bottom: 6px; width: 112px; margin-left: -56px; }
.baby { display: block; width: 100%; height: auto; }
.pet.is-idle { animation: hop 1.2s steps(2) infinite; }
.pet.is-feeding { animation: hop 0.6s steps(2) infinite; }
.pet.is-fussy { animation: wobble 0.5s steps(2) infinite; }
.pet.is-sleeping { animation: breathe 3s steps(3) infinite; }

@keyframes hop { 50% { transform: translateY(-4px); } }
@keyframes wobble { 50% { transform: translateX(3px); } }
@keyframes breathe { 50% { transform: scaleY(0.97) translateY(2px); } }

.pile { position: absolute; right: 18%; bottom: 6px; width: 24px; }

.bubble {
    position: absolute;
    left: calc(50% + 50px);
    top: 8px;
    width: 40px;
    height: 34px;
    border: 3px solid var(--lcd-ink);
    border-radius: 10px;
    display: grid;
    place-items: center;
    animation: hop 0.8s steps(2) infinite;
}

.bubble-icon { width: 22px; }

.zzz { position: absolute; left: calc(50% + 40px); font-size: 18px; animation: drift 2.4s steps(4) infinite; }
.zzz.z1 { top: 40px; }
.zzz.z2 { top: 14px; font-size: 24px; animation-delay: 1.2s; }

@keyframes drift {
    0% { opacity: 0; transform: translate(0, 8px); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(10px, -10px); }
}

.star { position: absolute; width: 4px; height: 4px; background: var(--lcd-ink); animation: twinkle 2s steps(2) infinite; }
.star:nth-child(2n) { animation-delay: 1s; }
@keyframes twinkle { 50% { opacity: 0.25; } }

.lcd-fx { position: absolute; inset: 0; pointer-events: none; }

.pop {
    position: absolute;
    left: 50%;
    top: 30%;
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translateX(-50%);
    font-size: 16px;
    animation: pop 1.4s steps(6) forwards;
}

.pop-icon { width: 22px; }

@keyframes pop {
    0% { opacity: 0; transform: translate(-50%, 10px); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -40px); }
}

.lcd-meters { display: grid; gap: 6px; }
.meter { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 8px; font-size: 12px; }
.meter-icon { width: 16px; }
.cells { display: flex; gap: 3px; }
.cell { width: 14px; height: 12px; border: 2px solid var(--lcd-ink); }
.cell.is-on { background: var(--lcd-ink); }
.meter-name { justify-self: end; }

.lcd-status { margin-top: 10px; padding-top: 8px; border-top: 2px dashed var(--lcd-mid); text-align: center; font-size: 17px; min-height: 34px; }

.pet-notes { list-style: none; margin: 14px 4px 0; display: grid; gap: 4px; font-size: 15px; color: var(--soft); }
.pet-fine { margin: 8px 4px 0; font-size: 13px; color: var(--soft); }

/* The pixel world glows like a night light from 9 pm to 7 am */
.pet-shell[data-skin="night"] {
    --shell: #23263b; --shell-edge: #15172a;
    --lcd: #0e1122; --lcd-ink: #ffc46b; --lcd-mid: #b07a3c; --lcd-light: #3b2b19;
}
.pet-shell[data-skin="night"] .lcd svg { filter: drop-shadow(0 0 1.5px rgb(255 196 107 / 0.75)); }
.pet-shell[data-skin="night"] .lcd { text-shadow: 0 0 6px rgb(255 196 107 / 0.55); }
.pet-shell[data-skin="night"] .cell.is-on { box-shadow: 0 0 6px rgb(255 196 107 / 0.6); }
.pet.is-happy, .pet.is-okay { animation: hop 1.2s steps(2) infinite; }
.pet.is-joyful { animation: jump 0.5s ease-in-out 4; }
.lcd-screen { overflow: visible; }

/* The worlds share one frame; reactions float over it */
.world { position: relative; }
.world-fx { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 300px); pointer-events: none; }
.world:not([data-world="pixel"]) .pop { font-family: var(--font); letter-spacing: 0; }
.world:not([data-world="pixel"]) .pop b { font-weight: 700; color: var(--ink); background: var(--surface); padding: 2px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.12); }
.world-status { text-align: center; font-size: 20px; font-weight: 700; margin: 12px 0 10px; }
.world-status .clock { margin-left: 6px; color: var(--soft); font-variant-numeric: tabular-nums; }

.world-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
.world-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 14px;
}
.world-chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.world-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.world-dot[data-world="pixel"] { background: #b8c49a; border-radius: 3px; }
.world-dot[data-world="storybook"] { background: linear-gradient(#fff4e8, #fbc9b0); }
.world-dot[data-world="rings"] { background: conic-gradient(var(--feed) 0 33%, var(--sleep) 0 66%, var(--diaper) 0); }
.world-dot[data-world="sky"] { background: linear-gradient(#7cc3f2, #d4ecff); }

/* Storybook and sky: drawn scenes */
.story-scene, .sky-scene { display: block; width: 100%; height: auto; border-radius: 24px; }
.baby-body { transform-box: fill-box; transform-origin: 50% 100%; }
.baby-body.is-happy, .baby-body.is-okay { animation: sway 3.2s ease-in-out infinite; }
.baby-body.is-sleeping { animation: breathe-soft 4s ease-in-out infinite; }
.baby-body.is-feeding { animation: nod 1.2s ease-in-out infinite; }
.baby-body.is-fussy { animation: fuss 0.6s ease-in-out infinite; }
.baby-body.is-joyful { animation: jump 0.5s ease-in-out 4; }
@keyframes sway { 50% { transform: rotate(3deg); } }
@keyframes breathe-soft { 50% { transform: scale(1.02, 0.98); } }
@keyframes nod { 50% { transform: rotate(-4deg) translateY(2px); } }
@keyframes fuss { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.eye-open { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.mobile { transform-box: view-box; transform-origin: 110px 0; animation: mobile 6s ease-in-out infinite; }
@keyframes mobile { 50% { transform: rotate(5deg); } }
.twinkle { animation: twinkle 2.4s ease-in-out infinite; }
.think, .float-cloud { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.zzz-soft { animation: zfloat 3s ease-in-out infinite; }
.zzz-soft text { fill: #c9d6ff; font-family: var(--font); font-weight: 700; font-size: 16px; }
@keyframes zfloat { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -12px); } }
.drift { animation: drift-x 24s linear infinite alternate; }
.drift.slow { animation-duration: 36s; }
@keyframes drift-x { to { transform: translateX(40px); } }

.pills { display: grid; gap: 8px; }
.pill { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.pill-track { height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.pill-fill { display: block; height: 100%; border-radius: 999px; }
.pill.feed .pill-fill { background: var(--feed); }
.pill.sleep .pill-fill { background: var(--sleep); }
.pill.diaper .pill-fill { background: var(--diaper); }

/* Rings */
.rings-art { display: block; width: min(100%, 260px); height: auto; margin: 0 auto; }
.ring-track, .ring-fill { fill: none; stroke-width: 16; }
.ring-track { opacity: 0.16; }
.ring-fill { stroke-linecap: round; }
.ring-track.feed, .ring-fill.feed { stroke: var(--feed); }
.ring-track.sleep, .ring-fill.sleep { stroke: var(--sleep); }
.ring-track.diaper, .ring-fill.diaper { stroke: var(--diaper); }
.ring-list { list-style: none; display: grid; gap: 6px; background: var(--surface); border-radius: var(--radius); padding: 10px 14px; }
.ring-list li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 10px; font-size: 15px; }
.ring-key { width: 10px; height: 10px; border-radius: 50%; }
.ring-list .feed .ring-key { background: var(--feed); }
.ring-list .sleep .ring-key { background: var(--sleep); }
.ring-list .diaper .ring-key { background: var(--diaper); }
.ring-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.ring-since { color: var(--soft); font-size: 13px; min-width: 6.5em; text-align: right; }

/* What usually comes next */
.pet-next { margin: 14px 4px 0; }
.next-title { font-size: 13px; color: var(--soft); margin-bottom: 6px; }
.next-row { display: flex; flex-wrap: wrap; gap: 6px; }
.next-chip { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-variant-numeric: tabular-nums; }
.next-chip b { font-weight: 600; }
.next-chip.feed { background: var(--feed-tint); }
.next-chip.sleep { background: var(--sleep-tint); }
.next-chip.diaper { background: var(--diaper-tint); }

/* Reactions on the screen */
.pet.is-joyful { animation: jump 0.5s ease-in-out 4; }
@keyframes jump { 50% { transform: translateY(-14px); } }
.spark { position: absolute; left: 50%; top: 52%; width: 14px; margin-left: -7px; animation: spark 1s ease-out both; }
.spark-icon, .float-icon, .fly-icon, .moon-icon, .sun-icon { display: block; width: 100%; height: auto; }
@keyframes spark {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
.float { position: absolute; bottom: 30%; width: 16px; animation: float-up 1.8s ease-out both; }
@keyframes float-up {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(10px, -90px); }
}
.fly-away { position: absolute; left: calc(50% + 26px); bottom: 10px; width: 26px; animation: fly 1.3s cubic-bezier(0.3, 0.1, 0.6, 1) forwards; }
@keyframes fly {
    20% { transform: translate(-4px, -14px) rotate(-20deg); }
    100% { opacity: 0; transform: translate(110px, -170px) rotate(560deg) scale(0.4); }
}
.moon-rise { position: absolute; left: 12%; top: 8px; width: 30px; animation: rise-in 2.4s ease-out both; }
.sun-rise { position: absolute; right: 12%; top: 8px; width: 32px; animation: rise-in 2s ease-out both; }
@keyframes rise-in {
    0% { opacity: 0; transform: translateY(40px); }
    35% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Language switch on the landing page */
.lang-row { display: flex; justify-content: flex-end; margin: -28px 0 12px; }
.lang-row .link { font-size: 15px; padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
    .spark, .float, .fly-away, .moon-rise, .sun-rise { display: none; }
    .pet.is-joyful, .baby-body, .eye-open, .mobile, .twinkle, .think, .float-cloud, .zzz-soft, .drift { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .pet, .bubble, .zzz, .star, .pop { animation: none !important; }
    .zzz, .pop { opacity: 1; }
}

/* Before the script sets a theme (the sign-in page has none), follow the phone */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --ground: #14161a;
        --surface: #1c1f24;
        --raised: #262a31;
        --ink: #e8e5df;
        --soft: #979ca4;
        --line: #2d3138;
        --sleep: #8fa8d6;
        --danger: #f2827a;
    }
}

@media (prefers-reduced-motion: reduce) {
    .big { transition: none; }
    .big:active { transform: none; }
}