/*
 * 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-digital-media-literacy-fair-call
 */
/* fair-call - Digital Media Literacy "Fair Call". Builds on activity-common.css +
 * maths-activity.css (header, controls and display-mode header-hiding come from those).
 * Everything here is scoped under .fc-stage. */

.fc-stage {
    --fc-ink: #14282a;
    --fc-soft: #46595c;
    --fc-line: #cdd6cd;
    --fc-card: #ffffff;
    --fc-paper: #f4f7f2;
    --fc-board: #0f3b3a;
    --fc-board-2: #1b5553;
    --fc-pick: #fff3cf;
    --fc-pick-ink: #6b4b00;
    --fc-go: #137a50;
    --fc-go-bg: #dcf3e6;
    --fc-amber: #8a5300;
    --fc-amber-bg: #fdeed0;
    --fc-stop: #b3261e;
    --fc-stop-bg: #fbe3e6;
    --fc-blue: #1f4e8c;
    --fc-blue-bg: #e7effa;
    --fc-focus: #1f4e8c;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--fc-ink);
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.fc-stage [hidden] { display: none !important; }
.fc-stage h2, .fc-stage h3 { margin: 0; line-height: 1.2; }
.fc-stage p { margin: 0; }

/* For screen readers only. The words wrap inside the one-pixel box (no nowrap), so nothing in it
 * reaches past the left edge of the frame. */
.fc-visually-hidden {
    position: absolute !important;
    left: 0; top: 0;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
}

/* ---------- buttons ---------- */
.fc-stage .fc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-height: 44px;
    padding: 0.45em 0.9em;
    border: 2px solid #8fa39b;
    border-radius: 10px;
    background: var(--fc-card);
    color: var(--fc-ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.fc-stage .fc-btn:hover { border-color: var(--fc-board); background: #f0f6f0; }
.fc-stage .fc-btn:focus-visible { outline: 3px solid var(--fc-focus); outline-offset: 2px; }
.fc-stage .fc-primary { background: var(--fc-board); border-color: var(--fc-board); color: #fff; }
.fc-stage .fc-primary:hover { background: var(--fc-board-2); border-color: var(--fc-board-2); }
.fc-stage .fc-secondary { background: #eef3ee; }

/* ---------- the four case tabs ---------- */
.fc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-stage .fc-tab { flex: 1 1 0; min-width: 0; padding: 0.4em 0.5em; background: #eef3ee; border-color: #c5d2c8; }
.fc-stage .fc-tab.is-here { background: var(--fc-board); border-color: var(--fc-board); color: #fff; }
.fc-stage .fc-tab.is-done:not(.is-here) { border-color: var(--fc-go); }
.fc-tab-done { color: var(--fc-go); font-weight: 800; }
.fc-tab.is-here .fc-tab-done { color: #b8f0d2; }

/* ---------- layout: one column on a phone, two on a laptop or board ---------- */
.fc-main { display: flex; flex-direction: column; gap: 12px; }
.fc-left, .fc-right { display: contents; }

@media (min-width: 760px) {
    .fc-main {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 12px 14px;
        align-items: start;
    }
    .fc-main > .fc-case { grid-column: 1 / -1; }
    .fc-left, .fc-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
}

/* ---------- the case ---------- */
.fc-case {
    background: var(--fc-card);
    border: 2px solid var(--fc-line);
    border-left: 6px solid var(--fc-board);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fc-case-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.fc-case-no { color: var(--fc-soft); font-weight: 700; }
.fc-kind {
    display: inline-block;
    font-weight: 700;
    font-size: .92rem;
    background: var(--fc-paper);
    border: 1px solid var(--fc-line);
    border-radius: 999px;
    padding: 1px 10px;
}
.fc-stage .fc-case-title { font-size: 1.25rem; font-weight: 800; color: var(--fc-board); }
.fc-case-title:focus { outline: none; }
.fc-case-title:focus-visible { outline: 3px solid var(--fc-focus); outline-offset: 2px; }
.fc-case-text { font-size: 1.12rem; line-height: 1.5; }
.fc-line.is-check { background: var(--fc-pick); color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: 0 0 0 2px #f4cf5c; }

/* ---------- the four rows ---------- */
.fc-rows { display: flex; flex-direction: column; gap: 8px; }
.fc-row {
    background: var(--fc-card);
    border: 2px solid var(--fc-line);
    border-radius: 12px;
    padding: 6px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fc-row.is-ok { border-color: #8fcfae; }
.fc-row.is-off { border-color: #e7b35a; background: #fffaf0; }
.fc-row.is-changed { border-color: #93b2dc; background: #f7faff; }
.fc-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fc-row-label { font-weight: 800; font-size: 1.02rem; }
.fc-row-mark { font-weight: 700; font-size: .9rem; }
.fc-row-mark.is-ok { color: var(--fc-go); }
.fc-row-mark.is-whatif { color: var(--fc-blue); background: var(--fc-blue-bg); border-radius: 999px; padding: 0 8px; }
.fc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-stage .fc-opt { flex: 0 1 auto; }
.fc-stage .fc-opt[aria-pressed="true"],
.fc-stage .fc-opt[aria-pressed="true"]:hover { background: var(--fc-pick); border-color: var(--fc-pick-ink); }
/* The chosen option: a dot, and a tick only once it matches the case (a tick on a wrong choice would read as "right"). */
.fc-stage .fc-opt[aria-pressed="true"]::before { content: "\25CF"; font-size: .8em; }
.fc-stage .fc-row.is-ok .fc-opt[aria-pressed="true"]::before { content: "\2713"; font-size: 1em; font-weight: 800; }
.fc-stage .fc-row.is-ok .fc-opt[aria-pressed="true"] { background: var(--fc-go-bg); border-color: var(--fc-go); }
.fc-stage .fc-row.is-off .fc-opt[aria-pressed="true"] { background: #fde7c0; border-color: #b26a00; }
.fc-stage .fc-row.is-changed .fc-opt[aria-pressed="true"] { background: var(--fc-blue-bg); border-color: var(--fc-blue); }
.fc-stage .fc-opt.is-fact:not([aria-pressed="true"]) { border-style: dashed; border-color: var(--fc-board); }
.fc-hint {
    font-weight: 700;
    color: #6b4200;
    background: #fff4dc;
    border-radius: 8px;
    padding: 6px 10px;
}

/* ---------- the call ---------- */
.fc-callbox, .fc-stampbox, .fc-whatif, .fc-summary {
    background: var(--fc-card);
    border: 2px solid var(--fc-line);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fc-callbox.is-ready { border-color: var(--fc-board); box-shadow: 0 4px 14px rgba(15, 59, 58, .12); }
.fc-stage .fc-callhead { font-size: 1.15rem; font-weight: 800; color: var(--fc-board); }
.fc-callhead:focus { outline: none; }
.fc-progress { font-weight: 700; }
.fc-small { color: var(--fc-soft); font-size: .95rem; }
.fc-calls { display: flex; flex-direction: column; gap: 8px; }
.fc-stage .fc-call {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0.55em 0.9em;
    border-width: 3px;
}
.fc-call-name { font-size: 1.08rem; font-weight: 800; }
.fc-call-meaning { font-weight: 600; font-size: .92rem; color: var(--fc-soft); }
.fc-stage .fc-call-fair { border-color: #6fbf98; }
.fc-stage .fc-call-fair:hover { background: var(--fc-go-bg); border-color: var(--fc-go); }
.fc-stage .fc-call-needs { border-color: #e0b062; }
.fc-stage .fc-call-needs:hover { background: var(--fc-amber-bg); border-color: var(--fc-amber); }
.fc-stage .fc-call-not-ok { border-color: #e39a94; }
.fc-stage .fc-call-not-ok:hover { background: var(--fc-stop-bg); border-color: var(--fc-stop); }

/* ---------- the stamp ---------- */
.fc-stampbox { border-color: var(--fc-board); }
.fc-stampbox:focus { outline: none; }
.fc-stampbox:focus-visible { outline: 3px solid var(--fc-focus); outline-offset: 2px; }
.fc-status { font-weight: 700; color: var(--fc-soft); }
.fc-stamp {
    align-self: center;
    max-width: 92%;
    margin: 4px 0;
    padding: 0.4em 0.8em;
    border: 0.18em solid currentColor;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    transform: rotate(-2deg);
    animation: fcStampIn .22s ease-out;
}
.fc-stamp-fair { color: var(--fc-go); background: var(--fc-go-bg); }
.fc-stamp-needs { color: var(--fc-amber); background: var(--fc-amber-bg); }
.fc-stamp-not-ok { color: var(--fc-stop); background: var(--fc-stop-bg); }
@keyframes fcStampIn { from { transform: rotate(-5deg) scale(1.08); } to { transform: rotate(-2deg) scale(1); } }
.fc-reason { font-size: 1.05rem; font-weight: 600; }

/* On a phone a slim bar at the foot of the frame keeps the stamp in sight while a row is
 * changed further up; where rows and stamp sit side by side it is not needed. */
.fc-stampbar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: 8px 12px;
    border-radius: 10px;
    border: 2px solid currentColor;
    font-weight: 700;
    box-shadow: 0 -4px 14px rgba(20, 40, 42, .16);
}
.fc-stampbar strong { text-transform: uppercase; letter-spacing: .02em; }
.fc-stampbar-fair { color: var(--fc-go); background: var(--fc-go-bg); }
.fc-stampbar-needs { color: var(--fc-amber); background: var(--fc-amber-bg); }
.fc-stampbar-not-ok { color: var(--fc-stop); background: var(--fc-stop-bg); }
@media (min-width: 760px) {
    .fc-stampbar { display: none; }
}

/* ---------- what if ---------- */
.fc-stage .fc-whatif h3 { font-size: 1.15rem; font-weight: 800; color: var(--fc-board); }
.fc-count { font-weight: 800; }
.fc-found { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.fc-found li { font-weight: 700; }
.fc-chip { display: inline-block; font-size: .9em; font-weight: 700; border-radius: 999px; padding: 0 8px; border: 1px solid currentColor; }
.fc-chip-fair { color: var(--fc-go); background: var(--fc-go-bg); }
.fc-chip-needs { color: var(--fc-amber); background: var(--fc-amber-bg); }
.fc-chip-not-ok { color: var(--fc-stop); background: var(--fc-stop-bg); }
.fc-done { background: var(--fc-go-bg); border: 2px solid var(--fc-go); border-radius: 10px; padding: 8px 10px; font-weight: 700; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the four calls ---------- */
.fc-stage .fc-sum-title { font-size: 1.35rem; font-weight: 800; color: var(--fc-board); }
.fc-sum-title:focus { outline: none; }
.fc-sumlist { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.fc-sum { padding-left: 4px; }
.fc-sum-name { font-weight: 800; display: block; }
.fc-sum-text { display: inline; }
.fc-sum.is-open .fc-btn { margin-top: 4px; }
.fc-talk { font-weight: 700; background: var(--fc-paper); border-radius: 10px; padding: 8px 10px; }

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

/* ---------- the board view (display mode) ---------- */
body.display-mode .fc-stage { font-size: 1.12rem; }
body.display-mode .fc-case-text { font-size: 1.3rem; }
body.display-mode .fc-stage .fc-case-title { font-size: 1.55rem; }
body.display-mode .fc-stamp { font-size: 1.7rem; }
body.display-mode .fc-reason { font-size: 1.2rem; }

/* ---------- a full-screen board: use the space ---------- */
@media (min-width: 1500px) and (min-height: 760px) {
    body.maths-activity .fc-stage { max-width: 1680px; gap: 16px; font-size: 1.15rem; }
    body.maths-activity .fc-main { gap: 20px; }
    body.maths-activity .fc-stage .fc-btn { min-height: 56px; padding: 0.5em 1.05em; }
    body.maths-activity .fc-case-text { font-size: 1.4rem; }
    body.maths-activity .fc-stage .fc-case-title { font-size: 1.75rem; }
    body.maths-activity .fc-row-label { font-size: 1.2rem; }
    body.maths-activity .fc-stage .fc-callhead,
    body.maths-activity .fc-stage .fc-whatif h3 { font-size: 1.35rem; }
    body.maths-activity .fc-call-name { font-size: 1.25rem; }
    body.maths-activity .fc-call-meaning { font-size: 1.05rem; }
    body.maths-activity .fc-stamp { font-size: 2.1rem; }
    body.maths-activity .fc-reason { font-size: 1.3rem; }
}