/* The receipt look, after thermal-toys' PAPER_CSS (src/preview.rs). */

:root {
  --paper: #fdfdf8;
  --ink: #111;
  --desk: #2b2b2b;
  --tear: 8px;
}

* { box-sizing: border-box; }

html { background: var(--desk); }

body {
  margin: 0;
  padding: 24px 16px 48px;
  background: var(--desk);
}

/* The mask would clip a shadow on the paper itself. */
.roll { filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }

.paper {
  background: var(--paper); color: var(--ink); margin: 0 auto;
  padding: calc(16px + var(--tear)) 2ch calc(48px + var(--tear));
  font: 15px/1.25 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 48 columns, like the real 80 mm paper, plus a little margin. */
  width: 52ch; max-width: 100%;
  /* Torn top and bottom edges. */
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tear)) var(--tear) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tear)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tear)) var(--tear) repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tear)) var(--tear) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tear)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tear)) var(--tear) repeat-x;
}

/* The page comes out of the printer. */
@media (prefers-reduced-motion: no-preference) {
  .paper { animation: feed 1.4s steps(28) both; }
  @keyframes feed {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

h1, h2, p, ul { margin: 0; font-size: inherit; font-weight: inherit; }
ul { list-style: none; padding: 0; }

.b { font-weight: 700; }
.big { font-size: 200%; line-height: 1.1; }
.inv { background: var(--ink); color: var(--paper); }
.c { text-align: center; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; outline: none; }

.letterhead {
  display: block; width: 100%; aspect-ratio: 96 / 12;
  image-rendering: pixelated; margin-bottom: 1lh; cursor: pointer;
}

header { margin-bottom: 1lh; }
header h1 { letter-spacing: .1em; }
/* 240 of the paper's 576 dots, so it prints at the size the printer would. */
.portrait { display: block; width: calc(100% * 240 / 576); height: auto; margin: 1lh auto 0; image-rendering: pixelated;
  mix-blend-mode: multiply; /* white pixels take the paper colour */ }

/* ===== and ----- dividers, as wide as the paper. */
.rule { overflow: hidden; white-space: nowrap; margin: .5lh 0; }
.rule::before { content: "------------------------------------------------------------------------"; }
.rule.eq::before { content: "========================================================================"; }

/* - - - - 8< - - - - */
.cut { display: flex; gap: 1ch; margin: 1lh 0 2lh; white-space: nowrap; overflow: hidden; }
.cut::before, .cut::after { content: "- - - - - - - - - - - - - - - - - - - - - - - -"; flex: 1; overflow: hidden; }
.cut::before { direction: rtl; }

section h2 { display: inline-block; padding: 0 1ch; margin-bottom: .5lh; }
.note { margin-bottom: .5lh; }

.items > li + li { margin-top: .5lh; }

/* LABEL ........ value */
.item { display: flex; gap: 1ch; white-space: nowrap; }
.item > :first-child { overflow: hidden; text-overflow: ellipsis; }
.dots { flex: 1; overflow: hidden; min-width: 2ch; }
.dots::before { content: "........................................................................"; }
.meta .item + .item { margin-top: 0; }

.desc { padding-left: 2ch; }
.priv { opacity: .6; }

/* The Enigma slip, under cipher-machines. */
.enigma { margin: 1lh 0 0 2ch; padding: .5lh 1ch; border: 1px dashed var(--ink); }
.enigma .meta { margin: .5lh 0; }
.prompt { display: flex; gap: 1ch; }
.prompt input {
  flex: 1; min-width: 0; font: inherit; color: inherit; background: none;
  border: 0; border-bottom: 1px dashed var(--ink); padding: 0; border-radius: 0;
  text-transform: uppercase; caret-color: var(--ink);
}
.prompt input:focus { outline: none; border-bottom-style: solid; }
.prompt input::placeholder { color: var(--ink); opacity: .4; }
.out { margin: .5lh 0; min-height: 1lh; word-spacing: .5ch; overflow-wrap: anywhere; }
.enigma .note { margin: .5lh 0; }
.enigma button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.enigma button:hover, .enigma button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }

.inbox { margin: 1lh 0; }
.inbox p { margin: .5lh 0; }
.live { text-align: left; margin: 1lh 0; }
.item[hidden] { display: none; }
.print { display: inline-block; padding: .2em .5ch; margin: .5lh 0; text-decoration: none; font-size: 160%; }
.print:hover, .print:focus-visible { background: var(--paper); color: var(--ink); outline: 2px solid var(--ink); }

.barcode { display: block; text-align: center; margin: 1lh auto; text-decoration: none; width: 80%; }
.barcode canvas { display: block; width: 100%; height: 56px; image-rendering: pixelated; }
.barcode span { font-size: 80%; letter-spacing: .2em; }
.barcode:hover, .barcode:focus-visible { background: none; color: inherit; }
.barcode:hover span { text-decoration: underline; }

@media (max-width: 400px) {
  body { padding: 12px 8px 32px; }
  .paper { font-size: 13px; padding-left: 1.5ch; padding-right: 1.5ch; }
  /* iOS zooms into inputs under 16px. */
  .prompt input { font-size: 16px; }
}