/* The bench sheet's own stylesheet.

   Self-contained, with its own colours, for `docs-chrome.css`'s reason: this page does not load
   `app.css`, so the palette variables are not here to inherit. It also should not — app.css is
   built around a topbar, a centred `main` and cards, none of which this page has.

   Two audiences, one document: a phone or tablet propped beside the board, and a sheet of paper. */
:root { color-scheme: light dark; }
body {
  margin: 0; padding: 1rem;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fff; color: #111;
}
@media (prefers-color-scheme: dark) { body { background: #14161a; color: #e8e8ea; } }

h1 { font-size: 1.25rem; margin: 0 0 .25rem; }
header { margin-bottom: 1rem; }
.controls { display: flex; gap: 1rem; align-items: center; margin: 0; font-size: .95rem; }
.controls button, .controls a { font: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid #8883; }
thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }

/* The designator leads and is the largest thing on the line — the inversion that *is* this page.
   Everywhere else it is the last column (see `forms.DEFAULT_GRID_COLUMNS`, which keeps CSV exports
   starting `qty,capacitance,voltage`); here it is what you are looking for on the board. */
.pos { font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.pn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; }
.mfr { display: block; font-family: inherit; font-size: .8rem; opacity: .65; }
.spec { white-space: nowrap; }

/* A finger-sized target, not a mouse-sized one: this is used with one hand while the other holds an
   iron. 24px is the smallest the WCAG target-size guidance accepts, and the row padding above adds
   the rest of the touch area. */
.tick { width: 2.5rem; }
.tick input { width: 1.5rem; height: 1.5rem; }
tr:has(.tick input:checked) .pos,
tr:has(.tick input:checked) .spec { text-decoration: line-through; opacity: .45; }

/* A kit is drawn as one section per board, so the sheet reads as the stack of single-board sheets
   someone actually works through. `h2` rather than a caption inside the table: the heading has to
   survive the narrow layout below, which takes the table apart entirely. */
h2.board { margin: 1.6rem 0 .4rem; font-size: 1.05rem; letter-spacing: .02em; }
h2.board:first-of-type { margin-top: .6rem; }

/* The first `@media print` in the repo. The controls are interactive and mean nothing on paper;
   a row must not be split across a page break while you are working down it. */
@media print {
  .controls { display: none; }
  body { padding: 0; background: #fff; color: #000; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }   /* repeat the header on every printed page */
  /* A board's name alone at the foot of a page is worse than no heading — you turn over and find
     rows belonging to a board you cannot see named. Measured on the largest real kit, which is 22
     sections over several pages, so this fires rather than being a precaution. */
  h2.board { break-after: avoid; }
}
.qty { display: block; font-size: .8rem; font-weight: 400; opacity: .7; }

/* A phone propped beside the board is half of what this page is for, and four columns of table —
   one of them a 21-character monospace part number — do not fit 390px. So at narrow widths the row
   stops being a row: the position and its tick sit on the first line, the part and spec beneath.
   The tick is absolutely placed so it stays a big target at the left edge where a thumb reaches,
   rather than becoming a stacked block of its own.
   `max-width` in `rem` so it follows the reader's text size, not a device guess. */
@media (max-width: 34rem) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: auto; }
  tr { position: relative; padding: .55rem 0 .55rem 2.75rem; border-bottom: 1px solid #8883; }
  td { border: 0; padding: .1rem .25rem; }
  .tick { position: absolute; left: 0; top: .5rem; width: auto; padding: 0; }
  .pos { font-size: 1.2rem; }
  /* Wrapping is right here and wrong on the wide layout: a part number that overflows the viewport
     cannot be read at all, while one that wraps merely takes two lines. */
  .pn, .spec { white-space: normal; overflow-wrap: anywhere; }
  .spec { opacity: .8; }
}