/*
 * 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-computer-science-human-in-the-loop
 */
/* human-in-the-loop: builds on activity-common.css + maths-activity.css (the header,
 * its controls and the display-mode header hiding come from those). Everything here
 * is scoped under .hl-root. Type grows with the frame: 16px on a phone, about 20px in
 * a lesson on a laptop or board, up to 28px in full screen on a board. */

.hl-root {
    --hl-ink: #14282a;
    --hl-soft: #4b5f62;
    --hl-line: #cdd6cd;
    --hl-sheet: #fbfcf8;
    --hl-card: #ffffff;
    --hl-board: #0f3b3a;
    --hl-board-2: #1b5553;
    --hl-chalk: #f5f7ee;
    --hl-go: #137a50;
    --hl-go-bg: #dcf3e6;
    --hl-stop: #bf2c44;
    --hl-stop-bg: #fbe3e6;
    --hl-warn: #a35f00;
    --hl-warn-bg: #fdeed0;
    --hl-focus: #0b63ce;
    display: block;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1em;
    background: var(--hl-sheet);
    border: 2px solid var(--hl-line);
    border-radius: 14px;
    color: var(--hl-ink);
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: clamp(16px, calc(9px + 1vw), 28px);
    line-height: 1.45;
    overflow-wrap: break-word;
}
body.display-mode .hl-root { font-size: clamp(18px, calc(10px + 1.15vw), 30px); }

.hl-root *, .hl-root *::before, .hl-root *::after { box-sizing: border-box; }
.hl-root p { margin: 0; }
.hl-root h2, .hl-root h3 { font-family: inherit; color: inherit; margin: 0; line-height: 1.2; letter-spacing: 0; }
.hl-root h2 { font-size: 1.55em; font-weight: 800; color: var(--hl-ink); }
.hl-root h3 { font-size: 1.12em; font-weight: 800; }
.hl-root h2:focus, .hl-root h3:focus { outline: none; }

.hl-stack { display: grid; gap: .65em; align-content: start; }
.hl-tight { gap: .45em; }
.hl-lead { font-size: 1.1em; }
.hl-small { font-size: .9em; color: var(--hl-soft); }
.hl-strong { font-weight: 800; }
.hl-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .25em; }
.hl-btnrow { display: flex; flex-wrap: wrap; gap: .5em; }
.hl-grid2 { display: grid; gap: .8em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); align-items: start; }

/* ---- buttons ---- */
.hl-b {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: max(44px, 2.3em); padding: .45em .9em;
    border: 2px solid #8fa39b; border-radius: 10px;
    background: var(--hl-card); color: var(--hl-ink);
    font: inherit; font-weight: 700; line-height: 1.25; text-align: left;
    cursor: pointer;
}
.hl-b:hover:not(:disabled) { border-color: var(--hl-board); background: #f0f6f0; }
.hl-b:disabled { cursor: default; opacity: .6; }
.hl-b.primary { background: var(--hl-board); border-color: var(--hl-board); color: var(--hl-chalk); }
.hl-b.primary:hover:not(:disabled) { background: var(--hl-board-2); border-color: var(--hl-board-2); }
.hl-b.good, .hl-b.good:disabled { background: var(--hl-go-bg); border-color: var(--hl-go); color: #0b5135; opacity: 1; }
.hl-b.bad, .hl-b.bad:disabled { background: var(--hl-stop-bg); border-color: var(--hl-stop); color: #7f1525; opacity: 1; }
.hl-b.wide { width: 100%; justify-content: flex-start; }
.hl-root button:focus-visible { outline: 3px solid var(--hl-focus); outline-offset: 2px; }

/* The next thing to press stays on screen while the log grows. */
.hl-actions {
    position: sticky; bottom: 0; z-index: 4;
    display: flex; flex-wrap: wrap; gap: .5em;
    padding: .55em 0 .45em;
    background: var(--hl-sheet);
}
.hl-panel .hl-actions { background: var(--hl-warn-bg); }

/* ---- panels and marks ---- */
.hl-panel { padding: .85em; background: var(--hl-card); border: 2px solid var(--hl-line); border-radius: 12px; display: grid; gap: .55em; align-content: start; }
.hl-panel.key { background: #eaf3ec; border-color: #b3cfbd; }
.hl-panel.good { background: var(--hl-go-bg); border-color: var(--hl-go); }
.hl-panel.bad { background: var(--hl-stop-bg); border-color: var(--hl-stop); }
.hl-panel.warn { background: var(--hl-warn-bg); border-color: var(--hl-warn); }
.hl-tick { color: var(--hl-go); font-weight: 800; }
.hl-cross { color: var(--hl-stop); font-weight: 800; }

/* ---- the goal ---- */
.hl-goal { background: var(--hl-board); color: var(--hl-chalk); border-radius: 12px; padding: .85em 1em; display: grid; gap: .3em; }
.hl-goal h3 { color: var(--hl-chalk); font-size: 1em; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Ada's log ---- */
.hl-wrap { display: grid; gap: 1em; grid-template-columns: minmax(0, 1fr) minmax(11em, 15em); align-items: start; }
.hl-diacol { position: sticky; top: .5em; }
.hl-log { display: grid; gap: .4em; }
.hl-line { display: grid; gap: .25em; padding: .55em .75em; border-radius: 9px; border-left: .5em solid; animation: hl-rise .25s ease-out both; }
/* Brought into view clear of the sticky button underneath. */
.hl-line, .hl-panel { scroll-margin-bottom: 4.5em; scroll-margin-top: .5em; }
.hl-ph { font-weight: 800; font-size: .86em; text-transform: uppercase; letter-spacing: .03em; }
.hl-line.plan { background: #fff6c9; border-color: #b89600; }
.hl-line.act { background: #dcf3e6; border-color: var(--hl-go); }
.hl-line.observe { background: #fde2ee; border-color: #c94f88; }
.hl-line.adjust { background: #ece1fa; border-color: #7a4bc0; }
.hl-line pre {
    margin: 0; padding: .5em .6em; background: #14282a; color: #e9f3ec; border-radius: 6px;
    font-family: Consolas, 'Courier New', monospace; font-size: .86em; line-height: 1.4;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.hl-line pre code { font: inherit; color: inherit; background: none; padding: 0; }
@keyframes hl-rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }

/* ---- the loop diagram and the red Stop ---- */
.hl-diagram { position: relative; aspect-ratio: 1; width: 100%; }
.hl-diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hl-node {
    position: absolute; transform: translate(-50%, -50%);
    padding: .2em .55em; border-radius: 99px; border: 2px solid transparent;
    font-weight: 800; font-size: .84em; white-space: nowrap; opacity: .62;
}
.hl-node.plan { left: 50%; top: 11%; background: #fff6c9; border-color: #b89600; }
.hl-node.act { left: 85%; top: 50%; background: #dcf3e6; border-color: var(--hl-go); }
.hl-node.observe { left: 50%; top: 89%; background: #fde2ee; border-color: #c94f88; }
.hl-node.adjust { left: 15%; top: 50%; background: #ece1fa; border-color: #7a4bc0; }
.hl-node.on { opacity: 1; box-shadow: 0 0 0 .2em var(--hl-ink); }
.hl-stop {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 34%; aspect-ratio: 1; min-width: 44px; min-height: 44px; border-radius: 50%;
    border: .2em solid #7f1525; background: var(--hl-stop); color: #fff;
    font: inherit; font-weight: 800; font-size: .95em; cursor: pointer;
}
.hl-stop:hover { background: #a3213a; }

/* ---- the end ---- */
.hl-table { width: 100%; border-collapse: collapse; }
.hl-table th, .hl-table td { padding: .4em .45em; border-top: 1px solid var(--hl-line); text-align: left; vertical-align: top; }
.hl-table thead th { border-top: 0; }

.hl-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---- phones and narrow frames: the loop diagram above the log ---- */
@media (max-width: 700px) {
    .hl-root { padding: .75em; border-radius: 12px; }
    .hl-root h2 { font-size: 1.35em; }
    .hl-wrap { grid-template-columns: minmax(0, 1fr); }
    .hl-diacol { order: -1; position: static; }
    .hl-diagram { max-width: 11em; margin: 0 auto; }
    .hl-node { font-size: .78em; }
}

/* ---- full screen on a board: use the space ---- */
:fullscreen .hl-root { max-width: none; }

@media (prefers-reduced-motion: reduce) {
    .hl-line { animation: none; }
}