/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 * Ref: CI-cspe-structure-mapper
 */

.sm-container { font-family: 'Nunito', system-ui, sans-serif; }

/* ---- the bank of cards still to place ---- */
.sm-bank-wrap {
    background: #f7f8fc;
    border: 2px dashed #cdd3e6;
    border-radius: 14px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
}
.sm-bank-label {
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 0.75rem; color: #6b7290; margin-bottom: 0.5rem;
}
.sm-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- the tree, as nested lists ---- */
.sm-tree-wrap { overflow-x: auto; padding: 0.25rem 0 0.5rem; }

.sm-tree, .sm-children { list-style: none; margin: 0; padding: 0; }

.sm-children {
    margin-left: 1.6rem;
    padding-left: 1.1rem;
    border-left: 3px solid #dfe3f0;   /* the spine every child hangs from */
}

.sm-branch { position: relative; margin: 0.4rem 0; }

/* The elbow from the spine to the card. Drawn in CSS so there is no layout
   arithmetic to get wrong when the tree reflows on a narrow screen. */
.sm-children > .sm-branch::before {
    content: '';
    position: absolute;
    left: -1.1rem;
    top: 1.35rem;
    width: 1.1rem;
    height: 3px;
    background: #dfe3f0;
}

/* ---- a card ---- */
.sm-card {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    position: relative;
    background: #fff;
    border: 2px solid #d7dcea;
    border-radius: 12px;
    padding: 0.5rem 0.8rem;
    min-width: 8rem;
    cursor: grab;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.sm-card:active { cursor: grabbing; }

.sm-label { font-weight: 700; color: #2c3350; line-height: 1.25; }
.sm-note { font-size: 0.82rem; color: #6b7290; }

/* What this node is TO its parent. The relationship is the half of a structure a
   diagram usually leaves out, and it is where the teaching sits. */
.sm-rel {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; color: #7c5cff;
}

.sm-card.sm-over { border-color: #7c5cff; box-shadow: 0 0 0 4px #7c5cff22; }
.sm-card.sm-dragging { opacity: 0.45; transform: scale(0.98); }
.sm-card.sm-in-bank { border-style: dashed; background: #fff; }

.sm-card.sm-right { border-color: #4fc98a; background: #f2fbf6; }
.sm-card.sm-wrong { border-color: #e88b9a; background: #fdf4f6; }

/* ---- the second attribute ---- */
.sm-value {
    display: inline-block; margin-top: 0.15rem;
    border-radius: 999px; padding: 0.05rem 0.55rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
    background: #eceefb; color: #4a4f7a;
}
/* A named scale gets a colour ramp by convention: none / some / lots. Anything
   else falls back to the neutral chip above, which is correct rather than wrong. */
.sm-value-none  { background: #f1f2f7; color: #6b7290; }
.sm-value-some  { background: #fdf0d8; color: #8a6420; }
.sm-value-a-lot,
.sm-value-lots  { background: #d9f3e5; color: #14603c; }

.sm-value-btn {
    position: absolute; top: 0.3rem; right: 0.35rem;
    border: none; background: transparent; cursor: pointer;
    color: #aab0c8; font-size: 0.85rem; padding: 0.1rem 0.2rem; border-radius: 6px;
}
.sm-value-btn:hover { color: #7c5cff; background: #7c5cff14; }

.sm-key {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 1rem; padding: 0.6rem 0.85rem;
    background: #f7f8fc; border: 1px solid #e3e6f0; border-radius: 12px;
}
.sm-key-label { font-weight: 700; color: #4a5070; }
.sm-key-items { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- feedback ---- */
.sm-status {
    margin-top: 0.9rem; padding: 0.7rem 0.95rem; border-radius: 0 10px 10px 0;
    font-weight: 600;
}
.sm-status-ok   { background: #f2fbf6; border-left: 5px solid #4fc98a; color: #14603c; }
.sm-status-warn { background: #fffbf0; border-left: 5px solid #f0b23c; color: #6d5520; }

.sm-prompts { margin-top: 1rem; padding-left: 1.2rem; color: #4a5070; }
.sm-prompts li { margin-bottom: 0.35rem; }

.sm-empty {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1.2rem; color: #6b7290; background: #f7f8fc;
    border: 2px dashed #d8dbe8; border-radius: 14px;
}

/* ---- display mode: read from the back of the room ---- */
body.display-mode .sm-label { font-size: 1.3rem; }
body.display-mode .sm-note { font-size: 1rem; }
body.display-mode .sm-rel { font-size: 0.85rem; }
body.display-mode .sm-card { padding: 0.7rem 1.1rem; min-width: 11rem; cursor: default; }
body.display-mode .sm-value { font-size: 0.9rem; }
body.display-mode .sm-children { margin-left: 2.2rem; padding-left: 1.5rem; }
body.display-mode .sm-children > .sm-branch::before { left: -1.5rem; width: 1.5rem; }
body.display-mode .controls-container { display: none; }
body.display-mode .sm-value-btn { display: none; }

@media (max-width: 640px) {
    .sm-children { margin-left: 0.9rem; padding-left: 0.8rem; }
    .sm-children > .sm-branch::before { left: -0.8rem; width: 0.8rem; }
    .sm-card { min-width: 6.5rem; padding: 0.45rem 0.6rem; }
    .sm-label { font-size: 0.95rem; }
}