/* Sheets: the headline over the set with the sample PDF beside it, and the set across the page
   under them. It is the one pinned scene laid out this way, because two A2 sheets side by side want
   the width. The sheets are paper lying on the page's dark ground, the way a print lies on a dark
   table: nothing behind them, nothing lighting them, only the soft neutral shadow paper throws.
   The foot keeps the row under the paper clear of the window's edge. */
.sheets .stage { display: flex; flex-direction: column; padding-top: clamp(64px, 11vh, 112px); padding-bottom: clamp(16px, 5vh, 48px); }
.sheets-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 3.6vh, 40px); }
.sheets-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }

/* The table the set lies on: no surface of its own, only the rest of the stage to lay the sheets
   out in. The script places everything on it in pixels. */
.sheets-art { position: relative; flex: 1; min-height: 0; }
/* A sheet is laid out at the largest size it takes and scaled from its corner; `--k` undoes that
   scale for its shadow and its corners, so they keep one weight at every stage. Its corners are
   rounded like every other object on the page (the owner asked for it: square paper read as a
   different kind of thing from the app's window and cards). */
.sh-sheet {
  position: absolute; left: 0; top: 0; aspect-ratio: 594 / 420; border-radius: calc(14px * var(--k, 1)); overflow: hidden;
  background: var(--paper); transform-origin: 0 0; will-change: transform;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 calc(18px * var(--k, 1)) calc(40px * var(--k, 1)) calc(-14px * var(--k, 1)) rgba(0, 0, 0, 0.7);
}
.sh-sheet:nth-of-type(1) { z-index: 2; }
.sh-sheet:nth-of-type(2) { z-index: 1; }
.sh-sheet svg { display: block; width: 100%; height: 100%; }
.sh-print { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sh-label { position: absolute; left: 0; top: 0; display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; will-change: transform; transition: opacity 0.3s; }

/* The issue: the P2 file's furniture laid over the P1 one. The new one comes up first and the old
   one goes after it, so the lines the two share never thin on the way; the same in reverse on the
   way back up. */
.sh-was, .sh-now { transition: opacity 0.35s linear; }
.sh-was { transition-delay: 0s; }
.sh-now { opacity: 0; transition-delay: 0.3s; }
.issued .sh-now { opacity: 1; transition-delay: 0s; }
.issued .sh-was { opacity: 0; transition-delay: 0.3s; }

/* A detail: the boundary drawn on the sheet round the corner that matters, in the blue the page
   keeps for what a click is about to change, a leader down from the paper's edge, and the corner
   enlarged under it. `--u` is the sheet's millimetres to a screen pixel, so the boundary has one
   weight on screen whatever size the paper is. An undrawn boundary is also hidden, once it has
   finished undrawing: at a dash offset of one the stroke still left a blue speck where it starts on
   a 2x screen. */
.sh-ring {
  fill: none; stroke: var(--blue); stroke-width: calc(1.6px * var(--u, 1)); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset 0.7s var(--ease), opacity 0s linear 0.7s;
}
.sh-ring.on { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.7s var(--ease), opacity 0s; }
.sh-leaders { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sh-leaders line { stroke: var(--snow-faint); stroke-width: 1; opacity: 0; transition: opacity 0.3s; }
.sh-leaders line.on { opacity: 1; transition-delay: 0.25s; }
/* The enlargement wears the boundary's blue as a hairline rim, so the corner under the ring and the
   picture of it read as one thing wherever the layout puts the picture. It stands above the islands,
   so in the column an island's shadow never falls across the paper under it. */
.sh-loupe {
  position: absolute; z-index: 6; border-radius: 9px; background: var(--paper); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 34px -14px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.45s var(--ease);
}
.sh-loupe.on { opacity: 1; transform: none; }
.sh-loupe.gone { display: none; }
.sh-loupe svg { display: block; width: 100%; height: 100%; }
.sh-loupe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--blue); pointer-events: none; }
/* An enlargement keeps the pens the sheet has, as a detail view on a drawing keeps them: the
   lettering grows with the view and the lines do not. */
.sh-loupe path, .sh-loupe line { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.sh-loupe path[stroke-width="0.7000"] { stroke-width: 2px; }
.sh-note { transition: font-size 0.8s var(--ease); }
.sh-loupe .sh-row-mark { vector-effect: none; stroke: var(--blue); stroke-width: calc(2.5px * var(--u, 0.25)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s var(--ease); }
.sh-loupe.issued .sh-row-mark { stroke-dashoffset: 0; transition-delay: 0.55s; }

/* The check, the issue and the file: islands on the ground beside the paper, never over it. */
.sh-card, .sh-pdf { position: absolute; z-index: 5; opacity: 0; transition: opacity 0.35s, transform 0.45s var(--ease); pointer-events: none; }
.sh-card { padding: 11px 14px 12px; border-radius: 16px; font-size: 13.5px; transform: translateY(10px); }
.sh-card.on { opacity: 1; transform: none; }
.sh-issue { padding-block: 10px; }
.sc-head { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.sc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--snow); transition: background 0.3s; }
.sh-check.fixed .sc-dot, .sh-issue.done .sc-dot { background: var(--snow); }
.sc-say { font: 600 14.5px/1.25 var(--sans); letter-spacing: -0.005em; text-wrap: balance; }
.sc-step { font: 500 12.5px/1 var(--mono); color: var(--fg-2); white-space: nowrap; transition: opacity 0.3s; }
/* The button the page presses for the visitor, pressed and held for a stretch, then gone once it has
   done its work. */
.sc-btn {
  margin-left: auto; flex: none; display: grid; place-items: center; height: 30px; padding: 0 13px; border-radius: 15px;
  font: 500 13px/1 var(--sans); color: var(--ground); background: var(--snow); white-space: nowrap;
  transition: opacity 0.3s, transform 0.25s var(--ease), box-shadow 0.25s, background 0.2s;
}
.sc-btn.down { background: #c3c6cc; transform: scale(0.95); box-shadow: 0 0 0 3px #1d1e21, 0 0 0 4.5px var(--snow); }
.sh-check.fixed .sc-btn { opacity: 0; transform: scale(0.9); }
/* Once the set is issued the island is the app's one line, which wants the whole width. */
.sh-issue.done .sc-btn, .sh-issue.done .sc-step { display: none; }
/* The finding breaks where it reads, never leaving its last word on a line of its own. */
.sc-row { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--hair); color: var(--fg-2); line-height: 1.45; text-wrap: pretty; }
.sc-row span { transition: color 0.3s; }
.sc-row em { display: block; margin-top: 3px; font: 12px var(--mono); font-style: normal; color: var(--fg-3); }
.sh-check.fixed .sc-row span { color: var(--fg-3); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--fg) 30%, transparent); }

/* The file, which opens the file: a link like the one in the head. */
.sh-pdf {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; white-space: nowrap;
  color: inherit; text-decoration: none; transform: translate(-50%, 12px);
}
.sh-pdf.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sh-pdf.at-card, .sh-pdf.at-card.on { transform: none; }
/* The file's mark is a page of the same paper, not a coloured badge. */
.pdf-mark { flex: none; display: grid; place-items: end center; width: 32px; height: 40px; padding-bottom: 6px; border-radius: 3px 9px 3px 3px; background: var(--paper); color: var(--ink); font: 600 9.5px/1 var(--mono); letter-spacing: 0.04em; }
.pdf-words b { display: block; font: 600 14.5px var(--sans); }
.pdf-words span { font: 12px var(--mono); color: var(--fg-2); }

@media (max-height: 640px) {
  .sh-card { padding: 10px 13px 11px; font-size: 13px; }
  .sh-issue { padding-block: 8px; }
  .sc-row { margin-top: 8px; padding-top: 8px; line-height: 1.35; }
  .sc-say { font-size: 14px; }
}
/* Wherever it fits, the headline takes one line, so the paper keeps the height: two A2 sheets side
   by side are as tall as the width lets them be only if the headline gives up its second line. On a
   phone the break stays, and the second line is set so its last word never stands alone: balanced,
   "Every sheet, checked before it goes." broke as "Every / sheet, checked / before it goes.", and
   with the break alone it left "goes." on a line of its own. */
@media (min-width: 700px) {
  .sheets-head h2 br { display: none; }
}
@media (max-width: 699.98px) {
  .sheets-head h2 { text-wrap: pretty; }
}
@media (max-width: 900px) {
  .sheets .stage { padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene.sheets { height: 100vh; height: 100svh; }
  .sh-was, .sh-now, .sh-card, .sh-pdf, .sh-loupe, .sh-ring, .sh-note, .sh-label { transition: none; }
}