:root{
--cream:#faf7f1; --navy:#1b3a5b; --teal:#37897f; --bright:#1e8fb0; --slate:#3a5a76;
--line:#e3ddd2; --ink-soft:#5c6b7a; --white:#fff;
--pink:#f8dbe5; --pink-ink:#c0456c;
--peach:#fce0d2; --peach-ink:#cf6a3c;
--blue:#dbe8f4; --blue-ink:#2c6e9e;
--yellow:#f9efc9; --yellow-ink:#a2801a;
--green:#d7eede; --green-ink:#2e8b5f;
--purple:#e7dff3; --purple-ink:#6a4c9a;
--mint:#d2ebe5; --mint-ink:#2c8a7f;
--shadow:0 1px 2px rgba(27,58,91,.06), 0 6px 18px rgba(27,58,91,.07);
}
*{box-sizing:border-box}
body{margin:0; background:var(--cream); color:var(--navy);
font-family:Poppins,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased}
.wrap{max-width:1040px; margin:0 auto; padding:22px 20px 26px; display:flex; flex-direction:column; gap:16px;
/* Clinical vocabulary is full of long unbreakable words. In a narrow
column - a five-across card grid, say - one of them sets the flex item's
min-content width and pushes the whole card past its container:
"Hyperaldosteronism" did exactly that on 10-53. Let long words break
rather than blow out the layout. */
overflow-wrap:break-word}
.cd .ct > *{min-width:0}
/* ---------- header ---------- */
.pill{display:inline-block; color:#fff; font-size:11px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; padding:6px 13px; border-radius:999px}
h1{font-size:27px; line-height:1.15; font-weight:700; margin:9px 0 4px; text-wrap:balance}
.sub{margin:0; font-size:13.5px; color:var(--ink-soft); max-width:66ch; line-height:1.55}
/* ---------- shared bits ---------- */
.lbl{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); margin:0 0 9px}
ul.cl{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
ul.cl li{font-size:13px; line-height:1.55; display:flex; gap:9px; align-items:flex-start}
/* min-width, not width: the marker slot is sized for one character (a middot,
an arrow, a tick) but lessons legitimately use a short label as the marker -
"CO2", "HCO3" - and a hard 13px box let those spill
over the text beside them. Single-character markers still occupy 13px, so
nothing that was already aligned moves. */
ul.cl li .b{flex:none; font-weight:700; min-width:13px; line-height:1.5; white-space:nowrap}
b{font-weight:600}
/* This row must wrap. It sits inside compare panels and interp result cards,
which are half-width or narrower, and a non-wrapping flex row of source
illustrations simply ran off the right edge of its own white box - three
of the six pictures on 06-09's "Positive signs" panel were cut in half. */
.figs{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:center;
background:rgba(255,255,255,.6);
border-radius:12px; padding:9px 16px; margin:0 auto 12px; width:fit-content; max-width:100%}
.figs img{max-height:118px; width:auto; max-width:100%}
.rx{display:flex; gap:10px; align-items:center; margin-top:11px; flex-wrap:wrap}
.rx img{max-height:58px; width:auto}
/* ---------- compare ---------- */
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:13px}
/* Grid items default to min-width:auto, so a child that cannot shrink below
its intrinsic width - a figure row of source illustrations, most often -
widens its own track and shoves the neighbouring panel off the page. On
06-09 that pushed the whole "Negative signs & symptoms" column past the
right edge with its headings cut off. min-width:0 lets the track shrink;
the max-width on .figrow img below is what then makes the picture fit. */
.cmp > .side, .cardgrid > .cd, .split > *{min-width:0}
.side{border-radius:15px; padding:16px 18px 18px}
.side h3{margin:0 0 3px; font-size:17px; font-weight:700; line-height:1.25}
.side .cap{margin:0 0 13px; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; opacity:.78}
.side .lead{margin:0 0 12px; font-size:13px; line-height:1.55}
.grp + .grp{margin-top:13px}
.grp h4{margin:0 0 7px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; opacity:.66}
/* ---------- mnemonic ---------- */
.mnem{background:var(--white); border:1.5px dashed #d8cfc0; border-radius:12px;
padding:12px 15px; margin-top:13px; display:flex; gap:13px; align-items:flex-start}
.mnem .tb{width:40px; flex:none; margin-top:1px}
.mnem .hand{font-family:Caveat,Poppins,cursive; font-size:26px; font-weight:700; line-height:1.1; display:block; margin-bottom:3px}
.mnem p{margin:0; font-size:12px; line-height:1.5; color:var(--slate)}
.mlines{margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.mlines li{font-size:12.8px; line-height:1.5; display:flex; gap:9px}
.mlines .k{font-weight:700; flex:none; min-width:14px; white-space:nowrap}
/* ---------- cards ---------- */
.cardgrid{display:grid; gap:11px}
.cd{border-radius:14px; padding:14px 16px 15px}
.cd .ct{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.cd .cn{width:30px; height:30px; border-radius:50%; flex:none; color:#fff;
display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.cd .cimg{height:44px; width:auto; max-width:56px; object-fit:contain; flex:none}
.cd h4{margin:0; font-size:14.5px; font-weight:700; line-height:1.25}
.cd .csub{margin:1px 0 0; font-size:11.5px; opacity:.7; line-height:1.35}
.cd p{margin:0 0 8px; font-size:13px; line-height:1.55}
/* ---------- clickable tabs ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{font-family:inherit; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--navy);
background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:8px 15px;
display:flex; align-items:center; gap:8px; transition:background .16s, border-color .16s, transform .16s}
.tab img{height:22px; width:auto}
.tab:hover{transform:translateY(-2px)}
.tab:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.tab[aria-pressed="true"]{border-color:currentColor; box-shadow:var(--shadow)}
.tabpanel{background:var(--white); border:1.5px solid var(--line); border-radius:16px;
box-shadow:var(--shadow); padding:18px 20px 20px}
/* ---------- table ---------- */
.tblwrap{overflow-x:auto; border:1.5px solid var(--line); border-radius:14px; background:var(--white); box-shadow:var(--shadow)}
table.tbl{border-collapse:collapse; width:100%; min-width:520px; font-size:13px}
table.tbl th{background:var(--navy); color:#fff; text-align:left; font-weight:600;
padding:11px 14px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap}
table.tbl td{padding:11px 14px; border-top:1px solid var(--line); line-height:1.5; vertical-align:top}
table.tbl tr:nth-child(even) td{background:#fdfbf7}
table.tbl td:first-child{font-weight:600; white-space:nowrap}
table.tbl td.num{font-variant-numeric:tabular-nums}
/* ---------- druglist: searchable generic <-> trade lookup ---------- */
.drugs{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px 18px}
.dhead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.dhead h4{margin:0; font-size:16px; font-weight:700}
.dcount{margin-left:auto; font-size:11.5px; color:var(--ink-soft); font-weight:500; font-variant-numeric:tabular-nums}
.dsearch{position:relative; margin-bottom:11px}
.dsearch input{font-family:inherit; font-size:13.5px; width:100%; padding:10px 14px 10px 36px;
border:1.5px solid var(--line); border-radius:11px; background:var(--cream); color:inherit}
.dsearch input:focus{outline:none; border-color:var(--bright); background:var(--white)}
.dsearch svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.45}
.dchips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px}
.dchip{font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; color:var(--ink-soft);
background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:6px 13px; transition:all .15s}
.dchip:hover{border-color:var(--teal); color:var(--teal)}
.dchip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.dchip:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.drows{display:flex; flex-direction:column; gap:7px; max-height:430px; overflow-y:auto}
.drow{display:grid; grid-template-columns:minmax(120px,1fr) minmax(140px,1.3fr); gap:10px 16px;
align-items:baseline; border:1.5px solid var(--line); border-radius:11px; padding:10px 13px; background:var(--cream)}
.drow.hid{display:none}
.dgen{font-size:13.5px; font-weight:700; line-height:1.35}
.dcls{display:block; font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; margin-top:3px}
.dtrade{font-size:13px; line-height:1.5; color:var(--slate)}
.dtrade b{font-weight:600; color:var(--navy)}
.dnote{grid-column:1/-1; font-size:12px; line-height:1.5; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:7px}
.dempty{padding:22px; text-align:center; font-size:13px; color:var(--ink-soft)}
.dfoot{margin:11px 0 0; font-size:12px; line-height:1.55; color:var(--ink-soft)}
@media (max-width:560px){ .drow{grid-template-columns:1fr} }
/* ---------- steps ---------- */
.steps{display:flex; flex-direction:column; gap:10px}
.step{display:flex; gap:14px; align-items:flex-start; background:var(--white);
border:1.5px solid var(--line); border-radius:14px; padding:14px 17px}
.step .sn{width:28px; height:28px; border-radius:50%; flex:none; color:#fff; background:var(--teal);
display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px}
.step h4{margin:0 0 3px; font-size:14px; font-weight:700}
.step p{margin:0; font-size:13px; line-height:1.55}
/* ---------- callout ---------- */
.callout{display:flex; gap:13px; align-items:flex-start; border-radius:14px; padding:14px 17px}
.callout .ic{width:26px; height:26px; border-radius:50%; color:#fff; flex:none;
display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.callout h4{margin:0 0 4px; font-size:13.5px; font-weight:700}
.callout p{margin:0; font-size:13px; line-height:1.55}
/* ---------- quiz ---------- */
.quiz{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px 22px 22px}
.qprog{display:flex; align-items:center; gap:12px; margin-bottom:15px}
.qbar{flex:1; height:7px; background:#eae3d8; border-radius:999px; overflow:hidden}
.qbar i{display:block; height:100%; background:var(--teal); width:0; transition:width .35s ease}
.qpn{font-size:11.5px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.stem{margin:0; font-size:16.5px; font-weight:600; line-height:1.45}
.sata{margin:6px 0 0; font-size:11.5px; font-weight:600; color:var(--blue-ink)}
.opts{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.opt{font-family:inherit; text-align:left; cursor:pointer; width:100%; display:flex; gap:12px; align-items:flex-start;
background:var(--cream); border:1.5px solid var(--line); border-radius:12px; padding:12px 15px;
font-size:13.8px; line-height:1.5; color:var(--navy); transition:background .16s, border-color .16s, transform .16s}
.opt:hover:not(:disabled){background:#f2ece1; transform:translateX(2px)}
.opt:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.opt:disabled{cursor:default}
.opt .ltr{flex:none; width:23px; height:23px; border-radius:7px; background:#fff; border:1.5px solid var(--line);
display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; margin-top:1px}
.opt.picked{background:var(--blue); border-color:var(--blue-ink)}
.opt.picked .ltr{background:var(--blue-ink); color:#fff; border-color:var(--blue-ink)}
.opt.ok{background:var(--green); border-color:var(--green-ink)}
.opt.ok .ltr{background:var(--green-ink); color:#fff; border-color:var(--green-ink)}
.opt.no{background:var(--pink); border-color:var(--pink-ink)}
.opt.no .ltr{background:var(--pink-ink); color:#fff; border-color:var(--pink-ink)}
.opt .mark{margin-left:auto; font-size:11.5px; font-weight:700; flex:none; padding-left:10px}
.qrow{display:flex; gap:11px; margin-top:16px; flex-wrap:wrap}
.btn{font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; background:var(--navy); color:#fff;
border:1.5px solid var(--navy); border-radius:999px; padding:11px 24px; transition:opacity .16s}
.btn:hover:not(:disabled){opacity:.88}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btn:focus-visible{outline:3px solid var(--bright); outline-offset:3px}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.fb{border-radius:13px; padding:15px 17px; margin-top:16px}
.fb h4{margin:0 0 6px; font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px}
.fb h4 .i{width:20px; height:20px; border-radius:50%; color:#fff; font-size:12px; font-weight:700;
display:flex; align-items:center; justify-content:center; flex:none}
.fb p{margin:0; font-size:13px; line-height:1.6}
.fbody{display:flex; gap:15px; align-items:flex-start}
.fart{max-height:100px; width:auto; flex:none}
.fb.good{background:var(--green)} .fb.good h4{color:var(--green-ink)} .fb.good h4 .i{background:var(--green-ink)}
.fb.bad{background:var(--pink)} .fb.bad h4{color:var(--pink-ink)} .fb.bad h4 .i{background:var(--pink-ink)}
.score{text-align:center; padding:12px 0 4px}
.ring{width:112px; height:112px; margin:0 auto 12px; position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .num b{font-size:29px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.ring .num small{font-size:10.5px; color:var(--ink-soft); margin-top:3px}
.score .hand{font-family:Caveat,Poppins,cursive; font-size:26px; color:var(--teal); font-weight:700; display:block; margin-bottom:5px}
.score p{margin:0 auto 16px; font-size:13.5px; line-height:1.6; color:var(--slate); max-width:44ch}
/* ---------- interp ---------- */
.interp{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px 18px}
.ipanel{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:15px}
.ilab{background:var(--cream); border:1.5px solid var(--line); border-radius:13px; padding:11px 12px;
display:flex; flex-direction:column; gap:5px; transition:border-color .2s}
.ilab.abn{border-color:currentColor}
.ilab .iimg{height:30px; width:auto; max-width:40px; object-fit:contain; align-self:flex-start}
.inm{font-size:12px; font-weight:700; line-height:1.25}
.ilab input{font-family:inherit; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; width:100%;
border:none; border-bottom:2px solid var(--line); background:transparent; color:inherit; padding:2px 0; -moz-appearance:textfield}
.ilab input::-webkit-outer-spin-button,.ilab input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.ilab input:focus{outline:none; border-bottom-color:var(--bright)}
.ilab input:focus-visible{outline:2px solid var(--bright); outline-offset:3px; border-radius:3px}
.iref{font-size:9.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; line-height:1.3}
.ichip{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:999px;
padding:4px 8px; text-align:center; line-height:1.3}
.iout{border:1.5px solid var(--line); border-radius:14px; overflow:hidden}
.ibar{display:flex; align-items:center; gap:12px; padding:11px 15px; border-bottom:1.5px solid var(--line); background:var(--cream)}
.ibar h4{margin:0; font-size:14px; font-weight:700}
.itally{margin-left:auto; font-size:11.5px; color:var(--ink-soft); font-weight:500}
.iscroll{max-height:400px; overflow-y:auto; padding:13px 15px 15px; display:flex; flex-direction:column; gap:11px}
.ires{border-radius:13px; padding:13px 15px}
.irh{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:9px}
.irh h5{margin:0; font-size:15px; font-weight:700}
.irv{font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; opacity:.85}
.ires p{margin:0 0 8px; font-size:12.8px; line-height:1.55}
.iok{background:var(--green); border-radius:13px; padding:20px; text-align:center}
.iok h5{margin:0 0 5px; color:var(--green-ink); font-size:15px}
.iok p{margin:0 auto; font-size:12.8px; line-height:1.55; max-width:46ch; color:var(--slate)}
/* ---------- sorter ---------- */
.sorter{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px 18px}
.sprompt{margin:0 0 13px; font-size:13.5px; line-height:1.6; color:var(--slate)}
.srows{display:flex; flex-direction:column; gap:8px}
.srow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--cream);
border:1.5px solid var(--line); border-radius:12px; padding:10px 14px}
.srow.good{background:var(--green); border-color:var(--green-ink)}
.srow.bad{background:var(--pink); border-color:var(--pink-ink)}
.stext{font-size:13px; line-height:1.5; flex:1 1 220px}
.sbtns{display:flex; gap:7px; flex-wrap:wrap}
.sbtn{font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; color:var(--ink-soft);
background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:6px 13px; transition:all .15s}
.sbtn:hover{border-color:var(--bt); color:var(--bt)}
.sbtn.on{background:var(--bf); border-color:var(--bt); color:var(--bt)}
.sbtn:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.sorter.done .sbtn{cursor:default}
.smark{font-size:12px; font-weight:700; min-width:22px; color:var(--navy)}
.srow.good .smark{color:var(--green-ink)}
.srow.bad .smark{color:var(--pink-ink)}
.srow-foot{display:flex; align-items:center; gap:11px; margin-top:14px; flex-wrap:wrap}
.srow-foot .btn{padding:10px 20px; font-size:13px}
.sscore{font-size:12.5px; font-weight:600}
.sscore.good{color:var(--green-ink)}
.sscore.part{color:var(--peach-ink)}
/* ---------- hotspot ---------- */
.hotwrap{display:grid; grid-template-columns:minmax(240px,1fr) 1fr; gap:16px; align-items:start;
background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px}
.hotstage{position:relative; display:inline-block; width:100%}
.hotstage img{width:100%; height:auto; display:block}
.hpt{position:absolute; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%;
background:var(--white); border:2.5px solid var(--ht); color:var(--ht); cursor:pointer;
font-family:inherit; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 6px rgba(27,58,91,.2); transition:transform .16s}
.hpt:hover{transform:translate(-50%,-50%) scale(1.15)}
.hpt.on{background:var(--ht); color:#fff}
.hpt:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.hothint{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6; font-style:italic}
.hotcard{border-radius:13px; padding:15px 17px}
.hotcard h4{margin:0 0 7px; font-size:16px; font-weight:700}
.hotcard p{margin:0 0 9px; font-size:13px; line-height:1.6}
/* ---------- flip ---------- */
.flipgrid{display:grid; gap:11px}
.flip{position:relative; font-family:inherit; text-align:left; cursor:pointer; min-height:130px;
background:var(--ff); border:1.5px solid transparent; border-radius:14px; padding:15px 17px; color:var(--navy);
display:flex; align-items:center; transition:border-color .16s, transform .16s}
.flip:hover{transform:translateY(-2px); border-color:var(--fi)}
.flip:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.ffront{display:flex; flex-direction:column; gap:7px; width:100%}
.ffront img{height:46px; width:auto; max-width:60px; object-fit:contain}
.ffront b{font-size:15px; font-weight:700; color:var(--fi); line-height:1.3}
.ffront em{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-style:normal;
font-weight:600; color:var(--ink-soft)}
.fback{display:none; font-size:13px; line-height:1.6; width:100%}
.flip.open{background:var(--white); border-color:var(--fi)}
.flip.open .ffront{display:none}
.flip.open .fback{display:block}
/* ---------- rank ---------- */
.rank{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px 18px}
.rlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ritem{display:flex; align-items:center; gap:13px; background:var(--cream); border:1.5px solid var(--line);
border-radius:12px; padding:11px 14px}
.ritem.good{background:var(--green); border-color:var(--green-ink)}
.ritem.bad{background:var(--pink); border-color:var(--pink-ink)}
.rpos{width:25px; height:25px; border-radius:50%; background:var(--navy); color:#fff; flex:none;
display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.rtext{flex:1; font-size:13px; line-height:1.5}
.rmove{display:flex; gap:5px; flex:none}
.rmove button{font-family:inherit; cursor:pointer; width:28px; height:28px; border-radius:8px;
background:var(--white); border:1.5px solid var(--line); color:var(--navy); font-size:13px; line-height:1}
.rmove button:hover{border-color:var(--teal); color:var(--teal)}
.rmove button:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
@media (max-width:700px){ .hotwrap{grid-template-columns:1fr} }
/* ---------- calculator ---------- */
.calc{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:18px 20px 19px}
.chead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:13px}
.chead h4{margin:0; font-size:16px; font-weight:700}
.formula{font-family:Caveat,Poppins,cursive; font-size:26px; font-weight:700; color:var(--teal); line-height:1}
.presets{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.pset{font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; color:var(--navy);
background:var(--cream); border:1.5px solid var(--line); border-radius:999px; padding:6px 13px;
transition:background .16s, border-color .16s}
.pset:hover{background:#eef4f2; border-color:#bcd8d2}
.pset.on{background:var(--mint); border-color:var(--mint-ink); color:var(--mint-ink); font-weight:600}
.pset:focus-visible{outline:3px solid var(--bright); outline-offset:2px}
.fields{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:15px}
.fld{flex:1 1 150px; display:flex; flex-direction:column; gap:5px}
.fl{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-soft)}
.fi{display:flex; align-items:baseline; gap:6px; border-bottom:2px solid var(--line)}
.fi input{font-family:inherit; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums;
width:100%; border:none; background:transparent; color:inherit; padding:3px 0; -moz-appearance:textfield}
.fi input::-webkit-outer-spin-button,.fi input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.fi input:focus{outline:none}
.fi:focus-within{border-bottom-color:var(--bright)}
.fu{font-size:11.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap}
.cout{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--mint);
border-radius:12px; padding:13px 17px}
.col{font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--mint-ink)}
.cov{margin-left:auto; font-size:13px; color:var(--ink-soft)}
.cov b{font-size:27px; font-weight:700; color:var(--mint-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.cwork{margin:10px 0 0; font-size:12.5px; color:var(--slate); line-height:1.55; font-variant-numeric:tabular-nums}
.cnote{margin:10px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.55}
/* ---------- practice set ---------- */
.pracset{display:flex; flex-direction:column; gap:12px}
.prac{background:var(--white); border:1.5px solid var(--line); border-radius:15px; padding:16px 18px 17px; box-shadow:var(--shadow)}
.pq{display:flex; gap:13px; align-items:flex-start; margin-bottom:13px}
.pn{width:29px; height:29px; border-radius:50%; flex:none; background:var(--navy); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px}
.pqt{font-size:14px; line-height:1.6}
.pans{display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap}
.pin{display:flex; flex-direction:column; gap:5px; min-width:150px; flex:0 1 190px}
.pans .btn{padding:9px 18px; font-size:12.5px}
.pverdict{font-size:12.5px; font-weight:600; padding-bottom:9px}
.pverdict.good{color:var(--green-ink)}
.pverdict.bad{color:var(--pink-ink)}
.pwork{margin-top:15px; border-top:1.5px dashed var(--line); padding-top:14px;
display:flex; flex-direction:column; gap:11px}
.pstep h5{margin:0 0 4px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--teal)}
.pstep div{font-size:13px; line-height:1.6; font-variant-numeric:tabular-nums}
.ptip{display:flex; gap:10px; align-items:flex-start; background:var(--yellow); border-radius:11px; padding:11px 14px;
font-size:12.5px; line-height:1.55}
.ptip .ic{width:20px; height:20px; border-radius:50%; background:var(--yellow-ink); color:#fff; flex:none;
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:1px}
.pfinal{background:var(--mint); color:var(--mint-ink); border-radius:11px; padding:11px 15px;
font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.pfinal b{font-size:19px; letter-spacing:0; margin-left:8px; font-variant-numeric:tabular-nums}
/* ---------- figure ---------- */
.figrow{display:flex; gap:16px; align-items:flex-end; justify-content:center; flex-wrap:wrap;
background:var(--white); border:1.5px solid var(--line); border-radius:15px; padding:16px}
.figrow img{max-height:160px; width:auto; max-width:100%}
.figrow.wide{gap:22px}
.figrow.wide img{max-height:none; width:auto; max-width:min(100%,520px)}
.figcap{margin:9px 0 0; font-size:12px; color:var(--ink-soft); text-align:center; line-height:1.5}
/* ---------- split (text + art) ---------- */
.split{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
background:var(--white); border:1.5px solid var(--line); border-radius:15px; padding:17px 20px; box-shadow:var(--shadow)}
.split.rev{grid-template-columns:auto 1fr}
.split img{max-height:150px; width:auto}
.split h4{margin:0 0 9px; font-size:15px; font-weight:700}
/* ---------- footer ---------- */
.foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
border-top:1.5px solid var(--line); padding-top:13px; font-size:11px; color:var(--ink-soft)}
/* The brand mark leads the lesson, matching the masthead on every printable
sheet, so the footer carries the wordmark as text and the source line. The
mark itself is inlined at build time from assets/logo-wide.png rather than
pulled out of the source PDF. */
.foot .brand{font-weight:600; color:var(--navy); letter-spacing:.01em; flex:none}
/* Co-brand, decided 2026-09-09: Smart Nursing School leads and RN Student
Resources endorses beneath it. The footer keeps the RN wordmark and
RNstudentresources.com, which is the domain that actually resolves -
smartnursingschool.com is not registered yet, so it must not be printed
on 285 live pages as if it were. */
header .mast{display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin:0 0 15px}
header .mast img{height:40px; width:auto; display:block}
header .mast .from{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
font-weight:600; color:var(--teal)}
@media (max-width:820px){
.cmp{grid-template-columns:1fr}
.split,.split.rev{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }