/* ============================================================
   From Newton to M-Theory — house style
   ============================================================ */

:root{
  --bg:#fbfaf7;
  --bg-alt:#f3f1ec;
  --paper:#ffffff;
  --ink:#1b1b1d;
  --ink-soft:#4a4a50;
  --ink-faint:#83838c;
  --rule:#e0ddd5;
  --rule-soft:#eceae4;
  --accent:#1b4b80;
  --accent-soft:#e8eff7;
  --warn:#9a4a12;
  --warn-soft:#fbf0e5;
  --familiar:#5c3d86;
  --familiar-soft:#f1ecf8;
  --insight:#15654a;
  --insight-soft:#e6f3ee;
  --grind:#5a5a64;
  --grind-soft:#f2f2f0;
  --plain:#9c4257;
  --plain-soft:#fdf2f4;
  --plain-rule:#f0dade;
  --measure:44rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,Cambria,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

html[data-theme="dark"]{
  --bg:#15171b;
  --bg-alt:#1c1f24;
  --paper:#191c21;
  --ink:#dcdcd8;
  --ink-soft:#a9aab0;
  --ink-faint:#7b7d85;
  --rule:#2e323a;
  --rule-soft:#252930;
  --accent:#7fb0e8;
  --accent-soft:#1a2734;
  --warn:#e0a06a;
  --warn-soft:#2b2119;
  --familiar:#b79ce0;
  --familiar-soft:#241d31;
  --insight:#6dc9a5;
  --insight-soft:#152722;
  --grind:#9a9ca4;
  --grind-soft:#1f2228;
  --plain:#e3a0ac;
  --plain-soft:#231a1d;
  --plain-rule:#453035;
}

*{box-sizing:border-box}
/* the topnav is sticky and 42px tall; at 2rem a jumped-to heading landed
   underneath it */
html{scroll-behavior:smooth;scroll-padding-top:3.4rem}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

/* ---------- layout ---------- */
.wrap{display:flex;gap:0;align-items:flex-start;max-width:82rem;margin:0 auto}
.sidebar{
  position:sticky;top:0;flex:0 0 16rem;height:100vh;height:100dvh;overflow-y:auto;
  padding:2rem 1.25rem 3rem;border-right:1px solid var(--rule);
  font-family:var(--sans);font-size:.8rem;line-height:1.45;background:var(--bg-alt);
}
.main{flex:1 1 auto;min-width:0;padding:2.5rem 3rem 6rem}
.col{max-width:var(--measure)}
.col.wide{max-width:56rem}

@media (max-width:1000px){
  .sidebar{display:none}
  .main{padding:1.5rem 1.25rem 5rem}
  body{font-size:18px}
}

/* KaTeX keeps a hidden MathML copy for accessibility and copy-paste; it must never
   contribute to layout width on a narrow screen. */
.katex-mathml{position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important;white-space:nowrap!important}

/* ---------- phone ---------- */
@media (max-width:760px){
  html,body{overflow-x:hidden;max-width:100%}
  .wrap,.main,.col{max-width:100%;overflow-x:clip}
  img,canvas,svg,pre{max-width:100%}
  .callout,.worked,figure.fig,details.grind,.sol{overflow-wrap:break-word}
  body{font-size:17px;line-height:1.62}
  .main{padding:1.1rem .9rem 4rem}
  h1{font-size:1.7rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
  /* equation numbers move below the equation instead of crowding the margin */
  .eq{padding:0 0 1.5rem 0}
  .eqnum{top:auto;bottom:0;transform:none;font-size:.72rem}
  .katex{font-size:1em}
  .katex-display{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    padding-bottom:.3rem}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ctrls{gap:.7rem 1rem}
  .ctrl input[type=range]{width:7rem}
  #themer{top:.5rem;right:.5rem}
}

/* ---------- sidebar ---------- */
.sb-home{display:block;font-weight:600;color:var(--accent);text-decoration:none;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.4rem}
.sb-title{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .7rem;font-weight:600}
#sb-toc a{display:block;color:var(--ink-soft);text-decoration:none;
  padding:.28rem 0 .28rem .6rem;border-left:2px solid transparent}
#sb-toc a:hover{color:var(--accent)}
#sb-toc a.lvl3{padding-left:1.5rem;font-size:.75rem;color:var(--ink-faint)}
#sb-toc a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--sans);line-height:1.25;letter-spacing:-.011em}
h1{font-size:2.25rem;font-weight:700;margin:.2rem 0 .5rem}
h2{font-size:1.42rem;font-weight:650;margin:3.2rem 0 1rem;padding-top:1rem;
   border-top:1px solid var(--rule-soft)}
h3{font-size:1.08rem;font-weight:650;margin:2.1rem 0 .6rem;color:var(--ink)}
h4{font-size:.95rem;font-weight:650;margin:1.5rem 0 .4rem;color:var(--ink-soft)}

.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:650;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.subtitle{font-size:1.15rem;color:var(--ink-soft);font-style:italic;margin:.1rem 0 2rem}

p{margin:0 0 1.05rem}
a{color:var(--accent)}
strong{font-weight:650}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
code{font-family:var(--mono);font-size:.86em;background:var(--bg-alt);
  padding:.1em .34em;border-radius:3px}

ul,ol{margin:0 0 1.1rem;padding-left:1.4rem}
li{margin:.35rem 0}

/* ---------- callouts ---------- */
.callout{border-left:3px solid;padding:1rem 1.15rem .85rem;margin:1.6rem 0;
  border-radius:0 5px 5px 0;font-size:.96rem}
.callout .ct{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:.45rem}
.callout p:last-child{margin-bottom:0}

.callout.where{border-color:var(--accent);background:var(--accent-soft)}
.callout.where .ct{color:var(--accent)}
.callout.warn{border-color:var(--warn);background:var(--warn-soft)}
.callout.warn .ct{color:var(--warn)}
.callout.familiar{border-color:var(--familiar);background:var(--familiar-soft)}
.callout.familiar .ct{color:var(--familiar)}
.callout.insight{border-color:var(--insight);background:var(--insight-soft)}
.callout.insight .ct{color:var(--insight)}
.callout.brick{border-color:var(--ink-soft);background:var(--bg-alt);border-left-width:3px}
.callout.brick .ct{color:var(--ink-soft)}

/* A sitting break. Not a callout — a rule across the column with a few words on
   it, saying that this is a natural place to stop and that what follows starts
   something new. Chapters run fifteen to twenty thousand words and a reader with
   an evening after clinic needs to be told where the seams are; without one, the
   only visible unit is the whole chapter. Deliberately quiet: it is a road sign,
   not a section. */
.pause{display:flex;align-items:center;gap:1rem;margin:3.2rem 0 2.8rem;
  color:var(--ink-faint);font:600 .68rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;-webkit-user-select:none;user-select:none}
.pause::before,.pause::after{content:"";flex:1;height:1px;background:var(--rule)}
.pause span{white-space:nowrap}
@media (max-width:760px){.pause{margin:2.4rem 0 2rem;font-size:.63rem;letter-spacing:.1em}}

/* "In plain terms" — the most frequent callout, so it is deliberately calm:
   a full tinted panel rather than another coloured left-rule competing for attention. */
.callout.plain{border:1px solid var(--plain-rule);border-left:3px solid var(--plain);
  background:var(--plain-soft);border-radius:5px;padding:.95rem 1.15rem .8rem;
  margin:1.8rem 0;font-size:.97rem;line-height:1.62}
.callout.plain .ct{color:var(--plain);letter-spacing:.11em}
.callout.plain p{margin-bottom:.7rem}
.callout.plain p:last-child{margin-bottom:0}
.callout.plain em{color:var(--ink)}
.callout.plain .pnum{opacity:.62;margin-left:.4rem;letter-spacing:.06em}
@media print{.callout.plain{background:#fdf6f7;border-color:#eddcdf}}

/* tools-needed strip */
.tools{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);
  background:var(--bg-alt);border:1px solid var(--rule-soft);border-radius:5px;
  padding:.7rem .95rem;margin:1.4rem 0 2rem}
.tools b{font-weight:650;color:var(--ink);letter-spacing:.04em;
  font-size:.7rem;text-transform:uppercase}

/* ---------- reference apparatus ----------
   Used by the clinical books, where a paragraph carries citations, named
   trials and defined terms, and the prose has to stay readable through all
   three. So each mark is quiet: a citation is a raised numeral, a trial is the
   acronym in small caps, a defined term is a dotted underline. None of them
   is a coloured link in running text, because a paragraph with six coloured
   words in it stops being a paragraph. */
/* The raising is the <sup> element's job. Doing it again here would stack the
   two, and the correction for that needs :has(), which older iOS does not
   have -- so the mark would sit wrong on exactly the phones this book is read
   on. Left to the browser, it is right everywhere. */
.cite{font-family:var(--sans);font-weight:600;text-decoration:none;
  color:var(--accent);padding:0 .12em}
.cite:hover{text-decoration:underline}
.trial{font-family:var(--sans);font-size:.88em;font-weight:600;letter-spacing:.02em;
  color:var(--ink);border-bottom:1px solid var(--rule);cursor:help}
.gloss{border-bottom:1px dotted var(--ink-faint);cursor:help}
.xref{text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.xref:hover{border-bottom-color:var(--accent)}
/* A chapter that is planned but not yet written. Naming it and refusing to
   link it is the honest form: the reader learns the book intends to cover it
   and is not sent to a page that does not exist. */
.xref.pending{color:var(--ink-soft);border-bottom:1px dashed var(--rule);cursor:help}

.callout.interplay{border-color:var(--familiar);background:var(--familiar-soft)}
.callout.interplay .ct{color:var(--familiar)}
.callout.practice{border-color:var(--insight);background:var(--insight-soft)}
.callout.practice .ct{color:var(--insight)}
.ct-see{font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);
  margin:.6rem 0 0 !important}
.to-come .ct{color:var(--ink-faint)}
.to-come ol{font-size:.9rem;color:var(--ink-soft);margin-bottom:.2rem}

.refs-head{font-size:1.05rem !important;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--sans);font-weight:650;color:var(--ink-soft)}
ol.refs{font-size:.88rem;line-height:1.5;color:var(--ink-soft);padding-left:1.6rem}
ol.refs li{margin:.55rem 0;padding-left:.15rem}
ol.refs li:target{background:var(--accent-soft);border-radius:4px}
ol.refs em{font-style:italic}

/* A numeral is not a touch target. Until a citation opens a sheet of its own,
   give it the room Apple asks for rather than leaving a 7px digit on a phone. */
@media (pointer:coarse){
  .cite{padding:.35em .45em;margin:0 -.15em}
  .trial,.gloss,.xref{padding:.15em 0}
}

/* ---------- equations ---------- */
.eq{position:relative;margin:1.5rem 0;padding:0 3.2rem 0 0;overflow-x:auto;overflow-y:hidden}
.eq .katex-display{margin:.35rem 0}
.eqnum{position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:.8rem;color:var(--ink-faint);user-select:none}
.eq:target{background:var(--accent-soft);border-radius:4px}
.eqref{font-family:var(--sans);font-size:.85em;text-decoration:none;
  color:var(--accent);white-space:nowrap}
.eqref:hover{text-decoration:underline}
.katex{font-size:1.045em}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.2rem 0}

/* ---------- grind boxes ---------- */
details.grind{border:1px solid var(--rule);border-radius:5px;margin:1.5rem 0;
  background:var(--grind-soft)}
details.grind>summary{cursor:pointer;padding:.6rem .9rem;font-family:var(--sans);
  font-size:.82rem;font-weight:600;color:var(--grind);list-style:none;
  display:flex;align-items:center;gap:.5rem;user-select:none}
details.grind>summary::-webkit-details-marker{display:none}
details.grind>summary::before{content:"▸";font-size:.85rem;transition:transform .15s}
details.grind[open]>summary::before{transform:rotate(90deg)}
details.grind>summary:hover{color:var(--accent)}
.grind-body{padding:.2rem 1.1rem 1rem;font-size:.95rem;border-top:1px solid var(--rule-soft)}
.grind-body>:first-child{margin-top:.9rem}

/* ---------- worked example ---------- */
.worked{border:1px solid var(--rule);border-radius:6px;padding:1.1rem 1.3rem .9rem;
  margin:2rem 0;background:var(--paper)}
.worked>.ct{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.6rem}

/* ---------- problems ---------- */
.problems{margin:2.5rem 0 1rem}
.prob{border-top:1px solid var(--rule-soft);padding:1.1rem 0 .4rem}
.prob .pnum{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint)}
.prob details{margin-top:.7rem}
.prob details>summary{cursor:pointer;font-family:var(--sans);font-size:.8rem;font-weight:600;
  color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--rule);border-radius:20px;padding:.25rem .8rem;user-select:none}
.prob details>summary::-webkit-details-marker{display:none}
.prob details>summary::before{content:"+";font-weight:700}
.prob details[open]>summary::before{content:"−"}
.prob details[open]>summary{background:var(--accent-soft)}
.sol{padding:.9rem 0 .3rem;font-size:.96rem;border-left:2px solid var(--rule);
  padding-left:1rem;margin-top:.9rem}

/* ---------- interactives ---------- */
figure.fig{margin:2.2rem 0;padding:1rem;border:1px solid var(--rule);border-radius:6px;
  background:var(--paper)}
figure.fig canvas{display:block;width:100%;height:auto;border-radius:3px}
figcaption{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);
  margin-top:.75rem;line-height:1.5}
figcaption b{color:var(--ink);font-weight:650}
.ctrls{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;
  margin-top:.85rem;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.ctrl{display:flex;align-items:center;gap:.5rem}
.ctrl label{white-space:nowrap;font-weight:600}
.ctrl input[type=range]{width:8.5rem;accent-color:var(--accent)}
.ctrl output{font-family:var(--mono);font-size:.78rem;color:var(--accent);
  min-width:3.6rem;display:inline-block}
.ctrl button{font-family:var(--sans);font-size:.78rem;font-weight:600;cursor:pointer;
  border:1px solid var(--rule);background:var(--bg-alt);color:var(--ink);
  border-radius:4px;padding:.3rem .7rem}
.ctrl button:hover{border-color:var(--accent);color:var(--accent)}
.ctrl button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;margin:1.6rem 0;font-size:.93rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
th{font-family:var(--sans);font-size:.75rem;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
/* math must never be uppercased or letter-spaced by table-header styling */
th .katex,th .katex *{text-transform:none;letter-spacing:normal;font-size:1em}

/* ---------- nav ---------- */
.chapnav{display:flex;justify-content:space-between;gap:1rem;margin:4rem 0 0;
  padding-top:1.5rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.85rem}
.chapnav a{text-decoration:none;color:var(--accent);max-width:45%}
.chapnav a span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.15rem}
.chapnav a.next{text-align:right}
.chapnav .dead{color:var(--ink-faint);opacity:.4}

/* ---------- mobile section drawer ---------- */
/* Below 1000px the sidebar is gone and a chapter is one uninterrupted scroll.
   This puts the top-level sections back within reach of a thumb, and takes the
   theme toggle in with them. Desktop is untouched: the sidebar is still there,
   and none of this is ever displayed. */
#mnav-btn,#mnav,#mnav-scrim{display:none}

@media (max-width:1000px){
  /* The toggle moves into the drawer — but only where there is a drawer to move
     it into. The landing page has no chapter body and builds none, and must keep
     its own toggle. book.js sets .has-mnav when it builds one. */
  html.has-mnav #themer{display:none}

  /* the topnav is sticky and 56px tall here; without this a section jump lands
     with its heading hidden underneath it */
  html{scroll-padding-top:4.2rem}

  #mnav-btn{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:60;
    right:calc(.85rem + env(safe-area-inset-right));
    bottom:calc(1rem + env(safe-area-inset-bottom));
    width:2.95rem;height:2.95rem;padding:0;
    border:1px solid var(--rule);border-radius:50%;
    background:var(--bg-alt);color:var(--ink-soft);cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.16);
    -webkit-tap-highlight-color:transparent;
  }
  #mnav-btn:active{background:var(--accent-soft);color:var(--accent)}
  #mnav-ico{position:relative;display:block;width:1.05rem;height:.72rem}
  #mnav-ico i{position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;
    background:currentColor;transition:transform .2s ease,opacity .2s ease}
  #mnav-ico i:nth-child(1){top:0}
  #mnav-ico i:nth-child(2){top:50%;margin-top:-.75px}
  #mnav-ico i:nth-child(3){bottom:0}
  #mnav-btn.open #mnav-ico i:nth-child(1){transform:translateY(.35rem) rotate(45deg)}
  #mnav-btn.open #mnav-ico i:nth-child(2){opacity:0}
  #mnav-btn.open #mnav-ico i:nth-child(3){transform:translateY(-.35rem) rotate(-45deg)}

  #mnav-scrim{display:block;position:fixed;inset:0;z-index:61;
    background:rgba(0,0,0,.42);opacity:0;pointer-events:none;
    transition:opacity .24s ease;touch-action:none}
  #mnav-scrim.open{opacity:1;pointer-events:auto}

  #mnav{
    display:flex;flex-direction:column;
    position:fixed;top:0;right:0;z-index:62;
    width:min(21rem,86vw);height:100%;
    background:var(--bg-alt);border-left:1px solid var(--rule);
    box-shadow:-6px 0 24px rgba(0,0,0,.18);
    font-family:var(--sans);
    padding:calc(.95rem + env(safe-area-inset-top)) 0 calc(.65rem + env(safe-area-inset-bottom));
    transform:translateX(101%);visibility:hidden;
    /* visibility flips at once on the way in, so the panel can take focus
       immediately, and waits for the slide to finish on the way out */
    transition:transform .24s ease,visibility 0s linear .24s;
    overscroll-behavior:contain;
  }
  #mnav.open{transform:none;visibility:visible;
    transition:transform .24s ease,visibility 0s linear 0s}

  .mn-head{padding:0 1.15rem .7rem;border-bottom:1px solid var(--rule)}
  .mn-kicker{margin:0 0 .25rem;font-size:.66rem;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-faint)}
  .mn-title{margin:0;font-size:.98rem;font-weight:650;line-height:1.3;color:var(--ink)}

  .mn-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.35rem 0 .6rem}
  .mn-list a{display:block;padding:.72rem 1.15rem;font-size:.88rem;line-height:1.35;
    color:var(--ink-soft);text-decoration:none;border-left:3px solid transparent;
    -webkit-tap-highlight-color:transparent}
  .mn-list a.active{color:var(--accent);border-left-color:var(--accent);
    background:var(--accent-soft);font-weight:650}

  .mn-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    padding:.7rem 1.15rem 0;border-top:1px solid var(--rule)}
  .mn-foot a{font-size:.78rem;font-weight:600;color:var(--accent);text-decoration:none}
  #mn-theme{border:1px solid var(--rule);border-radius:20px;background:var(--paper);
    color:var(--ink-soft);padding:.4rem .85rem;font-family:var(--sans);font-size:.76rem;
    font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
}

@media (prefers-reduced-motion:reduce){
  #mnav,#mnav-scrim,#mnav-ico i{transition:none}
}

/* ---------- theme toggle ---------- */
#themer{position:fixed;top:.8rem;right:.9rem;z-index:50;cursor:pointer;
  border:1px solid var(--rule);background:var(--bg-alt);color:var(--ink-soft);
  border-radius:20px;padding:.3rem .7rem;font-family:var(--sans);font-size:.72rem;
  font-weight:600;letter-spacing:.04em}
#themer:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- print / PDF ---------- */
@media print{
  .sidebar,#themer,.chapnav,#mnav,#mnav-btn,#mnav-scrim{display:none!important}
  .wrap{display:block;max-width:none}
  .main{padding:0}
  .col,.col.wide{max-width:none}
  body{font-size:10.5pt;line-height:1.5;background:#fff;color:#000}
  h1{font-size:20pt} h2{font-size:14pt} h3{font-size:11.5pt}
  h2,h3,h4{break-after:avoid;page-break-after:avoid}
  .eq,figure.fig,.worked,.callout,.prob,table{break-inside:avoid;page-break-inside:avoid}
  details.grind,details{break-inside:auto}
  details.grind>summary,.prob details>summary{color:#555}
  figure.fig canvas{max-height:8.5cm}
  a{color:#000;text-decoration:none}
  .callout,.worked,figure.fig{border-color:#bbb}
}

/* ---------- index page ---------- */
.hero{padding:1rem 0 2rem;border-bottom:1px solid var(--rule);margin-bottom:2.5rem}
.part{margin:2.8rem 0 0}
.part-head{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .3rem}
.part-sub{font-size:.95rem;color:var(--ink-soft);font-style:italic;margin:0 0 1rem}
.clist{list-style:none;margin:0;padding:0}
.clist li{display:flex;gap:.9rem;align-items:baseline;padding:.42rem 0;
  border-bottom:1px solid var(--rule-soft)}
.cnum{font-family:var(--mono);font-size:.8rem;color:var(--ink-faint);flex:0 0 2.6rem}
.clist a{text-decoration:none;font-weight:600}
.clist a:hover{text-decoration:underline}
.clist .pending{color:var(--ink-faint);font-weight:400}
.tag{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.12rem .42rem;border-radius:3px;margin-left:.5rem;
  background:var(--familiar-soft);color:var(--familiar);white-space:nowrap}
.tag.ready{background:var(--insight-soft);color:var(--insight)}
/* marks a chapter whose prose has been rebuilt in the plain-language register */
.tag.clear{background:var(--familiar-soft);color:var(--familiar)}

/* ---------- Through-Line ---------- */
.callout.plain.bridge{background:transparent;border:0;border-left:3px solid var(--plain);
  padding:.2rem 0 .2rem 1.1rem;margin:3rem 0 2rem;font-size:1.04rem;font-style:italic;
  color:var(--ink-soft)}
.callout.plain.bridge p:last-child{margin-bottom:0}
/* the closing passage ends the essay, so it gets a rule above it and a little air */
.callout.plain.bridge.tl-closing{border-top:1px solid var(--rule);padding-top:2rem;
  margin-top:4.5rem;margin-bottom:3rem}
.tl-item{position:relative;padding-left:3.4rem;margin:0 0 1.6rem}
.tl-num{position:absolute;left:0;top:.35rem;font-family:var(--sans);font-size:.72rem;
  font-weight:650;letter-spacing:.05em;color:var(--plain);opacity:.75}
.tl-item p{margin-bottom:.75rem}
.tl-item p:last-child{margin-bottom:0}
h3 a{text-decoration:none}
@media (max-width:760px){.tl-item{padding-left:0}
  .tl-num{position:static;display:block;margin-bottom:.3rem}}

/* ---------- site top navigation (web build only) ---------- */
.topnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.62rem 1.4rem;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:.82rem}
.topnav .brand{font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.topnav-links{display:flex;gap:1.4rem}
.topnav-links a{color:var(--ink-soft);text-decoration:none;font-weight:550}
.topnav-links a:hover{color:var(--accent)}
.topnav+.wrap .sidebar{top:2.6rem;height:calc(100vh - 2.6rem);height:calc(100dvh - 2.6rem)}
/* the theme toggle is position:fixed and would otherwise sit on top of the last nav link */
.topnav{padding-right:6rem}
@media (max-width:760px){
  .topnav{padding:.5rem .8rem;padding-right:5.2rem;font-size:.76rem}
  .topnav-links{gap:.9rem}
}
/* Where the drawer exists it takes the theme toggle with it, and the gutter the
   topnav was holding open for that toggle goes back to the links. */
@media (max-width:1000px){html.has-mnav .topnav{padding-right:1.4rem}}
@media (max-width:760px){html.has-mnav .topnav{padding-right:.8rem}}


/* ---------- narrow viewports, including a phone turned sideways ----------
   These were written for phones and gated at 760px, which is where the bug
   was: an iPhone in landscape is 844 to 932 CSS pixels, so rotating the
   device switched off the very rules that keep a wide equation or a wide
   table reachable. ch4-7's 858px table was clipped with no way to scroll it.
   The guards now cover a rotated phone and a portrait tablet, and the
   equation scroller is unconditional because it costs nothing when the
   maths already fits. */
.katex-display{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
@media (max-width:1000px){
  html,body{overflow-x:hidden;max-width:100%}
  .wrap,.main,.col{max-width:100%}
  img,canvas,svg,pre{max-width:100%}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* .col clips its overflow, so anything wider than the column was cut rather
     than scrolled: at 375px an interactive figure lost about 214px off its
     right edge, readouts included, with nothing to say so. Letting the figure
     scroll inside itself keeps the clip on the page and off the content. */
  figure.fig{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
}
@media (max-width:560px){
  /* the readouts carry an inline min-width to stop the numbers jittering as a
     slider moves; on a phone that guarantee is worth less than the words */
  .ctrl output,.ctrls output{min-width:0!important}
}

/* ---------- touch targets ----------
   Apple asks for 44pt. The top bar's links were 12 to 20 pixels tall, which is
   a coin toss on a phone. Only pointer:coarse is touched, so the desktop bar
   keeps its proportions. */
@media (pointer:coarse){
  .topnav{padding-top:.35rem;padding-bottom:.35rem}
  .topnav .brand,.topnav-links a{display:inline-flex;align-items:center;min-height:44px}
  .topnav-links{gap:1.1rem}
  /* the mobile navigation drawer's own footer, and the controls under a figure */
  .mn-foot a,.mn-foot button{display:inline-flex;align-items:center;min-height:44px}
  .ctrl button,.ctrls button{min-height:44px;padding-top:.4rem;padding-bottom:.4rem}
  /* a 16px slider is hard to catch with a thumb; the track keeps its look */
  .ctrl input[type=range]{height:44px;background:transparent}
  .ctrl input[type=range]::-webkit-slider-runnable-track{height:4px}
  .ctrl input[type=range]::-webkit-slider-thumb{margin-top:-8px}
  /* the chapter list is navigation, not prose: give each row a tappable height */
  .clist li{min-height:44px;display:flex;align-items:baseline;padding-top:.3rem;padding-bottom:.3rem}
  .clist li>span>a{display:inline-block;padding:.35rem 0}
}
/* Inline links inside running prose are left at their natural size on purpose:
   padding them to 44px would open gaps between the lines of a paragraph, and
   the 44pt guidance is about standalone controls rather than words in a
   sentence. The chapter list, the navigation drawer and the figure controls
   are handled above; a cross-reference mid-sentence is not. */

/* ---------- breast-cancer, from book.json ---------- */
:root{--bg:#f7f3f4;--bg-alt:#ede9ea;--ink:#1a171c;--accent:#8e2a5f;--accent-soft:#ecdfe5}
html[data-theme="dark"]{--accent:#d878a6;--accent-soft:#282129}