/* Live Polls · Cut & Paste phone skin (owner decision 2026-10-06; the canvas's
   PR-Polls-CutAndPaste Phone and Anim boards). Every rule is scoped to
   #poll-content.poll-design.pld-cutAndPaste or
   #voted-message.poll-design.pld-cutAndPaste (or is the hidden-by-default
   .pcap-only), so no other screen or feature is touched; the classic screens
   (no .poll-design) never match.

   A photocopied collage zine: off-white copier paper with toner grain, the
   question on black label tape, each option a halftone paper strip in the
   display's colour for its place (black ink, a white letter tile cut like the
   display's), typed scraps for the status, a yellow label for the paused
   banner, and a green sticker with a marker tick for "Vote counted!" with the
   pick on its own strip. The cuts and tears are the boards' seeded generator,
   computed by cut-and-paste.js into the --pcap-* properties. The paper colour
   lives on these in-flow panels, never on html/body or a fixed element (the
   iOS 26 rule). Motion is the boards': strips pasted down one by one, tape
   fed in, the banner stapled. A stopped poll greys its strips to photocopy
   grey (a colour, never a lowered opacity). */

@font-face { font-family: 'Sidekick Trivia Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-archivo-black-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-anton-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Abril Fatface'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/abril-fatface-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Rubik Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-rubik-mono-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Special Elite'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-special-elite-regular-v1.woff2') format('woff2'); }

/* What cut-and-paste.js adds shows only in this design. */
.pcap-only { display: none; }

/* ── The paper panels ── */
#poll-content.poll-design.pld-cutAndPaste,
#voted-message.poll-design.pld-cutAndPaste {
    --pcap-ink: #111111; --pcap-paper: #EDEAE2; --pcap-white: #FFFFFF; --pcap-yellow: #FFE600;
    --pcap-mint: #32D38E; --pcap-grey: #E4E0D6; --pcap-grey-ink: #8E8A82; --pcap-grey-letter: #A8A49B;
    --pcap-archivo: 'Sidekick Trivia Archivo', 'Archivo', system-ui, sans-serif;
    --pcap-elite: 'Sidekick Trivia Special Elite', 'Courier New', monospace;
    --pcap-paste: cubic-bezier(0.3, 1.45, 0.55, 1);
    --pcap-feed: cubic-bezier(0.25, 1.25, 0.5, 1);
    --pcap-staple: cubic-bezier(0.2, 2.4, 0.5, 1);
    --pcap-draw: cubic-bezier(0.45, 0, 0.3, 1);
    --pcap-dots: radial-gradient(circle, rgba(0,0,0,0.12) 0 32%, transparent 36%) 0 0 / 12px 12px;
    /* The strips: the board's 98 px where the phone has room; with more
       options or a long question they share what's left (the panel is one
       screen tall), so the whole vote fits with no scrolling. Inside a
       strip everything is sized by its height (cqh). */
    --pcap-gap: 14px;

    position: relative;
    margin: -8px -14px;
    padding: 18px 16px 20px;
    height: calc(100dvh - 24px);
    border-radius: 4px;
    font-family: var(--pcap-archivo);
    font-weight: 900;
    color: var(--pcap-ink);
    text-align: left;
    /* Photocopy paper: toner grain (a seeded fractal noise, seed 8), a faint
       copier band and a darker edge. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 -0.21'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 280px 280px,
        linear-gradient(90deg, transparent 0 30%, rgba(0,0,0,0.04) 30.5% 31.2%, transparent 31.7%),
        radial-gradient(ellipse 90% 75% at 50% 40%, transparent 55%, rgba(0,0,0,0.14)),
        var(--pcap-paper);
    overflow: hidden;
}
#poll-content.poll-design.pld-cutAndPaste:has(#options > .option-btn:nth-child(5)) { --pcap-gap: 11px; }
#poll-content.poll-design.pld-cutAndPaste:has(#options > .option-btn:nth-child(7)) { --pcap-gap: 8px; }

/* The vote's pieces in the board's order: the question, the strips, then the
   status or (stopped) the paused banner in its place. */
#poll-content.poll-design.pld-cutAndPaste[style*="block"] { display: flex !important; flex-direction: column; }
#poll-content.poll-design.pld-cutAndPaste .question { order: 0; }
#poll-content.poll-design.pld-cutAndPaste .options { order: 1; }
#poll-content.poll-design.pld-cutAndPaste .stopped-banner { order: 2; }
#poll-content.poll-design.pld-cutAndPaste .status { order: 3; }

/* ── The question: black label tape, fed in from the left ── */
#poll-content.poll-design.pld-cutAndPaste .question {
    align-self: flex-start;
    position: relative; isolation: isolate;
    max-width: 300px; margin: 6px 0 22px 4px; padding: 10px 20px 14px;
    color: var(--pcap-white); font-family: var(--pcap-archivo); font-weight: 900;
    font-size: 30px; line-height: 1.08; letter-spacing: -0.3px;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
    transform: rotate(-2deg);
    animation: pcapFeed 0.5s var(--pcap-feed) both;
}
#poll-content.poll-design.pld-cutAndPaste .question.pcap-len-m { font-size: 25px; }
#poll-content.poll-design.pld-cutAndPaste .question.pcap-len-l { font-size: 21px; }
#poll-content.poll-design.pld-cutAndPaste .question::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pcap-ink); clip-path: var(--pcap-q);
}

/* ── The options: halftone paper strips, the whole strip the button ── */
#poll-content.poll-design.pld-cutAndPaste .options {
    flex: 0 1 auto; min-height: 0;
    gap: var(--pcap-gap); margin: 0 0 10px;
}
#poll-content.poll-design.pld-cutAndPaste .option-btn {
    position: relative; display: block;
    flex: 0 1 98px; min-height: 38px; container-type: size;
    width: 100%; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    color: var(--pcap-ink); text-align: left; opacity: 1;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.25));
    transition: transform 0.09s ease;
}
#poll-content.poll-design.pld-cutAndPaste .option-btn:active:not(:disabled) { transform: scale(0.94); }
#poll-content.poll-design.pld-cutAndPaste .option-btn:disabled { opacity: 1; cursor: default; transform: none; }
#poll-content.poll-design.pld-cutAndPaste .pcap-opt {
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: 14px; padding: 0 14px 0 14.3cqh;
    background: var(--pcap-dots), var(--c);
    transform: rotate(var(--pcap-rot));
    animation: pcapStrip 0.5s var(--pcap-paste) both;
}
#poll-content.poll-design.pld-cutAndPaste .option-btn:nth-child(even) .pcap-opt { animation-name: pcapStripR; }
#poll-content.poll-design.pld-cutAndPaste .pcap-letter,
#voted-message.poll-design.pld-cutAndPaste .pcap-letter {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 65.3cqh; height: 65.3cqh;
    background: var(--pcap-white); color: var(--pcap-ink);
    font-weight: 400; font-size: calc(65.3cqh * var(--pcap-lk)); line-height: 1;
    transform: rotate(var(--pcap-lrot));
}
#poll-content.poll-design.pld-cutAndPaste .pcap-name,
#voted-message.poll-design.pld-cutAndPaste .pcap-name {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--pcap-archivo); font-weight: 900;
    font-size: min(29px, 33cqh); line-height: 1.04;
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow-wrap: anywhere;
}
#poll-content.poll-design.pld-cutAndPaste .pcap-len-m .pcap-name { font-size: min(24px, 28cqh); }
#poll-content.poll-design.pld-cutAndPaste .pcap-len-l .pcap-name { font-size: min(20px, 24cqh); }
@keyframes pcapStrip { from { transform: translate(-80px, 900px) rotate(-14deg) scale(1.3); } }
@keyframes pcapStripR { from { transform: translate(80px, 900px) rotate(14deg) scale(1.3); } }
@keyframes pcapFeed { from { transform: translateX(-500px) rotate(-6deg); } }

/* Stopped (the paused banner up): the strips are photocopied grey. */
#poll-content.poll-design.pld-cutAndPaste .stopped-banner.show ~ .options .pcap-opt {
    background: radial-gradient(circle, rgba(0,0,0,0.1) 0 32%, transparent 36%) 0 0 / 12px 12px, var(--pcap-grey);
    color: var(--pcap-grey-ink);
    animation: pcapGrey 0.2s ease both;
}
#poll-content.poll-design.pld-cutAndPaste .stopped-banner.show ~ .options .pcap-letter { color: var(--pcap-grey-letter); }
@keyframes pcapGrey { from { background: var(--pcap-dots), var(--c); color: var(--pcap-ink); } }

/* ── The paused banner: a yellow label stapled down where the status was ── */
#poll-content.poll-design.pld-cutAndPaste .stopped-banner.show {
    align-self: center;
    display: flex; align-items: center; gap: 12px;
    width: 300px; max-width: 100%; margin: 14px 0 0; padding: 10px 18px 13px;
    background: var(--pcap-yellow); color: var(--pcap-ink); border: 0; border-radius: 0;
    font-family: var(--pcap-archivo); font-weight: 900; font-size: 18px; line-height: 1.15;
    clip-path: var(--pcap-ban);
    transform: rotate(-1.5deg);
    animation: pcapStaple 0.34s var(--pcap-staple) both;
}
#poll-content.poll-design.pld-cutAndPaste .stopped-banner.show::before {
    content: ''; flex: 0 0 auto; width: 22px; height: 26px;
    background: linear-gradient(90deg, var(--pcap-ink) 0 36%, transparent 36% 64%, var(--pcap-ink) 64%);
}
@keyframes pcapStaple { from { transform: translateY(-30px) rotate(-11.5deg) scale(1.5); } }

/* ── The status: a typed scrap ── */
#poll-content.poll-design.pld-cutAndPaste .status {
    align-self: center;
    position: relative; isolation: isolate;
    margin: 14px 0 0; padding: 10px 18px 12px;
    color: var(--pcap-ink); opacity: 1;
    font-family: var(--pcap-elite); font-weight: 400; font-size: 19px; line-height: 1.2; white-space: nowrap;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
    transform: rotate(-1.5deg);
    animation: pcapNote 0.42s var(--pcap-paste) 0.6s both;
}
#poll-content.poll-design.pld-cutAndPaste .status::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pcap-white); clip-path: var(--pcap-note);
}
#poll-content.poll-design.pld-cutAndPaste .status:empty { display: none; }
@keyframes pcapNote { from { transform: translateY(600px) rotate(-9.5deg) scale(1.3); } }

/* ── "Vote counted!": a green sticker with a marker tick, black tape, the
   pick on its strip and a typed thank-you ── */
#voted-message.poll-design.pld-cutAndPaste.show {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: max(40px, 12dvh); text-align: center;
}
#voted-message.poll-design.pld-cutAndPaste .checkmark {
    position: relative; width: 200px; height: 200px; margin: 0 0 32px;
    font-size: 0; color: transparent;
    filter: drop-shadow(5px 6px 0 rgba(0,0,0,0.22));
    animation: pcapSticker 0.5s var(--pcap-paste) both;
}
#voted-message.poll-design.pld-cutAndPaste .checkmark::before {
    content: ''; position: absolute; inset: 0;
    background: var(--pcap-dots), var(--pcap-mint); clip-path: var(--pcap-ck);
}
#voted-message.poll-design.pld-cutAndPaste .pcap-tick {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    fill: none; stroke: var(--pcap-ink); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round;
}
#voted-message.poll-design.pld-cutAndPaste .pcap-tick path {
    stroke-dasharray: 220; stroke-dashoffset: 0;
    animation: pcapTick 0.35s var(--pcap-draw) 0.3s both;
}
@keyframes pcapSticker { from { transform: rotate(-200deg) scale(0); } }
@keyframes pcapTick { from { stroke-dashoffset: 220; } }
#voted-message.poll-design.pld-cutAndPaste h2 {
    position: relative; isolation: isolate;
    margin: 0 0 22px; padding: 10px 24px 14px;
    color: var(--pcap-white); font-family: var(--pcap-archivo); font-weight: 900; font-size: 36px; line-height: 1;
    white-space: nowrap;
    filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.22));
    transform: rotate(-2.5deg);
    animation: pcapFeed 0.5s var(--pcap-feed) 0.3s both;
}
#voted-message.poll-design.pld-cutAndPaste h2::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pcap-ink); clip-path: var(--pcap-vt);
}
#voted-message.poll-design.pld-cutAndPaste .voted-pick:not(:empty) {
    container-type: size;
    width: min(320px, 100%); height: 74px; margin: 0 0 22px;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.25));
    animation: pcapStrip 0.5s var(--pcap-paste) 0.45s both;
}
#voted-message.poll-design.pld-cutAndPaste .pcap-pick {
    display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 14px 0 11px;
    background: var(--pcap-dots), var(--c); clip-path: var(--pcap-pick); color: var(--pcap-ink);
    text-align: left; transform: rotate(1deg);
}
#voted-message.poll-design.pld-cutAndPaste .pcap-pick .pcap-name { font-size: 25px; }
#voted-message.poll-design.pld-cutAndPaste .pcap-pick.pcap-len-m .pcap-name { font-size: 21px; }
#voted-message.poll-design.pld-cutAndPaste .pcap-pick.pcap-len-l .pcap-name { font-size: 17px; }
#voted-message.poll-design.pld-cutAndPaste p {
    position: relative; isolation: isolate;
    margin: 0; padding: 12px 22px 15px;
    color: var(--pcap-ink); font-family: var(--pcap-elite); font-weight: 400; font-size: 20px; line-height: 1.2;
    white-space: nowrap;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
    transform: rotate(1.2deg);
    animation: pcapNote 0.5s var(--pcap-paste) 0.5s both;
}
#voted-message.poll-design.pld-cutAndPaste p::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pcap-white); clip-path: var(--pcap-note);
}

/* A short screen (an SE-sized phone with its toolbars): tighter paper. */
@media (max-height: 700px) {
    #poll-content.poll-design.pld-cutAndPaste { padding-top: 10px; }
    #poll-content.poll-design.pld-cutAndPaste .question { font-size: 25px; margin-bottom: 16px; padding: 8px 16px 11px; }
    #poll-content.poll-design.pld-cutAndPaste .question.pcap-len-m { font-size: 22px; }
    #poll-content.poll-design.pld-cutAndPaste .question.pcap-len-l { font-size: 19px; }
    #poll-content.poll-design.pld-cutAndPaste .status { margin-top: 10px; font-size: 17px; }
    #voted-message.poll-design.pld-cutAndPaste .checkmark { width: 160px; height: 160px; margin-bottom: 24px; }
    #voted-message.poll-design.pld-cutAndPaste h2 { font-size: 32px; margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    #poll-content.poll-design.pld-cutAndPaste *, #voted-message.poll-design.pld-cutAndPaste * { animation: none !important; transition: none !important; }
    #voted-message.poll-design.pld-cutAndPaste .pcap-tick path { stroke-dashoffset: 0; }
}