@import url("map-marking.css"); /* Also supports previously cached host HTML. */
/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-see-map-explorer
 *
 * Budget: interactive mode is a FIXED 620px iframe that never resizes.
 * header ~56 + layers ~40 + map 380 + foot 22 + detail ~56 = ~554.
 * Palette + [hidden] fix: ../shared/css/see-activity.css
 * Pan/zoom chrome: ../shared/css/see-viewport.css
 */

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

/* ----------------------------------------------------------------- layers */
.me-layers {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.me-layer {
    min-height: 38px;
    padding: .25rem .8rem;
    border-radius: 999px;
    border: 2px solid var(--maths-border);
    background: #fff;
    color: var(--maths-ink-muted);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}

.me-layer.is-on {
    background: var(--see-accent);
    border-color: var(--see-accent);
    color: #fff;
}

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

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

/* ------------------------------------------------------------------- map */
.me-stage {
    flex: 1 1 auto;
    min-height: 380px;
    max-height: 420px;
}

.me-stage .sv-viewport { min-height: 358px; }

/* Drawn features: a river, a coast, a border, a route. preserveAspectRatio is
 * none on the SVG, so the 0-100 viewBox stretches to the image exactly. */
.me-features {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.me-feature {
    fill: none;
    stroke: var(--see-accent);
    stroke-width: .7;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* `kind` is colour and icon only and carries no behaviour, so a lesson can
 * invent one safely: an unknown kind simply falls through to these defaults. */
.me-feature.me-kind-river { stroke: #2563eb; }
.me-feature.me-kind-coast { stroke: #0e7490; }
.me-feature.me-kind-border { stroke: #7c5228; stroke-dasharray: 3 2; }
.me-feature.me-kind-route { stroke: #be123c; stroke-dasharray: 4 2; }
.me-feature.me-kind-road { stroke: #6b5844; }

/* ------------------------------------------------------------------ pins
 * 44px minimum: a finger on an interactive whiteboard. The counter-scale in
 * see-viewport.css keeps that true at every zoom level. */
.me-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}

.me-pin-dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--see-accent);
    color: #fff;
    font-size: .95rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.me-pin-label {
    padding: .05rem .4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--maths-border);
    font-size: .76rem;
    font-weight: 800;
    color: var(--see-ink);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An unnamed pin. A question mark, not a blank: it says "there is something
 * here and we have not named it yet", which is the beat. */
.me-pin-label.me-pin-hidden {
    background: var(--see-bright);
    color: #fff;
    border-color: var(--see-accent);
    min-width: 22px;
    text-align: center;
}

.me-pin:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 3px; }

.me-pin.me-kind-town .me-pin-dot { background: #2563eb; }
.me-pin.me-kind-river .me-pin-dot { background: #0e7490; }
.me-pin.me-kind-hill .me-pin-dot { background: #15803d; }
.me-pin.me-kind-building .me-pin-dot { background: #b45309; }
.me-pin.me-kind-work .me-pin-dot { background: #7c3aed; }

/* ------------------------------------------------------------------ foot */
.me-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .6rem;
    font-size: .75rem;
    color: var(--maths-ink-muted);
    min-height: 16px;
}

.me-scale { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.me-credit { display: inline-flex; align-items: baseline; gap: .5rem; text-align: right; }
.me-attribution { text-align: right; }

/* The full credit is drawn on the map image itself; this opens it in words, with
 * the Copernicus no-liability notice its licence asks for on a contour map. */
.me-credits-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--see-accent);
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.me-credits-btn:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

/* Print: a paper copy of the map on the board, for pairs or for the wall. */
.me-print-btn {
    padding: .15rem .55rem;
    border: 2px solid var(--see-accent);
    border-radius: 999px;
    background: #fff;
    color: var(--see-accent);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.me-print-btn:focus-visible,
.me-print-menu button:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

.me-print-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.me-print-menu button {
    min-height: 38px;
    padding: .25rem .9rem;
    border: 2px solid var(--see-accent);
    border-radius: 999px;
    background: var(--see-accent);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .88rem;
    cursor: pointer;
}

/* One line saying why the class sees squared paper, or that a flat place's
 * contour map reaches further than its street map. */
.me-note {
    margin: 0;
    padding: .3rem .7rem;
    border-radius: 8px;
    background: var(--see-subtle);
    color: var(--see-ink);
    font-size: .85rem;
    font-weight: 700;
}

.me-detail {
    padding: .4rem .7rem;
    border-radius: 9px;
    background: var(--maths-surface-alt);
    color: var(--maths-ink);
    font-size: .93rem;
    line-height: 1.3;
}

/* ---------------------------------------------------------------- marking
 * The class marks the map (markTools): pins, lines, shaded areas. Big targets
 * for a finger on an interactive whiteboard. While marking, the map takes every
 * pixel the 620px frame has left after the bar, and grows to the screen in
 * fullscreen, so nobody draws a catchment on a postage stamp. Display mode never
 * marks. */
body.me-marking { margin: 0; }

body.me-marking .me-container {
    position: relative;
    box-sizing: border-box;
    padding: 10px 12px 12px;
}

body.me-marking .me-stage {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    max-height: none;
}

body.me-marking .me-stage .sv-viewport {
    flex: 1 1 auto;
    height: auto;
    min-height: 230px;
}

body.me-marking.me-tool-pins .sv-viewport,
body.me-marking.me-tool-lines .sv-viewport,
body.me-marking.me-tool-areas .sv-viewport { cursor: crosshair; }

/* While marking, the map fills the frame, so a pin's details and the print menu
 * float over its foot instead of pushing the map up in the middle of a line. */
body.me-marking .me-detail,
body.me-marking .me-print-menu {
    position: absolute;
    right: 1.4rem;
    bottom: 2.6rem;
    z-index: 6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

body.me-marking .me-detail {
    left: 1.4rem;
    cursor: pointer;
}

/* ----------------------------------------------------------- display mode */
body.display-mode .me-layers { display: none !important; }
body.display-mode .me-container { gap: .25rem; }
body.display-mode .me-stage { min-height: 400px; max-height: 470px; }
body.display-mode .me-stage .sv-viewport { min-height: 380px; }
body.display-mode .me-pin-label { font-size: .84rem; }
body.display-mode .me-prompt { text-align: center; }

/* The shared display-mode rule hides the whole header, but the teacher at the
 * board zooms and pans the map, so its Out, In, Fit and Fullscreen buttons come
 * back as a slim row above the map, on the right. The instructions stay hidden:
 * the lesson's caption names the map, so they would say it twice. Fullscreen
 * joined the row on 15 Oct 2026 (Alan's board review: the map at the board
 * should go full screen), and in full screen the map takes the whole screen. */
body.display-mode.me-activity .activity-header {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none !important;
    box-shadow: none;
}
body.display-mode.me-activity .activity-header .header-left { display: none; }
body.display-mode.me-activity .controls-container { width: auto; }
body.display-mode.me-activity .btn-group-activity { justify-content: flex-end; }

/* Full screen: the frame is the screen, so the map stops at its edge rather than
 * at the iframe's 420-470px. Every mode, not only the board's. */
html:fullscreen body.me-activity { margin: 0; }
html:fullscreen .me-container {
    height: 100vh;
    box-sizing: border-box;
    padding: 8px 12px 12px;
}
html:fullscreen .me-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
}
html:fullscreen .me-stage .sv-viewport {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

@media (max-width: 560px) {
    .me-stage { min-height: 300px; }
    .me-stage .sv-viewport { min-height: 280px; }
    .me-pin-label { max-width: 96px; }
}


/* =====================================================================
 * Board pass (31 Oct 2026): readable type, 44px targets, fits the frame
 * The map stopped at 380-420px, the pin names were 12px and the layer chips
 * 38px, in a box sized for a 620px lesson frame. Laptop and board frames get
 * 44px targets and larger type, and the map takes the frame height that is
 * left. Display mode and full screen are not touched.
 * ===================================================================== */
@media (min-width: 700px) {
    body.maths-activity:not(.display-mode) .me-layer { min-height: 44px; font-size: 1rem; padding: .25rem 1rem; }
    body.maths-activity:not(.display-mode) .me-prompt { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode) .me-note { font-size: .95rem; }
    body.maths-activity:not(.display-mode) .me-pin-label { font-size: .92rem; max-width: 190px; }
    body.maths-activity:not(.display-mode) .me-pin-dot { width: 34px; height: 34px; font-size: 1.05rem; }
    body.maths-activity:not(.display-mode) .me-foot { font-size: .9rem; }
    body.maths-activity:not(.display-mode) .me-credits-btn { min-height: 44px; padding: 0 .4rem; }
    body.maths-activity:not(.display-mode) .me-print-btn { min-height: 44px; padding: .2rem 1rem; }
    body.maths-activity:not(.display-mode) .me-print-menu button { min-height: 44px; font-size: 1rem; }
    body.maths-activity:not(.display-mode) .me-detail { font-size: 1.1rem; padding: .5rem .9rem; }
    body.maths-activity:not(.display-mode) .me-tool,
    body.maths-activity:not(.display-mode) .me-key-chip,
    body.maths-activity:not(.display-mode) .me-key-add,
    body.maths-activity:not(.display-mode) .me-mark-btn,
    body.maths-activity:not(.display-mode) .me-panel-btn { font-size: 1rem; }
    body.maths-activity:not(.display-mode) .me-mk-label,
    body.maths-activity:not(.display-mode) .me-mark-layer > .me-ink-label { font-size: .9rem; }
}
@media (min-width: 1000px) and (min-height: 600px) {
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-container {
        height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden;
        padding-top: .6rem; padding-bottom: .6rem;
    }
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .activity-header { flex: 0 0 auto; }
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-stage {
        flex: 1 1 auto; min-height: 0; max-height: none; display: flex; flex-direction: column; box-sizing: border-box;
    }
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-stage .sv-viewport { flex: 1 1 auto; height: auto; min-height: 0; }
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-foot,
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-detail,
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-layers,
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-prompt,
    html:not(:fullscreen) body.maths-activity:not(.display-mode) .me-note { flex: 0 0 auto; }
}
@media (min-width: 1500px) and (min-height: 760px) {
    body.maths-activity:not(.display-mode) .me-container { gap: .55rem; }
    body.maths-activity:not(.display-mode) .me-layer { min-height: 52px; font-size: 1.15rem; }
    body.maths-activity:not(.display-mode) .me-prompt { font-size: 1.3rem; padding: .6rem 1rem; }
    body.maths-activity:not(.display-mode) .me-note { font-size: 1.05rem; }
    body.maths-activity:not(.display-mode) .me-pin { min-width: 56px; min-height: 56px; }
    body.maths-activity:not(.display-mode) .me-pin-label { font-size: 1.1rem; max-width: 240px; }
    body.maths-activity:not(.display-mode) .me-pin-dot { width: 42px; height: 42px; font-size: 1.25rem; }
    body.maths-activity:not(.display-mode) .me-foot { font-size: 1rem; }
    body.maths-activity:not(.display-mode) .me-detail { font-size: 1.35rem; padding: .7rem 1.1rem; }
    body.maths-activity:not(.display-mode) .me-tool,
    body.maths-activity:not(.display-mode) .me-key-chip,
    body.maths-activity:not(.display-mode) .me-key-add,
    body.maths-activity:not(.display-mode) .me-mark-btn,
    body.maths-activity:not(.display-mode) .me-panel-btn { min-height: 56px; font-size: 1.15rem; }
    body.maths-activity:not(.display-mode) .me-mk-label,
    body.maths-activity:not(.display-mode) .me-mark-layer > .me-ink-label { font-size: 1.05rem; }
}