/* ===== CSCS Study Guide — shared stylesheet ===== */
:root{
  /* Medical white/blue palette, gold headings. --red/--red-br/--red-solid keep
     their names (hundreds of call sites) but hold blue/gold values, not red.
     Verified WCAG AA via build/contrast.js. */
  --bg:#f6fafd; --bg2:#ffffff; --bg3:#eaf2fa; --line:#d6e3ee;
  --tx:#122642; --tx2:#48607a; --tx3:#4d6685;
  --red:#1565c0; --amber:#976007; --green:#1c7b44; --blue:#0069d6; --purple:#803bff;
  --red-br:#96700a;   /* gold: large rules and big headings */
  --red-solid:#0b5ed7;/* filled controls with white text */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  /* 115 call sites (95 of them fill= on SVG labels) predate this alias. An unresolvable
     var() in a presentation attribute is invalid at computed-value time, so those labels
     fell back to fill's initial value - black - and vanished in dark mode. */
  --muted:var(--tx2);
}
@media (prefers-color-scheme: light){
  :root{--bg:#f6fafd;--bg2:#ffffff;--bg3:#eaf2fa;--line:#d6e3ee;
        --tx:#122642;--tx2:#48607a;--tx3:#4d6685;
        --red:#1565c0;--amber:#976007;--green:#1c7b44;--blue:#0069d6;--purple:#803bff;
        --red-br:#96700a;}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);
     font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}

/* ---- layout ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 26px 120px}
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .inner{max-width:1180px;margin:0 auto;padding:11px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--tx2);text-decoration:none;font-size:13.5px;font-weight:600}
.topbar a:hover{color:var(--red)}
.brand{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700}
.spacer{flex:1}

/* ---- chapter header ---- */
.chhead{padding:52px 0 30px;border-bottom:3px solid var(--red-br);margin-bottom:34px}
.chnum{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700}
.chhead h1{font-size:clamp(30px,4.6vw,46px);line-height:1.08;margin:10px 0 14px;letter-spacing:-.02em;font-weight:800;color:var(--red-br)}
.chmeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--tx2);background:var(--bg2)}
.pill.hot{border-color:var(--red-br);color:var(--red)}
.pill.warm{border-color:var(--amber);color:var(--amber)}

/* ---- typography ---- */
h2{font-size:27px;margin:52px 0 6px;letter-spacing:-.015em;font-weight:800;scroll-margin-top:80px}
h2::before{content:"";display:block;width:46px;height:3px;background:var(--red);margin-bottom:14px}
h3{font-size:19.5px;margin:32px 0 8px;font-weight:700;color:var(--tx);scroll-margin-top:80px}
h4{font-size:15px;margin:22px 0 6px;font-weight:700;color:var(--amber);
   font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
p{margin:11px 0}
ul,ol{margin:11px 0;padding-left:22px}
li{margin:6px 0}
li>ul,li>ol{margin:5px 0}
strong{color:var(--tx);font-weight:700}
em{color:var(--amber);font-style:italic}
code{font-family:var(--mono);font-size:.88em;background:var(--bg3);padding:2px 6px;border-radius:4px;color:var(--amber)}
a{color:var(--blue)}
.lead{font-size:18.5px;color:var(--tx2);font-family:var(--serif);line-height:1.65}

/* ---- boxes ---- */
.box{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:18px 22px;margin:22px 0}
.box>h4:first-child,.box>.bt:first-child{margin-top:0}
.bt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 10px}

.hy{border:1px solid var(--red);background:color-mix(in srgb,var(--red) 9%,var(--bg2));border-radius:12px;padding:18px 22px;margin:26px 0}
.hy .bt{color:var(--red)}
.hy ul{padding-left:20px}
.hy li{margin:7px 0}

.mem{border:1px solid var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--bg2));border-radius:12px;padding:18px 22px;margin:24px 0}
.mem .bt{color:var(--amber)}

.pit{border:1px solid var(--purple);background:color-mix(in srgb,var(--purple) 8%,var(--bg2));border-radius:12px;padding:18px 22px;margin:24px 0}
.pit .bt{color:var(--purple)}

.def{border-left:3px solid var(--blue);background:var(--bg2);padding:12px 18px;margin:16px 0;border-radius:0 8px 8px 0}
.def b{color:var(--blue)}

/* ---- number cards ---- */
.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin:22px 0}
.num{border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:14px 15px}
.num b{display:block;font-family:var(--mono);font-size:23px;color:var(--red);letter-spacing:-.02em;line-height:1.15}
.num span{display:block;font-size:12.5px;color:var(--tx2);margin-top:6px;line-height:1.4}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
table{border-collapse:collapse;width:100%;font-size:14.3px;min-width:520px}
caption{caption-side:top;text-align:left;padding:14px 18px 10px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:700}
th{background:var(--bg3);text-align:left;padding:10px 14px;font-size:12px;font-weight:700;
   letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);border-bottom:1px solid var(--line);vertical-align:bottom}
td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:color-mix(in srgb,var(--red) 5%,transparent)}
td.n,th.n{font-family:var(--mono);white-space:nowrap}
.hi td{background:color-mix(in srgb,var(--red) 8%,transparent)}

/* ---- figures / svg ---- */
figure{margin:26px 0;border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:20px;overflow-x:auto}
/* Figures shrink to fit, but never below 80% of natural width (an inline min-width per
   figure). Past that the FIGURE scrolls instead: scaling an 860px diagram onto a 375px
   phone would render its 11px labels at 5px. */
figure svg{display:block;height:auto;max-width:100%;margin:0 auto}
figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx3);margin-top:14px;text-align:center}
.svg-t{font-family:-apple-system,Helvetica,Arial,sans-serif}

/* ---- quiz ---- */
.quiz{margin-top:14px}
.q{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:16px 20px;margin:14px 0}
.q .qn{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.14em;font-weight:700}
.q p.qq{font-weight:600;margin:6px 0 10px}
.q ol{list-style:upper-alpha;margin:0 0 6px;padding-left:26px}
.q li{margin:4px 0;color:var(--tx2)}
.ans{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.ans summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);font-weight:700;list-style:none}
.ans summary::-webkit-details-marker{display:none}
.ans summary::before{content:"▸ ";}
.ans[open] summary::before{content:"▾ ";}
.ans p{font-size:14.5px;color:var(--tx2);margin:8px 0 0}
.ans b{color:var(--green)}

/* ---- index page ---- */
.hero{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(38px,7vw,68px);line-height:1;margin:14px 0;letter-spacing:-.035em;font-weight:900;color:var(--red-br)}
.hero .sub{font-size:19px;color:var(--tx2);max-width:660px;font-family:var(--serif)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:26px 0}
.card{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:18px 20px;
  text-decoration:none;color:inherit;display:block;transition:.14s}
.card:hover{border-color:var(--red);transform:translateY(-2px)}
.card .cn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red);font-weight:700}
.card h3{margin:7px 0 8px;font-size:17.5px;line-height:1.25}
.card p{font-size:13.5px;color:var(--tx2);margin:0}
.card .tags{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
.dom{margin:46px 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:9px}

/* ---- nav footer ---- */
.pgnav{display:flex;justify-content:space-between;gap:14px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.pgnav a{flex:1;border:1px solid var(--line);border-radius:10px;padding:14px 18px;text-decoration:none;color:var(--tx2);font-size:14px}
.pgnav a:hover{border-color:var(--red);color:var(--tx)}
.pgnav a.r{text-align:right}
.pgnav span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--tx3);margin-bottom:4px}

/* ---- TOC sidebar (chapter pages) ---- */
.toc{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:16px 20px;margin:0 0 30px}
.toc .bt{color:var(--tx3)}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:26px}
.toc li{margin:4px 0;font-size:14px;break-inside:avoid}
.toc a{color:var(--tx2);text-decoration:none}
.toc a:hover{color:var(--red)}
@media(max-width:720px){.toc ol{columns:1}}

/* ---- mobile ----
   Everything below 640px. The 520px table floor above is a desktop affordance;
   on a phone it is the single largest cause of sideways scrolling. */
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px 90px}
  table{min-width:0;font-size:14px}
  th,td{padding:8px 10px}
  th{font-size:11.5px}
  figure{padding:14px}

  /* wide tables become one labelled card per row */
  table.stack,table.stack tbody,table.stack tr,table.stack td,table.stack caption{display:block;width:100%}
  table.stack thead{display:none}
  table.stack tr{padding:11px 0;border-bottom:1px solid var(--line)}
  table.stack tbody tr:last-child{border-bottom:none}
  table.stack tr:hover{background:none}
  table.stack td{border:none;padding:4px 14px;display:flex;gap:12px;align-items:baseline;
    overflow-wrap:anywhere}
  table.stack td::before{content:attr(data-label);flex:0 0 40%;color:var(--tx2);
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    font-weight:700;line-height:1.5}
  table.stack td[data-label=""]::before{display:none}
  /* the value is one flex item wrapping (possibly) several inline nodes (text + <b>);
     min-width:0 lets it shrink below its children's combined intrinsic width so it wraps
     instead of forcing the row wider than the viewport. overflow-wrap:anywhere (inherited
     from td, above) covers what min-width:0 can't: a single unbroken token -- a long
     unhyphenated phrase or number range -- wider than the shrunk column itself. */
  table.stack td>.v{flex:1 1 auto;min-width:0}
  table.stack td.n{white-space:normal}
  /* numbers.html styles .tw td:first-child nowrap (bare red mono, meant for a short key
     value) at (0,2,1) specificity -- higher (0,2,2) here overrides it for stacked tables,
     where the first column isn't always short (e.g. Table 22.3's phase names) */
  table.stack td:first-child{white-space:normal}
  table.stack .hi td{background:none}
  table.stack tr.hi{background:color-mix(in srgb,var(--red) 8%,transparent);border-radius:8px}

  /* one non-wrapping row of nav; 44px minimum on everything touchable */
  .topbar .inner{padding:4px 16px;gap:2px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar .inner::-webkit-scrollbar{display:none}
  .topbar a{white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;
    min-height:44px;padding:0 10px}
  /* higher specificity than ".topbar a" above (0,2,1 vs 0,1,1) so display:none wins */
  .topbar a.deskonly{display:none}
  .topbar .spacer,.topbar .pill{display:none}
  .chhead{padding:30px 0 22px}
  .toc li{margin:0}
  .toc a{display:block;min-height:44px;display:flex;align-items:center}
  .pgnav{flex-direction:column}
  .pgnav a{min-height:56px}
  .pgnav a.r{text-align:left}
  .ans summary{min-height:44px;display:flex;align-items:center}
  .card{padding:16px 18px}
  /* narrowing the column floor to 140px (from the 168px base) leaves too little room for
     .num b's 23px bold mono labels when a single word is long ("CONTRAINDICATION",
     "Physiological analysis") -- overflow-wrap:anywhere (same pattern as table.stack td
     above) lets that token wrap instead of forcing the grid, and the page, wider */
  .nums{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .num b{overflow-wrap:anywhere}
  #top.on{display:flex}
}

/* ---- back to top (shown on phones once you are 1200px down) ---- */
#top{position:fixed;right:14px;bottom:14px;z-index:60;width:48px;height:48px;
  border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--tx2);
  font-size:20px;line-height:1;padding:0;cursor:pointer;display:none;
  align-items:center;justify-content:center;box-shadow:0 2px 14px rgba(0,0,0,.35)}
#top:active{border-color:var(--red);color:var(--red)}

/* ---- print ---- */
@media print{
  :root{--bg:#fff;--bg2:#fff;--bg3:#f4f4f4;--line:#bbb;--tx:#000;--tx2:#333;--tx3:#666}
  body{font-size:10.5pt}
  .topbar,.pgnav,.toc{display:none}
  .ans{display:block}.ans summary{display:none}
  h2{page-break-after:avoid;margin-top:26px}h3{page-break-after:avoid}
  .box,.hy,.mem,.pit,.tw,figure,.q{page-break-inside:avoid}
  .chhead{page-break-before:always;padding-top:0}
  a{color:#000;text-decoration:none}
  strong{color:#000}
}