/* Educerie notes — the look of a study page.

   One face. Every word a student reads here is Helvetica: the body, the headings, the
   tables, the labels. Monospace is kept for two jobs only — code, and the worked steps of
   a calculation — because both are written with spaces doing the aligning, and a
   proportional face throws them out.

   Nothing is a hard-cornered box. Where a rectangle is needed it is drawn as a squircle —
   the continuous curve Apple uses, in which the corner eases into the side instead of
   turning at a point. Browsers that do not know `corner-shape` round the corner the
   ordinary way and the page is none the worse for it.

   Structure is made of rules, space and the odd tinted panel, never of gradients or
   coloured stripes. A heading is told from a paragraph by its size and the air around it;
   a table is held by hairlines; a figure by its own drawing. The shapes are the SAT
   practice page's: 1.5px borders, round-ended pills, cards that lift under the pointer.

   Teal carries the accent. It is the colour drawn into every diagram, so it is the colour
   of a link, of a rule beside something quoted, of the button that opens the app and of
   the mark that says where you are. Amber says higher level, clay says a mistake to
   avoid. Nothing else has a colour.

   One measure. The column is set so a line runs about seventy characters, which is what
   an eye tracks without hunting for the start of the next one. */

:root {
  --ink:        #0d0f11;
  --ink-soft:   #4a5157;
  --ink-faint:  #8a9196;
  --paper:      #ffffff;
  --page:       #ffffff;      /* one paper: the page and the sheet are the same white */
  --rule:       #e3e5e6;
  --rule-soft:  #f1f2f3;

  /* the accent is the one drawn into every diagram, so the page and the figures agree */
  --teal:       #0A8CA0;
  --teal-deep:  #0a7386;
  --teal-pale:  #b7dbe2;
  --teal-wash:  #f2fafb;

  --amber:      #b2690f;
  --amber-deep: #8c520b;
  --amber-wash: #fbf7f0;

  --clay:       #a8412f;
  --clay-deep:  #8b3526;
  --clay-wash:  #fdf6f4;
  --clay-rule:  #e6d3ce;
  --amber-rule: #f0dcb8;

  /* green is for the one main action on a page, as on the SAT practice page */
  --go:       #16a34a;
  --go-deep:  #15803d;
  --lift: 0 1px 2px rgba(13, 15, 17, .06), 0 8px 24px -12px rgba(13, 15, 17, .18);

  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* kept so anything still asking for the old reading face gets the one face */
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* three corners. A squircle reads tighter than a round corner of the same radius, so
     these are set generously; a browser without `corner-shape` gets the rounded rect. */
  --r-lg: 20px;   /* cards, figures, the panels a page is built from */
  --r-md: 13px;   /* buttons, inputs, the level switch */
  --r-sm: 7px;    /* code, ticks, the small things inside a line */

  /* the written column, and the air either side of it */
  --sheet-w:   748px;
  --sheet-pad: 0px;
  --rail-w:    268px;
  --rail-shut: 46px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #eceff0;
    --ink-soft:  #b3bbbf;
    --ink-faint: #838c91;
    --paper:     #121415;
    --page:      #121415;
    --rule:      #2a2f31;
    --rule-soft: #1c1f21;
    --teal:      #5cbdcd;
    --teal-deep: #7fd0dd;
    --teal-pale: #2e4a50;
    --teal-wash: #16292d;
    --amber:     #d9993f;
    --amber-deep:#e8ae5e;
    --amber-wash:#241d14;
    --clay:      #d2786a;
    --clay-deep: #e19385;
    --clay-rule: #45291f;
    --clay-wash: #241713;
    --amber-rule:#4a3818;
    --go:        #4ade80;
    --go-deep:   #86efac;
    --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .7);
  }
}
/* chosen in the account: dark whatever the system says */
:root[data-theme="dark"] {
  --ink:       #eceff0;
  --ink-soft:  #b3bbbf;
  --ink-faint: #838c91;
  --paper:     #121415;
  --page:      #121415;
  --rule:      #2a2f31;
  --rule-soft: #1c1f21;
  --teal:      #5cbdcd;
  --teal-deep: #7fd0dd;
  --teal-pale: #2e4a50;
  --teal-wash: #16292d;
  --amber:     #d9993f;
  --amber-deep:#e8ae5e;
  --amber-wash:#241d14;
  --clay:      #d2786a;
  --clay-deep: #e19385;
  --clay-rule: #45291f;
  --clay-wash: #241713;
  --amber-rule:#4a3818;
  --go:        #4ade80;
  --go-deep:   #86efac;
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 96px;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The sheet is two tracks: the written column, which is the measure, and the room to its
   right. Everything written sits in the first; a diagram spans both, so it is drawn at the
   size it was made rather than squeezed into the column and framed like a picture. */
.sheet {
  display: grid;
  grid-template-columns:
    [full-start text-start] min(var(--sheet-w), 100%) [text-end] minmax(0, 1fr) [full-end];
  max-width: none;
  margin: 0;
  padding: 0 0 72px;
}
.sheet > *, .sheet > section > * { grid-column: text; }
.sheet > section { grid-column: full; display: grid; grid-template-columns: inherit; }
/* A diagram and a table are structure, and so is a rule drawn across the page: those run
   the full width, and the sentences under them keep the measure. The two together are what
   makes the page look built rather than poured into a strip down the middle. */
.sheet > section > figure, .sheet > section > .tablewrap, .sheet > section > h3,
.sheet > h2.group, .sheet > .divider, .sheet > section > .divider, .sheet > .meta,
.sheet > .unitbar, .sheet > section > .wide { grid-column: full; }
/* what is set full but is still read stays inside a measure of its own */
.meta dd, section.recap > p, .marknote, figcaption { max-width: 62ch; }

/* the gradient band across the top is gone; the page begins with the words */
.band { display: none; }

/* ---------- masthead ----------
   No label above the title: the breadcrumb already says where you are. The line stays in
   the markup because the "your subject" badge hangs on it; when notes.js shows the badge,
   the line comes back as that badge alone. */
.eyebrow { display: none; margin: 44px 0 16px; }
.eyebrow:has(.yours:not([hidden])) { display: block; font-size: 0; line-height: 0; letter-spacing: 0; }
h2.title {
  margin: 0 0 36px;
  font: 800 clamp(31px, 4.4vw, 42px)/1.08 var(--sans);
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* with no label above it, a title under the unit's tab strip needs its own air */
.unitbar ~ h2.title { margin-top: 28px; }
.eyebrow:has(.yours:not([hidden])) + h2.title { margin-top: 0; }

/* ---------- the meta panel under the title ----------
   A short table of facts in a bordered box, the label in the margin and the fact beside it. */
.meta {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0;
  margin: 0 0 4px;
  padding: 4px 24px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg); corner-shape: squircle;
  font-size: 15.5px;
  line-height: 1.62;
}
.meta dt {
  grid-column: 1;
  padding: 14px 20px 14px 0;
  border-top: 1px solid var(--rule-soft);
  font: 700 .8rem/1.55 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}
.meta dd {
  grid-column: 2;
  margin: 0;
  padding: 13px 0 14px;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-soft);
}
.meta dt:first-of-type, .meta dt:first-of-type + dd { border-top: 0; }
/* the box keeps to the written measure, so its inner rules run edge to edge */
.sheet > .meta { grid-column: text; }
.meta dd { max-width: none; }
.meta dd strong { color: var(--ink); }
@media (max-width: 620px) {
  .meta { display: block; padding: 4px 18px; }
  .meta dt { padding: 14px 0 0; border-top: 1px solid var(--rule-soft); }
  .meta dd { padding: 2px 0 14px; border-top: 0; }
  .meta dt:first-of-type { border-top: 0; }
}

/* ---------- section headings ----------
   The number is set in the margin beside the heading, quiet and in figures that line up
   down the page. The heading carries itself at this size, so the rule under it is a
   hairline rather than a black bar. */
section { margin-top: 54px; }
section > h3 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 20px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
  font: 800 22.5px/1.28 var(--sans);
  letter-spacing: -.028em;
  color: var(--ink);
  scroll-margin-top: 84px;
}
/* The number is the thing a student says out loud — "look at 7" — so it is set large
   enough to find by eye alone, hanging in the margin beside the heading. */
.num {
  flex: none;
  min-width: 1.5em;
  font: 700 clamp(22px, 2.3vw, 27px)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--teal);
}
.pill {
  flex: none;
  align-self: center;
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  font: 800 .64rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-deep);
  background: var(--amber-wash);
}

/* section flavours: a mark in the margin, not a change of background */
section.hl > h3 .num { color: var(--amber); }
section.pitfalls > h3 .num { color: var(--clay); }
section.pitfalls > p {
  margin: 12px 0;
  padding: 14px 18px;
  background: var(--clay-wash);
  border: 1.5px solid var(--clay-rule);
  border-radius: 16px; corner-shape: squircle;
}
section.pitfalls > p > strong:first-child { color: var(--clay-deep); }

/* ---------- body copy ---------- */
p { margin: 0 0 18px; }
strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; color: var(--ink-soft); }
a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink); }
code {
  font: .86em/1.5 var(--mono);
  background: var(--rule-soft);
  padding: 2px 6px;
  border-radius: var(--r-sm); corner-shape: squircle;
}
pre {
  margin: 22px 0 26px;
  padding: 14px 20px;
  overflow-x: auto;
  background: var(--rule-soft);
  border-radius: var(--r-lg); corner-shape: squircle;
  font: 13.5px/1.75 var(--mono);
  color: var(--ink-soft);
}
pre code { background: none; padding: 0; font: inherit; border-radius: 0; }

ul, ol { margin: 0 0 20px; padding-left: 22px; }
li { margin: 9px 0; padding-left: 4px; }
li::marker { color: var(--teal); font-weight: 400; }
section.hl li::marker { color: var(--amber); }
li > ul, li > ol { margin: 9px 0 0; }

/* ---------- the rule box ----------
   The one sentence a student should be able to quote back: a teal-tinted panel and a little
   more weight. */
blockquote {
  margin: 28px 0;
  padding: 16px 22px;
  background: var(--teal-wash);
  border: 1.5px solid var(--teal-pale);
  border-radius: var(--r-lg); corner-shape: squircle;
  font: 500 18px/1.6 var(--sans);
  letter-spacing: -.014em;
  color: var(--ink);
}
blockquote strong { font-weight: 700; color: inherit; }

/* ---------- tables ----------
   Held by hairlines; the header row is a quiet sentence-case label. The first column runs flush with the text above it, so the table
   sits in the measure rather than beside it. */
.tablewrap { overflow-x: auto; margin: 26px 0 30px; }
table { border-collapse: collapse; width: 100%; font: 15px/1.58 var(--sans); }
thead th {
  font: 700 10.5px/1.6 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  text-align: left;
  color: var(--teal-deep);
  padding: 10px 18px 9px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--teal-pale);
  white-space: nowrap;
  vertical-align: bottom;
}
td {
  padding: 12px 18px 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  color: var(--ink-soft);
}
thead th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
td strong { color: var(--ink); }
/* the notes' own tables: headers in sentence case (the SAT practice page styles its own) */
.sheet thead th, .page thead th {
  font: 700 .8rem/1.5 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  border-bottom-color: var(--rule);
  min-width: 4.5em;
}
section.hl thead th { color: var(--amber-deep); border-bottom-color: var(--amber-rule); }

/* ---------- figures ----------
   No frame and no plate. A diagram is drawn on the same white the page is printed on, so
   it is left to sit in the text rather than boxed off from it, aligned on the same left
   edge as the words and free to run past the measure into the room beside it. */
figure { margin: 30px 0; text-align: left; }
figure svg, figure img {
  display: block;
  max-width: min(100%, 920px); height: auto;
  border-radius: var(--r-lg); corner-shape: squircle;
  background: #fff;
}
figcaption {
  margin-top: 10px;
  max-width: 62ch;
  font: 13px/1.6 var(--sans);
  color: var(--ink-faint);
}
figcaption b { color: var(--teal); font-weight: 700; }
section.hl figcaption b { color: var(--amber); }

/* ---------- practice and answers ---------- */
/* a question is told by its teal number, not by a rule beside it: a box round the stem
   alone would cut it off from the options printed under it */
.q { margin: 24px 0 8px; }
.q strong:first-child { color: var(--teal-deep); }
.marks {
  margin-left: 6px;
  font: 700 .8rem/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink-faint);
  white-space: nowrap;
}
section.answers { padding-top: 4px; }
.marknote {
  display: block;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--rule-soft);
  border-radius: var(--r-lg); corner-shape: squircle;
  font: 13.5px/1.65 var(--sans);
  color: var(--ink-faint);
}
/* the label is a line of its own: run into the note it reads "2 marksone mark for..." */
.marknote::before {
  content: "Marker's note · " attr(data-marks) " marks";
  display: block;
  font: 700 .8rem/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--teal-deep);
  margin-bottom: 4px;
}
/* A one-point question: the SAT has no part-marks, so the label says why, not how many. */
.marknote[data-marks="1"]::before { content: "Why this is the answer"; }

.hlonly { color: var(--amber-deep); font-weight: 700; }

/* ---------- recap ---------- */
section.recap > p {
  margin: 0;
  grid-column: full;
  padding: 18px 22px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-lg); corner-shape: squircle;
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ---------- dividers and footer ---------- */
.divider { display: block; height: 1px; margin: 52px 0; border: 0; background: var(--rule); }
/* a group heading carries its own rule, and so does the meta panel above; a divider drawn
   beside either is a second line saying the same thing, so it goes */
.divider:has(+ h2.group) { display: none; }
.meta + .divider { display: none; }
.provenance {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font: 13px/1.65 var(--sans);
  color: var(--ink-faint);
}

/* ---------- print: it will be printed ---------- */
@media print {
  body { background: #fff; padding: 0; font-size: 11pt; }
  .sheet { max-width: none; padding: 0; }
  section, figure, table, blockquote { break-inside: avoid; }
  section > h3 { break-after: avoid; }
  pre, .marknote { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 620px) {
  body { padding: 0 18px 56px; font-size: 16.5px; }
  section { margin-top: 42px; }
  section > h3 { font-size: 20px; }
  blockquote { font-size: 17px; }
  td, thead th { padding-right: 12px; }
}

/* A worked calculation: one step per line, so the working can be followed down the page
   rather than read across a sentence. The steps are set in the fixed-width face — some of
   them line their right-hand side up with spaces, which only holds in monospace.
   Optional justification sits to the right. */
.mathblock {
  margin: 26px 0; padding: 12px 20px;
  background: var(--teal-wash);
  border: 1.5px solid var(--teal-pale);
  border-radius: 16px; corner-shape: squircle;
}
.mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 3px 0; }
.mstep { font-family: var(--mono); font-size: .9rem; line-height: 1.8; white-space: pre-wrap; color: var(--ink); }
.mstep sup { font-size: .72em; vertical-align: .45em; }
.mstep sub { font-size: .72em; vertical-align: -.25em; }
.mnote { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); text-align: right; flex: 0 0 auto; max-width: 46%; }
@media (max-width: 600px) { .mrow { flex-direction: column; gap: 2px; } .mnote { text-align: left; max-width: 100%; } }
@media print { .mathblock { background: transparent; border-color: #999; } }

/* Mocks are not open yet; where a page would offer one, this pill says so. */
.hold { display: inline-flex; align-items: center; gap: 7px; font: 700 .78rem/1 var(--sans); color: var(--ink-soft); border: 1.5px dashed var(--rule); border-radius: 999px; padding: 8px 12px; white-space: nowrap; }
.hold::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #d97706; flex: none; }
.unitbar .hold { margin-left: auto; padding: 6px 10px; font-size: .72rem; }

/* chosen in the account: larger type and less movement */
html[data-text="large"] { font-size: 112.5%; }
html[data-text="large"] body { font-size: 19px; }
html[data-motion="reduce"]{scroll-behavior:auto}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
html[data-motion="reduce"]::view-transition-group(*),html[data-motion="reduce"]::view-transition-old(*),html[data-motion="reduce"]::view-transition-new(*){animation:none !important}