.date-section { background: var(--color-paper, #fffdf9); text-align: center; }
.date-form, .date-results { max-width: 760px; margin: 28px auto; }
.date-form fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.date-form legend { width: 100%; margin-bottom: 18px; font-date: 600; }
.date-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.date-choice { display: flex; align-items: center; gap: 10px; padding: 17px 20px; border: 1px solid var(--color-line, #ddd); border-radius: 18px; cursor: pointer; background: var(--color-cream, #fbf7f1); }
.date-choice:has(input:checked) { border-color: var(--color-sage-dark, #667664); background: #eaf0e6; }
.date-choice:focus-within { outline: 2px solid var(--color-sage-dark, #667664); outline-offset: 3px; }
.date-choice input { accent-color: var(--color-sage-dark, #667664); width: 18px; height: 18px; flex-shrink: 0; }
.date-form fieldset:disabled .date-choice { cursor: default; opacity: .7; }
.date-section button:disabled { opacity: .65; cursor: default; }
.date-message { min-height: 1.5em; margin: 18px auto; max-width: 700px; }
.date-results { text-align: left; }
.date-results h3 { text-align: center; margin-bottom: 24px; }
.date-row { margin: 16px 0; }
.date-row-label { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.date-bar { height: 10px; background: var(--color-cream, #fbf7f1); border-radius: 10px; overflow: hidden; }
.date-bar span { display: block; height: 100%; background: var(--color-sage-dark, #667664); border-radius: inherit; }
.date-total { text-align: center; }
.date-refresh { background: none; border: 0; font: inherit; color: var(--color-sage-dark, #667664); cursor: pointer; padding: 12px; text-decoration: underline; }
@media (max-width: 520px) { .date-choice { width: 100%; } .date-form .button { width: 100%; } }

.date-due { display: inline-block; padding: 12px 22px; border-radius: 24px; background: #eaf0e6; color: #3f443e; }
.date-form label { display: block; margin-bottom: 10px; }
.date-form input[type="date"] { display: block; box-sizing: border-box; width: 100%; max-width: 320px; min-height: 52px; margin: auto; padding: 12px 16px; font: inherit; color: var(--color-ink, #3f443e); background: var(--color-cream, #fbf7f1); border: 1px solid var(--color-sage-dark, #667664); border-radius: 12px; }
.date-form input:focus-visible { outline: 2px solid #667664; outline-offset: 3px; }
.date-form input:disabled { opacity: .7; }
.date-rows { max-height: 480px; overflow-y: auto; padding: 0 8px; }