/* The Chapter 3 study lab. Everything is scoped to .lab so it leaves the rest of the site alone. */
.lab{margin-top:16px;scroll-margin-top:0}
.lab{--paper:#FFF6DF;--white:#FFFDF7;--ink:#2E1A6E;--soft:#54438F;--sun:#FFC52E;--tomato:#D92D27;--aqua:#2CD3C2;--mint:#BDF0E2;--leaf:#17A34A;--sky:#2F80ED;--pink:#FF7DB4;--grape:#7B3FE4;--display:'Fraunces',Georgia,'Times New Roman',serif;--body:'Nunito',ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,sans-serif;--r:24px 34px 26px 30px}
.lab button,.lab input,.lab select,.lab textarea{font:inherit;color:inherit}
.lab h2,.lab h3,.lab h4{font-family:var(--display);font-weight:900;line-height:1.1;letter-spacing:-.01em;margin:0}
.lab .eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--soft);margin:0 0 .3rem}
.lab nav.tabs{position:sticky;top:0;z-index:5;background:#DDF6E8;padding:10px 0;border-bottom:3px solid var(--ink)}
.lab nav.tabs .row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.lab nav.tabs .row::-webkit-scrollbar{display:none}
.lab .tab{flex:0 0 auto;padding:.5rem 1rem;min-height:44px;border:2px solid var(--ink);border-radius:18px 22px 16px 20px;background:var(--white);font-weight:800;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.lab .tab[aria-current=page]{background:var(--sun)}
.lab .subs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.lab .sub{padding:.4rem .9rem;min-height:44px;border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:800;cursor:pointer}
.lab .sub[aria-current=true]{background:var(--mint)}
.lab .panel{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);padding:1.1rem 1.2rem;margin:18px 0;min-width:0}
.lab .why{background:#FFE7B0}
.lab .why h3{font-size:1.5rem;margin-bottom:.35rem}
.lab .why p{margin:.3rem 0}
.lab .missing{background:#E6DAFF}
.lab .pages{width:100%;border-collapse:collapse;font-size:.97rem}
.lab .pages th,.lab .pages td{text-align:left;vertical-align:top;padding:.4rem .5rem;border-top:2px solid rgba(46,26,110,.18)}
.lab .pages th{border-top:0;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.lab .tablewrap{overflow-x:auto}
.lab .ex{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.lab .ex .bookref,.lab .qcard .bookref{display:inline-block;font-size:.85rem;font-weight:800;padding:.1rem .6rem;border:2px solid var(--ink);border-radius:999px;background:var(--mint)}
.lab .ex-head{grid-column:1/-1}
.lab .ex-head h3{font-size:1.5rem;margin-top:.35rem}
.lab .ex-head p{margin:.25rem 0 0;color:var(--soft);font-weight:700}
.lab .stage{position:relative;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#BDF0E2;line-height:0}
.lab .stage svg{display:block;width:100%;height:auto}
.lab .stage svg text{font-family:var(--body);font-weight:800}
.lab .hot{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);font-weight:900;font-size:1.05rem;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.lab .hot:hover,.lab .hot:focus-visible{background:#fff}
.lab .hot.right{background:#7BE495}
.lab .hot.wrong{background:#FFB8A8}
.lab .controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.lab .dots{display:flex;gap:6px;flex-wrap:wrap}
.lab .dot{width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:#fff}
.lab .dot.on{background:var(--tomato)}
.lab .btn{min-height:44px;padding:.5rem 1.05rem;border:2px solid var(--ink);border-radius:26px 22px 24px 20px;background:var(--tomato);color:#fff;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.lab .btn.alt{background:#fff;color:var(--ink)}
.lab .btn.sun{background:var(--sun);color:var(--ink)}
.lab .btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.lab .btnrow{display:flex;gap:8px;flex-wrap:wrap}
.lab .say{background:#F2FCF8;border:2px solid var(--aqua);border-radius:14px;padding:.7rem .9rem;min-height:92px}
.lab .say .count{display:block;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:.2rem}
.lab .say p{margin:0}
.lab .flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:14px;margin-top:.7rem}
.lab .flip{position:relative;display:block;width:100%;min-height:172px;padding:0;border:0;background:none;cursor:pointer;perspective:900px;text-align:left}
.lab .flip .inner{position:absolute;inset:0;transition:transform .45s;transform-style:preserve-3d}
.lab .flip[aria-pressed=true] .inner{transform:rotateY(180deg)}
.lab .flip .face{position:absolute;inset:0;padding:.75rem .85rem;border:2px solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;gap:.25rem;overflow:hidden}
.lab .flip .front{background:#BFDCFF}
.lab .flip .back{background:#FFE08A;transform:rotateY(180deg);font-size:.97rem;line-height:1.35}
.lab .flip .lab{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.lab .flip b{font:900 1.22rem/1.15 var(--display)}
.lab .qcard{background:var(--white);border:2px solid var(--ink);border-radius:var(--r);box-shadow:4px 4px 0 var(--ink);padding:1.1rem 1.2rem;margin:16px 0;min-width:0}
.lab .qcard:nth-of-type(4n+1){background:#FFFBEC}
.lab .qcard:nth-of-type(4n+2){background:#F2FCF8}
.lab .qcard:nth-of-type(4n+3){background:#FFF4F8}
.lab .qcard:nth-of-type(4n){background:#F2F7FF}
.lab .qcard h4{font-size:1.2rem;font-family:var(--body);font-weight:800;line-height:1.3;margin:.45rem 0 .6rem}
.lab .qgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.lab .qgrid.solo{grid-template-columns:minmax(0,1fr)}
.lab .choice{display:block;width:100%;text-align:left;margin:.4rem 0;padding:.55rem .85rem;min-height:44px;border:2px solid var(--ink);border-radius:14px;background:#fff;font-weight:700;cursor:pointer}
.lab .choice:hover:not(:disabled),.lab .choice:focus-visible{background:var(--mint)}
.lab .choice.picked{background:#E6DAFF}
.lab .choice.right{background:#BFF2CC}
.lab .choice.wrong{background:#FFD4C7}
.lab .choice:disabled{cursor:default;color:var(--ink);opacity:1}
.lab .bank{display:flex;flex-wrap:wrap;gap:6px;margin:.4rem 0}
.lab .chip{min-height:40px;padding:.2rem .75rem;border:2px solid var(--ink);border-radius:999px;background:#FFE7B0;font-size:1rem;font-weight:800;letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer}
.lab .field{width:100%;min-height:44px;padding:.45rem .7rem;border:2px solid var(--ink);border-radius:12px;background:#fff}
.lab textarea.field{min-height:112px}
.lab .inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.lab .inline .field{flex:1 1 150px;width:auto}
.lab .matchrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px;align-items:center;margin:.45rem 0}
.lab .matchrow.bad select{background:#FFD4C7}
.lab .matchrow.good select{background:#BFF2CC}
.lab .orderlist{list-style:none;margin:.4rem 0;padding:0;counter-reset:o}
.lab .orderlist li{counter-increment:o;padding:.4rem .7rem;margin:.3rem 0;border:2px dashed var(--ink);border-radius:12px;background:#fff;font-weight:700;min-height:42px}
.lab .orderlist li::before{content:counter(o) ". ";font-weight:900}
.lab .orderlist li.empty{opacity:.55}
.lab .fb{margin:.7rem 0 0;padding:.7rem .9rem;border:2px solid var(--leaf);border-radius:14px;background:#D5F7DF}
.lab .fb.bad{border-color:var(--tomato);background:#FFE9DF}
.lab .fb.info{border-color:var(--grape);background:#EFE8FF}
.lab .fb p{margin:.25rem 0}
.lab .fb strong{font-weight:900}
.lab .score{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.lab .bar{height:14px;margin:.5rem 0;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.lab .bar span{display:block;height:100%;background:var(--grape);transition:width .25s}
.lab .result{margin:.6rem 0;padding:.7rem .9rem;border:2px solid var(--ink);border-radius:14px;background:#fff}
.lab .result.ok{background:#E6FBEC}
.lab .result.no{background:#FFF0EB}
.lab .result p{margin:.2rem 0}
.lab .pop{animation:pop .4s ease-out}
@keyframes pop{0%{opacity:0}100%{opacity:1}}
.lab .flow{stroke-dasharray:14 10;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.lab .nudge{animation:nudge 1.6s ease-in-out infinite alternate}
@keyframes nudge{from{transform:translate(0,0)}to{transform:translate(var(--dx,0),var(--dy,0))}}
@media(max-width:900px){.lab .ex,.lab .qgrid{grid-template-columns:minmax(0,1fr)}
.lab .say{min-height:0}}
@media(max-width:600px){.lab .panel,.lab .qcard{padding:.8rem .7rem}
.lab .matchrow{grid-template-columns:minmax(0,1fr)}
.lab .btn{flex:1 1 auto}
.lab .controls .btnrow{width:100%}
.lab .hot{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.lab .pop,.lab .flow,.lab .nudge{animation:none}
.lab .flip .inner,.lab .bar span{transition:none}}

/* Buttons acknowledge the tap: lift on hover, press on click, clear focus ring for keyboards. */
.lab .btn{transition:transform .12s cubic-bezier(.16,1,.3,1),box-shadow .12s cubic-bezier(.16,1,.3,1)}
.lab .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:2px 4px 0 var(--ink)}
.lab .btn:active:not(:disabled){transform:translateY(1px);box-shadow:1px 1px 0 var(--ink)}
.lab .btn:focus-visible,.lab .choice:focus-visible,.lab .hot:focus-visible{outline:4px solid #2f80ed;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lab .btn{transition:none}.lab .btn:hover:not(:disabled),.lab .btn:active:not(:disabled){transform:none}}