/* Clock and money */
.ck-stage { display: grid; justify-items: center; gap: .875rem; width: 100%; }
.clockface { max-width: 70vw; height: auto; }
.clockface .hh { stroke: #263049; }
.clockface .mh { stroke: #4F9BE6; }
.ck-two { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; justify-content: center; }
.ck-two figure { margin: 0; display: grid; justify-items: center; gap: .25rem; }
.ck-two figcaption { font-weight: 600; color: var(--ink2); }
.ck-arrow { font-size: 2.125rem; color: var(--ink2); }
.ck-money { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; max-width: 92vw; }
.money.note { width: 8.125rem; height: auto; }
.money.coin { height: auto; }
.ck-change { display: grid; justify-items: center; gap: .625rem; font-size: 1.375rem; }
.ck-tag { border: 2px solid var(--ink); border-radius: .625rem .625rem .625rem 1.875rem; padding: .5rem 1rem; background: #FFF6D8; }
.ck-pay { display: flex; align-items: center; gap: .5rem; }
.ck-ans { font-size: clamp(1.875rem, 8vw, 3.5rem); }
.ck-prompt { font: 600 .45em/1.2 var(--f-b), var(--cjk); color: var(--ink2); }
.ck-key { columns: 2; font: 600 1.125rem/1.8 var(--f-m); }
@media print {
  .ck-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm 6mm; align-content: start; }
  .ck-sheet.money, .ck-sheet.change { grid-template-columns: repeat(2, 1fr); }
  .ck-sheet.elapsed { grid-template-columns: repeat(2, 1fr); }
  .ck-item { display: grid; justify-items: center; gap: 1.5mm; break-inside: avoid; }
  .ck-item .ws-no { justify-self: start; }
  /* Faces shrink on shorter paper (JIS B5) so four rows always fit above the footer. */
  .ck-sheet .clockface { width: min(34mm, calc((var(--ph, 297mm) - 101mm) / 4 - 14mm)); height: auto; aspect-ratio: 1; }
  .ck-sheet.elapsed .clockface { width: min(28mm, calc((var(--ph, 297mm) - 101mm) / 4 - 22mm)); height: auto; aspect-ratio: 1; }
  .ck-sheet .money.note { width: 22mm; }
  .ck-sheet .money.coin { width: 11mm !important; }
  .ck-sheet .ck-money { gap: 1.5mm; }
  .ck-sheet .ck-change { font-size: 11pt; }
  .ck-line { font: 600 13pt "IBM Plex Mono", monospace; }
  .ck-blank { display: inline-block; border-bottom: .3mm solid #263049; min-width: 22mm; letter-spacing: .3em; }
  .ck-blank.wide { min-width: 30mm; height: 6mm; }
}
