/* Online edition of A Mathematics Refresher.
   Tokens deliberately match book-src/src/styles.css so the book and the
   companion app read as one product rather than two sites. */
:root{
 --ink:#22252e; --sub:#5a6172; --blue:#1f6feb; --blue2:#1859c4;
 --green:#2a9d8f; --grey:#656c7a;
 --paper:#fbf9f3; --card:#ffffff; --line:#e7e3d8; --soft:#f4f1e8;
 --shadow:0 1px 3px rgba(34,37,46,.07);
 --fig-dim:1;
 --measure:38rem;   /* prose: about 75 characters of Pagella */
 --wide:52rem;      /* figures, tables and display equations may reach this */
 --rail:19rem;      /* chapter list, left */
 --outline:14rem;   /* section list, right */
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
  --ink:#e9e6df; --sub:#a9b0bf; --blue:#5b9dff; --blue2:#7fb2ff;
  --green:#4fd1c0; --grey:#8b93a6;
  --paper:#181b23; --card:#20242e; --line:#333849; --soft:#262b37;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --fig-dim:.87;
 }
}
:root[data-theme="dark"]{
 --ink:#e9e6df; --sub:#a9b0bf; --blue:#5b9dff; --blue2:#7fb2ff;
 --green:#4fd1c0; --grey:#8b93a6;
 --paper:#181b23; --card:#20242e; --line:#333849; --soft:#262b37;
 --shadow:0 1px 3px rgba(0,0,0,.4);
 --fig-dim:.87;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
 margin:0;background:var(--paper);color:var(--ink);
 font-family:"TeX Gyre Pagella","Palatino Linotype",Palatino,Georgia,serif;
 line-height:1.62;-webkit-text-size-adjust:100%;
}
a{color:var(--blue)}
a:hover{color:var(--blue2)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:.7rem 1rem;background:var(--blue);color:#fff}
.skip:focus{left:0}

/* ---------- reading progress ---------- */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--blue);width:0;z-index:60;transition:width .1s linear}

/* ---------- layout ---------- */
.wrap{display:flex;min-height:100vh}
#rail{
 width:var(--rail);flex-shrink:0;border-right:1px solid var(--line);background:var(--card);
 position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
}
main{
 flex:1;min-width:0;padding:0 0 5rem;
 /* KaTeX keeps an absolutely-positioned MathML mirror for screen readers and
    draws stretchy delimiters as very wide SVG paths. Neither is painted, but
    both can extend the document's scroll width and hand a phone a horizontal
    scrollbar. Clip at the column; anything genuinely wide (tables, display
    equations) scrolls inside its own container, so nothing becomes unreachable. */
 overflow-x:clip;
}
/* The reading column and the section outline sit side by side, anchored to the
   left of the pane. Centring the text inside the pane put it 376px from the
   sidebar while figures started 26px from it, so nothing lined up and the
   widest thing on the page was always the picture. */
.shell{
 display:flex;
 gap:2.5rem;
 align-items:flex-start;
 max-width:84rem;
 padding:2.6rem 2rem 0 3.25rem;
}
.page{
 flex:1;
 min-width:0;
 /* Prose is held to a reading measure; equations, tables and figures may run
    wider — a display equation with a commentary column needs the room, and
    clipping it is what the EPUB had to be rescued from. Both start at the same
    left edge. Sections are transparent so pandoc's nesting keeps the grid. */
 display:grid;
 max-width:var(--wide);
 /* The measure is a fixed track and the extra width for figures is the flexible
    one, so as the window narrows it is the pictures that give ground, not the
    prose. Both keep the same left edge throughout. */
 grid-template-columns:
   [text-start] minmax(0,var(--measure))
   [text-end] minmax(0,1fr) [wide-end];
}
.page section{display:contents}
.page > *,.page section > *{grid-column:text-start/text-end}
/* Only pictures and tables take the extra width. A display equation stays in
   the reading column — KaTeX centres it, and a centred formula floating in a
   block wider than the paragraphs around it is the very mismatch this layout
   was fixing. Ones that still do not fit scroll inside themselves. */
.page .tablewrap,
.page figure.wide{grid-column:text-start/wide-end;justify-self:stretch;max-width:100%;min-width:0}
.page figure.wide{margin:1.7rem 0}
.page figure.wide img{margin:0 auto}

/* ---------- sidebar ---------- */
.brand{
 display:flex;align-items:center;gap:.5rem;
 padding:1.15rem 1.2rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2;
}
.brand a{text-decoration:none;color:var(--ink);flex:1;min-width:0}
.brand b{display:block;font-size:1.02rem;font-weight:normal}
.brand span{display:block;font-size:.74rem;color:var(--grey);font-style:italic;margin-top:.15rem}
.searchwrap{padding:.7rem .9rem;border-bottom:1px solid var(--line)}
#q{
 width:100%;font:inherit;font-size:.87rem;padding:.45rem .6rem;border:1px solid var(--line);
 border-radius:8px;background:var(--paper);color:var(--ink);caret-color:var(--blue);
}
#q::placeholder{color:var(--grey);opacity:1}
#results{list-style:none;margin:0;padding:0 .5rem .5rem;max-height:22rem;overflow-y:auto}
#results li{margin:0}
#results a{display:block;padding:.45rem .55rem;border-radius:7px;text-decoration:none;font-size:.83rem;line-height:1.4}
#results a:hover,#results a:focus-visible{background:var(--soft)}
#results .rc{display:block;font-size:.72rem;color:var(--grey)}
#results mark{background:transparent;color:var(--blue);font-weight:bold}
.nores{padding:.6rem .8rem;font-size:.83rem;color:var(--grey)}

nav.toc{padding:.6rem .5rem 2rem}
nav.toc ol{list-style:none;margin:0;padding:0}
nav.toc .part{
 font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
 margin:1.1rem .7rem .3rem;font-family:system-ui,sans-serif;
}
nav.toc a{
 display:flex;gap:.55rem;padding:.36rem .7rem;border-radius:8px;text-decoration:none;
 color:var(--ink);font-size:.87rem;line-height:1.35;
}
nav.toc a:hover{background:var(--soft)}
nav.toc a[aria-current="page"]{background:var(--blue);color:#fff}
nav.toc .n{color:var(--grey);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:1.3em}
nav.toc a[aria-current="page"] .n{color:#cfe0ff}

/* ---------- section outline (right) ----------
   Built from the chapter's own headings. It appears only above 1500px, the
   width at which it can be carved out without the reading column dropping
   below its measure — a narrower column is a worse trade than no outline. */
#outline{
 width:var(--outline);flex-shrink:0;position:sticky;top:4.5rem;
 max-height:calc(100vh - 7rem);overflow-y:auto;
 font-family:system-ui,sans-serif;
}
#outline:empty{display:none}
#outline .lbl{
 font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
 margin:0 0 .55rem .6rem;
}
#outline ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
#outline a{
 display:block;padding:.3rem .6rem;margin-left:-1px;
 border-left:1px solid transparent;
 text-decoration:none;color:var(--grey);font-size:.79rem;line-height:1.35;
}
#outline a:hover{color:var(--ink)}
#outline a[aria-current="true"]{color:var(--blue);border-left-color:var(--blue)}
#outline .sub{padding-left:1.3rem;font-size:.75rem}
@media (max-width:1500px){#outline{display:none}}

/* ---------- collapsing the chapter rail ----------
   Not a way to win space: above 1280px the reading column and the figure
   column are already at their cap and hiding the rail widens nothing. It is
   for reading without the list in the corner of your eye, and for laptops at
   1024–1200px, where the figure column really is being squeezed by up to
   180px. Because it buys no width on a large screen, the content centres
   when the rail goes — otherwise the page just slides left and looks
   abandoned against the edge. */
#railbtn{padding:.25rem .45rem;font-size:.9rem;line-height:1;flex-shrink:0}
#railshow{position:fixed;left:.75rem;top:.85rem;z-index:56;display:none}
@media (min-width:901px){
 .rail-collapsed #rail{display:none}
 .rail-collapsed #railshow{display:block}
 /* fit-content, not just auto margins: .shell is capped at 84rem, which is
    wider than a 1280px laptop, so auto margins had nothing to distribute and
    the column sat hard against the left edge. Shrink the box to what is
    actually in it, then centre that. */
 .rail-collapsed .shell{width:fit-content;max-width:100%;margin-inline:auto}
 /* with the rail gone the outline fits far sooner */
 @media (min-width:1200px){.rail-collapsed #outline{display:block}}
}
@media (max-width:900px){#railbtn{display:none}}

/* ---------- top bar (mobile) ---------- */
#top{
 display:none;position:sticky;top:0;z-index:50;align-items:center;gap:.7rem;
 padding:.6rem .85rem;background:color-mix(in srgb,var(--paper) 92%,transparent);
 backdrop-filter:blur(6px);border-bottom:1px solid var(--line);
}
#top .t{flex:1;min-width:0;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{
 font:inherit;font-size:1rem;line-height:1;padding:.4rem .6rem;border:1px solid var(--line);
 border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer;
}
.iconbtn:hover{background:var(--soft)}
#themebtn{position:fixed;right:1rem;top:1rem;z-index:55}

/* ---------- prose ---------- */
h1{font-size:1.95rem;line-height:1.18;margin:0 0 1.4rem;letter-spacing:-.01em}
h2{font-size:1.3rem;margin:2.4rem 0 .7rem;line-height:1.25}
h3{font-size:1.06rem;margin:1.8rem 0 .5rem}
p{margin:0 0 1.05rem}
.page > p:first-of-type{font-size:1.05rem;color:var(--sub)}
ul,ol{padding-left:1.3rem;margin:0 0 1.05rem}
li{margin:.3rem 0}
strong{font-weight:bold}
blockquote{
 margin:1.4rem 0;padding:.9rem 1.1rem;background:var(--soft);
 border-left:3px solid var(--blue);border-radius:0 9px 9px 0;
}
blockquote p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
 background:var(--soft);padding:.1rem .32rem;border-radius:4px}
/* The figures are drawn on cream, which is right in print and on a light page
   and a glaring slab on a dark one. Inverting them is not an option: colour
   carries meaning here — the text names the green and purple arrows — and an
   inversion would rename them. Dimming scales all three channels equally, so
   every hue survives exactly; only the glare goes. The border makes the panel
   read as a deliberate plate rather than a hole burned in the page. */
img{
 max-width:100%;height:auto;display:block;margin:1.6rem auto;border-radius:8px;
 filter:brightness(var(--fig-dim));border:1px solid var(--line);
}
figure{margin:1.6rem 0}

/* anchored headings */
.hanchor{opacity:0;margin-left:.4rem;text-decoration:none;color:var(--grey);font-size:.75em}
h2:hover .hanchor,h3:hover .hanchor,.hanchor:focus{opacity:1}

/* tables — must scroll rather than push the page sideways */
.tablewrap{width:100%;overflow-x:auto;margin:1.4rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;font-size:.92rem;min-width:100%}
th,td{border-bottom:1px solid var(--line);padding:.5rem .7rem;text-align:left;vertical-align:top}
thead th{border-bottom:2px solid var(--line);white-space:nowrap}

/* maths — the same rule the EPUB needed: never let it push the page wide */
.katex-display{overflow-x:auto;overflow-y:hidden;padding:.35rem 0}
.katex{font-size:1.02em}
.page p > .katex,.page li > .katex{max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:baseline}
@media (max-width:480px){.katex-display>.katex{font-size:.94em}}

/* ---------- chapter nav ---------- */
.flip{display:flex;gap:.8rem;justify-content:space-between;margin:3.2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.flip a{
 flex:1;max-width:48%;text-decoration:none;padding:.75rem .95rem;border:1px solid var(--line);
 border-radius:10px;background:var(--card);color:var(--ink);font-size:.9rem;
}
.flip a:hover{border-color:var(--blue);color:var(--blue)}
.flip .lbl{display:block;font-size:.7rem;color:var(--grey);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.15rem}
.flip .next{text-align:right;margin-left:auto}

/* ---------- contents page ---------- */
.contents{list-style:none;padding:0;margin:1.6rem 0 0}
.contents .part{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
 margin:1.8rem 0 .5rem;font-family:system-ui,sans-serif}
.contents a{display:flex;gap:.8rem;padding:.55rem .7rem;border-radius:9px;text-decoration:none;color:var(--ink)}
.contents a:hover{background:var(--soft)}
.contents .n{color:var(--grey);font-variant-numeric:tabular-nums;min-width:1.6em}
.formats{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.formats a{padding:.6rem 1rem;border:1px solid var(--line);border-radius:9px;text-decoration:none;
 background:var(--card);color:var(--ink);font-size:.9rem}
.formats a:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- footer ----------
   A chapter page had no way out except the rail and prev/next: nothing pointed
   back at the landing page, the companion app, or the author. It sits inside
   .page so it inherits the reading column's left edge in every layout state. */
.foot{
 margin:3.4rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line);
 font-family:system-ui,sans-serif;
}
.footlinks{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;margin:0 0 .8rem}
.footlinks a{font-size:.83rem;text-decoration:none}
.footlinks a:hover{text-decoration:underline}
.footnote{font-size:.76rem;color:var(--grey);margin:0;line-height:1.55}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- responsive ---------- */
#scrim{display:none}
@media (max-width:1240px){.shell{padding-left:2.25rem}}
@media (max-width:900px){
 :root{--rail:17rem}
 #top{display:flex}
 #themebtn{display:none}
 #rail{
  position:fixed;left:0;top:0;bottom:0;height:100dvh;z-index:70;
  transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow);
 }
 body.nav-open #rail{transform:none}
 body.nav-open #scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:65}
 .shell{padding:1.5rem 1.15rem 0}
 h1{font-size:1.6rem}
 .flip a{max-width:none}
}
@media print{
 #rail,#top,#themebtn,.flip,#prog,.skip,#outline,.footlinks{display:none!important}
 .shell{max-width:none;padding:0}
 body{background:#fff;color:#000}
}