/*
 * 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-english-text-marker
 */

.tm-container { --tm-gap: 1rem; }

/* Every panel below is laid out with flex or grid, and a class selector beats
   the user agent's `[hidden] { display: none }`. Without this the paste box and
   the empty state show on top of a perfectly good document. */
.tm-activity [hidden] { display: none !important; }

/* ---- bring-your-own-text route ------------------------------------------ */
.tm-bring {
    display: flex; flex-direction: column; gap: .6rem;
    padding: 1rem 1.1rem; margin-bottom: var(--tm-gap);
    background: #fff; border: 1px solid #dfe3e8; border-radius: 10px;
}
.tm-bring-label { font-weight: 700; font-size: .98rem; }
.tm-bring-input {
    width: 100%; font-family: inherit; font-size: 1rem; line-height: 1.55;
    padding: .7rem .8rem; border: 1px solid #cfd6dd; border-radius: 8px; resize: vertical;
}
.tm-bring-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tm-bring-hint { font-size: .85rem; color: #5a6169; }

/* ---- stage --------------------------------------------------------------- */
.tm-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--tm-gap); align-items: start;
}
@media (max-width: 62rem) { .tm-stage { grid-template-columns: minmax(0, 1fr); } }

.tm-doc {
    background: #fff; border: 1px solid #dfe3e8; border-radius: 10px;
    padding: 1.1rem 1.3rem 1rem;
}
.tm-doc-head { margin-bottom: .7rem; }
.tm-doc-title { margin: .2rem 0 .1rem; font-size: 1.22rem; font-weight: 800; }
.tm-doc-meta { margin: 0; font-size: .87rem; color: #5a6169; }
.tm-doc-body {
    font-size: 1.05rem; line-height: 1.85; white-space: pre-wrap;
    -webkit-user-select: text; user-select: text; cursor: text;
}
.tm-doc-body p { margin: 0 0 .9rem; }
.tm-hint {
    margin: .9rem 0 0; font-size: .85rem; color: #5a6169;
    display: flex; align-items: center; gap: .4rem;
}

/* A placed mark. Colour comes from the label's position so an author never
   picks one and two labels can never collide. */
.tm-mark {
    border-radius: 3px; padding: .05em .12em; cursor: pointer;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.tm-mark:focus-visible { outline: 2px solid #1b1f23; outline-offset: 1px; }
.tm-mark.tm-c0 { background: #d7e8fb; }
.tm-mark.tm-c1 { background: #ffe3c2; }
.tm-mark.tm-c2 { background: #d8f0da; }
.tm-mark.tm-c3 { background: #f2dcf3; }
.tm-mark.tm-c4 { background: #ffe1e1; }
.tm-mark.tm-c5 { background: #d9f1f3; }
.tm-swatch {
    width: .72rem; height: .72rem; border-radius: 3px; flex: none;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.tm-swatch.tm-c0 { background: #d7e8fb; } .tm-swatch.tm-c1 { background: #ffe3c2; }
.tm-swatch.tm-c2 { background: #d8f0da; } .tm-swatch.tm-c3 { background: #f2dcf3; }
.tm-swatch.tm-c4 { background: #ffe1e1; } .tm-swatch.tm-c5 { background: #d9f1f3; }

/* ---- side panel ---------------------------------------------------------- */
.tm-side {
    background: #fff; border: 1px solid #dfe3e8; border-radius: 10px;
    padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem;
}
.tm-side-heading {
    margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: #5a6169; font-weight: 700;
}
.tm-progress { display: flex; flex-direction: column; gap: .35rem; }
.tm-progress-count { font-size: .88rem; font-weight: 700; }
.tm-progress-track { height: .45rem; background: #eceff2; border-radius: 3px; overflow: hidden; }
.tm-progress-fill { display: block; height: 100%; width: 0; background: #2c5aa0; border-radius: 3px; transition: width .18s ease; }
@media (prefers-reduced-motion: reduce) { .tm-progress-fill { transition: none; } }

.tm-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.tm-mark-item {
    border: 1px solid #e4e8ec; border-radius: 8px; padding: .55rem .65rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.tm-mark-head { display: flex; align-items: center; gap: .45rem; }
.tm-mark-label { font-weight: 700; font-size: .84rem; flex: 1 1 auto; }
.tm-mark-quote { font-size: .87rem; color: #1b1f23; font-style: italic; }
.tm-mark-reason { font-size: .85rem; color: #41474d; }
.tm-mark-drop {
    border: none; background: none; color: #96a0aa; cursor: pointer;
    padding: .1rem .2rem; border-radius: 4px; flex: none;
}
.tm-mark-drop:hover { color: #b03a2e; background: #f8edeb; }
.tm-empty-note { margin: 0; font-size: .87rem; color: #5a6169; }

.tm-model { border-top: 1px solid #e4e8ec; padding-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.tm-model-intro { margin: 0; font-size: .84rem; color: #5a6169; }
.tm-model-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tm-model-list li { font-size: .87rem; border-left: 2px solid #2c5aa0; padding-left: .6rem; }
.tm-model-quote { font-style: italic; display: block; }
.tm-model-note { color: #41474d; }

/* ---- picker -------------------------------------------------------------- */
.tm-picker {
    position: fixed; z-index: 40; max-width: 22rem; width: calc(100vw - 2rem);
    background: #fff; border: 1px solid #c8d0d8; border-radius: 10px;
    box-shadow: 0 8px 26px rgba(27, 31, 35, .17);
    padding: .85rem .95rem; display: flex; flex-direction: column; gap: .6rem;
}
.tm-picker-quote {
    margin: 0; font-size: .89rem; font-style: italic; color: #41474d;
    max-height: 4.2rem; overflow: auto;
}
.tm-picker-labels { display: flex; flex-wrap: wrap; gap: .35rem; }
.tm-chip {
    border: 1px solid #cfd6dd; background: #f7f9fb; border-radius: 999px;
    padding: .28rem .7rem; font-size: .85rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
}
.tm-chip[aria-selected="true"] { border-color: #2c5aa0; background: #eaf0f9; color: #1d3f73; }
.tm-chip:focus-visible { outline: 2px solid #2c5aa0; outline-offset: 1px; }
.tm-picker-reason-label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: .25rem; }
.tm-picker-reason-input {
    width: 100%; font-family: inherit; font-size: .92rem; line-height: 1.5;
    padding: .5rem .6rem; border: 1px solid #cfd6dd; border-radius: 7px; resize: vertical;
}
.tm-picker-actions { display: flex; gap: .5rem; }
.btn-control.tm-primary { background: #2c5aa0; color: #fff; border-color: #2c5aa0; }
.btn-control.tm-primary:hover { background: #24497f; border-color: #24497f; }
.btn-control.tm-primary[disabled] { opacity: .5; cursor: not-allowed; }

.tm-empty {
    display: flex; align-items: center; gap: .5rem; padding: 1.1rem;
    color: #5a6169; background: #fff; border: 1px dashed #cfd6dd; border-radius: 10px;
}

/* Board/display mode: the class reads it together, nobody marks. */
body.display-mode .tm-side,
body.display-mode .tm-hint,
body.display-mode .tm-picker,
body.display-mode .tm-bring { display: none !important; }
body.display-mode .tm-stage { grid-template-columns: minmax(0, 1fr); }
body.display-mode .tm-doc-body { font-size: 1.3rem; line-height: 1.9; }