/* /test-timer/ only. Loaded after app.css (grey-card standard). */
.timer-stage[data-seg=read]{--c:var(--t-lime)}
.timer-stage[data-seg=extra]{--c:#ffd6f3}
.timer-stage[data-status=paused]{--c:var(--t-yellow)}
.timer-stage[data-warn]:not(.done){--c:#fff1c2;box-shadow:inset 0 3px 0 #ffe896}
.tt-clock{font-size:clamp(4.2rem,19vw,7.4rem)}
.tt-clock.long-time{font-size:clamp(3.3rem,14vw,6rem)}
.clock-wrap{min-height:140px}
.tt-label-display{font-size:1.5rem;font-weight:700;color:var(--card-ink);margin:12px 0 0;overflow-wrap:anywhere;line-height:1.25}
.tt-warn{display:inline-block;margin:12px auto 0;padding:5px 14px;border-radius:999px;background:#ffe896;color:#10141d;font-weight:800;font-size:.95rem;letter-spacing:.01em}
.tt-warn[hidden]{display:none}
.tt-info{margin:4px auto 6px;color:var(--card-ink-soft);font-size:.95rem;font-variant-numeric:tabular-nums}
.tt-info-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.tt-info b{color:var(--card-ink);font-weight:700}
.tt-info-extra{margin-top:4px}
.tt-info-extra b{color:#ffd6f3}
.timer-actions #fullscreen{min-width:0}
.tt-shortcuts{margin:12px 0 16px;color:var(--card-ink-soft)}
kbd{display:inline-block;min-width:1.6em;padding:0 6px;border:1px solid var(--card-rule);border-bottom-width:2px;border-radius:6px;background:var(--field-bg);font:600 .78rem/1.6 var(--font);color:var(--card-ink)}
.tt-presets{grid-template-columns:repeat(5,1fr)}
.tt-presets button{padding-inline:2px;white-space:nowrap}
.tt-options{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
.tt-options[hidden],.tt-options label[hidden]{display:none}
.tt-warns{border:1px solid var(--card-rule);border-radius:14px;padding:10px 14px 6px}
.tt-warns legend{padding:0 6px;font-size:.82rem;font-weight:600;color:var(--card-ink)}
.tt-chips{display:flex;flex-wrap:wrap;gap:0 16px}
.tt-chips .check{min-height:40px;font-weight:600}
.tt-share{margin-top:22px;padding-top:18px;border-top:1px solid var(--card-rule);display:grid;gap:10px}
.tt-share input{width:100%;font-size:.86rem;color:var(--card-ink-soft)}
.tt-share .small,.tt-pace .small{margin:0;color:var(--card-ink-soft)}
.tt-pace{margin-top:16px;display:grid;gap:8px}
.tt-pace input{max-width:180px}
.tt-formal{align-self:center}
/* formal exam look: black and white, no colour */
.timer-stage.formal{--c:#ffffff;background:#0b0d10;color:#fff}
.timer-stage.formal .clock{text-shadow:none}
.timer-stage.formal .stage-top>span:first-child,.timer-stage.formal .tt-info b,.timer-stage.formal .tt-info-extra b{color:#fff}
.timer-stage.formal .tt-info,.timer-stage.formal .timer-status,.timer-stage.formal .session-note,.timer-stage.formal .tt-shortcuts,.timer-stage.formal .stage-top{color:#d9dde3}
.timer-stage.formal .tt-warn{background:#fff;color:#000}
.timer-stage.formal[data-warn]:not(.done){box-shadow:inset 0 0 0 3px #fff}
.timer-stage.formal.done{background:#0b0d10}
.timer-stage.formal.done .timer-status{color:#fff}
.timer-stage.formal .progress span{background:#fff}
.timer-stage.formal.is-full,.timer-stage.formal.is-full.done{background:#000}
/* full screen */
.timer-stage.is-full .tt-label-display{font-size:clamp(1.5rem,4.5vw,3.2rem);margin-top:4px}
.timer-stage.is-full .tt-warn{font-size:clamp(1rem,2.6vw,1.8rem);padding:6px 20px}
.timer-stage.is-full .clock-wrap{max-height:none}
.timer-stage.is-full .tt-clock{font-size:clamp(4.6rem,24vw,19rem);line-height:1}
.timer-stage.is-full .tt-clock.long-time{font-size:clamp(3.4rem,17vw,14rem)}
.timer-stage.is-full .tt-info{font-size:clamp(1rem,2.4vw,1.7rem);margin:6px 0 10px}
.timer-stage.is-full .timer-status{font-size:clamp(1rem,2.2vw,1.6rem)}
.timer-stage.is-full .tt-shortcuts,.timer-stage.is-full .session-note{display:none}
.timer-stage.is-full.done .timer-status{font-size:clamp(1.6rem,5vw,3.6rem)}
.timer-stage.done .timer-status{font-size:1.3rem}
/* text below the tool */
.tt-text h2{margin-top:38px;font-size:clamp(1.35rem,3vw,1.75rem)}
.tt-text h2:first-child{margin-top:0}
.tt-text ol,.tt-text ul{color:var(--ink-soft);padding-left:1.3em}
.tt-text li{margin:4px 0}
.tt-steps li::marker{font-weight:800;color:var(--ink)}
.tt-table-wrap{overflow-x:auto;border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--card-shadow);border:1px solid var(--card-line)}
.tt-table{width:100%;border-collapse:collapse;color:var(--card-ink);font-size:.95rem}
.tt-table th,.tt-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--card-rule);vertical-align:top}
.tt-table tr:last-child td{border-bottom:0}
.tt-table th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--card-ink-soft)}
.tt-table td:first-child{font-weight:800;white-space:nowrap;color:#d6f6fb}
.tt-table a{color:var(--neon-cyan);font-weight:600}
.tt-table td:last-child a{white-space:nowrap}
.tt-more{max-width:800px;margin:0 0 50px}
.tt-more h2{font-size:clamp(1.3rem,3vw,1.7rem)}
.tt-more p{color:var(--ink-soft)}
@media(min-width:761px){
 .tt-presets{grid-template-columns:repeat(10,1fr)}
 .tt-options{grid-template-columns:repeat(2,1fr);align-items:end}
 .tt-options-2{grid-template-columns:1.6fr 1fr}
 .tt-share{grid-template-columns:auto 1fr;align-items:center}
 .tt-share .small{grid-column:1/-1}
 .settings-grid .tt-formal{min-height:46px}
}
@media(max-width:420px){
 .tt-presets{gap:6px}
 .tt-presets button{font-size:.92rem}
 .tt-info{font-size:.86rem}
 .timer-actions button{min-width:0;flex:1 1 40%}
 .timer-actions .primary{flex-basis:100%}
}
@media(hover:none) and (pointer:coarse){.tt-shortcuts{display:none}}