/*
 * /vendor's QR & share, after (Nov 2026 board): the poster taped up on a
 * counter beside its choices (the three looks as small posters, the
 * headlines as paper tags), the link as a ticket with the poster's code on
 * its stub and the scans beside it, then three places to put it.
 *
 * The poster keeps its own printed looks (green, night, paper): it is a
 * printed product a counter already has on it, not page tokens. The QR is
 * always black on white with its quiet zone, in every look, so it scans.
 */

:root { --v-hub: url("/op-bg-vendor.svg"); }

.qr-page .cut { --ink3: #5F5A52; }
.qr-page .k { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.qr-page .btn { font-size: 16px; }

.qr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; padding-top: clamp(4px, 1.6vw, 24px); }
.qr-hero .xh1 { overflow-wrap: anywhere; }
.qr-lbl { margin-top: 38px; }
.qr-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 118px)); gap: 22px; margin-top: 14px; }
.qr-style { display: grid; justify-items: center; gap: 12px; min-width: 0; font: 650 16px var(--f); color: var(--ink3); cursor: pointer; }
.qr-style .qr-mini { rotate: var(--tilt, -1.5deg); transition: translate .3s var(--ease-out, ease-out), box-shadow .3s ease; }
.qr-style:nth-child(2) { --tilt: 1.2deg; } .qr-style:nth-child(3) { --tilt: -.6deg; }
.qr-style[aria-pressed="true"] { color: var(--ink); font-weight: 750; }
.qr-style[aria-pressed="true"] > span:last-child { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 7px; }
.qr-style[aria-pressed="true"] .qr-mini { translate: 0 -6px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 22px 30px -16px rgba(0,0,0,.55); }
.qr-style:focus-visible { outline: none; }
.qr-style:focus-visible .qr-mini { outline: 2.5px solid var(--accent, #1FA566); outline-offset: 4px; }
.qr-mini { width: 100%; max-width: 118px; aspect-ratio: 148 / 210; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 10px; border-radius: 6px; text-align: center; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 12px 20px -14px rgba(0,0,0,.5); --pb: #c9f2dc; background: #126644; color: #fff; }
.qr-mini .b { display: flex; align-items: center; gap: 3px; font-size: 7px; font-weight: 800; letter-spacing: .04em; color: var(--pb); }
.qr-mini .b .v-mark { width: 8px; height: 8px; background: currentColor; }
.qr-mini .l { font-size: 10px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.qr-mini .c { width: 64%; margin: auto 0; padding: 3px; border-radius: 5px; background: #fff; }
.qr-mini .c svg, .qr-stub .c svg { display: block; width: 100%; height: auto; }
.qr-mini .u { font-size: 6.5px; font-weight: 800; color: var(--pb); }
.qr-mini[data-look="night"] { background: #15171b; --pb: #7fe0ae; }
.qr-mini[data-look="paper"] { background: #fff; color: #111317; --pb: #126644; }
.qr-mini[data-look="paper"] .c { box-shadow: inset 0 0 0 1px #e1e3e7; }
.qr-heads { display: flex; flex-wrap: wrap; gap: 16px 12px; margin-top: 14px; }
.qr-head { position: relative; padding: 13px 16px 14px; font: 750 16px var(--f); letter-spacing: -.01em; color: var(--ink); --tilt: -.8deg; cursor: pointer; text-align: left; transition: translate .25s var(--ease-out, ease-out), rotate .4s var(--ease-spring, ease-out); }
.qr-head:nth-child(2) { --tilt: .9deg; } .qr-head:nth-child(3) { --tilt: -.4deg; }
.qr-head[aria-pressed="false"] { color: var(--ink2); font-weight: 650; }
.qr-head[aria-pressed="true"] { --tilt: 0deg; translate: 0 -4px; }
.qr-head[aria-pressed="true"]::after { content: 'On the poster'; position: absolute; right: 10px; top: -12px; padding: 2px 9px; border-radius: 99px; background: #1D1F22; color: #FBF8F1; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.qr-head:focus-visible { outline: 2.5px solid var(--accent, #1FA566); outline-offset: 3px; }
.qr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.qr-stage { position: relative; min-height: 820px; }
.qr-stage .scene { position: absolute; right: -3%; top: 0; width: 92%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: 1.8deg; filter: drop-shadow(0 18px 24px rgba(40,28,10,.28)); }
.qr-stage .t2 { position: absolute; right: 2%; bottom: 40px; width: 30%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: -5deg; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); z-index: 3; }
.qr-stage .pinup { position: absolute; left: 0; top: 250px; z-index: 4; --tilt: -2.6deg; }
/* The pencil arrow from the poster's corner up to the shop's own OPEN sign:
   the poster is how people get to the sign that answers them. */
.qr-stage .qr-arrow { right: 15%; top: 128px; width: 120px; height: 96px; z-index: 5; --sw: 2.6; }
.qr-page .qr-tag { position: absolute; right: 4%; top: 470px; z-index: 5; width: max-content; max-width: 46%; padding: 10px 14px 11px; --tilt: 2.4deg; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.qr-tag b { display: block; margin-top: 1px; font-size: 16px; letter-spacing: -.01em; text-transform: none; font-weight: 750; }

/* The preview: the printed poster at the size it reads at. */
.d-sheet { width: 330px; max-width: 100%; aspect-ratio: 148 / 210; padding: 28px 24px 24px; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 30px 60px -24px rgba(0, 0, 0, 0.5); }
.d-sheet.is-changing { animation: p-settle 0.35s var(--ease-out, ease-out); }
@keyframes p-settle { from { opacity: 0.6; transform: scale(0.98); } }

.d-sheet,
.d-poster {
  position: relative;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.d-sheet { display: flex; }
.d-poster { display: none; }
.d-sheet::before,
.d-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  opacity: var(--p-art, 0);
  -webkit-mask: var(--v-hub) center bottom -120px / 560px 560px no-repeat;
  mask: var(--v-hub) center bottom -120px / 560px 560px no-repeat;
}
.p-brand { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--p-brand); }
.p-brand .v-mark { width: 16px; height: 16px; background: currentColor; }
.p-lead { margin-top: 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.p-name { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--p-soft); }
.p-code { width: 66%; margin: auto 0; padding: 7px; border-radius: 12px; background: #fff; box-shadow: var(--p-code-edge, none); }
.p-code svg { width: 100%; height: auto; }
.p-hint { max-width: 24ch; font-size: 10.5px; line-height: 1.4; color: var(--p-soft); }
.p-url { margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; color: var(--p-brand); }

[data-style="green"]:is(.d-sheet, .d-poster) {
  background: var(--g-700);
  color: #fff;
  --p-brand: #c9f2dc;
  --p-soft: rgba(255, 255, 255, 0.82);
  --p-art: 0.14;
}
[data-style="night"]:is(.d-sheet, .d-poster) {
  background: #15171b;
  color: #fff;
  --p-brand: var(--g-300);
  --p-soft: rgba(255, 255, 255, 0.74);
  --p-art: 0.1;
}
[data-style="paper"]:is(.d-sheet, .d-poster) {
  background: #fff;
  color: #111317;
  --p-brand: var(--g-700);
  --p-soft: #4b4f57;
  --p-code-edge: inset 0 0 0 1px #e1e3e7;
}

.p-brand { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--p-brand); }
.p-brand .v-mark { width: 16px; height: 16px; background: currentColor; }
.p-lead { margin-top: 14px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.p-name { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--p-soft); }
/* The code on white, with its quiet zone, in every look: scannable first. */
.p-code { width: 64%; margin: auto 0; padding: 8px; border-radius: 12px; background: #fff; box-shadow: var(--p-code-edge, none); }
.p-code svg { display: block; width: 100%; height: auto; }
.p-hint { max-width: 24ch; font-size: 11.5px; line-height: 1.4; color: var(--p-soft); }
.p-url { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--p-brand); }

/* ── 01 Your link: a ticket, the poster's code on its stub ── */
.qr-linkrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(32px, 4.4vw, 80px); align-items: center; }
.qr-ticket { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 160px; color: #1D1F22; rotate: -1deg; filter: drop-shadow(0 1px .5px rgba(70,50,20,.22)) drop-shadow(0 22px 22px rgba(40,26,8,.24)); }
.qr-ticket::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #F7F0E0; -webkit-mask: radial-gradient(circle 14px at calc(100% - 160px) 0, #0000 96%, #000) 0 0 / 100% 51% no-repeat, radial-gradient(circle 14px at calc(100% - 160px) 100%, #0000 96%, #000) 0 100% / 100% 51% no-repeat; mask: radial-gradient(circle 14px at calc(100% - 160px) 0, #0000 96%, #000) 0 0 / 100% 51% no-repeat, radial-gradient(circle 14px at calc(100% - 160px) 100%, #0000 96%, #000) 0 100% / 100% 51% no-repeat; }
.qr-ticket .main { min-width: 0; padding: 28px 28px 28px 30px; }
.qr-ticket .k { color: #5F5A52; }
.qr-url { position: relative; margin-top: 14px; }
.qr-url p { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.qr-url p span { color: #5F5A52; font-weight: 600; }
/* The real field the Copy button reads (and selects, where the clipboard is refused). */
.qr-url .d-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.qr-ticket .btn { background: #1D1F22; color: #FBF8F1; }
.qr-ticket .btn.quiet { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px #1D1F22; }
.qr-sends { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.qr-sends .btn { --bh: 44px; padding: 0 16px; gap: 8px; }
.qr-sends .btn .ic { width: 18px; height: 18px; }
.qr-ticket .d-share-notice { margin-top: 12px; font-size: 15px; font-weight: 700; color: #1D1F22; }
.qr-ticket .d-share-notice:empty { display: none; }
.qr-ticket .note { margin-top: 16px; font-size: 15px; color: #47443E; }
.qr-stub { display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; border-left: 2px dashed rgba(29,31,34,.3); }
.qr-stub .c { width: 104px; padding: 5px; border-radius: 8px; background: #fff; }
.qr-stub small { font-size: 13.5px; font-weight: 650; color: #47443E; line-height: 1.35; }
.qr-scans .xspec .n { font-size: clamp(64px, 6vw, 92px); }
.qr-scans .qr-lock { color: var(--ink3); }
.qr-scans .qr-lock .ic { width: 40px; height: 40px; }
.qr-scans .btn { margin-top: 14px; }
.qr-scans-note { margin-top: 10px; font-size: 16px; color: var(--ink2); max-width: 22em; }
.qr-bars { display: grid; grid-template-columns: repeat(var(--n, 30), minmax(0, 1fr)); gap: 3px; align-items: end; height: 74px; margin-top: 18px; max-width: 380px; }
.qr-bars i { height: var(--h); border-radius: 2px 2px 1px 1px; background: var(--ink); opacity: .26; }
.qr-bars i.wk { opacity: .7; }
.qr-bars i.now { opacity: 1; background: var(--mustard); box-shadow: inset 0 0 0 1.5px var(--ink); }
.qr-scans .axis { display: flex; justify-content: space-between; max-width: 380px; margin-top: 8px; font-size: 13.5px; font-weight: 650; color: var(--ink3); }

/* ── 02 Where to put it: three photo slips ── */
.qr-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.qr-spot { padding: 14px 14px 22px; }
.qr-spot:nth-child(1) { --tilt: -1.2deg; } .qr-spot:nth-child(2) { --tilt: .9deg; translate: 0 22px; } .qr-spot:nth-child(3) { --tilt: -.5deg; }
.qr-spot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.qr-spot .k { margin: 16px 6px 0; }
.qr-spot b { display: block; margin: 6px 6px 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.qr-spot p { margin: 8px 6px 0; font-size: 16px; color: var(--ink2); }

@media (max-width: 1100px) {
  .qr-linkrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .qr-hero { grid-template-columns: minmax(0, 1fr); }
  .qr-stage { min-height: 760px; max-width: 620px; }
}
@media (max-width: 760px) {
  .qr-hero .xh1 { font-size: 40px; }
  .qr-styles { gap: 14px; }
  .qr-stage { min-height: 0; display: block; padding-top: 150px; margin-top: 6px; }
  .qr-stage .scene { right: 0; width: 100%; }
  .qr-stage .pinup { position: relative; top: auto; left: auto; width: min(260px, 78%); }
  .qr-stage .pinup .d-sheet { width: 100%; padding: 22px 18px 18px; }
  .qr-stage .p-lead { font-size: 21px; }
  .qr-stage .t2 { width: 30%; bottom: -10px; right: 0; }
  .qr-page .qr-tag { top: 40px; bottom: auto; right: auto; left: 4%; }
  .qr-ticket { grid-template-columns: minmax(0, 1fr); rotate: -.6deg; }
  .qr-ticket::before { -webkit-mask: none; mask: none; }
  .qr-ticket .main { padding: 24px 20px 24px; }
  .qr-url p { font-size: 19px; }
  .qr-stub { display: none; }
  .qr-spots { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 420px; }
  .qr-spot:nth-child(2) { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-style .qr-mini, .qr-head { transition: none; }
  .d-sheet.is-changing { animation: none; }
}

@media print {
  @page { size: A5 portrait; margin: 0; }
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .v-side,
  .dk-top,
  .dk-scrim,
  .dk-toasts,
  .v-foot,
  .xside, .xtop, .xmtop, .xbar { display: none !important; }
  /* Anything that holds the print copy must not become its containing
     block: a translate, rotate or filter on an ancestor (the page's rise-in,
     paper's tilt) would pin the "fixed" poster to that box, not the sheet. */
  body *:has(.d-poster) { translate: none !important; transform: none !important; rotate: none !important; filter: none !important; contain: none !important; opacity: 1 !important; }
  body .d-poster,
  body .d-poster * { visibility: visible !important; }
  .d-poster {
    display: flex !important;
    position: fixed;
    inset: 0;
    justify-content: center;
    gap: 5mm;
    padding: 14mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .d-poster::before { -webkit-mask-size: 190mm 190mm; mask-size: 190mm 190mm; -webkit-mask-position: center bottom -40mm; mask-position: center bottom -40mm; }
  .d-poster .p-brand { font-size: 13pt; gap: 2mm; }
  .d-poster .p-brand .v-mark { width: 6mm; height: 6mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .d-poster .p-lead { margin: 2mm 0 0; font-size: 28pt; }
  .d-poster .p-name { margin: 0; font-size: 15pt; }
  .d-poster .p-code { width: 84mm; margin: 3mm 0; padding: 4mm; border-radius: 5mm; }
  .d-poster .p-hint { max-width: 100mm; font-size: 11pt; }
  .d-poster .p-url { margin: 0; font-size: 11pt; }
}