/* The calendar shell, support controls and answer cues are shared with Read the Date. */
.months-panel{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(180px,1fr);align-items:stretch;gap:28px;padding:32px;border:1.5px solid var(--line);border-radius:20px;background:white}
.year-calendar{min-width:0}.year-calendar h2{text-align:center;font-size:clamp(44px,4.4vw,72px);line-height:1.1;font-weight:950;margin:0 0 24px}
.year-caption{display:none;text-align:center;font-size:22px;font-weight:850;margin:0 0 18px}
.month-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.month-card{min-width:0;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 4px;border:3px solid var(--line);border-radius:16px;color:var(--navy);font:inherit;background:var(--pale);cursor:pointer}
.month-number{font-size:16px;font-weight:750}.month-name{font-size:clamp(20px,1.55vw,28px);font-weight:900;line-height:1.25;overflow-wrap:anywhere}.month-cue{min-height:24px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:16px;font-weight:850;line-height:1.25;padding:3px 8px;border-radius:8px}.month-cue .direction-arrow{width:20px;height:20px;flex-shrink:0}.past .direction-arrow{transform:rotate(180deg)}
.month-card.past{background:#f4effb;border-color:#b8a3d4}.past .month-cue{background:#e9def6;color:#503879}.month-card.future{background:#edf8f3;border-color:#8dbbad}.future .month-cue{background:#dcefe8;color:#1b5c49}
.month-card.this-month{border-color:var(--blue);background:#e5f2ff}.this-month .month-cue{background:var(--navy);color:white}.month-card.selected{outline:3px solid #76590b;outline-offset:3px}.month-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.month-summary{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:20px;border-left:1px solid var(--line);padding-left:24px;text-align:center}.month-summary>p{font-size:clamp(28px,2.6vw,46px);font-weight:950;line-height:1.15;margin:0;overflow-wrap:anywhere}
.month-practice #question{font-size:23px;font-weight:850;margin-top:16px}.month-practice .date-answers{margin-top:16px}.month-practice .date-answers button{flex-basis:100%;font-size:22px;padding:14px 8px}.month-practice .date-feedback{font-size:20px}
.month-detail{grid-column:1/-1;text-align:center;font-size:28px;font-weight:850;line-height:1.3;margin:8px 0 0}.month-detail,.month-practice .date-feedback{scroll-margin-bottom:110px}
@media(max-width:1399px){.months-panel{grid-template-columns:minmax(0,1fr);padding:24px 18px;gap:24px}.year-calendar h2{font-size:48px;margin-bottom:12px}.year-caption{display:block}.month-name{font-size:22px}.month-card{min-height:116px}.month-summary{border-left:0;border-top:1px solid var(--line);padding:20px 0 0;gap:12px}.month-summary>p{font-size:32px}.month-practice .date-answers{max-width:500px;margin:16px auto 0}.month-practice .date-answers button{flex-basis:160px}.month-detail{font-size:24px}}
@media(max-width:1000px){.month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.month-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.months-panel{padding:20px 16px;gap:20px}.year-calendar h2{font-size:42px;margin-bottom:18px}.month-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.month-card{min-height:108px;padding:8px 4px;gap:6px}.month-name{font-size:20px}.month-number{font-size:14px}.month-cue{font-size:14px;min-height:24px;padding-inline:6px}.month-summary>p{font-size:30px}.month-detail{font-size:22px}.month-practice #question{font-size:22px}.month-practice .date-answers button{font-size:20px}}
@media(max-width:360px){.month-name{font-size:17px}.month-card{min-height:102px}.month-cue{font-size:12px}}