/*
 * 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-lcw-self-audit
 */

/* The browser hides `[hidden]` with a UA rule that ANY author `display:` rule
   outranks -- and several elements here are both `display:`-styled and toggled
   via `el.hidden`. Without this the empty-state message renders underneath a
   fully working activity, and the readout shows its headings with nothing in
   them. The `hidden` PROPERTY is correctly set in both cases, so neither a
   property check nor the console catches it; only looking at the page does. */
[hidden] { display: none !important; }


.sa-activity {
    --sa-ink: #1f2933;
    --sa-muted: #62707d;
    --sa-rule: #dfe4ea;
    --sa-paper: #ffffff;
    --sa-surface: #f6f7f9;
    --sa-accent: #1f6f8b;
    --sa-grow: #8b6f00;
}

.sa-container { display: flex; flex-direction: column; gap: .9rem; }

.sa-question {
    margin: 0;
    padding: .7rem .9rem;
    background: var(--sa-surface);
    border-left: 4px solid var(--sa-accent);
    border-radius: 0 8px 8px 0;
    font-size: .97rem;
    font-weight: 700;
    color: var(--sa-ink);
}

.sa-scale-key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .2rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sa-muted);
}

.sa-scale-dots { letter-spacing: .5rem; color: var(--sa-rule); }

/* ------------------------------------------------------------------ items -- */

.sa-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

.sa-item {
    background: var(--sa-paper);
    border: 1px solid var(--sa-rule);
    border-radius: 10px;
    padding: .8rem .95rem;
}

/* The nudge. A rating with nothing behind it is exactly what this activity
   exists to stop, so it is visible — but it never blocks anything. */
.sa-item.needs-evidence {
    border-color: #d8b45a;
    background: #fffdf6;
}

.sa-item.needs-evidence .sa-evidence::placeholder { color: #8a6d1f; }

.sa-item-head { margin-bottom: .5rem; }

.sa-item-label { display: block; font-size: .97rem; font-weight: 700; color: var(--sa-ink); }

.sa-item-hint {
    display: block;
    margin-top: .12rem;
    font-size: .8rem;
    color: var(--sa-muted);
}

.sa-item-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.sa-strip { display: flex; gap: .3rem; }

.sa-dot {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 2px solid var(--sa-rule);
    background: #fff;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 800;
    color: var(--sa-muted);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.sa-dot:disabled { cursor: default; }
.sa-dot:hover:not(:disabled) { border-color: var(--sa-accent); }

/* Filled up to the chosen value, so the rating reads as a level rather than a
   single ticked box. */
.sa-dot.is-on {
    background: var(--sa-accent);
    border-color: var(--sa-accent);
    color: #fff;
}

.sa-prev {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sa-muted);
}

.sa-prev-input {
    width: 3rem;
    font-family: inherit;
    font-size: .85rem;
    padding: .2rem .3rem;
    border: 1px solid var(--sa-rule);
    border-radius: 6px;
    text-align: center;
}

.sa-move {
    font-size: .78rem;
    font-weight: 800;
    padding: .15rem .5rem;
    border-radius: 999px;
}

.sa-move.is-up   { background: rgba(46, 125, 91, .14); color: #2e7d5b; }
.sa-move.is-down { background: rgba(178, 106, 0, .14); color: #b26a00; }
.sa-move.is-same { background: var(--sa-surface); color: var(--sa-muted); }

.sa-evidence {
    width: 100%;
    font-family: inherit;
    font-size: .87rem;
    line-height: 1.5;
    padding: .4rem .5rem;
    border: 1px solid var(--sa-rule);
    border-radius: 6px;
    resize: vertical;
    color: var(--sa-ink);
}

.sa-evidence:focus { outline: 2px solid var(--sa-accent); outline-offset: -1px; }

.sa-evidence-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--sa-ink);
}

/* ---------------------------------------------------------------- readout -- */

.sa-readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--sa-surface);
    border-radius: 10px;
}

.sa-readout h3 {
    margin: 0 0 .35rem;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sa-muted);
}

.sa-readout-col:first-child h3 i { color: var(--sa-accent); }
.sa-readout-col:last-child h3 i  { color: var(--sa-grow); }

.sa-readout ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--sa-ink);
}

.sa-prompts {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--sa-ink);
}

.sa-prompts li { margin-bottom: .3rem; }

.sa-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 2rem;
    color: var(--sa-muted);
    font-size: .95rem;
}

.sa-copy-fallback {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 22rem;
    height: 7rem;
    font-size: .8rem;
    z-index: 20;
}

body.display-mode .sa-item-label { font-size: 1.05rem; }
body.display-mode .sa-evidence-text { font-size: .96rem; }

@media (max-width: 700px) {
    .sa-readout { grid-template-columns: 1fr; }
}