/* Step 2 Mastery — responsive visual/accessibility refinement */
:root{
  --teal:#08776f;
  --orange:#98500b;
  --tap:44px;
}
[data-theme="dark"]{--teal:#55d4c6;--orange:#ffc275;color-scheme:dark}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
body{min-width:0;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{outline-offset:3px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--blue,#2d6cdf) 38%,transparent)!important;
  box-shadow:none!important;
}
.skipLink{position:fixed;left:12px;top:10px;z-index:20000;transform:translateY(-160%);background:#fff;color:#14213a;border:2px solid #2d6cdf;border-radius:10px;padding:10px 14px;font-weight:850;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.skipLink:focus{transform:translateY(0)}

/* Reading comfort */
.center{max-width:1040px}
.section p,.section li{font-size:clamp(14px,1.05vw,16px)}
.section h3{line-height:1.28}
.chapterIntro p,.lede{max-width:72ch}
.sourcebar{line-height:1.55}
.exam,.trap,.note{line-height:1.52}

/* Safer color contrast for small labels in light mode */
.badge.review,.takeaways b,.diagramTitle,.anchorList b,.rapidItem b{color:var(--teal)!important}
.badge.low,.trapBox b{color:var(--orange)!important}

/* Tables: keep readable rather than shrinking text */
.tableScroller{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;margin:12px 0;border-radius:12px;overscroll-behavior-x:contain}
.tableScroller table{margin:0;min-width:620px;width:100%;font-size:13px}
.tableScroller:focus-visible{outline:3px solid color-mix(in srgb,var(--blue,#2d6cdf) 35%,transparent);outline-offset:2px}
.tableScroller::-webkit-scrollbar{height:9px}.tableScroller::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted,#667085) 45%,transparent);border-radius:99px}.tableScroller::-webkit-scrollbar-track{background:color-mix(in srgb,var(--line,#e1e7f0) 45%,transparent)}

/* Diagrams: preserve legibility while making horizontal content obviously scrollable */
.illust{scrollbar-gutter:stable;overscroll-behavior-x:contain;position:relative}
.illust svg{min-width:560px!important}
.eduDiagram{overflow:hidden}
.diagramScrollHint{display:none;font-size:10px;color:var(--muted);margin:7px 2px 0}

/* Buttons and dense controls */
.qcontrols button,.nextrow button,.flagBtn,.confidence button,.theme,.focusLayout,.tool,.done,.conceptExit,.sessionExit,.examMiniBtn,.examSubmit,.sessionCard,.testConceptBtn{min-height:var(--tap)}
.dot{min-width:32px!important;width:32px!important;height:32px!important;font-size:11px!important}
.qindex{gap:7px!important}
.choice{line-height:1.48}
.choice .letter{min-width:19px}
.qstem{font-size:15.5px!important;line-height:1.56!important}
.qscore{line-height:1.35}
.keyboard{line-height:1.6}

/* Sticky controls need air and safe-area awareness */
.toolbar{top:8px!important;margin-top:14px!important}
.qhead{top:0;padding-top:max(2px,env(safe-area-inset-top))}
.nextrow{gap:8px}
.qFab{box-shadow:0 10px 28px rgba(17,39,67,.22)}

/* Dialog polish/accessibility */
.examModal,.noteOverlay,.searchOverlay{overscroll-behavior:contain}
.examDialog,.noteDialog,.searchPalette{box-shadow:0 26px 80px rgba(7,18,33,.28)}
.examX,.noteClose,.searchClose{min-width:var(--tap);min-height:var(--tap)}
.examField select,.examField input{min-height:var(--tap)}

/* Main-site cards */
.module,.feature,.heroCard,.dashPanel,.card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
@media(hover:hover){.module.live:hover,.feature:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue,#2d6cdf) 24%,var(--line,#e1e7f0))}}
.siteHeader{padding-top:env(safe-area-inset-top)}
.nav a,.btn,.globalSearchTrigger,.tinyBtn{min-height:var(--tap);display:inline-flex;align-items:center}
.footer a{display:inline-flex;align-items:center;min-height:38px}

/* Narrow laptops and iPad landscape: use the question drawer earlier */
@media(max-width:1280px){
  .layout{grid-template-columns:210px minmax(0,1fr)!important}
  .right{display:block!important;position:fixed!important;right:0!important;top:0!important;width:min(460px,94vw)!important;height:100dvh!important;z-index:100!important;background:var(--paper)!important;box-shadow:-18px 0 50px rgba(17,39,67,.20)!important;transform:translateX(105%)!important;transition:transform .22s ease!important;border-left:1px solid var(--line)!important;border-top:0!important}
  body.qOpen .right{transform:translateX(0)!important}
  body.qOpen{overflow:hidden}
  .qClose{display:grid!important;place-items:center}
  .qFab{display:flex!important}
  .focusMode .layout{grid-template-columns:minmax(0,1fr)!important}
  .center{max-width:960px}
}

/* Tablet */
@media(max-width:900px){
  .wrap{padding-left:20px;padding-right:20px}
  .hero{padding-top:52px}
  .hero h1{font-size:clamp(36px,7vw,46px)}
  .overviewStats,.metricRow{gap:9px}
  .tableScroller table{min-width:580px}
  .illust svg{min-width:540px!important}
  .diagramScrollHint{display:block}
  .examDialog,.noteDialog,.searchPalette{max-width:calc(100vw - 24px)}
}

/* iPad portrait / phones */
@media(max-width:780px){
  body{line-height:1.62}
  .center{padding:16px 14px 88px!important}
  .top{gap:10px;align-items:flex-start!important}
  .top h1,h1{font-size:clamp(25px,7vw,31px)!important}
  .chapterIntro h2{font-size:22px!important}
  .section{padding:16px!important;margin:10px 0!important;border-radius:15px!important}
  .section p,.section li{font-size:15px!important}
  .section h3{font-size:18px!important}
  .toolbar{position:relative!important;top:auto!important;background:transparent!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important;padding:0!important}
  .tool{font-size:12px!important}
  .searchWrap input{font-size:16px!important;min-height:44px}
  .tableScroller{margin-left:-3px;margin-right:-3px;width:calc(100% + 6px)}
  .tableScroller table{min-width:560px;font-size:13px!important}
  table{font-size:13px!important}
  .illust{margin-left:-3px!important;margin-right:-3px!important;padding:10px!important}
  .illust svg{min-width:520px!important}
  .eduDiagram{padding:13px!important}
  .flowNode p{font-size:13px!important}
  .qFab{right:max(12px,env(safe-area-inset-right))!important;bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;min-height:50px!important;border-radius:14px!important}
  .right{width:100vw!important;max-width:100vw!important;padding:14px 14px calc(18px + env(safe-area-inset-bottom))!important}
  .qstem{font-size:16px!important}
  .choice{font-size:15px!important;padding:13px!important}
  .qcontrols{gap:8px!important}
  .qcontrols button{font-size:12px!important}
  .dot{min-width:36px!important;width:36px!important;height:36px!important}
  .keyboard{display:none}
  .personalTools button,.qNoteBtn{min-height:44px!important;padding:8px 10px!important}
  .searchOverlay{padding:2vh 8px 10px!important}
  .searchPalette{max-height:94dvh!important;border-radius:16px!important}
  .noteDialog{max-height:90dvh!important}
  .examDialog{max-height:92dvh!important;overflow:auto}
  .footerLinks{display:flex!important;flex-wrap:wrap!important;gap:3px 12px!important}
  .footerLinks a{min-height:40px;display:inline-flex;align-items:center}
}

@media(max-width:520px){
  .left{scrollbar-width:none}.left::-webkit-scrollbar{display:none}
  .chapbtn{min-width:178px!important}
  .chapterStats{gap:7px!important}.stat{padding:9px!important}
  .studyLoop{gap:7px!important}.studyStep{padding:9px!important}
  .sessionShelf{gap:8px!important}
  .qcontrols{grid-template-columns:1fr 1fr!important}
  .nextrow{position:sticky!important;bottom:0!important;margin-left:-14px!important;margin-right:-14px!important;padding:9px 14px calc(6px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--line)!important;box-shadow:0 -8px 24px color-mix(in srgb,var(--paper) 80%,transparent)!important}
  .nextrow button{font-size:12px!important;padding:8px 6px!important}
  .confidence{width:100%;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}.confidenceLabel{display:none!important}
  .confidence button{width:100%;font-size:11px!important;padding:7px 4px!important}
  .examStats,.examBreakdown{grid-template-columns:1fr!important}
  .searchHint{display:none!important}
  .nav .cta{padding:9px 11px}
  .headInner{min-height:62px!important}
  .brandMark{width:32px!important;height:32px!important}
  .brand{font-size:14px!important}
}

/* Respect OS-level motion preferences */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Print remains clean */
@media print{
  .skipLink,.qFab,.drawerBackdrop,.globalSearchTrigger,#readingProgress,.toolbar,.personalTools,.qNoteBtn{display:none!important}
  .section{break-inside:avoid;box-shadow:none!important}
  .tableScroller{overflow:visible!important}.tableScroller table{min-width:0!important}
}