.brand-mark{display:block;width:62px;height:62px;flex:none;border-radius:17px}.clock strong{font-size:clamp(54px,5.1vw,74px);letter-spacing:-2px;line-height:1}.clock small{display:block;margin-top:6px}header{min-height:80px}.reference .section-top,.weather .section-top{gap:3px}.mini{font-size:11px;min-height:30px;padding:4px 7px;background:var(--paper);white-space:nowrap}.context p{margin-top:3px}.reference-track{height:5px;border-radius:10px;background:var(--green);margin:6px 0 7px;overflow:hidden}.reference-track span{height:100%;display:block;width:0;background:var(--accent);border-radius:inherit}.reference strong{font-variant-numeric:tabular-nums}.context #referenceStageNote{color:var(--warn)}.hero[data-phase="near"],.hero[data-phase="due"]{box-shadow:inset 0 0 0 2px var(--orange)}.hero[data-phase="feeding"]{background:var(--green)}.hero[data-phase="feeding"] .countdown{color:var(--accent)}.weather #weatherTemperature{font-variant-numeric:tabular-nums}#referenceDialog{max-width:540px}#referenceDialog p{font-size:13px;line-height:1.65}#referenceDialog .quiet{font-size:11px}#confirmReferenceStage{margin-top:10px;border:1px solid var(--line)}#refreshHint{margin-top:9px;font-size:11px}.night .brand-mark{opacity:.88}.night .reference-track{background:var(--bg)}
@media(min-width:801px) and (max-height:900px){.shell{gap:9px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(9px + env(safe-area-inset-bottom))}header{min-height:70px}.brand-mark{width:56px;height:56px}.clock strong{font-size:58px}.card{padding:16px}.home-grid{gap:12px}.countdown{font-size:76px;margin-top:4px;line-height:1.13}.hero>p{margin:4px 0 8px}.hero .quiet{margin:9px 0 0}.progress{margin:10px 0 12px}.last-feed strong{font-size:29px;line-height:1.35}.summary{min-height:260px}.metrics{margin:14px 0 10px}.metrics strong{font-size:40px}.breakdown{margin-bottom:10px}.records{max-height:151px}.record{min-height:36px}.support-grid{gap:12px}.context{padding:12px 16px}.context strong{font-size:28px;line-height:1.25;margin-top:4px}.context h2{font-size:12px}.context p{font-size:11px;line-height:1.35}.dock button{min-height:59px;font-size:24px}.anomaly{padding:7px 11px;font-size:11px}.message{font-size:11px;min-height:16px}footer{gap:7px}footer button{padding:5px 7px}}
@media(max-width:800px){header{flex-wrap:wrap;gap:12px}.clock strong{font-size:49px}.brand-mark{width:49px;height:49px}.brand h1{font-size:23px}.context{padding:16px}.context strong{font-size:30px}.context p{font-size:12px}header nav{order:3;width:100%;justify-content:center;margin:0}.clock{margin-left:auto}.support-grid{grid-template-columns:1fr}.weather .mini,.reference .mini{font-size:12px}}
.shell{height:auto;min-height:100dvh}.home-grid{grid-template-rows:auto auto auto}.hero{overflow:visible}.summary{min-height:0}.summary .records{flex:none;max-height:140px}.clock{display:block}
@media(min-width:801px) and (max-height:820px){.clock strong{font-size:54px}header{min-height:68px}.countdown{font-size:62px}.hero .quiet{font-size:9px;margin-top:6px}.last-feed strong{font-size:25px}.hero>p{font-size:11px}.progress{margin:8px 0 9px}.summary .records{max-height:115px}.metrics strong{font-size:33px}.metrics{margin:10px 0 8px}.context{padding:10px 14px}.context p{font-size:10px}.context strong{font-size:26px}.mini{min-height:25px;font-size:10px}.dock button{min-height:55px}.demo-note{font-size:11px}.message{font-size:10px}}
@media(min-width:801px) and (max-height:820px){.shell{gap:7px}.clock small{font-size:10px;line-height:1.2;margin-top:3px}}
/* Leave room for the footer on older iPad landscape viewports. */
.shell{gap:7px}.clock small{margin-top:3px;line-height:1.25}