/* =============================================================================
   Evidina reference sheets — shared stylesheet
   =============================================================================

   The printable reference sheets in public/ are A4 documents that are read on
   phones. Search Console puts /formula-sheet at position 11.35 with mobile
   ranking well ahead of desktop, so the phone layout is the primary one even
   though printing is why the pages exist. Everything here is screen-first with
   the A4 measure restored under @media print.

   Every design decision below was made once, in formula-sheet.html, and is
   repeated here rather than re-derived. The reasoning is kept with it, because
   the numbers look arbitrary without it.

   All four sheets use this file. formula-sheet.html was migrated onto it on
   28 August, verified by diffing its old inline rules against these one by one
   and then comparing computed styles at a pinned viewport — page box, grid
   columns and every width identical to two decimals. There is no second copy
   of these rules any more; do not make one.

   ── Accent colours ──────────────────────────────────────────────────────────
   A section's colour is one custom property, not a rule per section:

     <div class="section" style="--accent: #0064cd">

   or, preferably, a named class in the sheet's own <style> block:

     .s-mechanics { --accent: #0064cd; }

   The screen layout fills the section head with it; print turns the fill into
   a coloured top border so the sheet does not drink ink.
   ========================================================================== */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:   #0064cd;
  --navy:    #1e2244;
  --text:    #1e2244;
  --muted:   #4f63c1;
  --rule:    #ccd8f1;
  --page-bg: #ffffff;

  /* Fallback for a section that sets no accent of its own. */
  --accent:  #0064cd;
}

html, body {
  background: var(--page-bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 10.5px;
  line-height: 1.5;
}

/* ── Page ─────────────────────────────────────────────────────────────────── */
/* 210mm is 794px. Unconstrained, that overflowed a 320px phone by 489px on the
   page Search Console ranks best — so the A4 measure is a maximum on screen
   and a fixed width only in print. */
.page {
  width: min(210mm, 100%);
  min-height: 297mm;
  margin: 0 auto;
  padding: 10mm 12mm 8mm;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 2.5px solid var(--brand);
  margin-bottom: 10px;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--brand), var(--navy));
  border-radius: 8px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 20px; font-weight: bold;
  line-height: 1; flex-shrink: 0;
}
.header-left  { display: flex; align-items: center; gap: 10px; }
.header-text strong { font-size: 14px; color: var(--navy); letter-spacing: -0.02em; }
.header-text span   { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.header-right { text-align: right; }
.header-right .title { font-size: 13px; font-weight: 700; color: var(--brand); }
.header-right .sub   { font-size: 8.5px; color: var(--muted); margin-top: 1px; }

/* ── Two-column grid ──────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.full-width { grid-column: 1 / -1; }

/* "1fr" is shorthand for "minmax(auto, 1fr)", and an auto minimum means a grid
   track refuses to shrink below its widest content. A constants table wide
   enough to need .table-scroll therefore widened its column instead of
   scrolling inside it, and took the whole page with it — 554px of table inside
   a 360px phone. Letting the track shrink is what lets the overflow container
   do its job. */
.grid > * { min-width: 0; }

/* ── Section card ─────────────────────────────────────────────────────────── */
.section {
  margin-bottom: 9px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 8px;
  border-radius: 4px 4px 0 0;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
}
.section-body {
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 5px 8px;
  background: #fafbff;
}

/* ── Formula rows ─────────────────────────────────────────────────────────── */
.formula-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--rule);
}
.formula-row:last-child { border-bottom: none; }

.formula-label {
  color: var(--muted);
  font-size: 9.5px;
  flex-shrink: 0;
  min-width: 96px;
}
.formula-expr {
  font-size: 10.5px;
  color: var(--navy);
  text-align: right;
  /* KaTeX handles its own typography — no monospace override */
}
/* For rows whose "expression" is a sentence rather than maths. */
.formula-expr.prose { text-align: left; }

/* ── Condition sub-rows ───────────────────────────────────────────────────── */
.cond-group { padding: 2px 0; }
.cond-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 1.5px 0 1.5px 10px;
  border-bottom: 1px dotted var(--rule);
}
.cond-row:last-child { border-bottom: none; }
.cond-label { color: var(--muted); font-size: 9px; flex-shrink: 0; min-width: 80px; }
.cond-expr  { font-size: 9.5px; flex: 1; }

/* ── Note text ────────────────────────────────────────────────────────────── */
.note {
  font-size: 8.5px;
  color: #4f63c1;
  font-style: italic;
  margin-top: 3px;
  padding-left: 4px;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 5px 0;
}

/* ── Data tables ──────────────────────────────────────────────────────────── */
/* Named .special-angles in formula-sheet.html, where the trig table was the
   only one. .data-table is the same thing under a name that describes the
   shape rather than the single case that first needed it. */
.data-table,
.special-angles {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
  font-size: 9.5px;
}
.data-table th, .data-table td,
.special-angles th, .special-angles td {
  border: 1px solid var(--rule);
  padding: 2px 5px;
  text-align: center;
}
.data-table th,
.special-angles th {
  background: #eef2fc;
  font-weight: 600;
  color: var(--navy);
}
.data-table td:first-child,
.data-table th[scope="row"],
.special-angles td:first-child,
.special-angles th[scope="row"] {
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  background: #f4f6fd;
}
.data-table .undef,
.special-angles .undef { color: #6b6b6b; font-style: italic; font-size: 8.5px; }

/* A value column that should read as data rather than prose. */
.data-table .val { text-align: right; white-space: nowrap; }

/* ── Screen-only: the booking CTA ─────────────────────────────────────────── */
/* These sheets are the best-ranked pages on the domain and, until now, the only
   route from one to a booking was a line of small print in the footer. Someone
   arriving from a search for "grade 12 formula sheet" is a Gqeberha matric or
   their parent — exactly the audience — and the page asked them for nothing.
   Screen-only on purpose: a sheet printed and stuck above a desk should carry
   formulae, not a sales box. */
.sheet-cta {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  background: #f6f9ff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sheet-cta .cta-text { flex: 1 1 22em; }
.sheet-cta strong {
  display: block;
  font-size: 12px;
  color: var(--navy);
  margin-bottom: 2px;
}
.sheet-cta p {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.5;
}
.cta-btn {
  flex-shrink: 0;
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  white-space: nowrap;
}
.cta-btn:hover { background: #004fa6; }
.cta-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ── Related sheets ───────────────────────────────────────────────────────── */
/* /formula-sheet is the best-ranked page on the domain and, until this existed,
   linked to none of its three siblings — so the page that actually gets found
   passed nothing to the pages that need finding, and a visitor who landed on it
   had no way to learn the others existed. Kept in print too: a sheet on a desk
   listing the other free ones is doing its job. */
.sheet-related {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dotted var(--rule);
  font-size: 8.5px;
  color: var(--muted);
}
.sheet-related b {
  font-weight: 600;
  color: var(--navy);
}
.sheet-related a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sheet-related .sep { color: var(--rule); padding: 0 6px; }
/* Three link titles in a row at 8.5px want room to wrap on a phone rather than
   push the page sideways. */
.sheet-related a { display: inline-block; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.sheet-footer {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1.5px solid var(--brand);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  color: var(--muted);
}
.sheet-footer a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-right { text-align: right; }

/* ── Screen-only: print bar ───────────────────────────────────────────────── */
.print-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 13px;
  z-index: 100;
  gap: 12px;
}
.print-bar > span { flex: 1; }
.btn-print {
  background: var(--brand);
  color: #fff;
  border: none; border-radius: 8px;
  padding: 7px 18px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn-print:hover { background: #004fa6; }
.btn-back { color: #adc8ff; font-size: 12px; text-decoration: none; }
.btn-back:hover { color: #fff; }

@media screen {
  .page { margin-top: 52px; }
}

/* ── Screen: phones and small tablets ─────────────────────────────────────── */
@media screen and (max-width: 820px) {
  /* 10.5px is a print size. Lighthouse rated only 37% of the maths sheet's
     text legible on mobile before this block existed. */
  html, body { font-size: 13.5px; }

  .page {
    min-height: 0;
    padding: 14px 14px 28px;
    margin-top: 0;
  }

  /* Two 1fr columns inside ~290px of usable width leaves each formula about
     130px, which is narrower than many of them render. */
  .grid { grid-template-columns: 1fr; }

  .sheet-header { flex-wrap: wrap; gap: 10px; }
  .header-right { text-align: left; }

  /* The bar is position:fixed on desktop with the page pushed down by a
     hardcoded 52px. On a narrow screen the bar wraps and grows past that, so
     it would sit on top of the first section. Letting it scroll away removes
     the failure mode rather than guessing a taller offset. */
  .print-bar { position: static; padding: 8px 12px; }
  .print-bar > span { display: none; }

  /* Label above the expression rather than beside it, and let a wide formula
     scroll inside its own row instead of moving the whole page. */
  .formula-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .formula-label { min-width: 0; }
  .formula-expr {
    text-align: left;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Raising html/body alone changes almost nothing — every one of these sets
     its own absolute px size, so none of them inherit. The A4 design runs from
     8.5px to 10.5px, which is fine on paper and below the 12px floor
     Lighthouse measures for legibility on a phone. Each is lifted to at least
     12px here and left untouched everywhere else, so the printed sheet keeps
     its density. */
  .header-text span    { font-size: 12px; }
  .header-right .sub   { font-size: 12px; }
  .section-head        { font-size: 12px; }
  .formula-label       { font-size: 12.5px; }
  .formula-expr        { font-size: 14px; }
  .cond-label          { font-size: 12px; min-width: 0; }
  .cond-expr           { font-size: 12.5px; }
  .note                { font-size: 12px; }
  .data-table,
  .special-angles      { font-size: 12px; }
  .data-table .undef,
  .special-angles .undef { font-size: 12px; }
  .sheet-footer        { font-size: 12px; flex-wrap: wrap; gap: 6px; }
  .footer-right        { text-align: left; }

  /* Condition rows are the same label-beside-value shape as formula rows and
     need the same treatment at this width. */
  .cond-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
  }

  /* A wide table cannot reflow, so let it scroll inside its own box rather
     than widening the document. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* The CTA is the one thing on the page a phone visitor is most likely to act
     on, so it gets readable sizes rather than the A4 ones. */
  .sheet-cta strong { font-size: 14px; }
  .sheet-cta p      { font-size: 12.5px; }
  .cta-btn          { font-size: 13px; padding: 9px 16px; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .print-bar { display: none; }
  .sheet-cta { display: none; }
  .page { width: 100%; margin: 0; padding: 8mm 10mm; }
  html, body { font-size: 9.5px; }

  /* Ink-friendly sections: white background, coloured top border. */
  .section-body { background: white !important; }
  .data-table th,
  .special-angles th { background: #f5f5f5 !important; }
  .data-table td:first-child,
  .special-angles td:first-child { background: #f9f9f9 !important; }

  .section-head {
    background: white !important;
    color: var(--accent) !important;
    border-top: 3px solid currentColor;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding-left: 6px;
  }

  /* Ink-free logo */
  .logo-mark {
    background: none !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--navy);
  }

  @page { size: A4 portrait; margin: 0; }
}