/* Quizzes, Study guide, What's new, tab bar and phone menu. Moved here from the game Worker on 2026-10-22. */
/* Tab bar */
.tabs.tabs{flex-wrap:nowrap!important;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;margin-bottom:26px}
.tabs.tabs::-webkit-scrollbar{display:none}
.tabs.tabs.fadeR{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.tabs.tabs.fadeL{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.tabs.tabs.fadeL.fadeR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.tabs.tabs button,.tabs.tabs a.liveGameTab{flex:none;white-space:nowrap;font:inherit;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:0;padding:12px 14px 12px;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.tabs.tabs button:hover,.tabs.tabs a.liveGameTab:hover{color:var(--blue)}
.tabs.tabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.tabs.tabs a.liveGameTab{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.tabs.tabs a.liveGameTab i,.liveGameNote i{width:8px;height:8px;border-radius:50%;background:#E0182F;box-shadow:0 0 0 3px rgba(224,24,47,.18),0 0 8px 2px rgba(224,24,47,.55);flex:none;animation:sbLive 1.6s ease-in-out infinite}
.tabs.tabs a.liveGameTab:not(.live) i,.liveGameNote:not(.live) i{display:none!important}
@keyframes sbLive{50%{box-shadow:0 0 0 5px rgba(224,24,47,.08),0 0 14px 4px rgba(224,24,47,.35)}}
@media (prefers-reduced-motion:reduce){.tabs.tabs a.liveGameTab i,.liveGameNote i{animation:none}}
.cardStudyModes,.cardTopics,.fcModes{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:4px;background:#F1F3F6;border:1px solid var(--line);border-radius:11px;overflow-x:auto;scrollbar-width:none;max-width:100%;width:max-content;margin-bottom:20px}
.cardStudyModes::-webkit-scrollbar,.cardTopics::-webkit-scrollbar,.fcModes::-webkit-scrollbar{display:none}
.cardStudyModes>button,.cardTopics>button,.fcModes>button{flex:1 1 auto;white-space:nowrap;font:inherit;font-size:15px;font-weight:600;line-height:1.2;padding:9px 16px;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--muted);box-shadow:none;cursor:pointer}
.cardStudyModes>button:hover,.cardTopics>button:hover,.fcModes>button:hover{color:var(--blue)}
.cardStudyModes>button.selected,.cardTopics>button.selected,.fcModes>button.selected,.cardStudyModes>button[aria-pressed="true"],.cardTopics>button[aria-pressed="true"],.fcModes>button[aria-pressed="true"]{background:var(--blue);color:#fff}
.fcModes>span{padding:0 6px 0 8px;font-size:14px;white-space:nowrap}
.liveGameNote{display:block;margin:0 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#FAFBFC;font-size:15px;color:var(--muted)}
.liveGameNote i{display:inline-block;margin-right:9px;vertical-align:1px}
.liveGameNote a{color:var(--blue);font-weight:650;white-space:nowrap}
@media (max-width:700px){
 .tabs.tabs{flex-wrap:nowrap!important;margin-left:-16px;margin-right:-16px;padding:0 10px;margin-bottom:20px}
 .tabs.tabs button,.tabs.tabs a.liveGameTab{padding:12px 11px;font-size:15px}
 .cardStudyModes,.cardTopics,.fcModes{width:100%}
 .cardStudyModes,.cardTopics,.fcModes{gap:2px;padding:3px}
 .cardStudyModes>button,.cardTopics>button,.fcModes>button{padding:9px 8px}
}
/* What's new */
.whatsNew{border:1px solid var(--line);border-radius:12px;background:#FAFBFC;margin:0 0 22px;padding:0 18px}
.whatsNew>summary{list-style:none;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 0;cursor:pointer;min-height:0;color:var(--ink)}
.whatsNew>summary::-webkit-details-marker{display:none}
.whatsNew>summary>span{font-size:1.15rem;font-weight:750;letter-spacing:-.01em}
.whatsNew>summary>span::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);vertical-align:3px;transition:transform .15s}
.whatsNew:not([open])>summary>span::after{transform:rotate(-45deg);vertical-align:1px}
.whatsNew>summary>small{font-size:.9rem;color:var(--muted)}
.whatsNew ul{list-style:none;margin:0;padding:0}
.whatsNew li{border-top:1px solid #E5E7EB}
.whatsNew li a{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:12px 0;color:var(--ink);text-decoration:none}
.whatsNew li a:hover strong,.whatsNew li a:hover em{text-decoration:underline}
.wnDate{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.wnDate b{display:inline-block;margin-top:3px;font-size:.7rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#B42318;border-radius:4px;padding:1px 6px}
.wnBody{display:flex;flex-direction:column;gap:2px;min-width:0}
.wnBody strong{font-size:1rem}
.wnBody span{font-size:.93rem;color:var(--muted)}
.wnBody em{font-style:normal;font-weight:650;color:var(--blue);font-size:.93rem;margin-top:2px}
.wnMore{border-top:1px solid #E5E7EB}
.wnMore>summary{padding:11px 0 13px;min-height:0;font-weight:650;color:var(--blue);font-size:.93rem}
.whatsNew>ul+.wnMore,.whatsNew>ul:last-child{margin-bottom:4px}
.wnPhoneAll{display:none}
@media (max-width:700px){.whatsNew{padding:0 14px;margin-bottom:16px}.whatsNew li a{grid-template-columns:1fr;gap:2px}.wnDate b{margin:0 0 0 6px}}
/* Phone menu and Med math switcher */
.tabs.tabs #calcTool-tab,.tabs.tabs #calculator-tab{display:none}
.tabs.tabs button.sbOn{color:var(--blue);border-bottom-color:var(--blue)}
.sbMath{display:flex;gap:4px;padding:4px;background:#F1F3F6;border:1px solid var(--line);border-radius:11px;width:max-content;max-width:100%;margin:0 0 20px}
.sbMath[hidden]{display:none}
.sbMath button{flex:1 1 auto;white-space:nowrap;font:inherit;font-size:15px;font-weight:600;padding:9px 16px;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.sbMath button[aria-pressed="true"]{background:var(--blue);color:#fff}
.sbNav,.sbMore{display:none}
@media (max-width:700px){
 .tabs.tabs{display:none!important}
 .sbMath{width:100%;gap:2px;padding:3px}.sbMath button{padding:9px 6px;font-size:14px}
 body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 .sbNav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;box-shadow:0 -1px 8px rgba(17,24,39,.06);border-top:1px solid var(--line);padding:4px 4px max(10px,env(safe-area-inset-bottom))}
 .sbNav>button,.sbNav>a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;margin:0;padding:6px 2px;border:0;border-radius:12px;box-shadow:none;background:transparent;font:inherit;font-size:12px;font-weight:600;line-height:1.15;color:#5B6472;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
 .sbNav>button:active,.sbNav>a:active{background:#F1F3F6}
 .sbIco{position:relative;display:flex;align-items:center;justify-content:center;width:min(56px,100%);height:32px;border-radius:16px;transition:background .15s}
 .sbNav svg{width:24px;height:24px}
 .sbNav span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;text-align:center;overflow-wrap:anywhere;font-size:11.5px}
 .sbNav>.sbOn{color:var(--blue);font-weight:700}
 .sbNav>.sbOn .sbIco{background:#dcefe6}
 .sbNav>a i{position:absolute;top:1px;right:6px;width:9px;height:9px;border-radius:50%;background:#E0182F;box-shadow:0 0 0 2px #fff,0 0 6px 2px rgba(224,24,47,.5);animation:sbLive 1.6s ease-in-out infinite}
 .sbNav>a:not(.live) i{display:none}
 .sbMore:not([hidden]){display:block;position:fixed;inset:0;z-index:45}
 .sbMoreBack{position:absolute;inset:0;background:rgba(17,24,39,.4)}
 .sbMoreSheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:8px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(17,24,39,.18)}
 .sbMoreSheet p{margin:8px 0 4px;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
 .sbMoreSheet button{display:block;width:100%;border-radius:0;box-shadow:none;text-align:left;font:inherit;font-size:17px;font-weight:600;min-height:52px;padding:12px 4px;border:0;border-bottom:1px solid #E5E7EB;background:transparent;color:var(--ink);cursor:pointer}
 .sbMoreSheet button.sbOn{color:var(--blue)}
 .sbMoreSheet a.sbMoreLink{display:flex;align-items:center;min-height:52px;padding:12px 4px;border-bottom:1px solid #E5E7EB;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
 .sbMoreSheet button.sbOn::after{content:" ✓"}
 .sbMoreSheet .sbMoreClose{border:0;text-align:center;color:var(--muted);margin-top:4px}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.sbNav>a i{animation:none}}
.sbMoreSheet a.sbMoreLink{display:flex;align-items:center;min-height:52px;padding:12px 4px;border-bottom:1px solid #E5E7EB;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
/* Home page: a tile for every section, then What's new (it lives only here, so phones show it in full) */
.homeHead{margin:0 0 12px;font-size:1.15rem;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.homeTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0 0 26px}
.homeTiles .homeTile{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.homeTiles .homeTile:hover{border-color:var(--blue);background:#F7F9FC}
.homeTiles .homeTile:focus-visible{outline:3px solid #9fcfbd;outline-offset:2px}
.homeIco{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:#dcefe6;color:var(--blue)}
.homeIco svg{width:24px;height:24px}
.homeTile>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.homeTile strong{font-size:1.02rem;font-weight:700;line-height:1.3}
.homeTile small{font-size:.9rem;line-height:1.4;color:var(--muted)}
@media (max-width:700px){
 .homeTiles{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
 .homeTiles .homeTile{flex-direction:column;gap:8px;padding:14px 12px}
 .homeIco{width:40px;height:40px}
 .homeTile small{font-size:.85rem}
}

/* Home page: how the clinical forms work */
.homeHow{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0 0 26px;background:#fff}
.homeHow ol{margin:0 0 12px;padding-left:1.3em}.homeHow li{margin:0 0 8px;line-height:1.5}.homeHow li strong{color:var(--ink)}
.homeHowNote{font-size:.9rem;color:var(--muted);margin:0 0 12px}.homeHow .homeHowGo{min-height:44px}
/* Aaron's Drug Cards: featured first tile on Home, and the link at the top of the Study guide */
.homeTiles .homeTile.homeFeature{grid-column:1/-1;border:2px solid var(--blue);background:#eef8f3}
.homeTiles .homeTile.homeFeature strong{font-size:1.15rem}
.guideCards{margin:0 0 14px}
.cardsLive{margin:0 0 14px}
.cardsLive a{display:block;font-weight:700;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#eef8f3;color:var(--blue);text-decoration:none}
.guideCards button{width:100%;text-align:left;font-weight:700;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#eef8f3;color:var(--blue)}
@media(max-width:700px){.homeTiles .homeTile.homeFeature{flex-direction:row;align-items:center}}
/* Flash card piles and filters */
.fcFilters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.fcFilters>div{flex:1 1 130px;min-width:0;display:flex;flex-direction:column;gap:4px}
.fcFilters label{font-weight:700;font-size:14px}
.fcTally{font-size:14px;margin:4px 0 12px}
.fcTally .fcKnow{color:#166534;font-weight:600}.fcTally .fcLearn{color:#9a3412;font-weight:600}
.linkButton{background:none;border:0;padding:0;min-height:0;font:inherit;color:var(--blue);text-decoration:underline;cursor:pointer}
.fcSort{display:flex;gap:10px;justify-content:center;margin:14px 0 0}
.fcSort[hidden]{display:none}
.fcSort button{flex:1 1 0;max-width:240px;min-height:48px;font-weight:700;border-radius:10px}
.fcSort .fcLearnBtn{background:#fff7ed;border:2px solid #ea580c;color:#9a3412}
.fcSort .fcKnowBtn{background:#f0fdf4;border:2px solid #16a34a;color:#166534}
/* Keep the sort buttons in reach while reading a long card back on phones */
@media (max-width:700px){.fcSort{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));z-index:5;background:#fff;padding:10px 0;margin:8px 0 0;box-shadow:0 -6px 12px -8px rgba(0,0,0,.25)}}
/* Plain English on the study card */
.cardPlain{background:#f2faf6;border-color:#b7e4d0}
.cardPlain p{font-size:17px;line-height:1.6}
.cardTrick{margin-top:10px;padding:10px 12px;background:#fffbeb;border-left:4px solid #f59e0b;border-radius:6px;font-size:15px}
/* Learn it simply, look-alikes */
.learnTop{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
.learnTop>div{display:flex;flex-direction:column;gap:4px;flex:1 1 220px}
.learnTop label{font-weight:700;font-size:14px}
.learnIntro{margin:0 0 12px}
.lessonList{display:grid;gap:14px}
.lessonCard{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}
.lessonHead h3{margin:0 0 2px;font-size:1.35rem}
.lessonHead p{margin:0 0 10px}
.lessonSimple{font-size:17px;line-height:1.65;margin:0 0 10px}
.lessonWhen,.lessonDose{margin:0 0 8px}
.lessonTrick{margin:0 0 8px;padding:10px 12px;background:#fffbeb;border-left:4px solid #f59e0b;border-radius:6px}
.learnActions{margin-top:18px}
.compareTell{padding:12px 14px;background:#f2faf6;border:1px solid #b7e4d0;border-radius:10px;font-size:16px;line-height:1.55}
.compareTable{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0}
.compareHead,.compareRow{display:grid;grid-template-columns:150px 1fr 1fr}
.compareHead>div,.compareRow>div{padding:12px 14px;border-bottom:1px solid #eef0f3;border-left:1px solid #eef0f3}
.compareHead>div:first-child,.compareRow>div:first-child{border-left:0}
.compareRow:last-child>div{border-bottom:0}
.compareHead{background:#f3f4f6}
.compareHead h3{margin:0;font-size:1.15rem}.compareHead p{margin:0;font-size:14px}
.compareLabel{font-weight:700;color:var(--blue);font-size:.95rem}
.compareDrug{display:none}
.quizStory{font-size:1.15rem;font-weight:500;line-height:1.55}
@media (max-width:700px){
 .compareHead{display:none}
 .compareRow{grid-template-columns:1fr}
 .compareRow>div{border-left:0}
 .compareLabel{background:#f3f4f6;padding:8px 14px}
 .compareDrug{display:block;font-weight:700;font-size:.9rem;color:var(--blue);margin-bottom:2px}
}
/* Printable one-pagers */
.printSheet{display:none}
@media print{
 body.printing>*:not(.printSheet){display:none !important}
 html.printing,body.printing{background:#fff !important;color:#000 !important;padding:0;margin:0}
 html.printing::before,html.printing::after,body.printing::before,body.printing::after{display:none !important}
 .printSheet,.printSheet *{color:#000}
 body.printing .printSheet{display:block;font:11pt/1.4 system-ui,sans-serif}
 .printSheet h1{font-size:18pt;margin:0 0 2pt}.printSub{margin:0 0 10pt;color:#444;font-size:9pt}
 .printCard{break-inside:avoid;border:1px solid #999;border-radius:6pt;padding:8pt 10pt;margin:0 0 8pt}
 .printCard h2{font-size:13pt;margin:0}.printCard h2 small{font-weight:400;color:#444;font-size:10pt}
 .printClass{margin:0 0 4pt;color:#333;font-style:italic}.printCard p{margin:0 0 3pt}
 .printTrick{background:#f3f3f3;padding:3pt 6pt;border-left:3pt solid #999}
}