/*
 * 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-transformation-playground
 */
/*
 * transformation-playground activity styles.
 *
 * Squared-paper grid (SVG). The original shape is drawn in muted
 * primary blue with reduced opacity; the transformed shape is drawn
 * in vivid orange. A dashed mirror-line appears when a reflection
 * has been applied. A small "target shape" outline (dashed green)
 * appears in challenge mode.
 */

.tp-mode-chip {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--maths-surface-alt);
    color: var(--maths-primary-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tp-target-label {
    font-weight: 800;
    color: #8a5a00;
    font-size: 0.95rem;
    margin-right: 0.5rem;
}

.tp-target-prompt {
    flex: 1 1 auto;
    color: #6b4500;
    font-weight: 700;
    font-size: 1rem;
}

.tp-anchors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.7rem;
}

.tp-anchors-label {
    margin-right: 0.4rem;
}

.tp-anchor-btn {
    min-width: 48px;
    min-height: 40px;
    font-size: 0.95rem;
    font-weight: 700;
}

.tp-anchor-btn.is-active {
    background: var(--maths-accent);
    color: #fff;
    border-color: var(--maths-accent-dark);
}

.tp-anchor-reset {
    margin-left: auto;
    min-height: 40px;
}

.tp-anchors-hint {
    flex-basis: 100%;
    font-weight: 700;
    color: var(--maths-accent-dark);
    font-size: 0.95rem;
    padding-top: 0.2rem;
}

.tp-anchors-hint[hidden] { display: none; }

.tp-tools {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tp-tool-group {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1 1 240px;
}

.tp-tool-label {
    font-weight: 800;
    color: var(--maths-primary-dark);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.3rem;
}

.tp-tool-btn {
    background: var(--maths-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    min-width: 48px;
    min-height: 44px;
    transition: background-color 160ms ease;
}

.tp-tool-btn:hover { background: var(--maths-primary-dark); }
.tp-tool-btn:disabled { background: #b5bcc8; cursor: not-allowed; }

/* Slide step-size chips — tap to set how many units one arrow tap moves. */
.tp-step-chips {
    display: inline-flex;
    gap: 0.25rem;
    margin-right: 0.5rem;
}

.tp-step-chip {
    min-width: 44px;
    min-height: 36px;
    background: var(--maths-surface);
    border: 2px solid var(--maths-border);
    border-radius: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--maths-primary-dark);
    cursor: pointer;
    padding: 0 0.5rem;
}

.tp-step-chip:hover { background: var(--maths-surface-alt); }
.tp-step-chip.is-active {
    background: var(--maths-accent);
    color: #fff;
    border-color: var(--maths-accent-dark);
}

.tp-stage {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.4rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.tp-grid-svg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 60vh;
    aspect-ratio: 600 / 480;
    display: block;
}

.tp-grid-svg.is-picking {
    cursor: crosshair;
}

.tp-grid-line { stroke: var(--maths-grid-line); stroke-width: 1; }
.tp-axis-line { stroke: var(--maths-border); stroke-width: 1.5; }

/* Rotation centre marker — crosshair + filled dot placed at the grid
 * intersection a pupil tapped. Stays visible across transformations so
 * the "rotate about THIS point" anchor is always clear. */
.tp-centre-marker-line {
    stroke: #b14ea0;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.tp-centre-marker-dot {
    fill: #b14ea0;
    stroke: #fff;
    stroke-width: 2;
}

/* A picked mirror line stays drawn for the whole session, not just after
 * the next reflect tap, so the teacher / pupil can refer back to it. */
.tp-mirror-line.is-persistent {
    stroke: #c62828;
    stroke-width: 2.5;
    stroke-dasharray: 8 4;
    opacity: 0.85;
}

.tp-shape-original {
    fill: var(--maths-primary);
    opacity: 0.25;
    stroke: var(--maths-primary-dark);
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

.tp-shape-current {
    fill: var(--maths-accent);
    opacity: 0.85;
    stroke: var(--maths-accent-dark);
    stroke-width: 2;
    transition: transform 350ms ease;
}

.tp-target-outline {
    fill: rgba(76, 175, 80, 0.12);
    stroke: #2e7d32;
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.tp-mirror-line {
    stroke: #c62828;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.7;
}

.tp-rotation-centre {
    fill: #c62828;
    stroke: #fff;
    stroke-width: 1.5;
}

.tp-summary {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tp-summary-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.tp-summary-label {
    font-weight: 800;
    color: var(--maths-ink-muted);
    font-size: 1rem;
    letter-spacing: 0.02em;
    min-width: 11rem;
}

.tp-summary-value {
    color: var(--maths-ink);
    font-weight: 700;
    font-size: 1.1rem;
}

.tp-summary-invariant .tp-summary-value { color: #166534; }
.tp-summary-variant .tp-summary-value { color: #b71c1c; }

.tp-your-turn {
    background: #FFF7DE;
    border: 1px solid #F0C14B;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-top: 1rem;
}

.tp-your-turn-label { font-weight: 800; color: #8a5a00; margin-bottom: 0.4rem; }
.tp-your-turn-list { margin: 0; padding-left: 1.2rem; color: #5e3c00; font-weight: 600; }

/* Read-only snapshot: the transform tools and undo have nothing to act on,
 * so hide them rather than leaving a dimmed, space-holding control row. The
 * whole anchor row (Anchor / Set centre / mirrors) and the tool sections
 * (Slide / Flip / Turn / Grow, with their ×1 ×5 ×10 chips and labels) must go
 * too — they were leaking onto display steps as a wall of control text (QA #377). */
body.display-mode .tp-tool-btn,
body.display-mode #undoButton,
body.display-mode .tp-anchors,
body.display-mode .tp-tools {
    display: none !important;
}