/*
 * 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-diagram-labeller
 */
.dl-stage { font-family: 'Nunito', system-ui, sans-serif; }

/* ---- Framed diagram canvas ---------------------------------------------- */
.dl-diagram {
    position: relative;
    width: min(460px, 100%);
    margin: 4px auto 18px;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 50% 32%, #ffffff 0%, #eef3f9 100%);
    border: 1px solid #dbe3ec;
    border-radius: 20px;
    box-shadow: 0 14px 32px -16px rgba(15, 42, 80, .45), inset 0 1px 0 #fff;
    overflow: hidden;
}
.dl-diagram::after {
    /* soft inner vignette so the artwork sits in a "scene" */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    border-radius: 20px;
    box-shadow: inset 0 0 40px rgba(15, 42, 80, .06);
}
.dl-diagram svg { width: 100%; height: 100%; display: block; }

/* ---- Parts are the drop targets (no covering marker) -------------------- */
.dl-part { cursor: default; transition: filter .12s ease; }
/* a faint halo on unlabelled parts hints they are labelable, without hiding them */
.dl-part:not(.dl-part-filled) { filter: drop-shadow(0 0 1.5px rgba(21, 101, 192, .45)); }
/* glows as a label is dragged onto it */
.dl-part.dl-over { filter: drop-shadow(0 0 6px rgba(21, 101, 192, .95)); }
/* parts outside the lesson's labels subset are plain artwork — no halo */
.dl-part.dl-inactive { filter: none; }
.dl-part.dl-correct { filter: drop-shadow(0 0 6px rgba(22, 163, 74, .9)); }
.dl-part.dl-wrong { filter: drop-shadow(0 0 6px rgba(220, 38, 38, .9)); }

/* ---- Raster image base + anchor targets (hover ring + snap tag) --------- */
.dl-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dl-anchor {
    position: absolute; transform: translate(-50%, -50%);
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(21, 101, 192, .22); border: 2px solid rgba(21, 101, 192, .55);
    box-shadow: 0 1px 4px rgba(15, 42, 80, .3);
    pointer-events: none;                 /* matched by nearest-anchor, not hit-test */
    transition: width .12s ease, height .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
/* once a tag sits on it, the dot fades out (the tag carries it) */
.dl-anchor.dl-part-filled { background: transparent; border-color: transparent; box-shadow: none; }
/* glowing ring as a label is dragged near it */
.dl-anchor.dl-over {
    width: 42px; height: 42px;
    background: rgba(21, 101, 192, .12); border: 3px solid #1565c0;
    box-shadow: 0 0 0 5px rgba(21, 101, 192, .15);
}
.dl-anchor.dl-correct { background: rgba(22, 163, 74, .12); border-color: #16a34a; }
.dl-anchor.dl-wrong { background: rgba(220, 38, 38, .12); border-color: #dc2626; }

/* ---- Floating name-tag that snaps to a labelled part ------------------- */
.dl-tag {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 6px 12px;
    font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; line-height: 1;
    color: #1f2a37; background: #ffffff;
    border: 1.5px solid #cbd5e1; border-radius: 11px;
    box-shadow: 0 5px 14px -5px rgba(15, 42, 80, .5);
    white-space: nowrap; pointer-events: none;
    animation: dl-pop .26s ease;
}
.dl-tag.dl-correct { border-color: #16a34a; background: #f0fdf4; color: #14532d; }
.dl-tag.dl-correct::after {
    content: '\f00c';                      /* fa-check */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    margin-left: 7px; color: #16a34a;
}
.dl-tag.dl-wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; animation: dl-shake .4s ease; }

@keyframes dl-pop {
    0%   { transform: translate(-50%, -50%) scale(.55); }
    60%  { transform: translate(-50%, -50%) scale(1.08); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes dl-shake {
    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
    20% { transform: translate(-50%, -50%) translateX(-5px); }
    40% { transform: translate(-50%, -50%) translateX(5px); }
    60% { transform: translate(-50%, -50%) translateX(-4px); }
    80% { transform: translate(-50%, -50%) translateX(4px); }
}

/* graceful fallback (no built-in SVG) */
.dl-fallback { padding: 14px; color: #475569; font-size: 14px; }
.dl-fallback ul { margin: 8px 0 0; padding-left: 20px; }
.dl-fallback li { margin: 3px 0; font-weight: 700; }
.dl-held { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; padding: 24px; text-align: center; color: #475569; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; }
.dl-preview { position: absolute; left: 6px; right: 6px; bottom: 4px; z-index: 5; padding: 3px 8px; font: 800 12px/1.3 system-ui, sans-serif; text-align: center; border-radius: 6px; color: #7c2d12; background: #fed7aa; pointer-events: none; }
.dl-preview--rejected { color: #7f1d1d; background: #fecaca; }
.dl-held strong { font-size: 1.15em; color: #334155; }

/* ---- Label chips -------------------------------------------------------- */
.dl-tray-wrap { margin-bottom: 12px; }
.dl-tray-label {
    font-weight: 800; font-size: 12px; color: #64748b; margin-bottom: 7px;
    text-transform: uppercase; letter-spacing: .08em;
}
.dl-tray {
    min-height: 56px; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px;
    background: linear-gradient(180deg, #f1f5f9, #e7eef6);
    border: 1px dashed #cbd5e1; border-radius: 14px;
}

.dl-card {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #ffffff, #f3f7fb);
    border: 1.5px solid #cbd5e1; border-radius: 999px;
    padding: 8px 16px 8px 13px;
    font-weight: 800; font-size: 14px; color: #1f2a37;
    cursor: grab; user-select: none; touch-action: none;
    box-shadow: 0 2px 6px rgba(15, 42, 80, .14);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dl-card::before {
    content: '\f58e';                      /* fa-grip-vertical */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    color: #b3bdc9;
}
.dl-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -6px rgba(15, 42, 80, .35); }
.dl-card:active { cursor: grabbing; }
.dl-card.dl-dragging { opacity: .35; }

/* ---- Check / callout ---------------------------------------------------- */
.dl-target-panel { display: flex; align-items: center; gap: 14px; }
.dl-callout { font-weight: 800; }
.dl-callout.is-correct { color: #15803d; }
.dl-callout.is-miss { color: #b91c1c; }

.activity-container.display-mode .dl-card { cursor: default; }

/* ---- 12 Oct 2026: the board, not a laptop (QA #2353, #2356, #2363, #2365) ----
 * Tags and lines beside the parts, a bigger picture on a big screen, and the
 * labels next to the picture, so a child at the board sees both at once. Each
 * rule below only adds to what was there; a narrow screen and display mode keep
 * the stacked layout they had. */

/* Name-tags scale with the picture (13px at the old 460px size). */
.dl-diagram { container-type: inline-size; }
.dl-tag {
    font-size: max(13px, 2.85cqi);
    padding: max(6px, 1.3cqi) max(12px, 2.6cqi);
    border-radius: max(11px, 2.4cqi);
}

/* A tag the diagram places beside its part (data-tx/ty/side), with a line to it.
   Long labels (a job, not a name) wrap instead of running across the body. */
.dl-leaders {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
}
.dl-leaders line { stroke: #64748b; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.dl-leaders circle { fill: #334155; }
.dl-tag--callout { box-sizing: border-box; white-space: normal; width: max-content; max-width: 27%; text-align: center; line-height: 1.15; overflow-wrap: break-word; }
.dl-tag--left { transform: translate(-100%, -50%); animation-name: dl-pop-l; }
.dl-tag--right { transform: translate(0, -50%); animation-name: dl-pop-r; }
.dl-tag--left.dl-wrong { animation: dl-shake-l .4s ease; }
.dl-tag--right.dl-wrong { animation: dl-shake-r .4s ease; }
@keyframes dl-pop-l {
    0%   { transform: translate(-100%, -50%) scale(.55); }
    60%  { transform: translate(-100%, -50%) scale(1.08); }
    100% { transform: translate(-100%, -50%) scale(1); }
}
@keyframes dl-pop-r {
    0%   { transform: translate(0, -50%) scale(.55); }
    60%  { transform: translate(0, -50%) scale(1.08); }
    100% { transform: translate(0, -50%) scale(1); }
}
@keyframes dl-shake-l {
    0%, 100% { transform: translate(-100%, -50%) translateX(0); }
    25% { transform: translate(-100%, -50%) translateX(-5px); }
    50% { transform: translate(-100%, -50%) translateX(5px); }
    75% { transform: translate(-100%, -50%) translateX(-4px); }
}
@keyframes dl-shake-r {
    0%, 100% { transform: translate(0, -50%) translateX(0); }
    25% { transform: translate(0, -50%) translateX(-5px); }
    50% { transform: translate(0, -50%) translateX(5px); }
    75% { transform: translate(0, -50%) translateX(-4px); }
}

/* Display mode places every tag itself: the label tray is always empty there. */
body.display-mode .dl-tray-wrap { display: none; }

/* Wide enough for both: the picture on the left, as big as the screen allows,
   and the labels and Check beside it. In a lesson the interactive is a 620px
   frame, and stacked, the labels started below its bottom edge. */
@media (min-width: 760px) {
    body:not(.display-mode) .dl-stage {
        display: grid;
        grid-template-columns: auto minmax(200px, 1fr);
        grid-template-areas: "diagram tray" "diagram check";
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        align-items: start;
    }
    body:not(.display-mode) .dl-diagram {
        grid-area: diagram;
        margin: 4px 0 12px;
        width: max(320px, min(720px, calc(100vh - 150px), calc(100vw - 330px)));
    }
    body:not(.display-mode) .dl-tray-wrap { grid-area: tray; margin-top: 4px; }
    body:not(.display-mode) .dl-target-panel { grid-area: check; }
}
/* Fullscreen on a classroom board: label chips a class can read from the carpet. */
@media (min-width: 1200px) and (min-height: 760px) {
    body:not(.display-mode) .dl-card { font-size: 19px; padding: 11px 20px 11px 15px; }
}

/* ---- Science Week Challenge, Nov 2026 ----------------------------------------
 * Label boxes, drawn only on a diagram with `boxes: true` (the sw-* figures),
 * and competition mode, every rule of which is scoped to html.mcr-compete. A
 * lesson on one of the built-in diagrams matches nothing below. */

/* An empty box at each part in play, with a line from it to a dot on the part
   (the line and dot are drawn in the figure's SVG). The label goes in the box. */
.dl-box {
    position: absolute; z-index: 1;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 23%; min-height: 11.4%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: max(1.5px, .4cqi) dashed #9fb0c3;
    border-radius: max(6px, 1.6cqi);
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.dl-box.dl-box-filled { border-style: solid; border-color: #b8c6d6; background: #fff; box-shadow: 0 4px 12px -6px rgba(15, 42, 80, .45); }
.dl-box.dl-over,
.dl-box.dl-zone-over { border-style: solid; border-color: #1565c0; background: #eaf2fd; box-shadow: 0 0 0 4px rgba(21, 101, 192, .18); }
.dl-box.dl-correct { border-style: solid; border-color: #16a34a; background: #f0fdf4; }
.dl-box.dl-wrong { border-style: solid; border-color: #dc2626; background: #fef2f2; animation: dl-shake .4s ease; }
.dl-box.dl-need { border-color: #d97706; animation: dl-need .5s ease 2; }
.dl-part.dl-need { animation: dl-need-part .5s ease 2; }
@keyframes dl-need {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
    50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, .45); }
}
@keyframes dl-need-part {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 6px rgba(217, 119, 6, .95)); }
}

/* The label in its box: fills it, wraps between words, and is made smaller in
   code when one long word would not fit ("precipitation"). */
.dl-tag.dl-tag--boxed {
    position: static; transform: none;
    width: 100%; min-width: 0; box-sizing: border-box;
    padding: .18em .3em;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    white-space: normal; text-align: center; line-height: 1.05;
    font-size: calc(max(10px, 3cqi) * var(--dl-tag-scale, 1));   /* the scale: sizeLabels() */
    animation: dl-pop-in .22s ease;
}
.dl-tag.dl-tag--boxed.dl-correct,
.dl-tag.dl-tag--boxed.dl-wrong { background: none; animation: none; }
.dl-tag.dl-tag--boxed.dl-correct::after { font-size: .75em; margin-left: .28em; }
.dl-fix { display: block; margin-top: .12em; font-size: .78em; font-weight: 800; color: #b91c1c; }
@keyframes dl-pop-in {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* The line from a box to its part, the dot on the part, and the tap area round it. */
.dl-part .dl-lead { stroke: #53677e; stroke-width: 1.5; }
.dl-part .dl-dot { fill: #13253b; stroke: #fff; stroke-width: 1.2; }
.dl-part .dl-hit { fill: transparent; }
.dl-part.dl-correct .dl-lead { stroke: #16a34a; stroke-width: 2; }
.dl-part.dl-correct .dl-dot { fill: #16a34a; }
.dl-part.dl-wrong .dl-lead { stroke: #dc2626; stroke-width: 2; }
.dl-part.dl-wrong .dl-dot { fill: #dc2626; }
/* While a label is picked up (tap to place), every place it can go shows. */
html.pd-picking .dl-hit.pd-can-drop { outline: none; fill: rgba(245, 179, 1, .18); stroke: rgba(217, 140, 0, .9); stroke-width: 1.5; stroke-dasharray: 3 2; }
html.pd-picking .dl-box.pd-can-drop { outline: none; border-color: #d99a00; background-color: #fffbea; }
html.pd-picking .dl-box.pd-can-drop.dl-box-filled { background-color: #fff; }

/* ---- Competition mode: the round on the board, fitted by challenges.js ----
   The question across the top, the picture as big as the frame allows, and the
   labels in a column beside it. Sizes are the picture's natural size: the fit
   zooms the whole round to the frame, so they only set the proportions. */
html.mcr-compete body .dl-stage {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "prompt prompt" "diagram tray" "diagram check";
    grid-template-rows: auto auto 1fr;
    justify-content: center;
    align-items: start;
    column-gap: 20px;
}
html.mcr-compete .dl-prompt { grid-area: prompt; margin: 0 0 calc(var(--bu) * .5 / var(--mcr-fit, 1)); }
html.mcr-compete .dl-prompt[hidden] { display: none; }
html.mcr-compete body .dl-diagram { grid-area: diagram; width: 640px; margin: 0; }
/* The same sizes as the cqi ones above on that 640px picture, in px: WebKit (Safari) measures
   cqi on the picture AFTER the fit's zoom and then zooms the result again, so a label came out
   at nearly twice the size on a big board. */
html.mcr-compete .dl-box { border-width: 2.56px; border-radius: 10.24px; }
html.mcr-compete .dl-tag.dl-tag--boxed { font-size: calc(19.2px * var(--dl-tag-scale, 1)); }
html.mcr-compete body .dl-tray-wrap { grid-area: tray; margin: 0; min-width: 180px; }
html.mcr-compete .dl-tray-label { font-size: 13px; margin-bottom: 6px; }
html.mcr-compete .dl-tray {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 8px; padding: 10px; min-height: 0;
}
html.mcr-compete body .dl-card {
    font-size: 21px; line-height: 1.15; padding: 8px 18px 8px 13px; gap: 10px;
    white-space: nowrap; justify-content: flex-start;
}
html.mcr-compete .dl-card:hover { transform: none; }
/* The copy that follows a dragged label is outside the zoomed round: drawn the label's size. */
html.mcr-compete body > .dl-card {
    font-size: calc(21px * var(--mcr-fit, 1)); gap: calc(10px * var(--mcr-fit, 1));
    padding: calc(8px * var(--mcr-fit, 1)) calc(18px * var(--mcr-fit, 1)) calc(8px * var(--mcr-fit, 1)) calc(13px * var(--mcr-fit, 1));
}
html.mcr-compete body > .dl-card::before { font-size: calc(11px * var(--mcr-fit, 1)); }
/* Only the miss and the "put every label on first" line are shown: the top bar says right.
   The line keeps its room when empty, so the round never grows when it appears. */
html.mcr-compete body .dl-target-panel {
    grid-area: check; display: block;
    padding: 0; margin: 10px 0 0; border: 0; background: none; box-shadow: none;
}
html.mcr-compete .dl-callout { display: block; line-height: 1.3; min-height: 2.6em; }
html.mcr-compete .dl-callout[hidden],
html.mcr-compete .dl-callout.is-correct { display: block; visibility: hidden; }
html.mcr-compete .dl-callout.is-guard { color: #9a3412; }
/* Marked: nothing moves until Next. What is left in the tray says whether it should be. */
html.mcr-compete .dl-stage.dl-locked .dl-card { cursor: default; }
html.mcr-compete .dl-card.dl-card--spare { opacity: .5; box-shadow: none; }
html.mcr-compete .dl-card.dl-card--missed { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
html.mcr-compete .dl-box { cursor: pointer; }
html.mcr-compete .dl-stage.dl-locked .dl-box { cursor: default; }
/* A retry round (config retry: true): the class is told to move the labels with a cross, so a
   wrong label carries one, as a right label carries its tick. */
html.mcr-compete .dl-stage.dl-retry .dl-tag.dl-wrong::after {
    content: '\f00d';                      /* fa-xmark */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    margin-left: 7px; color: #dc2626;
}
html.mcr-compete .dl-stage.dl-retry .dl-tag.dl-tag--boxed.dl-wrong::after { font-size: .75em; margin-left: .28em; }