/* Pale mint, aligned cards, and visible navigation motion. */
:root{--green:var(--skin-64a88b,#64a88b);--green-dark:var(--skin-36795e,#36795e);--ink:var(--skin-285642,#285642);--page:var(--skin-f5faf7,#f5faf7)}
body{background:var(--page);color:var(--ink)}
button{position:relative;overflow:hidden;isolation:isolate}
.brandicon{background:var(--skin-76b69a,#76b69a)!important;box-shadow:0 4px 13px var(--skin-75b69a30,#75b69a30)}
body.home .homeScreen{margin:12px auto 18px;max-width:1220px}
body.home .homeMode{margin-bottom:9px}
body.home .homeMode button.active{background:var(--skin-e6f4ec,#e6f4ec);border-color:var(--skin-9ccdb3,#9ccdb3);color:var(--skin-376d51,#376d51)}
.homeMode button.active>span{background:var(--skin-82ba9b,#82ba9b);color:#fff;animation:iconBreathe 3s ease-in-out infinite}
.homeChapterNav button.active{background:var(--skin-8ac3a4,#8ac3a4);color:var(--skin-174c35,#174c35);border-color:var(--skin-88c3a2,#88c3a2);box-shadow:0 4px 12px var(--skin-85bfa329,#85bfa329)}
body.home .homeChapterActive{padding:10px 12px;animation:none;border-color:var(--skin-d9eade,#d9eade);box-shadow:0 4px 20px var(--skin-709b7b08,#709b7b08)}
body.home .homeChapterActive .homeChapterTop{margin-bottom:7px}
.homeSections.chapterElevenSections{align-items:stretch;grid-template-columns:repeat(4,minmax(0,1fr))}
body.home .homeSectionBlock{background:var(--skin-f8fcf9,#f8fcf9);border:1px solid var(--skin-dcece1,#dcece1);padding:8px;border-radius:12px}
.homeSectionHeading{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.homeSectionHeading strong{color:var(--skin-427555,#427555);font-size:14px}
.sectionWordCount{color:var(--skin-829a89,#829a89);font-size:10px}
.homeSections .wholeSectionButton{display:grid;grid-template-columns:1fr auto;text-align:left;align-items:center;gap:1px 8px;min-height:44px;width:100%;padding:7px 11px;background:linear-gradient(110deg,var(--skin-daefe2,#daefe2),var(--skin-e9f6ee,#e9f6ee));border:1px solid var(--skin-acd3ba,#acd3ba);border-radius:9px;margin-bottom:5px;color:var(--skin-2b6545,#2b6545);box-shadow:0 3px 8px var(--skin-70a08012,#70a08012)}
.wholeSectionButton>span{font-size:14px;font-weight:800}
.homeSections .wholeSectionButton>small{grid-row:2;grid-column:1;font-size:10px;color:var(--skin-6f947c,#6f947c);margin-top:0}
.wholeSectionButton>b{grid-column:2;grid-row:1/3;font-size:19px;transition:transform .3s ease}
.wholeSectionButton:hover{background:var(--skin-cde8d7,#cde8d7);box-shadow:0 6px 16px var(--skin-639b7725,#639b7725);transform:translateY(-2px)}
.wholeSectionButton:hover>b{transform:translateX(4px)}
.groupCaption{font-size:9px;color:var(--skin-8ca191,#8ca191);margin:4px 1px}
.homeSections .homeGroupCards{gap:4px}
.homeSections .homeGroupCards button{min-height:35px;padding:4px 18px 4px 8px;background:white;border-color:var(--skin-e2ece5,#e2ece5);border-radius:7px}
.homeGroupCards .sectionTitle{font-size:13px;color:var(--skin-44755a,#44755a)}
.homeSections .homeGroupCards small{font-size:10px;margin-top:2px}
.homeGroupCards em{font-size:9px}
.homeChapterNav button,.homeMode button,.homeGroupCards button,.homeRecentGrid button{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,background .25s ease}
.homeChapterNav button:hover{transform:translateY(-2px)}
/* The month calendar has a bounded height instead of stretching the left side. */
body.home .studyTimeCard{align-items:center;background:#fff;box-shadow:none;overflow:hidden}
body.home .studyTimeCard.monthly{grid-template-columns:210px minmax(250px,1fr) minmax(340px,1.5fr);gap:15px;min-height:0;padding:10px 15px}
body.home .monthly .timeHeading,body.home .monthly .timeTotals{align-self:center}
body.home .timeMonthDays{grid-column:auto;grid-row:auto;gap:3px;align-self:start}
body.home .timeMonthWeekday{font-size:9px;padding:0 0 2px}
body.home .timeMonthDay,body.home .timeMonthBlank{min-height:0;height:22px}
body.home .timeMonthDay{padding:2px 5px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1px;border-radius:4px;background:var(--skin-f1f7f2,#f1f7f2)}
body.home .timeMonthDay.today{background:var(--skin-dcefe1,#dcefe1);border-color:var(--skin-a2ccaf,#a2ccaf)}
body.home .timeMonthDay>span{font-size:9px;line-height:1}
body.home .timeMonthDay>small{font-size:8px;line-height:1}
body.home .timeMonthTrack{display:none}
body.home .timeTotals>div{background:var(--skin-f0f8f2,#f0f8f2)}
body.home .timeTotals strong{color:var(--skin-4a8762,#4a8762)}
.timeBar i{background:linear-gradient(var(--skin-a2d1ae,#a2d1ae),var(--skin-71b68d,#71b68d));transform-origin:bottom;animation:barRise .6s cubic-bezier(.2,.8,.2,1) both}
body.mistakePractice .studyRange,body.mistakePractice .modeTabs{display:none}
.mistakeHead{grid-template-columns:auto 1fr auto;background:linear-gradient(115deg,var(--skin-deefe4,#deefe4),var(--skin-f0f8f2,#f0f8f2));border:1px solid var(--skin-cce2d4,#cce2d4);color:var(--skin-35684b,#35684b);padding:20px;border-radius:17px}
.mistakeHead>button{background:white;border-color:var(--skin-c6dfcf,#c6dfcf);color:var(--skin-4e7c5e,#4e7c5e)}
.mistakeHead p{color:var(--skin-78917e,#78917e);max-width:400px;line-height:1.6;font-size:12px}
.mistakeHead h1{font-size:24px}
.mistakeHeroActions{display:grid;grid-template-columns:1fr;gap:4px;text-align:center;min-width:210px}
.mistakeHeroActions strong{font-size:31px;line-height:1.1;color:var(--skin-4d8c66,#4d8c66)}
.mistakeHeroActions>span{font-size:10px;color:var(--skin-789582,#789582)}
.mistakeHeroActions button.primary{background:var(--skin-8ec7a5,#8ec7a5);color:var(--skin-174d32,#174d32);border-color:var(--skin-8bbf9e,#8bbf9e);font-size:13px;padding:10px 15px;font-weight:800;margin-top:4px;box-shadow:0 4px 12px var(--skin-75ad8a20,#75ad8a20);transition:transform .3s ease,box-shadow .3s ease}
.mistakeHeroActions button:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--skin-75ad8a35,#75ad8a35)}
.mistakeTools{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto;align-items:center;gap:8px;margin:15px 0 8px}
.mistakeTools select,.mistakeTools button{padding:10px 12px;border:1px solid var(--skin-d5e6db,#d5e6db);border-radius:9px;font-size:12px;color:var(--skin-587b62,#587b62);background:#fff;min-height:40px}
.mistakeTools input{min-width:0;font-size:13px;min-height:40px}
.mistakeFiltered{font-size:11px;color:var(--skin-8b9d8e,#8b9d8e);margin:8px 2px}
.mistakeList{display:block}
.mistakeDateGroup{margin:18px 0 24px}
.mistakeDateHeading{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--skin-dce9e0,#dce9e0);margin-bottom:12px}
.mistakeDateHeading h2{font-size:16px;letter-spacing:.4px;margin:0;color:var(--skin-4b7d5c,#4b7d5c)}
.mistakeDateHeading>span{font-size:11px;color:var(--skin-829888,#829888)}
.mistakeSectionGroup{margin:0 0 14px;padding:12px;border-radius:13px;background:var(--skin-eef6f0,#eef6f0);border:1px solid var(--skin-e1eee5,#e1eee5)}
.mistakeSectionGroup h3{font-size:13px;margin:0 0 9px;color:var(--skin-527b5e,#527b5e);display:flex;align-items:center;gap:9px}
.mistakeSectionGroup h3 small{font-size:10px;font-weight:400;color:var(--skin-90a193,#90a193)}
.mistakeCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mistakeCard{padding:12px;border-color:var(--skin-e1ece4,#e1ece4);border-radius:9px;align-items:center}
.mistakeCard strong{font-size:17px;color:var(--skin-457751,#457751);overflow-wrap:anywhere}
.mistakeCard span{font-size:12px}
.mistakeCard em{font-size:11px;overflow-wrap:anywhere}
.mistakeCardSide{min-width:112px}
.mistakeCardSide button{padding:5px 8px}
dialog[open]{animation:dialogEnter .35s cubic-bezier(.2,.8,.2,1) both}
dialog::backdrop{animation:backdropEnter .35s ease both}
.tapWave{position:absolute;pointer-events:none;border-radius:50%;width:12px;height:12px;background:var(--skin-5b9a7330,#5b9a7330);transform:translate(-50%,-50%);animation:tapWave .6s ease-out forwards;z-index:2}
@keyframes tapWave{to{opacity:0;transform:translate(-50%,-50%) scale(22)}}
@keyframes iconBreathe{0%,100%{box-shadow:0 0 0 0 var(--skin-86bea530,#86bea530);transform:scale(1)}50%{box-shadow:0 0 0 6px var(--skin-86bea500,#86bea500);transform:scale(1.06)}}
@keyframes barRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dialogEnter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdropEnter{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.homeSections.chapterElevenSections{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){body.home .studyTimeCard.monthly{grid-template-columns:1fr 1fr}.monthly .timeHeading{grid-row:1}.monthly .timeTotals{grid-row:1}body.home .timeMonthDays{grid-column:1/-1;grid-row:2}.mistakeTools{grid-template-columns:1fr 1fr}.mistakeTools input{grid-column:1/-1}.mistakeHead{grid-template-columns:1fr auto}.mistakeHead>button{grid-column:1/-1;width:max-content}}
@media(max-width:640px){body.home .studyTimeCard.monthly{display:grid;grid-template-columns:1fr;gap:8px}.monthly .timeHeading,.monthly .timeTotals{grid-row:auto}body.home .timeMonthDays{grid-row:auto}.homeSections.chapterElevenSections{grid-template-columns:1fr}.homeSections .wholeSectionButton{min-height:48px}.homeSections .homeGroupCards button{min-height:41px}.mistakeHead{padding:15px;grid-template-columns:1fr}.mistakeHeroActions{grid-template-columns:auto 1fr;align-items:center;min-width:0;gap:5px 9px;text-align:left}.mistakeHeroActions strong{grid-row:1/3;font-size:29px}.mistakeHeroActions button{grid-column:1/-1}.mistakeHeroActions>span{grid-column:2}.mistakeCards{grid-template-columns:1fr}.mistakeTools{grid-template-columns:1fr 1fr}.mistakeTools>button{grid-column:1/-1}.mistakeCardSide{min-width:110px}.mistakeHead h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.tapWave{display:none}}

.mistakeDatePicker{padding:13px 15px;margin:12px 0;background:#fff;border:1px solid var(--skin-dceae1,#dceae1);border-radius:12px}
.mistakeDatePickerHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mistakeDatePickerHead strong{font-size:12px;color:var(--skin-5d8069,#5d8069)}
.mistakeDatePickerHead button{font-size:11px;color:var(--skin-799484,#799484);padding:4px 8px;background:transparent;border:0}
.mistakeDateChoices{display:flex;gap:7px;flex-wrap:wrap;max-height:140px;overflow:auto;scrollbar-width:thin;padding:1px}
.mistakeDayChoice{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--skin-f7fbf8,#f7fbf8);border:1px solid var(--skin-e1ece5,#e1ece5);border-radius:8px;font-size:12px;cursor:pointer;color:var(--skin-6d8b77,#6d8b77);transition:background .2s,border-color .2s,transform .2s}
.mistakeDayChoice.selected{background:var(--skin-e2f1e7,#e2f1e7);border-color:var(--skin-a8ceb5,#a8ceb5);color:var(--skin-37674a,#37674a)}
.mistakeDayChoice:hover{transform:translateY(-1px);border-color:var(--skin-b9d8c3,#b9d8c3)}
.mistakeDayChoice input{width:13px;height:13px;margin:0;accent-color:var(--skin-75ad8a,#75ad8a)}
.mistakeDateHeading{gap:9px;flex-wrap:wrap}
.mistakeDateHeading>span{margin-left:auto}
.mistakeDateHeading>button{font-size:12px;color:var(--skin-397153,#397153);background:var(--skin-e4f2e9,#e4f2e9);border:1px solid var(--skin-bfddc9,#bfddc9);padding:7px 11px;border-radius:8px}
.dayRecords{margin:-1px 0 13px;background:#fff;border:1px solid var(--skin-e0ece3,#e0ece3);border-radius:10px;padding:9px 12px}
.dayRecords>summary{font-size:11px;color:var(--skin-789683,#789683);cursor:pointer}
.dayRecord{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--skin-edf3ef,#edf3ef)}
.dayRecord:first-child{margin-top:10px}
.dayRecord>span{display:grid;gap:3px;flex:1;min-width:0}
.dayRecord strong{font-size:12px;color:var(--skin-50765c,#50765c);overflow-wrap:anywhere}
.dayRecord small{font-size:11px;color:var(--skin-8b9f90,#8b9f90)}
.dayRecord button{font-size:11px;padding:5px 9px;flex:none}
.deleteScore{color:#a65d51!important;border-color:#efd8d2!important;background:#fff7f4!important}
.deleteScore:hover{color:#914234!important;background:#fcebe5!important;border-color:#deb5aa!important}
.scoreRecordActions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
.scoreRecordActions button{font-size:12px;padding:6px 10px}
.deleteScoreDialog{width:min(460px,calc(100% - 28px));border-radius:17px;padding:23px;background:#fff}
.deleteScoreDialog h2{font-size:21px;margin:0 0 13px;color:#6b524b}
#deleteScoreInfo{background:var(--skin-f6faf7,#f6faf7);border:1px solid var(--skin-e2ece5,#e2ece5);padding:12px;border-radius:10px;font-size:13px;line-height:1.7;color:var(--skin-66816d,#66816d)}
.deleteScoreDialog .subtle{font-size:12px;line-height:1.7;color:var(--skin-92a095,#92a095)}
.deleteScoreActions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:640px){.mistakeDatePicker{padding:11px}.mistakeDatePickerHead{align-items:flex-start;gap:5px}.mistakeDatePickerHead button{padding:0;max-width:110px;font-size:10px;text-align:right}.mistakeDayChoice{font-size:11px;padding:6px 8px}.mistakeDateHeading>span{margin-left:0}.mistakeDateHeading>button{margin-left:auto;font-size:11px}.dayRecord{flex-wrap:wrap}.dayRecord>span{flex-basis:100%}.dayRecord button:first-of-type{margin-left:auto}}
