/* A front-facing, molded thermal printer housing. */
.machine {
  position: relative;
  z-index: 4;
  width: var(--printer-width);
  height: 273px;
  margin: 0 auto;
  transform-origin: 50% 80%;
  isolation: isolate;
}
.machine-shadow {
  position: absolute;
  z-index: -1;
  inset: 18px 9px 5px;
  border-radius: 31px 31px 11px 11px;
  box-shadow: 0 9px 14px #111111, 0 3px 5px #111111;
}
.machine-front {
  position: absolute;
  inset: 0 0 3px;
  overflow: hidden;
  background: #444444;
  border: 1px solid #111111;
  border-radius: 31px 31px 10px 10px;
  box-shadow: inset 0 2px 0 #444444, inset 1px 0 0 #444444, inset -1px 0 0 #444444, 0 3px 0 #444444;
}
.printer-header {
  position: absolute;
  top: 23px;
  left: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.printer-brand {
  color: var(--cream);
  background: var(--red);
  border: 1px solid #444444;
  border-radius: 2px;
  padding: 8px 11px 7px;
  box-shadow: 0 1px 1px #111111;
}
.printer-brand span {
  display: block;
  font:700 11px/1.2 var(--mono);
  
}
.printer-brand small {
  display: block;
  margin-top: 5px;
  font: 8px/1 var(--mono);
  
}
.printer-serial {
  font: 10px var(--mono);
  color: #f2eee0;
  
  white-space: nowrap;
}
.printer-screen {
  position: absolute;
  top: 88px;
  left: 21px;
  right: 21px;
  height: 137px;
  padding: 19px 18px 14px;
  border: 1px solid #111111;
  border-radius: 13px;
  background: var(--black);
  color: #f2eee0;
  box-shadow: inset 0 1px 3px #111111, 0 1px 0 #444444;
}
.screen-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.screen-heading strong { font: 700 18px/1.2 var(--sans);  }
.screen-heading > span { font:700 11px var(--mono); color: #f2eee0; white-space: nowrap; }
.screen-subtitle { margin: 7px 0 0; color: #f2eee0; font: 9px/1.3 var(--mono);  }
.screen-divider { height: 1px; margin-top: 17px; background: #444444; }
.machine-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.display-panel { display: flex; align-items: center; gap: 10px; min-width: 0; font:700 11px/1 var(--mono);  color: #f2eee0; white-space: nowrap; }
.status-light { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #444444; box-shadow: inset 0 1px 1px #111111; }
.status-light.on { background: var(--yellow); }
.feed-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 65px;
  height: 29px;
  padding: 0 8px;
  color: #f2eee0;
  background: #444444;
  border: 1px solid #444444;
  border-right-color: #444444;
  border-bottom: 2px solid #111111;
  border-radius: 5px;
  box-shadow: 0 1px 1px #111111;
  font: 9px var(--mono);
  
  transition: background .12s, transform .1s;
}
.feed-button svg { width: 13px; height: 13px; }
.feed-button:hover { background: #444444; color: #f2eee0; }
.feed-button:active { transform: translateY(1px); }
.housing-seam { position: absolute; bottom: 9px; left: 0; right: 0; height: 1px; background: #444444; box-shadow: 0 1px 0 #444444; }
.paper-slot {
  position: absolute;
  z-index: 1;
  bottom: 13px;
  left: 24px;
  right: 24px;
  height: 17px;
  border-radius: 9px;
  border: 1px solid #111111;
  background: #111111;
  box-shadow: inset 0 3px 3px #111111, 0 1px 0 #444444;
}
.cutter { position: absolute; top: 2px; left: 10px; right: 10px; height: 1px; background: #444444; }
.paper-feed { z-index: 5; margin-top: -22px; }
.receipt-paper { box-shadow: inset 0 9px 11px -10px #111111, 2px 3px 5px #111111, -2px 1px 6px #111111; }
.machine.is-printing { animation: mechanical .16s steps(2,end) infinite; }
.machine.is-paused { animation-play-state: paused; }
@keyframes mechanical {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(.6px,.7px); }
  50% { transform: translate(-.6px,0); }
  75% { transform: translate(.3px,.9px); }
}
@media (max-width: 500px) {
  .machine { height: 244px; }
  .machine-front { border-radius: 25px 25px 9px 9px; }
  .printer-header { top: 19px; left: 19px; right: 19px; gap: 10px; }
  .printer-brand { padding: 7px 9px 6px; }
  .printer-brand span { font-size: 10px; }
  .printer-brand small { font-size: 7px; margin-top: 4px; }
  .printer-serial { font-size: 8px; }
  .printer-screen { top: 77px; left: 15px; right: 15px; height: 122px; padding: 16px 14px 12px; border-radius: 10px; }
  .screen-heading strong { font-size: 16px; }
  .screen-heading > span { font-size: 10px; }
  .screen-subtitle { font-size: 8px;  }
  .screen-divider { margin-top: 14px; }
  .machine-controls { margin-top: 9px; }
  .display-panel { font-size: 10px; gap: 8px;  }
  .feed-button { min-width: 56px; height: 27px; font-size: 8px; padding: 0 6px; }
  .feed-button svg { width: 12px; height: 12px; }
  .paper-slot { left: 15px; right: 15px; bottom: 14px; }
  .paper-feed { margin-top: -23px; }
}
@media (max-width: 360px) {
  .printer-header { left: 16px; right: 16px; }
  .printer-brand span { font-size: 9px; }
  .printer-serial { font-size: 7px; }
  .screen-heading strong { font-size: 14px; }
  .screen-heading > span { font-size: 9px; }
  .display-panel { font-size: 9px; }
  .paper-slot { left: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .machine.is-printing { animation: none; } }
@media print { .receipt-paper { box-shadow: none; } }