/* ---------------------------------------------------------------------------
   Course notes styling.

   Goal: read like a well-set textbook, not like converted LaTeX. tex4ht's own
   output is structurally sound but visually plain, and it marks every theorem-
   like block with one generic class — so build.py tags them by type first and
   this file styles them apart.

   Body text is a serif at a constrained measure, which is what makes long
   mathematical prose readable; the interface around it (sidebar, nav) is sans,
   so chrome never competes with content.
   --------------------------------------------------------------------------- */

:root{
  --bg:#ffffff; --surface:#ffffff; --alt:#f7f8fa;
  --ink:#14171f; --soft:#454b57; --mute:#767d8c;
  --line:#e4e7ec; --rule:#d8dce3;
  --accent:#12603f; --accent-deep:#0d4a30; --accent-wash:#e9f3ee;
  --defn:#1d4ed8; --defn-wash:#eef3ff;
  --thm:#12603f;  --thm-wash:#e9f3ee;
  --ex:#a16207;   --ex-wash:#fdf6e7;
  --rem:#6b7280;  --rem-wash:#f4f5f7;
  /* 36rem is the classic prose measure, but it clips wide displays - a `cases`
     block loses the end of "is continuous" behind a scroll edge. 41rem keeps
     the line length comfortable and fits the widest formulas in the notes. */
  --sidebar:19rem; --measure:41rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0f1216; --surface:#151a20; --alt:#1a2028;
    --ink:#eef1f5; --soft:#c3c9d4; --mute:#8d95a3;
    --line:#272d36; --rule:#333a45;
    --accent:#4cb98a; --accent-deep:#6fd0a4; --accent-wash:#14261e;
    --defn:#7ea6ff; --defn-wash:#161d2e;
    --thm:#4cb98a;  --thm-wash:#14261e;
    --ex:#d9a441;   --ex-wash:#2a2216;
    --rem:#9aa2b1;  --rem-wash:#1b1f26;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  /* tex4ht's stylesheet sets `margin:1em auto; max-width:80ch; padding:0 .62em`
     on body. That would box the whole sidebar+content flex layout inside a
     centred 80ch column, so all three have to be reset here. */
  margin:0;max-width:none;padding:0;
  background:var(--bg);color:var(--ink);
  font:400 17.5px/1.75 Charter,"Bitstream Charter",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shell ---------- */
.layout{display:flex;align-items:flex-start}
.sidebar{
  width:var(--sidebar);flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--alt);
  padding:1.1rem 0 3rem;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.content{flex:1;min-width:0;padding:2.2rem 2.4rem 5rem}
.content .inner{max-width:var(--measure);margin:0 auto}

/* ---------- sidebar ---------- */
.sb-brand{
  display:flex;align-items:center;gap:.5rem;
  padding:0 1.1rem 1rem;margin-bottom:.6rem;
  border-bottom:1px solid var(--line);
  font-family:Charter,"Bitstream Charter",Georgia,"Times New Roman",serif;
  font-weight:700;font-size:1.06rem;letter-spacing:-.02em;line-height:1;
  color:var(--ink);text-decoration:none;
}
.sb-brand span{color:var(--accent)}
.sb-brand .tile{
  width:1.72em;height:1.72em;border-radius:.42em;flex:none;
  background:var(--accent);color:#fff;font-size:.62em;letter-spacing:-.03em;
  display:inline-flex;align-items:center;justify-content:center;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .sb-brand .tile{color:#0f1216}
}
.sb-course{
  padding:0 1.1rem .7rem;font-size:.82rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mute);
}
.sb-nav{list-style:none;margin:0;padding:0 .55rem}
.sb-nav li{margin:0}
.sb-nav a{
  display:block;padding:.36rem .6rem;border-radius:6px;
  font-size:.9rem;line-height:1.4;color:var(--soft);text-decoration:none;
}
.sb-nav a:hover{background:var(--accent-wash);color:var(--accent-deep)}
.sb-nav a.current{background:var(--accent);color:#fff;font-weight:600}
.sb-nav .ch>a{
  margin-top:.7rem;font-weight:680;color:var(--ink);font-size:.93rem;
}
.sb-nav .sec a{padding-left:1.45rem;font-size:.875rem}
/* third level, for documents whose subsections get their own pages */
.sb-nav .sub a{padding-left:2.3rem;font-size:.85rem;color:var(--mute)}
.sb-nav .sub a:hover,.sb-nav .sub a.current{color:inherit}
.sb-nav .sec a::before{content:"";}

/* ---------- headings ---------- */
h1,h2,h3,h4,.chapterHead,.sectionHead,.subsectionHead,.subsubsectionHead{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.018em;line-height:1.25;color:var(--ink);
}
.chapterHead{font-size:2rem;margin:0 0 1.4rem}
.sectionHead{font-size:1.62rem;margin:0 0 1.1rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--rule)}
.subsectionHead{font-size:1.24rem;margin:2.4rem 0 .8rem}
.subsubsectionHead{font-size:1.06rem;margin:1.9rem 0 .6rem;color:var(--soft)}
.titlemark{color:var(--accent);font-weight:700;margin-right:.15em}
h1 a,h2 a,h3 a,h4 a{color:inherit;text-decoration:none}

p{margin:0 0 1.15rem}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-deep)}

/* ---------- theorem-like blocks, tagged by build.py ---------- */
.newtheorem{
  margin:1.6rem 0;padding:1rem 1.15rem;border-radius:8px;
  border-left:3px solid var(--rem);background:var(--rem-wash);
}
.newtheorem p:last-child{margin-bottom:0}
.newtheorem .head{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.newtheorem .head .cmbx-12,.newtheorem .head span{letter-spacing:-.01em}

.nt-definition{border-left-color:var(--defn);background:var(--defn-wash)}
.nt-definition .head .cmbx-12{color:var(--defn)}
.nt-theorem,.nt-lemma,.nt-proposition,.nt-corollary{
  border-left-color:var(--thm);background:var(--thm-wash)}
.nt-theorem .head .cmbx-12,.nt-lemma .head .cmbx-12,
.nt-proposition .head .cmbx-12,.nt-corollary .head .cmbx-12{color:var(--thm)}
.nt-example,.nt-exercise{border-left-color:var(--ex);background:var(--ex-wash)}
.nt-example .head .cmbx-12,.nt-exercise .head .cmbx-12{color:var(--ex)}
.nt-remark,.nt-note{border-left-color:var(--rem);background:var(--rem-wash)}
.nt-remark .head .cmbx-12,.nt-note .head .cmbx-12{color:var(--rem)}

/* A tinted panel works for a short statement. Several theorems here carry
   their proofs inside the environment, which turns the panel into a page-long
   field of colour. Where that happens, keep the coloured rule and label but
   drop the fill — statement then proof, the way a book sets it. */
.newtheorem:has(.proof){background:transparent;padding-left:1rem}

/* proofs: quieter than the statement they follow */
.proof{
  margin:1.1rem 0 1.6rem;padding:.2rem 0 .2rem 1.1rem;
  border-left:2px solid var(--line);color:var(--soft);
}
.proof p:last-child{margin-bottom:0}
/* the source nests proofs inside enumerate; claw back the double indent */
.newtheorem ol .proof,.newtheorem ul .proof,
.newtheorem dl .proof{margin-left:-.6rem}

/* The bold-word marker rules that used to sit here are gone. Both courses now
   write examples as real LaTeX environments, so tex4ht emits theorem markup and
   the .newtheorem rules above style and number them. The old rules faked a
   label from a regex over generated HTML, which could not fail loudly - and
   silently did, when a marker written after `\\` never became a paragraph. */

/* ---------- practice problems ---------- */
/* Deliberately not one of the theorem colours: a problem is a task, not
   something to read, and should look different from the exposition above it. */
.newtheorem.nt-problem,.newtheorem.nt-problemx{
  border-left-color:var(--accent);background:transparent;
  border:1px solid var(--line);border-left:3px solid var(--accent);
}
.nt-problem .head .cmbx-12,.nt-problemx .head .cmbx-12{color:var(--accent-deep)}
/* the "[Examination]" provenance tag */
.nt-problem .head + .small,.newtheorem .head ~ .small{color:var(--mute)}

/* Numbered lists come through as <dl> because the sources load enumitem - see
   the note in each .tex preamble. That is what keeps the author's own
   \item[(a).] label instead of letting the browser count 1, 2, 3.
     Laid out as a two-column grid so the label sits in its own column and the
   content aligns down the page whatever the label's width - "(a)." and "(iii)."
   line up, which a plain <dl> will not do.
     This replaces a counter() rule that faked "(a)." on every problem list.
   That rule could only guess one style, so a question whose parts were
   (i), (ii), (iii) in the source still came out lettered a, b, c - and it did
   nothing at all for lists outside a problem. */
dl.enumerate-enumitem{
  display:grid;grid-template-columns:max-content 1fr;
  column-gap:.55rem;row-gap:.4rem;
  margin:0 0 1.15rem;padding-left:.3rem;
}
dl.enumerate-enumitem > dt{grid-column:1;color:var(--soft);white-space:nowrap}
dl.enumerate-enumitem > dd{grid-column:2;margin:0;min-width:0}
dl.enumerate-enumitem > dd > p:first-child{margin-top:0}
dl.enumerate-enumitem > dd > p:last-child{margin-bottom:0}
/* a nested list needs air above it but not the full paragraph gap below */
dl.enumerate-enumitem dl.enumerate-enumitem{margin:.45rem 0 .25rem}

details.solution{
  margin:-.6rem 0 1.8rem;border-left:2px solid var(--line);padding-left:1.1rem;
}
details.solution > summary{
  cursor:pointer;list-style:none;display:inline-block;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:600;color:var(--accent-deep);
  padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);user-select:none;
  font-size:0;                       /* hide the markup's own label ... */
}
details.solution > summary::before{  /* ... and swap it by state */
  content:"Show solution";font-size:.86rem;
}
details.solution[open] > summary::before{content:"Hide solution"}
details.solution > summary::-webkit-details-marker{display:none}
details.solution > summary:hover{border-color:var(--accent);background:var(--accent-wash)}
details.solution[open] > summary{margin-bottom:.6rem;color:var(--mute)}
details.solution .proof{border-left:none;padding-left:0;margin-top:.4rem}

/* ---------- maths ---------- */
/* A handful of displays (long `cases` blocks, wide conditional-density
   fractions) are simply wider than any sane text measure. They scroll rather
   than shrink - but WITHOUT max-width the container grows past its parent and
   drags the whole proof box out with it, so both properties are needed. */
mjx-container[display]{
  margin:1.25rem 0!important;max-width:100%;overflow-x:auto;overflow-y:hidden;
}
/* Give the scroll a visible edge, otherwise the reader has no clue the rest of
   the formula exists. */
mjx-container[display]::-webkit-scrollbar{height:6px}
mjx-container[display]::-webkit-scrollbar-thumb{
  background:var(--rule);border-radius:3px;
}
.equation,.equation-star{margin:1.25rem 0}

/* ---------- figures ---------- */
figure,.figure{margin:2rem 0;text-align:center}
figure img,.figure img,img[src$=".svg"]{
  max-width:100%;height:auto;
  /* diagrams are drawn on white; keep them legible in dark mode without
     inverting the colours inside them */
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.6rem;
}
figcaption,.caption{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:.88rem;color:var(--mute);margin-top:.6rem;line-height:1.5;
}
figcaption .id,.caption .id{font-weight:650;color:var(--soft)}

/* ---------- tables ---------- */
/* Every table in the source carries \centering, so they should sit centred.
   `display:block` is what makes them scrollable when too wide, but it also
   makes them fill the line - hence fit-content plus auto margins, which
   shrink-wraps the table and centres it while still allowing the scroll. */
.content table{
  border-collapse:collapse;margin:1.6rem auto;
  width:fit-content;max-width:100%;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.93rem;
  display:block;overflow-x:auto;
}
.content table td,.content table th{
  border:none;border-bottom:1px solid var(--line);padding:.4rem .7rem;text-align:left;
}
/* tex4ht puts a <p> (and often a <div>) inside every cell; their default
   margins triple the row height. */
.content table p,.content table div{margin:0}
/* Header band left unfilled: these tables sit inside coloured example blocks,
   so a grey fill would fight the panel. A heavier rule does the same job. */
.content table tr:first-child td{
  font-weight:650;border-bottom:2px solid var(--rule);
}

/* ---------- table of contents page ----------
   tex4ht emits the contents as underlined links separated by <br>. Underlining
   every line makes the page look like a wall of hyperlinks rather than a
   chapter list, so the rules go and the hierarchy is carried by indent and
   weight instead. */
.tableofcontents{margin-top:.5rem}
.tableofcontents br{display:none}
.tableofcontents span{
  display:block;padding:.3rem 0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--mute);font-size:.95rem;
}
.tableofcontents a{text-decoration:none;color:var(--soft)}
.tableofcontents a:hover{color:var(--accent);text-decoration:underline}
.tableofcontents .chapterToc{
  margin-top:1.5rem;padding-bottom:.35rem;border-bottom:1px solid var(--line);
  font-size:1.05rem;font-weight:680;color:var(--accent);
}
.tableofcontents .chapterToc a{color:var(--ink);font-weight:680}
.tableofcontents .sectionToc{padding-left:1.6rem}
.tableofcontents .subsectionToc{padding-left:3.2rem;font-size:.9rem}
.tableofcontents .subsubsectionToc{padding-left:4.6rem;font-size:.88rem}

/* ---------- lists ---------- */
.content ol,.content ul{margin:0 0 1.15rem;padding-left:1.4rem}
/* dl lists set their own padding in the grid rule above */
.content dl.enumerate-enumitem{padding-left:.3rem}
.content li{margin-bottom:.4rem}

/* ---------- page nav (replaces tex4ht's bare [next][prev] links) ---------- */
.crosslinks{display:none}          /* the raw one at the top */
.pagenav{
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  margin:3rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.92rem;
}
.pagenav a{
  padding:.5rem .95rem;border:1px solid var(--line);border-radius:7px;
  text-decoration:none;color:var(--soft);background:var(--surface);
}
.pagenav a:hover{border-color:var(--accent);color:var(--accent-deep)}
.pagenav a.next{margin-left:auto}

/* ---------- questions (giscus) ---------- */
.qa{margin:3.5rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.qa h2{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.12rem;margin:0 0 .35rem;letter-spacing:-.01em;
}
.qa p{font-size:.93rem;color:var(--mute);margin-bottom:1.1rem;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ---------- mobile ---------- */
.sb-toggle{
  display:none;position:fixed;left:.8rem;bottom:.8rem;z-index:40;
  padding:.65rem .95rem;border-radius:999px;border:1px solid var(--line);
  background:var(--accent);color:#fff;font:600 .9rem system-ui,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;
}
@media (max-width:60rem){
  body{font-size:17px}
  /* Multi-line aligned displays are set at a fixed width and will not reflow.
     They stay scrollable, but shrinking them slightly means most fit outright
     rather than making the reader drag sideways mid-proof. */
  mjx-container[display]{font-size:.9em}
  .newtheorem{padding:.85rem .9rem}
  .proof{padding-left:.85rem}
  .newtheorem ol,.newtheorem ul{padding-left:1.1rem}
  /* narrow screens: let the label sit above its content rather than
     squeezing the text into a sliver of a second column */
  dl.enumerate-enumitem{grid-template-columns:1fr;row-gap:.1rem}
  dl.enumerate-enumitem > dt{grid-column:1;margin-top:.45rem}
  dl.enumerate-enumitem > dd{grid-column:1;padding-left:1.1rem}
  .sidebar{
    position:fixed;left:0;top:0;z-index:35;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 24px rgba(0,0,0,.15);
  }
  .sidebar.open{transform:translateX(0)}
  .sb-toggle{display:block}
  .content{padding:1.6rem 1.15rem 6rem}
}