/* Grade stake page, on top of style.css: lath and hub drawings in raw wood with marker-pen lettering, the Caltrans
   marker card, the legend card and the grade sheet. Black on white with outlined stakes on paper. */
:root {
  --wood: #e9d3a6;
  --wood-edge: #8a6a36;
  --marker: #17150f;
  --cardbg: #ffffff;
  --cardrule: #a9b4bf;
}
@media (prefers-color-scheme: dark) {
  :root { --wood: #cdb27c; --wood-edge: #8f7444; --marker: #15120b; --cardbg: #f2f0ea; --cardrule: #8e98a2; }
}
.pages { margin: 0 0 6px; font-size: 0.92rem; }
.pages [aria-current] { font-weight: 650; color: var(--ink); }

/* the legend card */
.refcard .srcline { margin: 0 0 6px; font-weight: 650; line-height: 1.3; }
.refcard .rules { margin: 0 0 6px; padding-left: 1.1em; color: var(--muted); line-height: 1.35; }
.refcard p.rules { padding-left: 0; font-size: 0.86rem; }
.refcard .rules li { margin: 0 0 4px; }
.refcard .abbr { margin: 0 0 6px; line-height: 1.5; font-size: 0.88rem; }
.refcard .abbr span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.refcard .abbr b { font-family: var(--mono); }

/* stakes */
.stakes { display: grid; gap: 10px; margin: 4px 0 10px; }
.stakes.two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
figure.stake { margin: 0; }
figure.stake figcaption { font-size: 0.86rem; color: var(--muted); margin-top: 2px; max-width: 70ch; }
svg.stakev { display: block; width: 100%; max-width: 400px; height: auto; max-height: 460px; }
.stakes.two svg.stakev { max-width: 300px; }
svg.stakev.f4 { max-width: 540px; }
.stakev .fname { font: 650 12px var(--sans); fill: var(--ink); }
.stakev .fsub { font: 10px var(--sans); fill: var(--muted); }
.stakev .wood { fill: var(--wood); stroke: var(--wood-edge); stroke-width: 1.4; }
.stakev .lath { fill: var(--wood); stroke: var(--wood-edge); stroke-width: 1.2; }
.stakev .card { fill: var(--cardbg); stroke: #555; stroke-width: 1.2; }
.stakev .rule { stroke: var(--cardrule); stroke-width: 0.8; stroke-dasharray: 4 3; }
.stakev .rule2 { stroke: #555; stroke-width: 1.2; }
.stakev .mk { font: 700 17px "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; fill: var(--marker); letter-spacing: 0.02em; }
.stakev .mk .sup { font-size: 12px; text-decoration: underline; }
.stakev .circ { fill: none; stroke: var(--marker); stroke-width: 1.6; }
.stakev .flag { stroke: #333; stroke-width: 0.8; }
.stakev .hubb { fill: var(--wood); stroke: var(--wood-edge); stroke-width: 1.2; }
.stakev .hubtop { stroke: #333; stroke-width: 0.8; }
.stakev .hubl { font: 12px var(--sans); fill: var(--ink); }
.qs.zoomed .figview .stakes { width: 180%; }
@media (min-width: 900px) { .qs.zoomed .figview .stakes { width: auto; } }

@media (min-width: 1020px) {
  /* the legend is taller than the setup: it spans both rows, so the set starts right under the setup */
  .refcard { grid-row: 1 / span 2; }
  .work-area .bookwrap { width: auto; max-width: 100%; }
}
.stakev .slabel { font: 700 15px var(--sans); fill: var(--ink); }
/* grade rods: two views side by side */
.wins.wins2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; }

/* the grade sheet */
table.sheet-t caption { caption-side: top; text-align: left; font-size: 0.92rem; padding: 0 0 4px; color: var(--muted); }
table.sheet-t .c-sta { font-family: var(--mono); }
table.sheet-t td.c-off { white-space: nowrap; }
table.sheet-t td.blank input { width: 6.6em; }
table.sheet-t td.blank.c-cf input { width: 5.6em; text-align: left; text-transform: uppercase; }
table.sheet-t td.num, table.sheet-t td.kv { font-family: var(--mono); text-align: right; }

@media print {
  :root { --wood: #fff; --wood-edge: #000; --marker: #000; --cardbg: #fff; --cardrule: #777; }
  .plegend { font-size: 8.6pt; border: 0.75pt solid #000; padding: 3pt 6pt; margin: 0 0 6pt; break-inside: avoid; page-break-inside: avoid; }
  .plegend p, .plegend ul { margin: 0 0 2pt; }
  .plegend ul { padding-left: 11pt; }
  .plegend .abbr span { margin-right: 7pt; white-space: nowrap; }
  .plegend .sc { border-collapse: collapse; font-size: 8.4pt; }
  .plegend .sc td { padding: 0 6pt 0 0; }
  .plegend .cardsub { font-weight: 700; }
  /* a question may run onto the next page, but its heading, text and drawing stay together with the first answers */
  .pq > li { break-inside: auto; page-break-inside: auto; }
  /* the grade sheet is short: its text, HI box and table stay on one page (fresh-eyes 2026-10-26: the table sat alone on the next page) */
  .pq > li.pq-sheet { break-inside: avoid; page-break-inside: avoid; }
  /* each question is a table whose head (the question's title) repeats if the question runs onto the next page */
  table.pqt { width: 100%; border-collapse: collapse; }
  table.pqt > thead > tr > td, table.pqt > tbody > tr > td { padding: 0; }
  table.pqt > thead h3 { margin: 0 0 2pt; }
  .pq .pqh, .pq .pfig { break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  .pfig .stakes { display: flex; flex-wrap: nowrap; gap: 6mm; align-items: flex-start; }
  .pfig figure.stake { flex: 0 1 auto; max-width: 88mm; }
  .pfig svg.stakev { width: auto; max-width: 150mm; height: 62mm; }
  .pfig .stakes.two svg.stakev { height: 58mm; max-width: 82mm; }
  .pfig svg.stakev.f1 { height: 74mm; } /* a Caltrans card or one face: its raised decimals stay legible */
  .pfig .stakes.two svg.stakev.f1 { height: 66mm; }
  .pfig figure.stake figcaption { font-size: 8pt; color: #000; }
  .pfig .wins.wins2 { grid-template-columns: repeat(2, 35mm); gap: 6mm; max-width: none; }
  .pfig .rods { display: block; }
  .pfig .win span { font-size: 8.5pt; color: #000; }
  /* each question's key stays on one page (QA 2026-10-26: a key ran one row onto a page of its own) */
  .pk > li { break-inside: avoid; page-break-inside: avoid; }
  table.sheet-t { font-size: 9pt; }
  table.sheet-t caption { color: #000; font-size: 9pt; }
  table.sheet-t thead .c-sta, table.sheet-t thead .c-off { width: 22mm; }
  table.sheet-t thead .c-plan, table.sheet-t thead .c-rr, table.sheet-t thead .c-hub, table.sheet-t thead .c-cf { width: 26mm; }
}
/* the color table: the meaning wraps, the color name does not */
.refcard .sc td:last-child { white-space: normal; }
.refcard .sc td:first-child { white-space: nowrap; font-weight: 600; vertical-align: top; }