[hidden] { display: none !important; }

.content { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }

input[type="date"] {
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 2px solid var(--border-input);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
}

input[type="date"]:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[data-theme="dark"] input[type="date"] { color-scheme: dark; }
.checkbox-group input { flex-shrink: 0; }
.checkbox-group label { line-height: 1.5; }
.field-help, .schedule-note p, .results-placeholder p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 8px 0 16px;
}
.storage-note { margin-bottom: 0; text-align: center; }
.schedule-confirmation {
    margin-top: 16px;
}
.schedule-confirmation h3 { font-size: 1.05rem; line-height: 1.4; }
.schedule-confirmation .checkbox-group label { align-items: flex-start; margin-bottom: 0; font-weight: 600; }
.schedule-confirmation input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-primary); }
.schedule-confirmation input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.schedule-confirmation .field-help:last-child { margin-bottom: 0; }
.secondary-actions { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0; }
.secondary-actions button {
    background: var(--surface-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 10px 14px;
    font: inherit;
    cursor: pointer;
}
.secondary-actions button:hover { background: var(--surface-hover); }
.results-placeholder { text-align: center; padding: 60px 25px; }
.calendar-symbol {
    display: inline-block;
    border: 2px solid var(--color-primary);
    border-top-width: 10px;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 24px;
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
}
#resultsContent { display: flex; flex-direction: column; gap: 20px; }
.paycheck-summary { background: var(--color-light-tint); border-color: var(--color-primary); }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 10px; }
.paycheck-summary h2 { font-size: 1.65rem; margin-bottom: 10px; }
.paycheck-summary > p { line-height: 1.6; }
.paycheck-summary .field-help { margin-bottom: 0; }
#rareYearNote { margin: 16px 0 0; }
.extra-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.extra-month { border-top: 4px solid var(--color-primary); }
.extra-month h3 { font-size: 2rem; color: var(--color-primary); margin-bottom: 6px; }
.extra-month > p { line-height: 1.5; }
.date-status { display: inline-block; margin-top: 12px; font-size: 0.8rem; color: var(--text-secondary); border: 1px solid var(--border-medium); border-radius: 20px; padding: 3px 10px; }
.month-dates { margin-top: 12px; font-size: 0.85rem; color: var(--text-secondary); }
.month-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calendar-month { background: var(--surface-elevated); border: 1px solid var(--border-medium); border-radius: 8px; padding: 14px; }
.calendar-month.has-extra { border-color: var(--color-primary); background: var(--color-light-tint); }
.calendar-month h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 1rem; }
.calendar-month h3 span { color: var(--text-secondary); font-size: 0.75rem; font-weight: 400; }
.calendar-month ul { list-style: none; }
.calendar-month li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0; font-size: 0.85rem; }
.extra-date { font-weight: 700; }
.extra-label { background: var(--alert-success-bg); color: var(--alert-success-text); border-radius: 4px; padding: 3px 6px; font-size: 0.75rem; }
.three-extra-year { border-left: 4px solid var(--color-primary); }
.three-extra-year-value { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.three-extra-year p { line-height: 1.6; }
.three-extra-dates { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.three-extra-dates li { background: var(--color-light-tint); border: 1px solid var(--border-medium); border-radius: 6px; padding: 10px 12px; font-size: 0.9rem; }
.three-extra-year .btn { width: auto; max-width: 100%; font-size: 0.95rem; padding: 12px 18px; }
.three-extra-year > .field-help:last-child { margin: 16px 0 0; }
.export-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.export-controls .form-group { flex: 1 1 220px; margin-bottom: 0; }
.export-controls .btn { flex: 1 1 220px; width: auto; font-size: 1rem; }
.calendar-export summary { cursor: pointer; color: var(--color-primary); font-weight: 600; padding: 8px 0; }
.calendar-export ul { padding-left: 22px; line-height: 1.6; }
.calendar-export li { margin: 10px 0; }
.calendar-export a { color: var(--color-primary); }
.calendar-export details .field-help { margin-bottom: 0; }
.content-section h2 { padding-right: 90px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1024px) {
    .content { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .month-grid { grid-template-columns: 1fr; }
    .paycheck-summary h2 { font-size: 1.4rem; }
    .content-section h2 { padding-right: 0; }
}