/* Shared classroom presentation controls for johnplusenglish: the timer pill.
   Behaviour lives in present.js (timerInit / timerWidgetHTML / timerHandleClick).
   This file owns only the button PILL (solid sky-blue, unified 2026-09-06).
   Each page keeps its own container (.timer-section / .timer-row) and progress
   bar inline, since those layouts differ per page. Colours come from theme.css. */
.timer-btn-wrap{display:inline-flex;border-radius:10px;overflow:hidden}
.timer-row .timer-btn-wrap{margin-left:auto}   /* exam-page layout: push pill right */
.timer-btn{background:var(--sky);color:#fff;border:none;padding:6px 16px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Outfit',sans-serif;display:inline-flex;align-items:center;gap:6px}
.timer-btn:hover{background:#185FD6}
.timer-btn-icon{font-size:.85em;line-height:1}
.timer-btn .timer-btn-time{font-family:'JetBrains Mono',monospace}
.timer-btn.running{background:#FF6B6B}
.timer-btn.running:hover{background:#D6453F}
.timer-btn.paused{background:var(--sun)}
.timer-btn.warn{background:#FF6B6B}
.timer-btn.done{background:#FF6B6B}
.timer-edit-btn{font-family:'Outfit',sans-serif;padding:6px 10px;border:none;border-left:1.5px solid rgba(255,255,255,.35);background:var(--sky);color:#fff;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center}
.timer-edit-btn:hover{background:#185FD6}
.timer-duration-edit{display:none;align-items:baseline;gap:.3rem;font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;padding:6px 10px;border:1.5px solid var(--ink);border-radius:10px;background:var(--card);color:var(--ink)}
.timer-duration-input{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;border:none;background:transparent;color:var(--ink);width:4.2ch;text-align:center;outline:none;padding:0}