/*
 * 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; }

/* Tools, Undo and Clear on one row; the key beside them when it fits, under them
 * when it does not. Two rows at most for a usual key, so the map keeps its room. */
.me-mark-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
}

.me-mark-tools,
.me-mark-toolset,
.me-mark-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.me-mark-toolset { margin-right: .5rem; }

.me-tool,
.me-key-chip,
.me-key-add,
.me-mark-btn,
.me-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .25rem .8rem;
    border: 2px solid var(--maths-border);
    border-radius: 10px;
    background: #fff;
    color: var(--see-ink);
    font-family: 'Nunito', sans-serif;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    touch-action: manipulation;
}

.me-tool[aria-checked="true"],
.me-panel-btn.is-primary {
    background: var(--see-accent);
    border-color: var(--see-accent);
    color: #fff;
}

.me-key-chip[aria-checked="true"] {
    border-color: var(--see-ink);
    box-shadow: inset 0 0 0 2px var(--see-ink);
}

.me-key-swatch {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, .25);
}

.me-key-add {
    border-style: dashed;
    color: var(--maths-ink-muted);
}

.me-mark-btn:disabled {
    opacity: .45;
    cursor: default;
}

.me-tool:focus-visible,
.me-key-chip:focus-visible,
.me-key-add:focus-visible,
.me-mark-btn:focus-visible,
.me-panel-btn:focus-visible,
.me-mk-pin:focus-visible { outline: 3px solid var(--maths-focus-ring); outline-offset: 2px; }

/* What is being drawn and what to do next. It floats over the top of the map, so
 * the map never moves under a finger halfway through a line. */
.me-mark-panel {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: max-content;
    max-width: calc(100% - 36px);
    padding: .35rem .5rem;
    border: 2px solid var(--see-bright);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* Only its controls take a tap; the rest of it lets taps through to the map. */
.me-mark-panel { pointer-events: none; }
.me-mark-panel button,
.me-mark-panel input { pointer-events: auto; }

.me-mark-panel.is-low {
    top: auto;
    bottom: 18px;
}

.me-panel-text {
    padding: 0 .3rem;
    font-weight: 800;
    color: var(--see-ink);
}

.me-mark-panel input {
    width: 15em;
    max-width: 60vw;
    min-height: 44px;
    padding: .2rem .6rem;
    border: 2px solid var(--maths-border);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    color: var(--maths-ink);
}

/* Lines and areas, in the image's own 0-100 frame. Widths are screen pixels at
 * every zoom: --see-inv undoes the map's scale, the way it keeps a pin 44px. */
.me-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.me-ink polyline,
.me-ink polygon {
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.me-ink .ink-halo { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: calc(10px * var(--see-inv, 1)); }
.me-ink .ink-line { fill: none; stroke-width: calc(5px * var(--see-inv, 1)); }
.me-ink .ink-area { fill-opacity: .3; stroke-width: calc(3px * var(--see-inv, 1)); }
.me-ink .is-draft { stroke-dasharray: calc(10px * var(--see-inv, 1)) calc(6px * var(--see-inv, 1)); }
.me-ink .ink-hit { fill: none; stroke: transparent; stroke-width: calc(30px * var(--see-inv, 1)); }
.me-ink .is-sel { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }

/* Select: a tap on a line or inside an area picks it. Every other tool lets the
 * tap through to the map, so a pin can go inside a shaded area. */
body.me-tool-select .me-ink .ink-hit { pointer-events: stroke; }
body.me-tool-select .me-ink .ink-area[data-mark] { pointer-events: fill; }

/* A class's pin. The dot sits exactly where the finger went down and the name
 * hangs below it; 44px to tap or drag. */
.me-mark-layer > .me-mk-pin {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    cursor: grab;
    touch-action: none;
}

.me-mk-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mk, #7c5228);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .4);
}

/* While a line or an area is being drawn, the class's pins let the tap through to
 * the map: a walk route passes the finds the class has already pinned. */
body.me-tool-lines .me-mark-layer > .me-mk-pin,
body.me-tool-areas .me-mark-layer > .me-mk-pin { pointer-events: none; }

.me-mk-pin.is-sel .me-mk-dot {
    box-shadow: 0 0 0 3px var(--see-ink), 0 0 0 6px #fff, 0 1px 6px rgba(0, 0, 0, .5);
}

.me-mk-label,
.me-mark-layer > .me-ink-label {
    max-width: 230px;
    overflow: hidden;
    padding: .05rem .4rem;
    border-radius: 6px;
    border: 2px solid var(--mk, var(--maths-border));
    background: rgba(255, 255, 255, .94);
    color: var(--see-ink);
    font-family: 'Nunito', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.me-mk-label {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
}

/* A point of the selected line or area: drag it to move it. While drawing, the
 * first point is big and solid: tap it to join the line up or finish the area. */
.me-mark-layer > .me-vx {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    cursor: grab;
    touch-action: none;
}

.me-vx::after {
    content: '';
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 4px solid var(--mk, #7c5228);
    background: #fff;
}

.me-vx.is-first::after {
    width: 26px;
    height: 26px;
    border-color: #fff;
    background: var(--mk, #7c5228);
    box-shadow: 0 0 0 2px var(--mk, #7c5228);
}

.me-mark-layer > .me-vx.is-passive { pointer-events: none; }

/* 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; }

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