/*
 * 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-rubric-review
 */

/* 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; }


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

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

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

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

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

/* A judgement with no comment behind it is the failure mode of every peer review
   ever run in a classroom. Visible, never blocking. */
.rr-crit.needs-comment { border-color: #d8b45a; background: #fffdf6; }
.rr-crit.needs-comment .rr-comment::placeholder { color: #8a6d1f; }

.rr-crit-head { margin-bottom: .5rem; }
.rr-crit-label { display: block; font-size: .97rem; font-weight: 700; color: var(--rr-ink); }

.rr-crit-lookfor {
    display: block;
    margin-top: .12rem;
    font-size: .8rem;
    color: var(--rr-muted);
}

.rr-levels { display: flex; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap; }

.rr-level {
    padding: .3rem .8rem;
    border: 2px solid var(--rr-rule);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--rr-muted);
    cursor: pointer;
}

.rr-level:disabled { cursor: default; }
.rr-level:hover:not(:disabled) { border-color: var(--rr-muted); }

/* No red / green. A peer review is a judgement to talk about, not a mark, and
   colouring "Not yet" as failure is exactly the wrong signal in a course whose
   whole posture is that everything here is a draft. */
.rr-level.is-on.rr-level-0 { background: #eceff1; border-color: #7d8b96; color: #33414c; }
.rr-level.is-on.rr-level-1 { background: #e4eef2; border-color: #5d94a8; color: #1f4f5e; }
.rr-level.is-on.rr-level-2 { background: #1f6f8b; border-color: #1f6f8b; color: #fff; }
.rr-level.is-on.rr-level-3 { background: #14536a; border-color: #14536a; color: #fff; }

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

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

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

/* ------------------------------------------------------------- priority -- */

.rr-priority {
    padding: .85rem 1rem;
    background: rgba(31, 111, 139, .07);
    border: 1px solid rgba(31, 111, 139, .25);
    border-radius: 10px;
}

.rr-priority h3 {
    margin: 0 0 .5rem;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rr-accent);
}

.rr-priority-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

.rr-pick {
    padding: .28rem .7rem;
    border: 2px solid var(--rr-rule);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--rr-muted);
    cursor: pointer;
}

.rr-pick.is-on { background: var(--rr-accent); border-color: var(--rr-accent); color: #fff; }

.rr-priority-text {
    width: 100%;
    font-family: inherit;
    font-size: .89rem;
    line-height: 1.5;
    padding: .45rem .55rem;
    border: 1px solid var(--rr-rule);
    border-radius: 6px;
    resize: vertical;
    color: var(--rr-ink);
}

.rr-status {
    padding: .6rem .85rem;
    background: var(--rr-surface);
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--rr-muted);
}

.rr-status.is-ready { background: rgba(46, 125, 91, .12); color: #2e7d5b; }

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

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

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

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

body.display-mode .rr-crit-label { font-size: 1.05rem; }
body.display-mode .rr-comment-text { font-size: .96rem; }