/* Hill City Express: what the page adds around the components in app/ui.css: a few layout
   utilities, the one motion a tap on the drawing starts, and print. Every color comes from
   design/tokens.css. */

/* ---------- Utilities ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack > .btn-block + .btn-quiet { margin-top: -4px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.gap-s { display: flex; flex-direction: column; gap: 6px; }
.center { text-align: center; }

/* ---------- Motion: a tap on the drawing runs the train once ----------
   The Holiday Express heads left: it pulls out of the picture, comes round from the right and
   eases back to where it stood. runTrain() in app.js adds .hce-run-once for 13.2 s and then puts
   the train back at translate(-60 0), its resting place. */
@keyframes hce-run-once {
  0% { transform: translateX(-60px); animation-timing-function: cubic-bezier(.45, 0, .8, .4); }
  46% { transform: translateX(-400px); }
  46.01% { transform: translateX(430px); animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  100% { transform: translateX(-60px); }
}
.window .hce-run-once { animation: hce-run-once 12.5s both; }

/* ---------- Print: the ticket alone, or four to a letter sheet, on white paper ---------- */
.print-area { display: none; }
@media print {
  @page { size: letter; margin: 0.4in; }
  html, body { background: #FFFFFF !important; }
  .app, .toast, .sheet, .sheet-backdrop { display: none !important; }
  .print-area { display: block; color: #102A23; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-area .ticket { break-inside: avoid; filter: none; }
  .print-area .ticket-part { box-shadow: inset 0 0 0 1px #DCD3C2; }
  .print-area .sheet-one { max-width: 4.6in; margin: 0 auto; }
  .print-area .sheet-four { display: grid; grid-template-columns: 1fr 1fr; gap: 0.28in 0.3in; }
  .print-area .sheet-four .ticket { --tk-pad: 16px; --notch: 8px; }
  .print-area .sheet-four .ticket-part { gap: 8px 12px; padding-block: 12px; }
  .print-area .sheet-four .ticket-part:first-child { padding-top: 18px; }
  .print-area .sheet-four .ticket-part:last-child { padding-bottom: 18px; }
  .print-area .sheet-four .stat-num { font-size: 18px; }
  .print-area .sheet-four .punch { font-size: 12.5px; gap: 4px; }
  .print-area .sheet-four .punch .avatar { width: 34px; height: 34px; }
  .print-area .sheet-four .punch .avatar svg { width: 17px; height: 17px; }
  .print-area .sheet-four .ticket-stub > span { font-size: 12.5px; line-height: 1.35; }
  .print-area .holder { font-family: var(--font-hand); font-weight: 700; font-size: 22px; }
}