:root { color-scheme: light; --petrol: #176B73; --apricot: #F2A572; --cream: #FFF8F0; --slate: #26363D; }
* { box-sizing: border-box; }
html, body { overflow-x: clip; } body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: var(--cream); color: var(--slate); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.welcome { width: min(100% - 2rem, 38rem); padding: 3rem 2rem; text-align: center; }
.app-icon { display: block; width: 8rem; height: 8rem; margin: 0 auto 1.5rem; }
.eyebrow { margin: 0 0 .5rem; color: var(--petrol); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin:0; color:var(--petrol); font-size:clamp(2rem,5vw,2.65rem); line-height:1.15; letter-spacing:-.04em; }
h2 { margin:0 0 1rem; font-size:clamp(1.25rem,2.5vw,1.5rem); line-height:1.3; }
h3,.form-title { margin:0 0 .75rem; font-size:1.1rem; line-height:1.35; }
label { gap:.4rem; font-size:.95rem; line-height:1.35; }
.form-help,.muted { font-size:.92rem; line-height:1.5; }
.accordion-card { width:100%; max-width:100%; margin:1rem 0; overflow:hidden; background:#fff; border:1px solid #b7c7c8; border-radius:.75rem; }
.accordion-card > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.75rem; padding:.7rem .9rem; color:var(--petrol); background:#edf3f2; cursor:pointer; font-size:clamp(1.25rem,2.5vw,1.5rem); font-weight:750; line-height:1.3; list-style:none; }
.accordion-card > summary::-webkit-details-marker { display:none; }
.accordion-card > summary::after { width:.65rem; height:.65rem; margin-left:auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; content:""; transform:rotate(45deg) translateY(-.2rem); transition:transform .15s ease; }
.accordion-card[open] { border-color:var(--petrol); box-shadow:0 .2rem .7rem #26363d14; }
.accordion-card[open] > summary { background:#e4f0ef; border-bottom:1px solid #b7c7c8; }
.accordion-card[open] > summary::after { transform:rotate(225deg) translateY(-.2rem); }
.accordion-card > summary:hover { background:#dcebea; }
.accordion-card > summary:focus-visible { outline:3px solid var(--apricot); outline-offset:-3px; background:#dcebea; }
.accordion-card > summary + * { margin-top:1rem; }
@media (max-width:40rem){h1 { font-size:clamp(1.8rem,9vw,2.25rem); }.accordion-card { border-radius:.6rem; }.accordion-card > summary { min-height:2.75rem; padding:.7rem .8rem; font-size:1.2rem; }}
.intro { max-width: 31rem; margin: 1.25rem auto 0; font-size: 1.1rem; line-height: 1.55; }
.card { width: min(100% - 2rem, 42rem); margin: 2rem auto; padding: 2rem; background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 2rem #26363d20; }
h2, h3 { color: var(--petrol); } form { display: grid; gap: .8rem; } label { display: grid; gap: .25rem; font-weight: 600; } input, select, button { font: inherit; padding: .65rem; border-radius: .45rem; border: 1px solid #b7c7c8; } button { background: var(--petrol); color: white; border: 0; cursor: pointer; } .notice { padding: .8rem; background: #fff1e5; border-left: 4px solid var(--apricot); } header, .row { display:flex; gap: .75rem; justify-content:space-between; align-items:center; flex-wrap:wrap; } section { margin-top:2rem; padding-top:1rem; border-top:1px solid #d8e1e1; } .row { padding:.6rem 0; border-bottom:1px solid #e7eeee; }.row form { display:block; }
.filter { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items:end; }.filter a { align-self:end; }.journal-entry { margin:1rem 0; padding:1rem; border:1px solid #d8e1e1; border-radius:.6rem; }.journal-entry.special { border-left:5px solid var(--apricot); }.journal-entry h4 { margin:.5rem 0; }.journal-entry p { white-space:normal; line-height:1.45; }.badge,.tag { display:inline-block; margin:.2rem .25rem .2rem 0; padding:.18rem .45rem; border-radius:999px; font-size:.85rem; }.badge { background:#fff1e5; color:#8a4c24; }.tag { background:#e4f0ef; color:var(--petrol); }.muted { color:#62777a; }.chart-figure { margin:1.25rem 0; }.chart-figure figcaption { margin-bottom:.5rem; font-weight:700; color:var(--petrol); }.chart { display:block; width:100%; height:auto; overflow:visible; color:var(--petrol); background:#fbfdfd; border-radius:.5rem; }.chart polyline { stroke:var(--petrol); stroke-width:3; }.chart circle { fill:var(--apricot); }.chart-grid line { stroke:#d8e1e1; }.chart-axis,.chart-x-ticks line { stroke:#62777a; }.chart text { fill:var(--slate); font-size:12px; }.chart-unit { font-weight:700; }.chart-dots circle { stroke:white; stroke-width:2; }
.app-shell { max-width: 68rem; }.app-version { margin:-.75rem auto 1.5rem; color:#62777a; font-size:.8rem; text-align:center; }.app-header { display:flex; align-items:center; gap:1rem; justify-content:flex-end; }.app-header .brand { margin-right:auto; color:var(--petrol); font-size:1.5rem; font-weight:800; text-decoration:none; }.app-header form,.entry-actions form { display:block; }.quiet { padding:.45rem .65rem; background:#e4f0ef; color:var(--petrol); }.family-context { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.child-picker { display:flex; gap:.4rem; flex-wrap:wrap; }.chip,.area-nav a,.button-link { display:inline-block; padding:.55rem .7rem; border-radius:.5rem; color:var(--petrol); text-decoration:none; background:#e4f0ef; font-weight:700; }.chip.selected,.area-nav a.active,.button-link { background:var(--petrol); color:white; }.area-nav { display:flex; gap:.5rem; margin:1.25rem 0; padding:.35rem; background:#edf3f2; border-radius:.75rem; }.area-nav a { flex:1; text-align:center; }.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }.summary { display:grid; gap:.2rem; padding:1rem; border-radius:.75rem; background:#edf3f2; }.summary strong { font-size:1.4rem; color:var(--petrol); }.quick-actions,.entry-actions { display:flex; gap:.5rem; flex-wrap:wrap; }.quick-actions { margin-top:1rem; }.entry-row { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start; padding:1rem 0; border-bottom:1px solid #e7eeee; }.entry-row strong,.entry-row small { display:block; }.entry-row span { display:block; margin-top:.2rem; }.quiet-link { background:#e4f0ef; color:var(--petrol); }.danger { background:#9b3c35; }.compact-edit { grid-column:1/-1; padding:1rem; background:#fff8f0; border-radius:.6rem; }.subsection { border-top:1px solid #d8e1e1; margin-top:2rem; }.subsection:first-of-type { border-top:0; }
.sleep-action { display:block; }.sleep-primary { width:100%; min-height:3.5rem; font-size:1.15rem; font-weight:800; background:var(--petrol); }.sleep-status { margin-top:1rem; }
@media (max-width: 40rem) { body { display:block; } .card { width:100%; margin:0; min-height:100svh; padding:1rem 1rem calc(4.5rem + env(safe-area-inset-bottom)); border-radius:0; } .app-shell { padding-bottom:calc(13.5rem + env(safe-area-inset-bottom)); } .app-version { position:fixed; z-index:11; left:max(.75rem, env(safe-area-inset-left)); right:max(.75rem, env(safe-area-inset-right)); bottom:max(.4rem, env(safe-area-inset-bottom)); margin:0; padding:.2rem .5rem; pointer-events:none; }.app-shell ~ .app-version { bottom:calc(5.5rem + env(safe-area-inset-bottom)); } section { overflow-x:clip; } .chart { max-width:100%; } .chart text { font-size:14px; } .app-header { font-size:.9rem; }.app-header > span { display:none; }.family-context { display:block; }.child-picker { margin-top:.7rem; }.summary-grid { grid-template-columns:1fr; }.entry-row { grid-template-columns:1fr; gap:.6rem; }.area-nav { position:fixed; z-index:10; left:0; right:0; bottom:0; margin:0; padding:.45rem .25rem max(.45rem, env(safe-area-inset-bottom)); border-radius:0; box-shadow:0 -2px 12px #26363d24; gap:.15rem; }.area-nav a { padding:.55rem .15rem; border-radius:.35rem; font-size:.72rem; }.quick-actions { display:grid; grid-template-columns:1fr; } }
@media (min-width: 40.001rem) { .app-shell { padding-bottom:4rem; } .app-version { position:fixed; z-index:11; left:1rem; right:1rem; bottom:.4rem; margin:0; padding:.2rem .5rem; pointer-events:none; } }
.password-input { position:relative; display:block; }.password-input input { width:100%; min-height:3.25rem; padding-right:5.5rem; }.password-toggle { position:absolute; z-index:1; top:50%; right:2.4rem; display:grid; place-items:center; width:2.75rem; min-width:2.75rem; height:2.75rem; padding:.45rem; transform:translateY(-50%); background:transparent; color:var(--petrol); border:0; }.password-toggle:hover,.password-toggle:focus-visible { background:#e4f0ef; outline:2px solid var(--petrol); outline-offset:1px; }.password-toggle svg { width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.account-link { text-decoration:none; font-weight:700; }.account-memberships { display:grid; gap:.75rem; }.account-memberships div { display:grid; gap:.2rem; padding:.8rem; background:#edf3f2; border-radius:.6rem; }.account-memberships span { color:#62777a; }
.account-nav { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }.account-nav a { padding:.55rem .7rem; border-radius:.5rem; color:var(--petrol); text-decoration:none; background:#e4f0ef; font-weight:700; }.account-nav a.active { background:var(--petrol); color:white; }.account-view > .family-context,.account-view > .area-nav { display:none; }.area-nav ~ .family-context,.area-nav ~ .family-context + .area-nav { display:none; }
.action-area { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.2rem; }.action-area > form { display:block; }.action-area > button,.action-area > .button-link,.action-area > form > button { flex:0 0 auto; min-height:2.75rem; }.action-secondary { background:#fff; color:var(--petrol); border:1px solid var(--petrol); }.action-danger { margin-left:.75rem; }.danger-zone,.danger-zone .danger { margin-top:.75rem; }.option-row,label:has(input[type="checkbox"]) { display:flex; align-items:center; gap:.6rem; font-weight:600; cursor:pointer; }.option-row input[type="checkbox"],label:has(input[type="checkbox"]) input[type="checkbox"] { width:1.15rem; height:1.15rem; margin:0; flex:0 0 auto; }.journal-body,textarea[name="body"] { min-height:5.5rem; resize:vertical; }.action-area form { min-width:min(100%,16rem); }#family-export > form { margin-bottom:.75rem; }#family-export > form:has(input[value="export-request"]) button,.admin-action-secondary,button[name="action"][value="account-lock"],button[name="action"][value="password-reset"] { background:#fff; color:var(--petrol); border:1px solid var(--petrol); }button[name="action"][value$="-purge"],button[name="action"][value="entry-delete"] { background:#9b3c35; color:#fff; }form:has(button[name="action"][value="account-lock"]) { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }form:has(button[name="action"][value="account-lock"]) > button { min-height:2.75rem; }button[name="action"][value="manager-set"] { background:var(--petrol); color:#fff; }form > button + button { margin-top:.75rem; }@media (max-width:40rem){.action-area,form:has(button[name="action"][value="account-lock"]) { display:grid; grid-template-columns:1fr; }.action-area > button,.action-area > .button-link,.action-area > form > button,form:has(button[name="action"][value="account-lock"]) > button { width:100%; }.action-danger { margin:.75rem 0 0; }}