/* The notes pages and the notes side panel in the exam paper look.
   Paper ground, a reading serif, rules instead of boxes, no shadows.

   This file owns the notes pages and the side panel and nothing else. The
   tokens, the page furniture and the header all live in style.css, which every
   page that loads this file also loads: site/notes/module3.html and
   site/practice.html both link them in that order. */

/* ---- notes pages ---------------------------------------------------- */

a { text-underline-offset: 2px; }

.trap { border-left: 3px solid var(--red); padding-left: 14px; }

/* The breadcrumb and Back to question, in the interface type above the title. */
.crumb {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.notes h1 { font-size: 34px; line-height: 1.1; margin: 0 0 4px; }
.notes .lede { color: var(--mute); margin: 0; max-width: 60ch; }
/* A page that sets out its notation before the first section needs the lede to
   let go of it, since the lede itself carries no margin. */
.notes .lede + p { margin-top: 14px; }

/* Sections are separated by a rule, not by a card. */
.notes section {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: 20px 0 0;
  margin: 26px 0 0;
}
.notes section:target {
  border-top-color: var(--ink);
  border-left: 3px solid var(--ink);
  padding-left: 14px;
  margin-left: -17px;
}

.notes h2 { font-family: var(--font-read); font-size: 23px; line-height: 1.2; margin: 0 0 10px; }
.notes h3 { font-size: 19px; margin: 18px 0 6px; }
.notes p { margin: 0 0 12px; max-width: 68ch; }
.notes .figure { display: block; max-width: 100%; height: auto; margin: 14px 0; }

/* A figure is a plate pinned into the margin of the sheet: a rule above it, the
   caption under it in the interface type, and nothing boxing it in. The image is
   capped rather than allowed to fill the measure, because the labels inside the
   SVG are sized for a column and grow with it. */
.notes figure, .notes-panel figure {
  margin: 18px 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.notes figure img, .notes-panel figure img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 0 6px;
}
.notes figcaption, .notes-panel figcaption {
  max-width: 60ch;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mute);
}
.notes-panel figure { margin: 14px 0; }
.notes-panel figcaption { font-size: 12.5px; }

/* A trap is the pen in the margin, so its label reads as a margin note. */
.notes .trap, .notes-panel .trap { margin: 16px 0; padding-top: 2px; padding-bottom: 2px; }
.notes .trap strong, .notes-panel .trap strong {
  display: block;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

/* Display formulas read as ruled blocks rather than boxes. */
.notes .katex-display, .notes-panel .katex-display {
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  overflow-y: hidden;
}

/* ---- Table Z excerpts ------------------------------------------------ */

/* A piece of the printed sheet, set the way the sheet sets it: the title block
   and its curve at the top left, a banner over the ten hundredths columns, a
   2px ink rule under the heads, and the z column last behind a vertical rule.
   The markup comes from site/js/ztable.js, so nothing here may depend on the
   order of the columns beyond "the last cell of a row is the z label". */

.notes ul, .notes-panel ul { max-width: 68ch; margin: 0 0 12px; padding-left: 20px; }
.notes li, .notes-panel li { margin: 0 0 4px; }

.ztable-plate { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; }

.ztable-mast {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--mute);
  max-width: 112px;
}
.ztable-mast b { display: block; color: var(--ink); font-weight: 600; }
.ztable-curve { display: block; width: 110px; height: auto; margin-top: 6px; color: var(--ink); overflow: visible; }
.ztable-curve-line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.ztable-curve-fill { fill: color-mix(in srgb, var(--ink) 20%, var(--bg)); stroke: none; }
.ztable-curve text { font-family: var(--font-ui); font-size: 8px; fill: var(--mute); text-anchor: middle; }

/* The excerpt scrolls inside its own box, so the page never scrolls sideways.
   It is focusable because a region that scrolls has to be reachable by keyboard. */
.ztable-scroll {
  /* Wide enough a basis that the title block drops above the table rather than
     squeezing it inside the 400px side panel. */
  flex: 1 1 280px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* The caption is the table's accessible name. The title block and the sentence
   under the figure say the same thing on screen, so it is not shown twice. */
.ztable caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ztable {
  border-collapse: collapse;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The generic notes table draws a box around every cell. This one is ruled. */
.notes .ztable td, .notes .ztable th, .notes-panel .ztable td, .notes-panel .ztable th {
  border: 0;
  padding: 3px 5px;
  text-align: right;
  font-weight: 400;
}
/* Every rule in this table is drawn as an inset shadow rather than a border,
   because the z column is sticky and a sticky cell in a collapsed border table
   loses its borders in some browsers. */
.ztable thead tr:last-child th { box-shadow: inset 0 -2px 0 var(--ink); font-style: italic; }
.ztable tbody th { font-style: italic; }

/* The z column is last in every row, behind a vertical rule as it is in print.
   It sticks to the right edge, so the row label stays readable on a narrow
   screen where the ten hundredths columns have to scroll. */
.ztable tr > :last-child { position: sticky; right: 0; z-index: 1; background: var(--bg); }
.ztable tbody tr > :last-child { box-shadow: inset 1px 0 0 var(--ink); }
.ztable thead tr:last-child > :last-child { box-shadow: inset 0 -2px 0 var(--ink), inset 1px 0 0 var(--ink); }

.ztable-banner td {
  border-bottom: 1px solid var(--rule);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* Marked row, marked column and the cell where they cross. The tint is the cue
   that reads fastest, so it never works alone: the two heads go bold with an ink
   bar against the body of the table, and the crossing cell takes a 2px ink
   outline and bold figures. */
.ztable td.in-row, .ztable td.in-col { background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.ztable th.on { background: color-mix(in srgb, var(--ink) 8%, var(--bg)); font-weight: 700; }
.ztable thead tr:last-child th.on { box-shadow: inset 0 -2px 0 var(--ink), inset 0 3px 0 var(--ink); }
.ztable tbody th.on { box-shadow: inset 1px 0 0 var(--ink), inset -3px 0 0 var(--ink); }
.ztable td.hit {
  background: color-mix(in srgb, var(--ink) 16%, var(--bg));
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  font-weight: 700;
}

/* ---- tables of counts in the notes ------------------------------------ */

/* A two way table of counts is wider than a phone. It scrolls inside its own
   box so the page itself never scrolls sideways, and the box is focusable
   because a region that scrolls has to be reachable by keyboard. */
.notes-scroll { overflow-x: auto; overflow-y: hidden; margin: 12px 0; max-width: 68ch; }
.notes-scroll table { margin: 0; white-space: nowrap; }
/* The caption is the table's accessible name and it is as wide as the table,
   so on a phone it would run off inside the scroll box. The sentence under the
   box says the same thing on screen, the way a figcaption does for Table Z. */
.notes-scroll caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* A sentence that has to be memorised word for word, set as a ruled block the
   way a display formula is, because at 320px a long \text{} run in KaTeX
   scrolls out of sight and the words are the point. */
.notes .rule-line, .notes-panel .rule-line {
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.notes-cap {
  margin: 6px 0 12px;
  max-width: 60ch;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
  white-space: normal;
}

/* ---- Table X excerpts ------------------------------------------------ */

/* Table X wears the Table Z plate, because the two sheets are set the same way.
   Three things differ on the printed page and only those three are written here:
   the df column is the FIRST cell of a row rather than the last, two entries are
   marked rather than one, and the try it block carries three controls instead of
   one. The markup comes from site/js/xtable.js. */

.xtable tr > :last-child { position: static; background: none; box-shadow: none; }
.xtable thead tr:last-child > :last-child { box-shadow: inset 0 -2px 0 var(--ink); }
.xtable tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.xtable tbody tr > :first-child { box-shadow: inset -1px 0 0 var(--ink); }
.xtable thead tr:last-child > :first-child { box-shadow: inset 0 -2px 0 var(--ink), inset -1px 0 0 var(--ink); }
.xtable tbody th.on { box-shadow: inset -1px 0 0 var(--ink), inset 3px 0 0 var(--ink); }
.xtable td, .notes .xtable td { text-align: right; }
.xtable th[scope="row"], .notes .xtable th[scope="row"] { text-align: left; }

/* Three controls on one line at desktop width, stacking on a phone. */
.xtable-try .ztable-controls { gap: 8px 16px; }
.xtable-try .ztable-controls label { display: inline-flex; align-items: baseline; gap: 6px; }
.xtable-try .ztable-controls input { width: 5.5em; }
.xtable-try .ztable-controls select {
  padding: 7px 8px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

/* The try it block. With scripts off the controls stay hidden and the block is
   one more worked excerpt, which is why the excerpt is in the page already. */
.ztable-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13.5px;
}
.ztable-controls input {
  width: 7em;
  padding: 7px 8px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.ztable-said {
  font-family: var(--font-ui);
  font-size: 14px;
  min-height: 1.5em;
}

/* ---- notes side panel ------------------------------------------------ */

/* A sheet laid beside the question: a 2px ink rule on its left edge, no
   border, no shadow, the same paper as the page under it. */
.notes-panel {
  width: 400px;
  flex: none;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: 24px var(--gutter) 24px 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--ink);
  background: var(--bg);
}
@media (max-width: 899px) { .notes-panel { display: none; } }
/* The sheet is 400px wide on every screen that shows it, so a wide table scrolls
   inside its own frame here at any viewport, the way it does on a phone. */
.notes-panel table:not(.ztable) { display: block; width: 100%; overflow-x: auto; }

.notes-panel .ai-notice { margin: 16px 0 14px; font-size: 14.5px; }
.notes-panel h2 { font-size: 20px; margin: 0 0 8px; }
.notes-panel p { margin: 0 0 10px; font-size: 15.5px; }
.notes-panel section { border: 0; padding: 0; margin: 14px 0; }

.notes-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notes-panel-head .btn {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 10px;
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 560px) {
  .notes h1 { font-size: 28px; }
  .notes h2 { font-size: 21px; }
  .notes section:target { margin-left: 0; }
}

/* An inline formula cannot wrap in the middle of a root or a fraction. When one
   is wider than a phone it scrolls sideways inside itself and the page stays
   put. The rule sits on the formula, not on the list item, because clipping a
   list item also clips its bullet. js/notes-page.js adds the class, and only
   to a formula that is wider than its column. */
.notes .katex-display { overflow-x: auto; overflow-y: hidden; }
.notes .katex.wide {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: bottom;
}