/* ==========================================================================
   tearsheet.css — spec tearsheets: screen picker + PRINTED SHEET.

   LOAD ORDER (matches index.html and viewer.html exactly):
       assets/css/keca-tokens.css   tokens only
       assets/css/keca-base.css     body, h1–h4, .btn, .wrap, [hidden], focus
       assets/css/tearsheet.css     this file

   Nothing here redefines a token. Every colour, radius, width and font comes
   from keca-tokens.css, which is the local copy of the live site's :root
   block. Square corners (--radius is 0), no resting shadow, monochrome — the
   same house rules as kecausa.com and as the rest of this app.

   THE PRINT BLOCK AT THE BOTTOM IS THE POINT OF THIS FILE.
   --------------------------------------------------------------------------
   A tearsheet is an artifact that gets printed and dropped into a spec book,
   so the printed page is the deliverable and the screen is the preview. The
   print rules give one product per physical page, kill every piece of app
   chrome, and stop a dimension table from breaking across a page boundary.

   Print sizing is stated in MILLIMETRES and POINTS, not px or rem: a printer
   has no CSS pixel and rem would inherit whatever the user's browser zoom
   happened to be.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED UTILITIES
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .92em;
  text-transform: none;
  letter-spacing: 0;
}

/* THE PENDING SENTINEL.
   The word, never an em dash and never an empty cell: a blank on a spec sheet
   reads as zero or as "not applicable", and both are wrong. Same word, same
   meaning, on index.html, viewer.html, the plan tool and here. */
.pending {
  font-style: italic;
  color: var(--paper-muted);
}

.tag {
  display: inline-block;
  border: 1px solid var(--line);
  padding: .1rem .4rem;
  font-family: var(--head-font);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--paper-muted);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: .7rem 1rem;
  font-family: var(--head-font);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   PAGE CHROME (screen only — every rule here is switched off for print)
   -------------------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding-block: .7rem;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--head-font);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  line-height: 1.3;
}
.brand__sub {
  display: block;
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--paper-muted);
}
/* THE WAY BACK TO kecausa.com (2026-09-21). This tool is also served inside the
   main site at kecausa.com/specifier/, and nothing in it led back out. Same
   rule as index.html and viewer.css: quiet, underlined so it reads as a link,
   a full 44px target. Screen only — .site-head is removed whole in print, and
   the one-line print rule below says so again for this element by name. */
.site-head__id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 .9rem;
}
.site-exit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--head-font);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--paper-muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: .35em;
}
.site-exit:hover { color: var(--paper); text-decoration-color: var(--accent); }
.site-exit::after {
  content: "";
  flex: 0 0 1px;
  width: 1px;
  height: 1.25rem;
  margin-left: .9rem;
  background: var(--line);
}
@media print { .site-exit { display: none !important; } }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: var(--head-font);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
/* Measured at 375px: these three links were 22px tall, the only tap targets on
   this page below the 24px floor once every checkbox is credited to the label
   that wraps it. index.html already gives .site-nav a a 44px floor; tearsheet
   was the page that never got the rule. Same navigation, same thumb. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-nav [aria-current="page"] { color: var(--paper-muted); }

.intro { padding-block: 1.6rem .6rem; }
.intro__lede { max-width: 62ch; color: var(--paper-soft); }

.banner {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: .9rem 1rem;
  margin-bottom: 1.2rem;
}
.banner[data-level="warn"] { background: var(--tint); }
.banner[data-level="error"] { border-width: 2px; border-color: var(--accent); }
.banner-title {
  margin: 0;
  font-family: var(--head-font);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.banner-body {
  margin: .4rem 0 0;
  font-size: .8125rem;
  color: var(--paper-muted);
  white-space: pre-wrap;
  max-height: 12rem;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   PICKER — choose which products become sheets
   -------------------------------------------------------------------------- */

.picker {
  border: 1px solid var(--card-line);
  background: var(--surface);
  padding: 1rem;
  margin-bottom: 1.6rem;
}
.picker__grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}
/* Three controls now, not two — Line joined Search and Category when the
   catalog reached 775 products across two lines. At 720px the search box keeps
   the whole first row: a search field, a line selector and a category selector
   sharing 720px leaves the category too narrow to read "Barstools & counter
   stools" in. Above 980px all three fit on one row. */
@media (min-width: 720px) {
  .picker__grid { grid-template-columns: 1fr 1fr; align-items: end; }
  .picker__grid > .field:first-child { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .picker__grid { grid-template-columns: 2fr 1fr 1.2fr; }
  .picker__grid > .field:first-child { grid-column: auto; }
}

.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field > label {
  font-family: var(--head-font);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--paper-muted);
}
.field input[type="search"],
.field select {
  font: inherit;
  /* MUST be >= 16px. Below that, iOS Safari zooms the page in on focus and
     does not zoom back out, leaving the specifier on a horizontally-scrolled
     page. These three controls (#ts-search, #ts-brand, #ts-category) were
     .9375rem = 15px and did exactly that; the 44px min-height beside them was
     already right. */
  font-size: 1rem;
  padding: .55rem .6rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--paper);
  width: 100%;
}

.picker__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.picker__count,
.picker__selected {
  font-size: .75rem;
  color: var(--paper-muted);
}
.picker__selected { font-weight: 700; color: var(--paper); }
.picker__spacer { flex: 1 1 auto; }
.picker__hint { margin: .7rem 0 0; font-size: .75rem; color: var(--paper-muted); }

.btn--small {
  padding: .5rem .8rem;
  font-size: .6875rem;
  min-height: 44px;
}

.pick-list {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  max-height: 42vh;
  overflow-y: auto;
  border: 1px solid var(--line);
}
.pick-row { border-bottom: 1px solid var(--card-line); }
.pick-row:last-child { border-bottom: 0; }
.pick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .2rem .7rem;
  padding: .5rem .7rem;
  min-height: 44px;
  cursor: pointer;
}
.pick:hover { background: var(--tint); }
.pick input[type="checkbox"] {
  grid-row: span 2;
  width: 22px; height: 22px;
  accent-color: var(--accent);
}
.pick-name {
  font-family: var(--head-font);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.pick-meta { font-size: .6875rem; color: var(--paper-muted); }
.pick-empty { padding: .9rem; color: var(--paper-muted); font-style: italic; }

.sheets-empty {
  border: 1px dashed var(--line);
  padding: 1.6rem;
  text-align: center;
  color: var(--paper-muted);
}

/* --------------------------------------------------------------------------
   THE SHEET
   Screen: a page-shaped card. Print: one physical page. The structure is
   identical in both so what a designer sees is what comes out of the printer.
   -------------------------------------------------------------------------- */

.sheets { display: flex; flex-direction: column; gap: 1.6rem; align-items: center; }

.sheet {
  width: 100%;
  max-width: 210mm;              /* A4 width — the shape it will print at */
  background: var(--surface);
  border: 1px solid var(--card-line);
  padding: clamp(1rem, 3vw, 1.6rem);
  color: var(--paper);

  /* MEASURED at 775 products. "Add all shown" with no filter builds 775
     sheets: 1,839 ms of frozen page and 134,862 DOM nodes on a desktop, and
     this is a tool the client reviews from a phone. Skipping style, layout and
     paint for the sheets that are off screen took the same action to 503 ms.

     A tearsheet is a full A4 page of specification, so the reserved height is
     large and close to constant — 1394 px measured at this page's default
     width. `auto` lets the browser replace that estimate with each sheet's own
     laid-out height the first time it is rendered, which matters because a
     sheet with a finish table is taller than one without. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1394px;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .5rem;
}
.sheet-brand {
  margin: 0;
  font-family: var(--head-font);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sheet-kind {
  margin: .1rem 0 0;
  font-family: var(--head-font);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.sheet-head-meta { text-align: right; }
.sheet-head-meta p {
  margin: 0;
  font-size: .6875rem;
  color: var(--paper-muted);
}

.sheet-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.4rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.sheet-name {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: .10em;
}
.sheet-ident {
  display: flex;
  gap: 1.4rem;
  margin: 0;
}
.sheet-ident div { display: flex; flex-direction: column; gap: .1rem; }
.sheet-ident dt {
  font-family: var(--head-font);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.sheet-ident dd { margin: 0; font-size: .8125rem; }
/* Shown only where KECA publishes no article number and the sheet is falling
   back to this app's catalog reference. It has to stay legible in print: a
   buyer must be able to see that the string above is not a KECA SKU. */
.ident-note {
  display: block;
  font-family: var(--body-font, inherit);
  font-size: .5625rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--paper-muted);
}

.sheet-body {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  padding-top: 1rem;
}
@media (min-width: 720px) {
  .sheet-body { grid-template-columns: 40% 1fr; gap: 1.4rem; }
}

/* --- drawings ----------------------------------------------------------- */

.sheet-draw { display: flex; flex-direction: column; gap: .9rem; }
.draw-fig { margin: 0; }
.draw-cap {
  font-family: var(--head-font);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: .3rem;
}
.draw {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62mm;
  background: var(--surface);
  border: 1px solid var(--card-line);
  padding: .4rem;
}
/* --- product photograph --------------------------------------------------
   Sits above the two dimensioned envelopes, in the same column and the same
   frame, but captioned "not to scale" — the drawings are evidence of size and
   this is not. `contain` because these are catalogue shots of furniture and
   cropping one to fill the box would cut the legs off the piece being
   specified. Only the wood line publishes one today; the block is emitted for
   any product that has one. ----------------------------------------------- */
.photo-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62mm;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--card-line);
  padding: .4rem;
}
.photo-cap {
  margin: .3rem 0 0;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--paper-muted);
}

.draw-missing {
  margin: 0;
  font-size: .75rem;
  border: 1px dashed var(--line);
  padding: .7rem;
  color: var(--paper-muted);
}
.draw-note {
  font-size: .625rem;
  line-height: 1.5;
  color: var(--paper-muted);
  margin: 0;
}

/* Monochrome linework. Weight and dash carry meaning, never colour. */
.d-envelope { fill: none; stroke: var(--paper); stroke-width: 2px; }
.d-ground   { stroke: var(--paper); stroke-width: 1.5px; }
.d-dim      { stroke: var(--paper); stroke-width: 1px; }
.d-ext      { stroke: var(--paper-muted); stroke-width: .5px; }
/* The seat-height reference. Dashed so it can never be mistaken for part of
   the product envelope, and drawn only when every number in it is published —
   see rule 3 in assets/js/tearsheet.js. */
.d-seat     { stroke: var(--paper); stroke-width: 1px; stroke-dasharray: 6 4; }
.d-text {
  fill: var(--paper);
  font-family: var(--body-font);
  font-variant-numeric: tabular-nums;
}
.d-text--seat { fill: var(--paper-muted); }

/* --- spec tables --------------------------------------------------------- */

.sheet-sub {
  margin: 0 0 .4rem;
  font-family: var(--head-font);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid var(--accent);
  padding-bottom: .2rem;
}
.sheet-sub + .sheet-table { margin-bottom: 1rem; }

.sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
.sheet-table th,
.sheet-table td {
  text-align: left;
  vertical-align: top;
  padding: .3rem .4rem .3rem 0;
  border-bottom: 1px solid var(--card-line);
}
.sheet-table th {
  font-family: var(--head-font);
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-muted);
  width: 45%;
}
.sheet-table td { font-variant-numeric: tabular-nums; }
.sheet-table .unit { text-transform: none; letter-spacing: 0; }
/* The five fields a specifier reads first. Distinguished by WEIGHT, not
   colour — the same rule the rest of the app follows. */
.sheet-table tr.is-headline th { color: var(--paper); font-weight: 600; }
.sheet-table tr.is-headline td { font-weight: 600; }

/* The imperial restatement of a published metric figure. Subordinate on
   purpose: it is the same number said again in another unit. */
.alt { color: var(--paper-muted); font-size: .75rem; white-space: nowrap; }

/* THE THIRD STATE: the manufacturer publishes no value for the field. Set in
   the muted ink like Pending, but never the Pending word and never a title
   that says "not supplied" — the two must not read as the same thing. */
.notpub { color: var(--paper-muted); font-variant-numeric: normal; }

/* A manufacturer statement that runs to several lines — Tilia's materials
   paragraph — keeps its breaks and is set as prose, not as a figure. */
.sheet-table td.prose { white-space: pre-line; font-variant-numeric: normal; line-height: 1.5; }

/* A qualifying sentence under a figure, inside the figure's own cell. */
.cell-note {
  display: block;
  margin-top: .1rem;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--paper-muted);
  font-variant-numeric: normal;
}

/* --- manufacturer data ---------------------------------------------------
   Under the sheet body: the option axes, features and usage areas, the
   packaging & loading table and the manufacturer's documents. Same tables,
   same type, one rule above it. Printed whole — see the print rules. */
.sheet-mfr { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.sheet-mfr .sheet-sub { margin-top: .8rem; }
.sheet-mfr > .sheet-sub:first-child { margin-top: 0; }
.mfr-note { margin: .2rem 0 .6rem; font-size: .625rem; line-height: 1.5; color: var(--paper-muted); }

.sheet-table--options th { width: 22%; }
.opt-values { font-variant-numeric: normal; }
.opt { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .7rem .15rem 0; font-size: .75rem; }
/* The chip is the PUBLISHED colour value and nothing else, inside a hairline
   so an ivory chip is visible on white paper. */
.opt__chip { display: inline-block; width: .7rem; height: .7rem; border: 1px solid var(--line); flex: 0 0 auto; }

.pkg-table { font-size: .6875rem; }
.pkg-table th { width: auto; }
.pkg-table thead th { padding-bottom: .2rem; white-space: nowrap; }
.pkg-table td.num { white-space: nowrap; }

.sheet-links { margin: 0 0 .6rem; padding-left: 1rem; font-size: .75rem; line-height: 1.5; }
.sheet-links a { color: var(--paper); word-break: break-all; }

/* A published figure that contradicts another published figure. Monochrome
   like everything else here — the emphasis is weight and a rule, never colour,
   because colour alone is neither the house style nor WCAG 1.4.1. It sits on
   its own line so a long product name cannot squeeze it out of the cell. */
.warn {
  display: block;
  margin-top: .15rem;
  font-family: var(--head-font);
  font-weight: 600;
  /* .625rem, matching .sheet-sub — the same size as a section heading on this
     sheet, not the .5625rem used for the tiny dt labels. A conflict between two
     published figures is the one thing on the page a specifier must not skim
     past, so it does not get the smallest type on the sheet. */
  font-size: .625rem;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--paper);
  border-left: 2px solid var(--accent);
  padding-left: .35rem;
}

/* --- sheet footer -------------------------------------------------------- */

.sheet-foot {
  margin-top: 1.1rem;
  padding-top: .6rem;
  border-top: 1px solid var(--accent);
}
.sheet-prov,
.sheet-legal {
  margin: 0 0 .4rem;
  font-size: .625rem;
  line-height: 1.55;
  color: var(--paper-muted);
}
.sheet-flags { margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .3rem; }

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 2.4rem;
  padding-block: 1.4rem 2.4rem;
  font-size: .75rem;
  color: var(--paper-muted);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   PRINT — ONE PRODUCT, ONE PAGE.

   This is the deliverable. Everything that is not the sheet is removed, the
   sheet loses its card border and fills the page, and a page break is forced
   after every sheet except the last (a trailing break prints a blank page,
   which looks like a fault in the document).
   ========================================================================== */

/* PAPER SIZE IS THE USER'S, NOT OURS.
   This was `size: A4 portrait`, which is the wrong default for a US client:
   KECA U.S.A. sells in South Florida and every printer its designers touch has
   Letter in the tray. Pinning A4 makes the browser either force A4 stock or
   scale the whole sheet down to fit Letter, and neither is what a spec book
   wants. `auto` takes whatever paper the person actually has.

   The sheet is therefore laid out to fit the SHORTER of the two, Letter:
       Letter  279.4mm - 22mm of margin = 257.4mm of printable height
       A4      297.0mm - 22mm of margin = 275.0mm
   Measured under these print rules at A4's 186mm printable width, across all
   157 products in the shipped catalog, sheets run 231mm to 243mm — inside both,
   with ~15mm to spare on the tighter one. If a future edit adds a block to the
   sheet, re-measure against 257mm, not 275mm — going over turns
   every product into two pages, one of them nearly blank, because
   `break-after: page` fires straight after the overflow. */
@page {
  size: auto;
  margin: 12mm 12mm 10mm;
}

@media print {
  html, body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  /* Every piece of app chrome. A spec book page must not carry navigation. */
  .skip-link,
  .site-head,
  .site-nav,
  .intro,
  .banner,
  .picker,
  .sheets-empty,
  .site-foot,
  .no-print { display: none !important; }

  .wrap { max-width: none; padding: 0; }
  .sheets { display: block; gap: 0; }

  .sheet {
    max-width: none;
    width: 100%;
    border: 0;
    padding: 0;
    /* One product per physical page. `break-after` is the modern property;
       `page-break-after` is kept for engines that still only honour the
       legacy name. */
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    /* THE SCREEN OPTIMISATION MUST NOT REACH THE PRINTER.
       content-visibility: auto (see .sheet above) leaves an off-screen sheet
       with no laid-out content, and a printer needs every page laid out
       whether or not it was ever scrolled to. Without this, a pack of forty
       sheets prints the two that happened to be on screen and thirty-eight
       blank pages — which a designer would only discover at the plotter. */
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
  /* A break after the LAST sheet prints a blank final page. */
  .sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .sheet-head { border-bottom: 1.5pt solid #000; }
  .sheet-title { border-bottom: .75pt solid #000; }
  /* 14pt, not 16pt. Several products in this catalog carry a descriptive name
     that wraps to three lines ("Lamax N 90x150 cm indoor cafe breakfast hall
     retail winter garden"), and at 16pt that title block alone was 31mm — the
     difference between comfortably inside Letter and a hair from spilling onto
     a second page if the webfont fails to load and a wider fallback is used. */
  .sheet-name { font-size: 14pt; }
  .sheet-body { grid-template-columns: 40% 1fr; gap: 7mm; }

  .draw {
    border: .75pt solid #000;
    max-height: 62mm;
    padding: 2mm;
  }

  /* The photograph prints. Browsers strip background images by default but
     an <img> is content, so this only needs sizing and a matching rule.
     -webkit-print-color-adjust keeps a photographed finish from being
     washed out by a printer's "economy" colour handling — a designer using
     this sheet to check a wood tone needs the tone. */
  .photo-img {
    border: .75pt solid #000;
    max-height: 55mm;
    padding: 2mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .photo-cap { color: #444; }

  /* ------------------------------------------------------------------------
     THREE FIGURES IN ONE COLUMN DO NOT FIT ON ONE PAGE.

     MEASURED, by printing to PDF at Letter (216 × 279 mm, @page margin 12/12/10
     → 191.9 × 257.4 mm of content):

       Tilia sheet   (elevation + plan)            291.4 mm → 232.6 mm   1 page
       KECA sheet    (photograph + elevation + plan)          291.4 mm   2 pages

     .sheet-draw is a single flex column, so a KECA sheet stacks a THIRD figure
     — the published photograph — under the two drawings and runs 34 mm past the
     bottom of a Letter page. Chrome's own print-to-PDF put 618 of the 775
     products onto two sheets, the second carrying nothing but the tail of the
     drawing caveat and the provenance footer, under a header that reads
     "Sheet 1 of 1". A designer discovers that at the plotter.

     Scoped by .photo-fig, which only the wood line emits and which is always
     the FIRST child of .sheet-draw, so `~` reaches both drawings. A sheet with
     no photograph matches neither selector and is byte-identical to before —
     all 157 Tilia sheets are untouched.

     The drawings keep the larger share of what is given back: they are
     dimensioned and are read for their figures. The photograph is captioned
     "not to scale" and is a reference. Re-measured after the change: 240.8 mm,
     one page, with 16 mm of headroom on Letter and 34 mm on A4. */
  .photo-fig .photo-img { max-height: 38mm; }
  .photo-fig ~ .draw-fig .draw { max-height: 50mm; }

  /* The 39 sheets that also print a mesh-provenance paragraph — 36 photo
     reconstructions and 3 withdrawn models — carry roughly six more lines in the
     3D-model cell than any other sheet. Measured: with the caps above they still
     ran a line or two past a Letter page. tearsheet.js marks them, and they give
     up a little more of the figure column so the provenance can stay. */
  .sheet--model-prov .photo-fig .photo-img { max-height: 30mm; }
  .sheet--model-prov .photo-fig ~ .draw-fig .draw { max-height: 42mm; }

  /* A TILIA SHEET NOW CARRIES THE MANUFACTURER'S PHOTOGRAPH AND A
     MANUFACTURER-DATA SECTION — options, features, the packaging & loading
     table and the manufacturer's documents. The photograph takes the same
     caps as the wood line's (the .photo-fig rules above reach it). The
     section is what a distributor plans freight from, so it prints in full;
     where the sheet no longer fits one page it breaks BEFORE the section,
     whole, rather than splitting a loading table across two pages. Every
     figure that was on the one-page sheet is still on page one. */
  .sheet-mfr { break-inside: avoid; page-break-inside: avoid; }
  .sheet-mfr .sheet-table th,
  .sheet-mfr .sheet-table td { border-bottom: .5pt solid #888; }
  .opt__chip {
    border: .5pt solid #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sheet-links a { color: #000; text-decoration: none; }
  .mfr-note, .cell-note { color: #333; }

  .d-envelope { stroke: #000; }
  .d-ground, .d-dim, .d-seat { stroke: #000; }
  .d-ext { stroke: #444; }
  .d-text { fill: #000; }
  .d-text--seat { fill: #333; }
  .draw-note { font-size: 6.5pt; color: #333; }

  /* The 20-row specification table is what sets the height of the whole sheet
     — the drawings column is ~35mm shorter than it. Screen line-height (1.7)
     and screen row padding (.3rem) put the sheet at ~270mm, which clears A4 and
     overruns Letter by about 12mm. Tightening the row rhythm here, and only
     here, brings it to ~235mm on both.

     1.45 was measured against the TILIA sheet, which prints 17 spec rows and no
     photograph. The KECA wood line prints more rows and a longer 3D-model cell,
     and at 1.45 a wood sheet cleared page 1 by a single line — Chrome's print-
     to-PDF put nothing on page 2 but the last line of the provenance footer.
     1.35 is worth ~6mm across the three tables and takes that group back onto
     one page. The type SIZE is untouched at 8.5pt: this tightens the rhythm
     between rows, which is what was loose, and not the figures themselves. */
  .sheet-table { font-size: 8.5pt; line-height: 1.35; }
  .sheet-table th, .sheet-table td {
    padding: .2rem .4rem .2rem 0;
    border-bottom: .5pt solid #bbb;
  }
  .sheet-table th { color: #333; }
  /* Screen wants air between the three spec blocks; paper wants the sheet to
     fit. Halving the gap is worth ~5mm of Letter headroom and is invisible next
     to the rule under each heading. */
  .sheet-sub + .sheet-table { margin-bottom: .35rem; }
  /* A dimension row split across two pages is unreadable, and the sheet is
     supposed to fit one page anyway — this is the safety net. */
  .sheet-table tr { break-inside: avoid; }
  .sheet-sub { border-bottom: .75pt solid #000; }

  .sheet-foot { border-top: .75pt solid #000; }
  .sheet-prov, .sheet-legal { font-size: 6.5pt; color: #333; }

  /* Pending must stay legible on paper — it is real information, not
     decoration, and grey-on-white at 6pt is not. */
  .pending { color: #000; font-style: italic; }
  .alt { color: #444; }
  .tag { border-color: #666; color: #333; }
  /* A conflict between two published figures is the one thing on this sheet a
     specifier must not miss on paper. Full black, not the footnote grey. */
  .warn { color: #000; border-left-color: #000; font-size: 7pt; }

  a[href]::after { content: ""; }   /* no URL expansion inside a spec sheet */
}

/* ==========================================================================
   PHONE TYPE FLOOR — SCREEN ONLY
   --------------------------------------------------------------------------
   MEASURED, at 375 px, on the real page. The tearsheet is laid out for A4 and
   its base type sizes are print sizes. Until this block existed there was NO
   phone breakpoint in this file at all — only `min-width: 720px` (desktop up)
   and `@media print` — so a phone got the print sizes rendered unscaled into a
   343 px column:

       .sheet-ident dt      9 px    "SKU", "ARTICLE No" — the identifier labels
       .ident-note          9 px    the sentence that warns the string above is
                                    NOT a KECA article number but this app's
                                    own catalog reference
       .draw-cap            9 px    "Front elevation — bounding envelope"
       .sheet-kind         10 px    "Product specification sheet"
       .sheet-sub          10 px    "Overall dimensions" section headings
       .sheet-table th     10 px    "Width", "Seat height" — the row labels
       .draw-note          10 px    the bounding-envelope caveat
       .sheet-prov         10 px    provenance — where each figure came from
       .sheet-legal        10 px    the published-data disclaimer
       .warn               10 px    a conflict between two published figures
       .sheet-table td     13 px    THE FIGURES THEMSELVES

   Two floors, matching what the rest of the app already does:
     - uppercase tracked micro-labels sit at --keca-fs-micro (11 px), the house
       minimum used on index, viewer and plan;
     - SENTENCES and PUBLISHED FIGURES go to 14 px, because a specifier reads
       those for content, not as furniture.

   `screen and` is load-bearing. @media print below sets its own pt sizes and
   must not inherit any of this; the printed sheet is unchanged by this block.
   ========================================================================== */
@media screen and (max-width: 719px) {

  /* --- uppercase tracked micro-labels: raise to the 11 px house floor ----- */
  .sheet-kind,
  .sheet-ident dt,
  .draw-cap,
  .sheet-sub,
  .sheet-table th {
    font-size: var(--keca-fs-micro, .6875rem);   /* 11px */
  }

  /* --- sentences and figures: 14 px ------------------------------------- */
  .sheet-table,
  .sheet-table td,
  .sheet-ident dd,
  .sheet-head-meta p,
  .photo-cap,
  .draw-note,
  .draw-missing,
  .ident-note,
  .sheet-prov,
  .sheet-legal,
  /* THE INCH CONVERSION. .alt is .75rem, so it stayed at 12px inside a cell
     this block had just raised to 14px — the imperial figure left two steps
     below the millimetre figure it restates. index.html's own phone floor
     calls this out as the one that matters most, in those words: a designer
     working in imperial reads the SMALLER number. */
  .alt,
  /* Carries "Read before specifying." — a caveat, not a counter. */
  .picker__hint {
    font-size: var(--keca-fs-base, .875rem);     /* 14px */
  }

  /* A conflict between two published figures is the one thing on this sheet a
     specifier must not skim past. It keeps its uppercase treatment but is not
     allowed to be the smallest text on a phone. */
  .warn {
    font-size: var(--keca-fs-small, .75rem);     /* 12px */
    line-height: 1.5;
  }

  /* .ident-note is a full sentence set in the body face, not a tracked label;
     the .16em tracking it inherits from .sheet-ident dt makes a 14 px sentence
     hard to read and pushes it to three lines in a 343 px column. */
  .ident-note { letter-spacing: .01em; line-height: 1.45; }

  /* --- product picker ---------------------------------------------------
     .mono is .92em, so a .6875rem parent rendered the SKU at 10.12 px — below
     this file's own smallest label, on the string a buyer quotes back when
     they order. 775 rows on this page carried it. */
  .pick-meta { font-size: var(--keca-fs-small, .75rem); }   /* 12px */
  .pick-meta .mono { font-size: 1em; }                      /* 12px, not 11.04 */
  .pick-name { font-size: var(--keca-fs-base, .875rem); }   /* 14px */
}