/*
 * 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-document-annotator
 */

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


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

.da-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.da-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 1.25rem;
    align-items: start;
}

/* ------------------------------------------------------------- document -- */

.da-doc {
    background: var(--da-paper);
    border: 1px solid var(--da-rule);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(31, 41, 51, .06);
    max-height: 60vh;
    overflow-y: auto;
}

.da-doc-head {
    border-bottom: 1px solid var(--da-rule);
    padding-bottom: .75rem;
    margin-bottom: 1rem;
}

.da-doc-kind {
    display: inline-block;
    margin-bottom: .4rem;
    font-size: .75rem;
    letter-spacing: .02em;
}

.da-doc-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--da-ink);
}

.da-doc-meta {
    margin: .3rem 0 0;
    font-size: .85rem;
    color: var(--da-muted);
}

.da-doc-body {
    font-size: .97rem;
    line-height: 1.7;
    color: var(--da-ink);
}

.da-doc-body p { margin: 0 0 .85rem; }
.da-doc-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- region -- */

.da-region {
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    padding: .05em .15em;
    /* Untagged regions read as "there is something here to decide", not as an
       answer already given: a dotted underline, no fill. */
    box-shadow: inset 0 -2px 0 0 rgba(98, 112, 125, .35);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.da-region:hover,
.da-region:focus-visible {
    background: rgba(98, 112, 125, .1);
    outline: none;
    box-shadow: inset 0 -2px 0 0 rgba(98, 112, 125, .7);
}

.da-region-badge {
    display: none;
    margin-left: .35em;
    padding: .05em .45em;
    border-radius: 999px;
    font-size: .68em;
    font-weight: 700;
    vertical-align: .12em;
    white-space: nowrap;
    color: #fff;
}

.da-region.is-tagged .da-region-badge { display: inline-block; }

/* Checked feedback is a cue, never a score, and the region stays re-choosable. */
.da-region.is-right   { outline: 2px solid #2e7d5b; outline-offset: 1px; }
.da-region.is-rethink { outline: 2px dashed #b26a00; outline-offset: 1px; }

/* ------------------------------------------------------------------ tags -- */

.da-side {
    background: var(--da-surface);
    border: 1px solid var(--da-rule);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    position: sticky;
    top: 0;
}

.da-side-heading {
    margin: 0 0 .6rem;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--da-muted);
}

.da-tags {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.da-tag {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: .5rem .7rem;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-align: left;
    color: #fff;
    cursor: pointer;
    opacity: .68;
    transition: opacity .15s ease, transform .1s ease;
}

.da-tag:hover { opacity: .88; }
.da-tag.is-active { opacity: 1; border-color: var(--da-ink); transform: translateX(2px); }

@keyframes da-nudge {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.da-nudge { animation: da-nudge .28s ease; }

/* Six tones, assigned by position so an author never picks a colour and two
   labels can never collide. Chosen for contrast against white paper AND for
   distinguishability under the common forms of colour blindness -- the badge
   text carries the label too, so colour is never the only signal. */
.da-tone-0, .da-region.is-tagged.da-tone-0 .da-region-badge { background: #1f6f8b; }
.da-tone-1, .da-region.is-tagged.da-tone-1 .da-region-badge { background: #b5451f; }
.da-tone-2, .da-region.is-tagged.da-tone-2 .da-region-badge { background: #4a6b1f; }
.da-tone-3, .da-region.is-tagged.da-tone-3 .da-region-badge { background: #6a3d8f; }
.da-tone-4, .da-region.is-tagged.da-tone-4 .da-region-badge { background: #8b6f00; }
.da-tone-5, .da-region.is-tagged.da-tone-5 .da-region-badge { background: #1f4f7a; }

.da-region.is-tagged.da-tone-0 { background: rgba(31, 111, 139, .16); box-shadow: inset 0 -2px 0 0 #1f6f8b; }
.da-region.is-tagged.da-tone-1 { background: rgba(181, 69, 31, .16);  box-shadow: inset 0 -2px 0 0 #b5451f; }
.da-region.is-tagged.da-tone-2 { background: rgba(74, 107, 31, .16);  box-shadow: inset 0 -2px 0 0 #4a6b1f; }
.da-region.is-tagged.da-tone-3 { background: rgba(106, 61, 143, .16); box-shadow: inset 0 -2px 0 0 #6a3d8f; }
.da-region.is-tagged.da-tone-4 { background: rgba(139, 111, 0, .16);  box-shadow: inset 0 -2px 0 0 #8b6f00; }
.da-region.is-tagged.da-tone-5 { background: rgba(31, 79, 122, .16);  box-shadow: inset 0 -2px 0 0 #1f4f7a; }

/* ----------------------------------------------------- progress and note -- */

.da-progress {
    margin-top: .9rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--da-muted);
}

.da-note {
    margin-top: .9rem;
    padding: .75rem .85rem;
    background: var(--da-paper);
    border: 1px solid var(--da-rule);
    border-radius: 8px;
}

.da-note-tag {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: #fff;
}

.da-note-text {
    margin: .45rem 0 0;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--da-ink);
}

.da-prompts {
    margin: .9rem 0 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--da-ink);
}

.da-prompts li { margin-bottom: .4rem; }

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

/* The clipboard fallback: only ever visible long enough to select and copy. */
.da-copy-fallback {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 22rem;
    height: 7rem;
    font-size: .8rem;
    z-index: 20;
}

/* ---------------------------------------------------------- display mode -- */
/* The board view: everything already labelled, no controls, larger type. */

body.display-mode .da-doc { max-height: none; font-size: 1.05rem; }
body.display-mode .da-side { background: transparent; border: none; padding: 0; }
body.display-mode .da-doc-body { font-size: 1.05rem; line-height: 1.75; }
body.display-mode .da-region { cursor: default; }

.da-mode-display .da-stage { grid-template-columns: minmax(0, 1fr); }
.da-mode-display .da-side { display: none; }

/* --------------------------------------------------------------- narrow -- */

@media (max-width: 860px) {
    .da-stage { grid-template-columns: minmax(0, 1fr); }
    .da-side { position: static; }
    .da-tags { flex-direction: row; flex-wrap: wrap; }
    .da-tag { flex: 1 1 8rem; }
}