/*
 * 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-rights-inbox
 */
/* rights-inbox: 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 .ri-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. */

.ri-root {
    --ri-ink: #14282a;
    --ri-soft: #4b5f62;
    --ri-line: #cdd6cd;
    --ri-sheet: #fbfcf8;
    --ri-card: #ffffff;
    --ri-board: #0f3b3a;
    --ri-board-2: #1b5553;
    --ri-chalk: #f5f7ee;
    --ri-mark-bg: #fff3cf;
    --ri-mark-ink: #6b4b00;
    --ri-go: #137a50;
    --ri-go-bg: #dcf3e6;
    --ri-stop: #bf2c44;
    --ri-stop-bg: #fbe3e6;
    --ri-focus: #0b63ce;
    display: block;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1em;
    background: var(--ri-sheet);
    border: 2px solid var(--ri-line);
    border-radius: 14px;
    color: var(--ri-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 .ri-root { font-size: clamp(18px, calc(10px + 1.15vw), 30px); }

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

.ri-stack { display: grid; gap: .65em; align-content: start; }
.ri-tight { gap: .45em; }
.ri-lead { font-size: 1.1em; }
.ri-small { font-size: .9em; color: var(--ri-soft); }
.ri-strong, .ri-q { font-weight: 800; }
.ri-plain { list-style: none; padding: 0; display: grid; gap: .25em; }
.ri-btnrow { display: flex; flex-wrap: wrap; gap: .5em; }

/* ---- buttons ---- */
.ri-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(--ri-card); color: var(--ri-ink);
    font: inherit; font-weight: 700; line-height: 1.25; text-align: left;
    cursor: pointer;
}
.ri-b:hover:not(:disabled) { border-color: var(--ri-board); background: #f0f6f0; }
.ri-b:disabled { cursor: default; opacity: .6; }
.ri-b[aria-pressed="true"], .ri-b[aria-pressed="true"]:hover:not(:disabled) { background: var(--ri-mark-bg); border-color: var(--ri-mark-ink); }
.ri-b[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }
.ri-b.primary { background: var(--ri-board); border-color: var(--ri-board); color: var(--ri-chalk); }
.ri-b.primary:hover:not(:disabled) { background: var(--ri-board-2); border-color: var(--ri-board-2); }
.ri-b.wide { width: 100%; justify-content: flex-start; }
.ri-root button:focus-visible { outline: 3px solid var(--ri-focus); outline-offset: 2px; }

/* The next thing to press stays on screen while a long screen scrolls. */
.ri-actions {
    position: sticky; bottom: 0; z-index: 4;
    display: flex; flex-wrap: wrap; gap: .5em;
    margin-top: .2em; padding: .6em 0 .5em;
    background: var(--ri-sheet);
    border-top: 1px solid var(--ri-line);
}

/* The way back to the inbox is needed only where the inbox is hidden: a narrow frame. */
.ri-root .ri-back { display: none; }

/* ---- panels and marks ---- */
.ri-panel { padding: .85em; background: var(--ri-card); border: 2px solid var(--ri-line); border-radius: 12px; display: grid; gap: .5em; align-content: start; }
.ri-panel.key { background: #eaf3ec; border-color: #b3cfbd; }
.ri-panel.good { background: var(--ri-go-bg); border-color: var(--ri-go); }
.ri-panel.bad { background: var(--ri-stop-bg); border-color: var(--ri-stop); }
.ri-tick { color: var(--ri-go); font-weight: 800; }
.ri-cross { color: var(--ri-stop); font-weight: 800; }
.ri-ring { color: var(--ri-soft); font-weight: 800; }
.ri-out { font-size: .96em; }
.ri-rowline { display: grid; gap: .25em; padding: .6em 0; border-top: 1px solid var(--ri-line); }
.ri-rowline:first-of-type { border-top: 0; padding-top: 0; }

/* ---- the phone and its inbox ---- */
.ri-wrap { display: grid; gap: 1em; grid-template-columns: minmax(14em, 20em) minmax(0, 1fr); align-items: start; }
.ri-phone { background: #111d1e; border-radius: 1.4em; padding: .5em; box-shadow: 0 .4em 1em rgba(15, 59, 58, .25); }
.ri-screen { background: #f4f6f3; border-radius: 1em; overflow: hidden; }
.ri-status { display: flex; justify-content: space-between; gap: .5em; padding: .35em .9em; color: #fff; background: var(--ri-board-2); font-weight: 700; font-size: .85em; }
.ri-notif {
    display: grid; gap: .1em; width: 100%; min-height: 44px; padding: .7em .8em;
    text-align: left; font: inherit; color: var(--ri-ink);
    background: #fff; border: 0; border-bottom: 1px solid var(--ri-line); cursor: pointer;
}
.ri-notif:hover { background: #f0f6f0; }
/* The rows fill the phone's screen, which clips anything outside them, so the focus ring sits inside. */
.ri-root .ri-notif:focus-visible { outline-offset: -5px; }
.ri-notif[aria-current="true"] { background: var(--ri-mark-bg); }
.ri-from { font-size: .8em; color: var(--ri-soft); font-weight: 700; }
.ri-ttl { font-weight: 800; }
.ri-state { font-size: .84em; font-weight: 700; color: var(--ri-go); }
.ri-letter { padding: .7em .9em; border-radius: .9em; background: var(--ri-card); border: 2px solid var(--ri-line); }

/* ---- the end ---- */
.ri-sticky {
    background: #ffe680; padding: 1em 1.1em; max-width: 24em;
    transform: rotate(-1.2deg); box-shadow: 0 .35em .7em rgba(0, 0, 0, .16);
    font-weight: 800; font-size: 1.3em; line-height: 1.25;
}

.ri-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 inbox above; an open notification on its own ---- */
@media (max-width: 760px) {
    .ri-root { padding: .75em; border-radius: 12px; }
    .ri-wrap { grid-template-columns: minmax(0, 1fr); }
    .ri-wrap.open .ri-phone { display: none; }
    .ri-root .ri-back { display: inline-flex; }
    .ri-root h2 { font-size: 1.35em; }
    .ri-sticky { font-size: 1.15em; }
}

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

@media (prefers-reduced-motion: reduce) {
    .ri-sticky { transform: none; }
}