/*
 * 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-maths-opinion-line
 */
/* opinion-line — warm, generous walking-debate styling.
 * No score colours anywhere: the line is a symmetric sand gradient (neither
 * end reads as "right"), markers are six muted neutral tones. */

.ol-stage {
    font-family: 'Nunito', system-ui, sans-serif;
    color: #2b3a4a;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

/* JS toggles [hidden] on flex/grid elements; keep the attribute winning. */
.ol-stage [hidden] { display: none !important; }

/* ---- Statement ----------------------------------------------------------- */
.ol-statement-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ol-statement-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ol-counter {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #94a3b8;
}

.ol-statement {
    margin: 0;
    padding: 18px 26px;
    width: 100%;
    text-align: center;
    font-size: clamp(20px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.3;
    color: #2b3a4a;
    background: linear-gradient(180deg, #ffffff, #fffaf2);
    border: 1.5px solid #f0e2cb;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(43, 58, 74, .06);
}

.ol-statement.is-in { animation: ol-fade-up .45s ease both; }

@keyframes ol-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.ol-nav {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.ol-nav:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.ol-nav:disabled { opacity: .35; cursor: default; }

/* Gentle "the room may have moved" pill when a statement is shown again. */
.ol-revisit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fdf2e3;
    border: 1px solid #f3ddb5;
    color: #8a6d1a;
    font-size: 13px;
    font-weight: 700;
    animation: ol-fade-up .45s ease both;
}

/* ---- Board: line + tray --------------------------------------------------- */
.ol-board {
    position: relative;
    background: #fbfdff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ol-line-wrap {
    position: relative;
    padding: 44px 30px 8px;
}

.ol-track {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2c08c, #f8e9cd 50%, #f2c08c);
    box-shadow: inset 0 2px 3px rgba(138, 109, 26, .18);
}

/* Soft centre notch when a middle anchor is configured. */
.ol-track.has-mid::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    bottom: -7px;
    width: 3px;
    border-radius: 2px;
    background: rgba(138, 109, 26, .25);
    transform: translateX(-50%);
}

.ol-anchors {
    position: relative;
    height: 36px;
    margin-top: 12px;
}

.ol-anchor {
    position: absolute;
    top: 0;
    padding: 5px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #e3d5ba;
    color: #6b5635;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.ol-anchor-left { left: 0; }
.ol-anchor-right { right: 0; }
.ol-anchor-mid { left: 50%; transform: translateX(-50%); color: #8d8067; }

/* ---- Tray ------------------------------------------------------------------ */
.ol-tray-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ol-tray {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-radius: 16px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    min-height: 74px;
    width: min(560px, 100%);
}

.ol-slot {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px dashed #cbd5e1;
    background: rgba(255, 255, 255, .55);
}

.ol-tray-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

/* ---- Markers ---------------------------------------------------------------- */
.ol-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .9);
    box-shadow: 0 4px 10px rgba(31, 42, 55, .25);
    cursor: grab;
    touch-action: none;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
    z-index: 5;
}

.ol-marker:focus-visible {
    outline: 3px solid #ffd27f;
    outline-offset: 2px;
}

.ol-marker.is-dragging {
    transition: box-shadow .2s ease;
    box-shadow: 0 10px 22px rgba(31, 42, 55, .35);
    cursor: grabbing;
    z-index: 30;
}

/* Six muted, neutral tones — no traffic-light meanings. */
.ol-marker-c0 { background: radial-gradient(circle at 30% 28%, #aebfd8, #7f9bbf); }
.ol-marker-c1 { background: radial-gradient(circle at 30% 28%, #e0c8a4, #c9a87c); }
.ol-marker-c2 { background: radial-gradient(circle at 30% 28%, #c2b5e0, #9d8ec7); }
.ol-marker-c3 { background: radial-gradient(circle at 30% 28%, #e8c0ca, #d49aa7); }
.ol-marker-c4 { background: radial-gradient(circle at 30% 28%, #b1d2cb, #84b5ad); }
.ol-marker-c5 { background: radial-gradient(circle at 30% 28%, #cfc4b6, #b0a394); }

/* ---- Things to think about (discussion deepener, never a verdict) ----------- */
.ol-think { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.ol-think-btn {
    border: 1.5px solid #f3e2a8;
    background: linear-gradient(180deg, #fffdf4, #fef7e3);
    color: #92691a;
    border-radius: 999px;
    padding: 10px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.ol-think-btn i { margin-right: 7px; }
.ol-think-btn:hover { box-shadow: 0 3px 9px rgba(146, 105, 26, .18); transform: translateY(-1px); }

.ol-think-btn.is-locked {
    opacity: .55;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.ol-think-hint {
    color: #b08a2e;
    font-size: 13px;
    font-weight: 700;
}

.ol-think-hint.ol-wiggle { animation: ol-wiggle .4s ease; }

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

.ol-think-panel {
    width: min(640px, 100%);
    background: linear-gradient(180deg, #fffdf4, #fef7e3);
    border: 1px solid #f3e2a8;
    border-radius: 14px;
    padding: 14px 18px;
}

.ol-think-label {
    font-weight: 800;
    color: #92691a;
    font-size: 14px;
    margin-bottom: 7px;
}

.ol-think-label i { margin-right: 6px; }

.ol-think-panel ul { margin: 0; padding-left: 22px; }

.ol-think-panel li {
    font-weight: 700;
    color: #6b4e12;
    font-size: 15px;
    margin: 5px 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
}

.ol-think-panel.is-open li { opacity: 1; transform: none; }

.ol-revote {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #ecd998;
    color: #7c5f1d;
    font-size: 13.5px;
    font-weight: 700;
}

.ol-revote i { margin-right: 6px; }

/* ---- Empty state -------------------------------------------------------------- */
.ol-empty {
    text-align: center;
    padding: 36px 16px;
    color: #94a3b8;
    font-size: 16px;
    font-weight: 700;
}

/* ---- Display mode: statement + line at maximum size for the IWB ---------------- */
body.display-mode .ol-counter,
body.display-mode .ol-tray-hint,
body.display-mode .ol-revisit,
body.display-mode .ol-think { display: none !important; }

body.display-mode .ol-stage { gap: 24px; }

body.display-mode .ol-statement {
    font-size: clamp(32px, 6.5vw, 64px);
    padding: 30px 36px;
    border-radius: 26px;
}

body.display-mode .ol-nav {
    width: 42px;
    height: 42px;
    opacity: .55;
    background: transparent;
}

body.display-mode .ol-board {
    background: transparent;
    border: none;
    padding: 0 4px;
    gap: 20px;
}

body.display-mode .ol-line-wrap { padding: 60px 38px 8px; }
body.display-mode .ol-track { height: 24px; }
body.display-mode .ol-track.has-mid::after { top: -9px; bottom: -9px; width: 4px; }

body.display-mode .ol-anchors { height: 48px; margin-top: 16px; }

body.display-mode .ol-anchor {
    font-size: clamp(18px, 2.6vw, 28px);
    padding: 8px 24px;
}

body.display-mode .ol-marker,
body.display-mode .ol-slot { width: 72px; height: 72px; }

body.display-mode .ol-tray { min-height: 94px; background: #f6f8fb; }

/* ---- Small screens --------------------------------------------------------------- */
@media (max-width: 560px) {
    .ol-statement { font-size: 18px; padding: 14px 16px; }
    .ol-marker, .ol-slot { width: 46px; height: 46px; }
    .ol-line-wrap { padding: 36px 18px 6px; }
    .ol-anchor { font-size: 13px; padding: 4px 11px; }
}

/* ---- Visually-hidden live region --------------------------------------------------- */
.ol-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}