/* Geschiedenis (ADR 0029): the house history per day, a room's "Vandaag" on Licht, the thermostat chart on Energie.
   Zondag tokens only (app.css). The cause's dot says how it happened: ink = by hand, sky = by itself, coral = extern. */

/* Thuis: the fifth "In huis" card spans both columns, lower */
.shortcut.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 5.5rem; }
.shortcut.wide svg { flex: none; }

/* the dots (filters, causes) */
.dot { display: inline-block; width: 0.625rem; height: 0.625rem; flex: none; border-radius: 50%; background: var(--muted); }
.dot.manual { background: var(--accent); }
.dot.auto { background: var(--lucht); box-shadow: inset 0 0 0 2px var(--muted); }
.dot.extern { background: var(--koraal); }
.dot.device { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.dot.room { background: var(--c); }

/* ‹ vandaag › */
.day-nav { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.day-step { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text);
    font-size: 1.5rem; font-weight: 700; line-height: 1; }
.day-step:disabled { opacity: 0.35; }
.day-name { flex: 1; display: grid; text-align: center; }
.day-name strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; }
.day-name small { color: var(--muted); font-size: var(--t-s); }

/* the day in numbers */
.day-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-xl); background: var(--surface); }
.day-summary .sum { display: grid; gap: 0.1rem; padding: var(--s-2) var(--s-3); border-radius: var(--r-l); background: var(--bg); }
.day-summary .sum strong { font-family: var(--display); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.day-summary .sum span { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--muted); font-size: var(--t-xs); }
.day-summary .sum span::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.day-summary .sum.auto span::before { background: var(--lucht); box-shadow: inset 0 0 0 1.5px var(--muted); }
.day-summary .sum.extern span::before { background: var(--koraal); }
.day-summary .busiest { grid-column: 1 / -1; margin: var(--s-1) var(--s-1) 0; color: var(--muted); font-size: var(--t-s); }
.day-summary .busiest strong { color: var(--text); }

/* chips: one line each, scroll sideways (a day can have many rooms) */
.history-filters { display: grid; gap: var(--s-2); margin: var(--s-4) calc(-1 * var(--s-4)) 0; }
.chip-row { display: flex; gap: var(--s-2); overflow-x: auto; padding: 0 var(--s-4); scrollbar-width: none; overscroll-behavior-x: contain; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { flex: none; min-height: 2.5rem; padding: 0 var(--s-3); font-size: var(--t-s); }
.chip-row .chip.sel .dot.room { box-shadow: 0 0 0 2px var(--bg); }

/* the timeline: an hour, then its moments */
.timeline { margin-top: var(--s-2); }
.timeline .hour h2 { position: sticky; top: 0; z-index: 1; margin: var(--s-5) 0 var(--s-2); padding: var(--s-1) 0; background: var(--bg);
    font-variant-numeric: tabular-nums; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.moment { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-2); align-items: baseline; padding: var(--s-2) var(--s-3);
    border-radius: var(--r-m); background: var(--surface); box-shadow: inset 4px 0 0 var(--c, transparent); }
.moment time { color: var(--muted); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.moment .what { display: grid; gap: 0.1rem; min-width: 0; }
.moment .what strong { font-weight: 600; overflow-wrap: anywhere; }
.moment .what small, .room-today small { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-s); overflow-wrap: anywhere; }
.moment time:has(+ .what) { white-space: nowrap; }
.moment.arriving { animation: fade-up var(--dur-m) var(--ease-spring) both; }
.history-more { margin-top: var(--s-4); }
@media (prefers-reduced-motion: reduce) { .moment.arriving { animation-name: fade-in; } }

/* Licht: a room's sheet, "Vandaag" */
.room-today { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.room-today li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-2); align-items: baseline; padding: var(--s-2) var(--s-3);
    border-radius: var(--r-m); background: var(--bg); }
.room-today time { color: var(--muted); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.room-today .what { display: grid; gap: 0.1rem; min-width: 0; }
.room-today-more { margin-top: var(--s-1); }

/* Energie: the thermostat's chart */
.thermostat-history { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3);
    border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font-weight: 600; font-size: var(--t-s); }
.thermostat-history svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.thermostat-history[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.climate-chart { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-l); background: var(--surface); color: var(--text); }
.climate-chart figure { margin: 0; }
.segments.small { margin: 0; }
.segments.small a { min-height: 2.25rem; padding: 0 var(--s-3); font-size: var(--t-s); }
.chart-area { position: relative; }
.climate-chart svg { display: block; width: 100%; height: 9rem; overflow: visible; }
.climate-chart path, .climate-chart line { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.climate-chart .room { stroke: var(--text); stroke-width: 2.5; }
.climate-chart .floor { stroke: var(--accent); stroke-width: 2.5; }
.climate-chart .target { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.climate-chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.climate-chart rect.heating { fill: var(--koraal); opacity: 0.45; }
.y-label { position: absolute; left: 0; padding: 0 var(--s-1); border-radius: var(--r-s); background: var(--surface); color: var(--muted);
    font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.y-label.top { top: 0; }
.y-label.bottom { bottom: 0; }
.chart-ticks { position: relative; height: 1.25rem; margin-top: var(--s-1); color: var(--muted); font-size: var(--t-xs); }
.chart-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); color: var(--muted); font-size: var(--t-xs); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.chart-legend .key { display: inline-block; width: 1rem; height: 0.25rem; border-radius: 2px; background: var(--text); }
.chart-legend .key.floor { background: var(--accent); }
.chart-legend .key.target { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.chart-legend .key.heating { height: 0.75rem; background: var(--koraal); opacity: 0.7; }