/* Living Countdown - a scene above four tiles. The scene keeps its own night
   palette in light and dark themes; the tiles follow the --e-* tokens. */
.lc-wrap { text-align: center; }
.lc-scene { display: block; width: 100%; height: 190px; border-radius: 12px; margin: 0 0 12px; background: #0c2621; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.lc-midnight .lc-scene { background: #04050b; }
.lc-label { margin: 0 0 10px; font-size: 1.1em; font-weight: 650; overflow-wrap: anywhere; }
.lc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lc-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 10px 4px; border: 1px solid var(--e-line); border-radius: 10px; background: var(--e-surface); min-width: 0;
    border-top: 3px solid #b5263b;
}
.lc-midnight .lc-tile { border-top-color: #8a94a6; }
.lc-num { font-size: 1.9em; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--e-ink); }
.lc-unit { font-size: .72em; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-3); }
.lc-done { margin: 4px 0; padding: 14px 12px; border-radius: 10px; background: var(--e-surface); font-size: 1.25em; font-weight: 700; }
.lc-note { margin: 10px 0 0; font-size: .82em; color: var(--e-ink-2); }
@media (max-width: 360px) {
    .lc-scene { height: 150px; }
    .lc-grid { gap: 5px; }
    .lc-num { font-size: 1.45em; }
    .lc-unit { font-size: .64em; letter-spacing: .02em; }
}
html[data-compact="1"] .lc-scene { height: 140px; }
html[data-compact="1"] .lc-tile { padding: 7px 2px; }