/* What the app looks like on paper.
 *
 * Linked with media="print", so nothing in here can affect the screen: this
 * sheet is only ever asked the one question of what a person carrying this
 * plan to the timber yard needs to see on it.
 *
 * The answer is two things — the drawing and the list of what to buy — and
 * the rest of the page is chrome that exists only because the plan is
 * editable. A number field on paper is a number nobody can type into, a
 * toolbar is a row of buttons nobody can press, and both of them cost the
 * space the table needs. So the form, the toolbars and the hints go, while
 * the SVG and the results table stay and get the whole width.
 *
 * Nothing in here hides the plan or the results table, and nothing may: the
 * two of them are what printing is for. `test/print.test.js` holds that.
 */

@page {
  margin: 15mm;
}

/* Ink on paper, not a screen's palette on paper: the surface tint and the
   muted greys are there to separate panels on a lit display, and a printer
   renders them as a grey wash over every word. */
:root {
  --bg: #fff;
  --surface: #fff;
  --ink: #000;
  --ink-muted: #333;
  --line: #999;
}

body {
  background: #fff;
  color: #000;
  font-size: 10pt;
  line-height: 1.35;
}

/* The chrome. Every one of these is a control, a hint about a control, or a
   heading for a box of controls — all of it inert once it is printed. The
   circled i buttons and the sentences they open are named here in their own
   right and not left to the settings form around them: a paragraph that is
   only ever opened by pressing something is not a paragraph a sheet of paper
   can show, and naming it means moving the form does not quietly print it. The
   left column holds nothing else, so it goes whole — and with it the buttons
   that collapse the columns, which on paper are two words about a column
   that is not there. The right column stays: the materials list and the
   warnings are in it, and they are what the sheet is for. */
#left-panel,
.sheet-head,
.selection-card,
.panel-toggle,
#settings-panel,
#settings-form,
.info-tip,
.info-text,
#items-panel,
#plan-toolbar,
#plan-file,
#layer-toggles,
.canvas-hint,
.app-footer {
  display: none;
}

/* One column, top to bottom. The two-column grid is a use of a wide screen,
   and a sheet of A4 is not one. */
.app-main {
  display: block;
  height: auto;
  padding: 0;
}

/* Undo the screen's stage: no frosted column, no padding keeping the drawing
   clear of columns that are not on paper, no dot grid, and the header back in
   the flow after being tucked away on a wide screen. */
body {
  background: none;
}

#canvas-region,
#right-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.app-header {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.app-header {
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--line);
  background: none;
}

.app-header h1 {
  font-size: 14pt;
}

.tagline {
  display: none;
}

/* When the sheet was printed. Hidden on screen — the app is the live document
   and its date is today by definition — and filled in by js/view/print.js,
   because a stylesheet cannot read a clock. */
.print-meta {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--ink-muted);
  font-size: 9pt;
}

/* The panels stop being boxes: a border around each one is how a screen says
   "these are separate things", and on paper the whitespace already does. */
.panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.panel + .panel {
  margin-top: 0.6rem;
}

.panel h2 {
  font-size: 11pt;
  /* A heading at the foot of a page, with its table over the fold, is a
     heading for nothing. */
  break-after: avoid;
}

/* The drawing. It keeps its aspect ratio and takes the width; the cap stops a
   tall terrace from pushing the materials list onto a second sheet on its
   own. print-color-adjust keeps the outline fill and the layer colours, which
   are what tells a beam from a board. */
.plan-canvas {
  width: 100%;
  max-height: 120mm;
  border: 1px solid var(--line);
  background: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  break-inside: avoid;
}

/* The list. A row split across the fold puts a quantity on one sheet and its
   price on the next, so rows stay whole; the header group repeats over a
   table that does run on. */
.results-table {
  width: 100%;
  font-size: 9pt;
}

.results-table thead {
  display: table-header-group;
}

.results-table tr {
  break-inside: avoid;
}

.results-caption {
  break-after: avoid;
}

#results-body {
  overflow-x: visible;
}

/* The total is the number the sheet is carried for; it prints with the rule
   above it and stays with the line it totals. */
.results-table tfoot {
  break-inside: avoid;
}

.results-table tfoot tr[data-results-total="total"] th,
.results-table tfoot tr[data-results-total="total"] td {
  border-top: 1px solid var(--line);
  font-weight: 700;
}

/* Warnings print. A plan carried to site with an unbuildable span in it should
   say so on the paper, not only on the screen it was left behind on. */
.warnings-row {
  break-inside: avoid;
}