/*
 * 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-prove-it
 */
/* prove-it - Digital Media Literacy "Prove It". 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 .pi. Type is set from the frame's own width, so it is 16px on a phone, about 20px in
 * a lesson on a laptop or a board, and larger again in full screen. */

.pi {
    --pi-ink: #1d3557;
    --pi-soft: #4a5a6a;
    --pi-line: #d4dde8;
    --pi-card: #ffffff;
    --pi-sheet: #f6f8fb;
    --pi-teal: #23786d;
    --pi-go: #137a50;
    --pi-warn: #a35f00;
    --pi-warn-bg: #fdf0d8;
    --pi-stop: #bf2c44;
    --pi-stop-bg: #fbe5e8;
    --pi-pick: #fff3cf;
    --pi-pick-ink: #6b4b00;
    display: block;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--pi-ink);
    font-size: clamp(16px, calc(9px + 1vw), 26px);
    line-height: 1.45;
    overflow-wrap: break-word;
}
.pi [hidden] { display: none !important; }
.pi p { margin: 0; }
.pi ol, .pi ul { margin: 0; padding-left: 1.3em; }
.pi h2 { margin: 0; font-family: 'Nunito', sans-serif; font-size: 1.4em; font-weight: 800; line-height: 1.2; color: var(--pi-ink); }
.pi h3 { margin: .2em 0 0; font-size: 1.08em; font-weight: 800; color: var(--pi-ink); }
.pi h2:focus { outline: none; }

.pi-screen { display: grid; gap: .75em; align-content: start; padding-bottom: .5em; }
.pi-lead { font-size: 1.06em; }
.pi-small { font-size: .88em; color: var(--pi-soft); }
.pi-stack { display: grid; gap: .5em; }
.pi-plan { display: grid; gap: .3em; }
.pi-actions { display: flex; flex-wrap: wrap; gap: .6em; padding-top: .2em; }

/* ---- Buttons: every control is a real button, at least 44px tall ---- */
.pi-b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    min-height: 44px;
    padding: .45em .95em;
    border: 2px solid #8a9db3;
    border-radius: 10px;
    background: var(--pi-card);
    color: var(--pi-ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}
/* Hover only where there is a mouse: on a touch screen a hover look sticks after the tap. */
@media (hover: hover) {
    .pi-b:hover:not(:disabled) { border-color: var(--pi-ink); background: #f1f5fa; }
    .pi-b.is-primary:hover:not(:disabled) { background: #2b4a75; border-color: #2b4a75; }
}
.pi-b:focus-visible { outline: 3px solid #1F4E8C; outline-offset: 2px; }
.pi-b:disabled { cursor: default; opacity: .55; }
.pi-b[aria-pressed="true"],
.pi-b[aria-pressed="true"]:hover:not(:disabled) { background: var(--pi-pick); border-color: var(--pi-pick-ink); color: #3d2c00; }
.pi-b[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }
.pi-b.is-primary { background: var(--pi-ink); border-color: var(--pi-ink); color: #fff; padding-inline: 1.2em; }
.pi-b.is-wide { width: 100%; justify-content: flex-start; }

/* ---- The round's bar: title and clock stay in view while the round scrolls ---- */
.pi-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    gap: .35em;
    margin: 0 -.25em;
    padding: .45em .25em .5em;
    background: var(--pi-sheet);
    border-bottom: 1px solid var(--pi-line);
}
.pi-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2em 1em; }
.pi-bar h2 { font-size: 1.25em; }
.pi-clock { font-size: 1.6em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pi-clock.is-low { color: var(--pi-stop); }
.pi-track { height: .45em; background: #dfe6ee; border-radius: 9px; overflow: hidden; }
.pi-track i { display: block; height: 100%; background: var(--pi-teal); transition: width .25s linear; }
.pi-track.is-low i { background: var(--pi-stop); }
/* Anything brought into view during a round stops below the bar, not under it. */
.pi-round .pi-b, .pi-round .pi-result, .pi-round .pi-post, .pi-round .pi-photo { scroll-margin-top: 5.5em; }

/* ---- Round 1: the post ---- */
.pi-post { display: grid; gap: .55em; max-width: 46em; padding: .8em; background: var(--pi-card); border: 2px solid var(--pi-line); border-radius: 14px; }
.pi-who { display: flex; align-items: center; gap: .6em; font-weight: 700; }
.pi-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--pi-teal); color: #fff; font-weight: 800; }

/* ---- Round 2: the search ---- */
.pi-question { font-size: 1.1em; font-weight: 800; }
.pi-searchbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2em .5em;
    min-height: 2.6em;
    padding: .45em 1em;
    background: var(--pi-card);
    border: 2px solid var(--pi-ink);
    border-radius: 999px;
}
.pi-searchbar-label { color: var(--pi-soft); font-weight: 700; }
.pi-searchbar-text { font-weight: 800; }
.pi-chips { display: flex; flex-wrap: wrap; gap: .45em; }
.pi-chip.is-out, .pi-chip.is-out:hover:not(:disabled) { background: var(--pi-stop-bg); border-color: var(--pi-stop); color: #7f1525; text-decoration: line-through; }

/* ---- Round 3: the results page ---- */
.pi-key { display: grid; gap: .2em; padding: .65em .9em; background: #eaf3f1; border: 2px solid #b3d3cc; border-radius: 12px; }
.pi-results { display: grid; gap: .7em; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); align-items: start; }
.pi-result { display: grid; gap: .45em; align-content: start; padding: .7em; background: var(--pi-card); border: 2px solid var(--pi-line); border-radius: 12px; }
.pi-result.is-labelled { border-color: #93a8c0; }
.pi-result-title { font-weight: 700; }
.pi-tag { display: inline-block; margin-right: .4em; padding: 0 .45em; border: 1.5px solid var(--pi-soft); border-radius: 5px; color: var(--pi-soft); font-size: .8em; font-weight: 800; }
.pi-quote { margin: 0; padding-left: .7em; border-left: 4px solid #d99a1c; font-style: italic; }
.pi-shoes { display: flex; flex-wrap: wrap; gap: .4em; }
.pi-shoes span { padding: .1em .5em; background: var(--pi-sheet); border: 1px solid var(--pi-line); border-radius: 6px; font-size: .9em; }
.pi-labels { display: flex; flex-wrap: wrap; gap: .4em; }
.pi-labels .pi-b { padding-inline: .7em; }

/* ---- Round 4: the photo's page ---- */
.pi-share { display: grid; gap: .8em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr)); align-items: start; }
.pi-photo { display: grid; gap: .4em; margin: 0; padding: .6em; background: var(--pi-card); border: 2px solid var(--pi-line); border-radius: 12px; }
.pi-photo svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.pi-details { align-content: start; }

/* ---- After a round ---- */
.pi-note { padding: .55em .8em; background: var(--pi-warn-bg); border: 2px solid var(--pi-warn); border-radius: 10px; font-weight: 700; }
.pi-verdict { font-size: 1.1em; font-weight: 700; }
.pi-pill { display: inline-block; padding: .05em .65em; border-radius: 999px; color: #fff; font-size: .9em; font-weight: 800; white-space: nowrap; }
.pi-pill.is-green { background: var(--pi-go); }
.pi-pill.is-amber { background: var(--pi-warn); }
.pi-pill.is-red { background: var(--pi-stop); }
.pi-panel { display: grid; gap: .55em; padding: .9em; background: var(--pi-card); border: 2px solid var(--pi-line); border-radius: 14px; }
.pi-row { display: grid; gap: .2em; padding-top: .55em; border-top: 1px solid var(--pi-line); }
.pi-row:first-child { padding-top: 0; border-top: 0; }
.pi-row-head { font-weight: 700; }
.pi-list { display: grid; gap: .3em; padding-left: 0 !important; list-style: none; }
.pi-mark { font-weight: 800; }
.pi-mark.is-yes { color: var(--pi-go); }
.pi-mark.is-no { color: var(--pi-stop); }
.pi-mark.is-dot { color: var(--pi-soft); }

/* ---- The end card ---- */
.pi-evidence { display: grid; padding: .3em .9em; background: var(--pi-card); border: 2px solid var(--pi-ink); border-radius: 14px; }
.pi-ev { display: grid; grid-template-columns: 6.5em 5em minmax(0, 1fr); gap: .3em .7em; align-items: baseline; padding: .6em 0; border-top: 1px solid var(--pi-line); }
.pi-ev:first-child { border-top: 0; }
.pi-callout { display: grid; gap: .35em; padding: .75em 1em; background: #e9f1fb; border-left: 6px solid var(--pi-ink); border-radius: 8px; }
@media (max-width: 560px) {
    .pi-ev { grid-template-columns: minmax(0, 1fr) auto; }
    .pi-ev-line { grid-column: 1 / -1; }
}

/* ---- Visually hidden live region ---- */
.pi-sr {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Laptop, board and full screen ---- */
@media (min-width: 700px) {
    .pi-b { min-height: max(44px, 2.3em); }
}
@media (min-width: 1500px) and (min-height: 760px) {
    .pi { max-width: 1560px; }
    .pi-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Display mode: the board view. The shared CSS hides the header; the type steps up. */
body.display-mode .pi { font-size: clamp(18px, calc(10px + 1.1vw), 30px); padding: .6em; }

@media (prefers-reduced-motion: reduce) {
    .pi-track i { transition: none; }
}