/* Larsen Family Dashboard — ambient wall display. Tone palettes are driven by . Silk-safe: grid/flex + custom properties only, no :has(), no container queries. */ :root { --ground: #101823; --panel: #1A2532; --panel-soft: #16202C; --line: #2C3A4A; --ink: #EDF2F7; --ink-soft: #93A5B8; --accent: #6FB3D9; --accent-deep: #2E5F7E; --good: #63C58A; --warn: #E0A94F; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } html[data-tone="busy"] { --ground: #171A10; --panel: #232819; --panel-soft: #1E2315; --line: #3B4228; --accent: #D9B54A; --accent-deep: #6E5A1E; } html[data-tone="hectic"] { --ground: #1D1210; --panel: #2B1C18; --panel-soft: #241713; --line: #4A2E26; --accent: #E8865C; --accent-deep: #8A3E24; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--ground); color: var(--ink); font-family: var(--font); overflow: hidden; transition: background 1.2s ease; -webkit-user-select: none; user-select: none; } .hidden { display: none !important; } .board { height: 100vh; display: flex; flex-direction: column; padding: 1.6vmin 2vmin; gap: 1.4vmin; } /* ── Header band ─────────────────────────────── */ .band { display: flex; align-items: center; gap: 2.5vmin; padding: 1vmin 1.5vmin; } .band-left { flex: 1 1 0; min-width: 0; } .greeting { margin: 0; font-size: 2.6vmin; color: var(--accent); font-weight: 600; letter-spacing: .02em; } .date { margin: .2vmin 0 0; font-size: 3.4vmin; font-weight: 700; } .band-clock { flex: 0 0 auto; display: flex; align-items: baseline; gap: .8vmin; } .clock { font-size: 9vmin; font-weight: 200; letter-spacing: .01em; font-variant-numeric: tabular-nums; line-height: 1; } .ampm { font-size: 3vmin; color: var(--ink-soft); font-weight: 600; } .band-weather { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .5vmin; } .weather-now { display: flex; align-items: center; gap: 1.2vmin; } .weather-icon { font-size: 5vmin; line-height: 1; } .weather-range b { font-size: 4.6vmin; font-weight: 700; } .weather-range .low { font-size: 3vmin; color: var(--ink-soft); margin-left: .8vmin; } .weather-condition { margin: 0; font-size: 2vmin; color: var(--ink-soft); text-transform: capitalize; } .weather-slices { display: flex; gap: 2vmin; } .slice { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.7vmin; color: var(--ink-soft); } .slice-label { font-size: 1.3vmin; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } /* ── Columns ─────────────────────────────────── */ .columns { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 5fr 4fr; gap: 1.4vmin; } .col { display: flex; flex-direction: column; gap: 1.4vmin; min-height: 0; overflow: hidden; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 1.6vmin; padding: 1.6vmin 2vmin; transition: background 1.2s ease, border-color 1.2s ease; } .card.accent { border-left: .6vmin solid var(--accent); } .card.subtle { background: var(--panel-soft); } .card h2 { margin: 0 0 1.2vmin; font-size: 1.7vmin; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: flex; align-items: baseline; justify-content: space-between; } .week-label { font-size: 1.4vmin; color: var(--ink-soft); letter-spacing: .05em; font-weight: 600; } /* schedule */ .schedule { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1vmin; } .schedule li { display: flex; align-items: baseline; gap: 1.5vmin; font-size: 2.6vmin; } .schedule .time { flex: 0 0 auto; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 2.2vmin; min-width: 9vmin; } .schedule .empty { color: var(--ink-soft); font-size: 2.2vmin; } /* bullet sections */ .bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9vmin; } .bullets li { font-size: 2.2vmin; line-height: 1.45; padding-left: 1.8vmin; position: relative; } .bullets li::before { content: ""; position: absolute; left: 0; top: .95vmin; width: .7vmin; height: .7vmin; border-radius: 50%; background: var(--accent); } /* ── Chores ──────────────────────────────────── */ .chores { display: flex; flex-direction: column; gap: 1.2vmin; } .chore { /* it's a