/* Paper cut-outs and ink lines for the marketing pages (index, business,
   organisers, sell, about): what is printed on the cards that act out a
   feature. The paper itself (the sheet, its tears and tape, the ink lines and
   the sway) is shared with the operator tools and lives in paste/paper.css,
   imported here. The real store screenshots are never cut. */
@import url("/paste/paper.css");

/* Pointing at a plate straightens its paper, as a hand would. */
@media (hover: hover) { .acts:hover .cut, .cut.acts:hover { rotate: calc(var(--tilt, -.9deg) * .25); } }
.acts:focus-visible .cut { rotate: 0deg; }

/* ── What is printed on it ── */
.cut .small, .cut .lbl, .cut .kick { color: var(--ink3); }
.cut .meta, .cut .ago { color: var(--ink3); }

/* Chips: ink drawn by hand, a little off, with a second pass of the pen. */
.cut .chip { position: relative; height: 32px; padding: 0 12px; background: transparent; color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1.4px rgba(29,31,34,.72); border-radius: 18px 13px 19px 12px / 13px 19px 12px 18px; }
.cut .chip:nth-child(3n+2) { border-radius: 13px 19px 12px 18px / 18px 12px 19px 13px; }
.cut .chip:nth-child(3n) { border-radius: 16px 20px 14px 17px / 20px 14px 17px 15px; }
.cut .chip::after { content: ''; position: absolute; inset: -1.5px -.5px -.5px -2px; border-radius: 14px 20px 13px 19px / 19px 13px 20px 14px; box-shadow: inset 0 0 0 1px rgba(29,31,34,.3); rotate: -1.4deg; pointer-events: none; }
.cut .chip[aria-pressed="true"] { background: #1D1F22; color: var(--paper); box-shadow: none; rotate: -1.5deg; text-shadow: none; }
.cut .chip[aria-pressed="true"]::after { box-shadow: inset 0 0 0 1.2px rgba(29,31,34,.55); rotate: 2deg; inset: -2.5px -2px -1.5px -3px; }
@media (hover: hover) { .cut .chip:hover { color: var(--ink); background: rgba(29,31,34,.06); } .cut .chip[aria-pressed="true"]:hover { color: var(--paper); background: #1D1F22; } }

/* Buttons: an ink-filled shape with the pen line drawn round it again. */
.cut .btn { position: relative; background: #1D1F22; color: var(--paper); box-shadow: none; border-radius: 26px 18px 24px 16px / 18px 24px 16px 26px; text-shadow: none; }
.cut .btn::after { content: ''; position: absolute; inset: -3px -2px -2px -3px; border-radius: 20px 26px 18px 24px / 24px 18px 26px 20px; box-shadow: inset 0 0 0 1.2px rgba(29,31,34,.5); rotate: .8deg; pointer-events: none; }
@media (hover: hover) { .cut .btn:hover { background: #33302B; } }

/* Status: the big ones are enamel plates with a rim; the small ones are
   rubber stamps, in a deeper ink so they read on paper. */
.cut .plate { background-image: linear-gradient(172deg, rgba(255,255,255,.32), rgba(255,255,255,0) 46%, rgba(0,0,0,.06)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.34), 0 0 0 2.5px var(--paper), 0 0 0 4px rgba(29,31,34,.62), 0 7px 10px -6px rgba(40,25,5,.55); text-shadow: none; }

/* The countdown: a pencil box filled with hatching. */
.cut .drain { height: 10px; background: transparent; border-radius: 6px 3px 5px 4px / 4px 6px 3px 5px; box-shadow: inset 0 0 0 1.3px rgba(29,31,34,.7); }
.cut .drain i { inset: 2px; border-radius: 3px; background: repeating-linear-gradient(-58deg, var(--green-ink) 0 2px, transparent 2px 4.4px); }

.cut .tag { background: none; color: var(--ink2); border-radius: 3px; box-shadow: none; outline: 1.3px dashed rgba(29,31,34,.5); outline-offset: -1.3px; }
.cut .av { box-shadow: 0 0 0 1.3px #1D1F22; text-shadow: none; }
.cut .avs .av { box-shadow: 0 0 0 1.3px #1D1F22, 0 0 0 3px var(--paper); }
.cut .sdot { box-shadow: 0 0 0 1.3px #1D1F22; }
.cut .stars { color: #946006; }
.cut .link { color: var(--ink); }
.cut .srch { background: none; border-radius: 0; box-shadow: inset 0 -1.6px 0 rgba(29,31,34,.75); padding: 0 4px; }
.cut .res.on { border-radius: 2px 8px 3px 6px; }

/* A squiggle under a few key words, in place of the marker. */
.sq { position: relative; white-space: nowrap; }
.sq .ink { left: -3%; width: 106%; bottom: -.2em; height: .3em; --sw: 2.4; --dur: 900ms; }
.display .sq .ink { bottom: -.03em; height: .2em; --sw: 2.2; }

/* A scribbled ring round the live pin. */
.ringed { position: relative; display: inline-grid; flex: none; }
.ringed > .ink { left: -40%; top: -44%; width: 172%; height: 188%; --sw: 3; --dur: 1s; }
.cut .tag { height: auto; min-height: 24px; padding: 3px 9px; line-height: 1.3; }

/* Small type, raised to where it reads (marketing pages). */
.ago, .tag, .fig { font-size: 13px; }
.cut .meta, .cut .ago { font-size: 13.5px; }
.cut .small { font-size: 14px; }
.cut .chip { font-size: 14px; }
.hero-split .note, .sell-hero .note { font-size: 15.5px; }
.ptag li { font-size: 15.5px; }
.readout dt { font-size: 13.5px; } .readout dd { font-size: 15px; }