/* The sticker — 11x8.5 landscape, per BRAND.md.
   Two reading distances: vehicle/price/QR at ten feet, everything else at two. */

.sticker {
  background: #FFF;
  color: #111;
  border: 1px solid var(--rule);
  aspect-ratio: 11 / 8.5;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  overflow: hidden;
}
.sticker * { font-variant-numeric: tabular-nums; }

.st-band {
  background: #111;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.6cqw 3cqw 1.3cqw;
}
.st-band .m {
  font-family: var(--display);
  font-weight: 700;
  font-size: 5cqw;
  letter-spacing: 0.01em;
  color: var(--orange);
  text-transform: uppercase;
  line-height: 0.95;
}
.st-band .r { font-family: var(--mono); font-size: 1.3cqw; letter-spacing: 0.14em; text-transform: uppercase; color: #FFF; opacity: 0.85; text-align: right; line-height: 1.6; }

.st-strip {
  background: var(--orange);
  color: #111;
  display: flex; justify-content: space-between; gap: 2cqw;
  padding: 0.7cqw 3cqw;
  font-size: 1.4cqw; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.st-strip .r { font-size: 1.15cqw; letter-spacing: 0.13em; opacity: 0.82; }

.st-main { padding: 1.4cqw 3cqw 1cqw; flex: 1; display: flex; flex-direction: column; }
.st-head {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 5cqw;
  font-weight: 700;
  line-height: 0.95;
  margin: 0;
  overflow-wrap: anywhere;
}
.st-sub { font-size: 1.7cqw; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 0.5cqw 0 1.3cqw; }

.st-cols {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.15fr;
  gap: 2.4cqw;
  border-top: 0.4cqw solid #111;
  padding-top: 1.4cqw;
  flex: 1;
}
.st-cols h5 {
  font-family: var(--mono);
  font-size: 1.25cqw; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 0.9cqw; font-weight: 700;
  padding-bottom: 0.5cqw; border-bottom: 0.28cqw solid #111;
}
.st-equip { margin: 0; padding: 0; list-style: none; font-size: 1.6cqw; font-weight: 500; }
.st-equip li { padding: 0.28cqw 0 0.28cqw 1.5cqw; position: relative; line-height: 1.25; }
.st-equip li::before { content: ""; position: absolute; left: 0; top: 1cqw; width: 0.7cqw; height: 0.7cqw; background: #111; }

.st-det div { display: flex; justify-content: space-between; gap: 1.2cqw; font-size: 1.6cqw; font-weight: 600; padding: 0.3cqw 0; border-bottom: 1px solid var(--rule-2); }
.st-det .k { font-family: var(--mono); font-size: 1.2cqw; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; padding-top: 0.3cqw; }
.st-det .v { text-align: right; }

.st-ask { border: 0.4cqw solid #111; padding: 1cqw 1.4cqw 1.2cqw; text-align: center; }
.st-ask .l { font-family: var(--mono); font-size: 1.25cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.st-ask .n { font-family: var(--display); font-size: 6cqw; font-weight: 700; line-height: 1; letter-spacing: -0.015em; }
.st-ask .obo { font-family: var(--display); font-size: 2.4cqw; letter-spacing: 0.1em; line-height: 1.1; }
.st-ask .c { font-family: var(--mono); font-size: 1.25cqw; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-2); border-top: 1px solid var(--rule); margin-top: 0.8cqw; padding-top: 0.7cqw; line-height: 1.4; }

.st-qr { margin-top: 0.8cqw; text-align: center; }
.st-qr canvas, .st-qr .qrbox { width: 100%; max-width: 14cqw; height: auto; image-rendering: pixelated; margin: 0 auto; display: block; }
.st-qr .c { font-family: var(--display); font-size: 1.6cqw; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.6cqw; font-weight: 700; line-height: 1.2; }

.st-foot { background: #111; color: #FFF; font-size: 1.05cqw; line-height: 1.45; padding: 1cqw 3cqw; }

/* Snapshot line — the paper is honest about being a moment in time */
.st-asof { font-family: var(--mono); font-size: 1.05cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.6cqw; }

/* Watermark for the preview only */
.wm { position: relative; overflow: hidden; }
.wm::after {
  content: "OWNERS ROW";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 9cqw; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(243, 91, 28, 0.30);
  transform: rotate(-24deg);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Print: this is what makes the PDF ---------- */

@media print {
  /* ⚠️ Chrome does not print background colours unless the user ticks
     "Background graphics". This sticker IS solid fields — a black band, an
     orange strip, a black footer — so without this it prints as white paper
     with WHITE FOOTER TEXT ON WHITE, which reads as a missing disclaimer.
     print-color-adjust: exact forces them through. */
  .sticker, .sticker * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Absolute units only. Viewport units lie in print — on a phone 100vh is the
     SCREEN height, not the page box, which is what kept pushing this onto a
     second sheet. Letter at 0.25in margins gives a 10.5 x 8in printable area
     landscape, 8 x 10.5in portrait. */
  /* Page size is injected at print time from the paper choice — a static rule
     here forced landscape on every print regardless of what was selected. */
  @page { margin: 0.25in; }

  html, body {
    background: #FFF !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .app > *:not(.printarea), .noprint { display: none !important; }
  .app {
    max-width: none !important;
    width: auto !important;
    min-height: 0 !important;
    display: block !important;
    background: #FFF !important;
  }
  .wm::after { display: none; }
  .scaler { display: contents; }

  .printarea {
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .sticker {
    border: 0;
    overflow: visible;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
    aspect-ratio: 11 / 8.5;
    height: auto;
  }
  .st-foot, .st-main, .st-cols { break-inside: avoid; page-break-inside: avoid; }
}

/* One print layout. Portrait is what every print dialog defaults to, the
   sticker is turned a quarter turn to fill the sheet, and the seller turns the
   paper — which he does anyway to put it on glass. Offering a landscape option
   only created a way for the app and the dialog to disagree. */
@media print {
  .printarea {
    position: relative;
    width: 8in;
    height: 10.4in;
    overflow: hidden;      /* a transform does not move the layout box; without
                              this the sticker spills onto a second sheet */
    margin: 0 auto;
  }
  .printarea .sticker {
    position: absolute;
    top: 0;
    left: 0;
    width: 10.34in;        /* becomes the vertical span once rotated */
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
  }
}