/*
 * analog-clock-builder — SVG clock face with draggable hour and minute hands.
 * Live readouts in 12-hour, 24-hour, and words. Teaches reading and setting
 * analog time, elapsed-time questions, and the link between angle and minute.
 */

.maths-activity .acb-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.maths-activity .acb-clock-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Dual-clock row (start -> end) for elapsed-time spans. The secondary clock and
   the connector stay hidden until a span is active. */
.maths-activity .acb-clocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    width: 100%;
}

.maths-activity .acb-clock-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.maths-activity .acb-clock-caption {
    font-weight: 700;
    font-size: 1rem;
    color: var(--maths-text, #1f2937);
    text-align: center;
    min-height: 1.2em;
}

.maths-activity .acb-clock-unit-secondary { display: none; }

.maths-activity .acb-span-connector {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    /* Stable width so the duration text changing length while dragging
       (e.g. "38 min" -> "1 hr 5 min") doesn't reflow the clock row. */
    min-width: 9.5rem;
}

.maths-activity .acb-span-arrow {
    font-size: 1.75rem;
    color: var(--maths-text-muted, #6b7280);
    line-height: 1;
}

.maths-activity .acb-span-duration {
    font-size: 1.6rem;
    font-weight: 800;
    color: #d84315;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: center;
}

.maths-activity .acb-span-sub {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--maths-text-muted, #6b7280);
}

body.acb-span .acb-clock-unit-secondary { display: flex; }
body.acb-span .acb-span-connector { display: flex; }
/* In span mode the clocks carry the meaning — give them the full width and
   shrink each face so the pair sits side by side. */
body.acb-span .acb-layout { display: block; }
body.acb-span .acb-side { display: none; }
body.acb-span .acb-clock { width: 240px; height: 240px; }

/* Challenge span: the fixed start clock sits on the left, the learner's clock
   on the right. */
body.acb-span-challenge .acb-clock-unit-secondary { order: 1; }
body.acb-span-challenge .acb-span-connector { order: 2; }
body.acb-span-challenge .acb-clock-unit-primary { order: 3; }

/* Inner 24-hour ring + digital readout (24-hour / both formats). */
.maths-activity .acb-ring24 { display: none; }
body.acb-24ring .acb-ring24 { display: block; }

.maths-activity .acb-num-24 {
    fill: #b45309;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 9px;
    text-anchor: middle;
    dominant-baseline: central;
    user-select: none;
}

.maths-activity .acb-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.maths-activity .acb-digital { display: none; }
body.acb-digital-on .acb-digital { display: flex; }
body.acb-span .acb-digital { display: none; }

.maths-activity .acb-digital {
    flex-direction: column;
    gap: 0.25rem;
    background: #0f172a;
    border-radius: 14px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.maths-activity .acb-digital-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

.maths-activity .acb-digital-value {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.maths-activity .acb-hand-static { cursor: default; pointer-events: none; }

.maths-activity .acb-clock {
    width: 320px;
    height: 320px;
    max-width: 100%;
    filter: drop-shadow(0 6px 14px rgba(20, 40, 80, 0.12));
    user-select: none;
    touch-action: none;
}

.maths-activity .acb-face {
    fill: #fffaf0;
    stroke: #1b5e20;
    stroke-width: 4;
}

.maths-activity .acb-ticks line {
    stroke: #1b5e20;
    stroke-linecap: round;
}

.maths-activity .acb-ticks line.acb-tick-major { stroke-width: 3; }
.maths-activity .acb-ticks line.acb-tick-minor { stroke-width: 1.5; opacity: 0.6; }

.maths-activity .acb-numbers text {
    fill: #1f2937;
    font-family: "Nunito", sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-anchor: middle;
    dominant-baseline: central;
    user-select: none;
}

.maths-activity .acb-hand {
    stroke-linecap: round;
    cursor: grab;
    transition: stroke 120ms ease-out;
}

.maths-activity .acb-hand:active,
.maths-activity .acb-hand.acb-dragging { cursor: grabbing; }

.maths-activity .acb-hand-hour {
    stroke: #1b5e20;
    stroke-width: 8;
}

.maths-activity .acb-hand-minute {
    stroke: #d84315;
    stroke-width: 5;
}

.maths-activity .acb-hand-second {
    stroke: #6b7280;
    stroke-width: 2;
    pointer-events: none;
}

.maths-activity .acb-hand:hover { filter: brightness(1.15); }
.maths-activity .acb-hand:focus { outline: none; filter: drop-shadow(0 0 4px var(--maths-primary, #2E7D32)); }

.maths-activity .acb-pivot {
    fill: #1b5e20;
    stroke: #fffaf0;
    stroke-width: 2;
    pointer-events: none;
}

.maths-activity .acb-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.maths-activity .acb-control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--maths-text, #1f2937);
}

.maths-activity .acb-control input[type="range"] {
    width: 100%;
    accent-color: var(--maths-primary, #2E7D32);
    cursor: pointer;
}

.maths-activity .acb-readouts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    align-content: start;
}

.maths-activity .acb-readout {
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
}

.maths-activity .acb-readout-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--maths-text-muted, #6b7280);
}

.maths-activity .acb-readout-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.maths-activity .acb-readout-words .acb-readout-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.maths-activity .acb-mode-chip {
    display: inline-block;
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-top: 0.25rem;
}

.maths-activity .acb-target-label {
    font-weight: 800;
    color: #8d4e0b;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.maths-activity .acb-target-prompt { flex: 1; font-weight: 700; color: #1f2937; }

.maths-activity .acb-your-turn {
    margin-top: 1.25rem;
    background: #f1f8e9;
    border: 1px solid #aed581;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.maths-activity .acb-your-turn-label {
    font-weight: 800;
    color: #33691e;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.maths-activity .acb-your-turn-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #1f2937;
    font-weight: 600;
}

.maths-activity .acb-your-turn-list li { margin-bottom: 0.25rem; }

/* Display mode — hide controls, lock interaction */

body.display-mode .activity-header .controls-container,
body.display-mode .acb-controls,
body.display-mode .acb-target-panel,
body.display-mode .acb-your-turn { display: none !important; }

body.display-mode .acb-hand { cursor: default !important; pointer-events: none; }

@media (max-width: 720px) {
    .maths-activity .acb-layout { grid-template-columns: 1fr; }
    .maths-activity .acb-clock { width: 280px; height: 280px; }
    .maths-activity .acb-readouts { grid-template-columns: 1fr; }
    body.acb-span .acb-clock { width: 200px; height: 200px; }
    .maths-activity .acb-span-connector { flex-direction: row; gap: 0.5rem; }
}