/* Clock Coach: the Facts Masters palette, with a distinct minute-hand color. */
.clock-coach-page { --hour:#2563eb; --minute:#0f766e; --soft-blue:#eff6ff; --soft-teal:#f0fdfa; }
.clock-coach-page .wrap { max-width:1140px; padding-top:28px; }
.clock-coach-page .site-header { margin-bottom:30px; }
.clock-coach-page .brand-logo { width:min(300px,80vw); }
.clock-coach-page .top-nav { margin-top:19px; }
.coach-back { display:none; }
.coach button,.coach select { font:inherit; }
.coach button { cursor:pointer; }
.coach button:focus-visible,.coach select:focus-visible,.coach input:focus-visible,#clockSvg:focus-visible { outline:3px solid #d97706; outline-offset:4px; }
.coach [hidden] { display:none!important; }
.coach-heading { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.eyebrow { color:#64748b; font-size:11px; font-weight:800; letter-spacing:.11em; margin:0 0 8px; }
.coach-heading h1 { color:#0f172a; font-size:clamp(30px,4vw,40px); margin:0 0 7px; letter-spacing:-.025em; }
.coach-heading #modeDescription { margin:0; color:#475569; font-size:16px; line-height:1.5; }
.pace-badge { flex-shrink:0; display:inline-flex; align-items:center; gap:8px; border:1px solid #99d5c6; border-radius:999px; padding:10px 15px; color:#115e59; background:#f0fdfa; font-size:13px; font-weight:700; }
.pace-badge>span { font-size:19px; line-height:1; }
.mode-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:5px; gap:5px; background:rgba(255,255,255,.65); border:1px solid #d9e5f2; border-radius:18px; }
.mode-tabs button { border:1px solid transparent; border-radius:13px; padding:13px 10px; background:transparent; color:#334155; font-weight:750; font-size:16px; transition:background .15s,color .15s,box-shadow .15s; }
.mode-tabs button span { display:block; margin-top:4px; font-weight:400; font-size:12px; color:#64748b; }
.mode-tabs button:hover { background:#fff; }
.mode-tabs button[aria-pressed=true] { background:#2563eb; color:#fff; border-color:#2563eb; box-shadow:0 3px 8px #2563eb26; }
.mode-tabs button[aria-pressed=true] span { color:#dbeafe; }
.lesson-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:16px 0 0; }
.lesson-picker button { display:flex; align-items:center; gap:9px; text-align:left; min-height:50px; border:1px solid #dbe4ee; background:#fff; color:#475569; border-radius:12px; padding:8px 12px; font-size:13px; font-weight:650; }
.lesson-picker button[aria-pressed=true] { color:#1d4ed8; background:#eff6ff; border-color:#93b8f7; }
.lesson-short { display:none; }
.step-number { display:grid; place-items:center; border-radius:50%; background:#f1f5f9; color:#64748b; width:25px; height:25px; flex-shrink:0; font-weight:800; font-size:12px; }
.lesson-picker button[aria-pressed=true] .step-number { background:#2563eb; color:#fff; }
.lesson-picker button.completed .step-number,.lesson-picker button.is-complete .step-number { background:#ccfbf1; color:#0f766e; }
.level-panel { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 0; padding:11px 15px; border-radius:12px; border:1px solid #dbe4ee; background:#ffffffa6; color:#475569; font-size:13px; }
.level-panel label { font-weight:750; }
.level-panel select { border:1px solid #cbd5e1; background:#fff; border-radius:8px; color:#0f172a; padding:8px 30px 8px 10px; min-height:40px; }
.level-panel>span { margin-left:auto; color:#64748b; }
.lesson-banner { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:21px 0 17px; }
.lesson-banner h2 { margin:0 0 5px; font-size:21px; line-height:1.3; color:#0f172a; }
.lesson-banner p { margin:0; max-width:580px; color:#475569; font-size:14px; line-height:1.5; }
.prompt { max-width:360px; padding:13px 17px; background:#ffffffba; border:1px solid #dbe5f0; border-radius:13px; color:#1e3a8a; font-size:17px; line-height:1.45; font-weight:700; text-align:center; }
.prompt .target-time { font-size:30px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.coach-workspace { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr); gap:20px; align-items:start; }
.clock-panel,.task-panel { background:#fff; border:1px solid #e2e8f0; border-radius:22px; box-shadow:0 4px 18px #0f172a08; }
.clock-panel { padding:19px 22px 22px; }
.clock-panel-top { display:flex; align-items:center; justify-content:space-between; min-height:22px; gap:12px; color:#64748b; font-size:12px; font-weight:650; }
.progress-dots { display:flex; gap:6px; align-items:center; }
.progress-dots span,.progress-dot { display:block; width:8px; height:8px; border-radius:50%; background:#e2e8f0; }
.progress-dots .done,.progress-dots .complete,.progress-dots .is-complete { background:#0f766e; }
.progress-dots .current,.progress-dots .active,.progress-dots .is-current { background:#60a5fa; box-shadow:0 0 0 3px #dbeafe; }
#clockSvg { width:100%; display:block; max-width:470px; margin:4px auto 0; touch-action:auto; user-select:none; -webkit-user-select:none; overflow:visible; }
#clockSvg.interactive,#clockSvg.is-interactive { touch-action:none; cursor:grab; }
#clockSvg.dragging { cursor:grabbing; }
.clock-rim { fill:#dbe5f1; }
.clock-face { fill:#fff; }
.guide-wedge { fill:#dbeafe; opacity:.75; pointer-events:none; }
#clockSvg text { font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif; text-anchor:middle; dominant-baseline:middle; pointer-events:none; user-select:none; }
#hourNumbers text { font-size:31px; fill:#1e3a8a; font-weight:700; }
#minuteNumbers text { font-size:18px; fill:var(--minute); font-weight:650; }
#tickMarks line { stroke:#cbd5e1; stroke-width:2; }
#tickMarks line.major,#tickMarks line.hour-tick { stroke:#94a3b8; stroke-width:3; }
.hour-hand { stroke:var(--hour); stroke-width:15; stroke-linecap:round; }
.minute-hand { stroke:var(--minute); stroke-width:9; stroke-linecap:round; }
.hour-tip { fill:var(--hour); }
.minute-tip { fill:var(--minute); }
.hand-hit { stroke:transparent; stroke-width:35; stroke-linecap:round; pointer-events:stroke; }
.clock-pin { fill:#1e293b; pointer-events:none; }
.clock-pin-inner { fill:#fff; pointer-events:none; }
.hand-legend { display:flex; justify-content:center; gap:23px; flex-wrap:wrap; margin:2px 0 3px; font-size:11px; color:#64748b; }
.hand-legend>span { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:7px; row-gap:2px; }
.hand-legend strong { font-size:11px; letter-spacing:.04em; }
.hand-legend>span>span { grid-column:2; font-size:11px; }
#hourLegend strong { color:var(--hour); }
#minuteLegend strong { color:var(--minute); }
.hour-sample,.minute-sample { display:block; border-radius:5px; grid-row:1/3; }
.hour-sample { height:6px; width:21px; background:var(--hour); }
.minute-sample { height:4px; width:32px; background:var(--minute); }
.digital-readout { margin:16px auto 0; border-top:1px solid #f1f5f9; padding-top:12px; text-align:center; }
.digital-time { font-size:42px; font-weight:750; letter-spacing:.02em; line-height:1.2; font-variant-numeric:tabular-nums; }
#digitalHour { color:var(--hour); }
#digitalMinute { color:var(--minute); }
.digital-colon { color:#94a3b8; margin:0 3px; }
.digital-readout p { margin:5px 0 0; color:#64748b; font-size:12px; }
.drag-hint { text-align:center; color:#64748b; font-size:12px; margin:15px 0 0; line-height:1.5; }
.task-panel { padding:26px; }
.task-panel>.eyebrow { margin-bottom:17px; }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.answer-grid button { min-height:73px; border:2px solid #dbe5f0; border-radius:14px; background:#f8fafc; color:#1e3a8a; font-size:28px; font-weight:750; padding:12px; font-variant-numeric:tabular-nums; transition:border-color .15s,background .15s; }
.answer-grid button:hover { background:#eff6ff; border-color:#93b8f7; }
.answer-grid button.correct,.answer-grid button.is-correct { background:#f0fdfa; border-color:#0d9488; color:#115e59; }
.answer-grid button.incorrect,.answer-grid button.try-again { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
.answer-grid button:disabled { cursor:default; opacity:.7; }
.answer-grid button.correct:disabled,.answer-grid button.is-correct:disabled { opacity:1; }
.hand-selector { display:grid; grid-template-columns:1fr 1fr; padding:4px; gap:5px; background:#f1f5f9; border-radius:12px; margin-bottom:19px; }
.hand-selector button { min-height:45px; border:0; border-radius:9px; background:transparent; color:#475569; font-size:12px; font-weight:700; padding:7px; }
.hand-selector button[aria-pressed=true] { background:#fff; color:#1d4ed8; box-shadow:0 1px 5px #0f172a12; }
.hand-selector button[data-hand=minute][aria-pressed=true] { color:#0f766e; }
.control-label { font-size:12px; font-weight:700; color:#64748b; margin:17px 0 8px; }
.adjust-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.adjust-row button { min-height:47px; border:1px solid #cbd5e1; border-radius:10px; background:#f8fafc; color:#334155; font-size:14px; font-weight:700; padding:9px 5px; }
.adjust-row button:hover { border-color:#93b8f7; background:#eff6ff; }
.adjust-row button:disabled { opacity:.4; cursor:default; }
.keyboard-hint { color:#64748b; font-size:11px; line-height:1.5; margin:13px 0 0; }
.feedback { min-height:74px; margin-top:21px; padding:15px; background:#eff6ff; border:1px solid #dbeafe; border-radius:12px; color:#334155; font-size:14px; line-height:1.6; }
.feedback.success,.feedback.correct { background:#f0fdfa; border-color:#99d5c6; color:#115e59; }
.feedback.hint { background:#fffbeb; border-color:#fde68a; color:#78350f; }
.action-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.primary-button,.secondary-button { min-height:46px; flex:1; border-radius:11px; padding:11px 15px; font-weight:700; font-size:14px; border:1px solid #cbd5e1; }
.primary-button { background:#2563eb; color:#fff; border-color:#2563eb; }
.primary-button:hover { background:#1d4ed8; }
.secondary-button { background:#fff; color:#475569; }
.secondary-button:hover { background:#f8fafc; }
.complete-panel { text-align:center; margin-top:19px; border-top:1px solid #e2e8f0; padding-top:22px; }
.completion-mark { display:grid; place-items:center; width:44px; height:44px; background:#ccfbf1; border-radius:50%; color:#0f766e; font-size:25px; margin:0 auto 11px; }
.complete-panel h3 { margin:0 0 7px; color:#0f172a; font-size:20px; }
.complete-panel p { color:#475569; font-size:14px; line-height:1.5; margin:0; }
.coach-settings { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; padding:17px 3px 0; }
.helper-toggles { display:flex; flex-wrap:wrap; gap:20px; }
.helper-toggles label { display:flex; align-items:center; gap:8px; color:#475569; font-size:13px; cursor:pointer; min-height:30px; }
.helper-toggles input { width:17px; height:17px; accent-color:#0f766e; }
.text-button { background:transparent; border:0; color:#475569; text-decoration:underline; text-underline-offset:3px; font-size:12px; min-height:35px; padding:5px; }
.coach-footnote { margin:11px 0 0; color:#64748b; font-size:12px; line-height:1.5; }
.noscript-note { background:#fff7ed; border:1px solid #fdba74; padding:20px; border-radius:12px; color:#7c2d12; }
@media(max-width:850px) {
  .coach-workspace { grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr); gap:15px; }
  .task-panel { padding:21px; }
  .clock-panel { padding:17px 14px; }
  .lesson-picker button { padding:8px; gap:6px; font-size:12px; }
  .lesson-banner { align-items:stretch; }
  .prompt { max-width:300px; font-size:15px; }
}
@media(max-width:680px) {
  .clock-coach-page .wrap { padding:15px 14px; }
  .clock-coach-page .site-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
  .clock-coach-page .brand { margin-bottom:0; }
  .clock-coach-page .brand-logo { width:clamp(150px,45vw,190px); }
  .coach-back { display:inline-flex; align-items:center; min-height:44px; color:#2563eb; font-size:12px; font-weight:650; text-decoration:none; white-space:nowrap; }
  .clock-coach-page .site-header .lead,.clock-coach-page .site-header .top-nav { display:none; }
  .clock-coach-page .nav-pill { padding:9px 12px; font-size:13px; }
  .coach-heading { gap:12px; align-items:center; margin-bottom:13px; }
  .coach-heading h1 { font-size:27px; margin-bottom:0; }
  .coach-heading .eyebrow,.coach-heading #modeDescription { display:none; }
  .pace-badge { padding:7px 10px; font-size:10px; gap:5px; margin-top:0; }
  .pace-badge>span { font-size:16px; }
  .eyebrow { font-size:9px; letter-spacing:.08em; }
  .mode-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; border-radius:14px; }
  .mode-tabs button { padding:7px 4px; font-size:12px; min-height:46px; border-radius:10px; }
  .mode-tabs button span { display:none; }
  .lesson-picker { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:10px; }
  .lesson-picker button { font-size:11px; min-height:44px; justify-content:center; padding:6px 3px; }
  .lesson-picker .step-number,.lesson-long { display:none; }
  .lesson-short { display:inline; }
  .lesson-banner { flex-direction:column; gap:8px; margin-top:15px; }
  .lesson-banner h2 { font-size:19px; }
  .lesson-banner p { font-size:13px; }
  .prompt { max-width:none; width:auto; font-size:15px; padding:10px 13px; text-align:left; }
  .coach-workspace { grid-template-columns:1fr; gap:14px; }
  .clock-panel { padding:14px 15px 18px; }
  #clockSvg { max-width:365px; margin-top:0; }
  .task-panel { padding:19px; }
  .task-panel>.eyebrow { margin-bottom:11px; }
  .answer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .answer-grid button { min-height:60px; padding:8px 3px; font-size:23px; border-radius:11px; }
  .hand-legend { gap:25px; }
  .digital-time { font-size:37px; }
  .feedback { min-height:55px; margin-top:14px; font-size:13px; padding:12px; }
  .level-panel { padding:10px; gap:8px; }
  .level-panel>span { width:100%; margin-left:0; font-size:12px; }
  .coach-settings { gap:9px; }
  .helper-toggles { gap:14px; }
  .helper-toggles label { font-size:12px; }
}
@media(max-width:365px) {
  .pace-badge { display:none; }
  .answer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  .coach button { transition:none; }
}