/*
 * 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-maths-scenario-cards
 */
/* scenario-cards — a warm storybook card for whole-class SPHE discussion.
 * No scoring UI anywhere: highlights are neutral "we talked about this"
 * marks, reveals are discussion deepeners, the counter is progress only. */

.sc-stage {
    font-family: 'Nunito', system-ui, sans-serif;
    color: #43342a;
    max-width: 860px;
    margin: 0 auto;
    padding: 4px 2px 10px;
}

/* ---- The story card ----------------------------------------------------- */
.sc-card {
    position: relative;
    background: linear-gradient(180deg, #fffdf8, #fff6e9);
    border: 1px solid #f1e0c2;
    border-radius: 22px;
    box-shadow: 0 8px 22px rgba(122, 90, 40, .10);
    padding: 26px 30px 24px;
}

.sc-enter-fwd { animation: scInFwd .38s ease both; }
.sc-enter-back { animation: scInBack .38s ease both; }
@keyframes scInFwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes scInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.sc-scene {
    font-size: 64px;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 6px rgba(122, 90, 40, .16));
}

.sc-title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #5b4632;
}

.sc-story {
    margin: 0 auto 16px;
    max-width: 58ch;
    text-align: center;
    font-size: 18.5px;
    font-weight: 600;
    line-height: 1.65;
    color: #4f3f30;
}

.sc-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    margin: 0 auto 18px;
    background: #fdeee3;
    border: 1px solid #f6cfae;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 800;
    font-size: 18px;
    color: #a25319;
}

/* ---- Option chips: neutral "we talked about this one" highlights -------- */
.sc-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.sc-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    text-align: left;
    background: #fff;
    border: 1.5px solid #e8dcc8;
    border-radius: 14px;
    padding: 11px 14px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.45;
    color: #4f3f30;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}

.sc-option:hover { border-color: #d9b98a; transform: translateY(-1px); }

.sc-option-mark {
    flex-shrink: 0;
    margin-top: 2px;
    color: #c98a3b;
    opacity: 0;
    transition: opacity .18s ease;
}

.sc-option.is-talked {
    background: #fdf3df;
    border-color: #e3b264;
    box-shadow: 0 0 0 3px rgba(227, 178, 100, .18);
}

.sc-option.is-talked .sc-option-mark { opacity: 1; }

/* ---- Feelings check: empathy questions revealed one at a time ----------- */
.sc-section-label {
    margin-bottom: 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #8a6f52;
}

.sc-section-label i { margin-right: 4px; }

.sc-feelings { margin-bottom: 16px; }

.sc-feelings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.sc-feeling {
    border: 1.5px dashed #d9c1e8;
    background: #fdfaff;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    color: #7d5e96;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.sc-feeling i { margin-right: 4px; }

.sc-feeling:hover:not(.is-revealed) { border-color: #b08ad0; background: #f7f0fc; }

.sc-feeling.is-revealed {
    border-style: solid;
    border-color: #cfaee6;
    background: #f4eafb;
    color: #5c3f78;
    cursor: default;
    animation: scPop .3s ease;
}

.sc-feeling.is-revealed.no-pop { animation: none; }

@keyframes scPop {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: none; }
}

/* ---- Things to think about: one gentle tap, soft slide-in --------------- */
.sc-think {
    border-top: 1px dashed #ecd9b8;
    padding-top: 16px;
}

.sc-think-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #fff8e8, #ffefc7);
    border: 1.5px solid #ecc878;
    border-radius: 12px;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    color: #8a6414;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.sc-think-btn:hover { border-color: #d9a83f; }

.sc-think-btn .sc-think-lock { display: none; font-size: 12px; opacity: .75; }
.sc-think-btn.is-locked { opacity: .85; }
.sc-think-btn.is-locked .sc-think-lock { display: inline; }

.sc-think.is-open .sc-think-btn { cursor: default; background: #fff8e8; }

.sc-nudge { animation: scNudge .4s ease; }
@keyframes scNudge {
    0%, 100% { transform: none; }
    30% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
}

.sc-think-hint {
    margin: 9px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #a07b34;
}

.sc-think-hint[hidden] { display: none; }

.sc-think-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s ease, opacity .45s ease, margin .4s ease;
}

.sc-think.is-open .sc-think-list {
    max-height: 700px;
    opacity: 1;
    margin-top: 12px;
}

.sc-think-list li {
    display: flex;
    gap: 9px;
    margin: 8px 0;
    background: #fffbef;
    border: 1px solid #f0e2bd;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    color: #6e5526;
    transform: translateY(8px);
    opacity: 0;
    transition: transform .4s ease, opacity .4s ease;
}

.sc-think-list li::before { content: '✨'; flex-shrink: 0; }

.sc-think.is-open .sc-think-list li { transform: none; opacity: 1; }
.sc-think.is-open .sc-think-list li:nth-child(1) { transition-delay: .08s; }
.sc-think.is-open .sc-think-list li:nth-child(2) { transition-delay: .20s; }
.sc-think.is-open .sc-think-list li:nth-child(3) { transition-delay: .32s; }
.sc-think.is-open .sc-think-list li:nth-child(4) { transition-delay: .44s; }
.sc-think.is-open .sc-think-list li:nth-child(5) { transition-delay: .56s; }

/* ---- Navigation: progress, not score ------------------------------------ */
.sc-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.sc-nav[hidden] { display: none; }

.sc-nav-btn {
    justify-self: start;
    border: 1.5px solid #d9c8aa;
    background: #fff;
    border-radius: 12px;
    padding: 9px 18px;
    font-family: inherit;
    font-weight: 800;
    font-size: 14.5px;
    color: #6e5a3e;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.sc-nav-btn:last-child { justify-self: end; }
.sc-nav-btn:hover:not(:disabled) { border-color: #bda478; background: #fdf8ee; }
.sc-nav-btn:disabled { opacity: .35; cursor: default; }
.sc-nav-btn[hidden] { display: none; }

.sc-counter {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    color: #8a6f52;
}

.sc-empty {
    margin: 18px 0;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #8a6f52;
}

/* ---- Visually-hidden live region ---------------------------------------- */
.sc-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Display mode: huge type, minimal chrome, fills the IWB ------------- */
body.display-mode .sc-stage { max-width: 1180px; }
body.display-mode .sc-card { padding: 38px 48px 32px; border-radius: 28px; }
body.display-mode .sc-scene { font-size: clamp(84px, 13vw, 140px); }
body.display-mode .sc-title { font-size: clamp(28px, 4vw, 46px); }
body.display-mode .sc-story {
    max-width: none;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.6;
}
body.display-mode .sc-prompt { font-size: clamp(20px, 2.6vw, 30px); padding: 12px 28px; }
body.display-mode .sc-options { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
body.display-mode .sc-option { font-size: clamp(18px, 2.2vw, 26px); padding: 16px 20px; border-radius: 18px; }
body.display-mode .sc-section-label { font-size: clamp(14px, 1.4vw, 18px); }
body.display-mode .sc-feeling { font-size: clamp(17px, 2vw, 24px); padding: 12px 24px; }
body.display-mode .sc-think-btn { font-size: clamp(18px, 2vw, 24px); padding: 14px 26px; }
body.display-mode .sc-think-hint { font-size: clamp(15px, 1.7vw, 20px); }
body.display-mode .sc-think-list li { font-size: clamp(17px, 2vw, 24px); padding: 14px 18px; }
body.display-mode .sc-nav-btn { font-size: clamp(16px, 1.9vw, 22px); padding: 12px 24px; }
body.display-mode .sc-counter { font-size: clamp(15px, 1.8vw, 21px); }

/* ---- Calm for anyone who prefers reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sc-enter-fwd, .sc-enter-back, .sc-feeling.is-revealed, .sc-nudge { animation: none; }
    .sc-option, .sc-feeling, .sc-think-btn, .sc-nav-btn,
    .sc-think-list, .sc-think-list li { transition: none; }
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 560px) {
    .sc-card { padding: 18px 16px 16px; }
    .sc-scene { font-size: 52px; }
    .sc-options { grid-template-columns: 1fr; }
    .sc-story { font-size: 16.5px; }
}