/* Teaching materials: the lesson plan and the pupil worksheet.
   Separate from app.css because these are document-shaped, not app-shaped, and
   the thing that matters most about them is how they come out of a printer. */

:root {
  --ink: #1a1a1a;
  --muted: #5a5a5a;
  --rule: #cfcabf;
  --paper: #fdfcfa;
  --tint: #f2efe8;
  --accent: #a8420a;
  --box: #fbf6ea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e3; --muted: #a49f96; --rule: #3a3630;
    --paper: #171613; --tint: #201e1a; --accent: #e2803f; --box: #241f16;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  max-width: 48rem;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 Georgia, "Iowan Old Style", "Times New Roman", serif;
}

h1 { font-size: 1.7rem; margin: 0 0 .3rem; line-height: 1.2; }
h2 {
  font-size: 1.2rem;
  margin: 2rem 0 .5rem;
  padding-bottom: .2rem;
  border-bottom: 2px solid var(--rule);
}
h3 { font-size: 1rem; margin: 1.2rem 0 .3rem; }

.subtitle { color: var(--muted); margin: 0 0 1.5rem; font-style: italic; }
.nav { font-family: system-ui, sans-serif; font-size: .85rem; margin-bottom: 1.5rem; }
.nav a { color: var(--accent); }

table { border-collapse: collapse; width: 100%; margin: .8rem 0; font-size: .93rem; }
th, td { text-align: left; padding: .45rem .6rem; border: 1px solid var(--rule); vertical-align: top; }
th { background: var(--tint); font-family: system-ui, sans-serif; font-size: .82rem; }
td.fill { height: 2.1rem; }

.box {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--box);
  padding: .8rem 1rem;
  margin: 1rem 0;
  border-radius: 0 .3rem .3rem 0;
}
.box h3 { margin-top: 0; }

.timings td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; width: 5.5rem; }

/* Space for pupils to write. Ruled lines print far better than empty boxes. */
.write { border-bottom: 1px solid var(--rule); height: 1.9rem; margin: 0 0 .15rem; }
.write.short { width: 60%; }

ol, ul { padding-left: 1.4rem; }
li { margin: .3rem 0; }

.grid-svg { width: 100%; height: auto; max-width: 34rem; display: block; margin: .8rem 0; }
.grid-svg .axis { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.grid-svg .fine { stroke: var(--rule); stroke-width: .6; }
/* Odd metres are drawn fainter: they are there so a reading taken at 1, 3 or
   5 m can actually be placed, without crowding the labelled even metres. */
.grid-svg .minor { stroke-opacity: .45; }
.grid-svg text { font: 11px system-ui, sans-serif; fill: var(--ink); }

.tick { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }
.answer { color: var(--accent); font-family: system-ui, sans-serif; font-size: .9rem; }
footer { margin-top: 3rem; padding-top: .8rem; border-top: 1px solid var(--rule);
         color: var(--muted); font-size: .8rem; font-family: system-ui, sans-serif; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }

.page-break { break-before: page; }

@media print {
  /* Teachers print these. Everything here is about paper, not screens.

     No `size` is declared on purpose. Naming A4 forces that page box even on a
     printer loaded with US Letter, which then scales or crops it. Leaving it
     out lets the browser use whatever paper is actually in the tray. The two
     differ in both directions -- A4 is 210x297mm, Letter 216x279mm -- so these
     pages have to fit the narrower of the two widths and the shorter of the two
     heights at once. */
  @page { margin: 10mm; }
  body { max-width: none; padding: 0; background: #fff; color: #000; font-size: 11pt; }
  .nav, .noprint { display: none !important; }
  h2 { break-after: avoid; }
  /* Headings sit closer to what precedes them on paper than on screen:
     2rem of air above every h2 is right for scrolling and wasteful in a
     document someone has to carry. Worth about a line per heading, which
     is what keeps these sheets paginating the same on A4 and Letter. */
  h2 { margin-top: 1.3rem; }
  h3 { margin-top: .9rem; }
  table, .box, .grid-svg { break-inside: avoid; }
  tr { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  /* A worksheet full of printed URLs is a worksheet nobody wants -- but a
     teacher reading a printed lesson plan cannot click, so links marked
     .showurl do print their address. */
  a[href^="http"]::after { content: ""; }
  a.showurl[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .box { background: #fff; border-left: 3px solid #000; }
  th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The hunt card. Twenty minutes, one side of A4, held in one hand while walking
   -- so everything here is about fitting on a single page and staying legible
   on a clipboard rather than about reading comfort at a desk. */
body.compact { font-size: 15px; }
body.compact h1 { font-size: 1.45rem; }
body.compact h2 { font-size: 1.05rem; margin: 1.1rem 0 .35rem; }
body.compact h3 { margin: 0 0 .25rem; font-size: .95rem; }
body.compact .box { padding: .6rem .8rem; margin: .7rem 0; }
body.compact table { margin: .5rem 0; }
body.compact .write { height: 1.6rem; }

/* The decision strip: read at a glance, while walking. */
.fastpath { font-size: .88rem; margin: .35rem 0 0; }

.header-strip td { width: 25%; }
.header-strip .write { margin-top: .2rem; }

.tricks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: .6rem 0; }
.trick {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  padding: .6rem .7rem;
  background: var(--box);
}
.trick p { margin: .3rem 0; font-size: .88rem; }

ol.think li { margin: .5rem 0; }

@media (max-width: 34rem) {
  .tricks { grid-template-columns: 1fr; }
}

.log td { width: 20%; vertical-align: top; }
.log .write { margin-top: .3rem; }

@media print {
  body.compact { font-size: 8.5pt; line-height: 1.4; }
  body.compact h2 { margin: .55rem 0 .2rem; }
  body.compact .box { padding: .45rem .7rem; margin: .5rem 0; }
  body.compact ol.think li { margin: .2rem 0; }
  body.compact footer { margin-top: .6rem; padding-top: .35rem; }
  body.compact .trick p { margin: .15rem 0; }
  body.compact .trick { padding: .4rem .5rem; }
  body.compact .write { height: 1.1rem; }
  body.compact p { margin: .4rem 0; }
  body.compact h1 { font-size: 15pt; }
  /* The whole point of this sheet is that it is one page. */
  .tricks { grid-template-columns: repeat(3, 1fr); gap: 3mm; }
  .trick { background: #fff; border-top: 2px solid #000; }
  body.compact .write { height: 1.35rem; }
}

/* The print button. Lives in the .noprint nav strip, so it never prints itself,
   and starts hidden so it does not appear at all without JavaScript -- a dead
   button on a page someone is about to print is worse than no button. */
.print-btn {
  font: inherit;
  font-family: system-ui, sans-serif;
  font-size: .85rem;
  padding: .3rem .7rem;
  border: 1px solid var(--rule);
  border-radius: .3rem;
  background: var(--tint);
  color: var(--ink);
  cursor: pointer;
}
.print-btn:hover { border-color: var(--accent); }