/* The book, shared by the album and the studio: the open page lies on the rest of the book,
   bound by a wire coil down its left edge. Both pages use this one file, so the book is the
   same book wherever you are in it: the album and the studio lay the page out identically, so
   going from one to the other only the crayon comes and goes. A page gives its sheet the class
   "bound" */
:root {
  --gutter: clamp(10px, 2.2vmin, 28px);
  --foot: 52px;            /* the strip under the book for its controls */
  --book-bottom: var(--foot);
  /* clear of a phone's notch, Dynamic Island and home bar (the pages declare viewport-fit=cover) */
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
  /* the book's margins on each side of the stage (the screen, or the screen turned) */
  --inset-t: calc(var(--gutter) + var(--safe-t)); --inset-r: calc(var(--gutter) + var(--safe-r));
  --inset-b: calc(var(--gutter) + var(--safe-b)); --inset-l: calc(var(--gutter) + var(--safe-l));
  --bind: 26px;            /* the spiral's coils, left of the sheets */
  --pitch: 22px;           /* one coil every so often down the spine */
  --coil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23565656'/%3E%3Cstop offset='.45' stop-color='%23e9e9e6'/%3E%3Cstop offset='.6' stop-color='%23bdbdb9'/%3E%3Cstop offset='1' stop-color='%23393939'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 12 C 12 19, 30 19, 36 13' fill='none' stroke='%23303030' stroke-opacity='.35' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M37 11.5 C 31 2.5, 10 2.5, 7 11' fill='none' stroke='url(%23m)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* No focus boxes anywhere (tests/no-focus-boxes.test.js) */
:focus, :focus-visible { outline: none !important; }
/* where the open book lies on the table */
/* everything on the table is laid out on the stage: the screen, or on a phone held upright,
   the screen turned a quarter (book.js) */
.stage { position: fixed; inset: 0; }
.book { position: fixed; inset: var(--inset-t) var(--inset-r) calc(var(--book-bottom) + var(--inset-b) - var(--gutter)) calc(var(--inset-l) + var(--bind)); }
/* a sheet: the editor's paper, less what's torn from each edge */
.paper { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-canvas);
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left, none), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left, none), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  -webkit-mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y; mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over; mask-composite: subtract, add, add, add, add; }
.paper::before { content: ""; position: absolute; inset: 0;
  background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat;
  filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity); }
/* the open page: its bound edge is cut straight, not torn, and a faint shadow lifts it off
   the pages beneath */
.bound { z-index: 1; filter: drop-shadow(0 0.5px 0.6px oklch(0.2 0.02 60 / 0.22)); }
.bound > .paper { --tear-left: linear-gradient(transparent 0 0); }
/* The rest of the book under the open page: one thin sheet for each page still to come,
   each lying a hair lower and to the right, its edge catching a little shadow, so the
   book has thickness without looking like a block */
.beneath { position: absolute; inset: 0; z-index: 0; pointer-events: none; view-transition-name: pile;
  filter: drop-shadow(0 1px 1px var(--sheet-shadow-near)) drop-shadow(0 6px 12px var(--sheet-shadow-far)); }
.beneath .paper { transform: translate(calc(var(--n) * 1.1px), calc(var(--n) * 1.5px));
  background: color-mix(in oklch, var(--bg-canvas), oklch(0.5 0.02 70) calc(var(--n) * 1.4%)); }
.beneath .paper::after { content: ""; position: absolute; inset: 0; box-shadow: inset -0.5px -0.5px 0 oklch(0.2 0.02 60 / 0.16); }
/* the punched holes the coils pass through, one per coil down the bound edge */
.holes { position: absolute; left: 7px; top: 0; bottom: 0; width: 9px; pointer-events: none;
  background: radial-gradient(ellipse 4px 3px at 50% calc(var(--pitch) / 2), oklch(0.2 0.02 60 / 0.55) 60%, oklch(0.2 0.02 60 / 0) 100%) 0 0 / 9px var(--pitch) repeat-y; }
/* The binding: a wire coil through each hole, round the spine. It never moves; the pages
   turn on it, and it stays put going between the album and the studio */
.binding { position: fixed; z-index: 5; left: var(--inset-l); top: var(--inset-t); bottom: calc(var(--book-bottom) + var(--inset-b) - var(--gutter)); width: calc(var(--bind) + 18px); pointer-events: none;
  background: var(--coil) 0 0 / 100% var(--pitch) repeat-y; view-transition-name: binding;
  filter: drop-shadow(1px 1.5px 1px oklch(0.2 0.02 60 / 0.35)); }

/* ── At the foot, on the table: the page's controls in the middle, the tools at the right ── */
.foot { position: fixed; left: var(--safe-l); right: var(--safe-r); bottom: var(--safe-b); height: var(--foot); display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  color: var(--fg-muted); font: 400 var(--text-ui)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.foot button { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--fg-default); }
.foot button:hover { color: var(--fg-muted); }
.foot button:disabled { opacity: .3; cursor: default; }
/* drawing your own and the contact sheet sit together at the right; the pencil is pressed
   while you draw, and pressing it again puts the crayon away */
.foot .tools { position: absolute; right: calc(var(--gutter) - 6px); display: flex; gap: var(--space-2xs); view-transition-name: tools; }
.foot .draw-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; color: var(--fg-default); }
.foot .draw-btn:hover { color: var(--fg-muted); }
.foot .draw-btn[aria-pressed="true"] { background: var(--bg-active); }
.count { min-width: 4.5em; text-align: center; }

/* ── On a phone (book.js): the book edge to edge, its controls a few marks in the page's
   corner. In landscape the binding sits in the margin beside the Dynamic Island and the other
   side keeps only a hair; held upright, the stage is turned a quarter, so the book's left
   (the binding) is at the top of the screen ── */
:root.phone { --gutter: 6px; --foot: 0px; --bind: 22px; }
:root.phone[data-island="left"] { --inset-l: max(var(--gutter), calc(var(--safe-l) - 8px)); --inset-r: 10px; }
:root.phone[data-island="right"] { --inset-l: 8px; --inset-r: var(--safe-r); }
:root.phone.sideways .stage { inset: auto; left: 0; top: 0; width: var(--stage-w); height: var(--stage-h); transform-origin: 0 0; transform: translateX(var(--stage-h)) rotate(90deg); }
:root.phone.sideways { --inset-l: calc(var(--safe-t) + 2px); --inset-t: calc(var(--safe-r) + 8px); --inset-r: calc(var(--safe-b) + 8px); --inset-b: calc(var(--safe-l) + 8px); }
:root.phone .foot { left: auto; right: calc(var(--inset-r) + 2px); bottom: calc(var(--inset-b) + 2px); height: 40px; z-index: 6; gap: 0; }
:root.phone .foot .tools { position: static; }
:root.phone .count { min-width: 0; padding: 0 6px; font-size: 12px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Between the album and the studio: the same book, only the crayon comes and goes ──
   A cross-document view transition (Chrome, Edge, Safari 18.2+; elsewhere a plain page load).
   Both pages lay the sheet out identically, so the sheet itself doesn't move: the page arriving
   fades in over the one leaving, pixel for pixel the same photograph, so all that changes is
   the crayon round it (book.js holds the fade until the arriving page has painted). The
   binding, the pages beneath and the tools stay put; the tin slides in at the corner */
@view-transition { navigation: auto; }
::view-transition-group(sheet) { animation: none; }
::view-transition-image-pair(sheet) { isolation: auto; }
::view-transition-old(sheet) { animation: none; mix-blend-mode: normal; }
/* an even dissolve, long enough to see the sketch melt away (or come back) */
::view-transition-new(sheet) { animation: book-fade var(--dur-reflow) var(--ease-in-out) both; mix-blend-mode: normal; }
@keyframes book-fade { from { opacity: 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-fast); }
::view-transition-new(tin) { animation: tin-in var(--dur-slow) var(--ease-out) both; }
::view-transition-old(tin) { animation: tin-in var(--dur-fast) var(--ease-out) reverse both; }
@keyframes tin-in { from { opacity: 0; translate: 24px 32px; } }