/* Paste-up paper: the cut-out sheet, its tears and tape, and the pencil ink
   lines, shared by the marketing pages (site/paper.css imports this and adds
   what is printed on their demo cards) and the operator tools (the sample
   previews and key cards: the pin card, the sign's plate, the sign-in sheets).

   A .cut stays paper in dark mode, like the collage tiles: the light tokens
   are re-declared on it, so everything inside reads as print. The ink lines
   (.ink) are inline SVG filtered by #cite-pencil (site/paper.js on the
   marketing pages, paste/paper.js in the tools), drawn on once when seen. */

/* The torn edges, as masks: two jagged strips at different periods per edge. */
:root {
  --t1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='173' height='10' viewBox='0 0 173 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0.0 2.5 L3.7 4.5 L7.7 0.7 L12.5 2.1 L18.0 6.0 L21.4 1.6 L25.5 6.9 L29.9 1.0 L34.5 2.5 L36.1 6.9 L40.5 7.3 L45.6 5.7 L48.9 7.6 L50.8 2.0 L56.2 4.6 L58.9 3.1 L61.8 4.3 L66.9 6.5 L71.8 7.2 L74.0 7.7 L79.1 5.2 L81.4 7.0 L84.1 6.1 L89.5 5.7 L92.7 2.5 L97.3 6.1 L101.2 5.2 L104.0 7.8 L107.6 6.6 L109.4 0.8 L111.7 4.5 L113.8 6.2 L116.5 7.6 L119.5 3.9 L123.6 4.2 L127.6 6.9 L130.8 2.1 L133.5 6.9 L137.2 3.3 L141.0 4.5 L145.1 4.6 L148.4 2.9 L152.8 0.7 L154.5 6.8 L157.0 4.4 L159.8 2.6 L162.8 2.5 L165.8 0.8 L169.6 2.6 L173.0 2.5 L173 10 Z'/%3E%3C/svg%3E"); --t2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='229' height='10' viewBox='0 0 229 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10 L0.0 2.9 L3.7 6.8 L7.3 1.8 L10.8 5.7 L12.7 1.2 L17.4 0.9 L22.9 7.2 L26.8 0.7 L30.4 1.8 L32.9 3.6 L36.2 6.9 L40.2 4.8 L43.6 7.0 L49.0 7.3 L51.8 2.4 L53.6 3.2 L58.5 6.7 L63.4 1.9 L68.5 6.9 L71.6 4.6 L76.2 1.2 L79.0 7.4 L81.0 1.2 L82.7 1.7 L86.5 1.8 L90.9 4.7 L92.9 2.0 L95.5 7.4 L98.2 6.4 L101.2 7.2 L103.2 6.4 L105.7 2.7 L108.4 1.2 L112.2 4.4 L115.2 6.7 L118.6 6.1 L120.9 6.4 L125.6 1.8 L130.1 6.4 L135.4 7.1 L138.6 0.8 L143.9 5.1 L146.4 7.1 L149.1 5.2 L150.9 4.2 L155.8 2.4 L161.0 0.7 L163.6 1.0 L165.8 4.3 L167.8 6.3 L173.2 5.0 L177.0 0.8 L178.6 7.3 L184.0 4.7 L187.4 2.6 L192.9 4.1 L197.3 7.3 L201.7 6.5 L204.6 6.4 L209.5 5.7 L214.5 4.6 L217.5 4.5 L219.3 7.0 L224.4 3.1 L228.0 3.4 L229.0 2.9 L229 10 Z'/%3E%3C/svg%3E"); --b1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='181' height='10' viewBox='0 0 181 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0.0 6.8 L4.5 3.4 L8.9 3.9 L12.3 2.8 L17.4 6.4 L19.9 5.7 L21.4 7.6 L26.6 8.4 L31.3 5.4 L33.3 3.8 L35.6 3.1 L40.6 3.2 L44.3 8.1 L49.5 3.2 L54.6 7.1 L56.8 9.0 L59.5 9.4 L63.7 7.4 L68.5 7.4 L71.9 9.0 L77.3 4.6 L82.2 4.4 L85.1 9.3 L86.8 3.3 L89.1 3.5 L94.4 7.1 L98.0 8.7 L102.5 3.9 L104.1 3.8 L107.0 3.5 L109.8 3.0 L112.6 8.3 L114.4 5.0 L119.9 9.1 L125.3 6.8 L127.8 4.1 L131.1 9.0 L136.3 6.2 L141.1 4.7 L146.4 4.4 L148.4 8.4 L153.2 6.5 L158.7 2.2 L162.0 4.7 L165.5 6.8 L167.5 3.1 L172.9 6.2 L175.7 7.7 L180.0 3.3 L181.0 6.8 L181 0 Z'/%3E%3C/svg%3E"); --b2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='239' height='10' viewBox='0 0 239 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0.0 7.0 L4.7 3.5 L9.3 5.2 L11.2 6.9 L15.7 6.2 L18.5 2.3 L21.6 3.9 L26.3 3.7 L30.7 3.3 L33.0 3.8 L37.1 8.9 L42.3 3.0 L44.4 2.5 L49.6 7.0 L51.3 7.1 L56.6 4.4 L61.6 5.8 L66.9 7.1 L69.5 8.2 L73.4 5.9 L75.4 3.5 L78.2 3.6 L82.0 9.3 L86.5 6.4 L89.1 4.7 L91.8 3.1 L97.0 5.8 L101.2 4.7 L106.6 6.9 L108.9 8.4 L110.8 4.0 L114.4 2.3 L119.2 3.5 L121.1 4.0 L125.2 8.9 L127.0 7.9 L130.7 8.4 L133.3 6.3 L136.4 5.9 L140.0 3.2 L144.5 7.4 L146.7 9.2 L151.2 6.7 L156.3 5.7 L161.5 5.5 L164.5 2.6 L167.2 5.6 L170.8 8.2 L174.6 4.5 L177.9 6.2 L181.5 9.3 L184.1 2.5 L187.4 8.0 L190.0 4.9 L191.6 3.6 L195.6 3.8 L200.7 4.0 L204.3 8.0 L208.4 2.6 L211.6 5.9 L213.9 7.7 L216.8 4.2 L222.2 9.4 L226.7 4.6 L231.5 4.7 L234.2 7.3 L237.8 6.2 L239.0 7.0 L239 0 Z'/%3E%3C/svg%3E");
}

.cut {
  color-scheme: light;
  --paper: #F7F0E0;
  --sheet: var(--paper); --sheet2: #FBF6EA; --well: #E8DEC8; --ground: var(--paper);
  --ink: #1D1F22; --ink2: #47443E; --ink3: #67625A; --faint: #958F83;
  --rule: rgba(70,98,146,.3); --rule2: rgba(70,98,146,.42);
  --clay: #C8714E; --mustard: #E6CB5A; --blue: #83A0C2; --sage: #9DAE8A; --blush: #E9C2B4; --oat: #DCCFB6; --cactus: #BACBBF;
  --green: #1FA566; --green-ink: #137A48; --mint: #3FD98F;
  --s-open: #1FA566; --s-busy: #E0A126; --s-sold: #C9363E; --s-closed: #8C8A84;
  --mark: rgba(230,203,90,.75);
  --shadow: none; --shadow-lift: none;
  --stamp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -6 0 0 0 4.4'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url%28%23w%29'/%3E%3C/svg%3E");
  position: relative; isolation: isolate; color: var(--ink);
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  rotate: var(--tilt, -.9deg);
  filter: drop-shadow(0 1px .5px rgba(70,50,20,.22)) drop-shadow(0 14px 14px rgba(50,34,12,.2));
  transition: rotate 500ms var(--ease-spring);
  text-shadow: 0 0 .6px rgba(29,31,34,.28);
}
:root[data-theme="dark"] .cut { --paper: #E9DFC9; filter: drop-shadow(0 1px .5px rgba(0,0,0,.5)) drop-shadow(0 16px 18px rgba(0,0,0,.55)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cut { --paper: #E9DFC9; filter: drop-shadow(0 1px .5px rgba(0,0,0,.5)) drop-shadow(0 16px 18px rgba(0,0,0,.55)); } }

/* The sheet itself: paper, grain and fibre, knifed a touch off square. */
.cut::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url%28%23f%29'/%3E%3C/svg%3E"), radial-gradient(ellipse at 40% 30%, transparent 60%, rgba(140,105,50,.07)), var(--paper);
  background-size: 180px 180px, 300px 300px, 100% 100%, auto;
  clip-path: polygon(.6% 1.4%, 38% .4%, 99.2% 0, 100% 97.6%, 61% 99.4%, .2% 100%);
}
.cut:nth-of-type(2n)::before { clip-path: polygon(0 .3%, 99.4% 1.6%, 99.8% 58%, 99.1% 100%, 1.1% 98.8%, .4% 44%); }
/* Torn along the top, the bottom, or both: two jagged strips at different
   periods so the tear never visibly repeats. */
.cut.tear-b::before { -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 9px) no-repeat, var(--b1) 0 100% / 181px 10px repeat-x, var(--b2) 61px 100% / 239px 10px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 9px) no-repeat, var(--b1) 0 100% / 181px 10px repeat-x, var(--b2) 61px 100% / 239px 10px repeat-x; }
.cut.tear-t::before { -webkit-mask: linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 9px) no-repeat, var(--t1) 0 0 / 173px 10px repeat-x, var(--t2) 37px 0 / 229px 10px repeat-x; mask: linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 9px) no-repeat, var(--t1) 0 0 / 173px 10px repeat-x, var(--t2) 37px 0 / 229px 10px repeat-x; }
.cut.tear-tb::before { -webkit-mask: linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 18px) no-repeat, var(--t1) 0 0 / 173px 10px repeat-x, var(--t2) 37px 0 / 229px 10px repeat-x, var(--b1) 0 100% / 181px 10px repeat-x, var(--b2) 61px 100% / 239px 10px repeat-x; mask: linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 18px) no-repeat, var(--t1) 0 0 / 173px 10px repeat-x, var(--t2) 37px 0 / 229px 10px repeat-x, var(--b1) 0 100% / 181px 10px repeat-x, var(--b2) 61px 100% / 239px 10px repeat-x; }
.cut.tear-b { padding-bottom: calc(var(--pb, 16px) + 6px); }

/* A strip of masking tape holding it down. */
.cut.tape::after, .pinup::after { content: ''; position: absolute; left: 50%; top: -11px; width: 92px; height: 24px; translate: -50% 0; rotate: -3.5deg; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent 30%, rgba(255,255,255,.12) 70%, transparent), rgba(226,214,178,.72); box-shadow: 0 1px 1px rgba(60,40,10,.12); -webkit-mask: conic-gradient(from -135deg at 0 50%, #000 90deg, transparent 0) 0 0 / 51% 6px repeat-y, conic-gradient(from 45deg at 100% 50%, #000 90deg, transparent 0) 100% 0 / 51% 6px repeat-y; mask: conic-gradient(from -135deg at 0 50%, #000 90deg, transparent 0) 0 0 / 51% 6px repeat-y, conic-gradient(from 45deg at 100% 50%, #000 90deg, transparent 0) 100% 0 / 51% 6px repeat-y; pointer-events: none; }
.cut.tape.tape-l::after, .pinup.tape-l::after { left: 18%; rotate: -8deg; }
.cut.tape.tape-r::after, .pinup.tape-r::after { left: 82%; rotate: 6deg; }
/* The tape's pinked ends, cut the right way round: the mask above points its
   wedges outward, so the strip draws nothing (on the marketing pages too,
   where it is left as it is until they are looked at). In the tools it shows. */
.cut.tape::after, .pinup::after { -webkit-mask: conic-gradient(from 45deg at 0 50%, #000 90deg, transparent 0) 0 0 / 51% 6px repeat-y, conic-gradient(from 225deg at 100% 50%, #000 90deg, transparent 0) 100% 0 / 51% 6px repeat-y; mask: conic-gradient(from 45deg at 0 50%, #000 90deg, transparent 0) 0 0 / 51% 6px repeat-y, conic-gradient(from 225deg at 100% 50%, #000 90deg, transparent 0) 100% 0 / 51% 6px repeat-y; }

/* ── Ink lines: loops, squiggles, arrows and rings drawn with a pen ──
   Always decoration: aria-hidden, no pointer events, never over copy. Ink on
   paper in light, cream chalk in dark. Two passes of the pen give the line
   its weight, heavier in the middle. */
.ink { position: absolute; z-index: 1; display: block; max-width: none; overflow: visible; pointer-events: none; fill: none; stroke: var(--ink-line, var(--graphite)); stroke-linecap: round; stroke-linejoin: round; opacity: .9; filter: url(#cite-pencil); --graphite: #45464C; }
:root[data-theme="dark"] .ink { --graphite: #CFC8B8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink { --graphite: #CFC8B8; } }
.ink .i1 { stroke-width: calc(var(--sw, 2.2) * 1.2); }
.ink .i2 { stroke-width: calc(var(--sw, 2.2) * .62); opacity: .75; }
.ink .ih { stroke-width: calc(var(--sw, 2.2) * 1.05); }
.ink.green { --ink-line: var(--green-ink); }
.js .ink path { stroke-dasharray: 1 1.05; stroke-dashoffset: 1.03; transition: stroke-dashoffset var(--dur, 1.3s) cubic-bezier(.55,.1,.25,1) var(--dd, 0ms); }
.js .ink .i2 { --dd: 180ms; }
.js .ink .ih { --dur: 320ms; --dd: 1150ms; }
.js .ink.in path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .ink path { stroke-dashoffset: 0; transition: none; } }

/* Idle sway and pointer lean (site/paper.js). The sway runs on translate, the
   lean on transform and the tilt on rotate, so none of them fight. */
.cut.sway { animation: cut-sway var(--sway-d, 7s) ease-in-out var(--sway-o, 0s) infinite alternate; transition: rotate 500ms var(--ease-spring), transform 900ms var(--ease-out); }
.cut.sway.off { animation-play-state: paused; }
@keyframes cut-sway { 0% { translate: 0 0; } 50% { translate: .8px -2.2px; } 100% { translate: -.6px .8px; } }
@media (prefers-reduced-motion: reduce) { .cut.sway { animation: none; } }

/* ── Printed on it, everywhere ──
   A status as a rubber stamp: a deeper ink so it reads on cream, the rim worn
   by the grain, set a touch off square. .plate.sm is the marketing cards'
   and the tools' small plate; .stamp is the same mark on anything else. */
.cut .plate.sm, .cut .stamp { --st: #137A48; height: 26px; padding: 0 10px 0 9px; gap: 6px; background: none; color: var(--st); border-radius: 4px 5px 3px 6px; box-shadow: inset 0 0 0 2px var(--st); rotate: -2.5deg; font-size: 11.5px; font-weight: 800; -webkit-mask: var(--stamp-grain) 0 0 / 120px 60px; mask: var(--stamp-grain) 0 0 / 120px 60px; }
.cut .plate.sm::before, .cut .stamp::before { background: currentColor; }
.cut .plate.sm.busy, .cut .plate.sm.queue, .cut .stamp.busy, .cut .stamp.queue { --st: #946006; }
.cut .plate.sm.sold, .cut .stamp.sold { --st: #AE2A31; }
.cut .plate.sm.closed, .cut .stamp.closed { --st: #67625A; }
.cut .plate.sm:nth-of-type(2n), .cut .stamp:nth-of-type(2n) { rotate: 1.8deg; }

/* Something that is its own printed thing (a poster, the app's own sheet)
   keeps its colours and is simply taped up, a little off square. */
.pinup { position: relative; rotate: var(--tilt, -1deg); filter: drop-shadow(0 1px .5px rgba(70,50,20,.2)) drop-shadow(0 14px 16px rgba(30,20,8,.28)); }
.pinup::after { z-index: 2; }

/* A pencil squiggle under a few words (paste/paper.js underlined()). */
.pencil-u { position: relative; display: inline-block; white-space: nowrap; }
.pencil-u > .ink { left: -3%; bottom: -.36em; width: 106%; height: .42em; --sw: 2.6; opacity: 1; }
/* In the tools the line is simply there: a screen that redraws often would draw it again and again. */
.js .pencil-u > .ink path { stroke-dashoffset: 0; transition: none; }

@media (prefers-reduced-motion: reduce) { .cut { transition: none; } }