/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-see-sun-earth-moon
 *
 * Budget: explore is a FIXED 620px iframe. Orbit and globe sit SIDE BY SIDE,
 * readouts in a row beneath, sliders at the bottom. Stacking them is display-
 * mode only.
 * Palette + [hidden] fix: ../shared/css/see-activity.css
 */

.sem-container { display: flex; flex-direction: column; gap: .3rem; }

.sem-prompt {
    margin: 0;
    padding: .35rem .8rem;
    border-radius: 10px;
    background: var(--see-subtle);
    border: 1px solid var(--see-bright);
    color: var(--see-ink);
    font-weight: 700;
    text-align: center;
}

.sem-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: .5rem;
    align-items: start;
}

.sem-fig { margin: 0; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.sem-fig figcaption {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--maths-ink-muted);
}

.sem-fig svg { width: 100%; height: auto; max-height: 186px; display: block; }

.sem-globes { display: flex; gap: .4rem; justify-content: center; }
.sem-globes .sem-globe { max-height: 186px; }

/* ------------------------------------------------------------ panel A */
.sem-orbit-path { fill: none; stroke: var(--maths-grid-line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sem-sun { fill: #f6a821; stroke: #d98514; stroke-width: 2; }
.sem-earth { fill: #2f7fd1; stroke: #1c4f85; stroke-width: 1.5; }
.sem-season-dot { fill: var(--maths-ink-muted); }
.sem-ray { stroke: #f6a821; stroke-width: 1; stroke-dasharray: 2 3; }

/* The axis keeps ONE absolute direction all year. That is the mechanism. */
.sem-axis { stroke: var(--see-ink); stroke-width: 2.5; stroke-linecap: round; }
.sem-npole { fill: #be123c; }

.sem-lbl {
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
    font-weight: 700;
    fill: var(--maths-ink-muted);
    text-anchor: middle;
}

/* ------------------------------------------------------------ panel B */
.sem-day-face { fill: #cfe6fb; }
.sem-night { fill: #1f2f45; opacity: .82; }
.sem-limb { fill: none; stroke: var(--see-ink); stroke-width: 2; }
.sem-globe-axis { stroke: var(--see-ink); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .6; }
.sem-equator { fill: none; stroke: #6b5844; stroke-width: 1; opacity: .7; }
.sem-parallel { fill: none; stroke: #6b5844; stroke-width: .6; opacity: .35; }

.sem-marker { stroke: #fff; stroke-width: 2; }
.sem-marker.is-lit { fill: #d92d20; }
.sem-marker.is-dark { fill: #f6a821; }

/* Ireland: green, so it never reads as the class's red or orange dot. The name
 * is the biggest text on the globe and wears a white halo, so it reads on the
 * night side and across the parallels from the back of a classroom. */
.sem-ireland { fill: #169b62; stroke: #fff; stroke-width: 1.5; }
.sem-ireland-lbl {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 800;
    fill: var(--see-ink);
    stroke: #fff;
    stroke-width: 3.5px;
    stroke-linejoin: round;
    paint-order: stroke;
}

.sem-globe-label {
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    fill: var(--see-ink);
    text-anchor: middle;
}

/* ------------------------------------------------------------ panel C */
.sem-readouts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }

.sem-read {
    flex: 1 1 200px;
    min-width: 0;
    border: 1px solid var(--maths-border);
    border-radius: 9px;
    padding: .3rem .5rem;
    background: #fff;
}

.sem-read-wide { flex: 2 1 320px; }

.sem-read-h {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--maths-ink-muted);
    margin-bottom: .15rem;
}

.sem-dl-row { display: flex; align-items: center; gap: .4rem; }
.sem-dl-lbl { font-size: .78rem; font-weight: 700; color: var(--see-ink); min-width: 56px; }
.sem-dl-bar { flex: 1 1 auto; height: 14px; border-radius: 7px; background: #1f2f45; overflow: hidden; }
.sem-dl-fill { display: block; height: 100%; background: #f6a821; }
.sem-dl-val { font-size: .8rem; font-weight: 800; color: var(--see-ink); min-width: 52px; text-align: right; }
.sem-dl-sub { font-size: .72rem; color: var(--maths-ink-muted); margin-top: .1rem; }

/* The sentence the whole interactive exists to produce. */
.sem-flat {
    margin-top: .2rem;
    padding: .2rem .45rem;
    border-radius: 6px;
    background: var(--see-accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.sem-shadow, .sem-moon { width: 100%; height: auto; max-height: 64px; }
.sem-ground { stroke: #6b5844; stroke-width: 2; }
.sem-stick { stroke: var(--see-ink); stroke-width: 4; stroke-linecap: round; }
.sem-shadow-line { stroke: #1f2f45; stroke-width: 5; opacity: .55; stroke-linecap: round; }
.sem-shadow-lbl, .sem-moon-lbl {
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800;
    fill: var(--see-ink); text-anchor: middle;
}
.sem-moon-lbl { text-anchor: start; }
.sem-moon-sub {
    font-family: 'Nunito', sans-serif; font-size: 9px; font-weight: 700;
    fill: var(--maths-ink-muted); text-anchor: start;
}
.sem-moon-dark { fill: #2b3445; }
.sem-moon-lit { fill: #f4efe2; }

/* ----------------------------------------------------------- sliders */
.sem-sliders { display: flex; flex-wrap: wrap; gap: .4rem; }

.sem-slider {
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-family: 'Nunito', sans-serif;
}

.sem-slider-top {
    display: flex;
    justify-content: space-between;
    font-size: .76rem;
    font-weight: 700;
    color: var(--maths-ink-muted);
}

.sem-slider-top strong { color: var(--see-ink); }

.sem-slider input[type="range"] { width: 100%; accent-color: var(--see-accent); height: 26px; }

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

/* --------------------------------------------------------- display mode
 * No sliders and no reset button, so nothing may need a teacher to press it. */
body.display-mode .sem-sliders { display: none !important; }
body.display-mode .sem-panels { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
body.display-mode .sem-fig svg { max-height: 212px; }
body.display-mode .sem-globes .sem-globe { max-height: 212px; }
body.display-mode .sem-dl-lbl, body.display-mode .sem-dl-val { font-size: .92rem; }

@media (max-width: 620px) {
    .sem-panels { grid-template-columns: 1fr; }
    .sem-fig svg { max-height: 150px; }
}

/* simple: the day-and-night model for a younger class. The orbit panel is for the
   seasons, so it goes and the globe has the width. */
body.sem-simple .sem-fig-orbit { display: none; }
body.sem-simple .sem-panels,
body.display-mode.sem-simple .sem-panels { grid-template-columns: minmax(0, 1fr); }
body.sem-simple .sem-globes .sem-globe { max-height: 240px; }

/* ---------------------------------------------------- the land (world-land.js)
 * Alan's board review, 15 Oct 2026: the class must see the Earth and find Ireland
 * on it. Land a muted green under the night; the island of Ireland a strong green
 * with a dark edge, and that edge drawn again over the night so it never vanishes. */
.sem-land { fill: #9cc98a; stroke: #6f9c5f; stroke-width: .4; }
.sem-ireland-land { fill: #13a35a; stroke: #0b5c33; stroke-width: .9; stroke-linejoin: round; }
.sem-ireland-edge { fill: none; stroke: #fde68a; stroke-width: 1; stroke-linejoin: round; opacity: .95; }

/* ------------------------------------------------ the shadow, seen from above */
.sem-shadow-wrap { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.sem-shadow-top { width: 100%; height: auto; max-height: 150px; display: block; }
.sem-ground-top { fill: #e6f2dc; stroke: #8fb87d; stroke-width: 2; }
.sem-compass {
    font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800;
    fill: var(--see-ink); text-anchor: middle;
}
.sem-stick-top { fill: var(--see-ink); stroke: #fff; stroke-width: 2; }
.sem-shadow-top-line { stroke: #1f2f45; stroke-width: 12; stroke-linecap: round; opacity: .6; }
.sem-sun-top { fill: #f6a821; stroke: #d98514; stroke-width: 2; }
.sem-shadow-words { font-size: .85rem; font-weight: 800; color: var(--see-ink); text-align: center; }

/* ------------------------------------------------ playing the year */
.sem-play {
    flex: 0 0 auto;
    align-self: flex-end;
    min-height: 44px;
    padding: .35rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--see-accent);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.sem-play[aria-pressed="true"] { background: #475569; }
.sem-play:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

/* ------------------------------------- a younger class: simple and year
 * Read from the back of a classroom: a bigger globe, bigger words everywhere. */
body.sem-simple .sem-fig figcaption,
body.sem-year .sem-fig figcaption { font-size: .95rem; }
body.sem-simple .sem-read-h,
body.sem-year .sem-read-h { font-size: .95rem; }
body.sem-simple .sem-globe-label,
body.sem-year .sem-globe-label { font-size: 12px; }
body.sem-simple .sem-ireland-lbl,
body.sem-year .sem-ireland-lbl { font-size: 15px; }
body.sem-simple .sem-shadow-words,
body.sem-year .sem-shadow-words { font-size: 1.2rem; }
body.sem-simple .sem-slider-top,
body.sem-year .sem-slider-top { font-size: 1.05rem; }
body.sem-simple .sem-slider input[type="range"],
body.sem-year .sem-slider input[type="range"] { height: 34px; }
body.sem-year .sem-dl-lbl { font-size: 1.15rem; min-width: 76px; }
body.sem-year .sem-dl-val { font-size: 1.3rem; min-width: 190px; }
body.sem-year .sem-dl-bar { height: 24px; border-radius: 12px; }
body.sem-year .sem-play { font-size: 1.15rem; min-height: 50px; }

body.sem-simple .sem-globes .sem-globe { max-height: 380px; }
body.display-mode.sem-simple .sem-globes .sem-globe { max-height: 420px; }

/* simple with the stick: the globe and the stick from above side by side, the time
   slider under both. */
body.sem-side .sem-container {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: "head head" "prompt prompt" "panels readouts" "sliders sliders" "empty empty";
    column-gap: .75rem;
    row-gap: .3rem;
    align-items: start;
}
body.sem-side .activity-header { grid-area: head; }
body.sem-side .sem-prompt { grid-area: prompt; }
body.sem-side .sem-panels { grid-area: panels; }
body.sem-side .sem-readouts { grid-area: readouts; flex-direction: column; }
body.sem-side .sem-sliders { grid-area: sliders; }
body.sem-side .sem-empty { grid-area: empty; }
body.sem-side .sem-read-shadow { flex: 1 1 auto; }
body.sem-side .sem-shadow-top { max-height: 200px; }

/* Full screen: the frame is the screen, so the globe and the stick grow with it. */
html:fullscreen .sem-fig svg,
html:fullscreen .sem-globes .sem-globe { max-height: 56vh; }
html:fullscreen body.sem-simple .sem-globes .sem-globe { max-height: 64vh; }
html:fullscreen body.sem-side .sem-shadow-top { max-height: 52vh; }

@media (max-width: 620px) {
    body.sem-side .sem-container { display: flex; }
}

/* ------------------------------------------ Ireland, close up (simple) */
.sem-closeup { width: 100%; height: auto; max-height: 190px; display: block; margin: 0 auto; }
.sem-closeup-sea { fill: #cfe6fb; }
.sem-closeup.is-dark .sem-closeup-sea { fill: #1f2f45; }
.sem-closeup-land { fill: #13a35a; stroke: #0b5c33; stroke-width: 1.5; stroke-linejoin: round; }
.sem-closeup.is-dark .sem-closeup-land { fill: #2d4a3a; stroke: #fde68a; }
.sem-closeup-moon { fill: #f4efe2; }
.sem-closeup-star { fill: #f4efe2; }
body.sem-side .sem-read-closeup { flex: 0 0 auto; }
html:fullscreen body.sem-side .sem-closeup { max-height: 34vh; }
body.sem-year .sem-fig svg,
body.sem-year .sem-globes .sem-globe { max-height: 250px; }
body.display-mode.sem-year .sem-fig svg,
body.display-mode.sem-year .sem-globes .sem-globe { max-height: 270px; }


/* =====================================================================
 * Board pass (31 Oct 2026): readable type, big sliders, fits the frame
 * Captions were 11px, readout words 11-13px, the pictures stopped at 186px and
 * the sliders were 26px high, in a box sized for a 620px lesson frame. Laptop
 * and board frames get larger type and 44px+ sliders, and the pictures take the
 * height that is left. The simple and year models keep their own larger type.
 * Display mode is not touched.
 * ===================================================================== */
.sem-slider input[type="range"]:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

@media (min-width: 700px) {
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-fig figcaption { font-size: .88rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-read-h { font-size: .85rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-lbl { font-size: 1rem; min-width: 70px; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-val { font-size: 1.05rem; min-width: 64px; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-sub { font-size: .9rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-flat { font-size: .95rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-shadow-words { font-size: 1rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-slider-top { font-size: .95rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-slider input[type="range"] { height: 44px; }
    body.maths-activity:not(.display-mode) .sem-play { min-height: 48px; }
    body.maths-activity:not(.display-mode) .sem-prompt { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode).sem-year .sem-slider input[type="range"],
    body.maths-activity:not(.display-mode).sem-simple .sem-slider input[type="range"] { height: 44px; }
}
@media (min-width: 1000px) and (min-height: 600px) {
    body.maths-activity:not(.display-mode) .sem-sliders { column-gap: 1.6rem; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-container {
        height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden;
        padding-top: .6rem; padding-bottom: .6rem;
    }
    body.maths-activity:not(.display-mode):not(.sem-side) .activity-header,
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-prompt,
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-readouts,
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-sliders { flex: 0 0 auto; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-panels { flex: 1 1 0; min-height: 120px; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-fig { min-height: 0; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-fig > svg { flex: 1 1 0; min-height: 0; max-height: none; height: 100%; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-globes { flex: 1 1 0; min-height: 0; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-globes .sem-globe { max-height: 100%; height: 100%; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-shadow,
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-moon { max-height: 90px; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-shadow-top { max-height: 190px; }
}
@media (min-width: 1500px) and (min-height: 760px) {
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-container { gap: .55rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-fig figcaption { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-read-h { font-size: 1rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-lbl { font-size: 1.2rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-val { font-size: 1.25rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-bar { height: 20px; border-radius: 10px; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-dl-sub { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-flat { font-size: 1.1rem; padding: .35rem .7rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-shadow-words { font-size: 1.2rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-slider-top { font-size: 1.2rem; }
    body.maths-activity:not(.display-mode):not(.sem-simple):not(.sem-year) .sem-slider input[type="range"] { height: 56px; }
    body.maths-activity:not(.display-mode).sem-year .sem-slider input[type="range"],
    body.maths-activity:not(.display-mode).sem-simple .sem-slider input[type="range"] { height: 56px; }
    body.maths-activity:not(.display-mode) .sem-play { min-height: 56px; font-size: 1.25rem; }
    body.maths-activity:not(.display-mode) .sem-prompt { font-size: 1.3rem; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-lbl { font-size: 12px; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-globe-label { font-size: 13px; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-shadow-lbl, body.maths-activity:not(.display-mode):not(.sem-side) .sem-moon-lbl { font-size: 11px; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-moon-sub { font-size: 10px; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-shadow,
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-moon { max-height: 120px; }
    body.maths-activity:not(.display-mode):not(.sem-side) .sem-shadow-top { max-height: 240px; }
}