/* photobooth.css — the booth's own furniture on top of base.css.
   Room styles skin everything through body[data-style]: the ground, the ink, and the booth's
   chrome (curtains, tiles, lights) are CSS/SVG, never anything baked into the photos. */

/* ---------- room-style skins ---------- */
body[data-style] { transition: background .3s ease, color .3s ease; }
body[data-style="vintage"] { --paper: #241A14; --paper-raised: #33251B; --ink: #F3E6D2; --ink-soft: #C6AC8C; --ink-faint: #977E60; --line: #4B382A; }
body[data-style="prison"] { --paper: #E8E9EA; --paper-raised: #FFFFFF; --line: #C7CACC; --ink-soft: #55595C; }
body[data-style="subway"] { --paper: #22262B; --paper-raised: #2E343B; --ink: #EDEFF2; --ink-soft: #A9B0B8; --ink-faint: #7C848C; --line: #3C434B; }
body[data-style="karaoke"] { --paper: #140B22; --paper-raised: #221238; --ink: #F6ECFF; --ink-soft: #C3A7E6; --ink-faint: #8E76B4; --line: #3A2358; --pink: #FF6FE0; --blue: #56E0F0; }
body[data-style="laundry"] { --paper: #EAF4EE; --paper-raised: #FFFFFF; --line: #C9E0D2; }
body[data-style="airplane"] { --paper: #EAF1F8; --paper-raised: #FFFFFF; --line: #C9DCEF; }
body[data-style="meme"] { --paper: #FFFBEA; --paper-raised: #FFFFFF; --line: #EFE2B8; }

/* the booth stage gets a per-room frame */
body[data-style="vintage"] .bp-stagewrap::before,
body[data-style="vintage"] .bp-stagewrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(90deg, #6E1220 0 6px, #8C1A2A 6px 12px, #5A0E1A 12px 18px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
body[data-style="vintage"] .bp-stagewrap::before { left: 0; }
body[data-style="vintage"] .bp-stagewrap::after { right: 0; }
body[data-style="prison"] .bp-stage { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 26px); }
body[data-style="laundry"] .bp-stagewrap { background: repeating-conic-gradient(#DCEFE3 0% 25%, #FFFFFF 0% 50%) 0 0 / 36px 36px; padding: 10px; border-radius: var(--r8); }
body[data-style="subway"] .bp-stagewrap::before { content: ''; position: absolute; inset: -10px -10px auto; height: 8px; background: linear-gradient(90deg, #F5C542, #F5C542 30%, transparent 30%); z-index: 3; }
body[data-style="karaoke"] .bp-stagewrap { box-shadow: 0 0 0 3px #FF6FE0, 0 0 44px rgba(255,111,224,.55); border-radius: var(--r8); }
body[data-style="airplane"] .bp-feed { border-radius: 40px / 26px; overflow: hidden; }
body[data-style="meme"] .bp-stagewrap { outline: 4px solid var(--ink); outline-offset: 3px; }

/* ---------- nav chrome ---------- */
.nav-bar { position: fixed; inset: var(--bar-h, 0px) 0 auto 0; height: 56px; display: none; align-items: center; justify-content: space-between; padding: 0 14px; z-index: 40; pointer-events: none; }
.nav-bar.is-shown { display: flex; }
.nav-bar > * { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.nav-exit { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font-size: 18px; line-height: 1; }
.nav-exit:hover { color: var(--ink); }
.nav-clock { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--paper-raised); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.nav-clock::before { content: '◷'; }
.nav-clock.is-low { color: var(--red); border-color: var(--red); }
.acct__rows { display: flex; flex-direction: column; gap: 8px; }
.acct__row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 6px; font-size: 14px; }
.acct__row .k { color: var(--ink-soft); font: 700 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.bp-scene { padding-top: 64px; }
.bp-next { min-width: 180px; }

/* ---------- START: room styles + preview ---------- */
.bp-start__opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.bp-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bp-style { position: relative; border: 1px solid var(--line); border-radius: var(--r8); background: var(--paper-raised); padding: 0 0 8px; overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.bp-style__art { display: block; height: 52px; }
.bp-style__t { font-size: 13px; font-weight: 800; padding: 0 8px; }
.bp-style__s { font-size: 11px; color: var(--ink-soft); padding: 0 8px; }
.bp-style[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -1px; }
.bp-style__hint { min-height: 20px; }
.bp-style[data-style="classic"] .bp-style__art { background: linear-gradient(135deg, #FFF, #E7EAF0); }
.bp-style[data-style="vintage"] .bp-style__art { background: repeating-linear-gradient(90deg, #6E1220 0 6px, #8C1A2A 6px 12px); }
.bp-style[data-style="meme"] .bp-style__art { background: linear-gradient(135deg, #FFF3B0, #FFD3E4); }
.bp-style[data-style="laundry"] .bp-style__art { background: repeating-conic-gradient(#DCEFE3 0% 25%, #FFF 0% 50%) 0 0 / 16px 16px; }
.bp-style[data-style="prison"] .bp-style__art { background: repeating-linear-gradient(90deg, #9AA0A2 0 14px, #7E8587 14px 18px); }
.bp-style[data-style="subway"] .bp-style__art { background: linear-gradient(180deg, #3A424B, #22262B); }
.bp-style[data-style="airplane"] .bp-style__art { background: linear-gradient(180deg, #FFD9A8, #8FC3E8); }
.bp-style[data-style="karaoke"] .bp-style__art { background: linear-gradient(135deg, #3A0F5C, #FF6FE0 60%, #38D6E8); }
@media (max-width: 640px) { .bp-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bp-preview { display: grid; place-items: center; width: 100%; height: 100%; padding: 22px 0; }
.bp-preview__strip { height: 100%; aspect-ratio: 1 / 3; display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 4px; padding: 5px 5px 16px; box-shadow: var(--shadow-2); position: relative; }
.bp-preview__cell { display: flex; flex: 1; min-height: 0; overflow: hidden; border-radius: 2px; animation: bpDevelop 3.4s ease-in-out infinite; }
.bp-preview__half { flex: 1; }
.bp-preview__half.is-pink { background: linear-gradient(160deg, var(--pink-tint), var(--pink)); }
.bp-preview__half.is-blue { background: linear-gradient(200deg, var(--blue-tint), var(--blue)); }
/* The mark printed at the foot of the strip. The strip is a literal #fff in both themes — it is a
   photo strip, not a surface — so this colour is literal too and cannot use a token that flips.
   #9A8F86 measured 3.16:1 at 10px; #7A6F65 is the same warm grey with the light taken out, 4.90. */
.bp-preview__foot { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 10px var(--serif); color: #7A6F65; }
@keyframes bpDevelop { 0%, 12% { opacity: .12; filter: blur(2px); } 30%, 100% { opacity: 1; filter: none; } }

/* ---------- LAYOUT ---------- */
.bp-layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(520px, 100%); }
.bp-layout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 300px; padding: 20px; }
.bp-layout__icon { color: var(--ink); display: grid; place-items: center; flex: 1; }
.bp-layout__t { font-size: 13px; letter-spacing: .3em; color: var(--ink-soft); }
.bp-layout[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -1px; }

/* ---------- the strip (shared by theme / edit / filter / decorate) ---------- */
.bp-strip { position: relative; width: 100%; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-1); container-type: inline-size; }
.bp-strip__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bp-strip__art.is-over { z-index: 3; pointer-events: none; }
.bp-strip__cells { position: absolute; inset: 0; z-index: 1; }
.bp-cell { position: absolute; padding: 0; border: 0; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.6); }
.bp-cell__img { width: 100%; height: 100%; object-fit: cover; }
.bp-cell__n { position: absolute; inset: 0; display: none; place-items: center; font-size: 12px; color: rgba(23,24,28,.35); }
button.bp-cell.is-empty .bp-cell__n { display: grid; } /* only the EDIT drop targets are numbered */
button.bp-cell { cursor: pointer; }
button.bp-cell:hover { outline: 2px dashed var(--ink-faint); outline-offset: -2px; }
.bp-strip__foot { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.bp-strip__date { font-size: clamp(6px, 2.2cqw, 11px); font-weight: 700; }
.bp-strip__brand { font-family: var(--serif); font-size: clamp(5px, 1.9cqw, 10px); }
/* Sized by HEIGHT so a 1×4 strip always fits the viewport with its controls; the inline
   aspect-ratio (set from the print geometry) derives the width, for either layout. */
.bp-strip--mini { width: 100%; }
.bp-strip--preview { width: auto; height: min(50svh, 430px); max-width: 74vw; }
.bp-strip--edit { width: auto; height: min(58svh, 520px); max-width: 74vw; }

/* ---------- THEME ---------- */
.bp-themescene { width: min(760px, calc(100vw - 32px)); }
.bp-packs { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.bp-pack { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; border-radius: var(--r8); }
.bp-pack__copy { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bp-pack__copy .t { font-size: 19px; font-weight: 800; }
.bp-pack__copy .s { font-size: 12px; color: var(--ink-soft); }
.bp-pack__swatches { display: flex; gap: 4px; }
.bp-swatch { width: 22px; height: 42px; border-radius: 2px; border: 1px solid var(--line); background-size: cover; background-position: center; }
.bp-pack__more { font-size: 12px; color: var(--ink-soft); width: 30px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; }
.bp-pack__go { color: var(--ink-faint); }
.bp-pack.is-picked { outline: 2px solid var(--ink); outline-offset: -1px; }
.bp-galleryWrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.bp-gallery { display: flex; gap: 14px; overflow-x: auto; width: 100%; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.bp-themecard { flex: 0 0 132px; padding: 10px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: center; }
.bp-themecard__t { font-size: 12px; color: var(--ink-soft); }
.bp-themecard.is-picked { outline: 2px solid var(--ink); outline-offset: -1px; }
.bp-dots { display: flex; gap: 6px; }
.bp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.bp-dot.is-on { background: var(--ink); }

/* ---------- BOOTH ---------- */
.bp-booth { gap: 14px; width: min(920px, calc(100vw - 24px)); }
/* The raw camera feed. Not `display: none` — see photobooth/scenes/booth.js — but a single
   transparent pixel: rendered, so WebKit keeps decoding it, and invisible, so nobody sees it. */
.bp-srcvideo { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: .01; pointer-events: none; z-index: -1; }
.bp-stagewrap { position: relative; width: min(560px, 100%); }
.bp-stage { position: relative; display: flex; width: 100%; aspect-ratio: 1.42 / 1; background: var(--ink); border-radius: 2px; overflow: hidden; }
.bp-stage.is-group { flex-wrap: wrap; }
.bp-stage.is-group .bp-feed { flex: 0 0 50%; height: 50%; }
.bp-feed { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #2A2C33; }
.bp-feed__canvas, .bp-feed__img, .bp-feed__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-feed__img, .bp-feed__video { transform: scaleX(-1); }
.bp-feed__tag { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--paper-raised); }
.bp-feed__tag--pink { background: var(--pink); color: var(--on-pink); }
.bp-feed__tag--blue { background: var(--blue); color: var(--on-blue); }
.bp-capsule { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; display: none; align-items: center; gap: 6px; padding: 4px 12px; border: 0; border-radius: 999px; background: rgba(23,24,28,.62); color: #fff; font-size: 12px; font-weight: 700; font-family: inherit; }
/* Shown when the call is live — and when the browser blocked its sound, because then the capsule
   IS the button that starts it. A badge nobody can press would leave the couple silent. */
.bp-capsule.is-live, .bp-capsule.needs-tap { display: flex; }
.bp-capsule.needs-tap { background: rgba(23,24,28,.86); cursor: pointer; }
.bp-capsule__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.bp-capsule.needs-tap .bp-capsule__dot { background: #FBBF24; }
.bp-numeral { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; font: 800 clamp(80px, 22vw, 150px)/1 var(--font); color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.45); pointer-events: none; }
.bp-numeral.is-pop { animation: bpPop .5s ease-out; }
@keyframes bpPop { from { transform: scale(1.5); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.bp-mic { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-raised); font-size: 18px; }
.bp-mic[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
/* The one thing between a couple and a blank rectangle. It sits over the (dark, empty) feed, wraps
   to as many lines as the sentence needs, and always carries the retry it tells them to tap. */
.bp-err { position: absolute; inset: auto 10px 10px; z-index: 6; padding: 10px 14px; border-radius: var(--r8); background: var(--red-tint); color: var(--on-red-tint); font-size: 14px; font-weight: 600; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.bp-err__retry { align-self: stretch; min-height: 40px; }
.bp-counter { font-size: 20px; font-weight: 700; letter-spacing: .18em; color: var(--ink-soft); }
.bp-pose { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.bp-pose__k { font-size: 11px; letter-spacing: .18em; color: var(--ink-faint); }
.bp-pose__cap { font-size: 17px; font-weight: 600; }
.bp-meme { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: var(--r8); background: var(--paper-raised); }
.bp-meme__emoji { font-size: 26px; }
.bp-meme__cap { font-weight: 800; }
.bp-meme__split { font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; }

.bp-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bp-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.bp-row__k { flex: 0 0 92px; text-align: right; font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); }
.bp-row__scroll { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; flex: 1; scrollbar-width: thin; }
.bp-row--sub .bp-row__k { color: var(--ink-faint); }
.bp-circ { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-raised); overflow: hidden; padding: 0; display: grid; place-items: center; }
.bp-circ img { width: 100%; height: 100%; object-fit: cover; }
.bp-circ__x, .bp-circ__emoji { font-size: 18px; color: var(--ink-soft); }
.bp-circ[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.bp-medianote { display: flex; flex-direction: column; gap: 4px; color: var(--ink-faint); text-align: center; }
/* Three volumes for three severities: the extras are a murmur, a degraded call is a warning, and
   anything that costs the couple their photographs is red wherever it appears. */
.bp-note { font-size: 13px; line-height: 1.45; }
.bp-note[data-tone="warn"] { color: var(--ink-soft); font-weight: 600; }
.bp-note[data-tone="error"] { color: var(--on-red-tint); background: var(--red-tint); border-radius: var(--r8); padding: 10px 14px; font-weight: 600; }
.bp-edit__notice { max-width: 620px; margin: 0 auto; text-align: center; }
.bp-readybar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bp-ready.is-locked { background: var(--green-tint); color: var(--on-green-tint); border: 1px solid var(--green); }
.bp-thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bp-thumb { width: 92px; aspect-ratio: 1.42 / 1; background: var(--line); border-radius: 2px; overflow: hidden; opacity: .45; transition: opacity .3s ease; }
.bp-thumb.is-on { opacity: 1; }
.bp-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .bp-row__k { flex-basis: 62px; } .bp-thumb { width: 62px; } }

/* ---------- EDIT ---------- */
.bp-edit { width: min(900px, calc(100vw - 24px)); }
.bp-edit__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; width: 100%; align-items: start; }
.bp-edit__pool { display: flex; flex-direction: column; gap: 10px; }
.bp-edit__strip { display: grid; place-items: start center; }
.bp-pool { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bp-poolcell { aspect-ratio: 1.42 / 1; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-raised); overflow: hidden; padding: 0; }
.bp-poolcell img { width: 100%; height: 100%; object-fit: cover; }
.bp-poolcell.is-empty { background: repeating-linear-gradient(135deg, var(--line) 0 6px, transparent 6px 12px); }
.bp-poolcell.is-used { opacity: .35; }
.bp-poolcell.is-picked { outline: 3px solid var(--ink); outline-offset: -1px; }
@media (max-width: 720px) { .bp-edit__cols { grid-template-columns: 1fr; gap: 18px; } .bp-pool { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- FILTER ---------- */
.bp-filters { display: flex; gap: 12px; overflow-x: auto; width: 100%; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.bp-filtercard { flex: 0 0 116px; padding: 8px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: center; }
.bp-filtercard__thumb { display: block; width: 100%; aspect-ratio: 1.42 / 1; border-radius: 2px; background: var(--line) center/cover no-repeat; }
.bp-filtercard__t { font-size: 12px; color: var(--ink-soft); }
.bp-filtercard.is-picked { outline: 2px solid var(--ink); outline-offset: -1px; }
.bp-filtercard.is-picked .bp-filtercard__t { color: var(--ink); font-weight: 700; }

/* ---------- DECORATE ---------- */
.bp-deco__wrap { position: relative; display: inline-block; }
.bp-deco__overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; touch-action: none; }
.bp-deco__overlay.is-drawing { cursor: crosshair; }
.bp-tabs { display: flex; gap: 8px; }
.bp-tab[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.bp-tray { display: flex; gap: 8px; overflow-x: auto; width: 100%; padding: 6px 2px; }
.bp-trayitem { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised); padding: 6px; display: grid; place-items: center; }
.bp-trayitem img { width: 100%; height: 100%; object-fit: contain; }
.bp-trayitem[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -1px; }
.bp-penbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bp-crayons { display: flex; gap: 6px; }
.bp-crayon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); padding: 0; }
.bp-crayon[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.bp-nibs { display: flex; gap: 6px; }
.bp-nib { width: 34px; height: 34px; border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised); display: grid; place-items: center; padding: 0; }
.bp-nib span { display: block; border-radius: 50%; background: var(--ink); }
.bp-nib[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -1px; }
.bp-eraser[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* ---------- DOWNLOAD ---------- */
.bp-download { gap: 16px; }
.bp-finalwrap { display: grid; place-items: center; width: 100%; }
.bp-final { height: min(48svh, 400px); width: auto; max-width: 70vw; border-radius: 3px; box-shadow: var(--shadow-2); }
/* The Instagram gradient, lifted until --on-grad (#2A0A14) reads on all of it. The shipped stops
   measured 12.07 : 4.56 : 2.43 against the label — 44% of the button's width was under 4.5:1 and
   the purple end was under half of it. sRGB interpolation dips BELOW both neighbouring stops, so
   the pink had to come up with the purple or the midpoint would still fail: these stops measure
   12.07 : 5.16 : 5.71 and the worst point anywhere along the sweep is 5.03:1 (#DA54A5, 67% of the
   way across). 18px label, so AA wants 4.5:1. A hardcoded light gradient rather than a token, so
   its one label colour is fixed and documented with its ratio — docs/STYLE-GUIDE.md §02.
   The numbers are re-measured by tests/e2e/photobooth.spec.js, not trusted to this comment. */
.bp-ig { background: linear-gradient(90deg, #F9CE34, #F0468A 55%, #A17BEE); min-width: 260px; }
/* Keeping the strip (R3/S6): the primary action for a couple, with the download directly under
   it. A column rather than a row, because "keep this strip" and "download a copy" are not two
   equal choices — the second is the souvenir of the first and reads as smaller, quieter, second. */
.bp-keepwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.bp-keep { min-width: 260px; }
.bp-kept { color: var(--ink-soft); text-align: center; }
.bp-kept.is-bad { color: var(--ink); }
.bp-hd.is-locked::after, .bp-video.is-locked::after { content: ' 🔒'; }
.bp-print { display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left; width: min(420px, 100%); border: 1px solid var(--pink); border-radius: var(--r8); background: var(--paper-raised); }
.bp-print__art { flex: 0 0 64px; height: 64px; border-radius: var(--r4); background: linear-gradient(135deg, var(--pink-tint), var(--blue-tint)); }
.bp-print__copy { display: flex; flex-direction: column; gap: 2px; }
.bp-print__copy .t { font-weight: 800; }
.bp-print__copy .s { font-size: 13px; color: var(--ink-soft); }
.bp-download__foot { gap: 20px; }
.bp-busy { min-height: 20px; }