/* Backwerd Rhythm Shop — shared foundation for printed resources.
 *
 * Every free BRS resource that gets printed shares this: the faces, the ink
 * tokens, the page setup, and the footer that carries version, terms and
 * copyright onto the paper. Document-specific layout stays in the document.
 *
 * The standard this implements is "Backwerd Rhythm Shop — Print & Resource
 * Format Standard" in Notion. Rules here that look arbitrary are not; each one
 * is there because something went wrong once, and the reason is recorded with
 * it. Read those before optimising any of it away.
 *
 * Deliberately NOT built on brs-theme.css. That file is the app's dark
 * treatment — it sets the page background to --brs-ink. A printed sheet has
 * exactly one correct appearance, and inheriting a theme that can invert means
 * every print bug arrives twice.
 */

/* Vendored with their OFL licences, never fetched. A worksheet gets printed
   from a laptop on a cart with no network, and a webfont that fails to load
   reflows the sheet — which changes how many questions fit on the page. */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("assets/brand/big-shoulders-display-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/brand/barlow-condensed-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Two ink tokens, deliberately. Text is brand Ink; every line a student
     writes on, and all notation, is pure black. The Quiz Pack print proof
     measured brand silver #B0BEC5 at 188 in greyscale, lifting to 214 after one
     photocopier generation — it was drawing the answer rules. Brand Ink
     survives copying fine as text, but hairlines have far less to lose before
     they are gone. */
  --ink: #171717;
  --rule: #000;
  --paper: #fff;
  --quiet: #4f4a47;
  --brick: #8b3a3a;

  --display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  /* Body is NOT the site's Barlow Condensed. The Brand Guide asks for "a clean,
     highly legible sans-serif" for content, and Production Format Standards is
     blunter: "Avoid: serif fonts, script fonts, condensed fonts." Condensed
     type at reading size is where low-vision legibility fails first, and these
     are read by students rather than skimmed by adults.

     A system stack rather than another vendored face: Helvetica is named in the
     guide's own list, so this is on-spec rather than a new opinion, and a font
     that cannot fail to load is worth more on paper than a distinctive one.
     Atkinson Hyperlegible is the upgrade if maximum legibility is wanted — it
     belongs in the site repo's assets/brand/ first, so it enters the kit
     properly rather than drifting in through one app. */
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --label: "Barlow Condensed", var(--body);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 24px 20px 48px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* A size larger and looser than the website's body copy. Print has no zoom. */
  font-size: 16px;
  line-height: 1.5;
}

.brs-wrap { max-width: 8.5in; margin: 0 auto; }

/* ---- screen-only toolbar ---- */
.brs-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #f6f6f6;
}
.brs-tools p { margin: 0 auto 0 0; font-size: 13px; color: var(--quiet); }
.brs-tools button,
.brs-tools a {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid #8c8c8c;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.brs-tools button:hover,
.brs-tools a:hover { background: #ececec; }
.brs-tools button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.brs-tools button:focus-visible,
.brs-tools a:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }
.brs-tools .primary { background: var(--ink); color: #fff; border-color: var(--ink); }
/* The primary button needs its own hover, and it needs to come after the
   general one. `.brs-tools button:hover` carries a pseudo-class, so it outranks
   `.brs-tools .primary` on specificity and was repainting the dark button light
   while its label stayed white — white on #ececec, which the contrast audit
   flagged as a definite AA failure on every page using this foundation. */
.brs-tools .primary:hover { background: #333; color: #fff; }

/* ---- sheet head ---- */
/* The thin brick divider is the Teaching Sequence treatment the poster series
   already uses, and it is the sheet's only colour. It carries no information,
   so a greyscale copy loses nothing. */
.brs-head { border-bottom: 2px solid var(--brick); padding-bottom: 12px; margin-bottom: 18px; }
.brs-eyebrow {
  margin: 0 0 2px;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}
.brs-head h1 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.brs-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; }
.brs-facts div { display: flex; gap: 6px; font-size: 12.5px; }
.brs-facts dt { margin: 0; color: var(--quiet); }
.brs-facts dt::after { content: ":"; }
.brs-facts dd { margin: 0; font-weight: 600; }

/* ---- foot ---- */
/* Version, generation date, terms and copyright. None of these can be added to
   a copy already in a filing cabinet, which is why they are foundation rather
   than per-document decoration. */
.brs-foot {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--quiet);
}
.brs-foot p { margin: 0 0 2px; }
.brs-foot code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }

@media print {
  @page { size: letter portrait; margin: 0.5in; }
  body { padding: 0; font-size: 12.5px; }
  .brs-wrap { max-width: none; }
  .brs-tools { display: none !important; }
  .brs-head h1 { font-size: 18px; }
  .brs-head { padding-bottom: 7px; margin-bottom: 10px; }
  .brs-foot { color: var(--ink); margin-top: 14px; }
  a { text-decoration: none; color: inherit; }
}