/* Live Polls · School Locker phone skin ("Hall Pass", owner decision
   2026-10-07), from the Holiday Themes canvas boards SC-Polls-Phone and
   -Anim: a teal locker door with its number plate and vents, the question on
   a whiteboard, the options on ruled index cards each swiped with its
   highlighter, "Vote counted!" in marker under a gold star, and a pink
   "Paused" slip. Every rule is scoped to #poll-content.poll-design.pld-schoolLocker
   or #voted-message.poll-design.pld-schoolLocker, so no other screen or
   feature is touched; the classic screens (no .poll-design) never match.

   /poll-designs/school-locker.js letters each option on a steel plate
   (optionHTML), draws the pick on "Vote counted!" (votedPickHTML), and marks
   which entrances play (.slp-enter: only when a poll arrives, never on a
   snapshot that only re-renders the same screen).

   The Stop: the paused slip pops on over 0.45 s with no delay
   (PollsSchoolLockerDesign.phoneStopEntrance, 0.45 s; the tests read it).
   The Mac holds it for the display's A+ stamp less that (stopDelayMs), so it
   lands with the projector. The projector never shows a paused label.

   The faces are the Mac's bundled ones, self-hosted (licences in /fonts/);
   the colours are ShowThemePalettes.swift's SchoolLockerPalette (the eight
   highlighters by place, one ink). The locker colour lives on these in-flow
   panels, never on html/body or a fixed element (the iOS 26 rule). */

@font-face { font-family: 'Graduate'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/graduate-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-permanent-marker-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-extra-bold-v1.woff2') format('woff2'); }

/* ── The panels: a locker door ── */
#poll-content.poll-design.pld-schoolLocker,
#voted-message.poll-design.pld-schoolLocker {
    --slp-ink: #14202B; --slp-paper: #FFFDF5; --slp-red: #E0313B; --slp-white: #F6F8F9;
    --slp-grey: #B9C2C7; --slp-grey-ink: #6E7C86; --slp-gold: #FFC531;
    --slp-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --slp-rag: polygon(0.6% 6%, 2% 0%, 30% 1.5%, 60% 0.5%, 97.6% 2%, 100% 9%, 98.7% 21%, 100% 34%, 98.9% 49%, 100% 63%, 98.6% 77%, 100% 89%, 97.4% 100%, 60% 98.5%, 25% 100%, 1.4% 97.5%, 0% 86%, 0.8% 50%);
    position: relative;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif;
    font-weight: 800;
    color: var(--slp-white);
    text-align: center;
    margin: -8px -4px 0;
    padding: 46px 14px 64px;
    /* The panel fills the phone between the page's margins. */
    min-height: calc(100vh - 112px);
    min-height: calc(100dvh - 112px);
    box-sizing: border-box;
    border-radius: 26px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 7%, rgba(0,0,0,0) 93%, rgba(0,0,0,0.25)),
        linear-gradient(180deg, #1F636B 0%, #18535A 55%, #134449 100%);
    box-shadow: inset 0 0 0 3px #0B2B30;
    overflow: hidden;
}
/* The vote screen stacks: the question, the options, the status, and the
   paused slip at the foot (index.html shows the panel with an inline
   display: block, which this keeps). */
#poll-content.poll-design.pld-schoolLocker[style*="block"] {
    display: flex !important; flex-direction: column; align-items: stretch;
}
/* The locker's number plate (top right) and its vents (the foot). */
#poll-content.poll-design.pld-schoolLocker::before,
#voted-message.poll-design.pld-schoolLocker::before {
    content: '214';
    position: absolute; right: 22px; top: 14px; z-index: 0;
    width: 46px; height: 20px; box-sizing: border-box;
    border-radius: 3px; background: #AEB7BE; border: 2px solid #0B2B30;
    font-family: 'Graduate', serif; font-weight: 400; font-size: 12px; line-height: 17px;
    text-align: center; color: #22303A;
}
#poll-content.poll-design.pld-schoolLocker::after,
#voted-message.poll-design.pld-schoolLocker::after {
    content: '';
    position: absolute; left: 50%; bottom: 18px; margin-left: -71px; z-index: 0;
    width: 142px; height: 32px;
    background: repeating-linear-gradient(180deg, #0A2427 0 6px, rgba(255,255,255,0.08) 6px 8px, transparent 8px 13px);
    border-radius: 3px;
    pointer-events: none;
}

/* The options' highlighters by place (the host's colours are ignored). */
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="0"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="0"] { --slp-c: #FFE94A; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="1"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="1"] { --slp-c: #FF77B7; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="2"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="2"] { --slp-c: #6FEA84; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="3"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="3"] { --slp-c: #62C9FF; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="4"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="4"] { --slp-c: #FFA54C; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="5"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="5"] { --slp-c: #C29BFF; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="6"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="6"] { --slp-c: #4FE6D2; }
#poll-content.poll-design.pld-schoolLocker .option-btn[data-index="7"], #voted-message.poll-design.pld-schoolLocker .slp-pick[data-index="7"] { --slp-c: #FF8473; }

/* ── The question on a whiteboard in its steel frame ── */
#poll-content.poll-design.pld-schoolLocker .question {
    order: 1; position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 168px; margin: 0 4px 24px; padding: 10px 14px;
    box-sizing: border-box;
    border: 12px solid transparent; border-radius: 14px;
    background:
        linear-gradient(118deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 52%) padding-box,
        radial-gradient(ellipse 26% 18% at 16% 80%, rgba(110,130,150,0.10), transparent 70%) padding-box,
        linear-gradient(#F3F6F8, #F3F6F8) padding-box,
        linear-gradient(180deg, #F4F6F8 0%, #B5BDC4 48%, #E2E6E9 100%) border-box;
    box-shadow: 0 0 0 2px #75808A, inset 0 3px 8px rgba(0,0,0,0.20), 0 14px 24px rgba(0,0,0,0.45);
    color: var(--slp-ink);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800;
    font-size: 27px; line-height: 1.12; overflow-wrap: anywhere;
}
#poll-content.poll-design.pld-schoolLocker .question.slp-long { font-size: 21px; }

/* ── The options: ruled index cards, each swiped with its highlighter ── */
#poll-content.poll-design.pld-schoolLocker .options {
    order: 2; position: relative; z-index: 1; gap: 16px; margin: 0 4px;
}
#poll-content.poll-design.pld-schoolLocker .option-btn {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 76px; padding: 6px 14px 6px 12px;
    box-sizing: border-box; text-align: left;
    background-color: var(--slp-paper);
    background-image:
        linear-gradient(180deg, transparent 0 16px, rgba(229,72,77,0.55) 16px 19px, transparent 19px),
        repeating-linear-gradient(180deg, transparent 0 34px, rgba(74,134,200,0.26) 34px 36px);
    border: none; border-radius: 6px;
    box-shadow: 0 9px 0 rgba(4,16,19,0.55);
    color: var(--slp-ink);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800;
    font-size: 23px; line-height: 1.08; overflow-wrap: anywhere;
    opacity: 1;
    transform: rotate(var(--slp-rot, 0deg));
    transition: transform 0.12s, box-shadow 0.12s;
}
#poll-content.poll-design.pld-schoolLocker .option-btn:nth-child(4n+1) { --slp-rot: -0.6deg; }
#poll-content.poll-design.pld-schoolLocker .option-btn:nth-child(4n+2) { --slp-rot: 0.5deg; }
#poll-content.poll-design.pld-schoolLocker .option-btn:nth-child(4n+3) { --slp-rot: -0.4deg; }
#poll-content.poll-design.pld-schoolLocker .option-btn:nth-child(4n) { --slp-rot: 0.6deg; }
/* The highlighter stroke across the card (ragged ends, multiplied onto the
   ruled paper so the rules show through). */
#poll-content.poll-design.pld-schoolLocker .option-btn::before {
    content: ''; position: absolute; left: 8px; top: 8px; right: 8px; bottom: 8px; z-index: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20) 0 10%, rgba(255,255,255,0) 10% 86%, rgba(0,0,0,0.05) 86%),
        var(--slp-c, #FFE94A);
    opacity: 0.92; mix-blend-mode: multiply;
    clip-path: var(--slp-rag);
    transform-origin: left center;
}
#poll-content.poll-design.pld-schoolLocker .option-btn > * { position: relative; z-index: 1; }
#poll-content.poll-design.pld-schoolLocker .slp-letter,
#voted-message.poll-design.pld-schoolLocker .slp-letter {
    flex: 0 0 auto; width: 44px; height: 40px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding-top: 2px;
    border-radius: 7px; border: 3px solid #2E3840;
    background: linear-gradient(180deg, #F4F6F8 0%, #C2C9CF 56%, #E3E7EA 100%);
    box-shadow: 0 4px 0 rgba(0,0,0,0.35);
    color: var(--slp-ink);
    font-family: 'Graduate', serif; font-weight: 400; font-size: 24px; line-height: 1;
}
#poll-content.poll-design.pld-schoolLocker .option-btn .slp-text { flex: 1 1 auto; min-width: 0; }
#poll-content.poll-design.pld-schoolLocker .option-btn.slp-long { font-size: 19px; }
#poll-content.poll-design.pld-schoolLocker .option-btn:active:not(:disabled) {
    transform: rotate(var(--slp-rot, 0deg)) translateY(5px); box-shadow: 0 4px 0 rgba(4,16,19,0.55);
}
#poll-content.poll-design.pld-schoolLocker .option-btn:disabled { opacity: 1; cursor: default; }
/* Stopped: pencils down. The cards grey out and their highlighters lift. */
#poll-content.poll-design.pld-schoolLocker .stopped-banner.show ~ .options .option-btn {
    background-color: var(--slp-grey);
    background-image:
        linear-gradient(180deg, transparent 0 16px, rgba(160,80,80,0.25) 16px 19px, transparent 19px),
        repeating-linear-gradient(180deg, transparent 0 34px, rgba(90,110,130,0.18) 34px 36px);
    color: var(--slp-grey-ink);
    animation: slpGrey 0.3s ease both;
}
#poll-content.poll-design.pld-schoolLocker .stopped-banner.show ~ .options .option-btn::before {
    animation: slpLift 0.3s ease both;
}

/* ── The status line ── */
#poll-content.poll-design.pld-schoolLocker .status {
    order: 3; position: relative; z-index: 1;
    margin: 0; padding: 28px 6px 0;
    color: #FFFFFF;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700; font-size: 21px; line-height: 26px;
}
#poll-content.poll-design.pld-schoolLocker .status:empty { display: none; }

/* ── Paused: a pink slip at the foot (it lands on the display's A+) ── */
#poll-content.poll-design.pld-schoolLocker .stopped-banner.show {
    order: 4; position: relative; z-index: 5;
    display: grid; grid-template-columns: 58px 1fr; column-gap: 14px; row-gap: 4px; align-items: center;
    margin: auto -2px 0; padding: 14px 16px;
    background:
        repeating-linear-gradient(180deg, transparent 0 26px, rgba(120,20,40,0.18) 26px 28px),
        #FF8FB0;
    border: none; border-radius: 2px;
    box-shadow: 0 8px 0 rgba(4,16,19,0.55);
    color: var(--slp-ink);
    text-align: left; font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700;
    font-size: 18px; line-height: 1.2;
    transform: rotate(-2.5deg);
    animation: slpSlip 0.45s 0s var(--slp-back) both;
}
#poll-content.poll-design.pld-schoolLocker .stopped-banner.show::before {
    content: ''; grid-column: 1; grid-row: 1 / span 2;
    width: 58px; height: 58px; border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) no-repeat calc(50% - 8px) 50% / 8px 24px,
        linear-gradient(#fff, #fff) no-repeat calc(50% + 8px) 50% / 8px 24px,
        var(--slp-red);
}
#poll-content.poll-design.pld-schoolLocker .stopped-banner.show::after {
    content: 'Paused'; grid-column: 2; grid-row: 1;
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 36px; line-height: 1;
    color: var(--slp-ink);
}

/* ── Vote counted! ── */
#voted-message.poll-design.pld-schoolLocker.show { display: block; }
/* A few hole-punch dots and rings down the sides. */
#voted-message.poll-design.pld-schoolLocker {
    background:
        radial-gradient(circle at 9% 17%, #FFFDF5 0 8px, transparent 9px),
        radial-gradient(circle at 7% 25%, #FFFDF5 0 11px, transparent 12px),
        radial-gradient(circle at 91% 13%, transparent 0 7px, #F4F7F8 8px 13px, transparent 14px),
        radial-gradient(circle at 93% 19%, #4FE6D2 0 9px, transparent 10px),
        radial-gradient(circle at 93% 23%, #FF77B7 0 9px, transparent 10px),
        radial-gradient(circle at 6% 80%, #FFFDF5 0 8px, transparent 9px),
        radial-gradient(circle at 9% 85%, #FFE94A 0 9px, transparent 10px),
        radial-gradient(circle at 94% 79%, #FFFDF5 0 9px, transparent 10px),
        radial-gradient(circle at 92% 85%, transparent 0 7px, #F4F7F8 8px 13px, transparent 14px),
        linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 7%, rgba(0,0,0,0) 93%, rgba(0,0,0,0.25)),
        linear-gradient(180deg, #1F636B 0%, #18535A 55%, #134449 100%);
    padding-top: 64px;
}
/* The gold star with its check (the check is drawn on). */
#voted-message.poll-design.pld-schoolLocker .checkmark {
    position: relative; z-index: 1; width: 200px; height: 200px; margin: 0 auto 6px;
    font-size: 0; color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,6 62.3,37 95.7,39.2 70,60.5 78.2,92.8 50,75 21.8,92.8 30,60.5 4.3,39.2 37.7,37' fill='rgba(0,0,0,0.35)' transform='translate(2 4)'/%3E%3Cpolygon points='50,6 62.3,37 95.7,39.2 70,60.5 78.2,92.8 50,75 21.8,92.8 30,60.5 4.3,39.2 37.7,37' fill='%23FFC531' stroke='%23A86F00' stroke-width='3' stroke-linejoin='round'/%3E%3Cpolygon points='46,26 51.9,39.9 66.9,41.2 55.5,51.1 58.9,65.8 46,58 33.1,65.8 36.5,51.1 25.1,41.2 40.1,39.9' fill='%23FFE27A'/%3E%3Cpolygon points='50,18 59.4,41.1 84.2,42.9 65.2,58.9 71.2,83.1 50,70 28.8,83.1 34.8,58.9 15.8,42.9 40.6,41.1' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    transform: rotate(-6deg);
}
#voted-message.poll-design.pld-schoolLocker .checkmark::after {
    content: ''; position: absolute; left: 28%; top: 26%; width: 45%; height: 45%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' overflow='visible'%3E%3Cpath d='M10 52 C20 60 30 70 38 84 C52 54 70 30 94 8' fill='none' stroke='%2314202B' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
#voted-message.poll-design.pld-schoolLocker h2 {
    position: relative; z-index: 1;
    margin: 0 0 30px; color: #FFFFFF;
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 46px; line-height: 1.05;
    white-space: nowrap;
    transform: rotate(-3deg);
}
/* The pick: its letter plate and text on its highlighter-coloured card. */
#voted-message.poll-design.pld-schoolLocker .voted-pick:not(:empty) {
    position: relative; z-index: 1; display: flex; justify-content: center; margin: 0 0 30px;
}
#voted-message.poll-design.pld-schoolLocker .slp-pick {
    display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-width: 220px;
    min-height: 74px; padding: 0 16px 0 12px; box-sizing: border-box;
    background: linear-gradient(180deg, transparent 0 16px, rgba(229,72,77,0.55) 16px 19px, transparent 19px), var(--slp-c, #FFE94A);
    border-radius: 6px; box-shadow: 0 9px 0 rgba(4,16,19,0.55);
    color: var(--slp-ink);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 23px; line-height: 1.1;
    text-align: left; overflow-wrap: anywhere;
    transform: rotate(-2deg);
}
#voted-message.poll-design.pld-schoolLocker p {
    position: relative; z-index: 1;
    color: #FFFFFF; opacity: 1;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700; font-size: 21px; line-height: 26px;
}

/* ── Entrances ──
   The vote screen's only when a poll arrives (.slp-enter, set by
   school-locker.js); "Vote counted!" each time it shows. */
#poll-content.poll-design.pld-schoolLocker.slp-enter .question { animation: slpBoard 0.7s 0.3s var(--slp-back) both; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn { animation: slpDeal 0.7s 0.5s var(--slp-back) both; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn::before { animation: slpSwipe 0.4s 1s ease-in-out both; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(2) { animation-delay: 0.6s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(2)::before { animation-delay: 1.1s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(3) { animation-delay: 0.7s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(3)::before { animation-delay: 1.2s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(4) { animation-delay: 0.8s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(4)::before { animation-delay: 1.3s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(5) { animation-delay: 0.9s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(5)::before { animation-delay: 1.4s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(6) { animation-delay: 1s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(6)::before { animation-delay: 1.5s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(7) { animation-delay: 1.1s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(7)::before { animation-delay: 1.6s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(8) { animation-delay: 1.2s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .option-btn:nth-child(8)::before { animation-delay: 1.7s; }
#poll-content.poll-design.pld-schoolLocker.slp-enter .status { animation: slpRise 0.7s 1.4s var(--slp-back) both; }
#voted-message.poll-design.pld-schoolLocker.show .checkmark { animation: slpSticker 0.45s var(--slp-back) both; }
#voted-message.poll-design.pld-schoolLocker.show .checkmark::after { animation: slpDraw 0.35s 0.4s ease-in-out both; }
#voted-message.poll-design.pld-schoolLocker.show h2 { animation: slpPop 0.6s 0.1s var(--slp-back) both; }
#voted-message.poll-design.pld-schoolLocker.show .voted-pick { animation: slpPopPick 0.6s 0.2s var(--slp-back) both; }
#voted-message.poll-design.pld-schoolLocker.show p { animation: slpRise 0.6s 0.4s var(--slp-back) both; }

@keyframes slpBoard { from { transform: translateY(-700px); } }
@keyframes slpDeal { from { transform: translateY(900px) rotate(10deg); } }
@keyframes slpSwipe { from { transform: scaleX(0); } }
@keyframes slpRise { from { transform: translateY(300px); } }
@keyframes slpPop { from { transform: rotate(-3deg) scale(0); } }
@keyframes slpPopPick { from { transform: rotate(-2deg) scale(0); } }
@keyframes slpSticker { from { transform: rotate(-206deg) scale(0); } to { transform: rotate(-6deg) scale(1); } }
@keyframes slpDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slpSlip { from { transform: rotate(-32.5deg) scale(0); } to { transform: rotate(-2.5deg) scale(1); } }
@keyframes slpGrey { from { background-color: var(--slp-paper); color: var(--slp-ink); } }
@keyframes slpLift { to { transform: scaleX(0); } }

/* ── More options: everything still fits one screen ── */
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .question { min-height: 128px; margin-bottom: 18px; font-size: 23px; }
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .question.slp-long { font-size: 18px; }
#poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(5)) { gap: 11px; }
#poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(5)) .option-btn { min-height: 60px; font-size: 20px; box-shadow: 0 6px 0 rgba(4,16,19,0.55); }
#poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) { gap: 8px; }
#poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) .option-btn { min-height: 50px; font-size: 18px; padding: 4px 12px 4px 8px; }
#poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) .slp-letter { width: 36px; height: 32px; font-size: 19px; }
#poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) .option-btn::before { top: 5px; bottom: 5px; }
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(7)) .question { min-height: 104px; font-size: 20px; padding: 6px 10px; border-width: 10px; }
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(7)) .question.slp-long { font-size: 16px; }
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .status { padding-top: 16px; }
/* A compact slip under five or more options. */
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .stopped-banner.show {
    grid-template-columns: 40px 1fr; column-gap: 10px; row-gap: 2px; padding: 8px 12px; font-size: 14px;
}
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .stopped-banner.show::before {
    width: 40px; height: 40px;
    background:
        linear-gradient(#fff, #fff) no-repeat calc(50% - 6px) 50% / 6px 16px,
        linear-gradient(#fff, #fff) no-repeat calc(50% + 6px) 50% / 6px 16px,
        var(--slp-red);
}
#poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .stopped-banner.show::after { font-size: 26px; }

/* ── Shorter phones ── */
@media (max-height: 740px) {
    #poll-content.poll-design.pld-schoolLocker,
    #voted-message.poll-design.pld-schoolLocker { padding: 40px 12px 54px; }
    #poll-content.poll-design.pld-schoolLocker::after,
    #voted-message.poll-design.pld-schoolLocker::after { bottom: 12px; height: 26px; }
    #poll-content.poll-design.pld-schoolLocker .question { min-height: 118px; margin-bottom: 16px; font-size: 22px; border-width: 10px; }
    #poll-content.poll-design.pld-schoolLocker .question.slp-long { font-size: 18px; }
    #poll-content.poll-design.pld-schoolLocker .options { gap: 11px; }
    #poll-content.poll-design.pld-schoolLocker .option-btn { min-height: 60px; font-size: 20px; }
    #poll-content.poll-design.pld-schoolLocker .option-btn.slp-long { font-size: 16px; }
    #poll-content.poll-design.pld-schoolLocker .status { padding-top: 16px; font-size: 18px; line-height: 22px; }
    #poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .question { min-height: 84px; margin-bottom: 12px; font-size: 18px; padding: 4px 10px; border-width: 8px; }
    #poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .question.slp-long { font-size: 15px; }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(5)) { gap: 7px; }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(5)) .option-btn { min-height: 46px; font-size: 17px; padding: 3px 10px 3px 6px; box-shadow: 0 5px 0 rgba(4,16,19,0.55); }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(5)) .option-btn::before { top: 4px; bottom: 4px; }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(5)) .slp-letter { width: 34px; height: 30px; font-size: 18px; border-width: 2px; }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) { gap: 5px; }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) .option-btn { min-height: 36px; font-size: 14px; box-shadow: 0 4px 0 rgba(4,16,19,0.55); }
    #poll-content.poll-design.pld-schoolLocker .options:has(> :nth-child(7)) .slp-letter { width: 28px; height: 25px; font-size: 15px; }
    #poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(7)) .question { min-height: 56px; font-size: 15px; border-width: 7px; }
    #poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(7)) .question.slp-long { font-size: 13px; }
    #poll-content.poll-design.pld-schoolLocker:has(.options > :nth-child(5)) .status { padding-top: 10px; font-size: 16px; }
    #poll-content.poll-design.pld-schoolLocker:not(:has(.options > :nth-child(5))) .stopped-banner.show { padding: 10px 12px; grid-template-columns: 48px 1fr; }
    #poll-content.poll-design.pld-schoolLocker:not(:has(.options > :nth-child(5))) .stopped-banner.show::before { width: 48px; height: 48px; }
    #poll-content.poll-design.pld-schoolLocker:not(:has(.options > :nth-child(5))) .stopped-banner.show::after { font-size: 30px; }
    #voted-message.poll-design.pld-schoolLocker { padding-top: 46px; }
    #voted-message.poll-design.pld-schoolLocker .checkmark { width: 160px; height: 160px; }
    #voted-message.poll-design.pld-schoolLocker h2 { font-size: 40px; margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    #poll-content.poll-design.pld-schoolLocker *, #poll-content.poll-design.pld-schoolLocker *::before,
    #poll-content.poll-design.pld-schoolLocker *::after,
    #voted-message.poll-design.pld-schoolLocker *, #voted-message.poll-design.pld-schoolLocker *::after {
        animation: none !important; transition: none !important;
    }
    /* Stopped cards still grey (no movement, just there). */
    #poll-content.poll-design.pld-schoolLocker .stopped-banner.show ~ .options .option-btn::before { visibility: hidden; }
}