/* Date-specific presentation; navigation, columns and support use the shared shell. */
.date-learning{width:100%;max-width:none;margin:0}
.read-date-page{min-width:0}
.read-date-page .utility-nav img{width:34px;height:34px;filter:invert(28%) sepia(99%) saturate(3234%) hue-rotate(211deg) brightness(94%) contrast(113%)}
.date-title{min-width:0;flex:1}.date-title h1{font-size:clamp(28px,2.3vw,38px)}.date-title p{font-size:20px;margin:10px 0 0}
.date-learning .lesson-heading{flex-wrap:nowrap}.date-learning .mode-tabs{flex:0 0 330px}
.date-layout .guide-portrait{width:100%;height:330px;object-fit:contain}.date-layout .topic-picker{padding:14px;font-size:18px;font-weight:850;text-decoration:none}
.date-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:30px;padding:32px;border:1.5px solid var(--line);border-radius:20px;background:white;min-height:510px}
.calendar-visual{width:100%;max-width:380px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:30px}
.date-badge{font-size:28px;font-weight:900;border:3px solid var(--blue);border-radius:15px;color:var(--blue);padding:3px 20px;background:white}
.calendar-board{position:relative;width:100%;border:5px solid #b9c2cb;border-radius:24px;background:white;text-align:center;box-shadow:0 10px 15px #10336310}
.calendar-board::before,.calendar-board::after{content:'';position:absolute;top:-28px;height:52px;width:22px;border-radius:12px;background:linear-gradient(90deg,#86939f,#c1c8cf,#909ca6);box-shadow:0 4px 0 #153b73;z-index:1}.calendar-board::before{left:16%}.calendar-board::after{right:16%}
.board-weekday{margin:0;border-radius:17px 17px 0 0;background:var(--blue);color:white;padding:28px 6px 17px;font-size:clamp(30px,3.5vw,56px);font-weight:950;line-height:1.2}
.date-day-control{display:block;width:100%;border:0;border-radius:0;padding:0;background:transparent;color:var(--navy)}.date-day-control:hover{background:var(--pale)}
.board-day{display:inline-block;margin:12px 0 0;font-size:clamp(100px,13vw,200px);font-weight:950;line-height:1.05}
.edit-date-label{display:block;font-size:16px;font-weight:800;line-height:1.5;color:var(--blue);margin:6px 0}
.board-month-year{margin:10px 8px 24px;font-size:clamp(24px,2.5vw,34px);font-weight:900;line-height:1.3}
.calendar-board .explained{outline:3px solid #76590b;outline-offset:4px;border-radius:5px}
.date-reset{margin-top:-12px;background:var(--pale);border-color:var(--line);color:var(--blue);font-size:18px;font-weight:850}
.date-editor{padding:0 16px 16px;text-align:left;font-size:18px}.date-editor label{margin:0;font-weight:800}.date-editor input{min-width:0;color:var(--navy)}.date-editor #date-error{font-size:16px;margin:8px 0 0}.date-editor #date-error:empty{display:none}
.date-editor button{width:100%;margin-top:12px;background:var(--blue);color:white;border-color:var(--blue)}
.date-readout{text-align:center;min-width:0}.date-readout h2{font-size:clamp(40px,5.5vw,82px);font-weight:950;line-height:1.1;margin:0 0 26px;overflow-wrap:anywhere}.date-readout>p{font-size:clamp(22px,2.5vw,34px);line-height:1.3;margin:0}
.date-readout .date-feedback{font-size:20px;font-weight:800;min-height:2.6em;margin-top:16px}.date-readout .date-feedback:empty{display:none}
.date-answers{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.date-answers button{flex:1 1 120px;min-width:0;padding:16px 8px;font-size:clamp(21px,2vw,28px);font-weight:900;background:var(--pale);overflow-wrap:anywhere}.date-answers [aria-pressed=true]{border:2px solid var(--blue)}.date-answers .correct{border:2px solid #238342;background:#eef9ef}.date-answers .incorrect{border:2px solid #9a6512;background:#fff4df}.date-answers .answer-cue{display:block;font-size:16px;font-weight:800;line-height:1.4;margin-top:8px}.date-answers .correct .answer-cue{color:#18572f}.date-answers .incorrect .answer-cue{color:#78500e}.date-answers button:disabled{opacity:1;color:var(--navy);cursor:default}
.date-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;margin:24px 0;border:1.5px solid var(--line);border-radius:20px}.date-parts button{border:0;border-radius:16px;background:transparent;color:var(--blue);font-weight:900;font-size:22px;min-height:62px;padding:8px 4px}.date-parts button[aria-pressed=true]{background:var(--blue);color:white}
.date-layout [hidden]{display:none}.read-date-page .finish-dialog #finished>a{display:block;background:var(--blue);color:white;border-radius:12px;padding:12px;text-decoration:none;margin:12px 0}.read-date-page .finish-dialog #finished>button,.read-date-page #break-dialog form button{width:100%}.read-date-page #break-dialog form button{background:var(--blue);color:white}
.calendar-topics{display:flex;flex-direction:column;width:100%;gap:8px;min-width:0}.calendar-topics .topic-picker[aria-current=page]{border:2px solid var(--blue);background:#e5f2ff}.calendar-topics .icon{flex-shrink:0}
@media(max-width:1199px){.date-learning .lesson-heading{flex-wrap:wrap}.date-title{flex-basis:100%}.date-layout .guide-portrait{height:240px}.date-panel{gap:18px;padding:24px 18px;min-height:420px}.calendar-visual{gap:26px}.date-badge{font-size:22px}.board-weekday{font-size:30px}.board-day{font-size:115px}.board-month-year{font-size:24px}.date-readout h2{font-size:46px}.date-readout>p{font-size:24px}.date-parts button{font-size:19px}}
@media(max-width:900px){.date-panel{min-height:390px}.date-layout .guide-portrait{height:130px;width:110px}.date-layout .topic-picker{width:auto}.date-layout .action-rail strong{font-size:18px}}
@media(max-width:640px){.date-learning .mode-tabs{flex:1}.date-title p{font-size:17px}.date-layout .guide-portrait{width:72px;height:92px}.date-layout .topic-picker{font-size:15px;min-height:48px}.date-panel{grid-template-columns:1fr;padding:22px 16px;min-height:0;gap:24px}.calendar-visual{max-width:245px;gap:24px}.date-badge{font-size:20px}.calendar-board{border-width:4px;border-radius:20px}.calendar-board::before,.calendar-board::after{height:38px;width:17px;top:-20px}.board-weekday{font-size:30px;padding:20px 4px 12px}.board-day{font-size:115px;margin-top:8px}.board-month-year{font-size:23px;margin-bottom:18px}.date-readout h2{font-size:42px;margin-bottom:12px}.date-readout>p{font-size:22px}.date-parts{margin:18px 0}.date-parts button{font-size:16px;min-height:52px}.date-layout .action-rail button{flex-direction:column;gap:4px;padding:0 4px}.date-layout .action-rail strong{font-size:14px}.read-date-page .site-header{padding:4px 16px}.read-date-page .utility-nav{gap:12px}.read-date-page .utility-nav img{width:26px;height:26px}}
@media(max-width:360px){.date-parts button{font-size:14px;padding-inline:0}}
@media(max-width:640px){.calendar-topics{flex:1}.date-layout .calendar-topics .topic-picker{font-size:14px;min-height:48px;padding:8px;flex-direction:row}.calendar-topics .icon{width:24px;height:24px}}