/* web.css — the guide on a screen.

   Same markdown, same SVG, same brand as modern.css. What changes is the
   medium: no sheet of paper, so no millimetres, no fixed measure, no repeated
   header — a topic is one page and it is as long as it is.

   Everything is scoped to .htb-guide and every custom property is prefixed
   --htb-, so this file can be dropped into the Next.js site without colliding
   with its own tokens or being flattened by a Tailwind preflight.

   The site owns the <h1>, the breadcrumb, the pager and the paywall. This file
   styles only what comes out of the markdown.                              */

/* ---------------------------------------------------------------- tokens */
.htb-guide {
  --htb-bg: #fffdf6;
  --htb-teal: #1d3d3b;
  --htb-orange: #e67e51;
  --htb-sage: #4a7a74;
  --htb-surface: #f2f4f3;
  --htb-tint: #d1dcd9;
  --htb-muted: #575e5e;
  --htb-body: #2a2c2f;
  --htb-rule: rgba(29, 61, 59, 0.12);

  --htb-tip-bg: #32514f;
  --htb-tip-ink: #eaf0ee;
  --htb-tip-label: #f4b79c;

  --htb-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --htb-font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;

  /* One knob for reading width. The site can override it per layout. */
  --htb-measure: 44rem;
  --htb-radius: 12px;

  font-family: var(--htb-font-body);
  font-size: 1.0625rem;          /* 17px — comfortable on a phone, not shouty */
  line-height: 1.65;
  color: var(--htb-body);
  max-width: var(--htb-measure);
  margin-inline: auto;
  -webkit-text-size-adjust: 100%;
}

@media (min-width: 48rem) {
  .htb-guide { font-size: 1.125rem; line-height: 1.7; }
}

/* Nothing inherits a print margin: reset only inside the scope. */
.htb-guide :is(h2, h3, p, ul, ol, li, figure, table, blockquote, aside) {
  margin: 0;
  padding: 0;
}
.htb-guide > * + * { margin-top: 1.15em; }

/* --------------------------------------------------------- the eyebrow/title
   Present so a site CAN reuse the print header markup, but the site normally
   renders its own <h1>; these are here for parity, not for layout. */
.htb-guide .eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--htb-orange);
}
.htb-guide .title {
  font-family: var(--htb-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.1;
  color: var(--htb-teal);
}

/* ------------------------------------------------------- section headings */
.htb-guide h2 {
  font-family: var(--htb-font-body);
  font-size: clamp(1.15rem, 3.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--htb-teal);
  border-left: 4px solid var(--htb-orange);
  padding-left: 0.7rem;
  margin-top: 2.4em;
  scroll-margin-top: 5rem;       /* room for a sticky site header on jump */
}
.htb-guide > h2:first-child { margin-top: 0; }

.htb-guide h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--htb-teal);
  margin-top: 1.8em;
}

/* ------------------------------------------------------------- the bullets */
.htb-guide ul { list-style: none; }
.htb-guide ol { list-style: decimal; padding-left: 1.4rem; }
.htb-guide li { position: relative; padding-left: 1.5rem; margin-top: 0.55em; }
.htb-guide ol li { padding-left: 0.25rem; }
.htb-guide ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--htb-orange);
  border-radius: 1px;
  transform: rotate(45deg);
}
.htb-guide li ul { margin-top: 0.5em; }
.htb-guide li li::before { background: none; border: 1px solid var(--htb-sage); }

/* ---------------------------------------------------- the highlighted term */
.htb-guide .key {
  color: var(--htb-teal);
  font-weight: 600;
  background: linear-gradient(
    to top,
    rgba(230, 126, 81, 0.26) 0,
    rgba(230, 126, 81, 0.26) 30%,
    transparent 30%
  );
  padding: 0 0.1em;
}

/* ----------------------------------------------------------- the exam tip */
.htb-guide .tip {
  background: var(--htb-tip-bg);
  color: var(--htb-tip-ink);
  border-radius: var(--htb-radius);
  padding: 1.1rem 1.3rem 1.2rem;
  margin-top: 1.6em;
  font-size: 0.97em;
}
.htb-guide .tip::before {
  content: "Exam tip";
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--htb-orange);
  margin-bottom: 0.5rem;
}
.htb-guide .tip li::before { background: var(--htb-orange); }
.htb-guide .tip .key {
  color: var(--htb-tip-label);
  background: none;
  padding: 0;
}

/* --------------------------------------------------------------- the table
   A GCSE comparison table is wider than a phone. build_web.py wraps every
   table in .table-wrap so it scrolls inside its own box instead of pushing
   the page sideways. The fade on the right edge says there is more to see. */
.htb-guide .table-wrap {
  margin-top: 1.4em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--htb-radius);
  border: 1px solid var(--htb-rule);
  background:
    linear-gradient(to right, var(--htb-bg) 30%, rgba(255, 253, 246, 0)) left / 2.5rem 100% no-repeat,
    linear-gradient(to left, var(--htb-bg) 30%, rgba(255, 253, 246, 0)) right / 2.5rem 100% no-repeat,
    var(--htb-bg);
  background-attachment: local, local, scroll;
}
.htb-guide table {
  width: 100%;
  min-width: 22rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9em;
  line-height: 1.45;
}
.htb-guide th {
  background: var(--htb-teal);
  color: var(--htb-bg);
  font-weight: 600;
  text-align: left;
  padding: 0.7rem 0.9rem;
  position: sticky;
  top: 0;
}
.htb-guide td {
  padding: 0.6rem 0.9rem;
  vertical-align: top;
  border-top: 1px solid var(--htb-rule);
}
.htb-guide tbody tr:nth-child(even) td { background: var(--htb-surface); }
.htb-guide .lab { font-weight: 600; color: var(--htb-teal); }

/* -------------------------------------------------------------- the figure */
.htb-guide figure {
  margin-top: 1.8em;
  padding: 1.1rem 1.1rem 0.9rem;
  background: var(--htb-surface);
  border: 1px solid var(--htb-rule);
  border-radius: var(--htb-radius);
  text-align: center;
}
.htb-guide figure svg,
.htb-guide figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 32rem;
  margin-inline: auto;
}
.htb-guide figcaption {
  margin-top: 0.8rem;
  font-size: 0.82em;
  line-height: 1.4;
  color: var(--htb-muted);
}
/* {size=half} and {size=inline} are print instructions. On a phone everything
   is full width; only from tablet up do they mean anything. */
@media (min-width: 48rem) {
  .htb-guide figure.fig--half { width: 68%; margin-inline: auto; }
  .htb-guide figure.fig--inline { width: 48%; margin-inline: auto; }
}
/* A diagram that hasn't been drawn yet. Visible in a staging build, hidden in
   production by adding .htb-guide--hide-pending on the wrapper. */
.htb-guide .fig--pending { border-style: dashed; background: transparent; }
.htb-guide .fig-pending {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--htb-muted);
  padding: 1.6rem 0;
}
.htb-guide--hide-pending .fig--pending { display: none; }

/* ---------------------------------------------------------------- the maths */
.htb-guide .katex { font-size: 1.03em; }
.htb-guide .katex-display {
  margin: 1.3em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.2rem;
}

/* ------------------------------------------- common exam mistakes (grid) ---
   Two columns is a print decision. Here it is two columns only when there is
   room; on a phone the boxes simply stack in reading order. */
.htb-guide .mistakes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.4rem;
  margin-top: 1.4em;
}
@media (min-width: 56rem) {
  .htb-guide .mistakes { grid-template-columns: 1fr 1fr; align-items: start; }
}
.htb-guide .mistakes .group {
  background: #fff;
  border: 1px solid var(--htb-rule);
  border-radius: var(--htb-radius);
  padding: 0.9rem 1.1rem 1rem;
  margin-bottom: 0.9rem;
}
.htb-guide .mistakes .group h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-left: none;
  padding-left: 0;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.htb-guide .mistakes .group h2::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  background: var(--htb-orange);
  flex: none;
}
.htb-guide .mistakes .group li { font-size: 0.92em; margin-top: 0.4em; }
.htb-guide .mistakes .group .key {
  color: var(--htb-orange);
  background: none;
  font-weight: 700;
  padding: 0;
}
.htb-guide .mistakes .tip { margin: 0 0 0.9rem; }

/* ------------------------------------------------------------ diagram ink
   The SVGs carry classes, not colours, exactly as in print — so the brand
   palette here is the one place a diagram's colour is decided.            */
.htb-guide .dgm-el { font: 400 60px var(--htb-font-display); }
.htb-guide .dgm-num { font: 500 26px var(--htb-font-body); }
.htb-guide .dgm-label { font: 600 21px var(--htb-font-body); letter-spacing: 0.02em; }
.htb-guide .dgm-sym--a .dgm-el,
.htb-guide .dgm-sym--a .dgm-num { fill: var(--htb-teal); }
.htb-guide .dgm-sym--b .dgm-el,
.htb-guide .dgm-sym--b .dgm-num { fill: var(--htb-sage); }
.htb-guide .dgm-sym--c .dgm-el,
.htb-guide .dgm-sym--c .dgm-num { fill: var(--htb-orange); }
.htb-guide .dgm-arrow--mass { stroke: var(--htb-teal); stroke-width: 2.4; stroke-linecap: round; }
.htb-guide .dgm-arrow--mass .dgm-head,
.htb-guide .dgm-label--mass { fill: var(--htb-teal); stroke: none; }
.htb-guide .dgm-arrow--atomic { stroke: var(--htb-orange); stroke-width: 2.4; stroke-linecap: round; }
.htb-guide .dgm-arrow--atomic .dgm-head,
.htb-guide .dgm-label--atomic { fill: var(--htb-orange); stroke: none; }

/* ---------------------------------------------------------------- printing
   Someone will hit ⌘P on a topic page. This is not the book — it just stops
   the web page printing badly. The A4 book is still what build.py makes.   */
@media print {
  .htb-guide { max-width: none; font-size: 11pt; }
  .htb-guide .tip { background: #eef2f0; color: #2a2c2f; }
  .htb-guide .tip .key { color: #1d3d3b; }
  .htb-guide .table-wrap { overflow: visible; }
  .htb-guide figure, .htb-guide .tip, .htb-guide .table-wrap { break-inside: avoid; }
}

/* ------------------------------------------------------------ the diagrams */
/* Excalifont, the hand-drawn face the inlined diagram SVGs ask for. The site
   supplies Inter and Playfair, but it has no reason to know about this one, so
   it ships with the guide: copy_assets() puts the files in assets/fonts/ and
   these rules resolve against them, exactly like KaTeX's. Without this the
   diagram text silently falls back to Inter and the drawings stop looking
   drawn. Same seven unicode-range subsets Excalidraw itself uses (~88 KB);
   arrows and sub/superscripts have no Excalifont glyph and fall to Inter, which
   is what the Excalidraw app does too. SIL Open Font License 1.1. */
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2') format('woff2');
  unicode-range: U+0462-0463, U+0472-0475, U+04D8-04D9, U+04E2-04E3, U+04E6-04E9, U+04EE-04EF;
}
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2') format('woff2');
  unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302, U+0306-0307, U+030A-030C, U+0326-0328, U+212E, U+2211, U+FB01-FB02;
}
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2') format('woff2');
  unicode-range: U+037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03CF, U+03D7;
}
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2') format('woff2');
  unicode-range: U+0300-0301, U+0303;
}
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00A3, U+00A5-00A6, U+00A8-00AB, U+00AD-00B1, U+00B4, U+00B6-00B8, U+00BA-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020, U+2022, U+2024-2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+2116;
}
@font-face {
  font-family: 'Excalifont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0137, U+0139-0149, U+014C-0151, U+0154-017E, U+0192, U+01FC-01FF, U+0218-021B, U+0237, U+1E80-1E85, U+1EF2-1EF3, U+2113;
}