/* Countdown timer - four tiles. */
.cd-wrap { text-align: center; }
.cd-label { margin: 0 0 10px; font-size: 1.1em; font-weight: 650; overflow-wrap: anywhere; }
.cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cd-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 12px 4px; border: 1px solid var(--e-line); border-radius: 10px; background: var(--e-surface); min-width: 0;
    border-top: 3px solid var(--e-accent);
}
.cd-num { font-size: 2em; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--e-ink); overflow-wrap: anywhere; }
.cd-unit { font-size: .74em; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-3); }
.cd-done { margin: 6px 0; padding: 14px 12px; border-radius: 10px; background: var(--e-surface); font-size: 1.15em; font-weight: 650; }
.cd-when { margin: 10px 0 0; font-size: .82em; color: var(--e-ink-2); display: flex; flex-direction: column; gap: 2px; }
.cd-when-2 { color: var(--e-ink-3); }
@media (max-width: 360px) {
    .cd-grid { gap: 5px; }
    .cd-num { font-size: 1.5em; }
    .cd-unit { font-size: .66em; letter-spacing: .02em; }
}
html[data-compact="1"] .cd-tile { padding: 8px 2px; }
html[data-compact="1"] .cd-num { font-size: 1.55em; }