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

/* ---- Sorting key -------------------------------------------------------- */
.st-key {
    background: linear-gradient(180deg, #f3fdf6, #e9fbef);
    border: 1px solid #bbf7d0; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 16px;
    box-shadow: 0 4px 12px -8px rgba(20, 83, 45, .4);
}
.st-key-label { font-weight: 800; color: #14532d; font-size: 13px; margin-bottom: 6px; }
.st-key-label i { margin-right: 5px; }
.st-key-list { margin: 0; padding-left: 22px; font-size: 14px; color: #166534; }
.st-key-list li { margin: 3px 0; font-weight: 700; }

/* ---- Groups ------------------------------------------------------------- */
.st-groups { display: grid; gap: 14px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.st-groups.st-carroll { grid-template-columns: repeat(2, 1fr); }

.st-group {
    background: #ffffff; border: 1px solid #e2e8f0; border-top: 4px solid #6366f1;
    border-radius: 14px; padding: 12px;
    box-shadow: 0 6px 16px -10px rgba(15, 42, 80, .4);
}
.st-group h3 { font-size: 14px; font-weight: 800; margin: 0 0 9px; text-align: center; color: #312e81; }
.st-drop {
    min-height: 84px; border: 2px dashed #cbd5e1; border-radius: 10px; padding: 10px;
    display: flex; flex-wrap: wrap; gap: 9px; align-content: flex-start;
    background: #f8fafc;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.st-drop.st-over {
    border-style: solid; border-color: #4338ca; background: #eef0ff;
    box-shadow: inset 0 0 0 3px rgba(67, 56, 202, .12);
}

/* ---- Cards to sort ------------------------------------------------------ */
.st-tray-wrap { margin-bottom: 12px; }
.st-tray-label {
    font-weight: 800; font-size: 12px; color: #64748b; margin-bottom: 7px;
    text-transform: uppercase; letter-spacing: .08em;
}
.st-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;
}

.st-card {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #ffffff, #f3f7fb);
    border: 1.5px solid #cbd5e1; border-radius: 999px;
    padding: 9px 17px 9px 13px;
    font-weight: 800; font-size: 15px; 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, border-color .14s ease, background .14s ease;
}
.st-card::before {
    content: '\f58e';                      /* fa-grip-vertical */
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    color: #b3bdc9;
}
.st-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -6px rgba(15, 42, 80, .35); }
.st-card:active { cursor: grabbing; }
.st-card.st-dragging { opacity: .35; }
.st-card.st-correct {
    border-color: #16a34a; background: #f0fdf4; color: #14532d;
    animation: st-pop .26s ease;
}
.st-card.st-correct::before { color: #16a34a; }
.st-card.st-wrong {
    border-color: #dc2626; background: #fef2f2; color: #991b1b;
    animation: st-shake .4s ease;
}

@keyframes st-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes st-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }

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

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

/* Picture cards (cfg.cardImages): the picture over the word, for the classes still
   learning to read every word on a card (QA #2347, 12 Oct 2026). */
.st-card--pic {
    position: relative; flex-direction: column; gap: 4px;
    padding: 8px 12px 9px; border-radius: 16px;
}
.st-card--pic::before { position: absolute; top: 7px; left: 8px; }
.st-card-img {
    width: clamp(64px, 8vw, 116px); height: clamp(64px, 8vw, 116px);
    object-fit: contain; border-radius: 10px; background: #fff;
    pointer-events: none; user-select: none;
}
.st-card-label { line-height: 1.1; text-align: center; }

/* Walk mode (cfg.walk): the branching key drawn as the ladder it is. Each question sends a
   card right to its end on Yes, or down to the next question on No (QA #1254). */
.st-groups.st-ladder { display: block; }
.st-rung { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.st-rung-last { grid-template-columns: minmax(0, 1.25fr); }
.st-q { background: #f0fdf4; border: 2px solid #86efac; border-radius: 12px; padding: 8px 10px; }
.st-rung.is-asking .st-q { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
.st-q-text { font-weight: 800; color: #14532d; font-size: 14px; }
.st-walk-slot { margin-top: 6px; }
.st-walk-slot:empty { display: none; }
.st-answer { display: flex; gap: 8px; margin-top: 6px; }
.st-answer[hidden] { display: none; }
.st-yes-arrow { font-weight: 800; color: #15803d; white-space: nowrap; font-size: 13px; }
.st-no-arrow { font-weight: 800; color: #b45309; font-size: 13px; padding: 3px 0 3px 22px; }
.st-leaf { padding: 6px 8px; }
.st-leaf h3 { margin-bottom: 4px; }
.st-leaf .st-drop { min-height: 36px; }

/* Walk mode on one board screen (QA #1960, #2367): the cards above the key, each
   end a one-line name with its card landing beside it, the last No end in the end
   column, no drag grip (a walked card is tapped, never dragged), tighter rungs. */
.st-walk .st-tray-wrap { margin-bottom: 10px; }
.st-walk .st-tray { min-height: 0; padding: 8px 10px; gap: 8px; }
.st-walk .st-tray-label { margin-bottom: 5px; }
.st-walk .st-card { cursor: pointer; padding: 7px 15px; }
.st-walk .st-card::before { content: none; }
.st-walk .st-groups.st-ladder { margin-bottom: 10px; }
.st-walk .st-rung { gap: 4px 10px; }
.st-walk .st-q {
    padding: 5px 10px; border-radius: 10px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px;
}
.st-walk .st-q-text { flex: 1 0 100%; }
/* The card being walked and its Yes / No on one line under the question. */
.st-walk .st-walk-slot, .st-walk .st-answer { margin-top: 0; }
.st-walk .st-no-arrow { padding: 1px 0 1px 22px; line-height: 1.2; font-size: 12px; }
.st-walk .st-leaf {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    padding: 4px 10px; min-height: 0;
    border-top-width: 1px; border-left: 4px solid #6366f1; border-radius: 10px;
    box-shadow: none;
}
.st-walk .st-leaf h3 { margin: 0; text-align: left; font-size: 14px; }
.st-walk .st-leaf .st-drop {
    min-height: 0; border: 0; padding: 0; background: none; box-shadow: none;
    display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto;
}
.st-walk .st-leaf .st-card { padding: 4px 12px; font-size: 14px; }
.st-walk .st-leaf .st-card-img { width: 40px; height: 40px; }
.st-rung.st-rung-final { grid-template-rows: auto auto; }
.st-rung.st-rung-final > .st-q { grid-row: 1 / span 2; }

/* The answer bar: the card, its question, Yes and No, always in one place above the key. */
.st-ask {
    display: flex; align-items: center; gap: 10px; min-height: 58px; box-sizing: border-box;
    margin: 0 0 8px; padding: 6px 10px; border-radius: 12px;
    background: #14532d; color: #fff;
}
.st-ask.is-idle { background: #eef2f7; color: #475569; }
.st-ask.is-idle .st-ask-btns { visibility: hidden; }
.st-ask-slot:empty { display: none; }
.st-ask-slot .st-card { padding: 7px 14px; font-size: 16px; cursor: default; }
.st-ask-slot .st-card:hover { transform: none; }
.st-ask-q { flex: 1 1 auto; font-weight: 800; font-size: 20px; line-height: 1.15; }
.st-ask-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.st-ask-btns .btn-control { min-width: 72px; min-height: 46px; font-size: 18px; font-weight: 800; }
.st-ask-btns .st-yes { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.st-ask-btns .st-no { background: #ffedd5; border-color: #c2410c; color: #7c2d12; }

/* The stage's own columns now hold only words, so the question column gives room to the ends. */
.st-walk .st-rung { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr); }
.st-walk .st-rung.is-asking .st-q { background: #bbf7d0; border-color: #15803d; }
.st-walk .st-q { min-height: 30px; box-sizing: border-box; }
.st-walk .st-leaf { min-height: 30px; box-sizing: border-box; }
.st-walk .st-leaf .st-card { padding: 2px 10px; }

/* cfg.reveal: a question stays hidden until a card reaches it, an end's name until a card lands.
   Hidden, not removed: the space is kept, so nothing moves as the key fills in. */
.st-reveal .st-rung > .st-q, .st-reveal .st-rung > .st-yes-arrow, .st-reveal .st-no-arrow { visibility: hidden; }
.st-reveal .st-rung.is-seen > .st-q, .st-reveal .st-rung.is-seen > .st-yes-arrow, .st-reveal .st-no-arrow.is-seen { visibility: visible; }
.st-reveal .st-rung:not(.is-seen) > .st-leaf, .st-reveal .st-rung:not(.is-seen) > .st-last-no-arrow { visibility: hidden; }
.st-reveal .st-leaf:not(.is-reached) h3 { color: transparent; position: relative; }
.st-reveal .st-leaf:not(.is-reached) h3::after {
    content: '?'; position: absolute; left: 0; top: 0; color: #94a3b8; font-size: 16px;
}
.st-leaf--same h3 { display: none; }

/* A shorter header in walk mode, so the key gets the frame's height. */
.activity-container.st-walk-on .activity-header { padding: 6px 12px; margin-bottom: 6px; gap: 6px; }
.st-ask-btns .btn-control { min-height: 46px; padding: 6px 12px; }

/* A whole sort (a challenge with `answers`) marks every card on one Check, with a tick or a cross
   where the grip was, so the marking reads without colour as well. */
.st-whole .st-card.st-correct::before { content: '\f00c'; color: #16a34a; font-size: 13px; }
.st-whole .st-card.st-wrong::before { content: '\f00d'; color: #dc2626; font-size: 13px; }
.st-callout.is-hold { color: #92400e; }

/* ---------- Competition layout (html.mcr-compete: the Maths / Science Week board) ----------
 * Nothing below reaches a lesson page. The question is the challenge label (#challengePrompt,
 * sized by challenges.js). A whole sort is one grid: the cards to sort down the left, a column per
 * group beside it, every column the same width, the headings sharing one row and the boxes the
 * next, every box stacking its cards one under another. However the class shares the cards out,
 * no box holds more than the tray did when the round was fitted, so nothing grows and nothing
 * scrolls. The narrowest a column may be is set from the longest word on a card or a heading
 * (--st-card-word / --st-head-word, measured in em by sorting-tree.js), so a long word never
 * spills out of its card: the shared fit sees the floor and shrinks the round instead.
 * Sized in px, never rem: WebKit (Safari) does not apply the fit's zoom to rem, so rem-sized rules
 * stayed small there and left the board half empty. */
html.mcr-compete .activity-container.st-board { display: flex; flex-direction: column; }
html.mcr-compete .st-board > * { flex-shrink: 0; }
/* The question is the biggest thing on the board. challenges.js holds it at one size whatever the
   fit; a short sort is fitted large, and its group names then outgrew it, so it grows with them. */
html.mcr-compete .st-board #challengePrompt {
    text-align: center;
    font-size: max(calc(var(--bu) * 2.6 / var(--mcr-fit, 1)), 28px);
    margin: 0 0 calc(var(--bu) * 0.55 / var(--mcr-fit, 1));
}

html.mcr-compete .st-stage.st-board-grid {
    flex: 1 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto 1fr;
    grid-auto-columns: minmax(max(calc(var(--st-card-word, 6) * 20.8px + 70.4px),
                                  calc(var(--st-head-word, 6) * 22.4px + 27.2px)), 1fr);
    column-gap: 14.4px;
    row-gap: 0;
}
html.mcr-compete .st-board-grid .st-groups,
html.mcr-compete .st-board-grid .st-group,
html.mcr-compete .st-board-grid .st-tray-wrap { display: contents; }
/* Check sits in the action bar and the message beside it, so the panel itself takes no room. */
html.mcr-compete .st-board-grid #checkPanel:not([hidden]) { display: contents; }
html.mcr-compete .st-board-grid .st-tray-label { grid-column: 1; grid-row: 1; }
html.mcr-compete .st-board-grid .st-tray { grid-column: 1; grid-row: 2; }

html.mcr-compete .st-board-grid .st-group h3,
html.mcr-compete .st-board-grid .st-tray-label {
    margin: 0; padding: 7.2px 9.6px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 22.4px; font-weight: 900; line-height: 1.15;
    letter-spacing: 0; text-transform: none;
    border: 2px solid; border-bottom: 0; border-radius: 14px 14px 0 0;
    cursor: pointer;
}
html.mcr-compete .st-board-grid .st-group h3 { background: #e0e7ff; border-color: #a5b4fc; color: #312e81; }
html.mcr-compete .st-board-grid .st-tray-label { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }

html.mcr-compete .st-board-grid .st-drop,
html.mcr-compete .st-board-grid .st-tray {
    min-height: 0; margin: 0; padding: 8.8px;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: flex-start; gap: 8px;
    border: 2px solid; border-radius: 0 0 14px 14px; box-shadow: none;
}
html.mcr-compete .st-board-grid .st-drop { background: #f8faff; border-color: #a5b4fc; }
html.mcr-compete .st-board-grid .st-tray { background: #eef2f7; border-color: #cbd5e1; }
html.mcr-compete .st-board-grid .st-drop.st-over,
html.mcr-compete .st-board-grid h3.st-over { background: #e0e7ff; border-color: #4338ca; }
/* A picked-up card lights the boxes it can go to; the headings stay plain. */
html.pd-picking .st-board-grid [data-drop-for].pd-can-drop { outline: none; }

html.mcr-compete .st-board-grid .st-card {
    display: flex; box-sizing: border-box; width: 100%; min-width: 0;
    font-size: 20.8px; line-height: 1.2;
    padding: 7.2px 9.6px 7.2px 7.2px; gap: 0.3em;
    border-width: 2px; border-radius: 12px; cursor: pointer;
}
/* No grip on the board (a card is tapped there as often as dragged): the room it took holds the
   tick or cross once the round is marked, so marking moves nothing. */
html.mcr-compete .st-board-grid .st-card::before {
    content: ''; flex: 0 0 0.95em; text-align: center;
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.95em;
}
html.mcr-compete .st-card.st-correct { background: #dcfce7; }
html.mcr-compete .st-card.st-wrong { background: #fee2e2; }
html.mcr-compete .st-card.st-correct::before { content: '\f00c'; color: #15803d; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
html.mcr-compete .st-card.st-wrong::before { content: '\f00d'; color: #b91c1c; font-family: 'Font Awesome 6 Free'; font-weight: 900; }

/* The message (what was wrong, or "Place every card first.") sits in the action bar, left of
   Check, rather than in the round: arriving under the boxes it would push them past the frame.
   One size whatever the fit, like Check itself. The green "right" line is the play page's job. */
html.mcr-compete .st-board #resultCallout {
    position: fixed; z-index: 42;
    zoom: calc(1 / var(--mcr-fit, 1));
    left: calc(var(--bu) * 1.2); bottom: 0;
    height: var(--mcr-bar); max-width: calc(var(--bu) * 36);
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
    display: flex; align-items: center;
    font-size: calc(var(--bu) * 1.3); line-height: 1.2; font-weight: 800;
}
html.mcr-compete .st-board #resultCallout[hidden],
html.mcr-compete .st-board #resultCallout.is-correct { display: none; }
/* ---------- end competition layout ---------- */