/* print.css: the poster as a pdf (plan, section 10; linked from every page with media="print"; "as a pdf" under save calls window.print()).
   Page one is the whole sheet on a 24 x 36 in page: the three lanes exactly as the screen lays them out (the lane width is the screen's,
   poster.js sets it as --lane), zoomed to fit the page above a band at its foot where the mark and the chrome's line stand. The zoom is a
   CSS number: 24in over three lanes by default, and the exact fit that sections/margin.js sets on <html> at beforeprint (--print-zoom, with
   --print-top centring the sheet in the room above the band). margin.js also makes the print lay the sheet out as the screen does (media
   rules, viewport units, the sections' own print rules), pins every cell's height, and builds the reading pages: one letter page per place
   (#print-pages > .cell.print-page[data-place]), print-only copies, so the sections' own styles apply to them.
   Everything keeps its colour (print-color-adjust: exact); the chrome, the lens (vignette, grain, night), the cursor, the bubbles, the
   scrollbar and every control (the arrows of the typed blocks, the bot's invitation, the journey's disc, the hints, the agenda's
   checkboxes) are not paper and do not print. In print 100vh is the page's height, not the screen's (measured in Chrome 151: 36 in), so
   nothing here relies on viewport units. */

* { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
@page { size: letter; margin: 0.5in; background: #f1ece2; }   /* the paper to the page's edge: Chrome paints the document only inside the margins, the page rule paints the rest */
@page poster { size: 24in 36in; margin: 0; background: #f1ece2; }
@page letter { size: letter; margin: 0.5in; background: #f1ece2; }

/* the document flows again: the fixed viewport becomes a plain block, nothing scrolls, nothing is clipped to one page */
html { background: var(--paper); --print-zoom: tan(atan2(24in, 3 * var(--lane))); }
html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; position: static !important; margin: 0 !important; }
#viewport { position: static !important; height: auto !important; width: auto !important; overflow: visible !important; opacity: 1 !important; background: none !important; }

/* page one: the sheet, zoomed to the page and centred above the band at its foot; its own paper, tooth and mottle; no desk, no shadow */
#poster { position: relative !important; page: poster; transform: none !important; width: auto !important; min-height: 0 !important; box-sizing: border-box !important; height: calc(36in / var(--print-zoom) - 3px) !important; padding-top: var(--print-top, 0px) !important; zoom: var(--print-zoom); box-shadow: none !important; overflow: hidden; justify-content: center; will-change: auto !important; }
#poster .cell { min-height: 0 !important; overflow: hidden; outline: none !important; }   /* the height is pinned inline (margin.js); overflow stays inside the place as it does on the screen */
#poster .cell::after { content: none !important; }                  /* the zoom-out's dashed box under the pointer: a print made from the whole poster has the pointer on some cell */
#poster .cell-title { visibility: visible !important; }              /* the zoom-out's attribute hides titles on the screen; on paper every place keeps its name */
#poster .cell-label { display: none !important; }
#poster .print-title-copy { display: block !important; }             /* the title of a place never visited, rasterised by margin.js */
#poster .prompt, #poster .direct, #poster .stage .ink { display: none !important; }   /* the question line, its caret and "or click the ets logo" are for the screen */
#poster .cell > canvas.ink, #poster .cell > canvas.bot { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }   /* as they are: full resolution from beforeprint, multiply and the soak from app.css */
#poster .cell[data-place="years"] iframe { display: none !important; }   /* the deck is a frame of photographs: it cannot lie on paper (and would carry every photograph, unseen, into the file) */
#poster .print-years { display: block !important; position: absolute; left: 44px; right: 44px; top: 108px; z-index: 1; font-family: var(--type); font-size: 15.5px; line-height: 1.7; color: var(--ink); }   /* the editions typed where the deck stands */
#poster .print-years p { margin: 0 0 0.9em; }
#poster .print-years .print-list { white-space: pre-wrap; }
#poster .print-mark { display: flex !important; position: absolute; left: 50%; bottom: calc(0.62in / var(--print-zoom)); transform: translateX(-50%); z-index: 6; flex-direction: column; align-items: center; gap: calc(0.1in / var(--print-zoom)); pointer-events: none; }
#poster .print-mark canvas { display: block; width: calc(3in / var(--print-zoom)); height: auto; mix-blend-mode: multiply; filter: url(#soak); }
#poster .print-mark .print-label { font-family: var(--type); font-size: calc(0.2in / var(--print-zoom)); letter-spacing: 0.03em; color: var(--ink); white-space: nowrap; }
#poster .print-mark .print-label b { font-weight: 700; }

/* not paper: the fixed chrome, the lens, the cursor, the bubbles, the drawn scrollbar, the opening's flowing ink and the mark (it is fixed and would
   repeat on every page; page one carries a copy), and the second pass's controls (the typed blocks' arrows, the offer's arrows, the bot's
   invitation and its dashed box, the journey's disc, the mind's hints, the agenda's checkboxes) */
.chrome, .scrollbar, .sound, .tin, .choice, .note, .hint, .menu, .tip, .bubbles, .cur, .night, .grain, .vignette, .morph, .logo, .noscript, #undo-bot,
.journey-disc, .mind-hint, .tw-controls, .ag-check, .bot-invite, .bot-box, .mailout-controls, .bio-card, .face-mark { display: none !important; }

/* the reading pages: one place per letter page (a long place runs on), its title in the hand, its printed content at natural height, the typed
   cards that lay on its paper in a row; plain paper, so a page never shows the edge of a box */
#print-pages { display: block !important; page: letter; break-before: page; width: 7.5in; margin: 0; font-family: var(--type); color: var(--ink); -webkit-font-smoothing: antialiased; }
#print-pages .print-page { position: relative; break-before: page; width: 10in; zoom: 0.75; min-height: 0 !important; height: auto !important; overflow: visible !important; padding: 0 0 32px; box-sizing: border-box; }   /* laid out at 960 px, printed at three quarters: type at about 10 px */
#print-pages .print-title { position: relative; margin: 0 0 22px -10px; mix-blend-mode: multiply; break-after: avoid; }
#print-pages, #print-pages * { filter: none !important; }   /* the soak's ragged edge cannot be seen at reading size and doubles the time the print takes to prepare; the tooth stays (the ink's mask) */
#print-pages .print-title canvas { display: block; }
#print-pages h2.print-title { font-family: var(--type); font-size: 24px; font-weight: 400; letter-spacing: 0.02em; margin: 0 0 22px; filter: none; mix-blend-mode: normal; }
#print-pages .printed { position: static !important; padding: 0 !important; margin: 0; width: auto; font-size: 13.5px; line-height: 1.7; }
#print-pages .on-paper { position: static !important; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; margin-top: 24px; pointer-events: none; }
#print-pages .on-paper > * { position: static !important; transform: none !important; left: auto !important; top: auto !important; margin: 0 !important; }   /* cards lie in a row on the page, not where they were flung */
#print-pages .cell-title, #print-pages .cell-label, #print-pages canvas.ink, #print-pages canvas.bot, #print-pages .carriage { display: none !important; }
#print-pages [data-pending], #print-pages [class*="-pending"] { visibility: visible !important; }   /* a block the typewriter had not reached prints whole */
#print-pages a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(21, 20, 26, 0.35); }
#print-pages p, #print-pages li, #print-pages .card, #print-pages .face, #print-pages .ag-ses { break-inside: avoid; }   /* nothing cut across two pages */
#print-pages h2, #print-pages h3, #print-pages .ag-day-label, #print-pages .ag-hair { break-after: avoid; }   /* a heading (and the agenda's drawn line under a day) stays with what follows it */
#print-pages .print-note { font-size: 11.5px; line-height: 1.6; margin-top: 20px; opacity: 0.8; }
#print-pages .print-list { white-space: pre-wrap; font-size: 13.5px; line-height: 1.8; margin: 0; }
#print-pages .cell[data-place="agenda"] .ag-days { margin-right: 0 !important; }   /* the laptop's margin for the picks belongs to the screen; the picks card follows the programme */
#print-pages .ag-tick, #print-pages .ag-pick, #print-pages .face-tick { display: none !important; }   /* marks placed by the screen's geometry mean nothing on a reflowed page */
#print-pages .cell[data-place="speakers"] .how, #print-pages .cell[data-place="speakers"] .filter { display: none !important; }   /* hover, grab and the filter are for the screen */
#print-pages .print-lineup { columns: 3; column-gap: 34px; font-size: 12.5px; line-height: 1.55; margin-top: 16px; }
#print-pages .print-lineup p { margin: 0 0 4px; }
body::after { content: none !important; display: none !important; }   /* the screen's paper band under the chrome (app.css) never prints: margin.js freezes the screen's media rules into "all" for page one, so it is undone here, where the freeze does not reach */
#print-pages .ag-picks.folded > .card-title, #print-pages .ag-picks.folded > .ag-list { display: block !important; }   /* a phone's folded picks card is whole on its reading page */
#print-pages .ag-picks .ag-fold, #print-pages .ag-picks .ag-fold-away { display: none !important; }
#print-pages .ag-picks { background: none !important; box-shadow: none !important; }