/*
 * circle-tool — interactive circle with radius slider, live diameter and
 * circumference read-outs, optional ratio panel (C ÷ d ≈ π), optional
 * compass-mode animation, and a construction mode that demonstrates
 * triangle-from-three-sides and line / angle bisection step by step.
 */

.maths-activity .ct-mode-chip {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--maths-surface-alt);
    color: var(--maths-primary-dark);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Stage layout: SVG canvas + side readout / slider */
.maths-activity .ct-stage {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(240px, 300px);
    gap: 1rem;
    align-items: start;
}

.maths-activity .ct-svg {
    width: 100%;
    height: auto;
    max-height: 520px;
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 10px;
    touch-action: none;
    user-select: none;
}

/* Readout side panel */
.maths-activity .ct-readout {
    background: var(--maths-surface);
    border: 1px solid var(--maths-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.maths-activity .ct-readout-block {
    border-bottom: 1px dashed var(--maths-border);
    padding-bottom: 0.7rem;
}

.maths-activity .ct-readout-block:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.maths-activity .ct-readout-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--maths-ink-muted);
    margin-bottom: 0.3rem;
}

.maths-activity .ct-readout-value {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.maths-activity .ct-readout-number {
    font-weight: 800;
    font-size: 2rem;
    color: var(--maths-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.maths-activity .ct-readout-unit {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--maths-primary);
}

.maths-activity .ct-ratio-block {
    background: rgba(31, 111, 178, 0.06);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    border-bottom: none;
}

.maths-activity .ct-ratio-block .ct-readout-number {
    color: var(--maths-accent);
}

.maths-activity .ct-ratio-block .ct-readout-unit {
    color: var(--maths-accent);
    font-size: 1rem;
}

.maths-activity .ct-ratio-note {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--maths-ink-muted);
    font-style: italic;
}

/* Slider block */
.maths-activity .ct-slider-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--maths-border);
}

.maths-activity .ct-slider-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--maths-ink);
}

.maths-activity #radiusSlider {
    width: 100%;
    accent-color: var(--maths-accent, #E86A33);
}

.maths-activity .ct-slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--maths-ink-muted);
}

/* Target panel */
.maths-activity .ct-target-label {
    font-weight: 800;
    color: var(--maths-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
}

.maths-activity .ct-target-label i {
    margin-right: 0.35rem;
    color: var(--maths-accent);
}

.maths-activity .ct-target-prompt {
    font-weight: 700;
    color: var(--maths-ink);
    font-size: 1.05rem;
    flex: 1 1 auto;
}

/* SVG element classes used by the JS renderer */
.ct-circle {
    fill: rgba(31, 111, 178, 0.06);
    stroke: var(--maths-primary, #1F6FB2);
    stroke-width: 2.5;
}

.ct-centre {
    fill: var(--maths-ink, #1F2933);
}

.ct-radius {
    stroke: var(--maths-accent, #E86A33);
    stroke-width: 3;
    stroke-linecap: round;
}

.ct-diameter {
    stroke: var(--maths-primary, #1F6FB2);
    stroke-width: 2.5;
    stroke-dasharray: 6 4;
}

.ct-label {
    font: 700 14px Nunito, sans-serif;
    fill: var(--maths-ink, #1F2933);
    text-anchor: middle;
    dominant-baseline: middle;
}

.ct-label.is-radius { fill: var(--maths-accent, #E86A33); }
.ct-label.is-diameter { fill: var(--maths-primary, #1F6FB2); }
.ct-label.is-circumference { fill: var(--maths-success, #2E8540); font-size: 13px; }
.ct-label.is-centre { fill: var(--maths-ink-muted, #5B6770); font-size: 12px; }

/* Ruler-measure pre-phase artwork (shown when showRulerMeasure is on) */
.ct-ruler-body {
    fill: #fef3c7;
    stroke: var(--maths-ink, #1F2933);
    stroke-width: 1.5;
}

.ct-ruler-tick {
    stroke: var(--maths-ink, #1F2933);
    stroke-width: 1.5;
}

.ct-ruler-label {
    font: 600 11px Nunito, sans-serif;
    fill: var(--maths-ink, #1F2933);
    text-anchor: middle;
    dominant-baseline: middle;
}

.ct-ruler-callout {
    font: 700 16px Nunito, sans-serif;
    fill: var(--maths-primary-dark, #134E78);
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Compass-mode artwork */
.ct-compass-arm {
    stroke: var(--maths-ink, #1F2933);
    stroke-width: 3;
    stroke-linecap: round;
}

.ct-compass-pivot {
    fill: var(--maths-ink, #1F2933);
}

.ct-compass-pencil {
    fill: var(--maths-accent, #E86A33);
}

.ct-circle-trace {
    fill: none;
    stroke: var(--maths-accent, #E86A33);
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Construction-mode artwork: faint dashed arcs from compass swings */
.ct-construction-arc {
    fill: none;
    stroke: var(--maths-primary, #1F6FB2);
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    opacity: 0.85;
}

.ct-construction-line {
    stroke: var(--maths-ink, #1F2933);
    stroke-width: 2;
    stroke-linecap: round;
}

.ct-construction-line.is-result {
    stroke: var(--maths-success, #2E8540);
    stroke-width: 2.5;
}

.ct-construction-point {
    fill: var(--maths-ink, #1F2933);
}

.ct-construction-step-label {
    font: 600 12px Nunito, sans-serif;
    fill: var(--maths-ink-muted, #5B6770);
    text-anchor: middle;
}

/* Mobile-friendly stacking */
@media (max-width: 780px) {
    .maths-activity .ct-stage {
        grid-template-columns: 1fr;
    }
    .maths-activity .ct-readout-number {
        font-size: 1.6rem;
    }
}

/* Display-mode: compact snapshot. SVG sits on the left with its labels
 * on the diagram; the read-out panel (Radius, Diameter, optional
 * Circumference and C÷d ratio) sits to the right using the horizontal
 * room that the explore layout would have given the slider. The pair
 * is centred on the page so it reads as one composed unit rather than
 * a left-aligned diagram with detached cards. We still hide anything
 * interactive (slider, challenge target panel, challenge runner). The
 * JS swaps to a tighter viewBox so the circle fills the SVG rather
 * than floating in unused canvas.
 */
body.display-mode .ct-stage {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

body.display-mode .ct-svg {
    width: 280px;
    height: 280px;
    max-height: 280px;
    border: none;
    background: transparent;
    display: block;
    pointer-events: none;
}

body.display-mode .ct-readout {
    min-width: 200px;
    max-width: 260px;
}

body.display-mode .ct-slider-block,
body.display-mode .ct-target-panel,
body.display-mode #challengeRunner {
    display: none !important;
}