/* Sleep cycle calculator - mode toggle + time input, then a row of suggested-time cards.
   Reuses base .field and .seg; colors from theme tokens only. */

.sleep-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.sleep-mode { flex-basis: 100%; }
.sleep-field { display: flex; flex-direction: column; gap: 8px; }
.sleep-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.sleep-field .field { width: 9rem; font-variant-numeric: tabular-nums; }
.sleep-now { white-space: nowrap; }

.sleep-results-label { font-size: 15px; color: var(--muted); font-weight: 600; margin: 0 0 12px; min-height: 1.2em; }
.sleep-results { display: flex; flex-wrap: wrap; gap: 12px; }

.sleep-opt {
    display: flex; flex-direction: column; gap: 4px; min-width: 8rem; flex: 1;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 18px;
}
.sleep-opt.is-good { border-color: var(--accent); background: var(--accent-weak); }
.sleep-opt-time { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sleep-opt.is-good .sleep-opt-time { color: var(--accent-strong); }
.sleep-opt-meta { font-size: 13px; color: var(--muted); }