/* Compact Equipment Sales — the printable spec sheet (app/print.js). One US Letter page, portrait, white paper.
   The sheet is a fixed 8.5 × 11 in box; every size is in em off --f, so app/print.js can shrink the whole thing
   (--f steps down from 10.5pt) until it fits — it can never spill onto a second page.
   On screen the sheet is built off to the side at real size (to measure it); in print it's the only thing on the page.
   ?print=<id> (body.print-only) shows it on screen like a sheet of paper. */

@page { size: letter; margin: 0; }            /* margin 0 also keeps the browser's own header/footer lines off the sheet */

#print-root { position: fixed; top: 0; left: -200in; visibility: hidden; pointer-events: none; }

.ps {
  --f: 10.5pt; --ink: #161616; --muted: #57544d; --line: #d4d4d4; --red: #d3211b;
  width: 8.5in; height: 10.96in; padding: .45in .5in .4in; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 1.05em;
  background: #fff; color: var(--ink); font: 400 var(--f)/1.35 var(--font-sans);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ps h1, .ps h2, .ps h3, .ps p, .ps ul { margin: 0; }

/* header: logo left, "Spec sheet" + date right */
.ps-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75em; border-bottom: 2pt solid var(--ink); }
.ps-logo { display: flex; align-items: center; gap: .55em; }
.ps-logo img, .ps-logo svg { display: block; width: 2.7em; height: 2.7em; }
.ps-wm { display: flex; align-items: center; gap: .4em; padding-top: .1em; color: var(--red); font: 700 2.6em/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.ps-wm small { display: block; width: 7em; color: var(--ink); font: 700 .28em/1.25 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; white-space: normal; }
.ps-doc { display: grid; justify-items: end; gap: .1em; }
.ps-doc b { font: 700 1em var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ps-doc span { font-size: .9em; color: var(--muted); }

/* hero: who it is on the left, the machine on the right */
.ps-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 1.2em; }
.ps-make { font: 700 .82em var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.ps-id h1 { margin-top: .12em; font: 700 5em/.92 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.ps-cls { margin-top: .45em; font-size: 1.1em; color: var(--muted); }
.ps-feat { margin-top: .7em; padding: 0; list-style: none; display: grid; gap: .22em; }
.ps-feat li { position: relative; padding-left: 1.15em; }
.ps-feat li::before { content: ""; position: absolute; left: .1em; top: .5em; width: .5em; height: .5em; border-radius: 50%; background: var(--red); }
.ps-colors { margin-top: .75em; font-size: .95em; }
.ps-colors b { margin-right: .25em; font-weight: 800; }
.ps-colors b:not(:first-child) { margin-left: .9em; }
.ps-pic { height: 16em; display: grid; place-items: center; }
.ps-pic img { width: 100%; height: 100%; object-fit: contain; }
.ps-icon { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink); } .ps-icon svg { width: 55%; height: 55%; }

/* four headline numbers */
.ps-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.ps-key { display: grid; align-content: space-between; gap: .3em; padding: .6em .8em .65em; border: 1pt solid var(--line); border-radius: 2px; }
.ps-key span { font-size: .85em; line-height: 1.25; color: var(--muted); }
.ps-key b { font: 700 1.9em/1 var(--font-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ps-key.lead { background: var(--ink); border-color: var(--ink); color: #fff; } .ps-key.lead span { color: #c4c4c4; }

/* every spec, in three columns */
.ps-specs h2, .ps-box h2 { margin-bottom: .55em; font: 700 .82em var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.ps-cols { columns: 3; column-gap: 1.3em; }
.ps-group { break-inside: avoid; margin-bottom: .75em; }
.ps-group h3 { margin-bottom: .15em; font: 700 .72em var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.ps-group table { width: 100%; border-collapse: collapse; }
.ps-group th, .ps-group td { padding: .24em 0; border-bottom: .5pt solid var(--line); vertical-align: top; font-size: .88em; line-height: 1.3; }
.ps-group th { width: 50%; padding-right: .6em; text-align: left; font-weight: 500; color: var(--muted); }
.ps-group td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* attachments / what's in the box */
.ps-extra { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.3em; }
.ps-box { padding-top: .55em; border-top: 1pt solid var(--ink); }
.ps-box p { font-size: .92em; }
.ps-kit { columns: 2; column-gap: 1.2em; padding: 0; list-style: none; font-size: .88em; line-height: 1.45; }
.ps-kit li { break-inside: avoid; } .ps-kit b { color: var(--red); }

/* footer: the small print + a QR code to the 360° page (when the site has a web address) */
.ps-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4em; padding-top: .7em; border-top: .5pt solid var(--line); font-size: .8em; color: var(--muted); }
.ps-foot p { max-width: 62ch; } .ps-foot b { color: var(--ink); }
.ps-qr { display: grid; justify-items: center; gap: .25em; flex: none; font-size: .9em; } .ps-qr svg { width: 6.5em; height: 6.5em; } .ps-qr path { fill: var(--ink); }

/* ?print=<id>: the sheet alone on screen, like paper on a desk */
body.print-only > :not(#print-root) { display: none !important; }
body.print-only { background: #3a3a3a; padding: 24px 0 !important; }
body.print-only #print-root { position: static; visibility: visible; pointer-events: auto; }
body.print-only .ps { margin: 0 auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

@media print {
  html, body, body.print-only { background: #fff !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  body > :not(#print-root) { display: none !important; }
  #print-root { position: static; visibility: visible; }
  body.print-only .ps { margin: 0; box-shadow: none; }
  .ps { break-after: avoid; break-inside: avoid; }
}