/* Printable water-hunt checklist (/water-hunt/).
   Deliberately ink-light: white paper, black text, hollow tick boxes. The
   site's dark olive theme would empty a colour cartridge and photocopy
   badly, and this sheet is meant to be run off for a classroom or a 4-H
   meeting. Sized to one sheet of US Letter with room to write. */

:root{ --ink:#15160f; --soft:#43462f; --edge:#b9b39b; --gold:#6b4f10; }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#57573f;color:var(--ink);
  font-family:'Public Sans',system-ui,sans-serif;line-height:1.45;padding:18px}

/* On-screen only helper bar; never printed (see the print block at the end).
   It says so explicitly, because a dark bar sitting above a white worksheet
   reads like part of the page and people reasonably assume it will print. */
.screenbar{max-width:8.5in;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:10px 16px;
  align-items:center;justify-content:space-between;
  background:#22251A;color:#DAD4BE;border:1px solid #3A3E2C;border-radius:8px;
  padding:11px 15px;font-size:14px}
.sb-msg{flex:1 1 16em;line-height:1.45}
.sb-msg b{display:block;color:#94A074;font-weight:600;font-size:13px}
.sb-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.printbtn{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  color:#191B12;background:#E6A630;border:none;border-radius:6px;
  padding:10px 16px;min-height:44px;cursor:pointer;transition:.14s}
.printbtn:hover{background:#f0b850}
.printbtn:focus-visible{outline:2px solid #DAD4BE;outline-offset:2px}
.backlink{color:#E6A630;text-decoration:none;font-weight:600}
.backlink:hover{text-decoration:underline}

.sheet{max-width:8.5in;margin:0 auto;background:#fff;color:var(--ink);
  padding:0.5in 0.55in;box-shadow:0 6px 26px #0006}

/* ---- header ---- */
.head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  border-bottom:3px solid var(--ink);padding-bottom:11px}
h1{font-family:'Oswald',sans-serif;font-weight:700;font-size:34px;line-height:1;
  letter-spacing:.01em}
.sub{font-size:14.5px;color:var(--soft);margin-top:4px;max-width:30em}
.who{display:grid;gap:7px;flex-shrink:0}
.field{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--soft)}
.field span{font-family:'IBM Plex Mono',monospace;letter-spacing:.06em}
.field i{display:block;width:135px;border-bottom:1px solid var(--edge);height:15px}

h2{font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.03em;margin:14px 0 7px;
  display:flex;align-items:baseline;gap:9px}
.pts{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.05em;color:var(--gold);text-transform:none}

/* ---- how to play ---- */
.how ol{padding-left:19px;display:grid;gap:2px}
.how li{font-size:13.5px;color:var(--soft)}

/* ---- the checklist ---- */
.grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px}
.grid li{display:flex;align-items:center;gap:9px;font-size:14px;
  border-bottom:1px dotted var(--edge);padding-bottom:5px}
.grid li span{flex:1}
.box{flex-shrink:0;width:16px;height:16px;border:2px solid var(--ink);border-radius:3px}
.tally{flex-shrink:0;width:34px;height:17px;border:1px solid var(--edge);border-radius:3px}

/* ---- bonus + score ---- */
.bonus-list{list-style:none;display:grid;gap:6px}
.bonus-list li{display:flex;align-items:center;gap:9px;font-size:14px}
.bonus-list b{color:var(--gold)}
.score{margin-top:10px;display:flex;align-items:center;gap:11px;
  border:2px solid var(--ink);border-radius:8px;padding:9px 13px;width:max-content}
.score span{font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase}
.score i{display:block;width:88px;height:26px;border-bottom:2px solid var(--ink)}

/* ---- rules ---- */
.rules{margin-top:14px;border:2px solid var(--ink);border-radius:8px;padding:11px 14px}
.rules h2{margin-top:0}
.rules ul{padding-left:19px;display:grid;gap:3px}
.rules li{font-size:13.5px;color:var(--soft)}

/* ---- footer ---- */
.foot{margin-top:16px;padding-top:12px;border-top:3px solid var(--ink);
  display:flex;gap:15px;align-items:center}
.qr img{width:78px;height:78px;display:block}
.big{font-family:'Oswald',sans-serif;font-weight:600;font-size:17px}
.fine{font-size:11.5px;color:var(--soft);margin-top:4px}

@media (max-width:560px){
  .head{flex-direction:column}
  .grid{grid-template-columns:1fr}
  .sheet{padding:22px 18px}
  /* min-width:0 lets the footer text shrink inside the flex row; without it
     the long URL line kept its intrinsic width and pushed the page 4px wide
     at 320px. */
  .foot{flex-wrap:wrap}
  .footwords{min-width:0}
  .big{overflow-wrap:anywhere}
}

@page{ size:letter portrait; margin:0.45in; }

@media print{
  body{background:#fff;padding:0}
  .screenbar{display:none}
  .sheet{max-width:none;margin:0;padding:0;box-shadow:none}

  /* Print layout must be stated in full, never inherited from the screen
     breakpoints. Printing from a phone lays the page out at the phone's
     width, so the max-width:560px rules below were still applying: the
     checklist collapsed to one column and the sheet grew from 812px to
     1127px, which is what pushed it onto a second sheet. Restate the
     two-column layout here so paper always gets the paper layout. */
  .head{flex-direction:row}
  .grid{grid-template-columns:1fr 1fr}
  .bonus-list li,.grid li{break-inside:avoid}
  /* Keep each block whole rather than letting a checklist split across a
     page break and orphan two rows onto a second sheet. */
  section,.foot{break-inside:avoid}
  a{text-decoration:none;color:inherit}

  /* Fit one page of Letter under REAL print settings, not just ideal ones.
     Sizing this against my own 0.45in @page margin was the mistake: most
     browsers default to 0.5in and add a header/footer, which leaves about
     912px of usable height rather than 970. At the old sizes the sheet ran
     16-24px over in exactly that configuration and spilled a second, nearly
     empty page. Target is now ~860px, so it survives the worst common case
     with room to spare — while keeping the tick boxes and tally cells big
     enough for a child to actually mark. */
  h1{font-size:29px}
  .sub{font-size:13px}
  h2{font-size:16px;margin:9px 0 4px}
  .how li,.rules li{font-size:12.5px;line-height:1.32}
  .how ol{gap:0}
  .grid{gap:4px 22px}
  .grid li{font-size:13.5px;padding-bottom:3px}
  .box{width:16px;height:16px}
  .tally{height:19px}
  .bonus-list{gap:4px}
  .bonus-list li{font-size:13.5px}
  .score{margin-top:7px;padding:6px 12px}
  .score i{height:24px}
  .score span{font-size:15px}
  .rules{margin-top:9px;padding:8px 12px}
  .rules ul{gap:1px}
  .foot{margin-top:9px;padding-top:8px}
  .qr img{width:64px;height:64px}
  .big{font-size:15px}
  .fine{font-size:10.5px}
  .head{padding-bottom:8px}
  .field i{height:14px}
}

/* Phones lay the print job out at their own narrow width, where the labels
   start wrapping and each wrapped row adds height. Tighten type and the
   tally cells at those widths so the sheet still lands on one page — this
   only ever applies on paper, never on screen. */
@media print and (max-width:620px){
  .sheet{font-size:12px}
  h1{font-size:25px}
  .sub{font-size:11.5px}
  h2{font-size:14px;margin:7px 0 3px}
  .how li,.rules li{font-size:11px;line-height:1.28}
  .grid{gap:2px 10px}
  .grid li{font-size:11.5px;padding-bottom:2px;gap:6px}
  .box{width:14px;height:14px}
  .tally{width:26px;height:16px}
  .bonus-list li{font-size:11.5px}
  .score span{font-size:13px}
  .score i{width:70px;height:20px}
  .rules{padding:6px 10px}
  .foot{margin-top:7px;padding-top:6px}
  .qr img{width:54px;height:54px}
  .big{font-size:13px}
  .fine{font-size:9.5px}
  .field i{width:100px}
  /* The screen rule wraps the footer so it cannot push a 320px page wide; on
     paper that wrap costs height, and at 320px it was the 24px that broke the
     one-page budget. Keep the footer on one row when printing. */
  .foot{flex-wrap:nowrap}
}

/* Very narrow layouts (a small phone printing) need one more step down. */
@media print and (max-width:360px){
  h1{font-size:22px}
  .how li,.rules li{font-size:10px;line-height:1.25}
  .grid li,.bonus-list li{font-size:10.5px}
  .grid{gap:1px 8px}
  .tally{width:22px;height:14px}
  .qr img{width:46px;height:46px}
  .big{font-size:11.5px}
  .fine{font-size:8.5px}
}