/* Rekenpret 3.3 — Kloklezen: responsieve schermweergave en A4-werkbladen */
.clock-home-card {grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:28px;min-height:160px;background:linear-gradient(125deg,#fff,#eaf9ff 65%,#fff6d9)!important;border-color:#bfe6f5!important;}
.clock-home-card .featured-details {flex:1 1 390px;width:auto;}
.clock-home-card .module-actions {flex:0 1 365px;width:auto;margin-top:0;padding-top:0;}
.clock-home-card::after {background:#ccefff!important;}
.clock-choice-icon {background:#c6edf5!important;transform:rotate(-9deg)!important;}
.clock-new-label {display:inline-block;vertical-align:middle;margin-left:4px;padding:3px 7px;border-radius:7px;background:#d6f7df;color:#1a6e52;font-size:10px;letter-spacing:1px;font-weight:900;}
.clock-question {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:13px 16px;gap:7px;}
.clock-prompt {font-size:clamp(18px,3vw,25px);color:#31477c;font-weight:900;margin:3px 0 10px;}
.clock-question .clock-face {width:min(250px,70vw);filter:drop-shadow(0 6px 6px rgba(39,82,144,.08));}
.clock-digital-time {display:inline-flex;align-items:center;justify-content:center;min-width:165px;font-size:clamp(43px,7vw,74px);font-weight:900;letter-spacing:3px;font-variant-numeric:tabular-nums;padding:9px 22px;border:3px solid #c4dcf4;border-radius:20px;background:#e7f4ff;color:#294a8b;box-shadow:0 5px 0 #bad5ed;}
.clock-period {font-weight:800;color:#4f6488;font-size:13px;text-align:center;background:#eaf4ff;border-radius:999px;padding:5px 12px;}
.clock-choice {position:relative;min-height:134px;padding:8px 6px;background:#fffdfa!important;}
.clock-choice .clock-letter {position:absolute;top:4px;left:6px;display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#e6f2ff;color:#294a8b;font-size:11px;font-weight:900;}
.clock-choice .clock-face {display:block;width:min(100%,133px);height:auto;max-height:125px;}
.clock-choice:hover:not(:disabled) {border-color:#4295bd!important;background:#effbff!important;}
/* De grote wijzer is langer en lichtblauw; de kleine wijzer is donkerblauw. */
.clock-face {display:block;flex-shrink:0;max-width:100%;height:auto;overflow:visible;}
.clock-bezel {fill:#d9f1fb;stroke:#3d719b;stroke-width:3.5;}
.clock-dial {fill:#fff;stroke:#c3dfed;stroke-width:1.8;}
.clock-tick {stroke:#98a7bd;stroke-width:1.4;stroke-linecap:round;}
.clock-tick.big {stroke:#3a628d;stroke-width:2.5;}
.clock-digit {fill:#273d68;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:900;}
.clock-hand-hour {stroke:#273b6c;stroke-width:8.5;stroke-linecap:round;}
.clock-hand-minute {stroke:#0899b7;stroke-width:5;stroke-linecap:round;}
.clock-pin {fill:#ec8b56;stroke:#fff;stroke-width:1.5;}
.sheet-clock {--page-accent:#139fba;--page-pale:#e7f8ff;--page-ink:#186781;}
.clock-sheet-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,1fr);gap:2.5mm 3.5mm;flex:1;min-height:0;align-content:stretch;}
.sheet-count-6 .clock-sheet-grid {grid-template-rows:repeat(3,1fr);}
.clock-sheet-item {position:relative;min-width:0;min-height:0;display:flex;align-items:flex-start;justify-content:center;gap:5px;border:1px solid #cfebf3;background:#fff;border-radius:13px;padding:2.5mm;overflow:hidden;}
.clock-sheet-item:nth-child(2n) {background:var(--page-pale);}
.clock-sheet-item .exercise-number {align-self:flex-start;margin-top:3mm;}
.clock-sheet-body {flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:0;}
.clock-sheet-prompt {font-size:11px;font-weight:900;color:var(--page-ink);white-space:nowrap;}
.clock-sheet-body .clock-face {height:34mm;width:34mm;max-height:100%;}
.sheet-count-6 .clock-sheet-body .clock-face {width:48mm;height:48mm;}
.clock-sheet-body .clock-period {font-size:8px;border-radius:7px;padding:1px 6px;line-height:1.15;}
.clock-print-time,.clock-print-solution {font-size:16px;font-weight:900;letter-spacing:1px;color:#216d8a;font-variant-numeric:tabular-nums;}
.clock-print-line {font-size:14px;letter-spacing:2px;font-weight:800;color:#677789;line-height:1.15;}
.sheet-clock.monochrome .clock-sheet-item {background:#fff;border-color:#777;}
.sheet-clock.monochrome .clock-period {background:#fff;color:#222;border:1px solid #777;}
.sheet-clock.monochrome .clock-bezel {fill:#eee;stroke:#222;}
.sheet-clock.monochrome .clock-dial {fill:#fff;stroke:#444;}
.sheet-clock.monochrome .clock-hand-hour,.sheet-clock.monochrome .clock-hand-minute {stroke:#111;}
.sheet-clock.monochrome .clock-tick,.sheet-clock.monochrome .clock-tick.big {stroke:#222;}
.sheet-clock.monochrome .clock-digit,.sheet-clock.monochrome .clock-print-time,.sheet-clock.monochrome .clock-print-solution,.sheet-clock.monochrome .clock-sheet-prompt {color:#111;fill:#111;}
.sheet-clock.monochrome .clock-pin {fill:#111;}
@media screen and (max-width:650px) {
  .clock-home-card {flex-direction:column;align-items:stretch;gap:12px;}
  .clock-home-card .featured-details,.clock-home-card .module-actions {flex:1 1 auto;width:100%;}
  .clock-home-card .choice-icon {width:60px;height:60px;}
  .clock-choice {position:relative;min-height:115px;padding:5px;}
  .clock-choice .clock-face {max-height:105px;}
  .clock-sheet-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:8px;}
  .clock-sheet-item {padding:5px 1px;gap:1px;min-width:0;min-height:145px;}
  .clock-sheet-item .exercise-number {width:17px;min-width:17px;height:17px;font-size:8px;}
  .clock-sheet-prompt {font-size:9px;}
  .clock-sheet-body .clock-face,.sheet-count-6 .clock-sheet-body .clock-face {width:min(100%,125px);height:auto;}
  .clock-print-line,.clock-print-time,.clock-print-solution {font-size:13px;}
  .clock-sheet-body .clock-period {font-size:7px;}
}
@media print {
  .sheet-clock .sheet-head {min-height:35mm;margin-bottom:3mm;}
  .sheet-clock .clock-sheet-grid {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:2mm 3.5mm;min-height:0;flex:1;}
  .sheet-clock.sheet-count-6 .clock-sheet-grid {grid-template-rows:repeat(3,minmax(0,1fr));}
  .sheet-clock .clock-sheet-item {gap:1mm;padding:1.6mm;border-radius:9px;}
  .sheet-clock .clock-sheet-prompt {font-size:8pt;line-height:1.3;}
  .sheet-clock .clock-sheet-item .exercise-number {margin-top:1mm;}
  .sheet-clock .clock-sheet-body .clock-face {width:35mm;height:35mm;}
  .sheet-clock.sheet-count-6 .clock-sheet-body .clock-face {width:49mm;height:49mm;}
  .sheet-clock .clock-print-line,.sheet-clock .clock-print-time,.sheet-clock .clock-print-solution {font-size:12pt;line-height:1.15;}
  .sheet-clock .clock-period {font-size:7pt;padding:.5mm 1mm;}
  .sheet-clock .sheet-foot {padding-top:1mm;}
}