/* ============================================================
   ACT II — the machine room. Dark bench, chrome printer,
   one endless thermal receipt. Gets messier the deeper you go.
   ============================================================ */

.comparer {
  position: relative;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.045 0"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>'),
    radial-gradient(120% 60% at 50% 0%, #232427 0%, var(--bench) 55%, var(--bench-deep) 100%);
  padding: clamp(70px, 10vh, 120px) 0 0;
  overflow: hidden;
}

.bench-note {
  text-align: center;
  padding: 0 24px clamp(36px, 5vh, 60px);
}
.bench-note p {
  font: 500 clamp(12px, 1.7vw, 14px)/1.8 var(--mono);
  letter-spacing: 0.06em;
  color: var(--steel-dark);
}

/* ============ CONTROLS ============ */
.controls {
  width: min(760px, 94vw);
  margin: 0 auto clamp(40px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.control-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.control-label {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--steel);
  min-width: 150px;
}
.select-wrap select,
.search-wrap input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper-bright);
  border: 2px solid var(--ink);
  border-radius: 0;
  font: 600 14px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 13px 16px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: "▾";
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 13px;
}
.select-wrap select { padding-right: 34px; cursor: pointer; }

.search-wrap { position: relative; flex: 1; min-width: 240px; }
.search-wrap input { width: 100%; }
.search-wrap input::placeholder { color: rgba(22,20,15,0.4); font-style: italic; }

.search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 60;
  list-style: none;
  background: var(--paper-bright);
  border: 2px solid var(--ink);
  box-shadow: 5px 6px 0 rgba(0,0,0,0.45);
  max-height: 290px;
  overflow-y: auto;
}
.search-results li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 14px;
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.03em;
  cursor: pointer;
  border-bottom: 1px dashed rgba(22,20,15,0.25);
}
.search-results li:last-child { border-bottom: none; }
.search-results li .cat { font-weight: 400; font-size: 10px; color: var(--ink-soft); letter-spacing: 0.12em; }
.search-results li:hover, .search-results li[aria-selected="true"] { background: var(--fluoro-green); }
.search-results li.already { opacity: 0.45; }

/* quick-add: a drawer of price-gun labels */
.quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  padding-top: 4px;
}
.chip {
  position: relative;
  border: none; cursor: pointer;
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  padding: 10px 13px;
  background: var(--fluoro-orange);
  box-shadow: 2px 3px 5px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(22,20,15,0.18);
  transition: transform 0.1s ease;
}
.chip:nth-child(3n) { background: var(--fluoro-green); }
.chip:nth-child(4n) { background: var(--fluoro-pink); }
.chip:nth-child(odd) { transform: rotate(-1.4deg); }
.chip:nth-child(even) { transform: rotate(1.1deg); }
.chip:hover { transform: rotate(0deg) scale(1.06); }
.chip:active { transform: scale(0.94); }
.chip::before { content: "+ "; font-weight: 400; }
.chip.on {
  background: var(--steel-dark);
  color: rgba(255,255,255,0.85);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.3);
}
.chip.on::before { content: "✓ "; }
.chip.on::after {
  content: "";
  position: absolute; left: 6px; right: 6px; top: 50%;
  height: 2px; background: var(--red);
  transform: rotate(-2deg);
}

/* ============ THE PRINTER ============ */
.printer-rig {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
}
.printer {
  position: relative;
  width: min(560px, 96vw);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.55));
}
.printer-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px;
  padding: 0 22px;
  border-radius: 7px 7px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #e6e8ea 0%, #b7babd 34%, #85888b 62%, #a9acaf 88%, #6f7275 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -2px 3px rgba(0,0,0,0.35);
}
.printer-top::before, .printer-top::after {
  content: "";
  position: absolute; top: 10px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f3f4, #808386 68%, #55585a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.printer-top::before { left: 10px; }
.printer-top::after { right: 10px; }
.printer-vent {
  width: 84px; height: 16px;
  background: repeating-linear-gradient(90deg, rgba(20,20,22,0.55) 0 3px, transparent 3px 8px);
  border-radius: 2px;
}
.printer-brand {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.34em;
  color: #3c3f42;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.printer-led {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #3adf68;
  box-shadow: 0 0 8px 1px rgba(58,223,104,0.8), inset 0 0 2px rgba(0,0,0,0.4);
}
.printer-led.busy {
  background: var(--fluoro-orange-hot);
  box-shadow: 0 0 9px 2px rgba(255,122,31,0.9), inset 0 0 2px rgba(0,0,0,0.4);
  animation: ledBlink 0.16s steps(2) infinite;
}
@keyframes ledBlink { to { opacity: 0.35; } }

.printer-slot {
  position: relative;
  height: 26px;
  margin: 0 14px;
  background: linear-gradient(180deg, #232426 0%, #0c0d0e 55%, #191a1c 100%);
  box-shadow: inset 0 3px 7px rgba(0,0,0,0.9), inset 0 -1px 0 rgba(255,255,255,0.08);
}
.printer-slot-shadow {
  position: absolute; left: 0; right: 0; bottom: -12px;
  height: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  z-index: 5;
  pointer-events: none;
}
.printer-plate {
  display: flex; justify-content: center;
  padding: 8px 0 10px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #94979a 0%, #6d7073 60%, #56595c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.4);
}
.printer-plate span {
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.3em;
  color: rgba(28,30,32,0.75);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.printer.judder { animation: judder 0.09s linear infinite; }
@keyframes judder {
  0% { transform: translateY(0); }
  50% { transform: translateY(0.8px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .printer.judder { animation: none; } }

/* ============ THE PAPER ============ */
.paper-rig {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1400px;
  margin-top: -13px;               /* paper emerges from behind the slot */
  padding-bottom: clamp(90px, 12vh, 150px);
  min-height: 420px;
}
.receipt-shadow {
  position: absolute;
  top: 20px;
  width: var(--receipt-w);
  background: rgba(0, 0, 0, 0.55);
  filter: blur(26px);
  transform: translateX(14px) scale(0.96);
  border-radius: 8px;
  pointer-events: none;
}
.receipt {
  position: relative;
  z-index: 10;
  width: var(--receipt-w);
  background:
    repeating-linear-gradient(0deg, rgba(20,16,8,0.016) 0 1px, transparent 1px 3px),
    linear-gradient(90deg,
      rgba(0,0,0,0.09) 0%, rgba(0,0,0,0.015) 3.5%,
      rgba(255,255,255,0.35) 9%, rgba(255,255,255,0) 20%,
      rgba(255,255,255,0) 80%, rgba(255,255,255,0.3) 91%,
      rgba(0,0,0,0.02) 96.5%, rgba(0,0,0,0.1) 100%),
    var(--paper-bright);
  color: #211e16;
  font-family: var(--mono);
  text-transform: uppercase;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* feed animation: js sets --feed, papers slides out of the slot */
.paper-rig, .printer-rig { overflow: visible; }

.r-seg { padding: 0 clamp(16px, 5.5%, 26px); }

/* ---------- receipt header ---------- */
.r-head {
  padding-top: 40px;      /* clear the printer plate the paper hangs behind */
  padding-bottom: 8px;
  text-align: center;
}
.r-head .r-logo {
  font: 700 17px/1.2 var(--mono);
  letter-spacing: 0.14em;
}
.r-head .r-sub {
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(33,30,22,0.65);
}
.r-head .r-billed {
  margin-top: 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.r-head .r-billed .flag { font-size: 15px; margin-right: 4px; }

.r-rule {
  border: none;
  border-top: 1.5px dashed rgba(33,30,22,0.55);
  margin: 12px clamp(16px, 5.5%, 26px);
}
.r-rule-solid { border-top-style: solid; border-top-width: 2px; }

/* ---------- line items ---------- */
.r-items { padding-top: 2px; padding-bottom: 2px; }
.r-empty {
  padding: 26px 0 30px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: rgba(33,30,22,0.5);
}
.r-line { position: relative; padding: 7px 0 6px; }
.r-line + .r-line { border-top: 1px dotted rgba(33,30,22,0.18); }

.r-line-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.r-tab {
  align-self: center;
  flex: none;
  border: none;
  width: 17px; height: 17px;
  cursor: pointer;
  background: var(--fluoro-orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%);
  box-shadow: inset 0 0 0 1px rgba(22,20,15,0.25);
  transition: transform 0.12s ease;
  transform: rotate(0.001deg);
}
.r-line:nth-child(3n) .r-tab { background: var(--fluoro-green); }
.r-line:nth-child(4n) .r-tab { background: var(--fluoro-pink); }
.r-tab:hover { transform: scale(1.25) rotate(-6deg); }
.r-line.open .r-tab { transform: rotate(-115deg); }

.r-name { flex: none; max-width: 52%; overflow-wrap: break-word; }

/* feasibility chip on each receipt line — the honesty layer, in the tool */
.r-feas {
  flex: none;
  align-self: center;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 3px 5px 2px;
  border: 1px solid currentColor;
  cursor: help;
  white-space: nowrap;
  opacity: 0.9;
}
.r-feas::before { content: "● "; }
.r-feas.works { color: #2e7d32; }
.r-feas.partial { color: #b8710a; }
.r-feas.blocked { color: var(--red); }
.r-feas.uniform { color: rgba(33,30,22,0.5); }
@media (max-width: 460px) { .r-feas { display: none; } }
.r-dots { flex: 1; border-bottom: 2px dotted rgba(33,30,22,0.35); transform: translateY(-3px); min-width: 12px; }
.r-price { flex: none; display: flex; align-items: baseline; gap: 8px; }
.r-price-orig { font-variant-numeric: tabular-nums; }

/* overprint: the red truth punches over the black lie */
.r-price-orig.struck { position: relative; color: rgba(33,30,22,0.72); }
.r-price-orig.struck::after {
  content: "";
  position: absolute; left: -4%; right: -4%; top: 52%;
  height: 2.5px;
  background: var(--red);
  transform: rotate(-4deg);
  filter: url(#ink-bleed);
  mix-blend-mode: multiply;
}
.r-price-new {
  display: none;
  color: var(--red);
  font-weight: 700;
  filter: url(#ink-bleed);
  mix-blend-mode: multiply;
  font-variant-numeric: tabular-nums;
}
.r-price-new.show { display: inline-block; animation: punchIn 0.22s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes punchIn {
  0% { transform: scale(1.45) rotate(-3deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.r-line-sub {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(33,30,22,0.6);
  min-height: 0;
}
.r-line-sub .pct {
  color: var(--red);
  font-weight: 700;
  filter: url(#ink-bleed);
  mix-blend-mode: multiply;
}
.r-line-sub .stays { font-style: italic; }
.r-remove {
  border: none; background: none; cursor: pointer;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.08em;
  color: rgba(33,30,22,0.4);
  padding: 2px 0 2px 6px;
}
.r-remove:hover { color: var(--red); }

/* ---------- label stack (per line item) ---------- */
.r-labelstack {
  margin: 10px 0 8px;
  padding: 12px 10px 14px;
  background: rgba(22,20,15,0.045);
  box-shadow: inset 0 0 0 1px rgba(22,20,15,0.1);
}
.r-labelstack .ls-hint {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(33,30,22,0.55);
  margin-bottom: 10px;
}
.ls-feas {
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(33,30,22,0.7);
  border-left: 3px solid rgba(33,30,22,0.4);
  padding: 4px 0 4px 9px;
  margin-bottom: 10px;
}
.ls-feas .ls-feas-tag { font-weight: 700; letter-spacing: 0.06em; display: block; }
.ls-feas.works { border-left-color: #2e7d32; }
.ls-feas.partial { border-left-color: #b8710a; }
.ls-feas.blocked { border-left-color: var(--red); }
.ls-feas.works .ls-feas-tag { color: #2e7d32; }
.ls-feas.partial .ls-feas-tag { color: #b8710a; }
.ls-feas.blocked .ls-feas-tag { color: var(--red); }
.ls-feas.uniform .ls-feas-tag { color: rgba(33,30,22,0.55); }
.ls-stack { position: relative; }
.ls-label {
  position: absolute;
  left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 10px 12px;
  background: var(--fluoro-orange);
  box-shadow: 0 2px 5px rgba(22,20,15,0.3), inset 0 0 0 1px rgba(22,20,15,0.18);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  will-change: transform, opacity;
}
.ls-label:nth-child(2n) { background: #ffd21f; transform: rotate(0.7deg); }
.ls-label:nth-child(3n) { background: var(--fluoro-pink); transform: rotate(-0.8deg); }
.ls-label:nth-child(4n) { background: #6fe3ff; }
.ls-label .ls-flag { margin-right: 8px; }
.ls-label .ls-price { font-variant-numeric: tabular-nums; }
.ls-label.cheapest {
  background: var(--fluoro-green);
  cursor: default;
  transform: rotate(-1deg);
  padding-top: 13px; padding-bottom: 13px;
}
.ls-label.cheapest .ls-stamp {
  position: absolute;
  right: 8px; top: -9px;
  font-family: var(--stamp);
  font-size: 11px;
  color: var(--red);
  border: 2px solid var(--red);
  padding: 2px 7px 1px;
  transform: rotate(4deg);
  background: rgba(251,250,244,0.85);
  filter: url(#stamp-bleed);
}
.ls-label.peeling-away {
  transition: transform 0.45s cubic-bezier(0.3, 0, 0.7, -0.2), opacity 0.4s ease;
  transform: translate(60vw, -40px) rotate(24deg) !important;
  opacity: 0;
  pointer-events: none;
}

/* ---------- totals ---------- */
.r-totals { padding-top: 4px; padding-bottom: 4px; }
.r-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 0;
}
.r-total-row.annual { font-size: 12px; font-weight: 600; color: rgba(33,30,22,0.75); }
.r-total-row .amt { font-variant-numeric: tabular-nums; }

/* odometer */
.odo { display: inline-flex; overflow: hidden; line-height: 1.15; height: 1.15em; vertical-align: bottom; }
.odo .odo-static { display: inline-block; }
.odo .odo-col { display: inline-flex; flex-direction: column; transition: transform 0.55s cubic-bezier(0.24, 0.9, 0.26, 1); }
.odo .odo-col span { height: 1.15em; }
@media (prefers-reduced-motion: reduce) { .odo .odo-col { transition: none; } }

/* ---------- YOU COULD PAY ---------- */
.r-couldpay {
  margin: 14px clamp(16px, 5.5%, 26px);
  padding: 14px 14px 16px;
  border: 2.5px solid var(--red);
  color: var(--red);
  transform: rotate(-0.6deg);
  filter: url(#ink-bleed);
  mix-blend-mode: multiply;
}
.r-couldpay .cp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2.5px 0;
}
.r-couldpay .cp-row.big { font-size: 16px; }
.r-couldpay .cp-where {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.14em; font-weight: 600;
  text-align: right;
}

/* ---------- section headers on the receipt ---------- */
.r-section-head {
  text-align: center;
  padding: 20px 0 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
}
.r-section-head small {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(33,30,22,0.55);
}

/* ---------- country strip ---------- */
.r-strip-wrap {
  position: relative;    /* offset parent for stops + anchor for the pin */
  margin: 6px 0 4px;
  border-top: 1.5px dashed rgba(33,30,22,0.4);
  border-bottom: 1.5px dashed rgba(33,30,22,0.4);
  background: rgba(22,20,15,0.03);
}
.r-strip-wrap::before, .r-strip-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 46px; z-index: 2; pointer-events: none;
}
.r-strip-wrap::before { left: 0; background: linear-gradient(to right, var(--paper-bright), transparent); }
.r-strip-wrap::after { right: 0; background: linear-gradient(to left, var(--paper-bright), transparent); }
.r-strip-wrap .strip-pin {
  position: absolute; left: 50%; top: -7px; z-index: 3;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--red);
  pointer-events: none;
}
.r-strip {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  /* half-viewport end padding so the first and last country can center */
  padding: 13px 50%;
}
.r-strip::-webkit-scrollbar { display: none; }
.r-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.r-stop {
  flex: none;
  scroll-snap-align: center;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--stamp);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: rgba(33,30,22,0.42);
  padding: 0 10px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.r-stop .flag { font-family: var(--mono); margin-right: 5px; }
.r-stop.active { color: var(--ink); }
.r-stop.active.away { color: var(--red); }
.r-stop-gap {
  flex: none;
  width: 44px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(33,30,22,0.4) 0 6px, transparent 6px 10px);
}
.r-strip-note {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: rgba(33,30,22,0.5);
  padding: 8px 0 2px;
}

/* ---------- take your basket to (top destinations) ---------- */
.r-dest { padding-top: 6px; padding-bottom: 4px; }
.r-dest-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0;
  font-size: 13px; font-weight: 600;
}
.r-dest-row + .r-dest-row { border-top: 1px dotted rgba(33,30,22,0.18); }
.r-dest-row .medal { flex: none; font-size: 10px; letter-spacing: 0.1em; color: rgba(33,30,22,0.5); width: 22px; }
.r-dest-row .flag { flex: none; }
.r-dest-row .dest-name { flex: none; font-weight: 700; letter-spacing: 0.05em; }
.r-dest-row .r-dots { transform: translateY(-2px); }
.r-dest-row .dest-amt { font-variant-numeric: tabular-nums; }
.r-dest-row .dest-save {
  flex: none;
  width: 100%;
  text-align: right;
  font-size: 10.5px;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.06em;
  filter: url(#ink-bleed);
  mix-blend-mode: multiply;
}
.r-dest-row { flex-wrap: wrap; }
.r-dest-row.winner .dest-name { background: var(--fluoro-green); padding: 1px 5px; }

/* ---------- the cheapest possible receipt ---------- */
.r-mix { padding-bottom: 4px; }
.r-mix .r-line-main { font-size: 12.5px; }
.mix-where {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--paper-bright);
  padding: 3px 6px 2px;
  transform: translateY(-1px);
}
.r-mix-summary { padding-top: 4px; padding-bottom: 2px; }  /* longhand — keep .r-seg's side padding */
.r-mix-summary .r-total-row.max {
  color: var(--red);
  filter: url(#ink-bleed);
  mix-blend-mode: multiply;
  font-size: 15px;
}

/* ---------- barcode + meta at receipt foot ---------- */
.r-meta {
  text-align: center;
  padding: 10px 0 6px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(33,30,22,0.5);
  line-height: 2;
}
.r-barcode {
  width: 62%;
  height: 34px;
  margin: 8px auto 2px;
  background: repeating-linear-gradient(
    to right,
    #211e16 0 2px, transparent 2px 5px,
    #211e16 5px 6px, transparent 6px 10px,
    #211e16 10px 13px, transparent 13px 15px,
    #211e16 15px 16px, transparent 16px 21px
  );
}

/* ---------- finale: the stub you tear off ---------- */
.r-finale-wrap { position: relative; }

.r-perf {
  position: relative;
  height: 46px;            /* generous hit area for thumbs */
  display: flex;
  align-items: center;
  cursor: grab;
  touch-action: none;
}
.r-perf .perf-dashes {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 0;
  border-top: 2.5px dashed rgba(33,30,22,0.5);
}
.r-perf .perf-label {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  background: var(--paper-bright);
  padding: 0 12px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.3em;
  color: rgba(33,30,22,0.6);
}
.r-perf .perf-tear-svg {
  position: absolute; left: 0; right: 0; top: 0;
  height: 100%; width: 100%;
  z-index: 3;
  pointer-events: none;
}
.r-perf:active { cursor: grabbing; }

.r-stub {
  transform-origin: 50% 0;
  will-change: transform;
}
.r-finale {
  position: relative;
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}
.r-finale .fin-kicker {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.3em;
  color: rgba(33,30,22,0.6);
  margin-bottom: 14px;
}
.r-finale .fin-line {
  font-family: var(--stamp);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.r-finale .fin-amount {
  display: block;
  font-size: clamp(34px, 9vw, 46px);
  color: var(--red);
  filter: url(#stamp-bleed);
  mix-blend-mode: multiply;
  margin: 4px 0;
}
.r-finale .fin-note {
  margin-top: 16px;
  font: 500 10.5px/1.7 var(--mono);
  letter-spacing: 0.1em;
  color: rgba(33,30,22,0.6);
}
.r-finale .fin-note strong { color: var(--red); }

/* ---------- metal cutter at the very end of the paper ---------- */
.r-cutter {
  position: relative;
  margin-top: 2px;
  height: 30px;
}
.r-cutter .cutter-bar {
  position: absolute; left: -6%; right: -6%; top: 6px;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #d7d9db 0%, #9fa2a5 40%, #63666a 75%, #85888b 100%);
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
.r-cutter .cutter-teeth {
  position: absolute; left: -6%; right: -6%; top: 0;
  height: 9px;
  background: linear-gradient(180deg, #c3c5c7, #8b8e91);
  clip-path: polygon(0 100%, 1.5% 0, 3% 100%, 4.5% 0, 6% 100%, 7.5% 0, 9% 100%, 10.5% 0, 12% 100%, 13.5% 0, 15% 100%, 16.5% 0, 18% 100%, 19.5% 0, 21% 100%, 22.5% 0, 24% 100%, 25.5% 0, 27% 100%, 28.5% 0, 30% 100%, 31.5% 0, 33% 100%, 34.5% 0, 36% 100%, 37.5% 0, 39% 100%, 40.5% 0, 42% 100%, 43.5% 0, 45% 100%, 46.5% 0, 48% 100%, 49.5% 0, 51% 100%, 52.5% 0, 54% 100%, 55.5% 0, 57% 100%, 58.5% 0, 60% 100%, 61.5% 0, 63% 100%, 64.5% 0, 66% 100%, 67.5% 0, 69% 100%, 70.5% 0, 72% 100%, 73.5% 0, 75% 100%, 76.5% 0, 78% 100%, 79.5% 0, 81% 100%, 82.5% 0, 84% 100%, 85.5% 0, 87% 100%, 88.5% 0, 90% 100%, 91.5% 0, 93% 100%, 94.5% 0, 96% 100%, 97.5% 0, 99% 100%, 100% 40%, 100% 100%)
}

/* ============ SHARE OVERLAY ============ */
.share-overlay {
  position: fixed; inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.share-overlay[hidden] { display: none; }
.share-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 9, 11, 0.78);
  backdrop-filter: blur(4px);
}
.share-card-rig {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 24px 0;
}
.share-card {
  width: min(360px, 88vw);
  background:
    repeating-linear-gradient(0deg, rgba(20,16,8,0.016) 0 1px, transparent 1px 3px),
    var(--paper-bright);
  color: #211e16;
  font-family: var(--mono);
  text-transform: uppercase;
  padding: 26px 24px 22px;
  transform: rotate(-2deg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.65);
  clip-path: polygon(0 1.2%, 3% 0.2%, 6% 1.4%, 9% 0.1%, 12% 1.1%, 16% 0.3%, 19% 1.5%, 23% 0.2%, 27% 1.2%, 31% 0.4%, 35% 1.4%, 39% 0.1%, 43% 1%, 47% 0.3%, 51% 1.5%, 55% 0.2%, 59% 1.3%, 63% 0.4%, 67% 1.4%, 71% 0.1%, 75% 1.2%, 79% 0.3%, 83% 1.5%, 87% 0.2%, 91% 1.3%, 95% 0.4%, 98% 1.2%, 100% 0.6%, 100% 98.9%, 97% 99.9%, 94% 98.7%, 91% 99.8%, 88% 98.6%, 84% 99.9%, 80% 98.8%, 76% 99.7%, 72% 98.6%, 68% 99.9%, 64% 98.7%, 60% 99.8%, 56% 98.6%, 52% 99.9%, 48% 98.8%, 44% 99.7%, 40% 98.6%, 36% 99.8%, 32% 98.7%, 28% 99.9%, 24% 98.6%, 20% 99.8%, 16% 98.8%, 12% 99.9%, 8% 98.6%, 4% 99.7%, 0 98.9%);
}
.share-card .sc-head { text-align: center; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; }
.share-card .sc-sub { text-align: center; font-size: 9px; letter-spacing: 0.24em; color: rgba(33,30,22,0.55); margin-top: 4px; }
.share-card .sc-rule { border: none; border-top: 1.5px dashed rgba(33,30,22,0.5); margin: 13px 0; }
.share-card .sc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 0;
}
.share-card .sc-row .v { font-variant-numeric: tabular-nums; font-weight: 700; }
.share-card .sc-waste {
  margin: 12px 0 4px;
  padding: 12px 10px;
  border: 2.5px solid var(--red);
  color: var(--red);
  text-align: center;
  transform: rotate(-1.4deg);
  filter: url(#stamp-bleed);
  mix-blend-mode: multiply;
}
.share-card .sc-waste .w-label { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; }
.share-card .sc-waste .w-amount { font-family: var(--stamp); font-size: 30px; margin-top: 2px; }
.share-card .sc-foot { text-align: center; font-size: 9px; letter-spacing: 0.22em; color: rgba(33,30,22,0.55); margin-top: 10px; }
.share-card .sc-barcode {
  width: 58%; height: 26px; margin: 10px auto 0;
  background: repeating-linear-gradient(to right, #211e16 0 2px, transparent 2px 5px, #211e16 5px 6px, transparent 6px 10px, #211e16 10px 13px, transparent 13px 15px);
}

.share-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  width: min(280px, 88vw);
}
.share-name-row {
  display: flex; flex-direction: column; gap: 6px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.22em;
  color: var(--steel);
}
.share-name-row input {
  background: var(--paper-bright);
  border: 2px solid var(--ink);
  font: 600 14px/1 var(--mono);
  letter-spacing: 0.06em;
  padding: 11px 12px;
  text-transform: uppercase;
}
.share-close {
  margin-top: 6px;
  border: none; background: none; cursor: pointer;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--steel-dark);
  padding: 8px;
}
.share-close:hover { color: var(--paper-bright); }

/* flying paper scraps on tear */
.scrap {
  position: fixed;
  z-index: 380;
  width: 14px; height: 10px;
  background: var(--paper-bright);
  pointer-events: none;
  clip-path: polygon(0 20%, 30% 0, 100% 12%, 88% 80%, 40% 100%, 6% 74%);
}

@media (max-width: 640px) {
  .control-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .control-label { min-width: 0; }
  .printer { width: min(480px, 97vw); }
}