/*
 * 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-fair-test-timer
 */
.ftt-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 28px 16px;
}

.ftt-readout {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 18vw, 132px);
    line-height: 1;
    color: #163a5f;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    min-width: 4ch;
    text-align: center;
}

.ftt-readout.is-running { color: #15803d; }
.ftt-readout.is-done { color: #b45309; }

.ftt-buttons {
    display: flex;
    gap: 12px;
}

.ftt-start {
    min-width: 140px;
    font-size: 18px;
}

.ftt-laps {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    width: min(320px, 90%);
    font-family: 'Nunito', system-ui, sans-serif;
}

.ftt-laps li {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.ftt-laps li span:first-child { color: #64748b; font-weight: 600; }

body.maths-activity .activity-container.display-mode .ftt-buttons { opacity: .9; }

/* Reset beside Start, lap splits, and the "time's up" word under the numbers. */
.ftt-buttons { flex-wrap: wrap; justify-content: center; }
.ftt-reset[hidden] { display: none; }
.ftt-lap:disabled { opacity: .45; cursor: default; }
.ftt-laps li { gap: 14px; }
.ftt-laps li .ftt-split { margin-left: auto; min-width: 5ch; text-align: right; color: #64748b; font-weight: 600; }
.ftt-readout.is-done::after {
    content: "Time\2019s up!"; display: block; margin-top: .1em;
    font-size: .22em; letter-spacing: 0; font-weight: 800; color: #b45309;
}
.ftt-start:focus-visible, .ftt-lap:focus-visible, .ftt-reset:focus-visible { outline: 3px solid #0d3f7a; outline-offset: 3px; }

/* =====================================================================
 * Board-scale (31 Oct 2026)
 * The numbers stopped at 132px and the buttons were 40px wide-ish, on a
 * mostly empty screen: a class timer should be readable from the back row.
 * The readout now grows with the frame height. Applies in display mode too,
 * because that is how a timer is shown on the board. Compete rounds untouched.
 * ===================================================================== */
@media (min-width: 700px) and (min-height: 500px) {
    html:not(.mcr-compete) body.maths-activity .ftt-stage { justify-content: center; gap: 4vh; min-height: 62vh; }
    html:not(.mcr-compete) body.maths-activity .ftt-readout { font-size: clamp(110px, 30vh, 420px); }
    html:not(.mcr-compete) body.maths-activity .ftt-start,
    html:not(.mcr-compete) body.maths-activity .ftt-lap,
    html:not(.mcr-compete) body.maths-activity .ftt-reset { min-height: 56px; min-width: 150px; font-size: 20px; }
}
@media (min-width: 1500px) and (min-height: 760px) {
    html:not(.mcr-compete) body.maths-activity .ftt-buttons { gap: 20px; }
    html:not(.mcr-compete) body.maths-activity .ftt-start,
    html:not(.mcr-compete) body.maths-activity .ftt-lap,
    html:not(.mcr-compete) body.maths-activity .ftt-reset { min-height: 72px; min-width: 220px; font-size: 28px; border-radius: 14px; }
    html:not(.mcr-compete) body.maths-activity .ftt-laps { width: min(520px, 90%); font-size: 22px; }
    html:not(.mcr-compete) body.maths-activity .ftt-laps li { padding: 8px 16px; }
}