/* The request slip (audit 10/27 #19): a paper receipt, modelled on Restock Notify's. On the customer's request page
   it feeds out of a little navy printer, in 24 line-feed steps over 2.4 s (none with reduce motion); printed, it's
   the slip alone. Colors here are literal on purpose: paper is paper, whatever page it's on. */
.slip-wrap { display: grid; justify-items: center; gap: 1rem; }
.slip-stage { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; }
.slip-unit { width: 100%; border-radius: 16px; padding: 14px 18px 0; position: relative; z-index: 3;
  background: linear-gradient(168deg, #20304f, #16233e); box-shadow: 0 22px 44px -24px rgba(8, 14, 28, .6); }
.slip-unit-top { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; color: rgba(237, 231, 218, .8);
  font: 600 .8rem/1 "Courier New", Courier, monospace; letter-spacing: .14em; text-transform: uppercase; }
.slip-unit-top .lamp { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #7fd6a0; }
.slip-slot { height: 13px; margin: 0 -18px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #05090f, #0a1120);
  box-shadow: inset 0 5px 9px rgba(0, 0, 0, .85); }
.slip-feed { width: calc(100% - 30px); overflow: hidden; position: relative; z-index: 1; margin-top: -1px; padding-bottom: 10px; }
.slip { background: #fffdf8; color: #1d2f45; padding: 24px 22px 18px; position: relative; box-shadow: 0 20px 38px -24px rgba(8, 14, 28, .45);
  background-image: repeating-linear-gradient(0deg, rgba(22, 35, 62, .017) 0 1px, transparent 1px 4px);
  font-family: "Courier New", Courier, monospace; }
.slip.rolling { animation: slip-feed 2.4s steps(24, end) both; }
@keyframes slip-feed { from { transform: translateY(-101%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .slip.rolling { animation: none; } }
.slip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background: radial-gradient(circle at 6px -2px, transparent 7px, #fffdf8 7px); background-size: 12px 12px; }
.slip-standalone .slip { border: 1px solid #e7e0d0; box-shadow: 0 10px 30px rgba(30, 25, 15, .1); }
.slip-head { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed rgba(22, 35, 62, .25); }
.slip-head svg { width: 34px; height: 34px; color: #1d2f45; display: block; margin: 0 auto 6px; }
.slip-brand { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.slip-kind { font-size: .78rem; letter-spacing: .12em; color: #5c564a; margin-top: 4px; }
.slip-sec { padding: 12px 0; border-bottom: 1px dashed rgba(22, 35, 62, .25); }
.slip-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; text-transform: uppercase; color: #3d3a33;
  padding: 3px 0; font-variant-numeric: tabular-nums; }
.slip-row span:last-child { text-align: right; color: #1d2f45; }
.slip-row.price { font-weight: 700; font-size: 1rem; color: #1d2f45; border-top: 1px solid rgba(22, 35, 62, .2); margin-top: 6px; padding-top: 9px; }
.slip-note { font-family: var(--f-body, system-ui, sans-serif); font-size: 1rem; line-height: 1.5; color: #3d3a33; margin: 8px 0 0; white-space: pre-wrap; }
.slip-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.slip-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid #e7e0d0; }
.slip-next { font-family: var(--f-body, system-ui, sans-serif); text-align: center; font-size: 1rem; line-height: 1.5; color: #3d3a33; padding: 12px 0 4px; }
.slip-bars { display: flex; justify-content: center; margin: 12px 0 4px; }
.slip-bars svg { display: block; height: 40px; }
.slip-num { text-align: center; font-size: .82rem; letter-spacing: .3em; color: #5c564a; }
.slip-foot { text-align: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #5c564a; margin-top: 8px; }
.slip-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Printing the request page: the slip alone, on white, the shape of a receipt */
@media print {
  body * { visibility: hidden !important; }
  .slip, .slip * { visibility: visible !important; }
  .slip { position: absolute; left: 0; top: 0; width: 80mm; box-shadow: none; border: 1px solid #ccc; animation: none !important; transform: none !important; }
  .slip::after { display: none; }
}
/* narrow screens: a label stays on one line, the value wraps under its own column */
.slip-row span:first-child { white-space: nowrap; flex: none; }
.slip-row span:last-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .slip { padding: 20px 16px 16px; } .slip-row { font-size: .8rem; gap: 10px; } }