/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-see-source-inquiry
 *
 * The tightest budget of the nine. Interactive mode is a FIXED 620px iframe,
 * and this needs the source, the provenance strip, three questions and a
 * reading in it. The answer is a horizontal split, not a stack: the source
 * panel is capped at 360 and the questions sit beside it.
 * Palette + [hidden] fix: ../shared/css/see-activity.css
 * Pan/zoom chrome: ../shared/css/see-viewport.css
 */

.si-container {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.si-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: .6rem;
    align-items: start;
}

.si-left { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.si-right { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.si-stage { min-height: 300px; max-height: 360px; }
.si-stage .sv-viewport { min-height: 284px; }

/* ------------------------------------------------------------- provenance
 * Never collapsible and never absent. A source with no provenance is not a
 * source, so when none is recorded the strip says that instead of vanishing. */
.si-prov {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    font-size: .76rem;
    color: var(--maths-ink-muted);
}

.si-kind {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--see-accent);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .68rem;
}

.si-kind-document { background: #b45309; }
.si-kind-map { background: #0e7490; }
.si-kind-object { background: #7c3aed; }

.si-date { font-weight: 700; color: var(--see-ink); }
.si-provenance { flex: 1 1 100%; }
.si-provenance.is-missing { font-style: italic; color: #a1140f; }

.si-caption {
    margin: 0;
    font-size: .86rem;
    line-height: 1.3;
    color: var(--maths-ink);
}

/* ---------------------------------------------------------------- steps */
.si-steps {
    list-style: none;
    counter-reset: si;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.si-step {
    counter-increment: si;
    border: 2px solid var(--maths-border);
    border-left: 6px solid var(--see-bright);
    border-radius: 10px;
    padding: .35rem .55rem;
    background: #fff;
}

.si-step.is-locked { opacity: .55; background: var(--maths-surface-alt); }

/* The question the lesson is actually for. */
.si-step-limits { border-left-color: var(--see-accent); }

.si-step-head {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    color: var(--see-ink);
}

.si-step-head > i { color: var(--see-accent); }

.si-step-q {
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.2;
}

.si-step-q::before {
    content: counter(si) ". ";
    color: var(--maths-ink-muted);
}

.si-locked-note {
    margin: .2rem 0 0;
    font-size: .8rem;
    color: var(--maths-ink-muted);
}

.si-options { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }

.si-option {
    min-height: 40px;
    padding: .25rem .6rem;
    border-radius: 9px;
    border: 2px solid var(--maths-border);
    background: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .86rem;
    color: var(--maths-ink);
    cursor: pointer;
    text-align: left;
}

/* "chosen", not "correct" — this is a vote, and it can change */
.si-option.is-chosen {
    background: var(--see-subtle);
    border-color: var(--see-accent);
    color: var(--see-ink);
}

.si-option:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

.si-note-row { display: flex; gap: .35rem; margin-top: .3rem; align-items: flex-end; }

.si-note {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 8px;
    border: 2px solid var(--maths-border);
    padding: .3rem .5rem;
    font-family: 'Nunito', sans-serif;
    font-size: .88rem;
    resize: vertical;
}

.si-commit { min-height: 44px; white-space: nowrap; font-size: .82rem; }

.si-done {
    display: inline-block;
    margin-top: .25rem;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--see-accent);
}

/* --------------------------------------------------------------- reading */
.si-reading {
    border: 2px dashed var(--see-bright);
    border-radius: 10px;
    padding: .4rem .6rem;
    background: var(--see-subtle);
}

.sc-reveal-heading {
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--see-accent);
    margin-bottom: .2rem;
}

.si-reading-row { margin-bottom: .3rem; }

.si-reading-label {
    display: block;
    font-weight: 800;
    font-size: .78rem;
    color: var(--see-ink);
}

.si-reading-text {
    margin: 0;
    font-size: .86rem;
    line-height: 1.3;
    color: var(--maths-ink);
}

.si-step.is-done {
    border-left-color: var(--see-accent);
    background: var(--maths-surface-alt);
    cursor: pointer;
    padding: .25rem .55rem;
}

.si-step.is-done .si-step-q { font-size: .84rem; }

.si-said {
    margin: .1rem 0 0 1.1rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--see-ink);
}

/* Safety net: if a lesson writes a very long reading, it scrolls inside the
 * column rather than pushing the fixed-height iframe into a scrollbar. */
.si-right { max-height: 470px; overflow-y: auto; }

.si-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.2rem;
    color: var(--maths-ink-muted);
}

/* ----------------------------------------------------------- display mode */
body.display-mode .si-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
body.display-mode .si-stage { min-height: 340px; max-height: 400px; }
body.display-mode .si-stage .sv-viewport { min-height: 324px; }
body.display-mode .si-step-q { font-size: 1.05rem; }
body.display-mode .si-container { gap: .25rem; }

@media (max-width: 720px) {
    .si-split { grid-template-columns: 1fr; }
    .si-stage { min-height: 220px; max-height: 260px; }
    .si-stage .sv-viewport { min-height: 204px; }
}