/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-digital-media-literacy-scroll-stopper
 */
/* scroll-stopper: builds on activity-common.css + maths-activity.css (the header, its
 * controls and the display-mode header hiding come from those). Everything here is
 * scoped under .ss-root. Type grows with the frame: 16px on a phone, about 20px in a
 * lesson on a laptop or board, up to 28px in full screen on a board. */

.ss-root {
    --ss-ink: #14282a;
    --ss-soft: #4b5f62;
    --ss-line: #cdd6cd;
    --ss-sheet: #fbfcf8;
    --ss-card: #ffffff;
    --ss-board: #0f3b3a;
    --ss-board-2: #1b5553;
    --ss-chalk: #f5f7ee;
    --ss-mark-bg: #fff3cf;
    --ss-mark-ink: #6b4b00;
    --ss-go: #137a50;
    --ss-go-bg: #dcf3e6;
    --ss-stop: #bf2c44;
    --ss-stop-bg: #fbe3e6;
    --ss-warn: #a35f00;
    --ss-warn-bg: #fdeed0;
    --ss-focus: #0b63ce;
    display: block;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1em;
    background: var(--ss-sheet);
    border: 2px solid var(--ss-line);
    border-radius: 14px;
    color: var(--ss-ink);
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: clamp(16px, calc(9px + 1vw), 28px);
    line-height: 1.45;
    overflow-wrap: break-word;
}
body.display-mode .ss-root { font-size: clamp(18px, calc(10px + 1.15vw), 30px); }

.ss-root *, .ss-root *::before, .ss-root *::after { box-sizing: border-box; }
.ss-root p { margin: 0; }
.ss-root ul { margin: 0; padding-left: 1.2em; }
.ss-root h2, .ss-root h3 { font-family: inherit; color: var(--ss-ink); margin: 0; line-height: 1.2; letter-spacing: 0; }
.ss-root h2 { font-size: 1.55em; font-weight: 800; }
.ss-root h3 { font-size: 1.12em; font-weight: 800; }
.ss-root h2:focus, .ss-root h3:focus { outline: none; }

.ss-stack { display: grid; gap: .65em; align-content: start; }
.ss-tight { gap: .45em; }
.ss-lead { font-size: 1.1em; }
.ss-small { font-size: .88em; color: var(--ss-soft); }
.ss-strong { font-weight: 800; }
.ss-plain { list-style: none; padding: 0 !important; display: grid; gap: .3em; }
.ss-btnrow { display: flex; flex-wrap: wrap; gap: .5em; }
.ss-grid2 { display: grid; gap: .8em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19em), 1fr)); align-items: start; }

/* ---- buttons ---- */
.ss-b {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: max(44px, 2.3em); padding: .45em .9em;
    border: 2px solid #8fa39b; border-radius: 10px;
    background: var(--ss-card); color: var(--ss-ink);
    font: inherit; font-weight: 700; line-height: 1.25; text-align: left;
    cursor: pointer;
}
.ss-b:hover:not(:disabled) { border-color: var(--ss-board); background: #f0f6f0; }
.ss-b:disabled { cursor: default; opacity: .6; }
.ss-b[aria-pressed="true"], .ss-b[aria-pressed="true"]:hover:not(:disabled) { background: var(--ss-mark-bg); border-color: var(--ss-mark-ink); }
.ss-b[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }
.ss-b.primary { background: var(--ss-board); border-color: var(--ss-board); color: var(--ss-chalk); }
.ss-b.primary:hover:not(:disabled) { background: var(--ss-board-2); border-color: var(--ss-board-2); }
.ss-b.good, .ss-b.good:disabled { background: var(--ss-go-bg); border-color: var(--ss-go); color: #0b5135; opacity: 1; }
.ss-b.bad, .ss-b.bad:disabled { background: var(--ss-stop-bg); border-color: var(--ss-stop); color: #7f1525; opacity: 1; }
.ss-b.wide { width: 100%; justify-content: flex-start; }
.ss-root button:focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 2px; }

/* The next thing to press stays on screen while a long screen scrolls. */
.ss-actions {
    position: sticky; bottom: 0; z-index: 4;
    display: grid; gap: .4em;
    margin: .2em -1em 0; padding: .6em 1em .7em;
    background: var(--ss-sheet);
    border-top: 1px solid var(--ss-line);
}
.ss-actions:last-child { margin-bottom: -1em; padding-bottom: .9em; border-radius: 0 0 12px 12px; }
/* The other ways on sit after the sticky bar, at the end of the screen. */
.ss-more { margin-top: .3em; }

/* ---- panels, pills, marks ---- */
.ss-panel { padding: .85em; background: var(--ss-card); border: 2px solid var(--ss-line); border-radius: 12px; display: grid; gap: .55em; align-content: start; }
.ss-panel.key { background: #eaf3ec; border-color: #b3cfbd; }
.ss-panel.good { background: var(--ss-go-bg); border-color: var(--ss-go); }
.ss-panel.bad { background: var(--ss-stop-bg); border-color: var(--ss-stop); }
.ss-panel.warn { background: var(--ss-warn-bg); border-color: var(--ss-warn); }
.ss-pill { display: inline-block; padding: .06em .6em; border-radius: 99px; font-weight: 800; font-size: .86em; white-space: nowrap; }
.ss-pill.green { background: var(--ss-go); color: #fff; }
.ss-pill.amber { background: var(--ss-warn); color: #fff; }
.ss-pill.grey { background: #dfe6df; color: var(--ss-ink); }
.ss-tick { color: var(--ss-go); font-weight: 800; }
.ss-cross { color: var(--ss-stop); font-weight: 800; }

/* ---- clients ---- */
.ss-clients { display: grid; gap: .7em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr)); }
.ss-client {
    display: grid; gap: .25em; padding: .75em .85em; min-height: 44px;
    text-align: left; font: inherit; color: var(--ss-ink);
    background: var(--ss-card); border: 2px solid #8fa39b; border-radius: 12px; cursor: pointer;
}
.ss-client:hover { border-color: var(--ss-board); background: #f6faf6; }
.ss-client strong { font-size: 1.1em; }
.ss-stars-small { color: var(--ss-mark-ink); font-weight: 800; }

/* ---- build ---- */
.ss-build { display: grid; gap: 1em; grid-template-columns: minmax(0, 1fr) minmax(12em, 16em); align-items: start; }
.ss-phonecol { order: 2; position: sticky; top: .5em; }
.ss-pick { display: grid; gap: .3em; }
.ss-lab { font-weight: 800; }
.ss-chosen { color: var(--ss-soft); font-weight: 400; }

.ss-phone { background: #111d1e; color: #fff; border-radius: 1.4em; padding: .5em; box-shadow: 0 .4em 1em rgba(15, 59, 58, .28); }
.ss-screen { background: #fff; color: #111; border-radius: 1em; overflow: hidden; display: grid; font-size: .86em; }
.ss-status { display: flex; justify-content: space-between; gap: .5em; padding: .3em .8em; font-weight: 700; font-size: .85em; color: #fff; background: var(--ss-board-2); }
.ss-status.none { background: #76817f; }
.ss-img { min-height: 2.4em; display: grid; place-items: center; font-size: 2.5em; line-height: 1.1; }
.ss-img.bright { background: linear-gradient(135deg, #ffd23f, #ff6b6b); }
.ss-img.clean { background: #eef3f1; }
.ss-img.photo { background: linear-gradient(180deg, #a9c7d8 0%, #d9e4dc 55%, #7f9a6d 56%, #5c7a4f 100%); }
.ss-img.dark { background: linear-gradient(180deg, #17222b, #3b4650); }
.ss-img.none { background: repeating-linear-gradient(45deg, #edf0ec, #edf0ec .3em, #e2e7e1 .3em, #e2e7e1 .6em); }
.ss-body { padding: .55em .7em .7em; display: grid; gap: .3em; }
.ss-acct { font-weight: 800; }
.ss-cap { line-height: 1.3; }
.ss-note { color: #444; }
.ss-tagline { color: #2758a8; }
.ss-music { font-size: .9em; color: #333; }
.ss-cta { display: block; padding: .4em .6em; text-align: center; background: var(--ss-board); color: #fff; border-radius: 7px; font-weight: 800; }
.ss-cta.empty { background: #dfe4de; color: #4f5c57; }

/* ---- results ---- */
.ss-verdict { gap: .45em; }
.ss-stars { font-size: 2.2em; letter-spacing: .08em; line-height: 1; }
.ss-stars .on { color: #c98a00; }
.ss-stars .off { color: #cdd6cd; }
.ss-compare { display: grid; gap: .6em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr)); }
.ss-people { display: grid; gap: .5em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21em), 1fr)); }
.ss-person {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1em .6em; align-items: start;
    padding: .55em .65em; background: var(--ss-card); border: 2px solid var(--ss-line); border-radius: 10px;
    animation: ss-rise .3s ease-out both;
}
.ss-person.aimed { border-color: var(--ss-board-2); }
.ss-avatar {
    grid-row: span 2; align-self: center;
    width: 2.2em; height: 2.2em; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-board-2); color: #fff; font-weight: 800;
}
.ss-person.stop .ss-avatar { background: var(--ss-go); }
.ss-person.past .ss-avatar { background: var(--ss-warn); }
.ss-person.never .ss-avatar { background: #6d7b77; }
.ss-top { display: flex; flex-wrap: wrap; gap: .1em .5em; align-items: baseline; font-weight: 700; }
.ss-aimtag { font-size: .8em; font-weight: 800; color: var(--ss-board-2); }
@keyframes ss-rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }

/* ---- bonus round ---- */
.ss-fakepost { background: var(--ss-card); border: 2px solid var(--ss-line); border-radius: 12px; padding: .85em; display: grid; gap: .45em; max-width: 46em; }
.ss-who { font-weight: 800; }

.ss-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---- phones and narrow frames: one column, the phone above the choices ---- */
@media (max-width: 700px) {
    .ss-root { padding: .75em; border-radius: 12px; }
    .ss-actions { margin: .2em -.75em 0; padding: .55em .75em .65em; }
    .ss-actions:last-child { margin-bottom: -.75em; }
    .ss-build { grid-template-columns: minmax(0, 1fr); }
    .ss-phonecol { order: 0; position: static; }
    .ss-phone { border-radius: 1em; padding: .35em; }
    .ss-screen { border-radius: .75em; }
    .ss-img { min-height: 1.5em; font-size: 2em; }
    .ss-root h2 { font-size: 1.35em; }
}

/* ---- full screen on a board: use the space ---- */
:fullscreen .ss-root { max-width: none; }

@media (prefers-reduced-motion: reduce) {
    .ss-person { animation: none; }
}