/* Quadrat Practice: a field survey clipboard. Pale sage ground, deep plant-green ink, and the bright yellow of a
   painted quadrat frame for the main button, question tags and the hero mark. Drawings stay white like paper in
   both themes. On paper everything is black on white apart from the plant symbols. */
:root {
  --bg: #f1f3ee;
  --paper: #ffffff;
  --ink: #17221a;
  --muted: #4b5a4f;
  --line: #d3dacf;
  --edge: #6f7d72;
  --accent: #1f5a37;
  --frame: #f0b90b;
  --frame-ink: #1a1400;
  --frame-soft: #fdf3cf;
  --info: #1f5a37;
  --ok: #17663a;
  --ok-soft: #dcefe2;
  --close: #7a5300;
  --close-soft: #f6ecd2;
  --bad: #a3241d;
  --bad-soft: #f8e0dd;
  --focus: #0b62c4;
  --head: "Gill Sans", "Gill Sans MT", Seravek, "Trebuchet MS", Calibri, "Segoe UI", sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 4px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121512;
    --paper: #1b201c;
    --ink: #e5ebe5;
    --muted: #a8b4aa;
    --line: #2f3a31;
    --edge: #6c7a6e;
    --accent: #8fd3a5;
    --frame: #f0b90b;
    --frame-ink: #1a1400;
    --frame-soft: #3a3010;
    --info: #9fdcb3;
    --ok: #8adca6;
    --ok-soft: #14301f;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --focus: #7db7ff;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
a { color: var(--info); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.15; font-weight: 700; }

/* hero: a small yellow quadrat frame with a string grid beside the title */
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 18px 0 14px; }
.hero::before { content: ""; grid-row: 1 / span 2; align-self: start; width: 58px; height: 58px; margin-top: 4px; border: 5px solid var(--frame); background:
  linear-gradient(var(--muted), var(--muted)) 33.3% 0 / 1px 100% no-repeat, linear-gradient(var(--muted), var(--muted)) 66.6% 0 / 1px 100% no-repeat,
  linear-gradient(var(--muted), var(--muted)) 0 33.3% / 100% 1px no-repeat, linear-gradient(var(--muted), var(--muted)) 0 66.6% / 100% 1px no-repeat,
  radial-gradient(circle at 26% 70%, #5f9a3a 0 5px, transparent 5.5px), radial-gradient(circle at 72% 30%, #5f9a3a 0 4px, transparent 4.5px), var(--paper); }
.hero h1 { font-size: clamp(28px, 4.6vw, 42px); margin: 0; letter-spacing: -0.01em; }
.lede { margin: 0; max-width: 66ch; }

/* ---------- controls ---------- */
.tool { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.setup { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--frame); padding: 10px 12px 2px; border-radius: 0 0 var(--r) var(--r); }
.ctl { display: grid; gap: 8px 10px; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto; grid-template-areas: "course level count new"; align-items: end; }
.f-course { grid-area: course; } .f-level { grid-area: level; } .f-count { grid-area: count; } .f-new { grid-area: new; }
.fld { display: grid; gap: 2px; min-width: 0; }
.fld span { font: 600 14px var(--sans); color: var(--muted); }
.fld select { width: 100%; }
.more { display: flex; flex-wrap: wrap; gap: 0 22px; }
.more details[open] { flex-basis: 100%; }
.more details > fieldset, .more details > div { background: var(--bg); padding: 8px 10px; margin: 0 0 10px; border-radius: var(--r); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font: 600 15px var(--sans); color: var(--muted); padding: 0; margin-bottom: 4px; }
.tdet summary, .rules summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; display: list-item; }
.tsum { font-weight: 400; color: var(--muted); font-size: 15px; }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; padding-top: 4px; }
.tg { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; min-height: 44px; background: var(--paper); }
.tg input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.tg b { display: block; font-weight: 600; font-size: 15.5px; }
.tg small { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; max-width: 100%; }
.btn { font: 600 16px var(--sans); min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--frame); border-color: #c99a00; color: var(--frame-ink); }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.link { font: inherit; background: none; border: 0; color: var(--info); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.rl { margin: 4px 0 0; padding-left: 20px; font-size: 15.5px; line-height: 1.45; }
.rl li { margin: 0 0 4px; }

/* ---------- the sheet ---------- */
.note { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--bad); background: var(--bad-soft); font-size: 16px; border-radius: var(--r); }
#store-note { overflow-wrap: anywhere; }
.note.info { border-color: var(--info); background: var(--paper); }
.sheet:focus { outline: none; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.sheet-head h2 { font-size: 28px; margin: 6px 0 0; }
.code { font-family: var(--mono); letter-spacing: 0.06em; }
.score { margin: 0; color: var(--muted); font-size: 15px; }
.sline { margin: 2px 0 10px; color: var(--muted); font-size: 15px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.q { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.qhead { padding: 12px 14px 0; }
.q h3 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 10px; }
/* the question number sits in a little yellow frame, like a numbered quadrat tag */
.qn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border: 3px solid var(--frame); font: 700 15px var(--mono); color: var(--ink); }
.scen { margin: 6px 14px 8px; max-width: 75ch; }
.figview { padding: 0 14px; min-width: 0; }
.qparts { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 10px 14px 14px; }

/* ---------- drawings and tables: white like paper in both themes ---------- */
.docwrap { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-start; color: #17221a; max-width: 100%; }
.fig { margin: 0; width: 300px; max-width: 100%; }
.f-kite { width: 520px; }
.f-kgrid { width: 340px; }
/* the drawing grid has narrower columns, so its labels are set smaller to match the read diagrams */
.f-kgrid .kl { font-size: 11px; }
.f-kgrid .kx, .f-kgrid .kt { font-size: 9.5px; }
svg.doc { display: block; width: 100%; height: auto; background: #fff; }
.ground { fill: #edf2e2; }
.bark { fill: #ebe7de; }
.qf { fill: none; stroke: #f0b90b; stroke-width: 5; }
.qf-in { fill: none; stroke: #4a3a00; stroke-width: 0.8; }
.gl { stroke: #3b3b3b; stroke-width: 0.9; }
.g-pet { fill: #fff; stroke: #333; stroke-width: 0.7; }
.g-eye { fill: #f2c230; stroke: #333; stroke-width: 0.6; }
.g-btc { fill: #ffe14a; stroke: #6b5200; stroke-width: 0.7; }
.g-btc-c { fill: #6b5200; }
.g-btc-s { stroke: #6b5200; stroke-width: 0.6; fill: none; }
.g-dan { fill: #f5a70a; stroke: #6a4300; stroke-width: 0.7; stroke-linejoin: round; }
.g-dan-c { fill: #6a4300; }
.g-pla { fill: #3f7a2c; stroke: #17330f; stroke-width: 0.6; }
.g-pla-c { fill: #17330f; }
.g-clo { fill: #6fa84a; stroke: #24470f; stroke-width: 0.8; }
.g-stem { stroke: #2f5a1a; stroke-width: 1.4; fill: none; }
.p-moss { fill: #7fae4a; }
.p-moss-d { fill: #3f6b1f; }
.p-lic { fill: #d6dcb8; }
.p-lic-d { fill: none; stroke: #7f8a55; stroke-width: 1; }
.edge { fill: none; stroke: #2a3a1c; stroke-width: 0.9; }
.kdot { font: 700 12px var(--sans); fill: #b0124f; text-anchor: middle; }
.kcell { fill: #fbe3ec; }
.kx-out { stroke: #b0124f; stroke-width: 1.8; }
.kbg { fill: #fff; }
.kg { stroke: #b9c2b2; stroke-width: 0.8; }
.kv { stroke: #d3d9cd; stroke-width: 0.8; }
.kh { stroke: #e2e6de; stroke-width: 0.6; }
.kc { stroke: #222; stroke-width: 1; }
.kp { fill: #9ccc7a; stroke: #1f4a12; stroke-width: 1.2; stroke-linejoin: round; }
.kp.mine { fill: rgba(240, 185, 11, 0.55); stroke: #6b5200; }
.kmine { stroke: #6b5200; stroke-width: 3; }
.kl { font: 700 14px var(--sans); fill: #17221a; }
.kx { font: 13px var(--sans); fill: #333; text-anchor: middle; }
.kt { font: 12px var(--sans); fill: #333; text-anchor: middle; }
.ka { stroke: #333; stroke-width: 1; }
.ks, .kcap { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; font-size: 15px; color: var(--ink); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 24px; height: 24px; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.tw { max-width: 100%; overflow-x: auto; }
table.doc { border-collapse: collapse; background: #fff; color: #17221a; font-size: 15px; font-variant-numeric: tabular-nums; border: 1.5px solid #17221a; }
table.doc th, table.doc td { border: 1px solid #b9c2b9; padding: 5px 10px; text-align: right; vertical-align: middle; }
table.doc th { font-weight: 600; text-align: left; }
table.doc thead th { background: #eef2ea; font-size: 14px; text-align: center; max-width: 11em; }
table.doc td { font-family: var(--mono); font-size: 15px; white-space: nowrap; min-width: 52px; }

/* answer boxes */
.part { border: 0; margin: 0; padding: 0; min-width: 0; }
.part .prompt, .part legend { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 4px; color: var(--ink); }
.ain { display: flex; align-items: center; gap: 8px; }
.ain input { width: 8em; max-width: 100%; font-variant-numeric: tabular-nums; }
.ain .unit { color: var(--muted); }
.opts { display: grid; gap: 4px; }
.opt { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.part.is-right input[inputmode] { border-color: var(--ok); background: var(--ok-soft); }
.part.is-wrong input[inputmode] { border-color: var(--bad); background: var(--bad-soft); }
.part.is-close input[inputmode], .part.is-unread input[inputmode] { border-color: var(--close); background: var(--close-soft); }
.part.is-right .opts { outline: 2px solid var(--ok); outline-offset: 2px; }
.part.is-wrong .opts { outline: 2px solid var(--bad); outline-offset: 2px; }
.fb { margin: 4px 0 0; font-size: 15px; line-height: 1.4; padding: 4px 8px; }
.fb.right { color: var(--ok); background: var(--ok-soft); }
.fb.wrong { color: var(--bad); background: var(--bad-soft); }
.fb.close, .fb.unread { color: var(--close); background: var(--close-soft); }
/* drawing a kite: one small box per distance */
.qparts.minis { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px 10px; }
.qparts.minis .lead, .qparts.minis .qfoot, .qparts.minis details.work { grid-column: 1 / -1; }
.lead { margin: 0; font-weight: 600; }
.part.mini .prompt { font-weight: 600; color: var(--muted); font-size: 15px; margin-bottom: 2px; }
.part.mini .ain input { width: 4.5em; }
.part.mini .unit { display: none; }
.qfoot { display: flex; gap: 10px; align-items: center; }
details.work { margin-top: 2px; border-top: 1px dashed var(--line); padding-top: 4px; }
details.work summary { cursor: pointer; color: var(--info); min-height: 44px; display: flex; align-items: center; font-weight: 600; }
details.work .figview { padding: 0; margin: 6px 0 8px; }
.ans { margin: 8px 0 2px; }
.steps { margin: 0 0 4px; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 6px; }
.ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--frame-soft); padding: 6px 10px; }
.share { margin: 16px 0 6px; }
.print-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.print-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; max-width: 100%; }
.print-row select { max-width: 100%; min-width: 0; }
.share-out label { display: grid; gap: 4px; font-weight: 600; margin-top: 8px; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; background: var(--paper); border: 1px solid var(--line); padding: 4px 12px; }
.recent summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.recent small { display: block; color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 15px; margin: 0; }
.toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(150%); background: var(--ink); color: var(--paper); padding: 10px 16px; max-width: min(92vw, 520px); font-size: 15.5px; transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- content ---------- */
.content { max-width: 72ch; padding: 26px 0 20px; }
.content h2 { font-size: 27px; margin: 26px 0 6px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.faq p { margin: 0 0 12px; }
.sources { font-size: 15px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 16px 0 28px; font-size: 15px; color: var(--muted); }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.print-root { display: none; }

@media (min-width: 900px) {
  .qparts:not(.minis) { grid-template-columns: 1fr 1fr; gap: 12px 22px; }
  .qparts .qfoot, .qparts details.work, .qparts .part.wide { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "course course" "level level" "count new"; }
}
@media (max-width: 480px) {
  .hero { padding: 10px 0 10px; gap: 4px 12px; }
  .hero::before { width: 42px; height: 42px; border-width: 4px; }
  .hero h1 { font-size: 26px; }
  .lede { font-size: 15.5px; line-height: 1.45; grid-column: 1 / -1; }
  .q h3 { font-size: 20px; }
  .qhead { padding: 10px 10px 0; }
  .scen { margin: 6px 10px; }
  .figview { padding: 0 10px; }
  .qparts { padding: 8px 10px 12px; }
  .fig { width: 100%; }
  table.doc { font-size: 14px; }
  table.doc th, table.doc td { padding: 4px 7px; }
  table.doc td { font-size: 14px; min-width: 44px; }
  table.doc thead th { font-size: 13px; }
  .tdet summary, .rules summary { min-height: 40px; padding: 8px 0; }
  .qparts.minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- print ---------- */
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --edge: #555; }
  @page { margin: 12mm 12mm; }
  body { background: #fff; color: #000; font: 10.5pt/1.36 var(--sans); }
  main, footer, .toast, .skip { display: none !important; }
  .print-root { display: block; }
  svg, svg *, table.doc, thead th, .legend svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8.5pt var(--sans); color: #444; padding-bottom: 5pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; border-bottom: 2pt solid #000; margin-bottom: 4pt; }
  .ph h2 { font: 700 17pt var(--head); margin: 0; white-space: nowrap; }
  .ph p { margin: 0; font-size: 9pt; text-align: right; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 4pt; }
  .pround { margin: 0 0 4pt; font-size: 8.3pt; line-height: 1.3; border: 0.8pt solid #000; padding: 3pt 6pt; }
  .pround ul { margin: 0; padding-left: 11pt; }
  .pround li { break-inside: avoid; margin: 0 0 1pt; }
  .pq, .pk { list-style: none; margin: 0; padding: 0; orphans: 1; widows: 1; }
  .pq > li, .pk > li { padding: 6pt 0 7pt; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pq h3 { font: 700 12.5pt var(--head); margin: 0 0 2pt; }
  .pscen { margin: 0 0 4pt; font-size: 10.2pt; }
  .pbody, .pkbody { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 7mm; align-items: start; }
  .pbody.stack, .pkbody.stack { grid-template-columns: minmax(0, 1fr); }
  .docwrap { gap: 3mm 5mm; flex-wrap: nowrap; }
  .fig { width: 46mm; }
  .pkfig .fig { width: 52mm; }
  /* plants to count print about 4.5 mm across, big enough to judge the ones on the frame (fresh-eyes 2026-10-27) */
  .k-count .fig, .pkbody.k-count .pkfig .fig { width: 62mm; }
  .k-freq .fig, .pkbody.k-freq .pkfig .fig { width: 54mm; }
  .f-kite { width: 80mm; }
  .f-kgrid { width: 78mm; }
  .pkfig .f-kite { width: 80mm; }
  .pkfig .f-kgrid { width: 72mm; }
  .f-kgrid .kl { font-size: 8px; }
  .f-kgrid .kx, .f-kgrid .kt { font-size: 7px; }
  .legend { font-size: 8.5pt; gap: 1mm 3mm; margin-top: 1mm; }
  .legend svg { width: 5mm; height: 5mm; }
  .ks, .kcap { font-size: 8.5pt; color: #000; margin-top: 1mm; }
  .tw { overflow: visible; }
  table.doc { font-size: 9.2pt; border-width: 1pt; }
  table.doc th, table.doc td { padding: 1.5pt 5pt; border-color: #777; }
  table.doc td { font-size: 9.4pt; min-width: 9mm; }
  table.doc thead th { font-size: 8.6pt; background: #eee; max-width: 30mm; }
  .pparts { display: grid; grid-template-columns: 1fr; gap: 4pt; font-size: 9.8pt; }
  .pparts .pp { break-inside: avoid; }
  .pparts .pp p { margin: 0; }
  .pline { margin: 7pt 0 2pt !important; }
  .uline { display: inline-block; width: 30mm; border-bottom: 0.8pt solid #000; }
  .popts { display: grid; gap: 1pt; margin: 2pt 0 0 !important; }
  .pdraw { margin: 2mm 0 0; font-size: 9.8pt; }
  .pbody.stack .pparts { grid-template-columns: 1fr 1fr 1fr; column-gap: 6mm; }
  /* the grid students draw on: 10 units = one square, about 5 mm on paper */
  .pbody.k-kitedraw .docwrap { flex-wrap: nowrap; align-items: flex-start; gap: 3mm; }
  .pbody.k-kitedraw .f-kgrid { width: 112mm; flex: none; }
  .pbody.k-kitedraw .tw { flex: none; }
  .pbody.k-kitedraw .kl { font-size: 8px; }
  .pbody.k-kitedraw .kx, .pbody.k-kitedraw .kt { font-size: 7px; }
  .pbody.k-kitedraw .kg { stroke: #8a9486; stroke-width: 0.6; }
  .pbody.k-kitedraw .kv { stroke: #b4bcb0; stroke-width: 0.6; }
  .pbody.k-kitedraw .kh { stroke: #c4cbc0; stroke-width: 0.5; }
  .pkey { break-before: page; page-break-before: always; }
  .psheet + .psheet { break-before: page; page-break-before: always; }
  .pkey + .pkey { break-before: page; page-break-before: always; }
  .pk h3 { font: 700 11.5pt var(--head); margin: 0 0 3pt; }
  table.pkt { width: 100%; border-collapse: collapse; font-size: 9pt; table-layout: fixed; }
  table.pkt td { border-top: 0.5pt solid #bbb; padding: 2pt 4pt; vertical-align: top; }
  table.pkt td.pkq { width: 30%; }
  table.pkt td.pka { width: 20%; font-weight: 700; }
}