/* Time Quiz (2026-10-27): reuses the Multiplication Quiz layout (.multiplication-quiz-view + mq-*);
   only the time pictures and blanks are styled here. Pad clocks live in scratch-pad.css. */
.time-quiz-view .tq-question-card h2 .blank { display: inline-block; min-width: 64px; border-bottom: 3px solid var(--mq-ink); color: transparent; line-height: 1; vertical-align: baseline; }
.time-quiz-view .tq-visual { display: flex; justify-content: center; margin: 4px 0 6px; }
.time-quiz-view .tq-visual .pic { display: block; width: 100%; height: auto; background: #fff; border-radius: 10px; }
.time-quiz-view .tq-visual .pic-clock { max-width: 150px; }
.time-quiz-view .tq-visual .tqb-clocks { max-width: 300px; }
.time-quiz-view .tq-visual .tqb-row .pic-clock { max-width: 120px; }
.time-quiz-view .mq-choices-long { grid-template-columns: 1fr; }
.time-quiz-view .mq-choices-long button { min-height: 48px; font-size: 16px; text-align: left; }
.time-quiz-view .kk-pad .kk-pad-actions { gap: 5px; }
.time-quiz-view .kk-pad .kk-pad-actions button { padding: 0 11px; }
@media (max-height: 800px), (max-width: 600px) {
  .time-quiz-view .tq-visual .pic-clock { max-width: 118px; }
  .time-quiz-view .tq-visual .tqb-clocks { max-width: 236px; }
  .time-quiz-view .tq-visual .tqb-row .pic-clock { max-width: 96px; }
  .time-quiz-view .mq-choices-long button { min-height: 42px; font-size: 15px; padding: 6px 10px; }
}
@media (max-width: 420px) {
  .time-quiz-view .kk-pad .kk-pad-title { font-size: 14px; }
  .time-quiz-view .kk-pad .kk-pad-actions button { padding: 0 8px; font-size: 13px; }
}
.time-quiz-view .kk-pad .kk-pad-sub { display: none; }
/* Data tables (timetables, opening hours) stay compact so the answers fit on screen. */
.time-quiz-view .tq-visual svg[aria-label="Time information table"] { max-width: 360px !important; }
@media (max-height: 820px) { .time-quiz-view .tq-visual svg[aria-label="Time information table"] { max-width: 290px !important; } }
/* While a hint is open on a short phone, shrink the picture so the answers stay on screen. */
@media (max-height: 760px) and (max-width: 600px) {
  .time-quiz-view .tq-question-card:has(.hc-slot .hc-probe, .hc-slot svg) .tq-visual .pic-clock { max-width: 78px; }
  .time-quiz-view .tq-question-card:has(.hc-slot .hc-probe, .hc-slot svg) .tq-visual .tqb-clocks { max-width: 170px; }
  .time-quiz-view .tq-question-card:has(.hc-slot .hc-probe, .hc-slot svg) .tq-visual .tqb-row .pic-clock { max-width: 70px; }
  .time-quiz-view .tq-question-card:has(.hc-slot .hc-probe, .hc-slot svg) .tq-visual svg[aria-label="Time information table"] { max-width: 220px !important; }
}