/* Sleep log: a night sky. Deep indigo throughout, nights drawn as moonlit bars on a timeline from 8 p.m. to noon. */
:root { --page: #11132a; --card: #1a1d3a; --ink: #eceefc; --soft: #a7abd0; --line: #2d3160; --field: #0d0f22; --act: #f4d58d; --on-act: #2a2105; --stop: #ff8a80; --moon: #b9c3ff; color-scheme: dark; }
a { color: var(--act); }
#night > button { justify-self: start; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .stats dt { color: var(--soft); font-size: 14px; } .stats dd { margin: 0; font-size: 22px; font-weight: 800; }
.nights { display: grid; gap: 6px; }
.nights .n { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; color: var(--soft); }
.nights .track { position: relative; height: 16px; background: var(--field); border-radius: 8px; }
.nights .track i { position: absolute; top: 0; bottom: 0; background: var(--moon); border-radius: 8px; opacity: calc(.4 + var(--q) * .12); }