/* Divisible Dash print kit.
   Shared by the printable school-pack pieces: the divisibility rules wall
   poster, the classroom how-to-play poster, the department slides and the
   social card generator. /css/site.css keeps the screen site; this file
   keeps the pieces that end up on paper or on a projector.

   Four decisions govern everything here, and they are all deliberate.

   1. MONO FIRST. School printers are mostly black and white, often tired,
      and departments ration toner. Every piece is designed in ink and
      greys, and must be complete with every colour and every background
      fill removed. Colour is an enhancement, never the information.

   2. FOREGROUND PAINT ONLY. Chrome and Safari both default to dropping
      background graphics when printing, so anything that MUST appear is
      text, a border, or an SVG fill. A tint panel always carries a keyline
      so the cell still exists when the tint does not.

   3. CONTAINER QUERY UNITS. Sizes are in cqw against the sheet, so one
      design serves A4 and A3 with no second stylesheet. A4 and A3 are both
      1:root2, so the same sheet simply scales: on A4 (190mm of content)
      1cqw is 1.90mm, on A3 (277mm) it is 2.77mm.

   4. THE TILE, NOT THE BOLT. The site's lightning is additive glow over a
      dark ground and becomes either a weedy stroke or a toner sink on
      paper. The print motif is the game's own falling tile: a wide rounded
      rectangle with a number in it, which costs an outline and which a
      pupil re-recognises the moment the app opens.

   The screen palette is not a print palette. The site cyan (#35d0e0)
   prints as a muddy pale grey on an office laser, so it is never used as
   ink here. */

:root {
  /* Print ink. Five tokens, and nothing else is used as ink on paper. */
  --p-ink: #10132b;      /* body and numerals */
  --p-ink-2: #4a4f74;    /* secondary, notes, traps */
  --p-accent: #3b3fae;   /* the one accent that survives an office laser */
  --p-line: #c9cee6;     /* keylines */
  --p-tint: #f2f4ff;     /* panel tint, always with a keyline under it */

  /* Tier colour. These are the GAME's own three tier colours
     (MenuManager.cs:100 colA=GREEN, colB=BLUE, colC=RED), darkened to
     values that hold on paper: the screen versions are bright on white.
     Colour here is information, not decoration. Beginner is 2, 5, 10 and
     3 (3 moved to Beginner 2026-10-01); Intermediate is 9, 4, 8 and 6;
     Advanced is 7. A rule takes the colour of the tier that teaches it first.

     The ink-density ramp underneath (plain / tinted+keylined / heavy
     keyline + solid chip) still carries the same distinction, so a
     black-and-white print loses the colour without losing the meaning.
     That is the test every colour on these sheets has to pass. */
  --t-beg:      #0e9b63;
  --t-beg-line: #93d4b6;
  --t-beg-tint: #e9f7f1;
  --t-int:      #2b57cc;
  --t-int-line: #aec1f0;
  --t-int-tint: #edf1fe;
  --t-adv:      #c1202f;
  --t-adv-line: #e8aeb4;
  --t-adv-tint: #fdeef0;

  /* Keyline weights, in cqw so they scale with the sheet rather than
     staying a fixed pixel size in a small preview. On A4 the content box is
     190mm, so 0.21cqw is 0.4mm and 0.42cqw is 0.8mm: still above the ~0.26mm
     at which a tired printer goes patchy. */
  --p-hair: 0.21cqw;
  --p-rule: 0.42cqw;
}

/* ============================================================
   THE SHEET
   A printable piece is one element, a direct child of <body>, so
   printing can hide its siblings with display:none. Hiding with
   visibility:hidden is the common trick and it is wrong: hidden boxes
   still lay out and still generate page boxes, which is where trailing
   blank pages come from.
   ============================================================ */

.dd-sheet {
  container-type: inline-size;
  aspect-ratio: 210 / 297;          /* A4 and A3 share this ratio */
  background: #fff;
  color: var(--p-ink);
  font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow: hidden;                  /* a long string clips, never spawns page 2 */
}

/* On screen the sheet is a scaled preview card. */
.dd-sheet {
  width: 100%;
  max-width: 740px;
  margin: 26px auto 0;
  border: 1px solid #d7dbf0;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.dd-sheet.wide { max-width: 860px; }

.dd-sheet-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 3.2cqw;
  gap: 1.5cqw;
}

/* ============================================================
   PRIMITIVES
   The four devices that make the pieces read as one family. They are
   shared instead of a dark background, because the paper pieces are
   white and the slides are dark.
   ============================================================ */

/* ---- The numeral, underlined.
   Lifted from the in-game HUD's "DIVISIBLE BY 5" bar: a heavy figure with
   a thin accent rule directly beneath it. One device, used on every piece,
   which ties the set together far better than a repeated graphic would. */
.dd-num {
  display: block;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--p-ink);
}
.dd-num-wrap { display: inline-block; }
.dd-num-wrap::after {
  content: "";
  display: block;
  height: var(--p-rule);
  margin-top: 0.7cqw;
  background: var(--p-accent);
  /* The underline is the accent's only structural job, so it is the one
     place the fill genuinely has to survive. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- The label chip. .kicker on screen, a bordered chip on paper. */
.dd-chip {
  display: inline-block;
  font-size: 1.7cqw;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-2);
}
.dd-chip.boxed {
  border: var(--p-hair) solid var(--p-line);
  border-radius: 0.8cqw;
  padding: 0.5cqw 1.1cqw;
  color: var(--p-accent);
}
.dd-chip.solid {
  background: var(--p-ink);
  color: #fff;
  border: 0;
  border-radius: 0.8cqw;
  padding: 0.5cqw 1.1cqw;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- The tile. The game's falling tile, as an outline.
   Ratio and radius follow the in-game proportions (wide, softly rounded),
   so a printed tile and an on-screen tile are the same object. */
.dd-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 118 / 52;
  border: var(--p-rule) solid var(--p-ink);
  border-radius: 12%/27%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--p-ink);
  padding: 0 0.8cqw;
}
.dd-tile.accent { border-color: var(--p-accent); color: var(--p-accent); }
.dd-tile.ghost { border-color: var(--p-line); color: var(--p-ink-2); }

/* ---- The corner lockup. Same relative size and placement on every
   piece, which is most of what makes a set read as a set. */
.dd-lockup {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
.dd-lockup svg, .dd-lockup img {
  display: block; flex: 0 0 auto;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dd-lockup .lk-name {
  font-weight: 800;
  font-size: 2.7cqw;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.dd-lockup .lk-url {
  font-weight: 700;
  font-size: 2.05cqw;
  color: var(--p-accent);
  line-height: 1.2;
}

/* ---- A worked example strip. Tabular, keylined, tinted.
   The tint is decoration; the keyline is the structure. */
.dd-eg {
  border: var(--p-hair) solid var(--p-line);
  border-radius: 0.9cqw;
  background: var(--p-tint);
  padding: 1cqw 1.3cqw;
  font-variant-numeric: tabular-nums;
  color: var(--p-ink);
}
.dd-eg b { font-weight: 800; }

/* ---- A trap note. The mistakes pupils actually make, marked with a
   drawn triangle rather than an icon font or an emoji. */
.dd-trap {
  display: flex;
  gap: 0.9cqw;
  align-items: flex-start;
  color: var(--p-ink-2);
}
.dd-trap svg { flex: 0 0 auto; margin-top: 0.35cqw; }

/* ---- QR host. The QR is information, so its fill must survive, and it
   always needs its quiet zone. */
.dd-qr { background: #fff; }
.dd-qr svg {
  width: 100%; height: 100%; display: block;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ============================================================
   PRINT
   Two rules do most of the work: hide the siblings with display:none,
   and undo site.css's viewport-height flex body, which otherwise adds a
   blank second page to every one of these.
   ============================================================ */

@media print {
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    /* site.css sets min-height:100vh and display:flex on body. On paper
       that is an entire extra sheet under the content. */
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
  }

  /* The sheet is a direct child of <body> so this reaches every sibling. */
  body > *:not(.dd-sheet) { display: none !important; }

  .dd-sheet {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* aspect-ratio is KEPT on purpose. Safari ignores @page { size }, so
       the sheet cannot be told which paper it is on; keeping the ratio
       makes it fill an A4 and an A3 page box identically instead. */
  }

  /* Safari wants page-break-inside alongside the modern property. */
  .dd-eg, .dd-trap, .p-cell, .dd-tile {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}