/*
 * 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-sugar-detective
 */
.sd-stage { font-family: 'Nunito', system-ui, sans-serif; color: #1f2a37; }

/* ---- Controls ----------------------------------------------------------- */
.sd-controls { display: flex; gap: 10px; margin-bottom: 14px; }
.sd-controls[hidden] { display: none; }
.sd-btn {
    border: 1.5px solid #cbd5e1; background: #fff; color: #1f2a37;
    border-radius: 9px; padding: 7px 14px; font-weight: 800; font-size: 13px;
    cursor: pointer; font-family: inherit;
    transition: background .14s ease, border-color .14s ease;
}
.sd-btn:hover { border-color: #94a3b8; background: #f8fafc; }
.sd-btn i { margin-right: 5px; }
.sd-btn-ghost { color: #64748b; }

/* ---- Chart: one row per drink (a horizontal teaspoon bar) --------------- */
.sd-chart {
    --sd-name-w: 160px;
    display: flex; flex-direction: column; gap: 10px;
    overflow-x: auto;
}
.sd-row {
    display: grid;
    grid-template-columns: var(--sd-name-w) 1fr auto;
    align-items: center; gap: 12px;
    background: #fbfdff; border: 1px solid #e7eef6; border-radius: 12px;
    padding: 9px 12px;
}
.sd-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-name-text { font-weight: 800; font-size: 14px; line-height: 1.2; }
.sd-claim {
    font-size: 10.5px; font-weight: 700; color: #8a6d1a;
    background: #fef7e0; border: 1px solid #f3e2a8; border-radius: 999px;
    padding: 1px 7px; align-self: flex-start; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.sd-bar { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 26px; }

/* A sugar cube */
.sd-cube {
    width: 18px; height: 24px; border-radius: 4px;
    background: linear-gradient(180deg, #ffffff, #eef2f7);
    border: 1.5px solid #cfd8e3;
    box-shadow: inset 0 -3px 0 rgba(120,140,170,.18);
}
.sd-cube.is-over { background: linear-gradient(180deg, #fff3d6, #ffe1a8); border-color: #e3a948; }
.sd-cube.is-natural { background: linear-gradient(180deg, #e9fbef, #c9f2d8); border-color: #6ed29a; }

.sd-zero { font-weight: 800; font-size: 13px; color: #1aa6a6; }
.sd-count {
    font-weight: 800; font-size: 13px; color: #334155; white-space: nowrap;
    font-variant-numeric: tabular-nums; justify-self: end;
}

/* Hidden (guided, before reveal) */
.sd-reveal-btn {
    border: 1.5px dashed #cbd5e1; background: #f8fafc; color: #64748b;
    border-radius: 8px; padding: 4px 12px; font-weight: 800; font-size: 12px;
    cursor: pointer; font-family: inherit;
}
.sd-reveal-btn:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }
.sd-row.is-hidden .sd-count { color: #94a3b8; }
.sd-row.is-natural { background: #f5fdf8; border-color: #d4f1de; }

/* ---- Legend ------------------------------------------------------------- */
.sd-legend {
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
    padding-top: 11px; border-top: 1px dashed #e2e8f0;
}
.sd-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #475569; }
.sd-key .sd-cube { width: 14px; height: 18px; }

/* ---- Talk-about-it (display-only prompts; never typed) ------------------ */
.sd-your-turn {
    margin-top: 14px;
    background: linear-gradient(180deg, #fffdf4, #fef7e3);
    border: 1px solid #f3e2a8; border-radius: 12px; padding: 11px 15px;
}
.sd-your-turn-label { font-weight: 800; color: #92691a; font-size: 13px; margin-bottom: 5px; }
.sd-your-turn-label i { margin-right: 5px; }
.sd-your-turn ul { margin: 0; padding-left: 20px; }
.sd-your-turn li { font-weight: 700; color: #6b4e12; margin: 3px 0; font-size: 14px; }

/* ---- Display mode: read-only IWB snapshot ------------------------------- */
body.display-mode .sd-controls { display: none; }
body.display-mode .sd-row { cursor: default; }
@media (max-width: 560px) {
    .sd-chart { --sd-name-w: 110px; }
}