/* Live Responses · School Locker phone skin ("Hall Pass", owner decision
   2026-10-07), from the canvas boards SC-LR-Phone and -Anim: a teal locker
   door filling the phone, the prompt on a little whiteboard, the response
   box as a ruled index card, the yellow Send button, Most Voted / Most
   Recent as a yellow and a dark tab, and the responses as ruled index
   cards: a pill with the HOST's reaction emoji and the count in steel locker
   plates (yellow once you've voted), a colour bar in the response's own
   highlighter (its place, the display's colour), the text. My Submissions
   carry a Pending / Approved / Answered tag. The submit toast is a green
   "Sent!" slip with a ticked circle; while the host has paused, a pink
   "Paused" slip takes the form's place; the ended screen is the "Waiting for
   the next activity…" index card with its hopping dots. The panel fills the
   phone; a long list scrolls inside it, the page never does.

   Every rule is scoped to #qa-content.responses-design.lrd-schoolLocker,
   #toast.responses-design.lrd-schoolLocker or
   #waiting-message.responses-design.lrd-schoolLocker.lr-ended, so no other
   screen or feature is touched; the classic screens never match.

   The theme's web fonts (the Mac's bundled faces, ShowThemeFonts) are
   declared below; the colours are ShowThemePalettes.swift's
   SchoolLockerPalette (the eight options by place, one navy 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 panel: a locker door, filling the phone ── */
#qa-content.responses-design.lrd-schoolLocker,
#waiting-message.responses-design.lrd-schoolLocker.lr-ended {
    --scl-ink: #14202B; --scl-paper: #FFFDF5; --scl-yellow: #FFE94A; --scl-red: #E0313B;
    --scl-green: #6FEA84; --scl-orange: #FFB86B; --scl-pink: #FF8FB0; --scl-label: #D8E3E6;
    --scl-shadow: rgba(4, 16, 19, 0.55);
    --scl-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --scl-in: cubic-bezier(0.55, 0, 1, 0.45);
    --scl-ruled:
        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);
    --scl-steel: linear-gradient(180deg, #F4F6F8 0%, #C2C9CF 56%, #E3E7EA 100%);
    position: relative;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif;
    font-weight: 700;
    color: var(--scl-ink);
    margin: -8px -4px 0;
    padding: 18px 16px 18px;
    height: calc(100vh - 112px);
    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%);
    overflow: hidden;
    isolation: isolate;
}
/* The door's vents at the bottom, behind everything. */
#qa-content.responses-design.lrd-schoolLocker::after,
#waiting-message.responses-design.lrd-schoolLocker.lr-ended::after {
    content: ''; position: absolute; z-index: -1; left: 50%; bottom: 14px;
    width: 142px; height: 32px; margin-left: -71px;
    background: repeating-linear-gradient(180deg, #0A2427 0 6px, rgba(255,255,255,0.08) 6px 8px, transparent 8px 13px);
}
/* index.html shows the panel with an inline display: block; the design
   stacks it as a column whose list takes what's left. */
#qa-content.responses-design.lrd-schoolLocker[style*="block"] {
    display: flex !important; flex-direction: column; align-items: stretch; text-align: left;
}

/* The responses' colours by place (the theme's eight highlighters). */
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="0"] { --scl-c: #FFE94A; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="1"] { --scl-c: #FF77B7; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="2"] { --scl-c: #6FEA84; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="3"] { --scl-c: #62C9FF; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="4"] { --scl-c: #FFA54C; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="5"] { --scl-c: #C29BFF; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="6"] { --scl-c: #4FE6D2; }
#qa-content.responses-design.lrd-schoolLocker .scl-bar[data-place="7"] { --scl-c: #FF8473; }

/* ── The prompt on a little whiteboard ── */
#qa-content.responses-design.lrd-schoolLocker .qa-title {
    flex: 0 0 auto; position: relative;
    margin: 0 0 16px; padding: 22px 26px;
    min-height: 100px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    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,
        linear-gradient(#F3F6F8, #F3F6F8) padding-box,
        linear-gradient(180deg, #F4F6F8 0%, #B5BDC4 48%, #E2E6E9 100%) border-box;
    border: 10px solid transparent;
    box-shadow: inset 0 0 0 1px #75808A, inset 0 3px 8px rgba(0,0,0,0.20), 0 0 0 2px #75808A, 0 14px 22px rgba(0,0,0,0.45);
    text-align: center; color: var(--scl-ink);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800;
    font-size: 22px; line-height: 1.12; overflow-wrap: anywhere;
    animation: sclDrop 0.6s var(--scl-back) both;
}
#qa-content.responses-design.lrd-schoolLocker .qa-title .scl-long { font-size: 18px; }

/* The classic page's own messages stay out of the design's way. */
#qa-content.responses-design.lrd-schoolLocker .qa-submitted-msg { display: none !important; }
#qa-content.responses-design.lrd-schoolLocker .qa-profanity-error.show {
    flex: 0 0 auto; margin: 0 0 12px;
    background: var(--scl-pink); color: var(--scl-ink);
    border-radius: 4px; box-shadow: 0 6px 0 var(--scl-shadow);
    font-size: 15px; transform: rotate(-1.5deg);
}

/* ── The form: the index card and Send ── */
#qa-content.responses-design.lrd-schoolLocker .qa-submit-form {
    flex: 0 0 auto;
    margin: 0 0 16px; padding: 0;
    background: none; border-radius: 0;
    animation: sclSlide 0.55s 0.12s var(--scl-back) both;
}
#qa-content.responses-design.lrd-schoolLocker .qa-submit-form textarea {
    display: block; width: 100%; height: 104px; min-height: 0; resize: none;
    padding: 20px 16px 10px; box-sizing: border-box;
    background: var(--scl-ruled), var(--scl-paper);
    color: var(--scl-ink);
    border: none; border-radius: 6px; box-shadow: 0 9px 0 var(--scl-shadow);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3;
    caret-color: var(--scl-ink);
}
#qa-content.responses-design.lrd-schoolLocker .qa-submit-form textarea::placeholder { color: #7C8A92; font-weight: 700; }
#qa-content.responses-design.lrd-schoolLocker .qa-submit-form textarea:focus {
    outline: none; box-shadow: 0 9px 0 var(--scl-shadow), 0 0 0 4px var(--scl-yellow);
}
#qa-content.responses-design.lrd-schoolLocker .qa-submit-btn {
    display: block; width: 100%; height: 58px; margin-top: 20px; padding: 0 12px;
    box-sizing: border-box;
    background: var(--scl-yellow); color: var(--scl-ink);
    border: 3px solid var(--scl-ink); border-radius: 12px; box-shadow: 0 6px 0 #061316;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 25px; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: transform 0.08s, box-shadow 0.08s;
    -webkit-tap-highlight-color: transparent;
}
#qa-content.responses-design.lrd-schoolLocker .qa-submit-btn:active:not(:disabled) {
    transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 #061316;
}
/* Sending…: the button goes steel, still opaque. */
#qa-content.responses-design.lrd-schoolLocker .qa-submit-btn:disabled { opacity: 1; background: #AEB8BE; }

/* ── Paused: a pink slip in the form's place ── */
#qa-content.responses-design.lrd-schoolLocker .qa-paused-banner.show {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    margin: 6px -2px 22px; padding: 14px 16px;
    min-height: 100px; box-sizing: border-box;
    background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(120, 20, 40, 0.18) 26px 28px), var(--scl-pink);
    color: var(--scl-ink);
    border: none; border-radius: 0; box-shadow: 0 8px 0 var(--scl-shadow);
    text-align: left;
    transform: rotate(-2.5deg);
    animation: sclSlap 0.45s 0.1s var(--scl-back) both, sclAppear 0.1s steps(1) backwards;
}
#qa-content.responses-design.lrd-schoolLocker .scl-slip-icon {
    flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
    background:
        linear-gradient(#FFFFFF, #FFFFFF) no-repeat calc(50% - 8px) 50% / 8px 24px,
        linear-gradient(#FFFFFF, #FFFFFF) no-repeat calc(50% + 8px) 50% / 8px 24px,
        var(--scl-red);
}
#qa-content.responses-design.lrd-schoolLocker .scl-slip-words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#qa-content.responses-design.lrd-schoolLocker .scl-slip-head {
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 36px; line-height: 1;
}
#qa-content.responses-design.lrd-schoolLocker .scl-slip-sub { font-weight: 700; font-size: 18px; line-height: 1.2; }

/* ── My Submissions ── */
#qa-content.responses-design.lrd-schoolLocker #qa-my-questions { flex: 0 0 auto; }
#qa-content.responses-design.lrd-schoolLocker #qa-my-questions:empty { display: none; }
#qa-content.responses-design.lrd-schoolLocker .qa-section-header {
    margin: 0 0 9px 2px; color: var(--scl-label);
    font-family: 'Graduate', serif; font-weight: 400;
    font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase;
}
#qa-content.responses-design.lrd-schoolLocker .qa-section-header .chevron { font-size: 10px; }
#qa-content.responses-design.lrd-schoolLocker .qa-my-questions-list { max-height: 172px; overflow-y: auto; padding: 0 0 6px; }
#qa-content.responses-design.lrd-schoolLocker .qa-my-questions-list.collapsed { max-height: 0 !important; opacity: 1; padding: 0; }
#qa-content.responses-design.lrd-schoolLocker #qa-my-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 74px; margin: 0 0 12px; padding: 6px 12px 6px 10px; box-sizing: border-box;
    background: var(--scl-ruled), var(--scl-paper); color: var(--scl-ink);
    border: none; border-radius: 6px; box-shadow: 0 6px 0 var(--scl-shadow);
    animation: sclDeal 0.5s var(--scl-back) both;
}
#qa-content.responses-design.lrd-schoolLocker .scl-mine-votes {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 8px; background: var(--scl-paper); box-shadow: 0 0 0 2px var(--scl-ink);
}
#qa-content.responses-design.lrd-schoolLocker .scl-mine-text {
    flex: 1 1 auto; min-width: 0;
    font-size: 17px; line-height: 1.1; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#qa-content.responses-design.lrd-schoolLocker .scl-tag {
    flex: 0 0 auto; padding: 4px 8px; border-radius: 6px;
    background: var(--scl-orange); color: var(--scl-ink); box-shadow: 0 0 0 2px var(--scl-ink);
    font-weight: 800; font-size: 14px; line-height: 1.1; white-space: nowrap;
    transform: rotate(3deg);
    animation: sclTag 0.4s var(--scl-back) both;
}
#qa-content.responses-design.lrd-schoolLocker .scl-tag.scl-approved { background: var(--scl-green); transform: rotate(-3deg); }
#qa-content.responses-design.lrd-schoolLocker .scl-tag.scl-answered { background: #62C9FF; transform: rotate(-3deg); }

/* ── The list: Most Voted / Most Recent, then the responses ── */
#qa-content.responses-design.lrd-schoolLocker #qa-approved-questions {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -6px -8px; padding: 0 6px 14px;
}
#qa-content.responses-design.lrd-schoolLocker .qa-sort-bar {
    position: sticky; top: 0; z-index: 2;
    display: flex; gap: 6px; height: 44px; margin: 0 0 12px; box-sizing: border-box;
    background: none; border: none; border-radius: 0; overflow: visible;
    animation: sclDeal 0.5s 0.1s var(--scl-back) both;
}
#qa-content.responses-design.lrd-schoolLocker .qa-sort-btn {
    flex: 1; padding: 0; border-radius: 10px;
    background: #0C2226; color: var(--scl-label); border: 3px solid #061316;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 19px;
}
#qa-content.responses-design.lrd-schoolLocker .qa-sort-btn.active {
    background: var(--scl-yellow); color: var(--scl-ink); border-color: var(--scl-ink);
}

#qa-content.responses-design.lrd-schoolLocker #qa-approved-questions .qa-question-card {
    display: flex; align-items: center; gap: 10px;
    min-height: 74px; margin: 0 0 12px; padding: 6px 12px 6px 10px; box-sizing: border-box;
    background: var(--scl-ruled), var(--scl-paper); color: var(--scl-ink);
    border: none; border-radius: 6px; box-shadow: 0 6px 0 var(--scl-shadow);
    opacity: 1;
}
#qa-content.responses-design.lrd-schoolLocker #qa-approved-questions .qa-question-card.entering {
    animation: sclDeal 0.5s var(--scl-back) both;
}
/* The vote pill: the host's emoji and the count in steel plates. */
#qa-content.responses-design.lrd-schoolLocker .qa-vote-btn {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 0; height: auto; padding: 4px 8px; box-sizing: border-box;
    background: var(--scl-paper); color: var(--scl-ink);
    border: none; border-radius: 8px; box-shadow: 0 0 0 2px var(--scl-ink);
    font-family: 'Graduate', serif; font-weight: 400; font-size: 18px; line-height: 1;
    transition: transform 0.08s;
}
#qa-content.responses-design.lrd-schoolLocker .qa-vote-btn:active { transform: scale(0.94); background: var(--scl-paper); }
#qa-content.responses-design.lrd-schoolLocker .qa-vote-btn.voted { background: var(--scl-yellow); box-shadow: 0 0 0 2px var(--scl-ink); }
#qa-content.responses-design.lrd-schoolLocker .qa-response-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
    font-size: 20px; line-height: 1;
}
#qa-content.responses-design.lrd-schoolLocker .qa-response-votes { display: inline-flex; gap: 2px; }
#qa-content.responses-design.lrd-schoolLocker .qa-response-votes i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 30px; box-sizing: border-box; padding-top: 2px;
    border: 2px solid #2E3840; border-radius: 6px; background: var(--scl-steel);
    box-shadow: 0 2px 0 rgba(0,0,0,0.35);
    font-family: 'Graduate', serif; font-style: normal; font-size: 18px; color: var(--scl-ink);
}
#qa-content.responses-design.lrd-schoolLocker .qa-response-votes i.scl-blank { background: linear-gradient(180deg, #8F99A1 0%, #6E7881 100%); }
#qa-content.responses-design.lrd-schoolLocker .qa-response-votes i.scl-sign {
    width: 10px; border: none; background: none; box-shadow: none;
}
/* The count bumps when it changes (school-locker.js marks it). */
#qa-content.responses-design.lrd-schoolLocker .qa-vote-btn.scl-bump { animation: sclBump 0.35s var(--scl-back); }
#qa-content.responses-design.lrd-schoolLocker .qa-vote-btn.voted .qa-response-emoji { animation: sclHeart 0.4s var(--scl-back); }
/* The text, after its colour bar. */
#qa-content.responses-design.lrd-schoolLocker #qa-approved-questions .qa-question-text {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    font-size: 19px; line-height: 1.08; font-weight: 700; color: var(--scl-ink);
}
#qa-content.responses-design.lrd-schoolLocker .scl-bar {
    flex: 0 0 auto; width: 6px; height: 40px; border-radius: 3px; background: var(--scl-c, #FFE94A);
}
#qa-content.responses-design.lrd-schoolLocker .scl-text {
    flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#qa-content.responses-design.lrd-schoolLocker .qa-empty {
    padding: 30px 20px 0; text-align: center; color: var(--scl-paper);
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 22px; line-height: 1.3;
    animation: sclDeal 0.5s 0.3s var(--scl-back) both;
}

/* ── The submit toast: a green "Sent!" slip ── */
#toast.responses-design.lrd-schoolLocker {
    --scl-ink: #14202B;
    display: flex; align-items: center; gap: 14px;
    width: min(338px, calc(100vw - 40px)); max-width: none; min-height: 96px; padding: 12px 16px; box-sizing: border-box;
    background: #6FEA84; color: var(--scl-ink);
    border: none; border-radius: 0; box-shadow: 0 8px 0 rgba(4, 16, 19, 0.55);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    text-align: left; font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 700;
    opacity: 1; transform: translateX(-50%) translateY(300px) rotate(-2deg);
}
#toast.responses-design.lrd-schoolLocker::before { content: none; }
#toast.responses-design.lrd-schoolLocker.error { background: #FF8FB0; }
#toast.responses-design.lrd-schoolLocker.show { animation: sclToastIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#toast.responses-design.lrd-schoolLocker.hide { animation: sclToastOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
#toast.responses-design.lrd-schoolLocker .scl-toast-icon {
    flex: 0 0 auto; width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%;
    background: #FFFDF5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 52 C20 60 30 70 38 84 C52 54 70 30 94 8' fill='none' stroke='%2314202B' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 38px 38px;
    box-shadow: 0 0 0 3px var(--scl-ink);
}
#toast.responses-design.lrd-schoolLocker.error .scl-toast-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 14 C40 38 62 62 86 88 M84 16 C60 36 40 62 14 86' fill='none' stroke='%2314202B' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E");
}
#toast.responses-design.lrd-schoolLocker .scl-toast-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#toast.responses-design.lrd-schoolLocker .scl-toast-head {
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 34px; line-height: 1;
}
#toast.responses-design.lrd-schoolLocker .scl-toast-sub { font-size: 18px; line-height: 1.2; }
#toast.responses-design.lrd-schoolLocker.error .scl-toast-head { font-size: 28px; }

/* ── The ended screen: Waiting for the next activity… ── */
#waiting-message.responses-design.lrd-schoolLocker.lr-ended.show {
    display: flex; align-items: center; justify-content: center; padding: 22px 30px;
}
#waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-wait {
    width: 100%; max-width: 306px; min-height: 190px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    padding: 26px 18px;
    background:
        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),
        #FFFDF5;
    color: #14202B; border-radius: 6px; box-shadow: 0 9px 0 rgba(4, 16, 19, 0.55);
    transform: rotate(-2deg);
    animation: sclWaitIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-wait-head {
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 32px; line-height: 1.1; text-align: center;
}
#waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-dots { display: flex; gap: 12px; height: 28px; align-items: flex-end; }
#waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-dots i {
    width: 16px; height: 16px; border-radius: 50%; background: #62C9FF;
    animation: sclHop 1.25s ease-in-out infinite;
}
#waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-dots i:nth-child(2) { background: #E0313B; animation-delay: 0.17s; }
#waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-dots i:nth-child(3) { background: #6FEA84; animation-delay: 0.34s; }

@keyframes sclDrop { from { transform: translateY(-160px) rotate(-4deg); } }
@keyframes sclSlide { from { transform: translateX(380px) rotate(6deg); } }
@keyframes sclDeal { from { transform: translateX(380px) rotate(6deg); } }
@keyframes sclTag { from { transform: rotate(14deg) scale(0); } }
@keyframes sclBump { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes sclHeart { 0% { transform: scale(0.6); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sclSlap { from { transform: rotate(-32deg) scale(0); } to { transform: rotate(-2.5deg) scale(1); } }
@keyframes sclAppear { from, to { visibility: hidden; } }
@keyframes sclToastIn {
    from { transform: translateX(-50%) translateY(300px) rotate(-2deg); }
    to { transform: translateX(-50%) translateY(0) rotate(-2deg); }
}
@keyframes sclToastOut {
    from { transform: translateX(-50%) translateY(0) rotate(-2deg); }
    to { transform: translateX(-50%) translateY(300px) rotate(-2deg); }
}
@keyframes sclWaitIn { from { transform: translateY(-900px) rotate(-2deg); } to { transform: rotate(-2deg); } }
@keyframes sclHop { 0%, 60%, 100% { transform: translateY(0); } 20% { transform: translateY(-10px); } 40% { transform: translateY(0); } }

/* ── Shorter phones ── */
@media (max-height: 740px) {
    #qa-content.responses-design.lrd-schoolLocker { padding: 14px 14px 14px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-title { font-size: 19px; min-height: 80px; padding: 14px 18px; margin-bottom: 12px; border-width: 8px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-title .scl-long { font-size: 16px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-submit-form { margin-bottom: 14px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-submit-form textarea { height: 78px; font-size: 18px; padding-top: 19px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-submit-btn { height: 50px; margin-top: 16px; font-size: 22px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-paused-banner.show { min-height: 84px; padding: 10px 14px; margin-bottom: 16px; }
    #qa-content.responses-design.lrd-schoolLocker .scl-slip-icon { width: 50px; height: 50px; }
    #qa-content.responses-design.lrd-schoolLocker .scl-slip-head { font-size: 30px; }
    #qa-content.responses-design.lrd-schoolLocker .scl-slip-sub { font-size: 16px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-my-questions-list { max-height: 132px; }
    #qa-content.responses-design.lrd-schoolLocker #qa-my-questions .qa-question-card,
    #qa-content.responses-design.lrd-schoolLocker #qa-approved-questions .qa-question-card { min-height: 64px; margin-bottom: 10px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-sort-bar { height: 40px; margin-bottom: 10px; }
    #qa-content.responses-design.lrd-schoolLocker .qa-sort-btn { font-size: 17px; }
    #qa-content.responses-design.lrd-schoolLocker #qa-approved-questions .qa-question-text { font-size: 17px; }
    #toast.responses-design.lrd-schoolLocker .scl-toast-head { font-size: 30px; }
    #waiting-message.responses-design.lrd-schoolLocker.lr-ended .scl-wait-head { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    #qa-content.responses-design.lrd-schoolLocker *, #qa-content.responses-design.lrd-schoolLocker *::before,
    #qa-content.responses-design.lrd-schoolLocker *::after, #waiting-message.responses-design.lrd-schoolLocker.lr-ended * {
        animation: none !important; transition: none !important;
    }
    #toast.responses-design.lrd-schoolLocker.show { animation: none; transform: translateX(-50%) rotate(-2deg); }
    #toast.responses-design.lrd-schoolLocker.hide { animation: none; transform: translateX(-50%) translateY(300px); }
    #qa-content.responses-design.lrd-schoolLocker .qa-paused-banner.show { visibility: visible; }
}