/* Orli v3 site · resources · printable sheets
   ---------------------------------------------------------------------------
   One stylesheet for every print-ready page in resources/ (the making guide
   and the feelings poster). Needs, in this order:

     v2/system/fonts/fonts.css → v2/system/tokens.css →
     v2/interactions/lib/buttons.css (the toolbar only) → this file

   On screen: the A4 sheets sit on the warm table with a toolbar above them
   (back to Resources, Print, Download PDF). In print: just the sheets, one
   per page, edge to edge (@page margin 0; each sheet keeps its own 14 mm
   margin, inside what home and school printers can reach).

   Sizes are in mm and pt so the sheet is the same at any screen width; on a
   narrow screen it is scaled down to fit (see the bottom of this file).
   Colours, radii and fonts are the system tokens. Print type steps:
   display 30pt · title 19pt · heading 13pt · lead 12pt · body 10.5pt · small 8.5pt.
   ------------------------------------------------------------------------- */

@page { size: A4 portrait; margin: 0; }

:root {
  --p-pad-y: 14mm;
  --p-pad-x: 15mm;
  --p-display: 30pt;
  --p-title: 19pt;
  --p-heading: 13pt;
  --p-lead: 12pt;
  --p-body: 10.5pt;
  --p-small: 8.5pt;
  --p-r: 5mm;            /* card corners on paper (24px at 96 dpi is 6.35 mm; 5 mm reads the same in print) */
  --p-r-s: 3mm;
  --p-line: 0.3mm solid var(--o-line);
  --p-rule: 0.35mm solid var(--o-n2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--o-warm-high);
  color: var(--o-ink);
  font: 400 var(--p-body) / 1.45 var(--o-font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus { outline: none; }
:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); border-radius: 4px; }

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

/* ================================================================ toolbar
   Screen only. Back, the document's name, Print and Download PDF. */
.p-skip {
  position: absolute; left: 16px; top: -80px; z-index: 20;
  padding: 12px 16px; border-radius: var(--o-r-pill);
  background: var(--o-ink); color: #fff; text-decoration: none;
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
}
.p-skip:focus-visible { top: 12px; }
.p-bar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--o-canvas) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--o-line);
}
.p-bar__in {
  display: flex; align-items: center; gap: var(--o-space-3);
  width: min(100% - 2 * var(--o-space-4), 1100px); margin-inline: auto;
  min-height: 72px; padding-block: var(--o-space-3);
}
.p-bar__back {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  min-height: 44px; padding-inline: 4px 8px; margin-inline-start: -4px;
  font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui);
  color: var(--o-ink); text-decoration: none; border-radius: var(--o-r-pill);
}
.p-bar__back::before {
  content: ""; width: 18px; height: 11px; background: currentColor; rotate: 180deg;
  -webkit-mask: url("../../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
          mask: url("../../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
  transition: translate var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .p-bar__back:hover::before { translate: -3px 0; } }
.p-bar__title {
  flex: 1; min-width: 0; margin-inline-start: var(--o-space-3);
  padding-inline-start: var(--o-space-4); border-inline-start: 1px solid var(--o-line);
  font: var(--o-weight-title) var(--o-text-body) / 1.25 var(--o-font-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-bar__title span { display: block; font: 400 var(--o-text-small) / 1.3 var(--o-font-body); color: var(--o-ink-2); }
.p-bar__actions { display: flex; gap: var(--o-space-2); flex: none; }
.p-bar .o-btn__icon .o-doodle { --size: 20px; }
/* A held sheet (the feelings poster, until its words are signed off): a
   "Draft" mark on the sheet, which prints, and a note where the actions go. */
.p-draft {
  display: inline-flex; align-items: center; padding: 1mm 3.2mm; border: 0.3mm solid var(--o-ink-2); border-radius: 999px;
  font: var(--o-weight-ui) var(--p-small) / 1.2 var(--o-font-ui); letter-spacing: .02em; color: var(--o-ink);
}
.p-bar__draft {
  display: flex; align-items: center; gap: var(--o-space-2); flex: none;
  font: 400 var(--o-text-small) / 1.3 var(--o-font-body); color: var(--o-ink-2);
}
.p-bar__draft .p-draft { padding: 4px 10px; border-width: 1px; font-size: var(--o-text-small); }
@media (max-width: 719.98px) {
  .p-bar__title { display: none; }
  .p-bar__back { margin-inline-end: auto; }
  .p-bar__print { display: none; }
}

/* ================================================================== sheets */
.p-sheets {
  display: grid; justify-content: center; gap: 12mm;
  padding: 10mm var(--o-space-4) 16mm;
}
.p-sheet {
  position: relative; overflow: hidden;
  width: 210mm; height: 297mm;
  padding: var(--p-pad-y) var(--p-pad-x);
  background: #fff; color: var(--o-ink);
  box-shadow: 0 1px 2px rgb(60 57 50 / .08), 0 18px 40px -16px rgb(60 57 50 / .3);
  display: flex; flex-direction: column;
}
.p-sheet__page { position: absolute; inset-block-end: 7mm; inset-inline-end: var(--p-pad-x); font-size: var(--p-small); color: var(--o-ink-2); }

/* The top of every sheet: the logo on the left, one quiet line on the right. */
.p-top { display: flex; align-items: center; justify-content: space-between; gap: 6mm; }
.p-top__logo { width: 25mm; height: auto; }
.p-top__meta { font: var(--o-weight-ui) var(--p-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2); letter-spacing: .01em; text-align: end; }

/* The foot of every sheet: tagline (outlined Figma Hand) and the address. */
.p-foot {
  margin-block-start: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 6mm;
  padding-block-start: 4mm; border-block-start: var(--p-rule);
  font-size: var(--p-small); color: var(--o-ink-2);
}
.p-foot__tag { font: var(--o-weight-ui) 10pt / 1.2 var(--o-font-ui); color: var(--o-ink); --hand-size: 12.5pt; }
.p-foot__end { display: flex; gap: 4mm; align-items: center; }
.p-foot strong { font-weight: 700; color: var(--o-ink); }

/* Type */
.p-display { font: var(--o-weight-title) var(--p-display) / 1.04 var(--o-font-ui); letter-spacing: -.028em; text-wrap: balance; }
.p-title { font: var(--o-weight-title) var(--p-title) / 1.12 var(--o-font-ui); letter-spacing: -.02em; text-wrap: balance; }
.p-heading { font: var(--o-weight-title) var(--p-heading) / 1.22 var(--o-font-ui); letter-spacing: -.01em; }
.p-lead { font-size: var(--p-lead); line-height: 1.45; text-wrap: pretty; }
.p-small { font-size: var(--p-small); line-height: 1.4; }
.p-muted { color: var(--o-ink-2); }
.p-label { font: var(--o-weight-ui) var(--p-small) / 1.2 var(--o-font-ui); letter-spacing: .02em; color: var(--o-ink-2); }

/* A write-in line: a label, then a dotted line to write on. */
.p-write { display: flex; align-items: flex-end; gap: 3mm; min-height: 12mm; font: 600 var(--p-lead) / 1.2 var(--o-font-ui); }
.p-write::after { content: ""; flex: 1; min-width: 20mm; border-block-end: 0.45mm dashed var(--o-n3); translate: 0 -1.2mm; }

/* =================================================================== print */
@media print {
  body { background: #fff; }
  .p-skip, .p-bar { display: none !important; }
  .p-sheets { display: block; padding: 0; }
  .p-sheet { box-shadow: none; break-after: page; page-break-after: always; margin: 0; }
  .p-sheet:last-child { break-after: auto; page-break-after: auto; }
  a { text-decoration: none; }
}

/* Small screens: the sheet keeps its A4 layout and is scaled to fit, so what
   you see is what prints. print.js sets --fit (1 on a wide screen). */
.p-fit { width: calc(210mm * var(--fit, 1)); height: calc(297mm * var(--fit, 1)); }
/* A3: the same A4 sheet, zoomed by √2 (print.js adds the A3 @page rule). */
html[data-size="a3"] .p-sheet { zoom: 1.41421356; }
html[data-size="a3"] .p-fit { width: calc(297mm * var(--fit, 1)); height: calc(420mm * var(--fit, 1)); }
.p-fit > .p-sheet { transform-origin: 0 0; scale: var(--fit, 1); }
@media screen and (max-width: 860px) {
  .p-sheets { padding: var(--o-space-4) var(--o-space-4) var(--o-space-7); gap: var(--o-space-4); }
}
@media print {
  .p-fit { width: auto; height: auto; }
  .p-fit > .p-sheet { scale: none; }
}

@media (forced-colors: active) {
  .p-sheet { border: 1px solid CanvasText; }
  .p-bar__back::before { background: CanvasText; }
}