/** Shopify CDN: Minification failed

Line 7:0 Unexpected ";"

**/
h
;
o
s
d
d
t
r
i
 
r
)
;
r
t
e
b
t
a
-
o
b
r
v
l
r
e
=
=
:
2
s
:
t
d
l
t
l
b
:
0
l
h
:
a
x
b
l
─
t
b
i
e
 
u
i
7
s
═
i
h
ehaviour. */
.bj-studio .acct-id{
  display:flex; align-items:center; gap:12px;
  padding:4px 2px 12px; margin-bottom:4px;
  border-bottom:1px solid var(--bj-hair,#e6e2da);
}
.bj-studio .acct-id__pic{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:var(--bj-ink,#1c1d1d); color:#fff; border:0; padding:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-family:var(--bj-sans); font-weight:700; font-size:17px; line-height:1;
  transition:box-shadow var(--mk-in,.11s ease), transform var(--mk-in,.11s ease);
}
.bj-studio .acct-id__pic:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(28,29,29,.22); }
.bj-studio .acct-id__pic:focus-visible{ outline:2px solid var(--bj-gold,#a58a52); outline-offset:2px; }
.bj-studio .acct-id__who{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.bj-studio .acct-id__who b{
  font-size:13.5px; font-weight:700; color:var(--bj-ink,#1c1d1d);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .acct-id__who em{
  font-style:normal; font-size:11.5px; color:var(--bj-muted,#6f6b64);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* the tray: a grid of faces that stays a grid at any width, and two plain
   words underneath for the two things an emoji cannot be */
.bj-studio .acct-pick{ padding:6px 2px 10px; }
.bj-studio .acct-pick[hidden]{ display:none; }
.bj-studio .acct-pick__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(34px, 1fr)); gap:4px;
  max-height:148px; overflow-y:auto; padding:2px;
}
.bj-studio .acct-emoji__b{
  aspect-ratio:1; border:1px solid transparent; background:none; cursor:pointer;
  font-size:19px; line-height:1; padding:0; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--mk-in,.11s ease), border-color var(--mk-in,.11s ease);
}
.bj-studio .acct-emoji__b:hover{ background:var(--mk-hov,#f2eee4); border-color:var(--bj-hair,#e6e2da); }
.bj-studio .acct-emoji__b:focus-visible{ outline:2px solid var(--bj-gold,#a58a52); outline-offset:-2px; }
.bj-studio .acct-pick__row{ display:flex; gap:8px; margin-top:9px; }
.bj-studio .acct-pick__b{
  flex:1 1 0; min-width:0; border:1px solid var(--bj-hair,#e6e2da); background:#fff;
  cursor:pointer; padding:8px 6px; border-radius:0;
  font-family:inherit; font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bj-ink,#1c1d1d); white-space:nowrap;
  transition:border-color var(--mk-in,.11s ease), background var(--mk-in,.11s ease);
}
.bj-studio .acct-pick__b:hover{ border-color:var(--bj-ink,#1c1d1d); background:var(--mk-hov,#f2eee4); }
/* the sign-in line: a statement, not a control, and dressed as one */
.bj-studio .acct-note{
  font-size:11.5px; line-height:1.55; color:var(--bj-muted,#6f6b64);
  padding:10px 2px; border-top:1px solid var(--bj-hair,#e6e2da); margin-top:4px;
}
/* the way out is the last thing and reads as one — never gold, never a
   primary, and not red either: signing out is reversible and unalarming */
.bj-studio .menu-row--sub.acct-out .menu-row__label{ color:var(--bj-muted,#6f6b64); }
.bj-studio .menu-row--sub.acct-out:hover .menu-row__label{ color:#c0392b; }

/* ── THE STYLESHEET SIGNS ITS OWN REVISION ────────────────────────────────
   The section's JS reads this custom property at boot and says so, loudly,
   in the console when it is missing or behind — because this file deploys
   separately from the section, and a stale or partial upload has now shipped
   a page where half the header's rules were simply absent. A mismatch is not
   an error the customer sees; it is one the person deploying does. */
.bj-studio{ --mk-css-rev: 60; }

/* ============================ PAGE ======================================= */
.bj-studio .page{ max-width:1280px; margin:0 auto; padding:0 28px 90px; }

/* ============================ LANDING ====================================
   Three bands, edge to edge inside .page — the section's own <style> block
   carries the bones of this (grid, bleed, band colours); everything below is
   the finish. If you edit one, edit both.

   The bands run edge to edge with `margin-inline:calc(50% - 50vw)` — the
   same idiom the old .invite landing already shipped with on this page, so
   it is a bleed this theme is known to tolerate. The columns inside are
   proportional, not capped, so the comp's balance (copy left, photograph
   filling the right and running off it) holds at every width.             */
.bj-studio .studio-landing,
.bj-studio .studio-proof,
.bj-studio .studio-faq{
  margin-inline:calc(50% - 50vw);
  /* the landing's own warm palette — one place to retune the whole band */
  --ls-band:#fdfaf6;      /* hero paper           */
  --ls-band-2:#fdf9f3;    /* reassurance strip    */
  --ls-band-3:#fefdfb;    /* explainer            */
  --ls-hair:#eee7db;      /* warm hairline        */
  --ls-gold:#b8873e;      /* the comp's richer gold, deeper than --bj-gold */
  --ls-gold-lt:#e2cfa9;
  --ls-ink:#1f2020;
  --ls-muted:#6b6862;
}

/* ── HERO BAND ─────────────────────────────────────────────────────────── */
/* The comp's two halves are NOT a two-column grid, and building it as one is
   what makes the headline wrap. In the comp the copy block is a fixed ~420px
   of centred text sitting ~84px in from the left edge, and the photograph
   starts UNDER its last few pixels — the words end exactly where the paper
   begins. A grid can give the copy that width only by taking it from the
   photograph, which then shows too narrow a slice of a 3:1 banner.

   So the photograph is positioned, not placed: it fills everything right of
   37%, and the copy floats over its feathered left edge. Each gets the width
   the comp gives it, and the headline stays on one line. */
/* ── AND THE BAND'S HEIGHT TRACKS ITS WIDTH, WHICH IS NOT FUSSINESS ───────
   The photograph is object-fit:cover, so a band that keeps a fixed height
   while the viewport grows is a window that keeps getting WIDER relative to
   its height — and a wider window on a 3:1 banner shows more of the banner.
   Past about 1500px that means the gold foil sheet at the far left walks
   into frame under the torn edge, as a brown wedge. Tying the height to the
   width keeps the window a constant shape, so the crop the comp specifies
   is the crop at every size. 30.4vw is the comp's own ratio: 390px at the
   1284px it was drawn at. */
.bj-studio .landing-hero{
  position:relative; display:flex; align-items:center; overflow:hidden;
  background:var(--ls-band); min-height:clamp(360px,30.4vw,620px);
}
/* the copy owns exactly the 37% the photograph does not, so no word can ever
   land on the paper — in the comp the headline's last letter and the torn
   edge are neighbours, not overlaps */
.bj-studio .landing-hero__copy{
  position:relative; z-index:2; text-align:center; flex:none;
  width:38%; min-width:0;
  padding:34px 0 36px clamp(18px,6.5vw,88px);
}
.bj-studio .landing-hero__inner{ max-width:420px; margin:0 auto; }
.bj-studio .landing-eyebrow{
  display:block; font-family:var(--bj-sans);
  font-size:12.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ls-gold);
}
.bj-studio .landing-title{
  font-family:var(--bj-serif); font-weight:400; text-transform:none;
  font-size:clamp(27px,3.6vw,50px); line-height:1.06; letter-spacing:0;
  color:var(--ls-ink); margin:12px 0 0; text-wrap:balance;
}
/* the hairline pair with the little gold heart between them */
.bj-studio .landing-rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:20px auto 18px; max-width:330px;
}
.bj-studio .landing-rule i{ flex:1; height:1px; background:var(--ls-gold-lt); }
.bj-studio .landing-rule svg{ width:15px; height:15px; color:var(--ls-gold); flex:none; }
.bj-studio .landing-lede{
  font-family:var(--bj-serif); font-weight:400;
  font-size:clamp(20px,2.15vw,27px); line-height:1.34; color:var(--ls-ink);
}
.bj-studio .landing-sub{
  margin:16px auto 0; max-width:440px;
  font-family:var(--bj-sans); font-size:15.5px; line-height:1.8; color:var(--ls-muted);
}
.bj-studio .landing-cta{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px; margin-top:30px;
}
/* ── THE TWO BUTTONS ARE ONE BUTTON IN TWO FINISHES ─────────────────────
   They were 1px-bordered, 500-weight and 15px tall, and read as flimsy next
   to a 50px headline. Both now carry the same 1.5px border, the same weight,
   the same box and the same lift, so the pair looks like a matched set and
   the hover means the same thing on each: the surface fills with gold and
   the whole control rises. The ghost's border is a real gold rather than the
   pale tint — at rest it has to hold its own against a solid gold twin. */
.bj-studio .landing-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--bj-serif); font-weight:600; font-size:18px; letter-spacing:.02em;
  line-height:1; border-radius:0; border:1.5px solid transparent;
  /* 24px of side padding, not 38: the pair has to sit on ONE line inside a
     420px copy column, and at 38px they wrapped and the second button ended
     up stranded under the first */
  padding:19px 24px; min-width:184px;
  box-shadow:0 1px 0 rgba(28,29,29,0);
  transition:background-color .22s ease, color .22s ease, border-color .22s ease,
             transform .22s ease, box-shadow .22s ease;
}
.bj-studio .landing-btn__arw{ font-size:20px; line-height:1; transition:transform .22s ease; }
.bj-studio .landing-btn--gold{ background:var(--ls-gold); border-color:var(--ls-gold); color:#fff; }
.bj-studio .landing-btn--ghost{ background:transparent; border-color:var(--ls-gold); color:var(--ls-gold); }
.bj-studio .landing-btn--gold:hover,
.bj-studio .landing-btn--ghost:hover{
  background:#a3762f; border-color:#a3762f; color:#fff;
  transform:translateY(-2px); box-shadow:0 10px 22px rgba(122,92,36,.22);
}
.bj-studio .landing-btn:hover .landing-btn__arw{ transform:translateX(5px); }
.bj-studio .landing-btn:active{ transform:translateY(0); box-shadow:0 3px 8px rgba(122,92,36,.18); }
.bj-studio .landing-btn:focus-visible{ outline:2.5px solid var(--ls-gold); outline-offset:3px; }
/* the small one, for the demo's own call to action */

/* the photograph: everything right of 37%, bleeding off the right edge */
.bj-studio .landing-hero__art{ position:absolute; inset:0 0 0 38.5%; }
.bj-studio .landing-hero__art .hero-show{ max-width:none; margin:0; position:absolute; inset:0; }
.bj-studio .landing-hero__art .hero-story{
  position:absolute; inset:0; width:100%; height:100%;
  aspect-ratio:auto; border:0; box-shadow:none; background:var(--ls-band);
}
/* ── THE ONE DIAL WORTH KEEPING TO HAND ───────────────────────────────
   brites-studio-hero.webp is 3:1; this window is about 2.1:1, so roughly
   70% of the banner's width is on screen and object-position decides WHICH
   70%. At 72% it runs from just left of the bunny to just past the pencil
   tip — the comp's crop. Turn it DOWN to walk left toward the gold foil,
   UP to walk right toward the pencil. If you ever replace the banner with
   a differently-composed shot, this number is the only thing to retune. */
.bj-studio .landing-hero__art .hero-story img{
  width:100%; height:100%; object-fit:cover; object-position:66% 50%;
}
/* the torn deckle edge, in the band colour: what carries the photograph into
   the copy column instead of a hard vertical seam */
.bj-studio .landing-hero__tear{
  position:absolute; top:-1px; left:-1px; width:min(52%,470px); height:118px;
  pointer-events:none; z-index:2;
  filter:drop-shadow(0 2px 4px rgba(122,106,80,.10));
}
.bj-studio .landing-hero__tear svg{ width:100%; height:100%; display:block; }
.bj-studio .landing-hero__tear path{ fill:var(--ls-band); }
/* and a short feather on the left edge so the paper meets the paper */
/* and the feather on the left edge, wide enough that the copy's last few
   pixels always land on band colour rather than on the photograph */
.bj-studio .landing-hero__fade{
  position:absolute; inset:0 auto 0 0; width:11%; pointer-events:none; z-index:1;
  background:linear-gradient(to right,
    var(--ls-band) 0%, rgba(253,250,246,.72) 46%, rgba(253,250,246,0) 100%);
}

/* ── REASSURANCE STRIP ─────────────────────────────────────────────────── */
.bj-studio .landing-trust{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0;
  list-style:none; margin:0; padding:16px 20px;
  background:var(--ls-band-2);
  border-top:1px solid var(--ls-hair); border-bottom:1px solid var(--ls-hair);
}
.bj-studio .landing-trust__item{
  display:flex; align-items:center; gap:13px; position:relative;
  padding:2px clamp(20px,4vw,88px);
  font-family:var(--bj-serif); font-weight:500; font-size:16.5px; letter-spacing:.005em;
  color:var(--ls-ink); white-space:nowrap;
  transition:color .2s ease;
}
.bj-studio .landing-trust__item:hover{ color:#000; }
.bj-studio .landing-trust__item:hover .landing-trust__ico{ transform:translateY(-2px) scale(1.06); color:#a3762f; }
.bj-studio .landing-trust__item + .landing-trust__item:before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:28px; background:var(--ls-gold-lt);
}
.bj-studio .landing-trust__ico{
  width:25px; height:25px; color:var(--ls-gold); flex:none;
  transition:transform .22s ease, color .22s ease;
}

/* ── HOW IT WORKS ──────────────────────────────────────────────────────── */
/* One job per step: choose a start, make it yours, preview and approve. The
   enlarged visual and its smaller number now share one tight anchor, leaving
   the words short enough to scan rather than read. */
.bj-studio .landing-how{ background:var(--ls-band-3); padding:36px 20px 42px; text-align:center; }
.bj-studio .landing-how__eyebrow{
  display:block; margin:0 0 8px;
  font-family:var(--bj-sans); font-size:10px; font-weight:800;
  letter-spacing:.26em; line-height:1.4; text-transform:uppercase; color:var(--ls-gold);
}
.bj-studio .landing-how__head{
  max-width:720px; margin:0 auto;
  font-family:var(--bj-serif); font-weight:400; text-transform:none;
  font-size:clamp(31px,3vw,42px); line-height:1.08; letter-spacing:.005em; color:var(--ls-ink);
}
.bj-studio .landing-steps{
  display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:0;
  list-style:none; margin:28px auto 0; max-width:1460px;
}
.bj-studio .landing-step{
  display:flex; flex:0 0 33.333%; align-items:flex-start; gap:18px; position:relative; text-align:left;
  padding:4px clamp(18px,2.4vw,48px); min-width:0;
  transition:transform .25s ease;
}
.bj-studio .landing-step:hover{ transform:translateY(-3px); }
.bj-studio .landing-step + .landing-step:before{
  content:""; position:absolute; left:0; top:4px;
  width:1px; height:108px; background:var(--ls-gold-lt); opacity:.85;
}
.bj-studio .landing-step__visual{
  flex:0 0 124px; width:124px; height:82px;
  display:flex; align-items:center; gap:6px;
}
.bj-studio .landing-step__num{
  flex:0 0 36px; width:36px; height:36px;
  border:1px solid rgba(184,135,62,.24); border-radius:50%; background:#f4ecdd;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--bj-serif); font-weight:500; font-size:18px; line-height:1;
  color:var(--ls-ink); box-shadow:0 3px 10px rgba(70,52,25,.08);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.bj-studio .landing-step:hover .landing-step__num{ background:var(--ls-gold); border-color:var(--ls-gold); color:#fff; }
.bj-studio .landing-step__ico{
  flex:0 0 82px; width:82px; height:82px; padding:7px;
  display:grid; place-items:center; color:var(--ls-gold);
  border:1px solid rgba(184,135,62,.28); border-radius:22px;
  background:linear-gradient(145deg,#fff 0%,#f8f0e3 100%);
  box-shadow:0 7px 18px rgba(85,62,25,.08),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bj-studio .landing-step__ico svg{ width:100%; height:100%; display:block; }
.bj-studio .landing-step:hover .landing-step__ico{
  transform:translateY(-3px) scale(1.025); border-color:rgba(184,135,62,.52);
  box-shadow:0 10px 24px rgba(85,62,25,.12),inset 0 1px 0 #fff;
}
.bj-studio .landing-step__txt{
  flex:1 1 auto; min-width:0; padding-top:2px;
  font-family:var(--bj-sans); font-size:15.5px; line-height:1.5; color:var(--ls-muted);
}
.bj-studio .landing-step__features{
  display:block; margin:0 0 6px;
  font-size:9.5px; font-weight:800; letter-spacing:.14em; line-height:1.4;
  text-transform:uppercase; color:var(--ls-gold);
}
.bj-studio .landing-step__txt b{
  display:block; margin-bottom:5px;
  font-family:var(--bj-serif); font-weight:600; font-size:23px; line-height:1.18; letter-spacing:.005em;
  color:var(--ls-ink);
}
.bj-studio .landing-step__copy{ display:block; }

@media (prefers-reduced-motion:reduce){
  .bj-studio .landing-step,
  .bj-studio .landing-step__ico,
  .bj-studio .landing-trust__ico{ transition:none; transform:none !important; }
}

/* ── LANDING · SMALLER SCREENS ─────────────────────────────────────────── */
@media (max-width:1100px){
  .bj-studio .landing-steps{ flex-direction:column; align-items:center; gap:20px; margin-top:26px; }
  .bj-studio .landing-step{ flex:0 1 auto; max-width:620px; width:100%; padding:0; gap:18px; }
  .bj-studio .landing-step + .landing-step:before{ display:none; }
  .bj-studio .landing-step__txt{ max-width:none; }
  .bj-studio .landing-trust__item{ font-size:15px; padding:2px clamp(14px,2.4vw,34px); }
}
@media (max-width:900px){
  /* the photograph stops floating and becomes a band of its own under the
     copy — a 38% column of it would be a sliver on a phone, and the
     headline and its button belong above the fold */
  .bj-studio .landing-hero{ display:block; min-height:0; }
  .bj-studio .landing-hero__art{ position:relative; inset:auto; width:100%; aspect-ratio:16/8; }
  .bj-studio .landing-hero__art .hero-story img{ object-position:62% 50%; }
  .bj-studio .landing-hero__copy{ width:auto; padding:26px 22px 30px; }
  .bj-studio .landing-hero__inner{ max-width:460px; }
  /* the tear stays at the top, which is still where the paper meets the
     words — it just runs the full width now */
  .bj-studio .landing-hero__tear{ left:-1px; right:-1px; width:auto; height:44px; }
  .bj-studio .landing-hero__fade{ display:none; }
  .bj-studio .landing-how{ padding:34px 20px 40px; }
  .bj-studio .landing-btn{ font-size:17.5px; padding:18px 32px; min-width:190px; }
}
@media (max-width:620px){
  .bj-studio .landing-trust{ gap:10px 0; padding:14px 14px; }
  .bj-studio .landing-trust__item{ padding:4px 14px; font-size:14.5px; }
  .bj-studio .landing-trust__item + .landing-trust__item:before{ display:none; }
  .bj-studio .landing-trust__ico{ width:22px; height:22px; }
  .bj-studio .landing-btn{ min-width:0; flex:1 1 auto; padding:17px 20px; font-size:16.5px; }
  .bj-studio .landing-cta{ gap:10px; }
  .bj-studio .landing-step{ gap:14px; }
  .bj-studio .landing-step__visual{ flex-basis:108px; width:108px; height:72px; gap:4px; }
  .bj-studio .landing-step__num{ width:32px; height:32px; font-size:17px; }
  .bj-studio .landing-step__ico{ width:72px; height:72px; padding:7px; border-radius:19px; }
  .bj-studio .landing-step__txt{ font-size:14.5px; }
  .bj-studio .landing-step__features{ font-size:9px; letter-spacing:.11em; }
  .bj-studio .landing-step__txt b{ font-size:21px; }
}
@media (prefers-reduced-motion:reduce){
  .bj-studio .landing-btn,
  .bj-studio .landing-btn--gold .landing-btn__arw{ transition:none; }
}
/* ========================= STUDIO BREADCRUMBS ============================
   The studio hides the landing page entirely while designing, and it used to
   hide the way back with it: Back is disabled on step 1 until a source is
   picked, so the first screen of the wizard was a room with no door.

   Three crumbs — storefront, studio landing, current step. The middle one is
   the only one that has to do any work, and it is deliberately a <button>
   rather than a link: leaving is a state change that has to save the design
   first, not a navigation.

   THEY HAVE NO BAR OF THEIR OWN. A full-width row with a rule under it cost
   about 37px of sticky rail on every screen to carry three words, and it put
   the design's name out at the far right where nobody asked for it. The
   crumbs now sit INSIDE .stepper-nav-row: flex:1 1 0 at the head of the row,
   so they start at the page's left edge and sit centred on the Back button,
   with .nav-pad as an equal-weight counterweight after Next so the
   Back / stepper / Next group stays centred on the page. Quieter type, too —
   9.5px at .13em, one weight below the buttons around it: this is a location
   label, not a control.                                                  */
.bj-studio .studio-crumbs{
  flex:1 1 0; min-width:0; display:flex; align-items:center; overflow:hidden;
}
.bj-studio .nav-pad{ flex:1 1 0; min-width:0; }
.bj-studio .studio-crumbs ol{
  display:flex; align-items:center; gap:0; min-width:0;
  list-style:none; margin:0; padding:0;
}
.bj-studio .studio-crumbs li{ display:flex; align-items:center; min-width:0; }
.bj-studio .studio-crumbs li + li:before{
  content:"\203A"; margin:0 7px; color:#c6c0b5; font-size:11px; line-height:1;
}
.bj-studio .studio-crumb{
  background:none; border:0; border-radius:0; padding:2px 0;
  font-family:var(--bj-sans); font-size:9.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--bj-muted); text-decoration:none; white-space:nowrap;
  transition:color .18s ease;
}
.bj-studio a.studio-crumb,
.bj-studio button.studio-crumb{ cursor:pointer; }
.bj-studio a.studio-crumb:hover,
.bj-studio button.studio-crumb:hover{ color:var(--bj-ink); text-decoration:underline; text-underline-offset:3px; }
.bj-studio .studio-crumb:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:3px; }
/* the step they are standing on is a label, not a control */
.bj-studio .studio-crumb--here{ color:var(--bj-ink); cursor:default; font-weight:700; }
.bj-studio .studio-crumb--here:hover{ text-decoration:none; }

/* ── WHEN THE ROW RUNS OUT OF ROOM ──────────────────────────────────────
   The crumb is a passenger in the Back / Next row, so it gives way before
   the controls do — and it gives way by SHEDDING CRUMBS, never by letting
   overflow:hidden saw a word in half. Each breakpoint is set where the
   trail's own width passes the space the row can spare for it, measured,
   not guessed:

     ≤1180  drop "Brites" — the site logo above already goes there
     ≤1000  drop the step name too; the stepper is right beside it saying
            the same thing, and what is left is one back-link with a ‹
     ≤760   there is no room for a passenger at all, so it steps OUT OF THE
            ROW — absolutely placed into 18px of padding on the sticky wrap,
            with no rule and no bar, against the 51px the old breadcrumb row
            cost on a phone. Out of flow is the point: flex-wrapping the row
            instead let Back / stepper / Next stop compressing and spill
            onto a third line at 390px. The full trail comes back up there,
            because on a line of its own it fits.                         */
@media (max-width:1180px){
  .bj-studio .studio-crumbs li:first-child,
  .bj-studio .studio-crumbs li:nth-child(2):before{ display:none; }
}
@media (max-width:1000px) and (min-width:761px){
  .bj-studio .studio-crumbs li:last-child,
  .bj-studio .studio-crumbs li:last-child:before{ display:none; }
  .bj-studio .studio-crumbs #crumbHome:before{ content:"\2039\00a0"; }
}
@media (max-width:760px){
  /* the padding goes on the ROW, not on .stepper-wrap: the wrap's padding
     is set wholesale further down this file (margin:0 -28px; padding:0 28px)
     and would simply overwrite a padding-top declared up here */
  .bj-studio .stepper-nav-row{ position:relative; padding-top:19px; }
  .bj-studio .stepper-nav-row .studio-crumbs{
    position:absolute; left:0; right:0; top:0;
    flex:none; width:auto; overflow:visible;
  }
  .bj-studio .nav-pad{ display:none; }
}
@media (max-width:620px){
  .bj-studio .studio-crumb{ font-size:9px; letter-spacing:.1em; }
}

/* ============================ STEPPER ====================================
   Glance-clear waypoints: big dots, labels underneath, bold states.
   ✓ gold = completed · ink dot + gold ring = you are here ·
   gold outline = visited, click to jump · pale = not yet reached.
   Sticky under the header once the design process begins.           */
.bj-studio .stepper-wrap{ background:#fff; transition:box-shadow .3s; }
.bj-studio.is-designing .stepper-wrap{
  position:sticky; top:66px; z-index:55; border-bottom:1px solid var(--bj-hair);
  box-shadow:0 10px 24px rgba(28,29,29,.05); margin:0 -28px; padding:0 28px;
}
.bj-studio .stepper{
  display:flex; align-items:flex-start; justify-content:center; gap:0;
  margin:14px auto 22px; max-width:640px; padding:4px 0 2px;
}
.bj-studio.is-designing .stepper{ margin:0 auto; padding:6px 0 5px; }
/* 25% off the bar's height, taken from every part in proportion so the
   internal margins keep their relationships (72px → ~54px) */
.bj-studio.is-designing .step{ gap:4px; width:76px; }
.bj-studio.is-designing .step__num{ width:20px; height:20px; font-size:10px; border-width:1.2px; }
.bj-studio.is-designing .step.is-active .step__num{ box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px var(--bj-gold); }
.bj-studio.is-designing .step.is-done .step__num:after{ font-size:10px; }
.bj-studio.is-designing .step__lbl{ font-size:8.5px; }
.bj-studio.is-designing .step__sub{ font-size:6.5px; margin-top:-1px; }
.bj-studio.is-designing .step-sep{ margin-top:9px; min-width:18px; max-width:64px; }
.bj-studio.is-designing .nav-arrow{ padding:7px 14px; font-size:9px; gap:8px; }
.bj-studio.is-designing .nav-arrow span{ font-size:13px; }
.bj-studio .step{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; padding:0; width:82px; flex:none;
  color:var(--bj-muted); cursor:default;
}
.bj-studio .step__num{
  width:27px; height:27px; border-radius:50%; border:1.5px solid #d9d5ce;
  display:flex; align-items:center; justify-content:center; position:relative;
  font-family:var(--bj-sans); font-size:12px; font-weight:700; background:#fff;
  color:#b5b1aa; transition:all .3s ease; flex:none; line-height:1; padding:0;
}
.bj-studio .step__num .n{ display:block; line-height:1; }
.bj-studio .step__lbl{
  font-size:9.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#b5b1aa; transition:color .3s; line-height:1;
}
.bj-studio .step__sub{ font-size:7.5px; letter-spacing:.12em; text-transform:uppercase; color:transparent; line-height:1; margin-top:-2px; transition:color .3s; }
/* you are here */
.bj-studio .step.is-active .step__num{
  background:var(--bj-ink); border-color:var(--bj-ink); color:#fff;
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--bj-gold);
}
.bj-studio .step.is-active .step__lbl{ color:var(--bj-ink); }
.bj-studio .step.is-active .step__sub{ color:var(--bj-gold); }
/* completed (behind you) — solid gold with a check */
.bj-studio .step.is-done{ cursor:pointer; }
.bj-studio .step.is-done .step__num{ background:var(--bj-gold); border-color:var(--bj-gold); color:#fff; }
.bj-studio .step.is-done .step__num .n{ display:none; }
.bj-studio .step.is-done .step__num:after{ content:"✓"; font-family:var(--bj-sans); font-size:12px; font-weight:700; line-height:1; display:block; }
.bj-studio .step.is-done .step__lbl{ color:var(--bj-gold); }
.bj-studio .step.is-done:hover .step__num{ box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--bj-gold-lt); }
/* visited & ahead of current position — gold outline, still one click away */
.bj-studio .step.is-reach{ cursor:pointer; }
.bj-studio .step.is-reach .step__num{ border-color:var(--bj-gold); color:var(--bj-gold); background:#fff; }
.bj-studio .step.is-reach .step__lbl{ color:var(--bj-gold); }
.bj-studio .step.is-reach:hover .step__num{ box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--bj-gold-lt); }
/* connector aligned to dot centers */
.bj-studio .step-sep{
  flex:1; height:1.5px; background:var(--bj-hair); min-width:22px; max-width:76px;
  margin-top:13px; position:relative; overflow:hidden;
}
.bj-studio .step-sep i{ position:absolute; inset:0; background:var(--bj-gold); transform:scaleX(0); transform-origin:left center; transition:transform .45s ease; }
.bj-studio .step-sep.is-done i{ transform:scaleX(1); }
/* Landing vs designing: the invite owns the landing; the stepper + wizard
   appear only once the user chooses to begin. */
.bj-studio .stepper-wrap{ display:none; }
.bj-studio.is-designing .stepper-wrap{ display:block; }
.bj-studio:not(.is-designing) .step-view.is-visible{ display:none; }
.bj-studio.is-designing .step-view.is-visible{ display:block; animation:bjs-fadeUp .4s ease; }
.bj-studio.is-designing .studio-landing{ display:none; }
/* while designing, the wizard IS the page: marketing sections and footer wait */
.bj-studio.is-designing .aux-section{ display:none; }
body.bj-designing .site-footer, body.bj-designing #shopify-section-footer-promotions{ display:none; }
.bj-studio.is-designing .page{ padding-bottom:4px; }
/* while designing, the studio uses the FULL page width — the wizard is the
   page, so it stretches like the theme's collection grids do */
.bj-studio.is-designing .page{ max-width:none; }
.bj-studio.is-designing .describe-grid{ max-width:1600px; margin:0 auto; gap:44px; }
/* Preview + Approve share the Describe step's exact layout metrics */
.bj-studio.is-designing .gen-grid,
.bj-studio.is-designing .approve-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(28px,3.5vw,64px); align-items:start;
  max-width:1500px; margin:0 auto;
}
/* frame and menu tops align, exactly like the Describe step */
.bj-studio .gen-left{ align-items:flex-start; }
.bj-studio .ref-frame--stage{ margin-top:0; }
.bj-studio .ref-frame--stage{ width:min(100%, calc(60vh + 28px)); margin-inline:auto; padding:14px; }
.bj-studio .ref-frame--stage .stage{ width:100%; margin:0; }
.bj-studio .gen-rail{ max-width:560px; width:100%; }
.bj-studio .pdp-card{ max-width:560px; width:100%; }
/* compact chrome while designing — the important controls stay above the fold */
.bj-studio.is-designing .page > .stepper-wrap + .step-view{ margin-top:0; }
.bj-studio.is-designing .panel--pad{ padding:18px 30px 26px; }
.bj-studio.is-designing .panel-head{ margin-bottom:10px !important; }
.bj-studio.is-designing .panel-head h2{ font-size:20px; padding-bottom:9px; margin-bottom:3px; }
.bj-studio.is-designing .panel-head p{ font-size:12.5px; }
.bj-studio.is-designing .field-block{ margin-bottom:16px; }
.bj-studio.is-designing .describe-form--v2 textarea{ min-height:200px; }
.bj-studio.is-designing .start-card .picto{ width:100%; max-width:350px; }
.bj-studio.is-designing .start-card{ padding:16px 16px 15px; }
.bj-studio.is-designing .step-nav{ margin-top:18px; }
/* generation stage never taller than the viewport allows */
.bj-studio .stage{ width:min(100%, 56vh); margin-inline:auto; }
.bj-studio .sv-stage{ width:min(100%, 60vh); margin-inline:auto; }
/* ══ REMOVED: the old .invite landing block ═════════════════════════════
   The landing is now .studio-landing (see LANDING, above): hero band,
   reassurance strip and the three-step explainer. The .invite markup it
   replaced is gone from the section, so its rules are gone from here —
   leaving them would be 30 lines of dead weight the next reader has to
   prove is dead. Recover them from git if the old landing is ever wanted.
   ══════════════════════════════════════════════════════════════════════ */
/* ============================ PROOF ROOM =================================
   Ported from the Live Atelier concept, rebuilt in the studio's language:
   square corners, the landing's cream, gold at --ls-gold, and the studio
   panel's hairline chrome in place of the concept's rounded cards.

   The interaction is the concept's, kept verbatim because it is the right
   one: a full-stage <input type="range"> at opacity 0 over both images.
   Dragging, tapping, arrow keys, Home/End and the screen-reader
   announcement all come from the browser. The only script is one line
   copying the slider's value into --p.                                   */
.bj-studio .studio-proof{
  display:grid; grid-template-columns:minmax(280px,.46fr) minmax(0,1.54fr);
  align-items:center; gap:clamp(28px,4vw,68px);
  padding:clamp(40px,4.6vw,66px) clamp(20px,5vw,88px);
  background:var(--ls-band); border-top:1px solid var(--ls-hair);
}
/* [hidden] loses to .studio-proof{display:grid} on specificity, and the
   section ships hidden until renderProofRoom() has both images */
.bj-studio .studio-proof[hidden]{ display:none; }

/* ── the copy ──────────────────────────────────────────────────────────── */
.bj-studio .proof-copy{ min-width:0; }
.bj-studio .proof-copy__head{
  margin:14px 0 16px;
  font-family:var(--bj-serif); font-weight:400; text-transform:none;
  font-size:clamp(40px,4.7vw,72px); line-height:.96; letter-spacing:-.02em;
  color:var(--ls-ink);
}
.bj-studio .proof-copy__head em{ font-style:italic; color:var(--ls-gold); }
.bj-studio .proof-copy__sub{
  font-family:var(--bj-sans); font-size:18px; line-height:1.6; color:var(--ls-muted);
}
.bj-studio .proof-cue{
  width:max-content; max-width:100%; margin-top:28px; padding-top:20px;
  border-top:1px solid var(--ls-gold-lt);
  display:flex; align-items:center; gap:13px;
}
.bj-studio .proof-cue > svg{ width:26px; height:26px; color:var(--ls-gold); flex:none; }
.bj-studio .proof-cue span{ display:grid; }
.bj-studio .proof-cue b{ font-family:var(--bj-sans); font-size:15px; font-weight:700; color:var(--ls-ink); }
.bj-studio .proof-cue small{ margin-top:2px; font-family:var(--bj-sans); font-size:13px; color:var(--ls-muted); }
.bj-studio .proof-cta{ margin-top:28px; }
.bj-studio .proof-copy__fine{
  margin-top:12px; font-family:var(--bj-sans); font-size:12.5px; letter-spacing:.02em; color:#9a948a;
}

/* ── the module ────────────────────────────────────────────────────────── */
.bj-studio .proof-module{
  min-width:0; background:#fff; border:1px solid var(--ls-hair);
  box-shadow:0 24px 60px rgba(122,106,80,.13);
}
.bj-studio .proof-module__top,
.bj-studio .proof-module__foot{
  min-height:62px; padding:10px 18px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.bj-studio .proof-module__top{ border-bottom:1px solid var(--ls-hair); }
.bj-studio .proof-live{
  display:flex; align-items:center; gap:11px;
  font-family:var(--bj-sans); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ls-ink);
}
.bj-studio .proof-live i{
  width:9px; height:9px; border-radius:50%; background:var(--ls-gold); flex:none;
  box-shadow:0 0 0 5px rgba(184,135,62,.14); animation:bjs-proofpulse 1.9s ease-in-out infinite;
}
@keyframes bjs-proofpulse{ 50%{ box-shadow:0 0 0 10px rgba(184,135,62,.02); } }
.bj-studio .proof-badge{
  min-height:40px; padding:0 14px; display:flex; align-items:center; gap:9px;
  border:1px solid var(--ls-hair); background:var(--ls-band-2); color:var(--ls-gold);
  font-family:var(--bj-sans); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.bj-studio .proof-badge svg{ width:17px; height:17px; flex:none; }

/* ── the stage ─────────────────────────────────────────────────────────── */
.bj-studio .proof-stage{
  --p:56%;
  position:relative; overflow:hidden; background:#fff;
  height:clamp(300px,31vw,470px);
}
/* Both halves are square art centred in the stage, so the alignment maths
   below is in fractions of ONE square rather than of a box whose aspect
   changes with the viewport. */
.bj-studio .proof-layer{ position:absolute; inset:0; overflow:hidden; }
/* The square is pinned top AND bottom so its height is definite and the
   aspect-ratio can derive the width from it. The obvious version — a grid
   with place-items:center and height:100% on the child — does not work: the
   row is auto-sized, a percentage height against an auto row is cyclic, so
   the browser falls back to auto, the child stretches to the stage's WIDTH,
   and the charm comes out at twice its size with its head cropped off. */
.bj-studio .proof-art{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  aspect-ratio:1;
}
.bj-studio .proof-art img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform:scale(1.22); transform-origin:center;
}
/* ── ALIGNING TWO PICTURES OF ONE CHARM ────────────────────────────────
   The markup render and the gold render are not framed identically, so
   laying one straight over the other leaves the outlines a few pixels
   apart — which is the one flaw this whole interaction cannot survive.
   These four numbers are measured, not eyeballed. In each square PNG:

     markup  content centre (.4996,.5204)  content size (.6964,.6521)
     gold    content centre (.5029,.5303)  content size (.7129,.6758)

   Gold is drawn slightly larger, so it scales DOWN against the markup's
   1.22 zoom:  x 1.22*(.6964/.7129)=1.1918   y 1.22*(.6521/.6758)=1.1772
   Then the centres are matched, after scaling, about the box centre:
     x  (.5+(.4996-.5)*1.22) - (.5+(.5029-.5)*1.1918) = -.00394
     y  (.5+(.5204-.5)*1.22) - (.5+(.5303-.5)*1.1772) = -.01078
   If the art is ever re-shot, re-measure the two bounding boxes and redo
   exactly this — do not nudge it by eye.                                */
.bj-studio .proof-art--gold img{ transform:translate(-.394%,-1.078%) scale(1.1918,1.1772); }
.bj-studio .proof-after{
  position:absolute; inset:0; z-index:2;
  clip-path:inset(0 0 0 var(--p));
}
.bj-studio .proof-tag{
  position:absolute; z-index:5; top:16px; min-height:40px; padding:0 12px;
  display:flex; align-items:center; gap:9px; pointer-events:none;
  background:rgba(255,255,255,.94); border:1px solid var(--ls-hair);
  font-family:var(--bj-sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ls-ink);
}
.bj-studio .proof-tag svg{ width:17px; height:17px; color:var(--ls-gold); flex:none; }
.bj-studio .proof-tag--before{ left:16px; }
.bj-studio .proof-tag--after{ right:16px; }
.bj-studio .proof-line{
  position:absolute; z-index:4; top:0; left:var(--p);
  width:2px; height:100%; background:var(--ls-gold); pointer-events:none;
}
.bj-studio .proof-handle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  border:2px solid #fff; background:var(--ls-gold); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 9px 24px rgba(28,29,29,.24);
  transition:box-shadow .2s ease, transform .2s ease;
}
.bj-studio .proof-handle svg{ width:24px; height:24px; }
/* ── WHY THIS SELECTOR IS SO LONG ──────────────────────────────────────
   Further down this same stylesheet lives the 2026-08-17 rule that gives
   EVERY range control in the studio a visible track and thumb:

       .bj-studio input[type="range"] { height:18px; ... }

   That selector is (0,2,1). A plain `.bj-studio .proof-range` is (0,2,0),
   so it loses — and it loses on source order too, being the earlier rule.
   The reveal's invisible slider was therefore 18px tall, pinned to the top
   of the stage by inset:0, and only that one strip of the picture could be
   dragged. Everything looked perfect and nothing moved.

   `.proof-stage input.proof-range` is (0,3,1) and settles it. The thumb and
   track are flattened for the same reason — the global rule sizes the thumb
   at 16px, and the hit target wants the full height of the stage. None of
   it is ever seen: the input is opacity:0 and only its geometry matters.

   Worth remembering how this got shipped: the first test drove the slider
   with `el.value = n` and dispatched an input event, which bypasses hit
   testing entirely and passes on a control nobody can actually touch. A
   pointer-driven control has to be tested with a pointer.              */
.bj-studio .proof-stage input.proof-range{
  position:absolute; inset:0; z-index:6; width:100%; height:100%;
  margin:0; padding:0; border:0; background:transparent; opacity:0;
  cursor:ew-resize; -webkit-appearance:none; appearance:none;
}
.bj-studio .proof-stage input.proof-range::-webkit-slider-runnable-track{
  height:100%; background:transparent; border:0; border-radius:0;
}
.bj-studio .proof-stage input.proof-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:64px; height:100%; margin-top:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  cursor:ew-resize;
}
.bj-studio .proof-stage input.proof-range::-moz-range-track{
  height:100%; background:transparent; border:0; border-radius:0;
}
.bj-studio .proof-stage input.proof-range::-moz-range-progress{
  height:100%; background:transparent;
}
.bj-studio .proof-stage input.proof-range::-moz-range-thumb{
  width:64px; height:100%; border:0; border-radius:0;
  background:transparent; box-shadow:none; cursor:ew-resize;
}
.bj-studio .proof-stage:hover .proof-handle{ transform:translate(-50%,-50%) scale(1.05); }
/* the slider is invisible, so its focus has to be drawn on the handle */
.bj-studio .proof-range:focus-visible ~ .proof-line .proof-handle{
  box-shadow:0 0 0 3px #fff, 0 0 0 6.5px var(--ls-gold), 0 9px 24px rgba(28,29,29,.24);
}

/* ── the foot, and the editor's own colour code ────────────────────────── */
.bj-studio .proof-caption{ font-family:var(--bj-sans); font-size:13.5px; color:var(--ls-muted); }
.bj-studio .proof-caption b{ font-family:var(--bj-serif); font-weight:600; font-size:16px; color:var(--ls-ink); }
.bj-studio .proof-metal{
  min-height:40px; padding:0 14px; display:flex; align-items:center; gap:9px;
  border:1px solid var(--ls-ink); background:var(--ls-band-2); color:var(--ls-ink);
  font-family:var(--bj-sans); font-size:12px; font-weight:700; letter-spacing:.08em;
}
.bj-studio .proof-metal i{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.16); background:linear-gradient(135deg,#fff1b3,#a96d10);
}
.bj-studio .proof-legend{
  list-style:none; margin:0; padding:12px 18px 14px;
  border-top:1px solid var(--ls-hair); background:var(--ls-band-3);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px;
}
.bj-studio .proof-legend li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--bj-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ls-muted);
}
.bj-studio .proof-legend__dot{ width:11px; height:11px; border-radius:50%; flex:none; }
/* the studio's own three-valued fill law. Red is absent on purpose: it is a
   reserved instruction colour and never appears in an explanatory overlay. */
.bj-studio .proof-legend__dot--engrave{ background:#000; }
.bj-studio .proof-legend__dot--cut{ background:#00b4ff; }
.bj-studio .proof-legend__dot--note{ background:#00d24a; }

/* ── PROOF ROOM · SMALLER SCREENS ──────────────────────────────────────── */
@media (max-width:1100px){
  .bj-studio .studio-proof{ grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr); }
  .bj-studio .proof-stage{ height:clamp(280px,32vw,400px); }
}
@media (max-width:900px){
  .bj-studio .studio-proof{ grid-template-columns:1fr; gap:26px; padding:38px 22px 42px; }
  .bj-studio .proof-copy{ max-width:620px; }
  .bj-studio .proof-copy__head{ font-size:clamp(38px,8.4vw,58px); }
  .bj-studio .proof-stage{ height:min(64vw,380px); }
  .bj-studio .proof-handle{ width:50px; height:50px; }
}
@media (max-width:620px){
  .bj-studio .studio-proof{ padding:32px 16px 36px; }
  .bj-studio .proof-module__top,
  .bj-studio .proof-module__foot{ padding:10px 12px; }
  .bj-studio .proof-tag{ top:10px; min-height:34px; padding:0 9px; font-size:9.5px; letter-spacing:.1em; }
  .bj-studio .proof-tag svg{ width:14px; height:14px; }
  .bj-studio .proof-tag--before{ left:10px; }
  /* the two tags will not fit on one line across a phone-width stage, and
     side by side they collide over the charm's head — so the gold one drops
     to the opposite corner, which still reads as "this half" */
  .bj-studio .proof-tag--after{ top:auto; bottom:12px; right:10px; }
  .bj-studio .proof-caption{ display:none; }
  .bj-studio .proof-legend{ gap:8px 16px; padding:11px 12px 12px; }
  .bj-studio .proof-legend li{ font-size:10.5px; }
  .bj-studio .proof-cta{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .bj-studio .proof-live i{ animation:none; }
  .bj-studio .proof-handle{ transition:none; }
  .bj-studio .proof-stage:hover .proof-handle{ transform:translate(-50%,-50%); }
}

/* ============================ PANELS / CARDS ============================= */
.bj-studio .panel{ border:1px solid var(--bj-hair); background:#fff; }
.bj-studio .panel--pad{ padding:34px 36px 38px; }
.bj-studio .panel + .panel{ margin-top:26px; }
.bj-studio .panel-head{ text-align:center; margin-bottom:26px; }
.bj-studio .panel-head h2{ position:relative; padding-bottom:18px; margin-bottom:8px; font-size:clamp(24px,2.6vw,32px); }
.bj-studio .panel-head h2:after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:44px; height:1px; background:var(--bj-gold);
}
.bj-studio .panel-head p{ color:var(--bj-muted); font-size:14px; max-width:560px; margin:0 auto; }
.bj-studio .step-view{ display:none; animation:bjs-fadeUp .4s ease; }
.bj-studio .step-view.is-visible{ display:block; }
@keyframes bjs-fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
/* Start cards */
.bj-studio .start-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bj-studio .start-card{
  border:1px solid var(--bj-hair); background:#fff; padding:30px 26px 28px; text-align:center;
  cursor:pointer; transition:border-color .2s, box-shadow .25s, transform .25s; position:relative;
}
.bj-studio .start-card:hover{ border-color:var(--bj-ink); box-shadow:var(--bj-shadow); transform:translateY(-2px); }
.bj-studio .start-card.is-selected{ border-color:var(--bj-gold); box-shadow:var(--bj-shadow); }
.bj-studio .start-card.is-selected:before{
  content:"✓"; position:absolute; top:0; left:0; background:var(--bj-gold); color:#fff;
  font-size:12px; font-weight:700; padding:4px 10px;
}
.bj-studio .start-card__icon{ display:block; margin:0 auto 16px; width:54px; height:54px; color:var(--bj-gold); }
.bj-studio .start-card__icon svg{ width:100%; height:100%; }
.bj-studio .start-card h3{ font-size:21px; margin-bottom:8px; }
.bj-studio .start-card p{ font-size:13px; color:var(--bj-muted); line-height:1.7; }
/* ==================== STEP 1 — GUIDED TWO-PHASE INSPIRE ================== */
.bj-studio .inspire-panel{ display:flex; flex-direction:column; min-height:calc(100vh - 205px); }
.bj-studio .inspire-phase{
  animation:bjs-fadeUp .35s ease; flex:1;
  display:flex; flex-direction:column; justify-content:center;
}
.bj-studio .inspire-phase > *{ flex:none; }
.bj-studio .inspire-phase[hidden]{ display:none; }
.bj-studio .phase-head{ text-align:center; margin-bottom:14px; }
.bj-studio .phase-head h2{ font-size:clamp(26px,2.4vw,33px); position:relative; padding-bottom:12px; margin:10px 0 6px; }
.bj-studio .phase-head h2:after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:40px; height:1px; background:var(--bj-gold); }
.bj-studio .phase-hint{ font-size:13.5px; color:var(--bj-muted); }
.bj-studio .phase-hint b{ color:var(--bj-gold); font-weight:700; }
/* compact bar variant: back · substeps · hint on one line */
.bj-studio .phase-head--bar{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:26px; text-align:left; position:relative; }
.bj-studio .phase-head--bar .phase-back{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
.bj-studio .phase-back{ padding:6px 0; font-size:10px; flex:none; }
.bj-studio .phase-hint--right{ flex:none; text-align:right; }
/* sub-stepper: step 1's own tiny progress */
.bj-studio .substeps{ display:inline-flex; align-items:center; gap:10px; }
.bj-studio .substeps .sub{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#b5b1aa;
}
.bj-studio .substeps .sub i{
  width:22px; height:22px; border-radius:50%; border:1.4px solid #d9d5ce; font-style:normal;
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; background:#fff;
  font-family:var(--bj-sans); font-weight:700; line-height:1; text-align:center; padding:0;
}
.bj-studio .substeps .sub.is-active{ color:var(--bj-ink); }
.bj-studio .substeps .sub.is-active i{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }
.bj-studio .substeps .sub.is-done{ color:var(--bj-gold); }
.bj-studio .substeps .sub.is-done i{ background:var(--bj-gold); border-color:var(--bj-gold); color:#fff; }
.bj-studio .sub-line{ width:36px; height:1.4px; background:var(--bj-hair); }
.bj-studio .sub-line.is-done{ background:var(--bj-gold-lt); }
/* start cards gain an explicit affordance */
.bj-studio .start-card__go{
  display:inline-block; margin-top:11px; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bj-gold); border-bottom:1px solid var(--bj-gold-lt); padding-bottom:2px;
}
/* Three ways in now, so the grid is three across — at two across the third
   card wrapped to a second row and pushed step 1 off the bottom of the
   screen, which the no-scroll budget catches. */
.bj-studio .inspire-panel .start-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1060px; gap:18px; margin:8px auto 0; }
.bj-studio .inspire-panel .start-card h3{ font-size:clamp(18px,1.3vw,21px); margin-top:4px; }
/* slim search controls */
.bj-studio .substep-bar{
  display:flex; align-items:center; justify-content:center; position:relative;
  padding:15px 0 13px;
}
.bj-studio .substep-bar[hidden]{ display:none; }
/* global Back / Next flanking the progress bar — the ONE way to navigate */
.bj-studio .stepper-nav-row{ display:flex; align-items:center; justify-content:center; gap:clamp(26px,4vw,72px); }
.bj-studio .stepper-mid{ flex:none; min-width:0; }
.bj-studio .nav-arrow{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  border:1px solid var(--bj-hair); background:#fff; color:var(--bj-ink);
  padding:10px 18px; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  transition:all .2s;
}
.bj-studio .nav-arrow em{ font-style:normal; }
.bj-studio .nav-arrow span{ font-size:15px; line-height:1; }
.bj-studio .nav-arrow:hover:not(:disabled){ border-color:var(--bj-ink); }
.bj-studio .nav-arrow--next:not(:disabled){ background:var(--bj-gold); border-color:var(--bj-gold); color:#fff; }
.bj-studio .nav-arrow--next:hover:not(:disabled){ background:#8f7644; border-color:#8f7644; }
.bj-studio .nav-arrow:disabled{ opacity:.28; cursor:not-allowed; }
.bj-studio .substep-bar .sub{ font-size:11.5px; }
.bj-studio .substep-bar .substeps .sub i{ width:24px; height:24px; font-size:12px; line-height:1; }
.bj-studio .substep-bar .sub-line{ width:44px; }
.bj-studio .search-bar--slim{ width:100%; max-width:780px; margin:6px auto 20px; }
.bj-studio .search-bar--slim input{ padding:13px 44px; font-size:15px; }
.bj-studio .chip-row--slim{ margin-bottom:14px; gap:10px; }
.bj-studio .chip-row--slim .chip{ padding:6px 15px; font-size:10.5px; }
.bj-studio .inspire-panel .search-meta{ margin:0 0 14px; font-size:10.5px; min-height:0; }
/* click-to-select design grid — larger portrait media, generous spacing */
.bj-studio .inspire-panel .charm-grid{
  grid-template-columns:repeat(4,1fr); gap:15px; max-width:900px; margin:0 auto;
  max-height:none; overflow:visible; width:100%;
}
/* wide screens: as many large cards per row as fit the full width */
@media (min-width:1200px){
.bj-studio .inspire-panel .charm-grid{
    grid-template-columns:repeat(auto-fill, minmax(185px,1fr));
    max-width:2280px; gap:18px;
  }
}
@media (min-width:1900px){
.bj-studio .inspire-panel .charm-grid{ grid-template-columns:repeat(auto-fill, minmax(207px,1fr)); }
.bj-studio .charm-card--slim .charm-card__title{ font-size:14px; }
.bj-studio .cc-buy,
.bj-studio .cc-use{ padding:10px 4px; font-size:12px; }
}
/* header bar pins to the top; the search + grid group centers in the rest */
.bj-studio #phaseSearch,
.bj-studio #phaseUpload{ justify-content:flex-start; }
.bj-studio #phaseSearch .phase-head--bar,
.bj-studio #phaseUpload .phase-head--bar{ margin-bottom:auto; }
.bj-studio #phaseSearch .charm-grid{ margin-bottom:auto; }
.bj-studio #phaseUpload .upload-stage{ margin-bottom:auto; }
.bj-studio .charm-card{ cursor:pointer; }
.bj-studio .charm-card__pop{
  position:absolute; top:6px; right:6px; z-index:3; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92);
  border:1px solid var(--bj-hair); color:var(--bj-ink); text-decoration:none; font-size:12px; font-weight:700;
}
.bj-studio .charm-card__pop:hover{ background:#fff; border-color:var(--bj-ink); }
.bj-studio .charm-card--slim .charm-card__meta{ padding:8px 10px 8px; text-align:center; }
.bj-studio .charm-card--slim .charm-card__title{
  font-size:13px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bj-studio .charm-card--slim .charm-card__price{ font-size:10px; margin-top:2px; }
.bj-studio .charm-card--slim.is-selected{ box-shadow:0 0 0 1px var(--bj-gold); }
/* full-width stacked card actions */
.bj-studio .charm-card__btns{ display:flex; flex-direction:column; }
.bj-studio .cc-buy,
.bj-studio .cc-use{
  display:block; width:100%; padding:8px 4px; text-align:center; text-decoration:none;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  transition:background .2s, color .2s;
}
.bj-studio .cc-buy{ background:#fff; color:var(--bj-ink); border:none; border-top:1px solid var(--bj-hair); }
.bj-studio .cc-buy:hover{ background:var(--bj-ink); color:#fff; }
/* same white ground as Buy Now, but gold voice + gold hover — the enticing one */
.bj-studio .cc-use{ background:#fff; color:var(--bj-gold); border:none; border-top:1px solid var(--bj-hair); }
.bj-studio .cc-use:hover{ background:var(--bj-gold); color:#fff; }
.bj-studio .charm-card--slim.is-selected .cc-use{ background:var(--bj-gold); color:#fff; }
/* zoomable image boxes */
.bj-studio .zoom-box{ cursor:zoom-in; overflow:hidden; }
.bj-studio .zoom-box img,
.bj-studio .zoom-box svg{ will-change:transform; }
/* upload stage: idle → progress → verified */
.bj-studio .upload-stage{ max-width:560px; margin:14px auto 0; width:100%; }
.bj-studio .upload-progress,
.bj-studio .upload-done{ display:flex; gap:16px; align-items:center; border:1px solid var(--bj-hair); background:var(--bj-band); padding:18px 20px; animation:bjs-fadeUp .3s ease; }
.bj-studio .upload-progress[hidden],
.bj-studio .upload-done[hidden]{ display:none; }
.bj-studio .up-thumb{ width:64px; height:64px; border:1px solid var(--bj-hair); background:#fff; overflow:hidden; flex:none; }
.bj-studio .up-thumb--lg{ width:84px; height:84px; }
.bj-studio .up-thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .up-body{ flex:1; min-width:0; }
.bj-studio .up-label{ font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--bj-ink); margin-bottom:8px; }
.bj-studio .up-bar{ height:3px; background:#e2ded7; }
.bj-studio .up-bar i{ display:block; height:100%; width:0%; background:var(--bj-gold); transition:width .25s ease; }
.bj-studio .up-pct{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bj-muted); margin-top:6px; }
.bj-studio .up-check{ font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--bj-ok); }
.bj-studio .up-meta{ font-size:11px; color:var(--bj-muted); margin-top:2px; }
.bj-studio .up-allowance{
  text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bj-muted); margin-top:12px;
}
.bj-studio .up-allowance b{ color:var(--bj-gold); }
.bj-studio .upload-fail{ border-color:#e2b9b9; background:#fdf7f7; }
.bj-studio .up-fail-title{ font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--bj-err); }
.bj-studio .up-name{ font-size:12.5px; color:#3c3a37; margin:3px 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* .pick-bar removed — the chosen-design bar is gone; the picker's own
   REFERENCE badge and “✓ Selected” button already carry that state */
/* taller portrait media on picker cards */
.bj-studio .inspire-panel .charm-card__img{ aspect-ratio:5/6; }
@media (max-width:960px){
.bj-studio .inspire-panel .charm-grid{ grid-template-columns:repeat(2,1fr); }
.bj-studio .phase-head--bar{ flex-wrap:wrap; }
}
/* ============================ SEARCH ===================================== */
.bj-studio .search-wrap{ margin-top:28px; display:none; }
.bj-studio .search-wrap.is-visible{ display:block; animation:bjs-fadeUp .35s ease; }
.bj-studio .search-bar{ max-width:560px; margin:0 auto 8px; position:relative; }
.bj-studio .search-bar input{ width:100%; font-size:15px; padding:14px 44px 14px 44px; }
.bj-studio .search-bar .search-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--bj-muted); width:18px; height:18px; }
.bj-studio .search-bar .search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:20px; color:var(--bj-muted); padding:6px 10px; display:none;
}
.bj-studio .search-meta{
  text-align:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bj-muted); margin:10px 0 18px; min-height:17px;
}
.bj-studio .chip-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.bj-studio .chip{
  border:1px solid var(--bj-hair); background:#fff; padding:7px 16px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bj-muted);
  transition:all .2s;
}
.bj-studio .chip:hover{ border-color:var(--bj-ink); color:var(--bj-ink); }
.bj-studio .chip.is-active{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }
.bj-studio .charm-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:16px;
  max-height:560px; overflow-y:auto; padding:2px;
}
.bj-studio .charm-card{ border:1px solid var(--bj-hair); background:#fff; transition:box-shadow .25s,border-color .2s; position:relative; }
.bj-studio .charm-card:hover{ box-shadow:var(--bj-shadow); }
.bj-studio .charm-card.is-selected{ border-color:var(--bj-gold); }
.bj-studio .charm-card.is-selected:before{
  content:"REFERENCE"; position:absolute; top:0; left:0; z-index:2; background:var(--bj-gold); color:#fff;
  font-size:9px; font-weight:700; letter-spacing:.2em; padding:4px 9px;
}
.bj-studio .charm-card__img{ background:var(--bj-imgbg); aspect-ratio:1; overflow:hidden; cursor:pointer; }
.bj-studio .charm-card__img svg,
.bj-studio .charm-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bj-studio .charm-card:hover .charm-card__img svg,
.bj-studio .charm-card:hover .charm-card__img img{ transform:scale(1.045); }
.bj-studio .charm-card__meta{ padding:12px 13px 13px; }
.bj-studio .charm-card__title{ font-family:var(--bj-serif); font-weight:600; font-size:15.5px; line-height:1.3; }
.bj-studio .charm-card__price{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bj-muted); margin-top:3px; }
.bj-studio .charm-card__actions{ display:flex; gap:6px; margin-top:10px; }
.bj-studio .charm-card__use{
  flex:1; background:var(--bj-ink); color:#fff; border:1px solid var(--bj-ink);
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:8px 4px;
}
.bj-studio .charm-card__use:hover{ background:#000; }
.bj-studio .charm-card.is-selected .charm-card__use{ background:var(--bj-gold); border-color:var(--bj-gold); }
.bj-studio .charm-card__view{
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  background:#fff; color:var(--bj-ink); border:1px solid var(--bj-hair); text-decoration:none;
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:8px 4px;
}
.bj-studio .charm-card__view:hover{ border-color:var(--bj-ink); }
.bj-studio .search-empty{ grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--bj-muted); font-size:14px; }
.bj-studio .search-empty b{ font-family:var(--bj-serif); font-size:19px; font-weight:600; display:block; margin-bottom:6px; color:var(--bj-ink); }
/* Upload zone */
.bj-studio .upload-wrap{ margin-top:28px; display:none; }
.bj-studio .upload-wrap.is-visible{ display:block; animation:bjs-fadeUp .35s ease; }
.bj-studio .dropzone{
  max-width:560px; margin:0 auto; border:1px dashed #c9c5be; background:var(--bj-band);
  padding:46px 30px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s;
}
.bj-studio .dropzone:hover,
.bj-studio .dropzone.is-drag{ border-color:var(--bj-gold); background:#fdfaf4; }
.bj-studio .dropzone svg{ width:44px; height:44px; margin:0 auto 14px; color:var(--bj-gold); }
.bj-studio .dropzone b{ font-family:var(--bj-serif); font-size:19px; font-weight:600; display:block; margin-bottom:6px; }
.bj-studio .dropzone p{ font-size:12.5px; color:var(--bj-muted); }
.bj-studio .upload-note{ max-width:560px; margin:12px auto 0; font-size:12px; color:var(--bj-muted); text-align:center; line-height:1.7; }
/* Reference summary strip (persistent once chosen) */
.bj-studio .ref-strip{
  display:none; margin-top:26px; border:1px solid var(--bj-gold-lt); background:var(--bj-band);
  padding:16px 20px; align-items:center; gap:18px;
}
.bj-studio .ref-strip.is-visible{ display:flex; animation:bjs-fadeUp .3s ease; }
.bj-studio .ref-strip__thumb{ width:74px; height:74px; background:#000; flex:none; border:1px solid var(--bj-hair); overflow:hidden; }
.bj-studio .ref-strip__thumb svg,
.bj-studio .ref-strip__thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .ref-strip__info{ flex:1; min-width:0; }
.bj-studio .ref-strip__kind{ font-size:9.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bj-gold); }
.bj-studio .ref-strip__name{ font-family:var(--bj-serif); font-weight:600; font-size:18px; }
.bj-studio .ref-strip__sub{ font-size:12px; color:var(--bj-muted); }
.bj-studio .step-nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:30px; }
/* ============================ STEP 2 — DESCRIBE ========================== */
.bj-studio .describe-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:34px; align-items:start; }
.bj-studio .describe-form textarea{ width:100%; min-height:148px; resize:vertical; font-size:15px; line-height:1.7; }
.bj-studio .char-count{ text-align:right; font-size:11px; color:var(--bj-muted); margin-top:5px; }
.bj-studio .idea-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.bj-studio .idea-chip{
  border:1px solid var(--bj-hair); background:#fff; font-size:12px; padding:7px 13px; color:#4c4a47;
  transition:all .2s;
}
.bj-studio .idea-chip:hover{ border-color:var(--bj-gold); color:var(--bj-ink); background:#fdfaf4; }
.bj-studio .metal-row{ display:flex; gap:12px; margin-top:10px; }
.bj-studio .metal-opt{ flex:1; border:1px solid var(--bj-hair); background:#fff; padding:14px 10px 12px; text-align:center; transition:all .2s; }
.bj-studio .metal-opt:hover{ border-color:var(--bj-ink); }
.bj-studio .metal-opt.is-active{ border-color:var(--bj-ink); background:var(--bj-ink); color:#fff; }
.bj-studio .metal-opt .sw{ width:26px; height:26px; border-radius:50%; margin:0 auto 8px; border:1px solid rgba(0,0,0,.12); }
.bj-studio .metal-opt span{ font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.bj-studio .field-block{ margin-bottom:24px; }
.bj-studio .field-block label{ margin-bottom:8px; }
.bj-studio .field-hint{ font-size:12px; color:var(--bj-muted); margin-top:7px; line-height:1.65; }
/* brief card */
.bj-studio .brief-card{ border:1px solid var(--bj-hair); background:var(--bj-band); padding:24px 26px; position:sticky; top:96px; }
.bj-studio .brief-card h3{ font-size:20px; margin-bottom:4px; }
.bj-studio .brief-card .bj-eyebrow{ margin-bottom:14px; display:block; }
.bj-studio .pick-title{
  font-family:var(--bj-serif); font-weight:500; font-size:clamp(20px,1.5vw,26px);
  text-align:center; margin:0 0 16px; color:var(--bj-ink);
}
/* ══════════ Conversation studio (step 2) — Claude-inspired ══════════════
   Thread of messages, attachment chip, auto-growing composer, inline result
   cards that double as version selectors. Persists per design session. */
.bj-studio .chat{
  display:flex; flex-direction:column; border:1px solid var(--bj-hair); background:#fff;
  max-width:560px; width:100%; min-height:420px;
  /* matches preview + dock exactly, so all three panes share top and bottom */
  height:calc(var(--stage-size,60vh) + var(--dock-h,0px) + var(--dock-gap,0px) + 28px);
}
.bj-studio .chat__head{ padding:14px 18px 12px; border-bottom:1px solid var(--bj-hair); flex:none; }
.bj-studio .chat__title{ margin:0; font-size:19px; }
.bj-studio .chat__meta{ font-size:11.5px; color:var(--bj-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bj-studio .chat__thread{
  flex:1; overflow-y:auto; padding:16px 18px 6px; display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin;
}
.bj-studio .chat__empty{ margin:auto; text-align:center; color:var(--bj-muted); font-size:13px; line-height:1.8; padding:20px; }
.bj-studio .chat__empty b{ display:block; font-family:var(--bj-serif); font-size:19px; font-weight:600; color:var(--bj-ink); margin-bottom:6px; }
.bj-studio .msg{ display:flex; flex-direction:column; gap:6px; max-width:100%; animation:bjs-fadeUp .3s ease; }
.bj-studio .msg__who{ font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#9a968f; }
.bj-studio .msg--me{ align-items:flex-end; }
.bj-studio .msg--me .msg__body{ background:var(--bj-band); border:1px solid var(--bj-hair); padding:10px 14px; font-size:14px; line-height:1.6; max-width:86%; }
.bj-studio .msg--studio .msg__body{ font-size:14px; line-height:1.7; color:#3c3a37; max-width:92%; }
/* result = a small inline attachment chip, sized to its content and kept on
   the studio side of the thread so the conversation stays easy to follow */
.bj-studio .msg-result{
  display:inline-flex; gap:8px; align-items:center; align-self:flex-start;
  border:1px solid var(--bj-hair); background:#fff; padding:4px 10px 4px 4px;
  cursor:pointer; transition:all .18s; width:auto; max-width:100%; text-align:left; margin-top:2px;
}
.bj-studio .msg-result:hover{ border-color:var(--bj-gold-lt); background:var(--bj-band); }
.bj-studio .msg-result.is-current{ border-color:var(--bj-gold); background:#fffdf9; }
.bj-studio .msg-result__thumb{ width:30px; height:30px; overflow:hidden; background:var(--bj-imgbg); flex:none; }
.bj-studio .msg-result__thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .msg-result__v{ font-size:11.5px; font-weight:700; color:var(--bj-ink); letter-spacing:.02em; line-height:1.2; white-space:nowrap; }
.bj-studio .msg-result.is-current .msg-result__v{ color:var(--bj-gold-dk, var(--bj-ink)); }
.bj-studio .msg--thinking .msg__body{ display:flex; align-items:center; gap:10px; color:var(--bj-muted); font-style:italic; }
.bj-studio .dots{ display:inline-flex; gap:3px; }
.bj-studio .dots i{ width:4px; height:4px; border-radius:50%; background:var(--bj-gold); animation:bjs-blink 1.2s infinite; }
.bj-studio .dots i:nth-child(2){ animation-delay:.2s; }
.bj-studio .dots i:nth-child(3){ animation-delay:.4s; }
@keyframes bjs-blink{ 0%,80%,100%{opacity:.25} 40%{opacity:1} }
/* composer */
.bj-studio .chat__composer{ flex:none; border-top:1px solid var(--bj-hair); padding:12px 14px 13px; background:#fff; }
.bj-studio .composer{ display:flex; align-items:flex-end; gap:8px; border:1px solid #c9c5be; background:#fff; padding:8px 8px 8px 12px; transition:border-color .2s; }
.bj-studio .composer:focus-within{ border-color:var(--bj-ink); }
.bj-studio .composer textarea{
  flex:1; border:none; padding:5px 0; resize:none; outline:none; font-size:14.5px; line-height:1.55;
  min-height:34px; height:34px; max-height:132px; overflow-y:auto;
  font-family:var(--bj-sans); background:transparent; display:block;
}
.bj-studio .composer__send{
  width:34px; height:34px; flex:none; border:none; background:var(--bj-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .2s, opacity .2s;
}
.bj-studio .composer__send svg{ width:17px; height:17px; }
.bj-studio .composer__send:hover{ background:#000; }
.bj-studio .composer__send:disabled{ opacity:.3; cursor:not-allowed; }
.bj-studio .composer__foot{ display:flex; justify-content:space-between; gap:10px; margin-top:7px; font-size:10.5px; color:var(--bj-muted); }
.bj-studio .composer__foot b{ color:var(--bj-ink); }
/* ── THE ARROW'S SECOND JOB, SAID IN COLOUR ────────────────────────────────
   Once a version has metal, the send button stops refining the drawing and
   starts editing the gold — a different act, on a different picture, that
   spends a credit. A control that silently changes what it does is a trap,
   so it takes the same gold as "Re-render", which is the only other press in
   this studio that spends a credit on metal. The mode line under the box
   carries the words; the button carries the recognition.

   The line is above .composer__foot rather than inside it: the foot is a
   space-between row of two short spans and a third child would push the
   credit count and the character count into each other on a narrow rail. */
.bj-studio .composer__send.is-gold{ background:var(--bj-gold); }
.bj-studio .composer__send.is-gold:hover{ background:#8f7644; }
.bj-studio.bj-gold-edit .composer:focus-within{ border-color:var(--bj-gold); }
/* .composer__mode is gone with the note it styled — see paintComposerMode.
   The one rule kept is the belt for a cached page that still has the element
   in its markup: whatever is in it, it takes no space. */
.bj-studio .composer__mode{ display:none !important; }
.bj-studio .chat__approve{ width:100%; margin-top:11px; padding:13px 10px; font-size:11.5px; }
.bj-studio .chat__approve[hidden]{ display:none; }
.bj-studio .chat__approve.is-approved,
.bj-studio .chat__approve.is-approved:disabled{
  opacity:1; pointer-events:none; cursor:default;
  background:#fff !important; color:#8f7644 !important;
  border-color:var(--bj-gold) !important;
  box-shadow:0 0 0 3px rgba(165,138,82,.13),0 9px 24px rgba(74,57,26,.10);
  animation:bjs-approve-confirm .68s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes bjs-approve-confirm{
  0%{ transform:scale(.985); box-shadow:0 0 0 0 rgba(165,138,82,0); }
  48%{ transform:scale(1.012); box-shadow:0 0 0 5px rgba(165,138,82,.15),0 10px 26px rgba(74,57,26,.11); }
  100%{ transform:scale(1); box-shadow:0 0 0 3px rgba(165,138,82,.13),0 9px 24px rgba(74,57,26,.10); }
}
/* ═════════ Reference dock — the small companion to the big preview ═════════
   The generated charm owns the large black stage; the reference sits directly
   beneath it, deliberately a fraction of the size, on paper-white with a gold
   spine so the two can never be mistaken for one another. */
.bj-studio .ref-dock{
  display:flex; align-items:center; gap:16px; margin-top:var(--dock-gap,12px); padding:11px 14px 11px 13px;
  height:var(--dock-h); box-sizing:border-box;
  border:1px solid var(--bj-hair); border-left:3px solid var(--bj-gold); background:var(--bj-band);
}
.bj-studio .ref-dock[hidden]{ display:none; }
.bj-studio .ref-dock__thumb{
  height:calc(var(--dock-h) - 24px); aspect-ratio:1; flex:none; position:relative; padding:0;
  border:1px solid var(--bj-hair); background:#fff; overflow:hidden; cursor:zoom-in;
  transition:border-color .2s, box-shadow .2s;
}
.bj-studio .ref-dock__thumb:hover{ border-color:var(--bj-gold); box-shadow:0 6px 18px rgba(28,29,29,.12); }
.bj-studio .ref-dock__thumb img,
.bj-studio .ref-dock__thumb svg{ width:100%; height:100%; object-fit:cover; display:block; }
.bj-studio .ref-dock__zoom{
  position:absolute; right:0; bottom:0; z-index:2; background:rgba(28,29,29,.74); color:#fff;
  font-size:11px; line-height:1; padding:5px 6px; pointer-events:none;
}
.bj-studio .ref-dock__info{ min-width:0; display:flex; flex-direction:column; gap:4px; flex:1; }
.bj-studio .ref-dock__eyebrow{
  font-size:9.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bj-gold);
}
.bj-studio .ref-dock__name{
  font-family:var(--bj-serif); font-size:19px; color:var(--bj-ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .ref-dock__sub{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bj-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .ref-dock__change{
  flex:none; background:none; border:1px solid var(--bj-hair); color:var(--bj-muted);
  font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 12px; transition:all .2s;
}
.bj-studio .ref-dock__change:hover{ border-color:var(--bj-ink); color:var(--bj-ink); background:#fff; }
/* narrow screens: one column, preview on top, reference dock beneath it.
   These carry body.is-designing so they outrank the desktop two-column rule. */
@media (max-width:960px){
.bj-studio.is-designing .gen-grid,
.bj-studio.is-designing .approve-grid{ grid-template-columns:1fr; gap:22px; max-width:640px; }
.bj-studio .gen-grid{ --stage-size:min(78vw,46vh); --dock-h:112px; }
.bj-studio .gen-left{ flex-direction:column-reverse; align-items:stretch; }
.bj-studio .ref-frame--stage{ width:100%; }
.bj-studio #view-2 .version-strip,
.bj-studio #view-3 .version-strip{ flex-direction:row; flex-wrap:wrap; width:100%; max-height:none; }
}
@media (max-width:560px){
.bj-studio .ref-dock{ height:auto; gap:12px; padding:10px; }
.bj-studio .ref-dock__thumb{ height:86px; }
.bj-studio .ref-dock__name{ font-size:16px; }
.bj-studio .ref-dock__change{ padding:7px 9px; }
}
/* enlarged reference — same zoom + pan engine as every other image box */
.bj-studio .ref-lightbox__inner{ width:min(680px,100%); background:#fff; padding:40px 16px 14px; }
.bj-studio .ref-lightbox__stage{
  width:min(100%, 62vh); aspect-ratio:1; margin-inline:auto;
  background:var(--bj-imgbg); border:1px solid var(--bj-hair); overflow:hidden; position:relative;
}
.bj-studio .ref-lightbox__stage img,
.bj-studio .ref-lightbox__stage svg{ width:100%; height:100%; object-fit:cover; display:block; }
.bj-studio .ref-lightbox__cap{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  width:min(100%, 62vh); margin:0 auto; padding:12px 2px 2px;
}
.bj-studio .ref-lightbox__cap b{ font-family:var(--bj-serif); font-weight:500; font-size:18px; }
.bj-studio .ref-lightbox__cap b i{
  display:block; font-style:normal; font-family:var(--bj-sans); font-size:9.5px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bj-gold); margin-bottom:3px;
}
.bj-studio .ref-lightbox__cap > span{ font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-muted); }
@media (max-width:960px){
.bj-studio .chat{ height:auto; min-height:0; max-width:none; }
.bj-studio .chat__thread{ max-height:340px; }
}
/* Describe v2 — framed hero reference + right-hand form, one screen */
.bj-studio .describe-grid--v2{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(28px,3.5vw,64px); align-items:center;
  max-width:1500px; margin:0 auto; min-height:calc(100vh - 245px);
}
.bj-studio .ref-frame{
  border:1px solid var(--bj-hair); background:#fff; padding:14px 14px 0;
  box-shadow:0 16px 40px rgba(28,29,29,.08);
  width:min(100%, calc(60vh + 28px)); margin-inline:auto;
}
/* the studio frame closes on all four sides — it now holds the preview AND
   the reference dock (declared here so it lands after the .ref-frame base) */
.bj-studio .ref-frame--stage{ width:min(100%, calc(var(--stage-size,60vh) + 28px)); padding:14px; margin-top:0; }
.bj-studio .ref-frame__stage{
  aspect-ratio:1; background:var(--bj-imgbg); overflow:hidden; position:relative;
  border:1px solid var(--bj-hair);
}
.bj-studio .ref-frame__stage img,
.bj-studio .ref-frame__stage svg{ width:100%; height:100%; object-fit:cover; }
.bj-studio .ref-frame__foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 3px 14px; }
.bj-studio .ref-frame__cap{
  font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bj-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .describe-form--v2{ max-width:560px; }
.bj-studio .describe-form--v2 .df-title{
  font-size:clamp(25px,2vw,32px); position:relative; padding-bottom:14px; margin:0 0 22px;
}
.bj-studio .describe-form--v2 .df-title:after{ content:""; position:absolute; left:0; bottom:0; width:44px; height:1px; background:var(--bj-gold); }
.bj-studio .describe-form--v2 label{ margin-bottom:10px; }
.bj-studio .describe-form--v2 textarea{ width:100%; min-height:200px; resize:vertical; font-size:15.5px; line-height:1.7; }
.bj-studio .describe-form--v2 .char-count{ margin:6px 0 20px; }
.bj-studio .describe-form--v2 .df-go{ width:100%; padding:16px 20px; font-size:13px; }
.bj-studio .describe-form--v2 .df-back{ width:100%; margin-top:10px; }
@media (max-width:960px){
.bj-studio .describe-grid--v2{ grid-template-columns:1fr; min-height:0; }
.bj-studio .ref-frame{ width:min(100%, 420px); }
}
/* large zoomable reference preview on the Describe step */
.bj-studio .ref-preview{ position:sticky; top:96px; }
.bj-studio .ref-preview__stage{
  width:min(100%, 44vh); aspect-ratio:1; margin-inline:auto;
  background:var(--bj-imgbg); border:1px solid var(--bj-hair); overflow:hidden; position:relative;
}
.bj-studio .ref-preview__stage img,
.bj-studio .ref-preview__stage svg{ width:100%; height:100%; object-fit:cover; }
.bj-studio .ref-preview__empty{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; color:var(--bj-muted); font-size:13px; background:var(--bj-band);
}
.bj-studio .ref-preview__empty svg{ width:38px; height:38px; color:#c9c5be; }
.bj-studio .brief-row{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--bj-hair); font-size:13px; }
.bj-studio .brief-row:last-of-type{ border-bottom:none; }
.bj-studio .brief-row b{ font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#8a8784; min-width:92px; padding-top:2px; }
.bj-studio .brief-row span{ color:#3c3a37; }
.bj-studio .brief-thumb{ width:64px; height:64px; background:#000; border:1px solid var(--bj-hair); overflow:hidden; }
.bj-studio .brief-thumb svg,
.bj-studio .brief-thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .spec-note{
  margin-top:16px; padding:13px 16px; border:1px solid var(--bj-gold-lt); background:#fff;
  font-size:12px; color:var(--bj-muted); line-height:1.7;
}
.bj-studio .spec-note b{ color:var(--bj-ink); font-size:10px; letter-spacing:.2em; text-transform:uppercase; display:block; margin-bottom:4px; }
/* ============================ STEP 3 — GENERATE ========================== */
/* studio layout: everything on one screen, stage as large as the viewport allows */
.bj-studio .panel--studio{ padding:12px 16px 12px; }
.bj-studio.is-designing .panel--studio{ padding:10px 16px 8px; }
/* one shared height budget: the preview stage, the reference dock beneath it
   and the conversation panel all derive from these two numbers, so the three
   panes always start and finish on the same lines. */
.bj-studio .gen-grid{
  --stage-size:55vh; --dock-h:clamp(122px,14vh,156px); --dock-gap:12px;
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start;
}
.bj-studio .gen-grid.is-norref{ --dock-h:0px; --dock-gap:0px; }
.bj-studio .gen-left{ display:flex; gap:10px; justify-content:center; align-items:flex-start; min-width:0; }
/* the stage is bounded by viewport height: banner+header+stepper+padding ≈ 235px */
.bj-studio #view-2 .version-strip,
.bj-studio #view-3 .version-strip{
  /* width must clear the thumb + its selection ring, or overflow-y:auto
     clips the right-hand highlight edge */
  flex-direction:column; flex-wrap:nowrap; flex:none; margin-top:0;
  width:88px; box-sizing:border-box; padding:5px 8px 5px 5px; align-items:flex-start;
  /* never taller than the frame beside it, however many versions exist */
  max-height:calc(var(--stage-size,60vh) + var(--dock-h,0px) + var(--dock-gap,0px) + 28px);
  overflow-y:auto; scrollbar-width:thin;
}
.bj-studio #view-2 .version-strip:empty,
.bj-studio #view-3 .version-strip:empty{ display:none; }
.bj-studio #view-2 .version-thumb,
.bj-studio #view-3 .version-thumb{ width:65px; height:65px; }
/* compact rail — every control visible without scrolling */
.bj-studio .gen-rail .panel-inner{ padding:14px 18px 16px; }
.bj-studio .gen-rail .brief-row{ padding:7px 0; font-size:12px; gap:16px; }
.bj-studio .gen-rail .brief-row b{ min-width:96px; }
.bj-studio .gen-rail .brief-row span{ padding-left:3px; min-width:0; }
.bj-studio .gen-rail .gen-cost-note{ padding:8px 0; margin-top:6px; font-size:11.5px; }
.bj-studio .gen-rail .gen-actions{ gap:8px; margin-top:10px; }
.bj-studio .gen-rail .gen-actions .btn{ padding:11px 14px; font-size:11px; letter-spacing:.2em; }
.bj-studio .gen-rail .result-meta{ margin-top:10px; padding-top:8px; }
.bj-studio .gen-rail .refine-box textarea{ min-height:64px; font-size:13px; }
.bj-studio .stage{
  background:#000; aspect-ratio:1; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--bj-hair);
}
.bj-studio .stage svg.result{ width:88%; height:88%; animation:bjs-reveal .8s ease; }
.bj-studio .stage img.result{ width:100%; height:100%; object-fit:cover; animation:bjs-reveal .8s ease; }
.bj-studio .stage--lifestyle{ background:var(--bj-imgbg); }
@keyframes bjs-reveal{ from{ opacity:0; transform:scale(.94);} to{ opacity:1; transform:none;} }
.bj-studio .stage-empty{ text-align:center; color:#6b6b6b; padding:30px; }
.bj-studio .stage-empty svg{ width:58px; height:58px; margin:0 auto 18px; color:#4a4a44; display:block; }
.bj-studio .stage-empty p{ font-family:var(--bj-serif); font-size:20px; color:#cfc7b6; margin:0; }
.bj-studio .stage-empty__sub{ display:block; margin-top:7px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#6b6b6b; }
/* progress overlay */
.bj-studio .gen-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.88); display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:40px; z-index:3;
}
.bj-studio .gen-overlay.is-visible{ display:flex; }
.bj-studio .spinner{
  width:52px; height:52px; border-radius:50%;
  border:2px solid rgba(205,185,138,.25); border-top-color:var(--bj-gold-lt);
  animation:bjs-spin 1s linear infinite;
}
@keyframes bjs-spin{ to{ transform:rotate(360deg);} }
.bj-studio .gen-stage-lbl{ color:#efe8da; font-family:var(--bj-serif); font-style:italic; font-size:19px; text-align:center; min-height:26px; }
.bj-studio .gen-bar{ width:min(320px,80%); height:2px; background:rgba(255,255,255,.14); }
.bj-studio .gen-bar i{ display:block; height:100%; width:0%; background:var(--bj-gold-lt); transition:width .45s ease; }
.bj-studio .gen-pct{ color:#9a968f; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; }
/* watermark chip on preview */
.bj-studio .stage-flag{
  position:absolute; top:0; left:0; z-index:2; background:var(--bj-gold); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; padding:6px 12px; display:none;
}
.bj-studio .stage-flag.is-visible{ display:block; }
.bj-studio .stage-flag--approved{ background:var(--bj-ok); }
/* Approval handoff — a short, visual full-stop on the proof before the
   ordering controls arrive. It overlays the existing stage, so it adds no
   height and cannot disturb the Studio's no-scroll viewport budget. */
.bj-studio .approval-handoff{
  position:absolute; inset:0; z-index:14; display:grid; place-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(6px) saturate(.92);
  backdrop-filter:blur(6px) saturate(.92);
  transition:opacity .24s ease,visibility .24s ease;
}
.bj-studio .approval-handoff.is-visible{ opacity:1; visibility:visible; }
.bj-studio .approval-handoff__card{
  width:min(350px,calc(100% - 36px)); min-height:94px;
  display:grid; grid-template-columns:58px minmax(0,1fr) 30px;
  align-items:center; gap:15px; padding:17px 19px;
  border:1px solid var(--bj-gold-lt); background:rgba(255,255,255,.96);
  box-shadow:0 22px 54px rgba(54,43,25,.16);
  transform:translateY(10px) scale(.96); opacity:0;
  transition:transform .42s cubic-bezier(.16,.8,.24,1),opacity .24s ease;
}
.bj-studio .approval-handoff.is-visible .approval-handoff__card{
  transform:translateY(0) scale(1); opacity:1;
}
.bj-studio .approval-handoff__check{ width:58px; height:58px; display:block; }
.bj-studio .approval-handoff__check svg{ width:100%; height:100%; overflow:visible; }
.bj-studio .approval-handoff__check circle{
  fill:rgba(165,138,82,.07); stroke:var(--bj-gold); stroke-width:1.35;
}
.bj-studio .approval-handoff__check path{
  fill:none; stroke:var(--bj-gold); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:30; stroke-dashoffset:30;
}
.bj-studio .approval-handoff.is-visible .approval-handoff__check path{
  animation:bjs-approval-check .42s .16s ease-out forwards;
}
@keyframes bjs-approval-check{ to{ stroke-dashoffset:0; } }
.bj-studio .approval-handoff__copy{ min-width:0; display:grid; gap:4px; }
.bj-studio .approval-handoff__copy b{
  font-family:var(--bj-serif); font-size:clamp(24px,2.5vw,30px);
  font-weight:600; line-height:1; color:var(--bj-ink);
}
.bj-studio .approval-handoff__copy small{
  font-family:var(--bj-sans); font-size:9px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bj-gold);
  white-space:nowrap;
}
.bj-studio .approval-handoff__arrow{
  width:28px; height:28px; border:1px solid var(--bj-gold-lt); border-radius:50%;
  display:grid; place-items:center; color:var(--bj-gold); font-size:15px;
}
.bj-studio .approval-handoff.is-visible .approval-handoff__arrow{
  animation:bjs-approval-arrow .7s .18s ease-in-out both;
}
@keyframes bjs-approval-arrow{
  0%,100%{ transform:translateX(0); }
  55%{ transform:translateX(4px); }
}
/* When the handoff ends, the order card receives the eye with one restrained
   lift. No callout or tutorial copy is needed—the controls themselves arrive. */
.bj-studio.is-order-arrival #view-3 .order-card{
  animation:bjs-order-arrival .82s cubic-bezier(.18,.75,.25,1) both;
}
@keyframes bjs-order-arrival{
  0%{ opacity:.45; transform:translateY(13px); border-color:var(--bj-gold-lt); box-shadow:0 20px 44px rgba(73,56,25,.13); }
  62%{ opacity:1; transform:translateY(0); border-color:var(--bj-gold); box-shadow:0 13px 30px rgba(73,56,25,.09); }
  100%{ opacity:1; transform:none; border-color:var(--bj-hair); box-shadow:none; }
}
@media (max-width:520px){
  .bj-studio .approval-handoff__card{
    grid-template-columns:48px minmax(0,1fr) 26px; gap:11px;
    width:calc(100% - 24px); min-height:82px; padding:14px;
  }
  .bj-studio .approval-handoff__check{ width:48px; height:48px; }
  .bj-studio .approval-handoff__copy b{ font-size:23px; }
  .bj-studio .approval-handoff__copy small{ font-size:8px; letter-spacing:.12em; }
  .bj-studio .approval-handoff__arrow{ width:25px; height:25px; }
}
@media (prefers-reduced-motion:reduce){
  .bj-studio .chat__approve.is-approved,
  .bj-studio .approval-handoff,
  .bj-studio .approval-handoff__card,
  .bj-studio .approval-handoff__check path,
  .bj-studio .approval-handoff__arrow,
  .bj-studio.is-order-arrival #view-3 .order-card{
    animation:none !important; transition:none !important;
  }
  .bj-studio .approval-handoff__check path{ stroke-dashoffset:0; }
}
/* version strip */
.bj-studio .version-strip{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; min-height:0; }
.bj-studio .version-thumb{
  width:72px; height:72px; background:#000; border:1px solid var(--bj-hair); cursor:pointer;
  position:relative; overflow:hidden; padding:0; opacity:.72;
  transition:border-color .2s, opacity .2s, box-shadow .2s;
}
.bj-studio .version-thumb:hover{ opacity:1; }
.bj-studio .version-thumb svg,
.bj-studio .version-thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .version-thumb.is-current{
  opacity:1; border:2px solid var(--bj-gold);
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--bj-gold-lt), 0 6px 16px rgba(165,138,82,.25);
}
.bj-studio .version-thumb.is-current .v-num{ background:var(--bj-gold); color:#fff; }
/* prominent live selected-version readout in the rail */
.bj-studio .rail-title-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.bj-studio .rail-version{
  display:inline-flex; align-items:baseline; gap:6px; flex:none;
  border:1px solid var(--bj-gold-lt); background:var(--bj-band); padding:5px 11px; margin-bottom:6px;
}
.bj-studio .rail-version:empty{ display:none; }
.bj-studio .rail-version b{ font-family:var(--bj-serif); font-size:15px; font-weight:600; color:var(--bj-ink); }
.bj-studio .rail-version span{ font-size:8.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bj-gold); }
.bj-studio .pdp-version{ font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--bj-gold); margin-top:4px; }
.bj-studio .version-thumb .v-num{
  position:absolute; bottom:0; right:0; background:rgba(0,0,0,.72); color:#cdb98a;
  font-size:9px; font-weight:700; padding:2px 6px; letter-spacing:.08em;
}
/* right rail */
.bj-studio .gen-rail .panel-inner{ padding:26px 28px 30px; }
.bj-studio .gen-cost-note{
  display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--bj-muted);
  padding:12px 0; border-top:1px solid var(--bj-hair); margin-top:16px;
}
.bj-studio .gen-cost-note b{ color:var(--bj-ink); }
.bj-studio .refine-box{ margin-top:20px; display:none; }
.bj-studio .refine-box.is-visible{ display:block; animation:bjs-fadeUp .3s ease; }
.bj-studio .refine-box textarea{ width:100%; min-height:84px; font-size:14px; }
.bj-studio .gen-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.bj-studio .result-meta{ margin-top:18px; border-top:1px solid var(--bj-hair); padding-top:16px; display:none; }
.bj-studio .result-meta.is-visible{ display:block; }
.bj-studio .result-meta .brief-row b{ min-width:104px; }
/* ============================ STEP 4 — APPROVE =========================== */
.bj-studio .approve-grid{ display:grid; grid-template-columns:1fr 420px; gap:34px; align-items:start; }
.bj-studio .order-card{ border:1px solid var(--bj-hair); padding:28px 30px; }
.bj-studio .order-card h3{ margin-bottom:16px; }
/* PDP-style order card (mirrors the live product page) */
.bj-studio .pdp-card{ padding:20px 26px 18px; }
.bj-studio .pdp-title-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:2px; }
.bj-studio .pdp-title{ font-size:clamp(24px,1.8vw,31px); margin:0; }
.bj-studio .pdp-price{ font-family:var(--bj-serif); font-size:24px; font-weight:500; }
.bj-studio .pdp-rule{ width:40px; height:1px; background:var(--bj-hair); margin:11px 0 12px; }
.bj-studio .pdp-lab{ font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-ink); display:block; margin:14px 0 8px; }
.bj-studio .metal-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.bj-studio .mp{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--bj-hair); background:#fff;
  padding:7px 12px; font-size:11.5px; font-weight:700; color:var(--bj-ink); transition:all .2s;
}
.bj-studio .mp i{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.bj-studio .mp:hover{ border-color:var(--bj-ink); }
.bj-studio .mp.is-active{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }
/* ═══════════ Bespoke dropdown — Brites language, theme mechanics ═══════════
   Trigger mirrors the theme's form fields (1px border, zero radius, chevron
   inset right); the panel borrows the theme's own dropdown behaviour — solid
   paper, no radius, 0 20px 20px rgba(0,0,0,.09) shadow, and the slide-down
   translate on open — so it feels native to britesjewelry.com rather than to
   the operating system. */
.bj-studio .bj-select{ position:relative; }
.bj-studio .bj-select__native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.bj-studio .bj-select__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--bj-hair); background:#fff; padding:11px 13px; cursor:pointer;
  font-family:var(--bj-sans); font-size:14.5px; color:var(--bj-ink); text-align:left;
  transition:border-color .18s, box-shadow .18s;
}
.bj-studio .bj-select__btn:hover{ border-color:#c9c5be; }
.bj-studio .bj-select__btn:focus-visible{ outline:none; border-color:var(--bj-ink); }
.bj-studio .bj-select.is-open .bj-select__btn{ border-color:var(--bj-ink); }
.bj-studio .bj-select__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bj-studio .bj-select__chev{ width:15px; height:15px; flex:none; color:var(--bj-muted); transition:transform .2s ease; }
.bj-studio .bj-select.is-open .bj-select__chev{ transform:rotate(180deg); color:var(--bj-ink); }
.bj-studio .bj-select__menu{
  position:absolute; left:0; right:0; top:calc(100% - 1px); z-index:20; margin:0; padding:5px 0;
  list-style:none; background:#fff; border:1px solid var(--bj-hair);
  box-shadow:0 20px 20px rgba(0,0,0,.09);
  transform:translate3d(0,-8px,0); opacity:0; visibility:hidden;
  transition:transform .22s cubic-bezier(.2,.06,.05,.95), opacity .18s ease, visibility .22s;
  max-height:min(320px,60vh); overflow-y:auto; scrollbar-width:thin;
}
.bj-studio .bj-select__menu[hidden]{ display:none; }
.bj-studio .bj-select.is-open .bj-select__menu{ transform:translateZ(0); opacity:1; visibility:visible; }
.bj-studio .bj-select__opt{
  display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer;
  font-size:14px; color:var(--bj-ink); line-height:1.35; transition:background .14s, color .14s;
}
.bj-studio .bj-select__opt:hover,
.bj-studio .bj-select__opt.is-focus{ background:var(--bj-ink); color:#fff; }
.bj-studio .bj-select__opt[aria-selected="true"]{ font-weight:700; }
.bj-studio .bj-select__tick{ width:13px; flex:none; color:var(--bj-gold); font-size:12px; line-height:1; }
.bj-studio .bj-select__opt:hover .bj-select__tick,
.bj-studio .bj-select__opt.is-focus .bj-select__tick{ color:var(--bj-gold-lt); }
.bj-studio #engraveBlock[hidden]{ display:none; }
.bj-studio .opt-row{
  display:flex; align-items:center; gap:11px; border:1px solid var(--bj-hair); background:var(--bj-band);
  padding:9px 13px; margin-top:9px; cursor:pointer; font-size:13.5px; color:var(--bj-ink);
  text-transform:none; letter-spacing:0; font-weight:400;
}
.bj-studio .opt-row span{ flex:1; }
.bj-studio .opt-row b{ font-size:12.5px; font-weight:700; color:var(--bj-muted); }
.bj-studio .opt-row input{ width:16px; height:16px; accent-color:var(--bj-gold); margin:0; }
.bj-studio .opt-row--sub{ margin-left:26px; margin-top:10px; }
/* Size: segmented chips with a true-proportion dot, so millimetres read
   physically at a glance instead of as abstract numbers. */
.bj-studio .size-live{ float:right; text-transform:none; letter-spacing:.02em; font-weight:700; color:var(--bj-gold); font-size:11px; }
.bj-studio .size-row{ display:flex; gap:6px; }
.bj-studio .size-opt{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  border:1px solid var(--bj-hair); background:#fff; padding:7px 2px 6px; position:relative;
  transition:all .18s; min-width:0;
}
.bj-studio .size-opt:hover{ border-color:var(--bj-ink); }
.bj-studio .size-opt.is-active{ border-color:var(--bj-ink); background:var(--bj-ink); }
.bj-studio .size-opt.is-active .size-mm,
.bj-studio .size-opt.is-active .size-delta{ color:#fff; }
.bj-studio .size-opt.is-active .size-dot{ background:var(--bj-gold-lt); border-color:var(--bj-gold-lt); }
.bj-studio .size-dot{
  border-radius:50%; background:var(--bj-imgbg); border:1px solid #d9d5ce; flex:none; transition:all .18s;
}
.bj-studio .size-mm{ font-size:11.5px; font-weight:700; color:var(--bj-ink); letter-spacing:.02em; line-height:1; }
.bj-studio .size-delta{ font-size:9px; color:var(--bj-muted); letter-spacing:.04em; line-height:1; min-height:9px; }
.bj-studio .size-opt .size-tag{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  background:var(--bj-gold); color:#fff; font-size:7.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:2px 6px; white-space:nowrap;
}
.bj-studio .one-size{
  display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 13px;
  border:1px solid var(--bj-hair); background:var(--bj-band);
  font-size:12.5px; color:var(--bj-muted);
}
.bj-studio .one-size b{ color:var(--bj-ink); font-weight:700; }
.bj-studio .one-size[hidden]{ display:none; }
.bj-studio #extenderBlock{ margin-top:13px; padding-top:11px; border-top:1px solid var(--bj-hair); }
.bj-studio .fee-rows{ margin-top:14px !important; }
.bj-studio .qty-cart{ margin-top:12px !important; }
.bj-studio .opt-row:has(input:disabled){ opacity:.45; cursor:not-allowed; }
.bj-studio .fee-rows{ margin-top:16px; border-top:1px solid var(--bj-hair); }
.bj-studio .qty-cart{ display:flex; gap:12px; margin-top:14px; }
.bj-studio .qty{ display:flex; align-items:center; border:1px solid var(--bj-hair); flex:none; }
.bj-studio .qty button{ background:none; border:none; font-size:18px; padding:8px 14px; color:var(--bj-ink); }
.bj-studio .qty button:hover{ background:var(--bj-band); }
.bj-studio .qty span{ min-width:26px; text-align:center; font-weight:700; font-size:14px; }
.bj-studio .pdp-cart{ flex:1; padding:12px 10px; font-size:12.5px; letter-spacing:.18em; }
.bj-studio .pdp-trust{ display:flex; gap:20px; margin-top:12px; }
.bj-studio .pdp-trust div{ flex:1; }
.bj-studio .pdp-trust b{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--bj-ink); }
.bj-studio .pdp-trust span{ font-size:10.5px; color:var(--bj-muted); }
.bj-studio .pdp-trust b{ font-size:10.5px; }
/* On a wide desktop the landing keeps its proportions but gains room: the
   copy column grows a little, the photograph a little more, and the bands
   still run edge to edge. */
/* On a very wide desktop the copy block gains a little room; the headline
   stays capped by its own clamp so it never breaks onto a second line. */
@media (min-width:1500px){
  .bj-studio .landing-hero__inner{ max-width:470px; }
}
.bj-studio .order-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--bj-hair); font-size:13.5px; }
.bj-studio .order-row:last-of-type{ border-bottom:none; }
.bj-studio .order-total{ font-family:var(--bj-serif); font-size:22px; font-weight:600; }
.bj-studio .approved-note{
  border:1px solid var(--bj-gold-lt); background:var(--bj-band); padding:14px 18px;
  font-size:12.5px; color:var(--bj-muted); line-height:1.7; margin-top:18px;
}
/* ============================ PRICING ==================================== */
.bj-studio .pricing-tabs{ display:flex; justify-content:center; gap:0; margin-bottom:30px; border-bottom:1px solid var(--bj-hair); }
.bj-studio .pricing-tab{
  background:none; border:none; padding:14px 26px; font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bj-muted); position:relative;
}
.bj-studio .pricing-tab.is-active{ color:var(--bj-ink); }
.bj-studio .pricing-tab.is-active:after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--bj-gold); }
.bj-studio .tier-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.bj-studio .tier{
  border:1px solid var(--bj-hair); background:#fff; padding:30px 26px 28px; text-align:center;
  position:relative; display:flex; flex-direction:column; transition:box-shadow .25s;
}
.bj-studio .tier:hover{ box-shadow:var(--bj-shadow); }
.bj-studio .tier.is-featured{ border-color:var(--bj-gold); }
.bj-studio .tier__flag{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--bj-gold); color:#fff; font-size:9px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; padding:5px 14px; white-space:nowrap;
}
.bj-studio .tier h3{ font-size:20px; margin-bottom:2px; }
.bj-studio .tier__tag{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bj-muted); margin-bottom:16px; }
.bj-studio .tier__price{ font-family:var(--bj-serif); font-size:40px; font-weight:500; line-height:1; }
.bj-studio .tier__price small{ font-size:14px; color:var(--bj-muted); font-family:var(--bj-sans); }
.bj-studio .tier__per{ font-size:11px; color:var(--bj-gold); font-weight:700; letter-spacing:.08em; margin-top:6px; }
.bj-studio .tier__feats{ list-style:none; margin:20px 0 24px; text-align:left; font-size:13px; color:#3c3a37; flex:1; }
.bj-studio .tier__feats li{ padding:7px 0 7px 22px; position:relative; border-bottom:1px solid #f2f0ec; line-height:1.55; }
.bj-studio .tier__feats li:before{ content:"—"; position:absolute; left:0; color:var(--bj-gold); }
.bj-studio .tier .btn{ width:100%; padding:13px 10px; font-size:11px; letter-spacing:.24em; }
.bj-studio .pricing-foot{ text-align:center; font-size:12px; color:var(--bj-muted); margin-top:22px; line-height:1.8; }
/* ============================ STUDIO GUIDE / FAQ ==========================
   One editorial band, one scannable answer column. The old full-width panel
   repeated the theme's default accordion treatment at billboard scale; this
   uses the same warm paper, serif hierarchy, gold linework and subtle lift as
   the landing and Proof Room. The question button owns the complete row, not
   just its icon, and the answer opens through a grid row so dynamic CONFIG
   copy never needs a guessed max-height.                                      */
.bj-studio .studio-faq{
  position:relative; overflow:hidden; margin-top:clamp(46px,5vw,74px);
  background:
    radial-gradient(circle at 10% 6%,rgba(184,135,62,.09),transparent 28%),
    linear-gradient(135deg,var(--ls-band) 0%,var(--ls-band-3) 58%,#fff 100%);
  border-top:1px solid var(--ls-hair); border-bottom:1px solid var(--ls-hair);
}
.bj-studio .studio-faq:before{
  content:""; position:absolute; top:0; left:clamp(24px,6vw,90px); width:88px; height:2px;
  background:var(--ls-gold); opacity:.9;
}
.bj-studio .studio-faq__inner{
  position:relative; z-index:1; width:min(1440px,100%); margin:0 auto;
  display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
}
.bj-studio .studio-faq__intro{
  padding:clamp(48px,5.6vw,82px) clamp(32px,5vw,76px);
  border-right:1px solid var(--ls-hair); min-width:0;
}
.bj-studio .studio-faq__title{
  margin:16px 0 18px; font-family:var(--bj-serif); font-weight:400;
  font-size:clamp(38px,4.2vw,60px); line-height:.96; letter-spacing:0;
  color:var(--ls-ink); text-transform:none;
}
.bj-studio .studio-faq__title em{ color:var(--ls-gold); font-weight:400; }
.bj-studio .studio-faq__lede{
  max-width:390px; font-size:15px; line-height:1.8; color:var(--ls-muted);
}
.bj-studio .studio-faq__promises{
  list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--ls-gold-lt);
}
.bj-studio .studio-faq__promises li{
  display:flex; align-items:center; gap:14px; min-height:66px;
  padding:11px 0; border-bottom:1px solid var(--ls-hair);
}
.bj-studio .studio-faq__promises i{
  width:29px; height:29px; border:1px solid var(--ls-gold-lt); border-radius:50%;
  display:grid; place-items:center; flex:none; font-style:normal;
  font-size:8.5px; font-weight:700; letter-spacing:.08em; color:var(--ls-gold);
  background:rgba(255,255,255,.72);
}
.bj-studio .studio-faq__promises span{ display:grid; gap:2px; min-width:0; }
.bj-studio .studio-faq__promises b{
  font-family:var(--bj-serif); font-size:16.5px; font-weight:600; line-height:1.2;
  color:var(--ls-ink);
}
.bj-studio .studio-faq__promises small{ font-size:11.5px; line-height:1.45; color:var(--ls-muted); }
.bj-studio .faq-toggle-all{
  margin-top:28px; min-height:45px; padding:0 15px 0 17px;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  border:1px solid var(--ls-gold); background:transparent; color:var(--ls-gold);
  font-family:var(--bj-sans); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  transition:background-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.bj-studio .faq-toggle-all:hover{
  background:var(--ls-gold); color:#fff; transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(122,92,36,.16);
}
.bj-studio .faq-toggle-all:focus-visible{ outline:2px solid var(--ls-gold); outline-offset:3px; }
.bj-studio .faq-toggle-all__mark{
  position:relative; width:19px; height:19px; border:1px solid currentColor; border-radius:50%; flex:none;
}
.bj-studio .faq-toggle-all__mark:before,
.bj-studio .faq-toggle-all__mark:after,
.bj-studio .faq-q__toggle:before,
.bj-studio .faq-q__toggle:after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .28s ease,opacity .28s ease;
}
.bj-studio .faq-toggle-all__mark:before{ width:8px; height:1px; }
.bj-studio .faq-toggle-all__mark:after{ width:1px; height:8px; }
.bj-studio .faq-toggle-all[aria-pressed="true"] .faq-toggle-all__mark:after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.bj-studio .studio-faq__content{
  min-width:0; padding:clamp(32px,4.2vw,60px) clamp(24px,4.8vw,70px) clamp(44px,5.4vw,76px);
  background:rgba(255,255,255,.64);
}
.bj-studio .studio-faq__topline{
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font-size:9.5px; font-weight:700; letter-spacing:.23em; text-transform:uppercase;
  color:var(--ls-gold);
}
.bj-studio .studio-faq__topline i{ height:1px; background:var(--ls-gold-lt); flex:1; }
.bj-studio .studio-faq__topline em{ font-style:normal; color:#9b958b; white-space:nowrap; }
.bj-studio .faq-list{ display:grid; gap:10px; }
.bj-studio .faq-item{
  border:1px solid var(--ls-hair); background:rgba(255,255,255,.88);
  transition:border-color .25s ease,box-shadow .3s ease,transform .25s ease,background-color .25s ease;
}
.bj-studio .faq-item:hover{ border-color:#d8c59f; transform:translateY(-1px); }
.bj-studio .faq-item.is-open{
  background:#fff; border-color:var(--ls-gold-lt);
  box-shadow:0 16px 34px rgba(47,38,26,.075); transform:none;
}
.bj-studio .faq-title{ margin:0; font:inherit; }
.bj-studio .faq-q{
  width:100%; min-height:86px; margin:0; padding:18px 20px;
  display:grid; grid-template-columns:42px minmax(0,1fr) 36px; align-items:center; gap:14px;
  background:none; border:0; color:var(--ls-ink); text-align:left; text-transform:none;
}
.bj-studio .faq-q__num{
  width:36px; height:36px; border:1px solid var(--ls-hair); border-radius:50%;
  display:grid; place-items:center; font-family:var(--bj-sans); font-size:9px;
  font-weight:700; letter-spacing:.12em; color:#9b958b; background:var(--ls-band-3);
  transition:border-color .25s ease,color .25s ease,background-color .25s ease;
}
.bj-studio .faq-item.is-open .faq-q__num{
  border-color:var(--ls-gold); background:var(--ls-gold); color:#fff;
}
.bj-studio .faq-q__copy{ display:grid; gap:4px; min-width:0; }
.bj-studio .faq-q__tag{
  font-family:var(--bj-sans); font-size:9px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ls-gold);
}
.bj-studio .faq-q__text{
  font-family:var(--bj-serif); font-size:clamp(18px,1.7vw,23px); font-weight:600;
  line-height:1.24; letter-spacing:.005em; color:var(--ls-ink);
}
.bj-studio .faq-q__toggle{
  position:relative; width:34px; height:34px; border:1px solid var(--ls-hair); border-radius:50%;
  color:var(--ls-gold); background:#fff; justify-self:end;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease,transform .3s ease;
}
.bj-studio .faq-q__toggle:before{ width:10px; height:1.5px; }
.bj-studio .faq-q__toggle:after{ width:1.5px; height:10px; }
.bj-studio .faq-item.is-open .faq-q__toggle{
  border-color:var(--ls-gold); background:var(--ls-gold); color:#fff; transform:rotate(180deg);
}
.bj-studio .faq-item.is-open .faq-q__toggle:after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.bj-studio .faq-q:focus-visible{ outline:2px solid var(--ls-gold); outline-offset:-3px; }
.bj-studio .faq-a{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1),opacity .25s ease;
}
.bj-studio .faq-a__inner{ min-height:0; overflow:hidden; }
.bj-studio .faq-a p{
  margin:0; padding:0 70px 24px 76px; max-width:760px;
  font-size:14px; color:#514d47; line-height:1.82;
  transform:translateY(-6px); transition:transform .34s cubic-bezier(.2,.7,.2,1);
}
.bj-studio .faq-item.is-open .faq-a{ grid-template-rows:1fr; opacity:1; }
.bj-studio .faq-item.is-open .faq-a p{ transform:translateY(0); }
@media (max-width:900px){
  .bj-studio .studio-faq__inner{ grid-template-columns:1fr; }
  .bj-studio .studio-faq__intro{ border-right:0; border-bottom:1px solid var(--ls-hair); }
  .bj-studio .studio-faq__title br{ display:none; }
  .bj-studio .studio-faq__lede{ max-width:580px; }
  .bj-studio .studio-faq__promises{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
  .bj-studio .studio-faq__promises li{ align-items:flex-start; padding:14px 14px 14px 0; border-right:1px solid var(--ls-hair); }
  .bj-studio .studio-faq__promises li:last-child{ border-right:0; padding-right:0; padding-left:14px; }
  .bj-studio .studio-faq__promises li:nth-child(2){ padding-left:14px; }
}
@media (max-width:620px){
  .bj-studio .studio-faq__intro{ padding:44px 20px 38px; }
  .bj-studio .studio-faq__title{ font-size:40px; }
  .bj-studio .studio-faq__promises{ grid-template-columns:1fr; }
  .bj-studio .studio-faq__promises li,
  .bj-studio .studio-faq__promises li:nth-child(2),
  .bj-studio .studio-faq__promises li:last-child{
    padding:11px 0; border-right:0;
  }
  .bj-studio .studio-faq__content{ padding:28px 14px 42px; }
  .bj-studio .studio-faq__topline em{ display:none; }
  .bj-studio .faq-q{ min-height:82px; grid-template-columns:33px minmax(0,1fr) 31px; gap:10px; padding:15px 13px; }
  .bj-studio .faq-q__num{ width:31px; height:31px; }
  .bj-studio .faq-q__toggle{ width:30px; height:30px; }
  .bj-studio .faq-q__text{ font-size:18px; }
  .bj-studio .faq-a p{ padding:0 48px 21px 56px; font-size:13.5px; line-height:1.72; }
  .bj-studio .faq-toggle-all{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .bj-studio .faq-item,
  .bj-studio .faq-a,
  .bj-studio .faq-a p,
  .bj-studio .faq-q__toggle,
  .bj-studio .faq-toggle-all,
  .bj-studio .faq-toggle-all__mark:before,
  .bj-studio .faq-toggle-all__mark:after,
  .bj-studio .faq-q__toggle:before,
  .bj-studio .faq-q__toggle:after{ transition:none !important; }
}
/* ============================ MODALS ===================================== */
.bj-studio .modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; }
.bj-studio .modal.is-open{ display:flex; }
.bj-studio .modal__scrim{ position:absolute; inset:0; background:rgba(17,17,17,.55); animation:bjs-fadeIn .25s ease; }
@keyframes bjs-fadeIn{ from{opacity:0;} to{opacity:1;} }
.bj-studio .modal__inner{
  position:relative; background:#fff; box-shadow:var(--bj-shadow-lg); border-radius:0;
  width:min(980px,100%); max-height:92vh; overflow-y:auto; animation:bjs-fadeUp .35s ease;
}
.bj-studio .modal__inner--narrow{ width:min(460px,100%); }
.bj-studio .modal .tier-grid{ grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
.bj-studio .modal__close{
  position:absolute; top:10px; right:10px; background:none; border:none; font-size:26px;
  color:var(--bj-muted); padding:8px 12px; z-index:2;
}
.bj-studio .modal__close:hover{ color:var(--bj-ink); }
.bj-studio .modal__body{ padding:44px 46px 46px; }
/* auth */
/* ========================= NAME THIS DESIGN ==============================
   The smallest modal in the studio, and it should stay that way: one field,
   pre-filled and pre-selected, so the whole thing answers to a single Enter.
   It borrows the auth box's centred head so the two dialogs read as siblings
   rather than as two different products.                                  */
/* ── ABOVE THE EDITOR, NOT UNDER IT ────────────────────────────────────
   Every .modal in the studio is z-index:100, so which one wins is decided by
   document order — and #markupModal sits after #nameModal in the section.
   That is why the naming prompt was invisible on the way into the sketchpad
   and appeared on the way out: it had been open the whole time, behind it.
   This dialog is asked FROM other surfaces, so it outranks them. */
.bj-studio .modal--name{ z-index:120; }
.bj-studio .name-box .bj-eyebrow{ text-align:center; display:block; margin-bottom:8px; }
.bj-studio .name-box h2{
  text-align:center; position:relative; padding-bottom:18px; margin-bottom:8px; font-size:28px;
}
.bj-studio .name-box h2:after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:44px; height:1px; background:var(--bj-gold);
}
.bj-studio .name-box .sub{
  font-size:13px; color:var(--bj-muted); text-align:center; margin-bottom:24px; line-height:1.7;
}
.bj-studio .name-box .bj-label{ margin-bottom:8px; }
.bj-studio .name-field{ position:relative; display:block; }
.bj-studio .name-field input{
  width:100%; padding:15px 62px 15px 16px;
  font-family:var(--bj-serif); font-weight:600; font-size:19px; letter-spacing:.01em;
  color:var(--bj-ink);
}
.bj-studio .name-field input::placeholder{ color:#c6bfb2; font-weight:400; }
.bj-studio .name-field__count{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--bj-sans); font-size:11px; letter-spacing:.08em; color:#b3aca0;
  pointer-events:none;
}
.bj-studio .name-hint{
  margin-top:10px; font-family:var(--bj-sans); font-size:12px; color:var(--bj-muted);
  text-align:center; letter-spacing:.02em;
}
.bj-studio .name-hint.is-warn{ color:var(--bj-err,#a33); }
.bj-studio .name-actions{ display:flex; align-items:center; gap:10px; margin-top:24px; }
.bj-studio .name-actions .btn{ flex:1 1 auto; padding:15px 18px; }
.bj-studio .name-actions .btn--ghost{
  flex:0 0 auto; border:1px solid var(--bj-hair); color:var(--bj-muted);
  letter-spacing:.18em; font-size:11px; padding:15px 20px;
}
.bj-studio .name-actions .btn--ghost:hover{ border-color:var(--bj-ink); color:var(--bj-ink); background:transparent; }

/* ── THE NAME CHIP IN THE RAIL IS GONE ──────────────────────────────────
   .crumb-name and .markup__name both lived here. The rail's copy put the
   design's name out at the far right of a full-width bar — the "Custom
   upload — custom" nobody asked for — and the toolbar's copy shunted the
   controls beside it. Both are removed; the name lives in ONE place now,
   at the top of the editor's File menu, with Rename directly under it.
   (See .mk-file__id.) */
@media (max-width:620px){
  .bj-studio .name-actions{ flex-wrap:wrap; }
}

.bj-studio .auth-box .bj-eyebrow{ text-align:center; display:block; margin-bottom:8px; }
.bj-studio .auth-box h2{ text-align:center; position:relative; padding-bottom:18px; margin-bottom:8px; font-size:28px; }
.bj-studio .auth-box h2:after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:44px; height:1px; background:var(--bj-gold); }
.bj-studio .auth-box .sub{ font-size:13px; color:var(--bj-muted); text-align:center; margin-bottom:22px; line-height:1.7; }
.bj-studio .auth-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid var(--bj-ink); background:#fff; padding:13px; font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; transition:background .2s;
}
.bj-studio .auth-google:hover{ background:var(--bj-band); }
.bj-studio .auth-div{ display:flex; align-items:center; gap:14px; margin:20px 0; color:var(--bj-muted); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; }
.bj-studio .auth-div:before,
.bj-studio .auth-div:after{ content:""; flex:1; height:1px; background:var(--bj-hair); }
.bj-studio .auth-box input{ width:100%; margin-bottom:12px; }
.bj-studio .auth-box .btn{ width:100%; margin-top:4px; }
.bj-studio .auth-perk{
  margin-top:18px; border:1px solid var(--bj-gold-lt); background:var(--bj-band);
  padding:12px 16px; font-size:12.5px; color:var(--bj-muted); text-align:center;
}
.bj-studio .auth-perk b{ color:var(--bj-gold); }
/* ── email verification: expands vertically out of the sign-up card ── */
.bj-studio .verify-stage{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .55s cubic-bezier(.22,.8,.3,1), opacity .35s ease .12s;
}
.bj-studio .verify-stage.is-open{ max-height:560px; opacity:1; }
.bj-studio .verify-inner{ padding-top:4px; }
.bj-studio .verify-rule{ height:1px; background:var(--bj-hair); margin:22px 0 20px; }
.bj-studio .verify-head{ display:flex; gap:13px; align-items:flex-start; text-align:left; margin-bottom:18px; }
.bj-studio .verify-ico{ width:26px; height:26px; color:var(--bj-gold); flex:none; margin-top:2px; }
.bj-studio .verify-title{ font-family:var(--bj-serif); font-size:21px; font-weight:600; line-height:1.2; }
.bj-studio .verify-sub{ font-size:12.5px; color:var(--bj-muted); margin-top:3px; line-height:1.6; }
.bj-studio .verify-sub b{ color:var(--bj-ink); }
.bj-studio .code-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 0 14px; }
.bj-studio .code-box{
  width:46px; height:56px; text-align:center; padding:0;
  font-family:var(--bj-sans); font-size:22px; font-weight:700; color:var(--bj-ink);
  border:1px solid #c9c5be; background:#fff; transition:all .18s;
}
.bj-studio .code-box:focus{ border-color:var(--bj-gold); box-shadow:0 0 0 2px rgba(165,138,82,.16); outline:none; }
.bj-studio .code-box.is-filled{ border-color:var(--bj-ink); background:var(--bj-band); }
.bj-studio .code-row.is-error .code-box{ border-color:var(--bj-err); }
.bj-studio .code-row.is-ok .code-box{ border-color:var(--bj-ok); background:#f4f9f5; }
@keyframes bjs-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.bj-studio .code-row.is-error{ animation:bjs-shake .38s ease; }
.bj-studio .code-sep{ width:12px; height:1px; background:var(--bj-hair); flex:none; }
.bj-studio .verify-msg{ min-height:18px; font-size:12px; text-align:center; margin-bottom:10px; }
.bj-studio .verify-msg.err{ color:var(--bj-err); }
.bj-studio .verify-msg.ok{ color:var(--bj-ok); font-weight:700; }
.bj-studio .verify-msg.info{ color:var(--bj-muted); }
.bj-studio .verify-foot{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.bj-studio .verify-foot .btn{ font-size:10px; letter-spacing:.14em; padding:8px 10px; white-space:nowrap; }
.bj-studio .verify-foot .btn[disabled]{ opacity:.4; }
.bj-studio .verify-note{ text-align:center; font-size:10.5px; letter-spacing:.1em; color:#9a968f; margin-top:12px; }
/* collapse the sign-up inputs while verifying, so the card stays compact */
.bj-studio .auth-box.is-verifying #authEmail,
.bj-studio .auth-box.is-verifying #authPass,
.bj-studio .auth-box.is-verifying #authGoBtn,
.bj-studio .auth-box.is-verifying .auth-google,
.bj-studio .auth-box.is-verifying .auth-div,
.bj-studio .auth-box.is-verifying .auth-perk{ display:none; }
.bj-studio .auth-box.is-verifying .sub{ margin-bottom:0; }
.bj-studio .auth-box.is-verifying .verify-rule{ margin:18px 0 18px; }
/* my designs drawer */
.bj-studio .drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:#fff; z-index:110;
  border-left:1px solid var(--bj-hair); box-shadow:var(--bj-shadow-lg);
  transform:translateX(102%); transition:transform .4s cubic-bezier(.22,.8,.3,1);
  display:flex; flex-direction:column;
}
.bj-studio .drawer.is-open{ transform:none; }
.bj-studio .drawer__head{ padding:22px 26px; border-bottom:1px solid var(--bj-hair); display:flex; justify-content:space-between; align-items:center; }
/* .drawer__head h3 sizing removed — .studio-panel__title now owns both panel heads */
.bj-studio .drawer__body{ flex:1; overflow-y:auto; padding:20px 26px; }
.bj-studio .saved-item{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #f2f0ec; align-items:center; }
.bj-studio .saved-item .thumb{ width:64px; height:64px; background:#000; border:1px solid var(--bj-hair); flex:none; overflow:hidden; }
.bj-studio .saved-item .thumb svg,
.bj-studio .saved-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .saved-item .nm{ font-family:var(--bj-serif); font-weight:600; font-size:15.5px; line-height:1.3; }
.bj-studio .saved-item .st{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bj-muted); margin-top:3px; }
.bj-studio .saved-item .st.ok{ color:var(--bj-ok); }
.bj-studio .drawer-empty{ text-align:center; color:var(--bj-muted); font-size:13px; padding:60px 20px; line-height:1.8; }
/* ==================== SESSION VIEW (My designs → full context) =========== */
.bj-studio .saved-item{ cursor:pointer; transition:background .15s; }
/* .saved-item:hover tint removed — saved rows now hover in the menu's row language */
.bj-studio .saved-item .open-hint{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--bj-gold); white-space:nowrap; }
.bj-studio .sv-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:start; }
.bj-studio .sv-stage{ background:#000; aspect-ratio:1; border:1px solid var(--bj-hair); position:relative; overflow:hidden; }
.bj-studio .sv-stage svg,
.bj-studio .sv-stage img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .sv-stage .stage-flag{ display:block; }
.bj-studio .sv-versions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.bj-studio .sv-context .ctx-block{ border:1px solid var(--bj-hair); padding:14px 16px; margin-bottom:14px; background:#fff; }
.bj-studio .sv-context .ctx-block > label{ margin-bottom:10px; }
.bj-studio .ctx-ref{ display:flex; gap:12px; align-items:center; }
.bj-studio .ctx-ref .thumb{ width:58px; height:58px; background:#000; border:1px solid var(--bj-hair); flex:none; overflow:hidden; }
.bj-studio .ctx-ref .thumb svg,
.bj-studio .ctx-ref .thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .ctx-ref .nm{ font-family:var(--bj-serif); font-weight:600; font-size:15.5px; line-height:1.3; }
/* timeline of queries / events */
.bj-studio .timeline{ max-height:300px; overflow-y:auto; padding-right:6px; }
.bj-studio .tl-item{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid #f2f0ec; align-items:flex-start; }
.bj-studio .tl-item:last-child{ border-bottom:none; }
.bj-studio .tl-ico{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--bj-gold-lt); color:var(--bj-gold);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; background:#fff; margin-top:1px;
}
.bj-studio .tl-body{ flex:1; min-width:0; }
.bj-studio .tl-txt{ font-size:12.5px; color:#3c3a37; line-height:1.55; }
.bj-studio .tl-txt i{ color:var(--bj-muted); }
.bj-studio .tl-time{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#9a968f; margin-top:2px; }
.bj-studio .tl-thumb{ width:44px; height:44px; background:#000; border:1px solid var(--bj-hair); flex:none; overflow:hidden; }
.bj-studio .tl-thumb svg,
.bj-studio .tl-thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .sv-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.bj-studio .sv-actions .btn{ flex:1; }
.bj-studio .status-chip{ display:inline-block; font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:4px 10px; border:1px solid var(--bj-hair); color:var(--bj-muted); }
.bj-studio .status-chip--approved{ border-color:var(--bj-ok); color:var(--bj-ok); }
.bj-studio .status-chip--ordered{ border-color:var(--bj-gold); color:var(--bj-gold); }
@media (max-width:960px){
.bj-studio .sv-grid{ grid-template-columns:1fr; }
}
/* toasts */
.bj-studio .toast-stack{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; }
.bj-studio .toast{
  background:var(--bj-ink); color:#fff; font-size:12.5px; letter-spacing:.04em;
  padding:13px 24px; box-shadow:var(--bj-shadow); animation:bjs-toastIn .35s ease; display:flex; gap:10px; align-items:center;
  max-width:min(520px,90vw); text-align:center;
}
.bj-studio .toast--gold{ background:var(--bj-gold); }
.bj-studio .toast--err{ background:var(--bj-err); }
@keyframes bjs-toastIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.bj-studio .toast.out{ opacity:0; transition:opacity .4s; }
/* footer */
/* ==================== VISUAL-FIRST ADDITIONS ============================= */
/* hero: custom editorial image generated from exact Brites product references */
/* long, narrow editorial strip: the banner reads at a glance without pushing
   the invitation below the fold */
.bj-studio .hero-show{ display:block; max-width:1500px; margin:14px auto 0; }
.bj-studio .hero-story{
  position:relative; width:100%; aspect-ratio:3/1; overflow:hidden; background:var(--bj-band);
  border:1px solid var(--bj-hair); box-shadow:0 18px 44px rgba(28,29,29,.11);
}
.bj-studio .hero-story img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .hs-pair{ display:flex; align-items:center; gap:12px; }
.bj-studio .hs-before{
  width:112px; height:112px; background:#fff; border:1px solid var(--bj-hair);
  box-shadow:0 10px 26px rgba(28,29,29,.08); padding:9px 9px 20px; transform:rotate(-2.5deg);
}
.bj-studio .hs-before .sk{ width:100%; height:100%; background:var(--bj-band); }
.bj-studio .hs-before .sk svg{ width:100%; height:100%; }
.bj-studio .hs-arrow{ color:var(--bj-gold); flex:none; }
.bj-studio .hs-after{ width:112px; height:112px; border:1px solid var(--bj-hair); overflow:hidden; transform:rotate(1.5deg); box-shadow:0 10px 26px rgba(28,29,29,.12); }
.bj-studio .hs-after svg{ width:100%; height:100%; }
/* pictogram start cards */
.bj-studio .start-card{ padding:22px 18px 20px; }
.bj-studio .start-card .picto{ display:block; width:min(100%,260px); aspect-ratio:4/3; height:auto; margin:0 auto 16px; overflow:hidden; background:var(--bj-band); border:1px solid var(--bj-hair); }
.bj-studio .start-card .picto > svg,
.bj-studio .start-card .picto > img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .start-card h3{ font-size:19px; margin-bottom:0; }
/* visual brief */
.bj-studio .vbrief-row{ display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:16px 0 18px; }
.bj-studio .vb-item{ display:flex; flex-direction:column; align-items:center; flex:none; }
.bj-studio .vb-cap{
  font-size:7.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bj-muted); margin-top:6px; text-align:center; line-height:1.3; max-width:86px;
}
.bj-studio .vb-item.is-set .vb-cap{ color:var(--bj-gold); }
.bj-studio .vb-join{ color:var(--bj-gold); flex:none; margin-top:32px; }
.bj-studio .vb-join--plus{ font-size:17px; font-weight:700; line-height:1; margin-top:30px; }
.bj-studio .vb-tile{ width:84px; height:84px; border:1px solid var(--bj-hair); background:#000; overflow:hidden; flex:none; position:relative; }
.bj-studio .vb-tile svg,
.bj-studio .vb-tile img{ width:100%; height:100%; object-fit:cover; }
/* catalog product shots are lifestyle photos — zoom small tiles toward the
   charm so the chosen design reads instantly as chosen */
.bj-studio .vb-tile--design{ background:var(--bj-imgbg); }
.bj-studio .vb-tile--design:before{
  content:"✓"; position:absolute; top:0; left:0; z-index:2; background:var(--bj-gold);
  color:#fff; font-size:9px; font-weight:700; padding:1px 6px 2px;
}
.bj-studio .zoom-charm img{ transform:scale(1.9); transform-origin:50% 55%; }
.bj-studio .ref-strip__thumb.zoom-charm img{ transform:scale(1.9); transform-origin:50% 55%; }
/* optional add-photo control (visible when starting from an existing design) */
.bj-studio .addphoto{
  display:flex; align-items:center; gap:12px; border:1px dashed #c9c5be; background:var(--bj-band);
  padding:12px 16px; cursor:pointer; transition:border-color .2s, background .2s;
}
.bj-studio .addphoto:hover{ border-color:var(--bj-gold); background:#fdfaf4; }
.bj-studio .addphoto svg{ width:26px; height:26px; color:var(--bj-gold); flex:none; }
.bj-studio .addphoto span{ font-size:12.5px; color:var(--bj-muted); }
.bj-studio .addphoto-set{ display:flex; align-items:center; gap:12px; border:1px solid var(--bj-gold-lt); background:var(--bj-band); padding:10px 14px; }
.bj-studio .addphoto-set .thumb{ width:46px; height:46px; border:1px solid var(--bj-hair); overflow:hidden; flex:none; background:#fff; }
.bj-studio .addphoto-set .thumb img{ width:100%; height:100%; object-fit:cover; }
.bj-studio .addphoto-set .nm{ flex:1; font-size:12.5px; color:#3c3a37; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bj-studio .addphoto-set .rm{ background:none; border:none; color:var(--bj-muted); font-size:18px; padding:4px 8px; }
.bj-studio .addphoto-set .rm:hover{ color:var(--bj-err); }
.bj-studio .vb-tile--paper{ background:var(--bj-band); display:flex; align-items:center; justify-content:center; }
.bj-studio .vb-tile--paper .vb-words{
  font-family:var(--bj-serif); font-style:italic; font-size:9.5px; color:#3c3a37; line-height:1.4;
  padding:7px; text-align:center; overflow:hidden; max-height:100%;
}
.bj-studio .vb-tile--paper .vb-pen{ width:26px; height:26px; color:#c9c5be; }
.bj-studio .vb-tile--q{ background:#000; display:flex; align-items:center; justify-content:center; }
.bj-studio .vb-tile--q span{ font-family:var(--bj-serif); font-size:34px; color:var(--bj-gold-lt); }
.bj-studio .vb-arrow{ color:var(--bj-gold); flex:none; }
.bj-studio .spec-icons{ display:flex; justify-content:space-between; gap:6px; border-top:1px solid var(--bj-hair); padding-top:16px; }
.bj-studio .spec-ic{ text-align:center; flex:1; }
.bj-studio .spec-ic svg{ width:30px; height:30px; margin:0 auto 6px; color:var(--bj-gold); display:block; }
.bj-studio .spec-ic span{ font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bj-muted); display:block; line-height:1.4; }
/* trust icon row (step 4) */
.bj-studio .trust-row{ display:flex; justify-content:space-around; gap:8px; border:1px solid var(--bj-hair); background:var(--bj-band); padding:16px 10px; margin-top:18px; }
.bj-studio .trust-ic{ text-align:center; }
.bj-studio .trust-ic svg{ width:26px; height:26px; margin:0 auto 6px; color:var(--bj-gold); display:block; }
.bj-studio .trust-ic span{ font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bj-muted); }
@media (max-width:960px){
.bj-studio .hero-show{ max-width:760px; }
}
/* responsive */
@media (max-width:960px){
.bj-studio .describe-grid,
.bj-studio .gen-grid,
.bj-studio .approve-grid{ grid-template-columns:1fr; }
.bj-studio .gen-left{ flex-direction:column-reverse; align-items:stretch; }
.bj-studio #view-3 .stage{ width:min(100%, 56vh); margin-inline:auto; }
.bj-studio #view-3 .version-strip{ flex-direction:row; flex-wrap:wrap; width:100%; max-height:none; }
.bj-studio .start-grid{ grid-template-columns:1fr; }
.bj-studio .brief-card{ position:static; }
.bj-studio .modal__body{ padding:32px 24px; }
}
@media (max-width:640px){
.bj-studio .stepper .step{ width:56px; gap:5px; }
.bj-studio .stepper .step__num{ width:22px; height:22px; font-size:11px; border-width:1.2px; }
.bj-studio .stepper .step__lbl{ font-size:7.5px; letter-spacing:.1em; }
.bj-studio .stepper .step__sub{ display:none; }
.bj-studio .step-sep{ margin-top:10px; min-width:10px; }
.bj-studio.is-designing .stepper-wrap{ top:66px; }
.bj-studio .panel--pad{ padding:24px 18px 28px; }
.bj-studio .credit-meter__lbl{ display:none; }
.bj-studio .credit-meter{ padding-right:16px; }
.bj-studio .header-links{ gap:18px; padding:0 18px; }
}

/* ═══════════════════ PORT LAYER — theme integration only ═══════════════════
   Everything above this line is the prototype's own stylesheet, transplanted
   verbatim and scoped under .bj-studio. Everything below exists ONLY because
   the studio now lives inside britesjewelry.com rather than in a standalone
   file: studio-only tokens the theme doesn't define, the studio bar that
   replaces the prototype's inline header, and the chrome budget that keeps
   every step no-scroll under the theme's taller fixed header.
   ========================================================================= */

.bj-studio{
  /* the four tokens brites-design-language.css does NOT define. Every other
     --bj-* comes from the theme stylesheet, which loads last in theme.liquid,
     so nothing here can drift from the rest of the site. */
  --bj-shadow:0 18px 44px rgba(28,29,29,.10);
  --bj-shadow-lg:0 30px 90px rgba(0,0,0,.35);
  --bj-ok:#3e7a4e;
  --bj-err:#b00020;

  /* Fixed chrome above the studio: announcement bar + header (both measured
     onto :root by sections/footer.liquid) + our own studio bar (measured in
     the studio IIFE). Every sticky offset and height budget below derives
     from this ONE number, so the wizard stays no-scroll whatever the header
     measures on the day. */
  --bj-studiobar-h:0px;   /* the sticky bar is gone; the menu floats */
  --bj-chrome:calc(var(--bj-announce-h, 0px) + var(--bj-header-h, 92px) + var(--bj-studiobar-h, 0px));
}

/* ── Narrow viewports, stepper rail ───────────────────────────────────────
   Back / Next keep their labels at 640px and below; the rail tightens around
   them instead, which is what keeps the step navigation inside a 390px
   viewport. (These lived in the old studio-bar block and outlived it.) */
@media (max-width:640px){
  .bj-studio .stepper-nav-row{ gap:8px; }
  .bj-studio .nav-arrow{ padding:9px 10px; font-size:9px; letter-spacing:.12em; gap:6px; }
}

/* ── Chrome budget ─────────────────────────────────────────────────────────
   The prototype measured against a 66px inline header. The theme's header is
   fixed, taller and self-measuring, so the three viewport budgets that made
   every step fit without scrolling are re-expressed against --bj-chrome.
   Declared after the ported block so they win on document order. */
.bj-studio.is-designing .stepper-wrap{ top:var(--bj-chrome); }
.bj-studio .inspire-panel{ min-height:calc(100vh - var(--bj-chrome) - 93px); }
.bj-studio .describe-grid--v2{ min-height:calc(100vh - var(--bj-chrome) - 133px); }
.bj-studio .brief-card,
.bj-studio .ref-preview{ top:calc(var(--bj-chrome) + 14px); }
@media (max-width:640px){
  .bj-studio.is-designing .stepper-wrap{ top:var(--bj-chrome); }
}
/* The preview stage keeps its 55vh design size on tall viewports and shrinks
   only when the real chrome would otherwise push the frame past the fold —
   which is exactly what the prototype's no-scroll proofs asserted. */
.bj-studio .gen-grid{
  --stage-size:min(55vh, calc(100vh - var(--bj-chrome) - 240px));
}
/* Approve reuses the Design step's frame, so it needs the same budget — the
   prototype let it fall through to the 60vh default, which only fitted under
   the shorter inline header. */
.bj-studio .approve-grid{
  --stage-size:min(55vh, calc(100vh - var(--bj-chrome) - 162px));
  --dock-h:0px; --dock-gap:0px;
}
@media (max-width:960px){
  .bj-studio .gen-grid{ --stage-size:min(78vw,46vh); --dock-h:112px; }
  .bj-studio .approve-grid{ --stage-size:min(78vw,46vh); }
}

/* ── Compact chrome while designing ───────────────────────────────────────
   The prototype's own no-scroll strategy: once the design process begins it
   tightens every panel it owns (`body.is-designing .panel--pad`, `.panel-head`,
   `.field-block`, `.start-card`, `.step-nav`). The theme's chrome is ~72px
   taller than the prototype's inline header, and §9.4 grew the order card
   after those budgets were set, so the Approve step needs the same treatment
   the other steps already had. Nothing changes on the landing state, and every
   value stays on the design language's own type and spacing scale.
   Measured: Approve now fits at 1280×800, 1440×900 and 2560×1100. */
.bj-studio.is-designing .step-nav{ margin-top:8px; }
.bj-studio.is-designing .pdp-card{ padding:12px 22px 12px; }
.bj-studio.is-designing .pdp-title{ font-size:clamp(21px,1.5vw,26px); }
.bj-studio.is-designing .pdp-price{ font-size:21px; }
.bj-studio.is-designing .pdp-rule{ margin:7px 0 8px; }
.bj-studio.is-designing .pdp-lab{ margin:9px 0 5px; }
.bj-studio.is-designing .mp{ padding:6px 10px; font-size:11px; }
.bj-studio.is-designing .bj-select__btn{ padding:9px 12px; font-size:14px; }
.bj-studio.is-designing .size-opt{ padding:6px 2px 5px; }
.bj-studio.is-designing .opt-row{ padding:7px 11px; margin-top:6px; }
.bj-studio.is-designing .opt-row--sub{ margin-top:7px; }
.bj-studio.is-designing #extenderBlock{ margin-top:10px; padding-top:8px; }
.bj-studio.is-designing .fee-rows{ margin-top:10px !important; }
.bj-studio.is-designing .fee-rows .order-row{ padding:7px 0; }
.bj-studio.is-designing .qty-cart{ margin-top:10px !important; }
.bj-studio.is-designing .qty button{ padding:6px 13px; }
.bj-studio.is-designing .pdp-cart{ padding:11px 10px; }
.bj-studio.is-designing .pdp-trust{ margin-top:9px; }
.bj-studio.is-designing .one-size{ margin-top:9px; padding:7px 11px; }
/* short viewports only: the last few pixels, without touching taller screens */
@media (max-height:860px){
  .bj-studio.is-designing .metal-pills{ gap:5px; }
  .bj-studio.is-designing .mp{ padding:5px 9px; }
  .bj-studio.is-designing .pdp-trust span{ font-size:10px; }
}
@media (max-height:820px){
  .bj-studio.is-designing .step-nav{ margin-top:4px; }
  .bj-studio.is-designing .step-nav .btn--ghost{ padding:6px 6px; }
  .bj-studio.is-designing .pdp-trust{ margin-top:7px; }
}

/* ── Neutralising two site-wide snippets on this page (porting rule 3) ─────
   brites-reveal applies entrance animations as elements scroll in and
   brites-scroll-restore restores scroll per URL — both fight a multi-step,
   no-scroll wizard. The IIFE adds .bj-no-reveal to the root and restores
   history.scrollRestoration; this is the belt-and-braces CSS half, in case
   the reveal snippet tagged an element before our class landed. */
.bj-studio.bj-no-reveal .bj-rv,
.bj-studio.bj-no-reveal .bj-rv.bj-in{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ── Theme-collision guards ───────────────────────────────────────────────
   brites-design-language.css styles bare <label> uppercase site-wide and the
   PDP-derived rules touch .qty / .opt-row shapes. These re-assert the
   prototype's own values at studio specificity so the card reads exactly as
   approved. */
.bj-studio .opt-row{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--bj-ink); }
.bj-studio .opt-row span{ font-size:13.5px; }
.bj-studio .chat__title,
.bj-studio .pdp-title,
.bj-studio .charm-card__title,
.bj-studio .ref-dock__name{ text-transform:none; }
/* the theme's global .btn is uppercase/letter-spaced; the composer's send
   button and the bespoke select are not .btn, but the theme also sets
   `input, select, textarea { border-radius:0 !important }` which we want. */
.bj-studio .bj-select__native{ position:absolute !important; }

/* ── Impulse's own .modal classes (Theme.css:5313–5420) ───────────────────
   The prototype and Impulse 4.0 both use .modal / .modal__inner / .modal__body,
   so the theme's rules land on the studio's modals. Three of them break things,
   and they are invisible in a standalone file — they only appear once the
   section is inside the live theme:

     .modal{ color:#fff }                       Theme.css:5323
       Inherited by every studio element in a modal that has no explicit colour
       of its own. That is why the pricing tier price rendered white-on-white,
       and it would have done the same to the verification title and the saved-
       design names. Fixed at the root rather than per element.

     .modal a, .modal a:hover{ color:inherit }  Theme.css:5332
       Same problem for the "View listing ↗" links.

     .modal__inner{ display:flex; align-items:center;
                    margin:40px; max-width:calc(100% - 80px) }   :5405/:5416
       Turns .modal__body into a shrink-to-fit flex ITEM. Measured on the live
       theme: an 873px modal containing a 450px body, which collapsed the
       pricing grid's auto-fit columns from four to one.

     .modal .btn:not([disabled]):not(.btn--secondary):not(.btn--body){
       color: var(--colorBtnPrimaryText) }                       :5336
       Specificity 0,5,0 — it outranks .bj-studio .btn--ghost. Correct for
       filled buttons, wrong for the studio's outline and ghost variants, which
       sit on paper. Re-asserted below at 0,6,0 using the theme's own selector
       shape so the two can't fight.
   ========================================================================= */
.bj-studio .modal{ color:var(--bj-ink); }
.bj-studio .modal a{ color:var(--bj-ink); }
.bj-studio .modal a.text-link{ color:var(--bj-gold); }
.bj-studio .modal__inner{
  display:block;
  align-items:initial;
  margin:0 auto;
  max-width:100%;
}
.bj-studio .modal__body{ width:100%; }
.bj-studio .modal .btn--tertiary:not([disabled]):not(.btn--secondary):not(.btn--body){ color:var(--bj-ink); }
.bj-studio .modal .btn--tertiary:not([disabled]):not(.btn--secondary):not(.btn--body):hover{ color:#fff; }
.bj-studio .modal .btn--ghost:not([disabled]):not(.btn--secondary):not(.btn--body){ color:var(--bj-muted); }
.bj-studio .modal .btn--ghost:not([disabled]):not(.btn--secondary):not(.btn--body):hover{ color:var(--bj-ink); }
/* ── THE THEME REPAINTS OUR QUIET BUTTONS ON HOVER ────────────────────────
   Impulse dresses every `.btn` through selectors shaped like

     .btn:not([disabled]):not(.btn--secondary):not(.btn--body):hover

   which is 0,5,0. `.bj-studio .btn--ghost:hover` is 0,2,0, so the theme wins
   and paints a ghost button's BACKGROUND solid black while our rule is still
   busy setting its TEXT to ink. Black on black: the label vanishes at the
   exact moment the customer points at it. "Choose a different image" on the
   upload step is where it was spotted, but it was every ghost button on the
   page — the defence written further up only re-asserted `color`, and only
   inside `.modal`.

   So the same defence, in the theme's own selector shape so the two cannot
   fight, applied to the whole studio and naming BACKGROUND as well as colour.
   The declarations are the studio's existing intent, unchanged — they simply
   apply now. */
/* ── THE GHOST BUTTON, SETTLED ─────────────────────────────────────────
   Third attempt, and this one stops guessing. The live page gave the answer
   precisely: the LABEL came out muted grey — so this file's `color` rule at
   0,6,0 was already beating Theme.css — while the BACKGROUND stayed black.
   The theme's background rule is therefore stronger than 0,6,0: more classes
   than its colour rule, or flagged, and I have no way to read it and find
   out. Adding a seventh :not() would be another guess at a number.

   So: an ID. `#bjStudio` is (1,0,0) and beats any number of classes, flagged
   or not, which ends the argument rather than winning the current round of
   it. The `!important` alongside covers a flagged theme declaration at lower
   specificity. Both are confined to one variant and to the properties the
   theme is actually taking — this is not a licence to reach for either
   elsewhere in the file.

   THE STATES ARE THE STUDIO'S OWN, and they were already written down: the
   editor's footer ghosts (see .markup-foot .markup-actions .btn--ghost) use
   wash → deeper-on-press → ink text, the same three the --mk-hov block
   describes for every control in the sketchpad. Ghost buttons out on the
   page now hover identically. That is what standardised means here: not
   "not black", but the same gesture a .mk-tool, a .mk-chip and a .mk-mode
   already make. */
#bjStudio .btn--ghost,
.bj-studio .btn--ghost{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--bj-muted);
  transition:background var(--mk-in), border-color var(--mk-in), color var(--mk-in);
}
#bjStudio .btn--ghost:not([disabled]):hover,
#bjStudio .btn--ghost:not([disabled]):focus-visible,
.bj-studio .btn--ghost:not([disabled]):hover,
.bj-studio .btn--ghost:not([disabled]):focus-visible{
  background:var(--mk-hov) !important;
  border-color:var(--mk-hov-line) !important;
  color:var(--bj-ink);
}
#bjStudio .btn--ghost:not([disabled]):active,
.bj-studio .btn--ghost:not([disabled]):active{
  background:var(--mk-press) !important;
  color:var(--bj-ink);
}
/* focus left over from a click is not a state anybody asked to see */
#bjStudio .btn--ghost:focus:not(:focus-visible):not(:hover),
.bj-studio .btn--ghost:focus:not(:focus-visible):not(:hover){
  background:transparent !important; border-color:transparent !important; color:var(--bj-muted);
}
#bjStudio .btn--ghost[disabled]{ background:transparent !important; }
.bj-studio .btn--ghost:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }
/* the outline pair fill on hover — the theme would otherwise recolour the
   label out from under them the same way */
.bj-studio .btn--tertiary:not([disabled]):not(.btn--secondary):not(.btn--body){
  background:transparent; color:var(--bj-ink); border-color:var(--bj-ink);
}
.bj-studio .btn--tertiary:not([disabled]):not(.btn--secondary):not(.btn--body):hover,
.bj-studio .btn--tertiary:not([disabled]):not(.btn--secondary):not(.btn--body):focus{
  background:var(--bj-ink); color:#fff;
}
.bj-studio .btn--secondary:not([disabled]):not(.btn--body){ background:transparent; color:var(--bj-ink); }
.bj-studio .btn--secondary:not([disabled]):not(.btn--body):hover{ background:var(--bj-ink); color:#fff; }
/* And the gold primary, which was hovering to PURE BLACK for the same
   reason — measured, not guessed: rgb(0,0,0) instead of #8f7644. Legible,
   so nobody reported it, but it is the studio's main action (Start
   designing, Buy pack, Approve) turning into a theme button under the
   cursor. Deep gold is the house hover. */
.bj-studio .btn--gold:not([disabled]):not(.btn--secondary):not(.btn--body){
  background:var(--bj-gold); border-color:var(--bj-gold); color:#fff;
}
.bj-studio .btn--gold:not([disabled]):not(.btn--secondary):not(.btn--body):hover,
.bj-studio .btn--gold:not([disabled]):not(.btn--secondary):not(.btn--body):focus{
  background:#8f7644; border-color:#8f7644; color:#fff;
}

/* the lightbox and the narrow auth card keep their own widths */
.bj-studio .modal__inner--narrow{ margin:0 auto; }
.bj-studio .ref-lightbox__inner{ margin:0 auto; }

/* The studio is the page while designing: the theme's marketing sections and
   footer wait, exactly as the prototype's aux sections did. */
body.bj-designing #shopify-section-brites-newsletter-popup{ display:none; }
body.bj-studio-page .main-content{ padding-top:0; }
/* ── The cream band above the footer ───────────────────────────────────────
   Theme.css:952 paints the page itself:  body,html{ background:var(--colorBody) }
   and --colorBody is #fff8ee. So every pixel below the studio's white content
   and above the black footer shows cream — it is the CANVAS, not a section,
   which is why hiding footer-promotions alone did not remove it.

   The studio's surfaces are all --bj-paper, so on this page the canvas is
   paper too. Scoped to body.bj-studio-page, which the IIFE adds to <body> at
   boot, so every other page keeps the theme's cream exactly as it is. */
body.bj-studio-page{ background:var(--bj-paper, #fff); }

/* And the section that leaves the gap in the first place: Impulse renders
   {% section 'footer-promotions' %} between the page content and the footer.
   On this store it carries no blocks, so all it contributes is its own
   vertical padding. The studio already hides it while designing; on this page
   it has nothing to say at any point, so it is hidden throughout. */
body.bj-studio-page #shopify-section-footer-promotions{ display:none; }

/* ── Lazy charm grid ───────────────────────────────────────────────────────
   The sentinel that pulls the next batch in. It needs real height so the
   observer fires reliably at the bottom of a grid whose last row is short. */
.bj-studio .charm-more{ height:24px; width:100%; margin-top:8px; }
.bj-studio .charm-more[hidden]{ display:none; }

/* ── Impulse class collisions ──────────────────────────────────────────────
   The prototype and Impulse 4.0 happen to use several of the same class
   names, and Theme.css loads site-wide. These are the theme declarations that
   land on studio elements and change how they look. Each one is neutralised
   here rather than by renaming the class, so the ported markup keeps matching
   the prototype 1:1.

   Theme.css:6568  .hero{ position:relative; overflow:hidden;
                          background:#0f0f0f; background:var(--colorLargeImageBg) }
   That is Impulse's full-bleed image banner. The studio's hero is a centred
   type block, so the theme's dark plate showed up behind the title. */
.bj-studio .hero{ background:none; overflow:visible; }

/* Theme.css .drawer{ overflow:hidden→scroll; max-width:95%;
                      color:var(--colorDrawerText) }
   The studio drawer manages its own scrolling on .drawer__body and its own
   ink; the theme's copy added a second scrollbar and a foreign text colour. */
.bj-studio .drawer{ overflow:visible; max-width:none; color:var(--bj-ink); }

/* Theme.css .modal__close:focus{ color:#fff } — white on a white modal the
   moment the close button takes focus, i.e. after any keyboard use. */
.bj-studio .modal__close:focus{ color:var(--bj-muted); }
.bj-studio .modal__close:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STUDIO MENU
   The credit meter, Get more, Pricing, My designs and the account chip used to
   occupy a sticky bar under the theme header. That is a permanent line of rail
   spent on five controls a shopper touches rarely, so they now live behind one
   floating control and a panel that arrives from the right — the same
   direction, easing and duration My designs already uses, so the page has ONE
   vocabulary for an arriving surface rather than two.

   Motion contract for everything below:
     · in   .42s cubic-bezier(.22,.8,.3,1)   — decelerating, arrives settled
     · out  .30s cubic-bezier(.4,0,.7,.2)    — accelerating, leaves quickly
     · press feedback is always scale, never colour alone
     · every interactive element states hover, active AND :focus-visible
     · @media (prefers-reduced-motion:reduce) collapses all of it to a fade
   ═══════════════════════════════════════════════════════════════════════════ */
.bj-studio{
  --menu-in:.42s cubic-bezier(.22,.8,.3,1);
  --menu-out:.30s cubic-bezier(.4,0,.7,.2);
}

/* ── The button ────────────────────────────────────────────────────────────
   Fixed under the theme's own fixed header, right rail. z-index sits below
   the header (96) so the header always wins, and above the studio's sticky
   stepper (56). */
.bj-studio .studio-menu-btn{
  position:fixed; z-index:60;
  top:calc(var(--bj-announce-h, 0px) + var(--bj-header-h, 92px) + 16px);
  right:clamp(14px, 2vw, 28px);
  width:39px; height:39px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--bj-hair); border-radius:0;
  box-shadow:0 10px 30px rgba(28,29,29,.10);
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:transform var(--menu-in), box-shadow var(--menu-in),
             border-color .22s ease, opacity var(--menu-out);
}
/* While designing, the sticky progress bar occupies the same band, and a
   button hanging below its midline reads as off-centre. The IIFE measures the
   bar onto --bj-stepper-h, so the button's centre and the bar's centre are the
   same line at any bar height. */
.bj-studio.is-designing .studio-menu-btn{
  top:calc(var(--bj-announce-h, 0px) + var(--bj-header-h, 92px)
       + (var(--bj-stepper-h, 54px) - 39px) / 2);
}
@media (max-width:640px){
  .bj-studio.is-designing .studio-menu-btn{
    top:calc(var(--bj-announce-h, 0px) + var(--bj-header-h, 92px)
         + (var(--bj-stepper-h, 54px) - 35px) / 2);
  }
}

.bj-studio .studio-menu-btn:hover{
  border-color:var(--bj-ink); box-shadow:0 16px 40px rgba(28,29,29,.16); transform:translateY(-1px);
}
.bj-studio .studio-menu-btn:active{ transform:scale(.94); box-shadow:0 6px 18px rgba(28,29,29,.12); }
.bj-studio .studio-menu-btn:focus{ outline:none; }
.bj-studio .studio-menu-btn:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:3px; }

/* three rules that become an X. Each bar animates on its own axis so the
   morph reads as one object folding, not three things moving. */
.bj-studio .studio-menu-btn__bars{
  position:relative; display:block; width:17px; height:11px;
}
.bj-studio .studio-menu-btn__bars i{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--bj-ink);
  transition:transform var(--menu-in), opacity .18s ease, width var(--menu-in);
}
.bj-studio .studio-menu-btn__bars i:nth-child(1){ top:0; }
.bj-studio .studio-menu-btn__bars i:nth-child(2){ top:4.75px; width:70%; }
.bj-studio .studio-menu-btn__bars i:nth-child(3){ top:9.5px; width:85%; }
/* hover: the short rules reach full width — the control "opens" before it is
   even pressed, which is the affordance */
.bj-studio .studio-menu-btn:hover .studio-menu-btn__bars i{ width:100%; }
/* open: top and bottom cross, the middle rule dissolves */
.bj-studio .studio-menu-btn.is-open .studio-menu-btn__bars i:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
.bj-studio .studio-menu-btn.is-open .studio-menu-btn__bars i:nth-child(2){ opacity:0; transform:scaleX(.2); }
.bj-studio .studio-menu-btn.is-open .studio-menu-btn__bars i:nth-child(3){ transform:translateY(-4.75px) rotate(-45deg); width:100%; }

/* an unread-style gold dot: the only state the button carries on its face.
   It appears when credits change while the panel is shut, so the shopper can
   see that something happened without the panel being open. */
.bj-studio .studio-menu-btn__dot{
  position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%;
  background:var(--bj-gold); opacity:0; transform:scale(.2);
  transition:opacity .3s ease, transform var(--menu-in);
}
.bj-studio .studio-menu-btn.has-news .studio-menu-btn__dot{ opacity:1; transform:none; animation:bjs-menuPulse 2.4s ease-in-out 1.2s 2; }
@keyframes bjs-menuPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(165,138,82,.55); } 50%{ box-shadow:0 0 0 5px rgba(165,138,82,0); } }

/* the button steps aside for any surface that owns the screen — a modal, the
   designs drawer, or the menu's own panel on a narrow viewport */
.bj-studio .studio-menu-btn.is-hidden{
  opacity:0; transform:scale(.86) translateY(-6px); pointer-events:none;
}

/* ── The scrim ─────────────────────────────────────────────────────────── */
.bj-studio .studio-menu-scrim{
  position:fixed; inset:0; z-index:118; background:rgba(28,29,29,.34);
  opacity:0; transition:opacity var(--menu-out); backdrop-filter:blur(1.5px);
}
.bj-studio .studio-menu-scrim.is-open{ opacity:1; transition:opacity var(--menu-in); }

/* ── The panel ─────────────────────────────────────────────────────────── */
.bj-studio .studio-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:120;
  width:min(392px, 90vw); background:#fff; color:var(--bj-ink);
  border-left:1px solid var(--bj-hair); box-shadow:var(--bj-shadow-lg);
  display:flex; flex-direction:column; overflow:visible; max-width:none;
  transform:translateX(102%);
  transition:transform var(--menu-out);
}
.bj-studio .studio-menu.is-open{ transform:none; transition:transform var(--menu-in); }

/* ── The designs drawer is the same panel ──────────────────────────────────
   My designs arrives from the same edge for the same reason, so it is the
   same object: one width, one border, one shadow, one pair of easings, one
   head. The prototype gave it a narrower panel, a plain <h3> and a text
   "Close ×" button, which read as a second, lesser component — and the theme's
   own .btn rules were squeezing that button until the title wrapped. */
.bj-studio .drawer{
  width:min(392px, 90vw);
  border-left:1px solid var(--bj-hair); box-shadow:var(--bj-shadow-lg);
  transition:transform var(--menu-out);
}
.bj-studio .drawer.is-open{ transition:transform var(--menu-in); }
.bj-studio .drawer:focus,
.bj-studio .drawer:focus-visible{ outline:none; }
.bj-studio .drawer__body{ padding:22px 26px 26px; scrollbar-width:thin; }
@media (max-width:640px){
  .bj-studio .drawer{ width:min(340px, 92vw); }
  .bj-studio .drawer__body{ padding:18px 20px 22px; }
}
/* the panel and its scrim carry `display`, which beats the UA's [hidden] rule —
   so say it explicitly, or a "hidden" panel is still laid out off-screen */
.bj-studio .studio-menu[hidden],
.bj-studio .studio-menu-scrim[hidden]{ display:none; }

/* the panel takes focus on open so screen readers announce the dialog; it
   must not paint a ring for that — the ring belongs on the controls inside */
.bj-studio .studio-menu:focus,
.bj-studio .studio-menu:focus-visible{ outline:none; }

.bj-studio .studio-panel__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:26px 26px 18px; border-bottom:1px solid var(--bj-hair);
}
/* the title must never wrap to make room for the close mark */
.bj-studio .studio-panel__head > div{ min-width:0; }
.bj-studio .studio-panel__title{ white-space:nowrap; }
.bj-studio .studio-panel__eyebrow{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:#8a8784; margin-bottom:6px;
}
.bj-studio .studio-panel__title{
  font-family:'Cormorant',Georgia,serif; font-size:26px; font-weight:400;
  line-height:1.1; margin:0; color:var(--bj-ink);
}
.bj-studio .studio-panel__close{
  width:34px; height:34px; flex:none; position:relative; background:none;
  border:1px solid transparent; cursor:pointer; padding:0;
  transition:border-color .22s ease, transform var(--menu-in);
}
.bj-studio .studio-panel__close span,
.bj-studio .studio-panel__close span:before{
  content:""; position:absolute; left:9px; top:16px; width:16px; height:1.5px;
  background:var(--bj-muted); transition:background .2s ease, transform var(--menu-in);
}
.bj-studio .studio-panel__close span{ transform:rotate(45deg); }
.bj-studio .studio-panel__close span:before{ left:0; top:0; transform:rotate(-90deg); }
.bj-studio .studio-panel__close:hover{ border-color:var(--bj-hair); transform:rotate(90deg); }
.bj-studio .studio-panel__close:hover span,
.bj-studio .studio-panel__close:hover span:before{ background:var(--bj-ink); }
.bj-studio .studio-panel__close:active{ transform:rotate(90deg) scale(.9); }
.bj-studio .studio-panel__close:focus{ outline:none; }
.bj-studio .studio-panel__close:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }

.bj-studio .studio-menu__body{ flex:1; overflow-y:auto; padding:22px 26px 8px; scrollbar-width:thin; }
.bj-studio .studio-menu__foot{
  padding:18px 26px 22px; border-top:1px solid var(--bj-hair);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.bj-studio .studio-menu__fine{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8a8784; }
.bj-studio .studio-menu__foot .btn{ width:100%; }
.bj-studio .studio-menu__foot .acct-chip{ margin:0; }

/* ── Staggered entrance ────────────────────────────────────────────────────
   Rows rise into place one after another so the eye is led down the panel in
   reading order. The delay is the row's own --i, so adding a row needs no new
   CSS. On close everything leaves together — a staggered exit reads as
   hesitation. */
.bj-studio .menu-stagger{
  opacity:0; transform:translateX(16px);
  transition:opacity .26s ease, transform .26s ease;
}
.bj-studio .studio-menu.is-open .menu-stagger{
  opacity:1; transform:none;
  transition:opacity .34s ease calc(40ms + var(--i) * 38ms),
             transform .44s cubic-bezier(.22,.8,.3,1) calc(40ms + var(--i) * 38ms);
}

/* ── Credits ───────────────────────────────────────────────────────────── */
.bj-studio .menu-credits{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; margin-bottom:20px;
  background:var(--bj-band); border:1px solid var(--bj-hair);
}
.bj-studio .menu-credits .credit-meter{ padding:0; border:0; background:none; }
/* the prototype hid this label on narrow screens because the sticky bar had no
   room for it. The panel has room on every viewport, so it comes back. */
.bj-studio .menu-credits .credit-meter__lbl{ display:inline; }
.bj-studio .menu-credits__more{ flex:none; padding:8px 14px; font-size:10.5px; }
.bj-studio .menu-credits__more:hover{ transform:translateY(-1px); }
.bj-studio .menu-credits__more:active{ transform:scale(.96); }

/* ── Rows ──────────────────────────────────────────────────────────────────
   One row type for links, group headers and sub-items. The gold rule sweeps
   in from the left on hover; the arrow travels; the whole row shifts 3px. */
.bj-studio .menu-row{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:14px; width:100%; padding:15px 2px; background:none; border:0;
  border-bottom:1px solid var(--bj-hair); cursor:pointer; text-align:left;
  font-family:'Nunito Sans',-apple-system,sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bj-ink);
  transition:transform .28s cubic-bezier(.22,.8,.3,1), color .22s ease, padding-left .28s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .menu-row:before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--bj-gold); transform:translateY(-50%);
  transition:width .32s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .menu-row:hover{ color:var(--bj-gold); padding-left:22px; }
.bj-studio .menu-row:hover:before{ width:14px; }
.bj-studio .menu-row:active{ transform:scale(.985); }
.bj-studio .menu-row:focus{ outline:none; }
.bj-studio .menu-row:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:-2px; }
.bj-studio .menu-row__go{
  font-size:13px; color:var(--bj-muted); opacity:.5;
  transition:transform .32s cubic-bezier(.22,.8,.3,1), opacity .22s ease, color .22s ease;
}
.bj-studio .menu-row:hover .menu-row__go{ transform:translateX(5px); opacity:1; color:var(--bj-gold); }

/* the chevron rotates a quarter turn when its group opens */
.bj-studio .menu-row__chev{
  width:9px; height:9px; flex:none; border-right:1.5px solid var(--bj-muted);
  border-bottom:1.5px solid var(--bj-muted); transform:rotate(45deg); margin-right:3px;
  transition:transform .38s cubic-bezier(.22,.8,.3,1), border-color .22s ease;
}
.bj-studio .menu-row:hover .menu-row__chev{ border-color:var(--bj-gold); }
.bj-studio .menu-row[aria-expanded="true"] .menu-row__chev{ transform:rotate(-135deg) translate(-2px,-2px); }
.bj-studio .menu-row[aria-expanded="true"]{ color:var(--bj-gold); }
.bj-studio .menu-row[aria-expanded="true"]:before{ width:14px; }
.bj-studio .menu-row[aria-expanded="true"]{ padding-left:22px; }
.bj-studio .menu-group .menu-row--group{ border-bottom:1px solid var(--bj-hair); }

/* ── Sub-menus ─────────────────────────────────────────────────────────────
   Height is animated from a measured pixel value the script writes, because
   `auto` cannot be transitioned. Content fades slightly behind the height so
   the panel never looks like it is stretching text. */
.bj-studio .menu-sub{
  overflow:hidden; height:0;
  transition:height .38s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .menu-sub__inner{
  padding:4px 0 10px 14px; border-left:1px solid var(--bj-hair); margin-left:4px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .22s ease, transform .3s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .menu-sub.is-open .menu-sub__inner{ opacity:1; transform:none; transition-delay:.08s; }
.bj-studio .menu-row--sub{
  padding:11px 2px; font-size:10.5px; letter-spacing:.16em; color:var(--bj-muted);
  border-bottom:0;
}
.bj-studio .menu-row--sub:hover{ color:var(--bj-gold); padding-left:16px; }
.bj-studio .menu-row--sub:hover:before{ width:9px; }
.bj-studio .menu-sub__note{
  margin:2px 0 8px; font-size:12.5px; line-height:1.75; letter-spacing:0;
  text-transform:none; font-weight:400; color:var(--bj-muted);
}

/* ── Status ────────────────────────────────────────────────────────────────
   The one line in this panel that changes by itself: where the shopper is.
   The rule fills to match, so progress is legible before the words are read. */
.bj-studio .menu-status{ margin:26px 0 6px; }
.bj-studio .menu-status__line{
  display:block; height:1px; background:var(--bj-hair); position:relative; overflow:hidden;
}
.bj-studio .menu-status__line i{
  position:absolute; left:0; top:0; bottom:0; width:0; background:var(--bj-gold);
  transition:width .6s cubic-bezier(.22,.8,.3,1) .2s;
}
.bj-studio .menu-status__txt{
  display:block; margin-top:11px; font-size:12px; line-height:1.7; color:var(--bj-muted);
}
.bj-studio .menu-status__txt b{ color:var(--bj-ink); font-weight:700; }

/* ── Saved designs, in the menu's row language ─────────────────────────────
   Same gold rule sweeping in from the left, same indent, same easing as a
   menu row — so hovering a saved design feels like hovering Pricing & plans. */
.bj-studio .saved-item{
  position:relative; padding:14px 2px; cursor:pointer;
  border-bottom:1px solid var(--bj-hair);
  transition:padding-left .28s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .saved-item:before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--bj-gold); transform:translateY(-50%);
  transition:width .32s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .saved-item:hover{ padding-left:18px; }
.bj-studio .saved-item:hover:before{ width:11px; }
.bj-studio .saved-item .thumb{
  transition:border-color .22s ease, transform .32s cubic-bezier(.22,.8,.3,1);
}
.bj-studio .saved-item:hover .thumb{ border-color:var(--bj-gold-lt); transform:translateY(-1px); }
.bj-studio .drawer-empty{ padding:70px 20px; }

/* ── Narrow viewports ──────────────────────────────────────────────────── */
@media (max-width:640px){
  .bj-studio .studio-menu-btn{ width:35px; height:35px; top:calc(var(--bj-announce-h, 0px) + var(--bj-header-h, 92px) + 8px); }
  .bj-studio .studio-menu{ width:min(340px, 92vw); }
  .bj-studio .studio-menu__body{ padding:18px 20px 8px; }
  .bj-studio .studio-panel__head{ padding:20px 20px 15px; }
  .bj-studio .studio-menu__foot{ padding:15px 20px 18px; }
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   Everything above still HAPPENS — it just stops moving. Opacity is kept
   because it is the one channel that still communicates arrival without
   vestibular cost. */
@media (prefers-reduced-motion:reduce){
  .bj-studio .studio-menu,
  .bj-studio .studio-menu-scrim,
  .bj-studio .studio-menu-btn,
  .bj-studio .studio-menu-btn__bars i,
  .bj-studio .menu-stagger,
  .bj-studio .menu-sub,
  .bj-studio .menu-sub__inner,
  .bj-studio .menu-row,
  .bj-studio .menu-row__go,
  .bj-studio .menu-row__chev,
  .bj-studio .studio-panel__close,
  .bj-studio .studio-panel__close span,
  .bj-studio .studio-panel__close span:before{
    transition-duration:.01ms !important; animation:none !important;
  }
  .bj-studio .menu-stagger{ transform:none; }
  .bj-studio .studio-panel__close:hover{ transform:none; }
}


/* ── Email sign-in, hidden ─────────────────────────────────────────────────
   Set by the IIFE from data-email-signin. The markup stays in the document so
   turning it back on is one CONFIG value and no re-upload of anything else —
   it simply has nothing to show while there is no verified sending domain. */
.bj-studio.bj-no-email-auth #authOr,
.bj-studio.bj-no-email-auth #authEmail,
.bj-studio.bj-no-email-auth #authGoBtn,
.bj-studio.bj-no-email-auth #verifyStage{ display:none !important; }
/* the Google button is the whole modal now, so let it breathe */
.bj-studio.bj-no-email-auth .auth-google{ margin-bottom:4px; }


/* ═══════════ IN-APP BROWSERS — the way out ═══════════════════════════════
   Google answers 403 disallowed_useragent inside an app's embedded browser,
   so on those the account step is not a button, it is a door. Same vocabulary
   as the studio menu — hairline, gold rule, the square close mark, the same
   two easings — because it appears in the same modal the rest of the studio
   uses, and a rescue that looks like an error message reads as breakage.
   ─────────────────────────────────────────────────────────────────────── */

/* Inside a WebView, the Google button never shows: mountGoogleButton hides it
   outright. This is the belt to that braces — if script ordering ever put the
   panel up alongside the button, the button is still not offered. */
.bj-studio.bj-inapp:not(.bj-inapp-override) .auth-google{ display:none !important; }

.bj-studio .auth-inapp{
  text-align:center;
  border:1px solid var(--bj-hair);
  background:linear-gradient(180deg,var(--bj-band) 0%,#fff 62%);
  padding:26px 24px 22px;
  animation:bjInappIn var(--menu-in) both;
}
@keyframes bjInappIn{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.bj-studio .auth-inapp__ico{
  width:26px; height:26px; display:block; margin:0 auto 12px;
  color:var(--bj-gold); stroke-width:1.2;
}
.bj-studio .auth-inapp__title{
  font-family:var(--bj-serif); font-size:23px; line-height:1.2; color:var(--bj-ink);
  position:relative; padding-bottom:15px; margin-bottom:12px;
}
.bj-studio .auth-inapp__title:after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:44px; height:1px; background:var(--bj-gold);
}
.bj-studio .auth-inapp__sub{
  font-size:13px; line-height:1.7; color:var(--bj-muted); margin:0 0 20px;
}

/* the one action that works, styled as the primary it is */
.bj-studio .auth-inapp__go{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--bj-ink); color:#fff; border:1px solid var(--bj-ink); border-radius:0;
  padding:14px 16px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background var(--menu-out), transform var(--menu-out), box-shadow var(--menu-out);
}
.bj-studio .auth-inapp__go svg{ width:15px; height:15px; transition:transform var(--menu-in); }
.bj-studio .auth-inapp__go:hover{ box-shadow:0 10px 26px rgba(28,29,29,.22); transform:translateY(-1px); }
.bj-studio .auth-inapp__go:hover svg{ transform:translateX(4px); }
.bj-studio .auth-inapp__go:active{ transform:translateY(0); box-shadow:none; }
.bj-studio .auth-inapp__go[disabled]{ opacity:.55; cursor:progress; }
/* while the handoff code is being minted — a thread of gold crossing the button */
.bj-studio .auth-inapp__go.is-working:after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:36%;
  background:var(--bj-gold-lt); animation:bjInappWait 1s linear infinite;
}
@keyframes bjInappWait{ from{ transform:translateX(-100%); } to{ transform:translateX(320%); } }

.bj-studio .auth-inapp__copy{
  display:block; margin:12px auto 0; background:none; border:0; cursor:pointer;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bj-muted);
  padding:6px 2px; position:relative; transition:color var(--menu-out);
}
.bj-studio .auth-inapp__copy:after{
  content:""; position:absolute; left:50%; right:50%; bottom:2px; height:1px;
  background:var(--bj-gold); transition:left var(--menu-in), right var(--menu-in);
}
.bj-studio .auth-inapp__copy:hover{ color:var(--bj-ink); }
.bj-studio .auth-inapp__copy:hover:after{ left:2px; right:2px; }

/* shown only when both clipboard routes are refused, which some WebViews do */
.bj-studio .auth-inapp__link{
  width:100%; margin-top:12px; font-size:12px; text-align:center;
  border:1px solid var(--bj-gold-lt); background:#fff; padding:10px;
}

/* the manual route, always present but never shouting; it opens itself if the
   scheme hand-off silently no-ops (is-stuck) */
.bj-studio .auth-inapp__manual{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--bj-hair);
}
.bj-studio .auth-inapp__manualHead{
  display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bj-muted); margin-bottom:10px;
}
.bj-studio .auth-inapp__steps{
  margin:0; padding:0; list-style:none; counter-reset:bjstep;
  display:flex; flex-direction:column; gap:8px; text-align:left;
  max-width:280px; margin-inline:auto;
}
.bj-studio .auth-inapp__steps li{
  counter-increment:bjstep; position:relative; padding-left:28px;
  font-size:12.5px; line-height:1.6; color:var(--bj-ink);
}
.bj-studio .auth-inapp__steps li:before{
  content:counter(bjstep); position:absolute; left:0; top:1px;
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bj-gold-lt); color:var(--bj-gold);
  font-size:10px; font-weight:700;
}
/* the hand-off went nowhere: pull the manual route forward rather than leave a
   shopper tapping a button the host app is quietly eating */
.bj-studio .auth-inapp.is-stuck .auth-inapp__manual{
  border-color:var(--bj-gold-lt); background:var(--bj-band);
  margin-left:-24px; margin-right:-24px; padding:16px 24px 4px;
  animation:bjInappIn var(--menu-in) both;
}

/* detection is a user-agent guess, and a wrong guess must never be a wall */
.bj-studio .auth-inapp__anyway{
  display:block; margin:18px auto 0; background:none; border:0; cursor:pointer;
  font-size:11px; color:var(--bj-muted); text-decoration:underline;
  text-underline-offset:3px; padding:4px; transition:color var(--menu-out);
}
.bj-studio .auth-inapp__anyway:hover{ color:var(--bj-ink); }

/* ── the early bar ────────────────────────────────────────────────────────
   Offered at first paint, before any work exists to be stranded. One per
   visit, dismissible, and it never covers a control: it sits above the safe
   area and the studio pads for it. */
.bj-studio .inapp-bar{
  position:fixed; left:12px; right:12px; z-index:60;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:12px;
  background:var(--bj-ink); color:#fff;
  padding:12px 12px 12px 16px;
  box-shadow:0 18px 44px rgba(28,29,29,.34);
  transform:translateY(140%); opacity:0;
  transition:transform var(--menu-out), opacity var(--menu-out);
}
.bj-studio .inapp-bar.is-in{
  transform:none; opacity:1;
  transition:transform var(--menu-in), opacity var(--menu-in);
}
.bj-studio .inapp-bar__txt{ flex:1; min-width:0; }
.bj-studio .inapp-bar__head{
  display:block; font-size:12.5px; font-weight:700; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bj-studio .inapp-bar__sub{
  display:block; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.68); margin-top:2px;
}
.bj-studio .inapp-bar__go{
  flex:none; background:var(--bj-gold); color:#fff; border:0; border-radius:0;
  padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer;
  transition:background var(--menu-out), transform var(--menu-out);
}
.bj-studio .inapp-bar__go:hover{ background:var(--bj-gold-lt); }
.bj-studio .inapp-bar__go:active{ transform:scale(.97); }
.bj-studio .inapp-bar__go[disabled]{ opacity:.6; cursor:progress; }
/* the same square close mark the menu and the drawer use */
.bj-studio .inapp-bar__x{
  flex:none; width:30px; height:30px; background:none; border:0; cursor:pointer;
  position:relative; color:rgba(255,255,255,.62);
  transition:color var(--menu-out), transform var(--menu-out);
}
.bj-studio .inapp-bar__x:hover{ color:#fff; transform:rotate(90deg); }
.bj-studio .inapp-bar__x span,
.bj-studio .inapp-bar__x span:before{
  content:""; position:absolute; left:50%; top:50%; width:13px; height:1px;
  background:currentColor; transform:translate(-50%,-50%) rotate(45deg);
}
.bj-studio .inapp-bar__x span:before{ transform:translate(-50%,-50%) rotate(90deg); left:50%; top:50%; }

@media (max-width:420px){
  .bj-studio .auth-inapp{ padding:22px 16px 18px; }
  .bj-studio .auth-inapp.is-stuck .auth-inapp__manual{ margin-left:-16px; margin-right:-16px; padding-inline:16px; }
  .bj-studio .inapp-bar{ left:8px; right:8px; padding-left:14px; }
  .bj-studio .inapp-bar__sub{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .bj-studio .auth-inapp,
  .bj-studio .auth-inapp.is-stuck .auth-inapp__manual{ animation:none; }
  .bj-studio .inapp-bar,
  .bj-studio .auth-inapp__go,
  .bj-studio .auth-inapp__go svg,
  .bj-studio .auth-inapp__copy:after,
  .bj-studio .inapp-bar__go,
  .bj-studio .inapp-bar__x{ transition-duration:.01ms !important; }
  .bj-studio .auth-inapp__go.is-working:after{ animation:none; width:100%; opacity:.5; }
  .bj-studio .inapp-bar__x:hover{ transform:none; }
}


/* ═══════════ THE PAIR — drawing first, metal second ══════════════════════
   The studio designs in B/W production line art (the drawing is unambiguous
   about engraving) and renders the charm only from an approved drawing. The
   pair rail sits under the stage: Drawing⇄Charm toggle, markup, render. */

/* the drawing reads as ink on paper — give it paper */
.bj-studio .stage.stage--paper{ background:#fff; }
.bj-studio .stage.stage--paper .stage-flag{
  background:#fff; color:var(--bj-muted); border:1px solid var(--bj-hair);
}

/* An author display rule (display:flex etc.) silently overrides the hidden
   attribute's UA display:none — which is exactly how the empty stage grew a
   54px phantom rail. This puts `hidden` back in charge for the whole studio,
   for this component and every future one. */
.bj-studio [hidden]{ display:none !important; }

/* …with ONE exception worth naming. A file input set to display:none cannot be
   opened by script in some browsers (older Safari, a handful of in-app
   webviews) — the click is simply swallowed and the customer sees nothing
   happen, which is exactly the bug this class exists to end. So the picker is
   hidden the accessible way instead: still laid out, still clickable, just
   nowhere anyone can see it. */
.bj-studio .mk-vh{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
  opacity:0; pointer-events:none;
}

/* ── THE RAIL IS TWO ROWS ─────────────────────────────────────────────────
   It was one 44px row carrying a view toggle, the markup button, a renderer
   choice and the render button, and it was ALREADY clipping the render button
   at the frame's right edge with only two view segments. A third segment made
   that certain rather than likely. So the rail splits by job: which image you
   are looking at on top, the press that costs a credit underneath. Every
   control gets its full label back and nothing has to shrink to fit.

   The rail is still COUNTED IN the stage's height budget rather than added
   under it — see .has-rail, which now derives the stage from --rail-h instead
   of repeating its pixel value, so changing the rail's height cannot leave
   the frame, the version strip and the conversation on different lines. */
.bj-studio .pair-rail{
  display:flex; flex-direction:column; gap:8px;
  /* A MINIMUM, NOT A FIXED HEIGHT. --rail-h below reserves 92px of the
     stage's budget for it, which is what the two rows need. But this rail
     also has overflow:hidden as its last fence, and a fixed height plus
     overflow:hidden is how a wrapped row gets silently cut off instead of
     merely being tight — the exact failure this rail was rebuilt to end. */
  min-height:82px; margin-top:10px; box-sizing:border-box;
}
.bj-studio .pair-rail__row{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.bj-studio .pair-rail__render.btn{ padding:9px 16px !important; }
/* The stage YIELDS the rail's 54px; the conversation and the version strip
   get it back through --rail-h, so all three panes still start and finish on
   the same lines and the no-scroll budget holds. */
.bj-studio .gen-grid.has-rail{
  --rail-h:92px;
  --stage-size:min(calc(55vh - var(--rail-h)), calc(100vh - var(--bj-chrome) - 240px - var(--rail-h)));
}
.bj-studio .gen-grid .chat{
  height:calc(var(--stage-size,60vh) + var(--dock-h,0px) + var(--dock-gap,0px) + var(--rail-h,0px) + 28px);
}
.bj-studio #view-2 .version-strip{
  max-height:calc(var(--stage-size,60vh) + var(--dock-h,0px) + var(--dock-gap,0px) + var(--rail-h,0px) + 28px);
}
.bj-studio .pair-toggle{
  display:inline-flex; border:1px solid var(--bj-hair); background:var(--bj-band);
  padding:2px; flex:none;
}
.bj-studio .pair-toggle__b{
  border:0; background:none; cursor:pointer; padding:7px 14px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bj-muted); transition:background var(--menu-out), color var(--menu-out);
}
.bj-studio .pair-toggle__b.is-on{ background:var(--bj-ink); color:#fff; }
.bj-studio .pair-toggle__b:not(.is-on):hover{ color:var(--bj-ink); }

.bj-studio .pair-rail__markup{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  padding:8px 13px; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bj-ink);
  transition:border-color var(--menu-out), background var(--menu-out), transform var(--menu-out);
}
.bj-studio .pair-rail__markup svg{ width:13px; height:13px; }
.bj-studio .pair-rail__markup:hover{ border-color:var(--bj-ink); transform:translateY(-1px); }
.bj-studio .pair-rail__markup.is-marked{
  border-color:var(--bj-gold-lt); background:var(--bj-band); color:var(--bj-gold);
}

.bj-studio .pair-rail__render{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px !important; width:auto !important; margin-top:0 !important;
}
.bj-studio .pair-rail__render em{
  font-style:normal; font-size:9.5px; letter-spacing:.14em; opacity:.75;
  border-left:1px solid rgba(255,255,255,.35); padding-left:9px;
}

/* ── render quality, REMOVED ──────────────────────────────────────────────
   `.render-q` styled two segmented radiogroups on the action row — the Model
   toggle (Gemini / GPT) and the Send toggle (grey map / colour drawing) —
   and its first rule took the auto margin off .pair-rail__render so the
   group and the button sat together on the right. Both controls are out of
   the markup, so the button keeps its own margin-left:auto below and is the
   only thing on that row. Nothing here is referenced any more; the whole
   block is gone rather than left to be re-found by a future grep. */

/* the gold dot: this version has been rendered in metal */
.bj-studio .version-thumb{ position:relative; }
.bj-studio .v-gold{
  position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,#eccb5f,#a58a52);
  box-shadow:0 0 0 2px #fff;
}

/* ═══════════ THE ORDER PAIR — the approved set, visible to checkout ═════ */
.bj-studio .order-pair{
  display:flex; align-items:center; gap:10px;
  margin:12px 0 2px; padding:10px;
  border:1px solid var(--bj-gold-lt); background:var(--bj-band);
}
.bj-studio .order-pair__t{
  width:56px; height:56px; padding:0; border:1px solid var(--bj-hair);
  background:#000; cursor:pointer; overflow:hidden; flex:none;
  transition:border-color var(--menu-out), transform var(--menu-out);
}
.bj-studio .order-pair__t img{ width:100%; height:100%; object-fit:cover; display:block; }
.bj-studio .order-pair__t:hover{ transform:translateY(-1px); }
.bj-studio .order-pair__t.is-on{ border-color:var(--bj-gold); box-shadow:0 0 0 1px var(--bj-gold); }
.bj-studio .order-pair__lbl{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bj-muted);
  line-height:1.7;
}
.bj-studio .order-pair__lbl em{ font-style:normal; color:var(--bj-gold); }

/* ═══════════ THE DRAWING STUDIO ══════════════════════════════════════════
   A working surface in the Brites language: square corners, hairlines, ink
   for the active state. Four stacked rows — identity, tools, properties,
   artwork — then one footer of actions. Every row is `flex:none` so the
   artwork gets every pixel that is left and the modal never scrolls.       */
/* no pixel ceiling — see the sizing rule further down, which claims the
   viewport. A max-width here would quietly win over it on wide monitors. */
.bj-studio .markup__inner{ max-width:none; }

/* ── row 0: identity, mode, window controls ── */
/* ONE LINE. The eyebrow used to sit ON TOP of the title, which cost a
   whole line of height in a modal whose only scarce dimension is height —
   and bought nothing, because the bar is three-quarters empty across its
   width on any screen wide enough to draw on. It rides beside the title
   now. align-items:center rather than flex-start is what finally puts the
   full-screen button and the close cross on the same axis: the close is a
   .modal__close with padding of its own, so top-aligning two boxes of
   different heights could never line them up. */
.bj-studio .markup__bar{
  flex:none; display:flex; align-items:center; gap:14px;
  padding-bottom:8px; border-bottom:1px solid var(--bj-hair); margin-bottom:8px;
  /* ── AND IT WRAPS, AT EVERY WIDTH ──────────────────────────────────────
     This row only wrapped below 600px, so between there and about 1400 it
     simply overflowed: the reading toggle, full screen and the close cross
     were pushed off the right edge and out of reach. Adding the hoop switch
     made that budget tighter still. Wrapping is the only arrangement where
     a row of controls that grows over time cannot push its own last button
     off the end — and the close cross is the one control that must never be
     the casualty. */
  flex-wrap:wrap; row-gap:9px;
}
/* ── THE HEAD ROW'S TWO HALVES ────────────────────────────────────────────
   File and the engraving strip on the left; the reading toggle, full screen
   and the close cross on the right; one hairline standing between them.

   THE HEADING IS NOT SHOWN HERE. Its nodes stay in the markup and mkOpen
   still writes both on every open — only the row stops rendering them. The
   engraving control needs that width, and with the design itself on the
   sheet directly below, a line of type naming it was the least load-bearing
   thing in the row.

   The divider centres itself by having auto margins on BOTH sides: in a flex
   row a pair of auto margins splits the free space equally, so the rule sits
   midway between the strip and the toggle at any width, and everything after
   it is still driven hard right. No spacer element, nothing to keep in step. */
.bj-studio .markup__bar > .markup__id{ display:none; }
/* THE DIVIDER IS THE GAP. It began as a 1px element floated to the middle by
   a pair of auto margins, which centred it perfectly and could not survive
   the row wrapping — auto margins absorb free space, so on a wrapped line it
   would strand itself as a hairline with nothing either side of it.

   It is now the flexible space ITSELF, with the rule painted down its centre
   as a background. Same picture exactly, and three things fall out of it:
   the line is always mid-gap without arithmetic, the gap yields its width to
   real controls before any of them is squeezed, and on a wrapped row it
   collapses to its 24px minimum instead of taking a line to itself. */
.bj-studio .markup__div{
  display:block; flex:1 1 24px; min-width:0; align-self:stretch;
  background:linear-gradient(var(--bj-hair), var(--bj-hair)) center / 1px 100% no-repeat;
}
.bj-studio .markup__id{
  min-width:0; flex:1 1 auto; display:flex; align-items:baseline; gap:12px;
}
.bj-studio .markup__id .bj-eyebrow{ flex:none; margin:0; }
.bj-studio .markup__id h2{
  font-size:19px; margin:0; padding:0; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bj-studio .markup__id h2:after{ display:none; }
/* the same 32px box as .mk-icon beside it, so the two read as a pair */
.bj-studio .markup__close{
  position:static; flex:none; margin:0; padding:0;
  width:32px; height:32px; font-size:23px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.bj-studio .mk-icon{
  flex:none; width:32px; height:32px; border:1px solid var(--bj-hair); background:#fff;
  cursor:pointer; color:var(--bj-ink); display:inline-flex; align-items:center;
  justify-content:center; transition:border-color var(--menu-out), background var(--menu-out);
}
.bj-studio .mk-icon svg{ width:15px; height:15px; }
.bj-studio .mk-icon--wide{
  width:auto; padding:0 12px; gap:6px; font-size:9.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.bj-studio .mk-icon:hover{ border-color:var(--bj-ink); }
.bj-studio .mk-icon.is-on{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }

/* ── FILE ─────────────────────────────────────────────────────────────────
   The trigger borrows .mk-icon--wide so it is the same 32px box as #mkFull
   and the × at the other end of the bar, and the bar's own flex does the
   rest: .markup__id is the only flex:1 child, so a flex:none button placed
   before it sits hard left and everything else stays where it was.
   .mk-drop.is-open is set by wireDrops, which is what lights the button. */
.bj-studio .mk-file{ flex:none; }
.bj-studio .mk-file .mk-drop__b{ gap:7px; }
.bj-studio .mk-file .mk-caret{ margin-left:1px; }
.bj-studio .mk-file.is-open .mk-drop__b{
  background:var(--bj-ink,#1c1d1d); border-color:var(--bj-ink,#1c1d1d); color:#fff;
}
.bj-studio .mk-file__menu{ min-width:266px; }
/* an item for a picture that does not exist yet. There is no global disabled
   style in this sheet — only two scoped ones — so the File menu brings its
   own rather than looking identical to a live row. */
.bj-studio .mk-file__menu .mk-item[disabled]{ opacity:.4; cursor:default; }
.bj-studio .mk-file__menu .mk-item[disabled]:hover{ background:none; }
.bj-studio .mk-file__menu .mk-item[disabled]:hover::before{ display:none; }
.bj-studio .mk-file__menu .mk-item.is-working{ opacity:.55; cursor:progress; }

/* the share shortcuts: one row of square taps, sized like the menu's own
   icons so the row reads as part of the list rather than a widget in it */
.bj-studio .mk-share{
  display:flex; align-items:center; gap:4px; padding:4px 9px 7px; flex-wrap:wrap;
}
.bj-studio .mk-share__b{
  width:32px; height:32px; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--bj-hair); background:#fff; color:var(--bj-ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--menu-out), background var(--menu-out), color var(--menu-out);
}
.bj-studio .mk-share__b svg{ width:16px; height:16px; }
.bj-studio .mk-share__b:hover{ border-color:var(--bj-ink); background:#f1ede3; }
.bj-studio .mk-share__b:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:1px; }
.bj-studio .mk-share__b[disabled]{ opacity:.35; cursor:default; }
.bj-studio .mk-share__b[disabled]:hover{ border-color:var(--bj-hair); background:#fff; }
/* the native sheet is the primary one where it exists, so it reads as the
   filled button and the networks as the outlined alternatives */
/* the one place in this sheet where a missing token would be INVISIBLE
   rather than merely unstyled — white on a ground that fell back to
   transparent — so this pair names its own fallback */
.bj-studio .mk-share__b[data-share="native"]{
  background:var(--bj-ink,#1c1d1d); border-color:var(--bj-ink,#1c1d1d); color:#fff;
}
.bj-studio .mk-share__b[data-share="native"]:hover{ background:#000; }
.bj-studio .mk-share__b[data-share="native"][disabled]{
  background:#fff; color:var(--bj-ink); border-color:var(--bj-hair);
}

@media (max-width:600px){
  /* the bar wraps at this width; File keeps its place at the head of row 1
     and the title takes what is left rather than being squeezed to nothing */
  .bj-studio .mk-file{ order:0; }
  .bj-studio .mk-file .mk-drop__b span{ display:none; }
  .bj-studio .mk-file .mk-drop__b{ width:32px; padding:0; gap:0; }
  .bj-studio .mk-share__b{ width:40px; height:40px; }
  .bj-studio .mk-share__b svg{ width:19px; height:19px; }
  .bj-studio .mk-share{ padding:8px 16px 12px; gap:6px; }
}

/* ── PRINT ────────────────────────────────────────────────────────────────
   "Print this sheet" prints the DRAWING, not the studio around it. The
   printed page is built by mkPrintSheet() as a single <img> in a container
   the rest of the document is hidden behind, so nothing here depends on the
   modal's layout surviving a print stylesheet. */
@media print{
  body.bj-printing > *{ display:none !important; }
  body.bj-printing > #bjPrintSheet{ display:block !important; }
  #bjPrintSheet{
    position:static; margin:0; padding:0; width:100%;
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  #bjPrintSheet img{ max-width:100%; max-height:88vh; object-fit:contain; }
  #bjPrintSheet .bjp__cap{
    font:11px/1.5 system-ui, sans-serif; color:#444; text-align:center;
  }
  @page{ margin:12mm; }
}
#bjPrintSheet{ display:none; }

/* ── rows 1 & 2 ── */
.bj-studio .markup-toolbar,
.bj-studio .markup-props{
  flex:none; display:flex; align-items:center; gap:6px;
  min-width:0; overflow-x:auto; overflow-y:visible; scrollbar-width:thin;
}
.bj-studio .markup-toolbar{ padding-bottom:5px; }
.bj-studio .markup-props{
  padding:5px 0 6px; margin-bottom:7px;
  border-top:1px solid var(--bj-hair); border-bottom:1px solid var(--bj-hair);
}
/* ── NOTHING ON THIS ROW MAY BE OUT OF REACH ──────────────────────────────
   It used to scroll sideways past about a laptop's width, with Import stuck
   to the right edge over the top of it. Two failures came out of that pair,
   and the screenshot showed both at once: Import's opaque backing sat ON the
   Delete button and clipped it to "DEL", and anything further left simply
   left the row — present in the DOM, reachable only by a horizontal swipe
   most people never think to try on a desktop.

   The row wraps now, at every width, exactly as it already did on a phone.
   A second line costs nothing here (the artwork below is square and
   height-bound, so the width beside it was dead space anyway) and it is the
   only arrangement where EVERY control is visible without a gesture.

   Wrapping and `position:sticky` cannot both be right: sticky exists to
   survive a scroll that no longer happens, and pinning an opaque box to the
   edge of a row that wraps is what did the clipping. So Import stands
   down to static and keeps only its auto margin, which still carries it to
   the right of whichever line it lands on. */
.bj-studio .markup-props{ overflow:visible; flex-wrap:wrap; row-gap:6px; }
.bj-studio .markup-props > .mk-import{
  position:static; box-shadow:none; padding-left:0; margin-left:auto;
}
/* the hint is the one thing here that is not a control, so it yields first:
   it absorbs every spare pixel, then ellipses away to nothing rather than
   pushing a button onto another line */
.bj-studio .markup-props > .markup-tip{ flex:1 1 0; margin-left:0; }
.bj-studio .markup-tools{ display:flex; gap:2px; align-items:center; flex:0 0 auto; }
.bj-studio .mk-tool{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:1px solid transparent; background:none; cursor:pointer;
  padding:7px 10px; font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bj-muted);
  transition:color var(--menu-out), border-color var(--menu-out), background var(--menu-out);
}
.bj-studio .mk-tool svg{ width:14px; height:14px; flex:none; }
.bj-studio .mk-tool:hover{ color:var(--bj-ink); }
.bj-studio .mk-tool.is-on{ border-color:var(--bj-ink); background:var(--bj-ink); color:#fff; }

/* Sticky, not merely last: both rows scroll horizontally when the tools run
   out of room, and Undo scrolled off the right on a phone. Pinned to the edge
   it stays one tap away at every width, with a fade so the tools read as
   passing underneath it rather than colliding with it. */
.bj-studio .markup-hist{
  margin-left:auto; display:flex; gap:4px; align-items:center; flex:0 0 auto;
  position:sticky; right:0; background:#fff; padding-left:14px;
  box-shadow:-14px 0 12px -6px #fff;
}
.bj-studio .mk-hist{
  border:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  width:30px; height:30px; font-size:14px; color:var(--bj-ink);
  transition:border-color var(--menu-out), opacity var(--menu-out);
}
.bj-studio .mk-hist:hover:not(:disabled){ border-color:var(--bj-ink); }
.bj-studio .mk-hist:disabled{ opacity:.35; cursor:default; }
.bj-studio .mk-hist--clear{
  width:auto; padding:0 11px; font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bj-muted);
}

/* ── the property controls ── */
.bj-studio .mk-prop{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  padding:6px 9px; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bj-ink); flex:0 0 auto;
  transition:border-color var(--menu-out), opacity var(--menu-out);
}
.bj-studio .mk-prop svg{ width:13px; height:13px; }
.bj-studio .mk-prop:hover:not(:disabled){ border-color:var(--bj-ink); }
.bj-studio .mk-prop:disabled{ opacity:.32; cursor:default; }
.bj-studio .mk-prop.is-on{ border-color:var(--bj-ink); background:var(--bj-ink); color:#fff; }
.bj-studio .mk-prop--danger:not(:disabled):hover{ border-color:#c0392b; color:#c0392b; }
.bj-studio .mk-swatch{
  width:14px; height:14px; background:var(--c,#1c1d1d); box-shadow:0 0 0 1px var(--bj-hair);
  display:inline-block; flex:none;
}
.bj-studio .mk-swatch--none{
  background:
    linear-gradient(45deg, transparent 44%, #c0392b 44%, #c0392b 56%, transparent 56%), #fff;
}
.bj-studio .mk-wline{ width:14px; height:3px; background:var(--bj-ink); display:inline-block; flex:none; }
.bj-studio .mk-fontA{ font-size:13px; font-weight:700; line-height:1; }
.bj-studio .mk-sep{ width:1px; height:20px; background:var(--bj-hair); flex:none; margin:0 4px; }
/* The instruction that used to be a black slab across the artwork. It shrinks
   before anything else does and truncates rather than being cut mid-word:
   it is the least important thing in the row by a distance. */
.bj-studio .markup-tip{
  margin-left:auto; padding-left:16px; flex:0 1 auto; min-width:0;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bj-muted); white-space:nowrap; text-align:right;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── THE SELECTION'S SIZE, AS A PAIR OF FIELDS ────────────────────────────
   Built from .mk-prop's own parts so it reads as one more control on the row
   rather than a form dropped into it: the same hairline box, the same 9.5px
   uppercase label, the same height. The axis letter is the label and the
   unit sits once at the end, because "X 12.4  Y 8.1 mm" is how a person says
   it and repeating the unit twice is noise on a crowded row. */
.bj-studio .mk-size2{
  display:inline-flex; align-items:center; gap:0; flex:0 0 auto;
  border:1px solid var(--bj-hair); background:#fff; height:30px;
}
.bj-studio .mk-size2__f{
  display:inline-flex; align-items:center; gap:7px; padding:0 9px; cursor:text;
  border-left:1px solid var(--bj-hair);
}
.bj-studio .mk-size2__f:first-child{ border-left:0; }
/* the axis letter is the only thing telling one number from the other, so it
   is sized to be read at a glance rather than squinted at: 9px uppercase was
   small enough that X and Y blurred into the hairlines around them */
.bj-studio .mk-size2__f > span{
  font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--bj-ink);
  opacity:.62;
}
.bj-studio .mk-size2 input{
  width:46px; border:0; padding:0; background:none; outline:none;
  font-family:inherit; font-size:11px; font-weight:600; color:var(--bj-ink);
  text-align:right; -moz-appearance:textfield;
}
.bj-studio .mk-size2 input:disabled{ color:var(--bj-muted); opacity:.55; }
/* the focus ring goes on the FIELD, not the bare input: the input has no
   border of its own, so a default ring would float unattached inside the box */
.bj-studio .mk-size2__f:focus-within{ background:var(--bj-band); }
.bj-studio .mk-size2__f:focus-within > span{ color:var(--bj-ink); opacity:1; }
/* THE GROUP BREAK. A shaded full-height gutter between the size cluster and
   the angle — wider than any hairline in the box and shaded rather than
   drawn, so the two groups separate pre-attentively: you see two controls
   before you have read a single character. It replaces the rot field's own
   border-left, which is why that is cancelled below. */
.bj-studio .mk-size2__sep{
  align-self:stretch; flex:0 0 auto; width:10px;
  border-left:1px solid var(--bj-hair); border-right:1px solid var(--bj-hair);
  background:var(--bj-band);
}
/* the angle sits in the same box as X and Y, told apart by its glyph and by
   the degree sign that follows it — one control reading "how big and which
   way round", which is how a person thinks about a placed mark */
.bj-studio .mk-size2__sep + .mk-size2__f{ border-left:0; }
.bj-studio .mk-size2__f--rot{ padding-left:8px; }
.bj-studio .mk-size2__f--rot > span{
  font-size:17px; line-height:1; font-weight:600; letter-spacing:0;
  position:relative; top:-1px;
}
.bj-studio .mk-size2__f--rot input{ width:40px; }
.bj-studio .mk-size2__u--deg{
  font-size:13px; letter-spacing:0; border-left:0; padding:0 9px 0 1px;
}
.bj-studio .mk-size2__u{
  padding:0 9px 0 7px; font-style:normal;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bj-muted); line-height:28px;
}

/* ── nested menus, the Mac way: the button acts, the caret opens ── */
.bj-studio .mk-drop{ position:relative; flex:0 0 auto; }
.bj-studio .mk-caret{
  width:0; height:0; margin-left:2px; flex:none;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid currentColor; opacity:.75;
}
/* FIXED, not absolute, and placed by script. The two toolbar rows scroll
   horizontally when they run out of room, and a scroll container clips its
   children on BOTH axes however you write overflow-y — an absolutely
   positioned menu inside one is guillotined. Taking the menu out of flow
   entirely is the only version that cannot be clipped by anything. */
.bj-studio .mk-drop__menu{
  position:fixed; z-index:1200; min-width:212px; max-height:min(70vh, 520px);
  /* AND A CEILING. The menu is position:fixed and shrink-wraps its widest
     child, which is the explanatory note at the foot — so one extra clause
     in that sentence stretched the whole menu to 1352px, nearly the width of
     the screen, and flung every item's hint 1200px away from its label.
     A menu is a list of choices, not a paragraph. */
  max-width:min(340px, calc(100vw - 32px));
  overflow-y:auto; background:#fff; border:1px solid var(--bj-ink); padding:5px;
  box-shadow:0 18px 44px rgba(28,29,29,.22);
}
.bj-studio .mk-drop__head{
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bj-muted); padding:8px 9px 5px;
}
.bj-studio .mk-drop__note{
  font-size:11px; line-height:1.6; color:var(--bj-muted);
  padding:7px 9px 4px; border-top:1px solid var(--bj-hair); margin-top:4px;
}
.bj-studio .mk-drop__note b{ color:var(--bj-ink); font-weight:700; }
.bj-studio .mk-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:8px 9px;
  font-size:12.5px; color:var(--bj-ink); font-family:inherit;
  transition:background var(--menu-out);
}
.bj-studio .mk-item svg{ width:15px; height:15px; flex:none; opacity:.75; }
.bj-studio .mk-item em{
  font-style:normal; margin-left:auto; padding-left:12px;
  font-size:10px; letter-spacing:.06em; color:var(--bj-muted); white-space:nowrap;
}
/* HOVER HAS TO LAND BEFORE THE CURSOR HAS GONE. --bj-band on white is a
   two-per-cent difference — legible when you stop and look for it, invisible
   when you are running down a list — and it arrived through a transition,
   so a fast cursor outran its own highlight. It is now a real tone, it
   carries an ink bar on the leading edge so the eye catches the ROW rather
   than a faint wash, and it is instant: a hover state is feedback, and
   feedback that eases in is feedback that arrives after the decision. */
.bj-studio .mk-item{ transition:none; position:relative; }
.bj-studio .mk-item:hover,
.bj-studio .mk-item:focus-visible{
  background:#f1ede3; color:var(--bj-ink); outline:none;
}
.bj-studio .mk-item:hover::before,
.bj-studio .mk-item:focus-visible::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--bj-gold,#b8935a);
}
.bj-studio .mk-item:hover em{ color:var(--bj-ink); }
.bj-studio .mk-item:active{ background:#e7e1d3; }
.bj-studio .mk-item.is-on{ background:var(--bj-ink); color:#fff; }
.bj-studio .mk-item.is-on svg{ opacity:1; }
.bj-studio .mk-item.is-on em{ color:rgba(255,255,255,.7); }
.bj-studio .mk-item--w i{ width:34px; background:currentColor; flex:none; display:block; }
.bj-studio .mk-item--font{ font-size:15px; padding:9px; }
.bj-studio .mk-tick{
  width:14px; height:14px; flex:none; border:1px solid var(--bj-hair); position:relative;
}
.bj-studio .mk-item--tog.is-on .mk-tick:after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:11px; line-height:1;
}
.bj-studio .mk-swatches{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:5px; padding:2px 9px 7px;
}
.bj-studio .mk-sw{
  width:100%; aspect-ratio:1/1; border:1px solid var(--bj-hair); cursor:pointer;
  background:var(--c); padding:0;
}
.bj-studio .mk-sw--none{
  background:linear-gradient(45deg, transparent 44%, #c0392b 44%, #c0392b 56%, transparent 56%), #fff;
}
.bj-studio .mk-sw.is-on{ box-shadow:0 0 0 2px var(--bj-ink); border-color:var(--bj-ink); }
.bj-studio .mk-sizes{ display:flex; gap:5px; padding:2px 9px 8px; }
.bj-studio .mk-size{
  flex:1; border:1px solid var(--bj-hair); background:#fff; cursor:pointer; padding:7px 0;
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--bj-ink);
}
.bj-studio .mk-size.is-on{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }
.bj-studio .mk-wandrow{ display:flex; align-items:center; gap:9px; padding:4px 11px 10px; }
.bj-studio .mk-wandrow label{
  flex:0 0 auto; font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bj-muted); white-space:nowrap;
}
.bj-studio .mk-wandrow input{ flex:1; min-width:70px; accent-color:var(--bj-ink); }
.bj-studio .mk-wandrow b{ flex:0 0 24px; text-align:right; font-size:11px; font-weight:700; color:var(--bj-muted); }
/* the transparent picture reads as transparent, not as white */
.bj-studio .mk-checker{
  background-image:
    linear-gradient(45deg, #eceae6 25%, transparent 25%, transparent 75%, #eceae6 75%),
    linear-gradient(45deg, #eceae6 25%, transparent 25%, transparent 75%, #eceae6 75%);
  background-size:14px 14px;
  background-position:0 0, 7px 7px;
}
.bj-studio .mk-fade{ display:flex; align-items:center; gap:9px; padding:2px 9px 9px; }
.bj-studio .mk-fade label{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bj-muted);
}
.bj-studio .mk-fade input{ flex:1; accent-color:var(--bj-ink); }
.bj-studio .mk-sign-list{ display:flex; flex-direction:column; gap:3px; padding:0 4px; }
.bj-studio .mk-sign{
  display:flex; align-items:center; gap:8px; border:1px solid var(--bj-hair);
  background:#fff; cursor:pointer; padding:5px 7px; width:100%;
}
.bj-studio .mk-sign:hover{ border-color:var(--bj-ink); }
.bj-studio .mk-sign svg{ width:auto; height:26px; flex:1; }
.bj-studio .mk-sign__x{
  border:0; background:none; cursor:pointer; color:var(--bj-muted); font-size:14px;
  padding:0 3px; flex:none;
}
.bj-studio .mk-sign__x:hover{ color:#c0392b; }
.bj-studio .mk-sign-empty{
  font-size:11.5px; color:var(--bj-muted); padding:3px 9px 7px; line-height:1.6;
}

/* ── the crop bar ─────────────────────────────────────────────────────────
   It REPLACES the property row rather than stacking above it, and wears the
   same rules and the same vertical band. Anything that appears as an extra
   row shortens the square stage the instant you reach for the tool — the
   artwork would jump under the cursor at the exact moment you are trying to
   drag a box on it. */
.bj-studio .markup-crop{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:7px 0 8px; margin-bottom:10px; min-height:45px;
  border-top:1px solid var(--bj-hair); border-bottom:1px solid var(--bj-hair);
  font-size:11.5px; color:var(--bj-ink);
}
.bj-studio .markup-crop .btn{ width:auto; margin:0; padding:8px 15px; font-size:9.5px; }
.bj-studio .markup-crop > span{ margin-right:auto; }

/* ── the artwork ── */
/* ── THE ROOM, AND THE SHEET IN IT ───────────────────────────────────────
   The stage used to BE the sheet: one square box, bordered, with the drawing
   filling it exactly. That is why a wide screen showed a band of dead white
   down each side — the sheet is square by law and sized by the height left
   over, so every pixel of width past that height had nothing to do.

   The stage is now the ROOM: it takes the whole width it is given. The SHEET
   is #markupView, still exactly square, centred in it, and it is the sheet
   that carries the border and the white. The space either side is no longer
   nothing — it is the surface you pan across, drop a picture onto, and drag
   a selection out of, and it is toned so it reads as off-sheet at a glance.

   Nothing about the artwork changed. Every mark is still normalised against
   the sheet, the composite is still painted square, and the sheet is still
   the largest square the room allows. What changed is that the room is no
   longer pretending to be the sheet. */
.bj-studio .markup-stage{
  position:relative; width:100%; height:100%; max-height:56vh;
  background:var(--bj-band,#f6f3ec); overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
/* the fallback for a browser with no size containers: the room and the sheet
   collapse back into one square box, exactly as they were */
@supports not (container-type: size){
  .bj-studio .markup-stage{
    aspect-ratio:1/1; height:auto;
    border:1px solid var(--bj-hair); background:#fff;
  }
}
.bj-studio .markup-stage[data-tool="draw"],
.bj-studio .markup-stage[data-tool="highlight"],
.bj-studio .markup-stage[data-tool="sign"],
.bj-studio .markup-stage[data-tool="line"],
.bj-studio .markup-stage[data-tool="arrow"],
.bj-studio .markup-stage[data-tool="rect"],
.bj-studio .markup-stage[data-tool="round"],
.bj-studio .markup-stage[data-tool="ellipse"],
.bj-studio .markup-stage[data-tool="ring"],
.bj-studio .markup-stage[data-tool="tri"],
.bj-studio .markup-stage[data-tool="star"],
.bj-studio .markup-stage[data-tool="heart"],
.bj-studio .markup-stage[data-tool="bail"]{ cursor:crosshair; }
.bj-studio .markup-stage[data-tool="text"],
.bj-studio .markup-stage[data-tool="callout"],
.bj-studio .markup-stage[data-tool="label"]{ cursor:text; }
.bj-studio .markup-stage[data-tool="bucket"],
.bj-studio .markup-stage[data-tool="wand"]{ cursor:crosshair; }
.bj-studio .markup-stage[data-tool="erase"]{ cursor:not-allowed; }
.bj-studio .markup-stage[data-tool="select"]{ cursor:default; }
.bj-studio .markup-stage.is-cropping{ cursor:crosshair; }
.bj-studio .markup-base{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  pointer-events:none;
}
/* left / top / width / height are written by mkOpen's size() once the halo
   is known — see MK_HALO. Until then the canvas simply fills the sheet, which
   is what it did before there was a halo at all. */
.bj-studio .markup-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.bj-studio .markup-overlay{ position:absolute; inset:0; pointer-events:none; }

/* the single floating text editor — one at a time, always the live one */
.bj-studio .mk-editor{
  position:absolute; z-index:6; pointer-events:auto; resize:none; overflow:hidden;
  background:rgba(255,255,255,.97); border:1px solid var(--bj-ink);
  box-shadow:0 10px 30px rgba(28,29,29,.22);
  padding:6px 8px; line-height:1.35; color:var(--bj-ink);
  font-family:inherit; outline:none; min-width:110px;
}
/* selection furniture */
.bj-studio .mk-sel{
  position:absolute; border:1px dashed var(--bj-ink); pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.8) inset;
}
/* several things selected: ONE box around the lot, plus a whisper of an
   outline on each member so it stays obvious what is in the selection and
   not merely how far it reaches */
.bj-studio .mk-sel--many{ border-style:solid; border-color:var(--bj-gold); }
.bj-studio .mk-selone{
  position:absolute; pointer-events:none; border:1px dashed rgba(28,29,29,.34);
}
/* the rubber band */
.bj-studio .mk-marq{
  position:absolute; pointer-events:none; z-index:6;
  border:1px dashed var(--bj-ink); background:rgba(28,29,29,.06);
}
/* ── THE MARQUEE, AND ITS MARCHING ANTS ──────────────────────────────────
   Two dashed borders in counter-phase, one white and one black, the outer
   one crawling: the pattern every editor has used for a selection since
   MacPaint, and the only one that stays visible over black artwork, over
   white paper and over a photograph all at once. A single dashed border
   disappears into whichever of those it happens to be sitting on.
   The animation is decoration; @media (prefers-reduced-motion) stops it and
   the two-tone dash still reads perfectly still. */
/* EACH LAYER TRAVELS ALONG ITS OWN EDGE AND STAYS ON IT. The keyframe has to
   restate the cross-axis anchor of every layer — a background-position
   animation replaces the whole list, so a `to` of `-8px 0` for the BOTTOM
   edge does not mean "slide left", it means "slide left and go to the top",
   and the bottom of the box crawls up through the middle of it while the
   animation runs. One 8px step is exactly one dash pair, so the loop is
   seamless and there is no jump at the wrap. */
@keyframes mk-ants{
  to{ background-position:8px 0, -8px 100%, 0 -8px, 100% 8px; }
}
.bj-studio .mk-msel{
  position:absolute; pointer-events:none; z-index:8;
  outline:1px solid rgba(255,255,255,.72); outline-offset:0;
  background-image:
    linear-gradient(90deg, var(--bj-ink) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(90deg, var(--bj-ink) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(0deg,  var(--bj-ink) 50%, rgba(0,0,0,0) 50%),
    linear-gradient(0deg,  var(--bj-ink) 50%, rgba(0,0,0,0) 50%);
  background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-position:0 0, 0 100%, 0 0, 100% 0;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  animation:mk-ants .7s linear infinite;
}
.bj-studio .mk-msel.is-live{ animation:none; }
/* what you can do to it, put where the hand already is */
.bj-studio .mk-msbar{
  position:absolute; z-index:9; pointer-events:auto;
  transform:translate(-50%, calc(-100% - 9px));
  display:flex; align-items:center; gap:2px; padding:3px;
  background:#fff; border:1px solid var(--bj-hair);
  box-shadow:0 6px 20px rgba(20,20,20,.16); white-space:nowrap;
}
.bj-studio .mk-msbar.is-below{ transform:translate(-50%, 9px); }
.bj-studio .mk-msbar button{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bj-ink); padding:6px 9px; line-height:1;
}
.bj-studio .mk-msbar button:hover{ background:var(--bj-band); }
.bj-studio .mk-msbar button:active{ background:var(--bj-hair); }
.bj-studio .mk-msbar button:disabled{
  color:var(--bj-muted); opacity:.45; cursor:default; background:none;
}
.bj-studio .mk-msbar__n{
  padding:0 8px; font-size:10px; font-weight:700; letter-spacing:.08em;
  color:var(--bj-muted); border-left:1px solid var(--bj-hair);
}
.bj-studio .mk-msbar__x{ font-size:15px !important; padding:4px 8px !important; color:var(--bj-muted) !important; }
.bj-studio .mk-msbar__x:hover{ color:var(--bj-ink) !important; }
/* crosshair while the tool is in hand, the same as every other box-drawing
   tool in the studio */
.bj-studio .markup-stage[data-tool="marquee"]{ cursor:crosshair; }
@media (prefers-reduced-motion: reduce){
  .bj-studio .mk-msel{ animation:none; }
}

.bj-studio .mk-handle{
  position:absolute; width:11px; height:11px; margin:-6px 0 0 -6px;
  background:#fff; border:1px solid var(--bj-ink); pointer-events:auto; z-index:7;
}
.bj-studio .mk-handle--rot{ border-radius:50%; cursor:grab; }
.bj-studio .mk-handle[data-h="nw"], .bj-studio .mk-handle[data-h="se"]{ cursor:nwse-resize; }
.bj-studio .mk-handle[data-h="ne"], .bj-studio .mk-handle[data-h="sw"]{ cursor:nesw-resize; }

/* ── MOBILE DELETE, WITHOUT ANOTHER TOOLBAR SLOT ─────────────────────────
   A phone has no Delete key, and keeping the Layers sheet open just to throw
   away the object already selected on the canvas is unnecessary friction.
   This pill follows that selection and disappears with it. It is absent from
   desktop layout entirely, so the mature keyboard/context-menu workflow does
   not gain a redundant control. */
.bj-studio .mk-mobile-delete{ display:none; }
@media (max-width:900px){
  .bj-studio .mk-mobile-delete:not([hidden]){
    position:absolute; z-index:12; pointer-events:auto;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    width:auto; min-width:88px; height:44px; min-height:44px;
    margin:0; padding:0 13px 0 11px;
    border:1px solid rgba(176,55,43,.58); border-radius:999px;
    background:rgba(255,255,255,.96); color:#a6372d;
    box-shadow:0 7px 22px rgba(28,29,29,.18), inset 0 1px 0 #fff;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    font-size:10px; font-weight:800; line-height:1; letter-spacing:.13em;
    text-transform:uppercase; white-space:nowrap;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    transform:translate(-50%,0);
    transition:background .14s ease, color .14s ease, border-color .14s ease,
               box-shadow .14s ease, transform .1s ease;
  }
  .bj-studio .mk-mobile-delete.is-above{ transform:translate(-50%,-100%); }
  .bj-studio .mk-mobile-delete svg{ width:16px; height:16px; flex:none; }
  .bj-studio .mk-mobile-delete:active{
    background:#a6372d; border-color:#a6372d; color:#fff;
    box-shadow:0 3px 12px rgba(120,35,28,.24);
  }
  .bj-studio .mk-mobile-delete:focus-visible{
    outline:2px solid rgba(166,55,45,.42); outline-offset:2px;
  }
}

.bj-studio .markup-foot{
  flex:none; display:flex; align-items:center; gap:14px; margin-top:9px;
}
.bj-studio .markup-count{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bj-muted);
}
.bj-studio .markup-actions{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.bj-studio .markup-actions .btn{ width:auto; margin-top:0; padding:10px 16px; white-space:nowrap; }

/* ── full screen: the same surface, all of the glass ── */
.bj-studio .markup__inner.is-full{
  max-width:none; width:100vw; height:100vh; max-height:100vh;
}
.bj-studio .markup__inner.is-full .markup__body{ padding:12px 20px 10px; }

/* ═══════════ THE DOCK — layers and the image library ════════════════════
   Docked beside the artwork on a desktop, a full-height sheet on a phone —
   one set of markup and one set of handlers either way, because a panel you
   can only reach on a laptop is a feature half your customers do not have. */
.bj-studio .markup-main{ min-height:0; }
/* The square stage is limited by HEIGHT, always — so on a wide screen the
   width left over beside it is not the artwork's to take, it is dead space.
   The panel takes some of it: a library of thumbnails is strictly better at
   440px than at 300, and nothing else in the room wanted those pixels. */
.bj-studio .mk-dock{
  width:clamp(300px, 21vw, 440px); min-height:0; display:flex; flex-direction:column;
  border:1px solid var(--bj-hair); background:#fff;
}
.bj-studio .mk-dock__grab{ display:none; }
/* Folded: the tab bar and nothing else. It is never gone, because there is
   no longer a button anywhere that would bring it back. */
.bj-studio .mk-dock.is-min .mk-dock__body,
.bj-studio .mk-dock.is-min .mk-pane{ display:none !important; }
.bj-studio .mk-dock.is-min{ height:auto; min-height:0; flex:none; align-self:start; }
/* on a desktop the panel is part of the room, so folding it is not offered */
.bj-studio .mk-dock__x{ display:none; }
.bj-studio .mk-dock__tabs{
  flex:none; display:flex; align-items:stretch; border-bottom:1px solid var(--bj-hair);
}
.bj-studio .mk-dock__tab{
  flex:1; border:0; background:none; cursor:pointer; padding:13px 8px;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bj-muted); border-bottom:2px solid transparent;
  transition:color var(--menu-out), border-color var(--menu-out);
}
.bj-studio .mk-dock__tab.is-on{ color:var(--bj-ink); border-bottom-color:var(--bj-gold); }
.bj-studio .mk-dock__x{
  flex:none; width:42px; border:0; border-left:1px solid var(--bj-hair);
  background:none; cursor:pointer; font-size:19px; color:var(--bj-muted);
}
.bj-studio .mk-dock__x:hover{ color:var(--bj-ink); }
.bj-studio .mk-pane{ display:none; min-height:0; flex:1 1 auto; flex-direction:column; }
.bj-studio .mk-pane.is-on{ display:flex; }
.bj-studio .mk-pane__bar{
  flex:none; display:flex; gap:3px; padding:8px;
  border-bottom:1px solid var(--bj-hair); align-items:stretch;
}
/* FIVE controls in one narrow panel now, not nine — the icon buttons share
   what is left after the one that carries a word, and shrink rather than
   wrap; a bar that wraps puts a lone stretched Delete on a line of its own */
.bj-studio .mk-act--wide{ flex:0 0 auto !important; padding:0 8px !important; gap:4px; }
/* ── THE OVERFLOW ────────────────────────────────────────────────────────
   The wrapper must behave as one of the bar's buttons, because that is what
   it looks like: .mk-drop is a plain div and would otherwise not take the
   flex sizing its siblings do, and its menu is position:fixed so it needs a
   positioned parent to hang from. */
.bj-studio .mk-pane__bar .mk-drop{ flex:1 1 0; min-width:0; display:flex; position:relative; }
.bj-studio .mk-pane__bar .mk-drop .mk-act{ flex:1 1 auto; }
/* ── NARROW, BECAUSE IT IS A LIST OF SEVEN SHORT LABELS ──────────────────
   It was coming out around seven hundred pixels across — partly the inline
   ceiling that was overruling the stylesheet (see openMenu), partly its own
   note, which is a sentence and sentences are wide. A menu is as wide as its
   labels need and no wider; the note wraps. */
.bj-studio .mk-layer-more__menu{ min-width:184px; max-width:224px; }
.bj-studio .mk-layer-more__menu .mk-item{ padding:7px 8px; font-size:12px; gap:8px; }
.bj-studio .mk-layer-more__menu .mk-item em{ padding-left:10px; font-size:9.5px; }
.bj-studio .mk-layer-more__menu .mk-drop__head{ padding:7px 8px 4px; }
.bj-studio .mk-layer-more__menu .mk-drop__note{
  padding:6px 8px 3px; font-size:10px; line-height:1.5;
}
/* the ⋯ says, without opening, that something inside it is not at its
   default — otherwise a sort set once is a setting nobody can find again */
.bj-studio .mk-dot{
  position:absolute; top:4px; right:4px; width:6px; height:6px;
  background:var(--bj-gold,#a58a52); border-radius:50%; pointer-events:none;
}
.bj-studio .mk-dot[hidden]{ display:none; }
/* a chosen option in a menu that is a set of choices rather than a set of
   commands: the gold bar is the same one the selected layer row wears, so
   "this one is on" reads the same way everywhere in the studio */
.bj-studio .mk-item--pick{ padding-left:15px; }
.bj-studio .mk-item--pick.is-on{
  box-shadow:inset 3px 0 0 0 var(--bj-gold,#a58a52); font-weight:700;
}
.bj-studio .mk-item--pick.is-on svg{ opacity:1; }
/* a menu item cannot be `disabled` and stay reachable, so it is greyed and
   refuses the click instead — see mkLayerChrome */
.bj-studio .mk-item.is-off{ opacity:.34; cursor:default; }
.bj-studio .mk-item.is-off:hover{ background:none; }
.bj-studio .mk-item.is-off:hover::before{ display:none; }
.bj-studio .mk-act[aria-pressed="true"]{
  border-color:var(--bj-ink); background:var(--bj-ink); color:#fff;
}
.bj-studio .mk-pane__bar .mk-act{ flex:1 1 0; min-width:0; padding:0 2px; }
.bj-studio .mk-act{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  min-height:34px; padding:0 10px; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bj-ink);
  white-space:nowrap; overflow:hidden;
  transition:border-color var(--menu-out), opacity var(--menu-out);
}
/* ── A THIRD BIGGER ─────────────────────────────────────────────────────
   14px in a 34px button is a lot of button around very little icon, and the
   grouping pair — corner brackets around two small squares — has more going
   on inside its 24-unit box than an arrow does, so it was the first to stop
   reading. 18.5px is 14 × 1.33, and the buttons have the room: they are
   34px tall and share the bar's width between them. */
.bj-studio .mk-act svg{ width:18.5px; height:18.5px; flex:none; }
.bj-studio .mk-act:hover:not(:disabled){ border-color:var(--bj-ink); }
.bj-studio .mk-act:disabled{ opacity:.32; cursor:default; }
.bj-studio .mk-act--danger:not(:disabled):hover{ border-color:#c0392b; color:#c0392b; }
.bj-studio .mk-act__sep{
  flex:0 0 1px; align-self:stretch; background:var(--bj-hair); margin:0 2px;
}

/* ── AND THE LIST SAYS WHEN IT IS NOT THE STACK ─────────────────────────
   A layer list's order carries meaning — the row above is in front — so a
   list that has been re-sorted and does not say so is a list the customer
   will read as their artwork having rearranged itself. One line, the sort
   named, and the way back in the same breath. */
.bj-studio .mk-layers__sorted{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:#f6eeddcc;
  border-bottom:1px solid var(--bj-hair);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bj-gold,#a58a52);
}
.bj-studio .mk-layers__sorted[hidden]{ display:none; }
.bj-studio .mk-layers__sorted button{
  margin-left:auto; border:1px solid var(--bj-gold,#a58a52); background:#fff;
  color:var(--bj-gold,#a58a52); font:inherit; padding:3px 8px; cursor:pointer;
}
.bj-studio .mk-layers__sorted button:hover{ background:var(--bj-gold,#a58a52); color:#fff; }
/* the grip is a promise that the row can be dragged somewhere meaningful,
   and while the list is sorted it cannot be — so it stops looking like one */
.bj-studio .mk-layers.is-sorted .mk-layer__grip{ cursor:default; opacity:.3; }

/* ── the layer list ─────────────────────────────────────────────────────
   Deliberately roomy. A layer row is a drag target, a tap target and a
   thumbnail all at once, and cramming those into 28px is how layer panels
   become things people are frightened of. */
.bj-studio .mk-layers{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px; touch-action:pan-y;
  /* the reveal animation writes scrollTop directly, every frame. Two browser
     behaviours can silently take that scroll away from it and both read to
     its hand-detector as "someone else scrolled", cancelling the reveal:
       · scroll-behavior:smooth (one theme-wide `*` rule is enough) turns a
         direct write into an async glide, so the read-back disagrees with
         the write;
       · scroll anchoring nudges scrollTop when content above the viewport
         changes — which is every thumbnail the observer paints in.
     This container does its own scrolling, so both are switched off HERE,
     on the element, where no theme rule can reach past us. */
  scroll-behavior:auto; overflow-anchor:none;
}
.bj-studio .mk-layer{
  display:flex; align-items:center; gap:10px; padding:8px 8px 8px 4px;
  border:1px solid transparent; background:#fff; cursor:pointer;
  user-select:none; -webkit-user-select:none; position:relative;
  /* ── AND IT HAS TO LAND WHEN THE CLICK DOES ─────────────────────────
     --menu-out is .30s on a curve that barely moves for its first half, so
     a row took a third of a second to look picked — measured, still 99% of
     the way to white 60ms after the pointer arrived. A selection that fades
     in after the decision has been made is a selection that gets missed,
     which is half of "the selection can be easily missed". The studio has
     already made this argument once, at .mk-item, and settled it the same
     way: --mk-in, which is a tenth of a second on a curve that starts. */
  transition:transform .16s var(--ease, ease),
             background var(--mk-in, .11s ease), border-color var(--mk-in, .11s ease);
}
.bj-studio .mk-layer + .mk-layer{ margin-top:3px; }
/* ── SELECTION HAS TO OUTRANK HOVER ──────────────────────────────────────
   These two used to paint the SAME background — hover and is-sel both took
   --bj-band — so the only thing separating "this is the layer you are
   working on" from "your pointer is passing over this" was a one-pixel
   border colour. In a list of two hundred rows that is not a signal, and
   under the pointer it vanished completely: the row being hovered looked
   exactly as selected as the row that was.

   Hover is a POINTER ECHO and gets the lightest touch that still registers.
   Selection is a STATE and gets three cues at once, so it survives being
   hovered, being scrolled past at speed, and being looked at by someone who
   does not distinguish the two tints: a gold bar down the leading edge, a
   warm fill, and the name in ink at full weight. The bar is an inset shadow
   rather than a border so the row's box does not change size when it is
   picked — these rows are measured, for the drag and for the centring. */
.bj-studio .mk-layer.is-sel{
  border-color:var(--bj-ink,#1c1d1d);
  box-shadow:inset 3px 0 0 0 var(--bj-gold,#a58a52);
}
.bj-studio .mk-layer.is-sel .mk-layer__name{ font-weight:700; color:var(--bj-ink,#1c1d1d); }
.bj-studio .mk-layer.is-sel .mk-layer__grip i{ background:var(--bj-gold,#a58a52); }
/* a hidden layer is dimmed — but a SELECTED hidden layer is still the thing
   being worked on, and dimming it to half was enough to lose it again */
.bj-studio .mk-layer.is-hidden{ opacity:.5; }
.bj-studio .mk-layer.is-hidden.is-sel{ opacity:.85; }
.bj-studio .mk-layer.is-dragging{
  z-index:5; background:#fff; border-color:var(--bj-gold);
  box-shadow:0 12px 30px rgba(28,29,29,.22); transition:none;
}
.bj-studio .mk-layer.is-shifted{ background:var(--bj-band); }
.bj-studio .mk-layer__grip{
  flex:none; width:16px; display:flex; flex-direction:column; gap:3px;
  align-items:center; cursor:grab; padding:6px 0;
}
.bj-studio .mk-layer__grip i{ width:10px; height:1.5px; background:var(--bj-hair); display:block; }
.bj-studio .mk-layer:hover .mk-layer__grip i{ background:var(--bj-muted); }
.bj-studio .mk-layer__thumb{
  flex:none; width:46px; height:46px; border:1px solid var(--bj-hair);
  background:#fff; display:block;
}
.bj-studio .mk-layer__body{ flex:1 1 auto; min-width:0; display:block; }
.bj-studio .mk-layer__name{
  display:block; font-size:13px; line-height:1.35; color:var(--bj-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .mk-layer__meta{
  display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bj-muted); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .mk-layer__b{
  flex:none; width:32px; height:32px; border:0; background:none; cursor:pointer;
  color:var(--bj-muted); display:inline-flex; align-items:center; justify-content:center;
}
.bj-studio .mk-layer__b svg{ width:16px; height:16px; }
.bj-studio .mk-layer__b:hover{ color:var(--bj-ink); }
/* ── groups in the list ────────────────────────────────────────────────
   A group reads as a folder: its own row, its members indented under it
   behind a twisty. The indent is what makes "these four move together"
   legible at a glance, so it is generous rather than tidy. */
.bj-studio .mk-layer--group{
  background:var(--bj-band); border-color:var(--bj-hair);
}
.bj-studio .mk-layer--group.is-sel{ border-color:var(--bj-ink); background:#fff; }
.bj-studio .mk-layer__tw{
  flex:none; width:22px; height:28px; border:0; background:none; cursor:pointer;
  color:var(--bj-muted); font-size:11px; line-height:1; padding:0;
}
.bj-studio .mk-layer__tw:hover{ color:var(--bj-ink); }
.bj-studio .mk-layer__folder{
  flex:none; width:30px; height:30px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--bj-ink);
}
.bj-studio .mk-layer__folder svg{ width:19px; height:19px; }
.bj-studio .mk-layer--child{ margin-left:26px; }
.bj-studio .mk-layer--child::before{
  content:""; position:absolute; left:-14px; top:0; bottom:0;
  width:1px; background:var(--bj-hair);
}
.bj-studio .mk-layers__empty,
.bj-studio .mk-lib__empty{
  font-size:12px; line-height:1.8; color:var(--bj-muted); padding:22px 14px; text-align:center;
}
.bj-studio .mk-layer-foot{
  flex:none; border-top:1px solid var(--bj-hair); padding:10px 12px 12px;
}
.bj-studio .mk-layer-foot__row{
  display:flex; align-items:center; gap:10px; margin-top:8px;
}
.bj-studio .mk-layer-foot__row > span{
  flex:0 0 54px; font-size:9.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bj-muted);
}
.bj-studio .mk-layer-foot__row input[type="text"]{
  flex:1; min-width:0; border:1px solid var(--bj-hair); background:#fff;
  padding:8px 9px; font-family:inherit; font-size:12.5px; color:var(--bj-ink);
}
.bj-studio .mk-layer-foot__row input[type="range"]{ flex:1; accent-color:var(--bj-ink); }
.bj-studio .mk-layer-foot__row b{
  flex:0 0 40px; text-align:right; font-size:10.5px; color:var(--bj-muted);
  font-weight:700;   /* the theme gives a bare <b> 900, which it never loads */
}

/* ── the library ── */
.bj-studio .mk-lib__head{ flex:none; padding:10px; border-bottom:1px solid var(--bj-hair); }
.bj-studio .mk-lib__search{ position:relative; }
.bj-studio .mk-lib__search svg{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--bj-muted); pointer-events:none;
}
.bj-studio .mk-lib__search input{
  width:100%; border:1px solid var(--bj-hair); background:#fff;
  padding:9px 10px 9px 30px; font-family:inherit; font-size:12.5px; color:var(--bj-ink);
}
/* Still in use by the OTHER library — the full-screen picker on step one,
   which has a whole modal's width to lay chips out in and no reason to trade
   them for menus. Only the dock's cramped 300px column did. */
.bj-studio .mk-lib__filters{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.bj-studio .mk-lib__sort{ display:flex; align-items:center; gap:4px; margin-top:8px; }

/* ── ONE LINE, WHATEVER THE PANEL'S WIDTH ────────────────────────────────
   Eight chips wrapped onto three rows here and took two rows of pictures
   with them, in a panel whose whole job is showing pictures. Two menus and
   a count cannot wrap, because there is nothing left to wrap. */
.bj-studio .mk-lib__pickrow{
  display:flex; align-items:center; gap:6px; margin-top:8px; min-width:0;
}
.bj-studio .mk-lib__pick{ flex:0 1 auto; min-width:0; }
.bj-studio .mk-lib__pick .mk-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
}
.bj-studio .mk-lib__pick .mk-chip span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .mk-lib__pick .mk-caret{ opacity:.6; }
/* a kind with nothing in it says so rather than disappearing */
.bj-studio .mk-lib__pick .mk-item[disabled]{ opacity:.42; cursor:default; }
.bj-studio .mk-lib__pick .mk-item[disabled]:hover{ background:none; }
.bj-studio .mk-lib__pick .mk-item[disabled]:hover::before{ display:none; }
.bj-studio .mk-chip{
  border:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  min-height:28px; padding:0 10px; font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bj-muted);
  transition:border-color var(--menu-out), background var(--menu-out), color var(--menu-out);
}
.bj-studio .mk-chip:hover{ color:var(--bj-ink); }
.bj-studio .mk-chip.is-on{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }
.bj-studio .mk-lib__count{
  margin-left:auto; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bj-muted); white-space:nowrap;
}
.bj-studio .mk-lib__grid{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px;
  grid-auto-rows:max-content; align-content:start;
}
.bj-studio .mk-lib__grid > p{ grid-column:1 / -1; }
.bj-studio .mk-asset{
  margin:0; border:1px solid var(--bj-hair); background:#fff; cursor:grab;
  position:relative; overflow:hidden; touch-action:none;
  transition:border-color var(--menu-out), box-shadow var(--menu-out);
}
.bj-studio .mk-asset:hover,
.bj-studio .mk-asset:focus-visible{ border-color:var(--bj-ink); box-shadow:var(--bj-shadow); outline:none; }
/* The <img> carries the square, not its wrapper. A wrapper whose only child
   is absolutely positioned contributes nothing to intrinsic height, so a grid
   sizes the row from the caption alone and clips the picture — which is
   exactly what happened. An image has intrinsic dimensions, so the row can
   be measured from it. */
.bj-studio .mk-asset__img{
  display:block; position:relative; background:var(--bj-band); overflow:hidden;
}
.bj-studio .mk-asset__img img{
  display:block; width:100%; aspect-ratio:1/1; height:auto;
  object-fit:contain; pointer-events:none;
}
.bj-studio .mk-asset__pair{
  position:absolute; left:6px; top:6px; background:var(--bj-gold); color:#fff;
  font-size:8px; font-weight:700; letter-spacing:.16em; padding:3px 6px;
}
.bj-studio .mk-asset__zoom{
  position:absolute; right:5px; top:5px; width:28px; height:28px;
  border:1px solid var(--bj-hair); background:rgba(255,255,255,.94); cursor:pointer;
  color:var(--bj-ink); display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--menu-out);
}
.bj-studio .mk-asset__zoom svg{ width:14px; height:14px; }
.bj-studio .mk-asset__kill{
  position:absolute; right:5px; top:38px; width:28px; height:28px;
  border:1px solid var(--bj-hair); background:rgba(255,255,255,.94); cursor:pointer;
  color:var(--bj-muted); display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--menu-out), color var(--menu-out), border-color var(--menu-out);
}
.bj-studio .mk-asset__kill svg{ width:14px; height:14px; }
.bj-studio .mk-asset__kill:hover{ color:#c0392b; border-color:#c0392b; }
.bj-studio .mk-asset:hover .mk-asset__zoom,
.bj-studio .mk-asset:focus-within .mk-asset__zoom,
.bj-studio .mk-asset:hover .mk-asset__kill,
.bj-studio .mk-asset:focus-within .mk-asset__kill{ opacity:1; }
.bj-studio .mk-asset figcaption{
  display:block; padding:6px 7px 7px; border-top:1px solid var(--bj-hair);
}
.bj-studio .mk-asset figcaption b{
  display:block; font-size:11.5px; font-weight:600; color:var(--bj-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .mk-asset figcaption span{
  display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bj-muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .mk-lib__foot{
  flex:none; border-top:1px solid var(--bj-hair); padding:9px 10px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.bj-studio .mk-lib__hint{
  font-size:10px; line-height:1.6; color:var(--bj-muted);
}
.bj-studio .mk-sign-empty b,
.bj-studio .markup-drop b{ font-weight:700; }
/* the picture that follows your finger from the library to the sheet */
.bj-studio .mk-ghost,
body > .mk-ghost{
  position:fixed; z-index:2000; width:104px; height:104px; object-fit:contain;
  transform:translate(-50%,-50%); pointer-events:none; opacity:.85;
  background:#fff; border:1px solid var(--bj-ink);
  box-shadow:0 14px 34px rgba(28,29,29,.3);
}
body > .mk-ghost.is-over{ opacity:1; border-color:var(--bj-gold); border-width:2px; }
.bj-studio .markup-stage.is-dropzone .markup-view{ outline:2px dashed var(--bj-gold); outline-offset:-3px; }
.bj-studio .markup-drop{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:var(--bj-gold); color:#fff; padding:7px 15px; z-index:6;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  pointer-events:none;
}
.bj-studio .mk-tool.is-busy{ opacity:.55; pointer-events:none; }

/* ── the preview ── */
.bj-studio .mk-zoom{ position:fixed; inset:0; z-index:1400; display:flex;
  align-items:center; justify-content:center; padding:20px; }
.bj-studio .mk-zoom[hidden]{ display:none; }
.bj-studio .mk-zoom__scrim{ position:absolute; inset:0; background:rgba(28,29,29,.72); }
.bj-studio .mk-zoom__box{
  position:relative; background:#fff; border:1px solid var(--bj-ink);
  width:min(900px, 100%); height:min(84vh, 780px); display:flex; flex-direction:column;
  box-shadow:0 30px 70px rgba(28,29,29,.4);
}
.bj-studio .mk-zoom__head{
  flex:none; display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--bj-hair);
}
.bj-studio .mk-zoom__head b{
  flex:1 1 auto; min-width:0; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio .mk-zoom__pair{ display:flex; gap:4px; flex:none; }
.bj-studio .mk-zoom__x{
  flex:none; width:34px; height:34px; border:1px solid var(--bj-hair);
  background:#fff; cursor:pointer; font-size:19px; color:var(--bj-ink);
}
.bj-studio .mk-zoom__stage{
  flex:1 1 auto; min-height:0; overflow:hidden; position:relative;
  background:var(--bj-band); touch-action:none;
}
.bj-studio .mk-zoom__stage img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.bj-studio .mk-zoom__foot{
  flex:none; display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-top:1px solid var(--bj-hair);
}
.bj-studio .mk-zoom__hint{
  flex:1 1 auto; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bj-muted);
}
.bj-studio .mk-zoom__foot .btn{ width:auto; margin:0; padding:11px 18px; }

/* the two panel toggles wear a count, so "how much is on this sheet" is
   answerable without opening anything */
.bj-studio .mk-hist--panel{ width:auto; min-width:34px; padding:0 8px; display:inline-flex;
  align-items:center; justify-content:center; gap:5px; }
.bj-studio .mk-hist--panel svg{ width:15px; height:15px; }
.bj-studio .mk-hist--panel b{ font-size:10px; font-weight:700; }
.bj-studio .mk-hist--panel.is-on{ background:var(--bj-ink); border-color:var(--bj-ink); color:#fff; }
.bj-studio .mk-drop--overflow{ display:none; }

/* ═══════════ TOUCH AND SMALL SCREENS ════════════════════════════════════
   The rule here is parity, not reduction: nothing is removed on a phone,
   only re-presented. Labels give way to icons, four less-used tools move
   into a "More" sheet that is still one tap away, every dropdown becomes a
   thumb-height bottom sheet, and the dock arrives from the bottom instead
   of the side. Everything a desktop can do, a phone can do. */
@media (max-width:900px){
  .bj-studio .mk-tool span,
  .bj-studio .mk-prop span{ display:none; }
  .bj-studio .mk-tool{ padding:9px 9px; }
  .bj-studio .markup-tip{ display:none; }
  .bj-studio .markup-mode__lbl{ display:none; }

  /* The dock arrives from the bottom, tall enough to actually work in — and
     because it is fixed, it is out of flow, so the artwork keeps the whole
     row to itself. .markup-main STAYS a flex row: it is the size container
     the square stage is measured against, and turning it into a block gave
     the stage a zero-height container query and a blank sheet. */
  .bj-studio .markup-main{ position:relative; gap:0; }
  /* the dock is position:fixed down here, so it is out of the grid — and
     the grid must stop reserving a column and a gutter for a thing that is
     no longer in it, or the artwork loses 16px it could have drawn on */
  /* THE EXTRA CLASS IS NOT DECORATION. This block sits above the base
     layout in the file, so at equal specificity the base wins on source
     order and the phone keeps the desktop's three columns. .markup__body
     always carries .modal__body too, so naming both is a free class. */
  .bj-studio .modal__body.markup__body{
    grid-template-columns:minmax(0,1fr); column-gap:0;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
  }
  /* ── THE RAIL LIES BACK DOWN ────────────────────────────────────────
     A column of tools down the side of a 390px screen is a column of tools
     taking a seventh of the drawing. Across the top it costs a row of the
     dimension a phone has more of, and it can scroll sideways, which a rail
     cannot. Same buttons, same handlers, laid the other way. */
  .bj-studio .markup__body .markup-toolbar{ grid-area:2 / 1 / 3 / 2; }
  .bj-studio .markup__body .markup-props  { grid-area:3 / 1 / 4 / 2; }
  .bj-studio .markup__body .markup-wrap   { grid-area:4 / 1 / 5 / 2; }
  .bj-studio .markup__body .markup-foot   { grid-area:5 / 1 / 6 / 2; }
  .bj-studio .markup__body .markup-rail{
    align-self:auto; flex-direction:row; align-items:center; width:auto;
    padding:0 0 5px; border:0; background:none; overflow-x:auto;
  }
  .bj-studio .markup__body .markup-rail .markup-tools{ flex-direction:row; gap:2px; }
  .bj-studio .markup__body .markup-rail .mk-tool{ width:auto; height:auto; padding:9px; }
  .bj-studio .markup__body .markup-rail .mk-tool svg{ width:16px; height:16px; transform:none !important; }
  .bj-studio .markup__body .markup-rail .mk-drop__b::after{ display:none; }
  .bj-studio .markup__body .markup-rail .mk-caret{ display:inline-block; }
  .bj-studio .markup__body .markup-rail .markup-hist{
    flex-direction:row; margin:0 0 0 auto; padding:0 0 0 14px; border-top:0;
    position:sticky; right:0; background:#fff; box-shadow:-14px 0 12px -6px #fff;
  }
  .bj-studio .markup__body .markup-rail .mk-hist{ width:30px; height:30px; }
  /* a finger has no hover, so there is no card to show */
  .bj-studio .mk-tip.mk-tip{ display:none; }
  /* .markup-main > , not .markup__body > : display:contents takes away the
     element's BOX, not its place in the DOM, so the dock's parent for the
     purposes of a child combinator is still .markup-main. And the extra
     class is deliberate — the desktop placement is declared further DOWN
     the file than this block, so an equal-specificity override here would
     lose on source order, and a fixed-position grid child that still
     carries a grid area gets sized against that area rather than against
     the viewport: the sheet came out the width of a column that is not even
     in the grid any more. */
  .bj-studio .markup-main > .mk-dock{ grid-area:auto; }
  /* ── WHERE THE PANEL SITS, AND WHAT IT MUST NEVER SIT ON ───────────
     A fixed sheet pinned to bottom:0 lands exactly on top of the modal's
     footer — which is where "Save & close" and "Use this as my reference"
     live. With the panel merely optional that was survivable; permanently
     on screen it meant a customer could draw a charm on a phone and never
     submit it. So it is pinned ABOVE the footer instead, and it sits BELOW
     the tool menus in the stack rather than over them: a menu is a thing
     you opened a moment ago and are looking at, and it wins. */
  .bj-studio .mk-dock{
    position:fixed; left:0; right:0; top:auto; z-index:1100;
    bottom:var(--bj-dockfoot, 0px);
    width:auto; flex-basis:auto; height:min(62vh, 560px);
    border:0; border-top:1px solid var(--bj-ink);
    box-shadow:0 -18px 44px rgba(28,29,29,.26);
    animation:mkSheetUp .18s ease-out;
  }
  .bj-studio .mk-dock__grab{
    display:block; flex:none; width:44px; height:4px; border-radius:2px;
    background:var(--bj-hair); margin:9px auto 3px;
  }
  .bj-studio .mk-dock__tab{ padding:15px 8px; font-size:11px; }
  /* on a phone it IS offered, because a sheet across the bottom that can
     never get out of the way is a sheet in the way */
  .bj-studio .mk-dock__x{ display:block; width:52px; font-size:18px; }
  .bj-studio .mk-dock.is-min{
    height:auto; box-shadow:0 -10px 26px rgba(28,29,29,.18);
    animation:none;                       /* folded is a resting state, not an arrival */
  }
  .bj-studio .mk-dock.is-min .mk-dock__grab{ margin-bottom:0; }
  .bj-studio .mk-lib__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bj-studio .mk-asset__zoom{ opacity:1; width:34px; height:34px; }
  /* no hover on a phone, so both controls simply stay visible */
  .bj-studio .mk-asset__kill{ opacity:1; width:34px; height:34px; top:45px; }
  .bj-studio .mk-act{ min-height:40px; padding:0 13px; }
  .bj-studio .mk-chip{ min-height:34px; padding:0 12px; }
  .bj-studio .mk-layer{ padding:11px 8px 11px 4px; }
  .bj-studio .mk-layer__thumb{ width:52px; height:52px; }
  .bj-studio .mk-layer__b{ width:40px; height:40px; }
  .bj-studio .mk-layer__grip{ width:22px; padding:10px 0; }
}
@keyframes mkSheetUp{ from{ transform:translateY(14%); opacity:.4; } to{ transform:none; opacity:1; } }

/* A 19px ruler on each edge of a 282px sheet spends an eighth of the drawing
   on numbers too small to read. Below this the frame collapses to nothing and
   the room takes the whole wrap back. */
@media (max-width:760px){
  .bj-studio .markup-wrap{ --mk-rule:0px; }
  .bj-studio .markup-wrap .mk-rule{ display:none; }

  /* NOTHING SCROLLS SIDEWAYS ON A PHONE. A control you have to swipe a row
     to reach is a control most people never find, so both rows wrap onto a
     second line instead. The vertical cost is free: the artwork is square
     and width-bound on a phone, so the space above and below it was dead
     anyway. */
  .bj-studio .markup-toolbar,
  .bj-studio .markup-props{ overflow:visible; flex-wrap:wrap; row-gap:6px; }
  .bj-studio .markup-hist{
    position:static; box-shadow:none; margin-left:0; padding-left:0;
  }
  .bj-studio .markup-tools{ flex-wrap:wrap; row-gap:6px; }

  /* Four tools still nest, because eleven across two lines is a wall. They
     are one tap away in a sheet, which is repurposing, not removal. */
  .bj-studio .mk-drop--overflow{ display:block; }
  .bj-studio #mkHighlight{ display:none; }

  /* every menu becomes a bottom sheet: full width, thumb-height rows, and
     a grab bar, because a 212px popover pinned to a 34px button is a desktop
     idea that does not survive contact with a thumb */
  .bj-studio .mk-drop__menu{
    position:fixed !important; left:0 !important; right:0 !important;
    top:auto !important; bottom:0 !important; width:auto; min-width:0;
    /* the desktop menu is capped so one long note cannot stretch it across
       the screen; a bottom sheet is MEANT to span the screen, so the cap is
       lifted here or the sheet sits 50px short of the right edge */
    max-width:none !important;
    max-height:min(72vh, 560px); padding:0 0 max(10px, env(safe-area-inset-bottom));
    border:0; border-top:1px solid var(--bj-ink);
    box-shadow:0 -18px 44px rgba(28,29,29,.26);
    animation:mkSheetUp .18s ease-out;
  }
  .bj-studio .mk-drop__menu:before{
    content:""; display:block; width:44px; height:4px; border-radius:2px;
    background:var(--bj-hair); margin:10px auto 4px;
  }
  .bj-studio .mk-item{ padding:15px 16px; font-size:15px; }
  .bj-studio .mk-item svg{ width:19px; height:19px; }
  .bj-studio .mk-item--font{ font-size:19px; padding:15px 16px; }
  .bj-studio .mk-drop__head{ padding:12px 16px 6px; }
  .bj-studio .mk-drop__note{ padding:10px 16px; font-size:12.5px; }
  .bj-studio .mk-swatches{ grid-template-columns:repeat(6, 1fr); gap:8px; padding:6px 16px 12px; }
  .bj-studio .mk-sizes{ padding:6px 16px 14px; gap:8px; }
  .bj-studio .mk-size{ padding:13px 0; font-size:14px; }
  .bj-studio .mk-fade{ padding:6px 16px 16px; }
  .bj-studio .mk-sign-list{ padding:0 12px; }
  /* a scrim under the sheet, so a stray tap closes it rather than drawing */
  .bj-studio .mk-drop.is-open:before{
    content:""; position:fixed; inset:0; z-index:1199; background:rgba(28,29,29,.34);
  }
  .bj-studio .mk-drop__menu{ z-index:1200; }
}

@media (max-width:640px){
  /* the ROWS wrap, not the rail — the rail is a column now, and telling a
     column to wrap does nothing */
  .bj-studio .pair-rail__row{ flex-wrap:wrap; }
  /* three segments share the row evenly rather than each taking its label's
     width, so "Greyscale Mask" cannot push "Charm" off the edge */
  .bj-studio .pair-toggle{ flex:1 1 auto; }
  .bj-studio .pair-toggle__b{ flex:1 1 0; padding:7px 6px; }
  .bj-studio .pair-rail__render{ margin-left:0; width:100% !important; justify-content:center; }
  .bj-studio .markup__id h2{ font-size:17px; }
  .bj-studio .markup__bar .bj-eyebrow{ display:none; }
  .bj-studio .mk-lib__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bj-studio .mk-zoom{ padding:0; }
  .bj-studio .mk-zoom__box{ width:100%; height:100%; border:0; }
}

/* A finger is not a mouse pointer. The grab handles double in size on any
   device whose primary input is coarse — small enough on a desktop to be
   precise, big enough on a phone to be hittable. */
@media (pointer:coarse){
  .bj-studio .mk-handle{ width:22px; height:22px; margin:-11px 0 0 -11px; }
  .bj-studio .mk-handle--rot{ width:26px; height:26px; margin:-13px 0 0 -13px; }
  .bj-studio .mk-hist{ width:38px; height:38px; }
  .bj-studio .markup-zoom-reset{ padding:9px 13px; }
  .bj-studio .mk-tool{ min-height:42px; }
  .bj-studio .mk-prop{ min-height:38px; }
  .bj-studio .markup-actions .btn{ min-height:48px; }
}

@media (prefers-reduced-motion:reduce){
  .bj-studio .pair-toggle__b,
  .bj-studio .pair-rail__markup,
  .bj-studio .mk-tool,
  .bj-studio .mk-prop,
  .bj-studio .order-pair__t{ transition-duration:.01ms !important; }
}

/* ═══════════ START CARD 3 — the sketchpad ═══════════════════════════════ */
.bj-studio .start-grid{ align-items:stretch; }
.bj-studio .picto-draw{ display:block; width:100%; height:100%; object-fit:cover; }
.bj-studio .draw-stage{ max-width:640px; margin:0 auto; }
.bj-studio .draw-invite{
  border:1px dashed var(--bj-hair); background:var(--bj-band);
  padding:44px 30px; text-align:center;
}
.bj-studio .draw-invite svg{ width:38px; height:38px; color:var(--bj-gold); margin-bottom:14px; }
.bj-studio .draw-invite b{ display:block; font-size:17px; margin-bottom:8px; }
.bj-studio .draw-invite p{
  font-size:13px; line-height:1.8; color:var(--bj-muted); max-width:420px; margin:0 auto 20px;
}
.bj-studio .draw-invite .btn{ width:auto; margin:0; padding:12px 26px; }


/* ═══════════ REFERENCE: from a 156px dock to a corner chip ═══════════════
   The dock spent a sixth of the design screen restating something the
   customer already knows. The chip says the same thing in 56px, never
   competes with the charm, and opens full size on click — where Change
   lives, because changing the reference restarts the design's basis and
   deserves a deliberate step rather than a button beside the preview. */
/* ── the reference chip lives in the chat header now — OUTSIDE the artwork,
   always in reach, one click to the full-size view (where Change lives). The
   name beside it is the conversation's subtitle, so nothing is said twice
   and the header stays one slim row. ── */
.bj-studio .chat__head--slim{
  display:flex; align-items:center; gap:10px;
  padding:6px 14px !important; box-sizing:border-box; max-height:52px;
}
.bj-studio .chat__head--slim .chat__title{ font-size:14.5px; line-height:1.2; }
.bj-studio .chat__headmain{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.bj-studio .chat__head--slim .chat__meta{ margin-top:0; font-size:10.5px; }
.bj-studio .chat__head--slim .rail-version{ flex:none; }
.bj-studio .ref-chip{
  position:relative; flex:none; width:38px; height:38px; padding:0;
  border:1px solid var(--bj-hair); border-left:3px solid var(--bj-gold);
  background:#fff; cursor:zoom-in; overflow:hidden;
  transition:border-color var(--menu-out), box-shadow var(--menu-out), transform var(--menu-out);
}
.bj-studio .ref-chip:hover{
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(28,29,29,.18);
}
.bj-studio .ref-chip__img,
.bj-studio .ref-chip__img img,
.bj-studio .ref-chip__img svg{
  width:100%; height:100%; object-fit:cover; display:block;
}
.bj-studio .ref-chip__zoom{
  position:absolute; right:0; bottom:0; background:rgba(28,29,29,.72); color:#fff;
  font-size:9px; line-height:1; padding:2px 3px; pointer-events:none;
}
/* the dock is gone: give its whole height budget back to the charm */
.bj-studio .gen-grid{ --dock-h:0px; --dock-gap:0px; }
.bj-studio .gen-grid.has-rail{
  --rail-h:92px;
  /* 114px is the no-rail budget; the rail's own height is subtracted on top
     of it rather than baked into a second magic number, so this line does not
     have to be re-tuned every time the rail gains or loses a row. */
  --stage-size:min(64vh, calc(100vh - var(--bj-chrome) - 114px - var(--rail-h)));
}
.bj-studio .gen-grid:not(.has-rail){
  --stage-size:min(64vh, calc(100vh - var(--bj-chrome) - 114px));
}

/* Change lives in the enlarged view now */
.bj-studio .ref-lightbox__cap{ flex-wrap:wrap; }
.bj-studio .ref-lightbox__change.btn{
  width:auto; margin-top:0; padding:9px 16px; flex:none;
}
@media (max-width:560px){
  .bj-studio .ref-lightbox__hint{ display:none; }
  .bj-studio .ref-chip__lbl em{ max-width:96px; }
}

/* ═══════════ PAIR RAIL — nothing may be cut off, EVER ═══════════════════
   The old breakpoints keyed on VIEWPORT width, but the rail's room is the
   STAGE's width, which is viewport-HEIGHT-driven — a short wide window kept
   the full labels in a narrow rail and the render button walked off the
   frame. Container queries key on the rail's own width, so the shrink steps
   fire exactly when room actually runs out: the credit note goes first, then
   the markup label, then the toggle tightens. overflow:hidden is the final
   fence — degraded is acceptable, bleeding outside the frame is not.

   With the rail split in two, the view segments own a whole row and the
   render button owns another, so these steps now fire far later than they
   used to. They are kept because a narrow stage is still a narrow stage: the
   three view segments are the thing most likely to run out of room. */
.bj-studio .pair-rail{ min-width:0; overflow:hidden; container-type:inline-size; }
.bj-studio .pair-toggle{ flex:0 1 auto; min-width:0; }
.bj-studio .pair-rail__markup{ flex:0 0 auto; white-space:nowrap; margin-left:auto; }
.bj-studio .pair-rail__render.btn{
  margin-left:auto; flex:0 1 auto; min-width:0; white-space:nowrap;
}
.bj-studio .pair-rail__render.btn > span{ overflow:hidden; text-overflow:ellipsis; }
/* ── ONE EARLIER STEP, BECAUSE THE MIDDLE SEGMENT GOT LONGER ──────────────
   The middle view segment was "Gold mask" and is now "Greyscale Mask" — five
   characters more at .16em tracking, so the three-segment row is roughly 40%
   wider in the middle than the steps below were tuned against. This tightens
   the tracking and the side padding well before anything is at risk, so the
   longer name never reaches the overflow:hidden fence. The 320px step below
   still does the harder squeeze. */
@container (max-width: 440px){
  .bj-studio .pair-toggle__b{ padding:7px 10px; letter-spacing:.12em; }
}
@container (max-width: 420px){
  .bj-studio .pair-rail__render em{ display:none; }
}
@container (max-width: 360px){
  .bj-studio .pair-rail__markup span{ display:none; }
  .bj-studio .pair-rail__markup{ padding:8px 10px; }
}
@container (max-width: 320px){
  .bj-studio .pair-toggle__b{ padding:7px 8px; font-size:9px; letter-spacing:.1em; }
  .bj-studio .pair-rail__row{ gap:6px; }
}
/* browsers without container queries fall back to viewport steps */
@supports not (container-type: inline-size){
  @media (max-width:1120px){ .bj-studio .pair-rail__render em{ display:none; } }
  @media (max-width:980px){ .bj-studio .pair-rail__markup span{ display:none; } }
}

/* ═══════════ MARKUP STUDIO — fits the viewport, never scrolls ═══════════ */
/* A DEFINITE height, not a max — the square stage sizes itself from the
   height left over, and a flex chain measured against an indefinite parent
   resolves to nothing (it collapsed the canvas to 2px). The modal is a
   working surface: filling the viewport is the right behaviour anyway. */
/* An explicit WIDTH, not just a max: .modal__inner is flex:0 1 auto, so the
   modal is shrink-to-fit and the dock would take its 300px straight out of
   the artwork. Claiming the width up front means opening a panel widens the
   window instead of shrinking the drawing. */
/* ── THE STUDIO TAKES THE GLASS IT IS GIVEN ───────────────────────────────
   This used to be min(100vw - 32px, 1180px), and 1500px with the dock open.
   Those two numbers were the whole of the "wide monitor" bug: past about
   1210px the modal simply stopped growing and the extra screen became
   margin — dead grey either side of a working surface that had asked for
   more room. Same at 940px of height on a tall display.

   There is no ceiling now. Width and height are the viewport less a hair,
   so the studio is as big as the screen allows at every size, and the dock
   no longer needs a second width: opening it re-divides a window that was
   already as wide as it could be, rather than widening the window.

   The artwork stays square and centres itself in whatever it is handed, so
   a very wide monitor spends its extra width on the toolbars and the dock —
   which is exactly where the crowding was. */
.bj-studio .markup__inner{
  display:flex; flex-direction:column;
  width:calc(100vw - 32px);
  height:calc(100vh - 28px);
  max-height:calc(100vh - 28px);
  overflow:hidden;
}
/* ══════════ THE BODY IS A GRID, AND THE DOCK IS A COLUMN ════════════════
   It used to be a column of five stacked rows with the dock nested INSIDE
   the artwork row. Two things followed from that and both were wrong: the
   dock could never be taller than the artwork, and the footer — "Save &
   close", "Use this as my reference" — ran the full width UNDERNEATH the
   dock, so the two buttons that submit the customer's work sat under a
   panel rather than under the thing they act on.

   Now the four working rows own column 1 and the dock owns column 2 for
   their whole height. The panel is as tall as the modal, and every control
   that belongs to the artwork — undo/redo above it, the actions below it —
   lines up with the artwork instead of with the window.

   .markup-main keeps its element, because the JS and the phone rules both
   name it, but becomes display:contents so .markup-wrap and .mk-dock are
   grid items of the body itself. Nothing moved in the markup. */
.bj-studio .markup__body{
  display:grid; min-height:0; flex:1 1 auto;
  /* rail · work · panel. Three columns and four rows, and the tool rail and
     the panel each own their column for the whole height, so the only thing
     stacked above the sheet is the one bar that describes the selection. */
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  column-gap:14px;
  /* every millimetre here is a millimetre off the square below, so this is
     as tight as the type allows rather than as tight as it looks */
  padding:14px 22px 14px; overflow:visible;
}
.bj-studio .markup__bar   { grid-area:1 / 1 / 2 / 4; }
.bj-studio .markup-toolbar{ grid-area:2 / 1 / 5 / 2; }
.bj-studio .markup-props  { grid-area:2 / 2 / 3 / 3; }
.bj-studio .markup-main   { display:contents; }
.bj-studio .markup-wrap   { grid-area:3 / 2 / 4 / 3; }
.bj-studio .markup-foot   { grid-area:4 / 2 / 5 / 3; }
.bj-studio .mk-dock       { grid-area:2 / 3 / 5 / 4; }
/* the strays — two hidden file inputs, the library lightbox and the layer
   context menu — are out of flow already; pinning them to the first cell
   makes certain not one of them can ever open a sixth row */
.bj-studio .markup__body > .mk-vh,
.bj-studio .markup__body > .mk-zoom,
.bj-studio .markup__body > .mk-ctx{ grid-area:1 / 1 / 2 / 2; }

/* ── THE RULER FRAME ─────────────────────────────────────────────────────
   The wrap is no longer a centring flexbox — it is a two-by-two frame with
   the rulers on the top and left edges, the unit in the corner, and the room
   filling what is left. Which is where every drawing application since
   MacPaint has put them, because a ruler that is not welded to the edge of
   the canvas is a ruler you cannot read a position off. */
.bj-studio .markup-wrap{
  min-height:0; min-width:0;
  display:grid;
  grid-template-columns:var(--mk-rule,19px) minmax(0,1fr);
  grid-template-rows:var(--mk-rule,19px) minmax(0,1fr);
}
.bj-studio .mk-rule{
  display:block; background:var(--bj-band,#f4f1ea); min-width:0; min-height:0;
}
.bj-studio .mk-rule__corner{
  grid-area:1 / 1; padding:0; border:0;
  border-right:1px solid var(--bj-hair); border-bottom:1px solid var(--bj-hair);
  font-family:inherit; font-size:7.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bj-muted); cursor:pointer;
  transition:color var(--menu-out), background var(--menu-out);
}
.bj-studio .mk-rule__corner:hover{ color:var(--bj-ink); background:#fff; }
.bj-studio .mk-rule--x{
  grid-area:1 / 2; width:100%; height:100%;
  border-bottom:1px solid var(--bj-hair);
}
.bj-studio .mk-rule--y{
  grid-area:2 / 1; width:100%; height:100%;
  border-right:1px solid var(--bj-hair);
}
.bj-studio .markup-stage{ grid-area:2 / 2; }
/* THE ROOM TAKES EVERYTHING; THE SHEET TAKES THE SMALLER AXIS.
   The sheet must be square on BOTH axes, because every mark is stored
   normalized against it and the composite is painted on a square canvas.
   Height alone is not enough: on a narrow phone a max-width clamps the width
   while the height keeps its value and the box goes oblong (282x444 at 390px
   wide) — every stroke would then land somewhere other than where it was
   drawn. min(100cqh, 100cqw) takes the smaller of the two axes, exactly, and
   it is now #markup-view that takes it rather than the stage.

   Without size containers the two collapse back into one square box and the
   room is the sheet, exactly as it was before. */
.bj-studio .markup-stage{
  height:100%; width:auto; aspect-ratio:1/1; max-width:100%; max-height:100%;
  flex:none;
}
@supports (container-type: size){
  /* the ROOM is the size container now, not the wrap: the wrap includes the
     two ruler tracks, and a sheet measured against those would be nineteen
     pixels too big on each axis and no longer square */
  .bj-studio .markup-stage{
    container-type:size;
    width:100%; height:100%; aspect-ratio:auto;
    max-width:none; max-height:none;
  }
}

/* ═══════════ THE WORK AREA'S OWN SCROLLBARS ══════════════════════════════
   Present only while the sheet is zoomed past 100% — mkScrollSync unhides
   them — because at fit there is nothing off-screen to reach and a pair of
   permanent rails on a drawing surface is furniture.

   Deliberately not the browser's. `overflow` is not available here: the
   sheet is moved by a CSS transform (px/py/z), not by a scroll offset, so
   there is no scrollable box for a native bar to attach to. These are the
   transform's own read-out, and dragging one writes back through mkPanBy —
   the same single clamp every other movement goes through.

   SMALL BUT CATCHABLE. The rail is 10px so there is a real target, while the
   thumb is drawn at 4px and grows to 7px under the pointer: at rest it reads
   as a hairline the eye skips, and it thickens the moment a hand approaches.
   Inset from the corner by their own width so the two never cross. */
.bj-studio .mk-sbar{
  position:absolute; z-index:3; opacity:.9;
  background:transparent; touch-action:none;
}
.bj-studio .mk-sbar--x{ left:4px; right:14px; bottom:0; height:10px; }
.bj-studio .mk-sbar--y{ top:4px; bottom:14px; right:0; width:10px; }
.bj-studio .mk-sbar__thumb{
  position:absolute; display:block; border-radius:99px;
  background:rgba(28,29,29,.28);
  transition:background .15s ease, transform .15s ease;
}
.bj-studio .mk-sbar--x .mk-sbar__thumb{ top:3px; height:4px; min-width:26px; }
.bj-studio .mk-sbar--y .mk-sbar__thumb{ left:3px; width:4px; min-height:26px; }
.bj-studio .mk-sbar:hover .mk-sbar__thumb,
.bj-studio .mk-sbar.is-drag .mk-sbar__thumb{ background:rgba(28,29,29,.62); }
/* grown from the rail's inner edge, so thickening never moves the thumb's
   own centre line and the bar cannot appear to jump under the cursor */
.bj-studio .mk-sbar--x:hover .mk-sbar__thumb,
.bj-studio .mk-sbar--x.is-drag .mk-sbar__thumb{ transform:scaleY(1.75); }
.bj-studio .mk-sbar--y:hover .mk-sbar__thumb,
.bj-studio .mk-sbar--y.is-drag .mk-sbar__thumb{ transform:scaleX(1.75); }
.bj-studio .mk-sbar--x .mk-sbar__thumb{ transform-origin:50% 100%; }
.bj-studio .mk-sbar--y .mk-sbar__thumb{ transform-origin:100% 50%; }

.bj-studio .markup-foot{ flex:none; }

/* ═══════════════ THE TOOL RAIL ═══════════════════════════════════════════
   Standing the tool row up costs a column of a room that had width to spare
   and gives back a row of the height the square sheet is short of. It also
   puts every tool on the short edge of the drawing instead of a screen away
   from it — which is why Photoshop, Illustrator, Figma and Procreate all
   arrived at the same arrangement.

   overflow:visible is load-bearing. The base .markup-toolbar scrolls
   sideways, and a scroll container clips on BOTH axes however you write it;
   a magnified icon inside one would be guillotined at the exact moment it
   grew.                                                                    */
.bj-studio .markup-rail{
  align-self:stretch; flex-direction:column; align-items:stretch; gap:0;
  width:52px; padding:5px 4px; overflow:visible;
  border:1px solid var(--bj-hair); background:#fff;
}
.bj-studio .markup-rail .markup-tools{ flex-direction:column; gap:1px; overflow:visible; }
.bj-studio .markup-rail .mk-tool{
  width:42px; height:42px; padding:0; gap:0; justify-content:center;
  /* scaled from the centre so the wave reads as a wave and not as a shove:
     an origin on the left edge makes every icon lurch rightward instead of
     swelling in place */
  transform-origin:center center; will-change:transform;
  transition:transform .13s cubic-bezier(.22,.9,.25,1),
             background var(--menu-out), color var(--menu-out),
             border-color var(--menu-out);
}
.bj-studio .markup-rail .mk-tool span{ display:none; }
.bj-studio .markup-rail .mk-tool svg{ width:18px; height:18px; }
.bj-studio .markup-rail .mk-drop{ overflow:visible; }
/* Photoshop's corner mark: a tool with more inside it says so with a wedge
   in its bottom-right, not with a caret that takes a whole label's width */
.bj-studio .markup-rail .mk-caret{ display:none; }
.bj-studio .markup-rail .mk-drop__b{ position:relative; }
.bj-studio .markup-rail .mk-drop__b::after{
  content:""; position:absolute; right:3px; bottom:3px; width:0; height:0;
  border-left:4.5px solid transparent; border-bottom:4.5px solid currentColor;
  opacity:.5; pointer-events:none;
}
.bj-studio .markup-rail .mk-drop__b.is-on::after,
.bj-studio .markup-rail .mk-drop__b:hover::after{ opacity:.85; }
/* undo and redo settle at the foot of the rail behind a rule, the way a
   palette's odd-one-out controls always do */
.bj-studio .markup-rail .markup-hist{
  flex-direction:column; gap:3px; margin:auto 0 0; padding:7px 0 1px;
  border-top:1px solid var(--bj-hair);
  position:static; box-shadow:none; background:none;
}
.bj-studio .markup-rail .mk-hist{ width:42px; height:32px; }
/* A FLYOUT OFF A RAIL IS A CHOICE, NOT A DOCUMENT. It is read in a glance
   with the pointer already moving toward it, so it is tighter than a menu
   you pull down and stand reading. */
.bj-studio .markup-rail .mk-drop__menu{ min-width:196px; padding:4px; }
.bj-studio .markup-rail .mk-item{ padding:6px 9px; font-size:12px; gap:8px; }
.bj-studio .markup-rail .mk-item svg{ width:14px; height:14px; }
.bj-studio .markup-rail .mk-item em{ font-size:9px; padding-left:14px; }
.bj-studio .markup-rail .mk-drop__head{ padding:7px 9px 4px; }
.bj-studio .markup-rail .mk-drop__note{ padding:6px 9px 3px; font-size:10.5px; }

/* the rail is not a scroller, so a short window must not strand the last
   tool: it shrinks the buttons before it hides anything */
@media (max-height:820px){
  .bj-studio .markup-rail{ width:48px; }
  .bj-studio .markup-rail .mk-tool{ width:40px; height:37px; }
  .bj-studio .markup-rail .mk-hist{ width:40px; height:28px; }
}
/* AND ONE MORE STEP, because the rail grew by a tool. Eight buttons at 37px
   fitted a laptop with the dock showing; nine do not, and the one that falls
   off the bottom of a column that does not scroll is simply gone. The glyph
   shrinks with the button so the icon never fills its own square. */
@media (max-height:660px){
  .bj-studio .markup-rail .mk-tool{ height:33px; }
  .bj-studio .markup-rail .mk-tool svg{ width:16px; height:16px; }
  .bj-studio .markup-rail .mk-hist{ height:26px; }
}

/* ═══════════════ THE HOVER CARD ══════════════════════════════════════════
   Every tool answers the same three questions the two help sheets answer —
   what is this, what does it do, how do I get to it — and it answers them
   in the same shapes: a charm with the thing drawn on it, a name, one short
   line. It is the small end of one system, not a second one.

   pointer-events:none, always: a card that can be hovered is a card that
   can steal the click you were about to make on the button underneath.     */
.bj-studio .mk-tip{
  position:fixed; z-index:1250; pointer-events:none;
  display:flex; align-items:center; gap:11px; max-width:264px;
  padding:9px 13px 9px 9px;
  background:#fff; border:1px solid var(--bj-ink);
  box-shadow:0 14px 34px rgba(28,29,29,.19);
  opacity:0; transform:translateX(-6px) scale(.98); transform-origin:left center;
  transition:opacity .12s ease-out, transform .19s cubic-bezier(.16,1,.3,1);
}
.bj-studio .mk-tip.is-in{ opacity:1; transform:none; }
.bj-studio .mk-tip__ico{ width:40px; height:40px; flex:none; display:block; }
.bj-studio .mk-tip__say{ min-width:0; }
.bj-studio .mk-tip b{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:var(--bj-ink); line-height:1.25;
}
.bj-studio .mk-tip i{
  font-style:normal; font-size:8px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bj-gold,#b8935a);
  border:1px solid var(--bj-gold-lt,#e2d3ae); background:var(--bj-band,#faf7f0);
  padding:2px 5px; flex:none;
}
.bj-studio .mk-tip span{
  display:block; margin-top:3px;
  font-size:10.5px; line-height:1.45; color:var(--bj-muted);
}

/* ═══════════════ HOW A MENU ARRIVES ══════════════════════════════════════
   Placed by script, then animated — in that order, and it matters. The
   placement pass measures the menu, and a menu measured mid-scale reports a
   box it is not going to keep. So the class that runs the animation is added
   AFTER the numbers are in, and every keyframe finishes at the identity
   transform so nothing it does can survive to move the menu.               */
@keyframes mkPopDown{ from{ opacity:0; transform:translateY(-5px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes mkPopRight{ from{ opacity:0; transform:translateX(-7px) scale(.985); } to{ opacity:1; transform:none; } }
.bj-studio .mk-drop__menu.is-in{
  animation:mkPopDown .17s cubic-bezier(.16,1,.3,1);
  transform-origin:top left;
}
.bj-studio .mk-drop__menu.is-in--right{
  animation:mkPopRight .18s cubic-bezier(.16,1,.3,1);
  transform-origin:left center;
}
@media (prefers-reduced-motion: reduce){
  .bj-studio .mk-drop__menu.is-in,
  .bj-studio .mk-drop__menu.is-in--right{ animation:none; }
  .bj-studio .markup-rail .mk-tool{ transition:none; }
  .bj-studio .mk-tip{ transition:opacity .01s linear; }
}

/* ═══════════════ THE FOOT ════════════════════════════════════════════════
   These two buttons are how a design leaves the studio, and they were
   sitting flush against the bottom edge with fourteen pixels between them
   and the sheet — the tightest spacing in the modal, on its most important
   control. They get a rule above them, room around them, and a gap between
   them wide enough that neither is ever hit by accident.                   */
.bj-studio .markup-foot{
  gap:20px; margin-top:0; padding:14px 0 2px;
  border-top:1px solid var(--bj-hair);
}
.bj-studio .markup-actions{ gap:14px; }
.bj-studio .markup-actions .btn{ padding:13px 26px; }
.bj-studio .markup-actions .btn--ghost{ padding:13px 10px; }

/* Short viewports: shed the chrome before shedding the canvas. These used
   to LOOSEN the base — the base is tighter than they were now — so each one
   goes below what it inherits or it is not a short-viewport rule at all. */
@media (max-height:820px){
  .bj-studio .markup__body{ padding:10px 20px 9px; }
  .bj-studio .markup__bar{ padding-bottom:6px; margin-bottom:6px; }
  .bj-studio .markup-foot{ margin-top:7px; }
}
@media (max-height:700px){
  .bj-studio .markup__bar .bj-eyebrow{ display:none; }
  .bj-studio .markup__id h2{ font-size:17px; }
  .bj-studio .markup-props{ padding:3px 0 4px; margin-bottom:5px; }
  .bj-studio .markup-toolbar{ padding-bottom:3px; }
  .bj-studio .markup-actions .btn{ padding:9px 14px; }
}


/* ═══════════ MARKUP STUDIO — zoom & pan ═════════════════════════════════
   One transform on .markup-view carries the drawing, the ink canvas and
   every bubble together; the stage clips. Pointer math reads the view's
   rect, so every tool is exact at any zoom. */
.bj-studio .markup-view{
  position:absolute; inset:0; transform-origin:0 0; will-change:transform;
}
@supports (container-type: size){
  /* inset:0 + margin:auto centres a box with a definite width and height in
     both axes — and it leaves `transform` alone, which zoom and pan own. A
     translate(-50%) here would fight them for the same property. The size is
     read off .markup-wrap, which is the size container; the room fills it,
     so this is the same square the stage itself used to be. */
  .bj-studio .markup-view{
    inset:0; margin:auto;
    width:min(100cqw, 100cqh); height:min(100cqw, 100cqh);
    /* paper on a desk. The hairline alone was not enough against a band
       that is nearly white in this theme, and knowing exactly where the
       sheet ends is the one thing this arrangement must never leave in
       doubt — everything outside it is not on the charm. box-shadow rather
       than a border, because a border would change the box the zoom, the
       pan and the bitmap are all measured against. */
    background:#fff;
    box-shadow:0 0 0 1px var(--bj-hair), 0 6px 26px rgba(28,29,29,.10);
  }
}
.bj-studio .markup-view .markup-base,
.bj-studio .markup-view .markup-canvas,
.bj-studio .markup-view .markup-overlay{ position:absolute; inset:0; }
.bj-studio .markup-view .markup-canvas{ width:100%; height:100%; }
.bj-studio .markup-stage[data-tool="pan"]{ cursor:grab; }
.bj-studio .markup-stage[data-tool="pan"]:active{ cursor:grabbing; }
.bj-studio .markup-zoom-reset{
  position:absolute; right:10px; top:10px; z-index:4;
  border:1px solid var(--bj-hair); background:rgba(255,255,255,.94); cursor:pointer;
  padding:5px 10px; font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bj-ink);
  box-shadow:0 4px 14px rgba(28,29,29,.14);
}
.bj-studio .markup-zoom-reset:hover{ border-color:var(--bj-ink); }

/* the two actions: Save (quiet) and Re-generate (the marks are the message) */
.bj-studio .markup-actions .btn--gold em{
  font-style:normal; font-size:9.5px; letter-spacing:.14em; opacity:.75;
  border-left:1px solid rgba(255,255,255,.35); padding-left:8px; margin-left:2px;
}
@media (max-width:640px){
  .bj-studio .markup-actions{ flex-wrap:wrap; }
  .bj-studio .markup-actions .btn--gold em{ display:none; }
}


/* ═══════════ STEP 1 · THE "YOUR REFERENCE IS READY" CARD ═════════════════
   This is the last thing a customer sees before they describe their charm,
   and it had grown by accretion: a status line, a name, a meta line, a
   setting and two actions, all stacked hard left at four different sizes
   with no rule between them. It read as a list of leftovers.

   It is one card with three bands now, in the order the eye wants them:
   WHAT WE HAVE (thumbnail, status, name, count) → HOW TO READ IT (the
   Design Interpretation field) → WHAT TO DO NEXT (the two actions). A
   hairline separates each band, so the setting is visibly a setting and the
   actions are visibly actions rather than more text.                      */
/* the thumbnail belongs to the FIRST band — it is the picture of the thing
   the status line and the name are describing. Centred against the whole
   card it floated down beside the setting instead. */
.bj-studio .upload-done{ align-items:flex-start; }
.bj-studio .up-body{ display:flex; flex-direction:column; }
.bj-studio .up-check{ margin-bottom:4px; }
.bj-studio .up-name{
  font-family:var(--bj-serif); font-size:20px; line-height:1.25; color:var(--bj-ink);
}
/* the fail card reuses .up-name for a SENTENCE, not a filename, so it must
   not inherit the filename treatment: nowrap + ellipsis cut the reason off
   mid-word, and on a phone the un-shrinkable line pushed the card past the
   screen edge. */
.bj-studio .upload-fail .up-name{
  font-size:16px; white-space:normal; overflow:visible; text-overflow:clip;
}
.bj-studio .up-body{ min-width:0; }
.bj-studio .up-meta{ margin-top:4px; font-size:13.5px; color:var(--bj-muted); }

/* ── the setting ─────────────────────────────────────────────────────────
   The label goes on its own line because it is a field label, not a chip in
   a row, and the two choices then SPLIT the width between them — equal
   halves of one decision, which is what they are. The "?" that
   mkInstallModeHelp() clones in sits at the end at its natural size. */
.bj-studio .markup-mode.markup-mode--inline{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:10px;
  /* align-self:stretch undoes the base rule's align-self:center, which the
     TOOLBAR needs to sit level in its row and which, inside this column,
     shrink-wrapped the whole field and floated it to the middle */
  align-self:stretch; width:100%;
  margin:18px 0 0; padding:18px 0 0;
  border:0; background:none;
  border-top:1px solid var(--bj-hair);
}
.bj-studio .markup-mode.markup-mode--inline .markup-mode__lbl{
  flex:1 0 100%; padding:0; margin-bottom:2px;
  font-size:11px; letter-spacing:.2em; color:var(--bj-muted);
}
.bj-studio .markup-mode--inline .mk-mode{
  /* 1 1 200px, not 1 1 0: the pair splits the row wherever the row is wide
     enough for both, and DROPS to two rows before either one is narrow
     enough to clip its own label. 1 1 0 let them shrink past their text at
     around 600px and cut "✨ For what I mean" in half. */
  flex:1 1 200px; min-width:0;
  border:1px solid var(--bj-hair); background:#fff; border-radius:0;
  padding:14px 16px; font-size:12.5px; letter-spacing:.14em;
  color:var(--bj-muted); white-space:normal;
  transition:background var(--mk-in), border-color var(--mk-in), color var(--mk-in);
}
.bj-studio .markup-mode--inline .mk-mode:not(.is-on):hover{
  background:var(--mk-hov); border-color:var(--mk-hov-line); color:var(--bj-ink);
}
.bj-studio .markup-mode--inline .mk-mode.is-on{
  background:var(--bj-ink); border-color:var(--bj-ink); color:#fff;
}
.bj-studio .markup-mode--inline .mk-mode.is-on:hover{
  background:var(--mk-on-hov); border-color:var(--mk-on-hov);
}
.bj-studio .markup-mode--inline .mk-mode__why{
  flex:none; width:48px; min-height:0; align-self:stretch;
  border:1px solid var(--bj-hair); border-left:1px solid var(--bj-hair);
  background:#fff; font-size:14px; color:var(--bj-muted);
  transition:background var(--mk-in), border-color var(--mk-in), color var(--mk-in);
}
.bj-studio .markup-mode--inline .mk-mode__why:hover{
  background:var(--mk-hov); border-color:var(--mk-hov-line); color:var(--bj-ink);
}

/* ── the actions ─────────────────────────────────────────────────────────
   They were two bare ghost labels with the side padding stripped off by an
   inline style, touching each other, reading as one strip of capitals. They
   are buttons: outlined, equal weight, sharing the row. The one that
   continues what you were doing is marked by an ink fill, the one that
   throws it away is not — that is the whole hierarchy and it needs no more
   than this. */
.bj-studio .up-actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--bj-hair);
}
/* NOT .btn. These carry no theme class at all, which is the cheapest way to
   stay out of Impulse's button rules — the ghost variant needed an ID and an
   !important to hold its own, and nothing has to fight anything if it never
   enters the ring. */
.bj-studio .up-act{
  /* 0 0 auto so a narrow card wraps them onto two rows rather than
     shrinking them into their own capitals */
  flex:0 0 auto; border:1px solid var(--bj-hair); background:#fff;
  color:var(--bj-ink); border-radius:0;
  padding:14px 26px; font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--mk-in), border-color var(--mk-in), color var(--mk-in);
}
.bj-studio .up-act:hover{ background:var(--mk-hov); border-color:var(--mk-hov-line); }
.bj-studio .up-act:active{ background:var(--mk-press); }
.bj-studio .up-act:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }
/* --go leads, but it does NOT fill. The chosen interpretation chip directly
   above is already ink, and the step's real primary action is the gold Next
   in the rail — a third dark block between them made a small card look like
   a stack of bars. A darker hairline and ink lettering is enough to say
   "this one first" on a pair of secondary actions. */
.bj-studio .up-act--go{ border-color:var(--bj-ink); color:var(--bj-ink); }
.bj-studio .up-act--go:hover{ background:var(--mk-hov); border-color:var(--bj-ink); }
.bj-studio .up-act{ color:var(--bj-muted); }
.bj-studio .up-act:hover{ color:var(--bj-ink); }

/* ── THE PHONE, AND THREE TOOLBAR RULES THAT LEAKED INTO THIS PANEL ─────
   .markup-mode is shared with the editor's head bar, so the head bar's
   small-screen rules were landing on this field too and taking it apart:
   at 900px the label is hidden (an icon bar does not need it — a form field
   does), and at 600px the whole thing is given order:4 and centred, which
   in this column threw the setting BELOW the actions and centred every
   line. Each override below is the compound .markup-mode.markup-mode--inline
   (0,3,0), so it beats the shared rule (0,2,0) without touching it. */
@media (max-width:900px){
  .bj-studio .markup-mode.markup-mode--inline .markup-mode__lbl{ display:block; }
}
@media (max-width:600px){
  .bj-studio .markup-mode.markup-mode--inline{
    order:0; justify-content:flex-start; align-items:center;
  }
  /* the label stops claiming the whole line so the "?" can sit at the end of
     it — where a field's help belongs, and where it is a 44px target rather
     than the full-width bar it became when it was left in the chip row */
  .bj-studio .markup-mode.markup-mode--inline .markup-mode__lbl{
    order:1; flex:1 1 auto; margin-bottom:0;
  }
  .bj-studio .markup-mode--inline .mk-mode__why{
    order:2; flex:none; width:44px; height:44px; min-height:44px;
    align-self:center; margin-left:auto;
  }
  .bj-studio .markup-mode--inline .mk-mode{
    order:3; flex:1 1 100%; white-space:normal;
  }
  /* full width, and the label is allowed to wrap. "Choose a different image"
     at .2em tracking is 390px of unbreakable capitals, which on a 390px
     phone made the card itself wider than the screen. */
  .bj-studio .up-act{ flex:1 1 100%; white-space:normal; padding:14px 16px; }

  /* the thumbnail stops being a column. At 430px it left the body 236px to
     hold a field and two actions; above them it is the same picture and the
     bands get the whole card. */
  .bj-studio .upload-done{ flex-direction:column; align-items:stretch; gap:14px; }
  .bj-studio .up-thumb--lg{ width:72px; height:72px; }
}

/* ── THE DESIGN'S NAME, AT THE TOP OF THE FILE MENU ─────────────────────
   It was a chip in the toolbar, which was the wrong home: a bar is a fixed
   row of controls and a name is any length at all, so a long one pushed
   Design Interpretation and the close cross sideways. A file menu has a
   panel's width, is already where the document's identity belongs, and is
   where somebody would go looking for Rename anyway. */
.bj-studio .mk-file__id{
  padding:12px 14px 10px; border-bottom:1px solid var(--bj-hair);
}
.bj-studio .mk-file__idlbl{
  display:block; margin-bottom:3px;
  font-family:var(--bj-sans); font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bj-muted);
}
.bj-studio .mk-file__idname{
  display:block; font-family:var(--bj-serif); font-weight:600; font-size:16px;
  line-height:1.3; color:var(--bj-ink);
  overflow-wrap:anywhere;          /* a long name wraps rather than widens */
}

/* ── markup mode: how the marks are read ────────────────────────────────
   It lives in the HEAD row now. Squeezed into the footer it read as a third
   button competing with Save and Re-generate, and it is not an action at all
   — it is a standing choice about the whole session, so it belongs beside
   the title where a standing choice is legible. */
/* ── DESIGN INTERPRETATION · THE TOOLBAR'S COPY ─────────────────────────
   This is the editor's head bar, and it is BACK to the size it always was.
   Enlarging the shared base class to fix the step-1 panel was my mistake:
   the toolbar is a dense row of small controls and a third more height on
   one of them pushed the whole bar onto two lines. The bigger treatment now
   lives only under .markup-mode--inline, below, where the panel that needed
   it actually is. */
.bj-studio .markup-mode{
  display:inline-flex; align-items:center; border:1px solid var(--bj-hair);
  background:var(--bj-band); padding:2px; flex:none; align-self:center;
}
.bj-studio .markup-mode__lbl{
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bj-muted); padding:0 10px 0 8px; white-space:nowrap;
}
.bj-studio .mk-mode{
  border:0; background:none; cursor:pointer; padding:7px 12px;
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bj-muted); white-space:nowrap;
  transition:background var(--menu-out), color var(--menu-out);
}
.bj-studio .mk-mode.is-on{ background:var(--bj-ink); color:#fff; }
.bj-studio .mk-mode:not(.is-on):hover{ color:var(--bj-ink); }
.bj-studio .mk-mode:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }
@media (max-width:760px){
  .bj-studio .markup-count{ display:none; }
}
@media (max-width:600px){
  /* the mode drops to its own line rather than disappearing — it changes
     what the whole session does and must stay reachable on a phone */
  /* the bar wraps at every width now (see the base rule); on a phone the
     pieces are additionally ORDERED, so the row breaks where it reads best
     rather than wherever the widths happen to fall */
  .bj-studio .markup__id{ flex:1 1 60%; }
  .bj-studio .markup-mode{ order:4; flex:1 1 100%; justify-content:center; }
  .bj-studio .markup__bar > .mk-hoop{ order:2; }
  .bj-studio .markup__bar > .mk-metal{ order:3; flex:1 1 100%; }
  /* with the two halves stacked rather than side by side there is nothing
     left between them to divide */
  .bj-studio .markup__div{ display:none; }
  .bj-studio .markup-foot{ flex-wrap:wrap; row-gap:8px; }
  .bj-studio .markup-actions{ width:100%; margin-left:0; }
  .bj-studio .markup-actions .btn{ flex:1 1 auto; padding:11px 10px; }
}

/* ═══════════ THE LIBRARY AS A REFERENCE PICKER ══════════════════════════
   Offered beside the dropzone, because everything in it already lives in
   Storage under this account: reusing one costs no upload, no allowance and
   no waiting, and a customer who has already drawn the right thing should
   not be asked to find the file again. */
.bj-studio .up-library{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  padding:13px 15px; margin-top:12px; color:var(--bj-ink); font-family:inherit;
  transition:border-color var(--menu-out), box-shadow var(--menu-out);
}
.bj-studio .up-library:hover{ border-color:var(--bj-ink); box-shadow:var(--bj-shadow); }
.bj-studio .up-library svg{ width:19px; height:19px; flex:none; color:var(--bj-gold); }
.bj-studio .up-library span{ flex:1 1 auto; font-size:13.5px; }
.bj-studio .up-library em{
  font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bj-muted);
}
.bj-studio .up-library i{ flex:none; font-style:normal; color:var(--bj-gold); }
.bj-studio .lib-pick__inner{
  width:min(calc(100vw - 32px), 980px);
  height:min(calc(100vh - 40px), 800px);
  display:flex; flex-direction:column; overflow:hidden;
}
.bj-studio .lib-pick__body{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto; overflow:hidden;
}
.bj-studio .lib-pick__body .mk-lib__head{ padding:0 0 12px; }
.bj-studio .lib-pick__grid{
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); padding:12px 0 0;
  border-top:1px solid var(--bj-hair);
}
.bj-studio .lib-pick__grid .mk-asset{ cursor:pointer; }
@media (max-width:640px){
  .bj-studio .lib-pick__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ═══════════ STEP 2 BEFORE THE FIRST GENERATION ═════════════════════════
   The reference, faded behind the invitation. An empty frame after changing
   the reference reads as "my new choice didn't take" — this says which image
   the next generation will actually be built from. */
.bj-studio .stage-refpreview{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:12%; opacity:.2; pointer-events:none;
}
.bj-studio .stage-refpreview img{
  max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1);
}
.bj-studio .stage--refonly .stage-empty{ position:relative; z-index:2; }
.bj-studio .stage--refonly .stage-empty svg{ opacity:.35; }

/* ═══════════ THE OBJECT MENU ════════════════════════════════════════════
   Same furniture as every other menu; raised at the pointer instead of
   under a button, because it belongs to the object, not to the toolbar. */
.bj-studio .mk-ctx{ min-width:238px; z-index:1500; }
.bj-studio .mk-ctx .mk-item[disabled]{ cursor:default; }
.bj-studio .mk-item--danger{ color:#c0392b; }
.bj-studio .mk-item--danger:hover{ background:#fdf1ef; }
/* a long press must not also start a text selection on the layer row */
.bj-studio .mk-layers{ -webkit-touch-callout:none; }

/* a library entry that still has its objects says so */
.bj-studio .mk-asset__layers{
  position:absolute; right:5px; bottom:5px; background:var(--bj-ink); color:#fff;
  font-size:8.5px; font-weight:700; letter-spacing:.1em; padding:3px 6px;
}
/* The lift off the caption used to be written as "figcaption ~ .layers",
   which cannot match: "~" only reaches FOLLOWING siblings and the badge is
   emitted before the caption. So it never fired, and the count sat on top of
   the date on every tile that had one. It belongs opposite the format badge. */
.bj-studio .mk-asset:has(figcaption) .mk-asset__layers{
  bottom:auto; top:6px; left:6px; right:auto;
}
/* And one row further down when something else already holds that corner.
   Both selectors have to carry the :has() as well, or they lose the
   specificity contest with the rule above and never fire — and they have to
   die WITH it on a browser without :has(), or the badge inherits top:26px
   while keeping bottom:5px and stretches into a black column. */
.bj-studio .mk-asset:has(figcaption) .mk-asset__fmt ~ .mk-asset__layers,
.bj-studio .mk-asset:has(figcaption) .mk-asset__pair ~ .mk-asset__layers{ top:26px; }


/* ═══════════ DELETE ══════════════════════════════════════════════════════
   The one action in the studio that cannot be taken back, so it is the one
   that stops and asks — and names what will go before it goes. */
.bj-studio .btn--danger{
  border-color:#c0392b; color:#c0392b; background:#fff;
}
.bj-studio .btn--danger:hover:not(:disabled){ background:#c0392b; color:#fff; }

.bj-studio .saved-kill{
  flex:none; width:28px; height:28px; margin-left:2px; border:1px solid transparent;
  background:none; cursor:pointer; color:var(--bj-hair);
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .18s ease, border-color .18s ease;
}
.bj-studio .saved-kill svg{ width:16px; height:16px; }
.bj-studio .saved-item:hover .saved-kill{ color:var(--bj-muted); }
.bj-studio .saved-kill:hover{ color:#c0392b; border-color:#c0392b; }

/* NOT prefixed with .bj-studio, and carrying its own colours: this dialog
   lives on document.body so that nothing it is asking about — the designs
   drawer, the studio modal, the full-screen sketchpad — can paint over it. */
.bj-ask{ position:fixed; inset:0; z-index:2147483000; }
.bj-ask__scrim{ position:absolute; inset:0; background:rgba(28,29,29,.52); cursor:pointer; }
.bj-ask__box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px, calc(100vw - 32px)); background:#fff; border:1px solid #1c1d1d;
  box-shadow:0 24px 70px rgba(28,29,29,.32); padding:26px 26px 22px;
  font-family:Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; color:#1c1d1d;
}
.bj-ask__title{
  font-family:Marcellus, Georgia, "Times New Roman", serif; font-size:21px;
  line-height:1.25; margin:0 0 10px; color:#1c1d1d; font-weight:400;
}
.bj-ask__body{ margin:0 0 20px; font-size:13.5px; line-height:1.65; color:#6f6a63; }
.bj-ask__row{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.bj-ask__row .btn{
  width:auto; margin-top:0; padding:11px 18px; cursor:pointer;
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; border:1px solid #1c1d1d; background:#fff; color:#1c1d1d;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.bj-ask__row .btn--ghost{ border-color:#e6e2db; color:#6f6a63; }
.bj-ask__row .btn--ghost:hover{ border-color:#1c1d1d; color:#1c1d1d; }
.bj-ask__row .btn--gold{ border-color:#a8894f; background:#a8894f; color:#fff; }
.bj-ask__row .btn--danger{ border-color:#c0392b; color:#c0392b; background:#fff; }
.bj-ask__row .btn--danger:hover{ background:#c0392b; color:#fff; }
@media (max-width:520px){
  .bj-ask__row{ flex-direction:column-reverse; }
  .bj-ask__row .btn{ width:100%; }
}


/* ═══════════ IN METAL — the engraving control ════════════════════════════
   Deliberately not a swatch button like the ones beside it. It carries its
   own label, its three answers are spelled out in words, and it sits first
   in the row — so a glance at this bar says "fill decides what the workshop
   does" before anybody has clicked a thing. */
.bj-studio .mk-metal{
  display:inline-flex; align-items:stretch; gap:0; flex:none;
  border:1px solid var(--bj-ink); background:#fff; position:relative;
}
.bj-studio .mk-metal__lbl{
  display:inline-flex; align-items:center; padding:0 9px;
  background:var(--bj-ink); color:#fff;
  font-size:8.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
}
.bj-studio .mk-metal__b{
  display:inline-flex; align-items:center; gap:5px; padding:0 9px;
  min-height:34px; border:0; border-left:1px solid var(--bj-hair);
  background:#fff; cursor:pointer; color:var(--bj-muted);
  font-family:inherit; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--menu-out), color var(--menu-out);
}
.bj-studio .mk-metal__b:first-of-type{ border-left:0; }
.bj-studio .mk-metal__b:hover{ color:var(--bj-ink); background:var(--bj-band); }
.bj-studio .mk-metal__b.is-on{ color:var(--bj-ink); background:var(--bj-band); }
.bj-studio .mk-metal__b.is-on::after{
  content:""; position:absolute; bottom:-1px; left:0; right:0; height:0;
}
.bj-studio .mk-metal__sw{
  flex:none; width:13px; height:13px; border:1px solid var(--bj-ink); display:block;
}
.bj-studio .mk-metal__sw--engrave{ background:#000000; }
.bj-studio .mk-metal__sw--cutout{ background:#00b4ff; border-color:#00b4ff; }
/* ── THE THIRD INSTRUCTION, WITH A COLOUR OF ITS OWN ──────────────────────
   It used to be a slash through an empty square — the universal sign for
   "nothing", which is exactly the wrong thing to say about an instruction
   that DOES something to the metal. It is now what it draws: a red boundary
   with untouched polished metal inside it. Painted with background layers
   rather than a border or an inset shadow, because the swatch's 13px box and
   the .is-on ring both have prior claims on those. */
.bj-studio .mk-metal__sw--none{
  background:
    linear-gradient(#e00000,#e00000) top    /100% 3px no-repeat,
    linear-gradient(#e00000,#e00000) bottom /100% 3px no-repeat,
    linear-gradient(#e00000,#e00000) left   /3px 100% no-repeat,
    linear-gradient(#e00000,#e00000) right  /3px 100% no-repeat,
    #fff;
  border-color:#e00000;
}
/* on the footer tally the swatch is 10px, where a 3px band closes up — the
   band is thinned there so the white centre survives */
.bj-studio .markup-metal .mk-metal__sw--none{
  background:
    linear-gradient(#e00000,#e00000) top    /100% 2px no-repeat,
    linear-gradient(#e00000,#e00000) bottom /100% 2px no-repeat,
    linear-gradient(#e00000,#e00000) left   /2px 100% no-repeat,
    linear-gradient(#e00000,#e00000) right  /2px 100% no-repeat,
    #fff;
}
/* ═══════════ ADD HOOP — a question, not an instruction ═══════════════════
   Built from the engraving strip's own parts so the two read as one family
   on the head row: same hairline box, same 34px inner height, same 9px
   uppercase label, same "?" at the trailing edge. What separates them is
   that this one is a SWITCH, not a set of choices, so it wears a tick box
   rather than a colour swatch and lights the way a toggle lights.

   It sits to the LEFT of the engraving strip because it is asked and
   answered once for the whole design, where the engraving chips are picked
   up and put down all through the work. */
.bj-studio .mk-hoop{
  display:inline-flex; align-items:stretch; gap:0; flex:none;
  border:1px solid var(--bj-ink); background:#fff; position:relative;
}
.bj-studio .mk-hoop__b{
  display:inline-flex; align-items:center; gap:7px; padding:0 10px;
  min-height:34px; border:0; background:#fff; cursor:pointer;
  color:var(--bj-muted); font-family:inherit; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  transition:background var(--menu-out), color var(--menu-out);
}
/* hover, press and the transition that carries them are NOT written here.
   They come from the studio's shared wash further down the file, which
   .mk-hoop__b and .mk-hoop__why are now listed in alongside .mk-metal__b —
   so the switch reacts to a pointer with the identical tone, the identical
   easing and the identical one-pixel press as the engraving chips beside
   it, and can never drift from them. A local :hover here duplicated the
   idea in a different colour and was the reason this control felt dead. */
/* the tick box: empty and hairline while off, solid ink with a white check
   while on — the same two states a checkbox has had since checkboxes */
.bj-studio .mk-hoop__tick{
  flex:none; width:13px; height:13px; display:block; position:relative;
  border:1px solid var(--bj-ink); background:#fff;
  transition:background var(--menu-out);
}
.bj-studio .mk-hoop__tick::after{
  content:""; position:absolute; left:3px; top:0; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .14s ease;
}
.bj-studio .mk-hoop__b[aria-checked="true"]{ color:var(--bj-ink); background:var(--bj-band); }
.bj-studio .mk-hoop__b[aria-checked="true"] .mk-hoop__tick{ background:var(--bj-ink); }
.bj-studio .mk-hoop__b[aria-checked="true"] .mk-hoop__tick::after{ transform:rotate(45deg) scale(1); }
/* the "?" — the engraving strip's own, so the pair cannot drift apart */
.bj-studio .mk-hoop__why{
  border:0; border-left:1px solid var(--bj-hair); background:#fff; cursor:pointer;
  width:26px; min-height:34px; padding:0; color:var(--bj-muted);
  font-family:inherit; font-size:11px; font-weight:700; line-height:1;
  transition:color var(--menu-out), background var(--menu-out);
}
.bj-studio .mk-hoop__help{ display:flex; }
/* the added loop, drawn in the perimeter green so "this is the bit we add"
   is the one thing the eye lands on */
.bj-studio .mkh-ico .mkh-hoop--new{ fill:none; stroke:#00d24a; stroke-width:2.8; }
/* two cards, so the same two-column grid the metal sheet uses. NO min-width:
   a min beats .mk-drop__menu's own max-width, which is what let this sheet
   grow to the width of the screen and fling each card's text away from its
   picture. The measure comes from the same breakpoint the metal sheet's
   does, and nothing here overrules it. */
.bj-studio .mkh--hoop .mkh-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* ── THE FOURTH INSTRUCTION: THE PERIMETER ────────────────────────────────
   Same family as Outline — an instruction about a LINE, drawn as a frame
   with untouched paper inside — in the reserved light green. A frame rather
   than a solid square because the perimeter IS an edge: the icon is the
   thing it does. */
.bj-studio .mk-metal__sw--perim{
  background:
    linear-gradient(#00d24a,#00d24a) top    /100% 3px no-repeat,
    linear-gradient(#00d24a,#00d24a) bottom /100% 3px no-repeat,
    linear-gradient(#00d24a,#00d24a) left   /3px 100% no-repeat,
    linear-gradient(#00d24a,#00d24a) right  /3px 100% no-repeat,
    #fff;
  border-color:#00d24a;
}
.bj-studio .mk-metal__b.is-on .mk-metal__sw{ box-shadow:0 0 0 2px rgba(28,29,29,.14); }

/* ═══════════ THE CHIP THAT IS ALSO THE BUCKET ════════════════════════════
   Engrave and Cut out are the two ways of saying "fill this area", so
   picking either one hands the customer a bucket — and the chip says so by
   turning its colour swatch INTO one. The glyph is the shape every editor
   since MacPaint has used for a paint bucket, and it is drawn in the very
   colour that is about to be poured, so "what will this do and what colour
   will it be" is one glance rather than two controls.

   The swatch keeps its exact 13×13 footprint while it changes, so nothing
   on the bar moves when the tool is armed. */
.bj-studio .mk-metal__sw--bucket{
  border-color:transparent; background:none !important;
  position:relative; overflow:visible;
}
.bj-studio .mk-metal__sw--bucket::before{
  content:""; position:absolute; inset:-3px -2px -2px -2px;
  background:currentColor;
  -webkit-mask:var(--bj-bucket) center/contain no-repeat;
          mask:var(--bj-bucket) center/contain no-repeat;
}
/* ARMED = the chip becomes the colour it is about to pour, with a white
   bucket on it. An ink-on-ink bucket would be invisible on the Engrave chip,
   and "which colour am I holding" is the only question this control has to
   answer at a glance. */
.bj-studio .mk-metal__b .mk-metal__sw--bucket{ color:currentColor; }
.bj-studio .mk-metal__b.is-armed[data-fill="engrave"]{
  background:#1c1d1d; color:#fff;
  /* the "In metal" label is this exact ink and the first chip has no left
     border, so without this the armed chip fuses into the label and stops
     reading as a control at all */
  box-shadow:inset 1px 0 0 rgba(255,255,255,.42);
}
.bj-studio .mk-metal__b.is-armed[data-fill="cutout"]{ background:#1f6fe0; color:#fff; }
/* …and the third one, which could not show as held at all until now: the
   chip becomes the same reserved red the boundary is drawn in. */
.bj-studio .mk-metal__b.is-armed[data-fill="none"]{ background:#e00000; color:#fff; }
/* CHOSEN BUT NOT YET HELD still says which of the three it is — the swatch
   alone is 13px, and on a sheet with nothing drawn on it (where the bucket
   cannot arm) that was the only tell there was. */
.bj-studio .mk-metal__b.is-on[data-fill="none"]{ color:#b21622; }
.bj-studio .mk-metal__b.is-on[data-fill="cutout"]{ color:#1a5fc4; }
/* A SOLID bucket, not an outlined one. At the 13px this swatch really is,
   a 2px-stroked outline reads as a rhombus with a dot next to it; the
   filled silhouette is what makes it recognisable as the tool everyone
   already knows. The tipped body, the band and the falling drop are the
   three things that say "paint bucket" at any size. */
.bj-studio .mk-metal{ --bj-bucket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10.1 1.6 8.4 3.3l2 2L2.6 13.1a2.4 2.4 0 0 0 0 3.4l5.4 5.4a2.4 2.4 0 0 0 3.4 0l7.8-7.8a2.4 2.4 0 0 0 0-3.4Zm2 5.4 5 5H7.1Z'/%3E%3Cpath d='M21.1 15.1s2.4 3 2.4 4.6a2.4 2.4 0 0 1-4.8 0c0-1.6 2.4-4.6 2.4-4.6Z'/%3E%3C/svg%3E"); }
/* armed reads as HELD, not merely chosen — the same weight the tool row
   gives the pen you are drawing with */
.bj-studio .mk-metal__b.is-armed .mk-metal__sw{ box-shadow:none; }
.bj-studio .mk-metal__help{ display:flex; }
.bj-studio .mk-metal__why{
  width:26px; min-height:34px; border:0; border-left:1px solid var(--bj-hair);
  background:#fff; cursor:pointer; color:var(--bj-muted);
  font-family:inherit; font-size:12px; font-weight:700;
}
.bj-studio .mk-metal__why:hover{ color:var(--bj-ink); background:var(--bj-band); }
/* A MEASURE, AND ONLY WHERE A POPOVER IS WHAT IS BEING DRAWN.
   A menu of prose needs one — without it the menu takes the whole toolbar's
   width and every line breaks after a word. But below 760px these menus are
   not popovers at all, they are full-width bottom sheets pinned left:0 /
   right:0, and a literal `width` on a higher-specificity selector beat the
   sheet's own `width:auto` and hung half the panel off the side of the
   screen. So the measure lives inside the breakpoint that owns it, and the
   sheet's geometry below that is left entirely alone. */
@media (min-width:761px){
  .bj-studio .mk-metal__help .mk-drop__menu{
    width:412px; max-width:calc(100vw - 24px); min-width:0;
  }
  /* the hoop sheet is the metal sheet's twin and takes its measure — see
     the note above about why this lives inside the breakpoint */
  .bj-studio .mk-hoop__help .mk-drop__menu{
    width:412px; max-width:calc(100vw - 24px); min-width:0;
  }
  .bj-studio .mk-mode__help .mk-drop__menu{
    width:416px; max-width:calc(100vw - 24px); min-width:0;
  }
}

/* ═══════════ THE TWO HELP SHEETS ═════════════════════════════════════════
   Two controls in this studio are not preferences — they decide what the
   workshop actually does to a piece of gold, and neither could be understood
   from its own label. "In metal" and the exact/interpret toggle each carry a
   "?" now, and both open the same kind of answer: a short title, one line of
   instruction, the thing DRAWN as the finished charm, and a note at the foot
   for the thing people get wrong.

   The old metal key was three 13px swatches and two paragraphs, and it
   answered the wrong question — it said which COLOUR each instruction paints
   on the sheet, when the thing nobody could picture was what the charm ends
   up looking like. Everything below is shared by both sheets on purpose:
   they are one component answering two questions, and a customer who has
   opened one already knows how to read the other. ---------------------- */
.bj-studio .mkh{ padding-bottom:2px; }
.bj-studio .mkh__head{
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bj-ink); padding:11px 13px 0;
}
.bj-studio .mkh__intro{
  margin:0; padding:6px 13px 10px;
  font-size:11.5px; line-height:1.55; color:var(--bj-muted);
}
.bj-studio .mkh__intro i{ font-style:italic; }
/* the one-thing-people-get-wrong note. Gold-tinted rather than hairline-ruled
   because it is the sentence that stops the support email, and it has to be
   what the eye lands on after the pictures. */
.bj-studio .mkh__note{
  margin:9px 13px 11px; padding:10px 11px;
  background:var(--bj-band,#faf7f0);
  border:1px solid var(--bj-gold-lt,#e2d3ae);
  font-size:11px; line-height:1.62; color:var(--bj-muted);
}
.bj-studio .mkh__note b{ color:var(--bj-ink); font-weight:700; }

/* ── the drawn charms ─────────────────────────────────────────────────────
   One icon vocabulary for both sheets: a bail, a gold body, and whatever the
   sheet is about drawn on it. The bail is painted FIRST and the body over
   it, so the ring's lower arc is covered by the metal exactly as it is on a
   real charm — no join to draw, and none to get wrong. */
.bj-studio .mkh-ico{ width:46px; height:46px; display:block; flex:none; overflow:visible; }
.bj-studio .mkh-ico .mkh-sk{
  fill:none; stroke:var(--bj-ink,#1c1d1d); stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio .mkh-ico .mkh-bail{ fill:none; stroke:var(--bj-gold,#b8935a); stroke-width:2.6; }
.bj-studio .mkh-ico .mkh-body{ fill:#eddfbc; stroke:var(--bj-gold,#b8935a); stroke-width:1.8; }
.bj-studio .mkh-ico .mkh-face{
  fill:none; stroke:#9a7c3e; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio .mkh-ico .mkh-spark{ fill:var(--bj-gold,#b8935a); }
.bj-studio .mkh-arrow{
  width:24px; height:16px; flex:none;
  fill:none; stroke:#9a7c3e; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* ENGRAVE is carved, so it is darker than the metal around it and has no
   outline of its own — a cut has no edge you can draw. CUT OUT is the page
   showing through, which is the only honest way to draw a hole on white.
   OUTLINE keeps the metal and states its boundary in the reserved red. */
.bj-studio .mkh-star--engrave{ fill:#8a6a2e; stroke:#6f5423; stroke-width:1; stroke-linejoin:round; }
.bj-studio .mkh-star--cutout{ fill:#fff; stroke:var(--bj-gold,#b8935a); stroke-width:1.5; stroke-linejoin:round; }
.bj-studio .mkh-star--none{ fill:none; stroke:#e00000; stroke-width:2.3; stroke-linejoin:round; }
/* the perimeter card: the customer's own light-green line traced exactly on
   the body's rim — their line IS the cut edge */
.bj-studio .mkh-edge--perim{ fill:none; stroke:#00d24a; stroke-width:2.3; }

/* ── the metal sheet: three answers, side by side ───────────────────────── */
.bj-studio .mkh-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px; padding:0 13px;
}
/* four instructions on the metal sheet now — 2×2 keeps every card the size
   the three-card layout gave them, instead of squeezing a fourth column */
.bj-studio .mkh--metal .mkh-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.bj-studio .mkh-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border:1px solid var(--bj-hair,#e6e2da); background:#fff; padding:12px 7px 11px;
}
.bj-studio .mkh-card__say{ min-width:0; margin-top:9px; }
.bj-studio .mkh-card b{
  display:block; margin:0 0 4px;
  font-size:11.5px; font-weight:700; color:var(--bj-ink);
}
.bj-studio .mkh-card p{
  margin:0; font-size:10.5px; line-height:1.5; color:var(--bj-muted);
}
.bj-studio .mkh-card p i{ font-style:italic; }

/* ── the reading sheet: two answers, one under the other ──────────────────
   Stacked rather than side by side because each one is a BEFORE and an
   AFTER, and a before/after already reads across. Two of them side by side
   would put four pictures in a row and lose which arrow belongs to which. */
.bj-studio .mkh-rows{ padding:0 13px; }
.bj-studio .mkh-row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:13px; align-items:center;
  border:1px solid var(--bj-gold-lt,#e2d3ae); background:#fff;
  padding:11px 13px; margin-bottom:9px;
}
.bj-studio .mkh-row:last-child{ margin-bottom:0; }
/* the pair is a 3×2 grid, not a flex row: each caption has to sit under its
   OWN picture and the arrow has to line up with the two icon centres, which
   is exactly what a grid does for nothing */
.bj-studio .mkh-pair{
  display:grid; grid-template-columns:auto auto auto;
  align-items:center; justify-items:center; column-gap:3px; row-gap:6px;
}
.bj-studio .mkh-cap{
  font-size:7.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bj-muted); white-space:nowrap;
}
.bj-studio .mkh-cap--gold{ color:var(--bj-gold,#b8935a); }
.bj-studio .mkh-row__say b{
  display:block; font-size:12.5px; font-weight:700; color:var(--bj-ink); margin:0 0 4px;
}
/* "the default" is a fact about the control, not part of its name — so it is
   a pill riding beside the title rather than more of the title. It wraps to
   its own line when the measure is tight, which is why it carries its own
   background: a stranded line of gold caps reads as a second heading. */
.bj-studio .mkh-row__say b em{
  display:inline-block; font-style:normal; font-weight:700;
  font-size:8px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bj-gold,#b8935a); white-space:nowrap; vertical-align:2px;
  background:var(--bj-band,#faf7f0); border:1px solid var(--bj-gold-lt,#e2d3ae);
  padding:2px 5px; margin-left:2px;
}
.bj-studio .mkh-row__say p{
  margin:0; font-size:11px; line-height:1.55; color:var(--bj-muted);
}
.bj-studio .mkh-row__say p i{ font-style:italic; }
.bj-studio .mkh-spk{ font-size:11px; }

/* ── the "?" itself. The mode toggle is a hairline pill rather than a
      bordered bar, so its help button takes a hairline divider and no box. */
.bj-studio .mk-mode__help{ display:flex; align-self:stretch; }
.bj-studio .mk-mode__why{
  width:26px; align-self:stretch; min-height:28px;
  border:0; border-left:1px solid var(--bj-hair,#e6e2da);
  background:none; cursor:pointer; color:var(--bj-muted);
  font-family:inherit; font-size:12px; font-weight:700; line-height:1;
  transition:color var(--menu-out), background var(--menu-out);
}
.bj-studio .mk-mode__why:hover{ color:var(--bj-ink); background:#fff; }
.bj-studio .mk-mode__why:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }

@media (max-width:600px){
  /* everything sized for a ~410px popover gets its thumb-sized version */
  .bj-studio .mkh__head{ padding:14px 16px 0; font-size:10px; }
  .bj-studio .mkh__intro{ padding:7px 16px 12px; font-size:13px; }
  .bj-studio .mkh-grid{ padding:0 16px; gap:9px; }
  .bj-studio .mkh-rows{ padding:0 16px; }
  .bj-studio .mkh-row{ padding:13px 14px; }
  .bj-studio .mkh__note{ margin:11px 16px 13px; font-size:12.5px; }
  .bj-studio .mkh-card b{ font-size:12px; }
  .bj-studio .mkh-card p{ font-size:11px; }
  .bj-studio .mkh-row__say p{ font-size:12.5px; }
}
/* the narrowest phones: three charms across stops being three charms and
   becomes three slivers, so the metal sheet goes to one column and each
   answer turns on its side */
@media (max-width:380px){
  .bj-studio .mkh-grid{ grid-template-columns:1fr; }
  .bj-studio .mkh-card{
    flex-direction:row; align-items:center; text-align:left; gap:12px; padding:11px 13px;
  }
  .bj-studio .mkh-card__say{ margin-top:0; }
  .bj-studio .mkh-row{ grid-template-columns:1fr; justify-items:center; text-align:center; }
}

/* The one-time note, pinned to the control it is about. On document.body and
   unprefixed for the same reason the confirm dialog is: the property row is a
   sideways scroll container and clips its children on both axes, so anything
   floating out of it has to live outside it — and rules scoped to .bj-studio
   would then not reach it. */
.mk-coach{
  position:fixed; z-index:2147482000; top:0; left:0;
  width:min(320px, 78vw); background:#1c1d1d; color:#fff;
  padding:13px 14px 12px; font-size:12px; line-height:1.6;
  font-family:Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow:0 14px 34px rgba(28,29,29,.28);
}
.mk-coach::before{
  content:""; position:absolute; top:-6px; left:var(--arrow, 22px);
  width:12px; height:12px; background:#1c1d1d; transform:rotate(45deg);
}
.mk-coach b{ font-weight:700; }
.mk-coach i{ font-style:italic; }
.mk-coach__x{
  display:block; margin-top:10px; border:1px solid rgba(255,255,255,.5);
  background:none; color:#fff; cursor:pointer; padding:6px 12px;
  font-family:inherit; font-size:9px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase;
}
.mk-coach__x:hover{ background:#fff; color:#1c1d1d; }

/* the running tally, beside the mark count */
/* ── THE READ-OUT IS FURNITURE, NOT CONTENT ──────────────────────────────
   It used to wrap to a second line as soon as a selection had three kinds
   of instruction in it — and a footer that grows taller moves the two
   buttons beside it while somebody is reaching for them. So the row has a
   fixed height, the read-out never wraps, and the swatches carry the words
   (which are on the hover) instead of spelling them out. Whatever is
   selected, nothing below the sheet moves. */
.bj-studio .markup-foot{ min-height:64px; }
.bj-studio .markup-foot > .markup-count,
.bj-studio .markup-foot > .markup-metal{ align-self:center; }
.bj-studio .markup-count{
  flex:0 1 auto; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.bj-studio .markup-metal{
  display:inline-flex; align-items:center; gap:10px; flex:none; flex-wrap:nowrap;
  white-space:nowrap;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--bj-muted);
}
.bj-studio .markup-metal__b{
  display:inline-flex; align-items:center; gap:5px; cursor:default;
  font-weight:700; color:var(--bj-ink);
}
.bj-studio .markup-metal .mk-metal__sw{ width:10px; height:10px; }

@media (max-width:820px){
  .bj-studio .mk-metal{ order:-1; }        /* first thing on the row, on a phone too */
  .bj-studio .mk-metal__b span{ display:none; }
  .bj-studio .mk-metal__b{ padding:0 11px; }
  .bj-studio .mk-metal__b.is-on span{ display:inline; }
}


/* ═══════════ THE FILL PREVIEW ════════════════════════════════════════════
   What the click is about to do, shown before it does it. The tint is the
   actual mask at the actual resolution the fill will use — not a highlight
   of the object, not an approximation: the pixels themselves. */
.bj-studio .mk-prevfill{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:5;
  image-rendering:auto;
  animation:mk-prevIn .12s ease both;
}
.bj-studio .mk-prevfill--box{
  inset:auto; width:auto; height:auto;
  border:1.5px dashed var(--bj-ink); background:rgba(28,29,29,.10);
}
.bj-studio .mk-prevfill--cutout{ border-color:#1f6fe0; background:rgba(31,111,224,.14); }
.bj-studio .mk-prevfill--undo{ border-color:#c0392b; background:rgba(192,57,43,.10); }
@keyframes mk-prevIn{ from{ opacity:0 } to{ opacity:1 } }

/* one line of plain language, pinned where it cannot cover the artwork */
.bj-studio .mk-prevtag{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  z-index:7; pointer-events:none; white-space:nowrap; max-width:94%;
  overflow:hidden; text-overflow:ellipsis;
  background:rgba(28,29,29,.92); color:#fff;
  padding:6px 11px; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.bj-studio .mk-prevtag--cutout{ background:#1f6fe0; }
.bj-studio .mk-prevtag--undo{ background:#c0392b; }

/* the shared tolerance, on the bar only while a tool that judges shades is
   actually in hand */
.bj-studio .mk-tolrow{
  display:flex; align-items:center; gap:9px; flex:0 1 auto; min-width:0;
  border:1px solid var(--bj-hair); background:#fff; padding:0 10px; min-height:34px;
}
.bj-studio .mk-tolrow[hidden]{ display:none !important; }
.bj-studio .mk-tolrow label{
  flex:0 0 auto; font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bj-muted); white-space:nowrap;
}
.bj-studio .mk-tolrow input{ flex:1 1 70px; min-width:56px; accent-color:var(--bj-ink); }
.bj-studio .mk-tolrow b{ flex:0 0 20px; text-align:right; font-size:11px; color:var(--bj-muted); font-weight:700; }


/* ═══════════ THE FORMAT BADGE ════════════════════════════════════════════
   A repository full of thumbnails tells you what a thing LOOKS like and
   nothing about what it IS — a Photoshop document and a flat photograph are
   identical at 150 pixels square. So an imported document wears its format.

   In the badge language this library ALREADY speaks, which is two colours:
   gold for PAIR, ink for the layer count. A first attempt gave each format
   its own brand colour — Photoshop blue, Illustrator orange, Acrobat red —
   and the result was that the loudest thing on a page of jewellery was a
   file-type chip. The format is a fact, not an event. It gets ink. */
.bj-studio .mk-asset__fmt{
  position:absolute; left:6px; top:6px; z-index:2;
  background:var(--bj-ink); color:#fff;
  font-size:8px; font-weight:700; letter-spacing:.16em; padding:3px 6px;
  line-height:1; pointer-events:none;
}


/* the second line under the dropzone: quieter than the first, because it
   answers a question rather than asking one */
.bj-studio .dropzone p.up-formats{
  margin:.35rem 0 0; font-size:11px; line-height:1.5;
  color:#8d8a86; max-width:30em; letter-spacing:.02em;
}

/* the layer count, now that it rides on the panel's own tab */
.bj-studio .mk-dock__tab b{
  display:inline-block; margin-left:6px; padding:1px 5px; min-width:16px;
  background:var(--bj-ink); color:#fff; font-size:9px; font-weight:700;
  letter-spacing:.04em; vertical-align:1px;
}
.bj-studio .mk-dock__tab.is-on b{ background:var(--bj-gold); }


/* space-drag and middle-drag pan the sheet, and the cursor says so — there is
   no Move tool to hold any more, and there does not need to be */
.bj-studio .markup-stage.is-panning{ cursor:grab; }
.bj-studio .markup-stage.is-panning:active{ cursor:grabbing; }

/* ═══════════ ALIGNMENT GUIDES AND MEASUREMENTS ═══════════════════════════
   Thin, gold, and gone the instant the hand lifts. A guide has to be visible
   against a black drawing and against white paper without being a thing you
   look at — so it is one device pixel wide, and it never crosses anything it
   is not connecting. The sheet's own centre gets a dashed line, because
   "centred on the charm" is a different statement from "level with that". */
.bj-studio .mk-gd{
  position:absolute; display:block; pointer-events:none; z-index:6;
  outline:1px solid var(--bj-gold);
  outline-offset:0;
}
.bj-studio .mk-gd--mid{ outline-color:#e0483c; outline-style:dashed; }
.bj-studio .mk-gd--sheet{ outline-color:rgba(165,138,82,.55); }
.bj-studio .mk-dim{
  position:absolute; transform:translate(-50%,-50%); z-index:7;
  pointer-events:none; white-space:nowrap;
  background:var(--bj-ink); color:#fff; font-size:9.5px; font-weight:600;
  letter-spacing:.06em; padding:2px 5px; font-style:normal; line-height:1.35;
}
.bj-studio .mk-dim--gap{ background:#e0483c; }
.bj-studio .mk-dim--size{ transform:translate(-50%,0); background:var(--bj-gold); }
/* the grid-spacing row, in the Sheet menu beside the fade */
.bj-studio .mk-fade--grid b{
  min-width:22px; text-align:right; font-size:10px; color:var(--bj-muted);
}

/* the spacing bar: a measured gap you can see without turning numbers on */
.bj-studio .mk-gd--gap{ outline-color:#e0483c; outline-style:solid; }


/* ── the source switch: which picture am I working on ──────────────────────
   Deliberately loud. It changes what the gold button will do, and a control
   that changes what a paid action does has to be impossible to miss. */
.bj-studio .markup-src{
  display:flex; align-items:center; gap:6px; margin-inline-start:auto;
  padding:4px 6px; border:1px solid var(--bj-gold); border-radius:999px;
  background:rgba(165,138,82,.08);
}
.bj-studio .markup-src__lbl{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bj-ink-60,#6b6b6b); padding-inline:4px;
}
.bj-studio .mk-src{
  appearance:none; border:0; cursor:pointer; font:inherit; font-size:12px;
  padding:6px 12px; border-radius:999px; background:transparent; color:inherit;
  white-space:nowrap;
}
.bj-studio .mk-src.is-on{ background:var(--bj-gold); color:#fff; }
.bj-studio .mk-src:focus-visible{ outline:2px solid var(--bj-gold); outline-offset:2px; }
@media (max-width:720px){
  .bj-studio .markup-src{ margin-inline-start:0; }
  .bj-studio .markup-src__lbl{ display:none; }
}

/* ═══════════ 2026-08-17 — RANGE CONTROL VISIBILITY + SCALE READOUT ══════
   Theme/native range thumbs can resolve to white-on-white. The studio owns
   every range control now so the track and thumb stay visible everywhere. */
.bj-studio input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:18px;
  background:transparent;
  cursor:pointer;
  accent-color:var(--bj-ink);
}
.bj-studio input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:#d8d4cd;
  border:1px solid #bdb8af;
  border-radius:999px;
}
.bj-studio input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  margin-top:-7px;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--bj-ink);
  box-shadow:0 0 0 1px var(--bj-ink), 0 1px 3px rgba(0,0,0,.22);
}
.bj-studio input[type="range"]::-moz-range-track{
  height:4px;
  background:#d8d4cd;
  border:1px solid #bdb8af;
  border-radius:999px;
}
.bj-studio input[type="range"]::-moz-range-progress{
  height:4px;
  background:var(--bj-gold);
  border-radius:999px;
}
.bj-studio input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--bj-ink);
  box-shadow:0 0 0 1px var(--bj-ink), 0 1px 3px rgba(0,0,0,.22);
}
.bj-studio input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 1px var(--bj-ink), 0 0 0 4px rgba(165,138,82,.23);
}

/* The threshold control gets its own full row. It used to compete with the
   property buttons for the same 34px strip, becoming short and overlapping
   whichever button happened to be beside it. */
.bj-studio .markup-props.has-tolerance{
  flex-wrap:wrap;
  overflow-x:visible;
}
.bj-studio .mk-tolrow{
  flex:1 0 100%;
  width:100%;
  order:99;
  box-sizing:border-box;
  min-height:46px;
  padding:7px 12px;
  gap:12px;
  border-color:#c7c2b9;
  background:#faf9f7;
}
.bj-studio .mk-tolrow__copy{
  flex:0 1 245px;
  min-width:185px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bj-studio .mk-tolrow label{
  font-size:9.5px;
  color:var(--bj-ink);
  letter-spacing:.12em;
}
.bj-studio .mk-tolrow small{
  font-size:10px;
  line-height:1.35;
  color:var(--bj-muted);
}
.bj-studio .mk-tolrow input{
  flex:1 1 240px;
  min-width:180px;
}
.bj-studio .mk-tolrow b{
  flex:0 0 34px;
  color:var(--bj-ink);
  font-size:11.5px;
}

/* Physical-scale badge. The sheet is calibrated as a 20 mm workspace; the
   artwork bounding box therefore reads directly as a live mm estimate. */
.bj-studio .markup-scale{
  position:absolute;
  top:9px;
  right:9px;
  z-index:8;
  display:flex;
  align-items:baseline;
  gap:7px;
  pointer-events:none;
  padding:6px 9px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(28,29,29,.24);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  color:var(--bj-ink);
  backdrop-filter:blur(3px);
}
.bj-studio .markup-scale span{
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--bj-muted);
}
.bj-studio .markup-scale b{
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.bj-studio .markup-scale.is-empty{ opacity:.55; }

@media (max-width:760px){
  .bj-studio .mk-tolrow__copy{ flex-basis:100%; }
  .bj-studio .mk-tolrow input{ min-width:0; }
  .bj-studio .markup-scale{ top:6px; right:6px; padding:5px 7px; }
  .bj-studio .markup-scale span{ display:none; }
}

/* ═══════════ 2026-08-17 — FREEHAND ERASER ════════════════════════════════
   Separate from Magic Eraser: this is a simple brush mask. It appears only
   while the Eraser tool is active and does not alter the existing threshold
   slider or any of its layout rules. */
.bj-studio .mk-eraserrow{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:0 10px;
  border:1px solid var(--bj-hair);
  background:#fff;
  flex:0 0 auto;
}
.bj-studio .mk-eraserrow[hidden]{ display:none !important; }
.bj-studio .mk-eraserrow label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bj-muted);
  white-space:nowrap;
}
.bj-studio .mk-eraserrow input{ width:150px; min-width:100px; }
.bj-studio .mk-eraserrow output{
  min-width:38px;
  text-align:right;
  font-size:10.5px;
  font-weight:700;
  color:var(--bj-ink);
}
.bj-studio .mk-eraserrow small{
  font-size:9px;
  color:var(--bj-muted);
  letter-spacing:.04em;
}
.bj-studio .mk-eraserrow__dot{
  width:17px;
  height:17px;
  border:1px solid rgba(28,29,29,.35);
  display:grid;
  place-items:center;
  border-radius:50%;
  flex:none;
}
.bj-studio .mk-eraserrow__dot i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--bj-ink);
}
.bj-studio .mk-eraser-cursor{
  position:absolute;
  z-index:12;
  pointer-events:none;
  transform:translate(-50%,-50%);
  border:1px solid rgba(28,29,29,.75);
  border-radius:50%;
  background:rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.72) inset;
}
@media (max-width:760px){
  .bj-studio .mk-eraserrow{
    flex:1 0 100%;
    width:100%;
    box-sizing:border-box;
    min-height:42px;
  }
  .bj-studio .mk-eraserrow input{ flex:1 1 auto; width:auto; min-width:80px; }
  .bj-studio .mk-eraserrow small{ display:none; }
}


/* ═══════════ PROMPT LAB — REMOVED ════════════════════════════════════════
   Roughly eighty lines lived here: .promptlab and its head, body, bar, note,
   textarea, go button and read-only roles block, plus .render-q--in /
   .render-q--model / .render-q__lbl for the two segmented toggles that sat
   on the action row, and a narrow-screen override for the textarea.

   The lab was an operator instrument — the exact render prompt, editable,
   with its own Re-Generate press — and it is gone from the markup along with
   the Model and Send toggles. Not one selector below the fold referenced it,
   so the whole block is deleted rather than left dark. */


/* ═══════════ STAGE — TWO PICTURES BEFORE THE RENDER ══════════════════════
   The drawing and the Greyscale Mask sit side by side until a metal render
   exists, so the customer sees what the renderer will actually be handed
   before paying for it. Stacks on a narrow screen rather than shrinking two
   images past the point of being judgeable. */
.bj-studio .stage--duo{
  display:flex; flex-direction:row; align-items:stretch; justify-content:center;
  gap:12px; flex-wrap:nowrap;
}
.bj-studio .stage--duo .result--half{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:6px;
}
.bj-studio .stage--duo .result--half img{
  width:100%; height:auto; object-fit:contain; display:block;
}
.bj-studio .result__cap{
  font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bj-muted); text-align:center; line-height:1.3;
}
@media (max-width:560px){
  .bj-studio .stage--duo{ flex-direction:column; gap:10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMPORT — the one control on the property bar that is not about the mark
   you are making. It is about artwork that already exists, and for most
   customers it is the first thing they reach for, so it is sized and weighted
   to say so. Sticky to the right edge, because a bar that has scrolled
   sideways must never be the reason somebody cannot find it.
   ========================================================================= */
/* margin-left:auto, and the tip gives up its own: two auto margins on one
   row split the slack between them, which would have left the hint floating
   in the middle of nowhere. The hint follows the controls it describes; the
   button anchors the end of the bar. */
.bj-studio .markup-props .markup-tip{ margin-left:16px; text-align:left; }
.bj-studio .mk-import{
  flex:none; margin-left:auto; position:sticky; right:0; z-index:2;
  padding-left:14px; background:#fff;
  box-shadow:-16px 0 12px -6px #fff;
}
.bj-studio .mk-import__b{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  min-height:38px; padding:0 13px; cursor:pointer;
  border:1px solid var(--bj-ink); background:var(--bj-ink); color:#fff;
  font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.bj-studio .mk-import__b svg{ width:17px; height:17px; flex:none; }
.bj-studio .mk-import__b .mk-caret{ border-top-color:currentColor; opacity:.7; }

/* the menu answers "will it take MY file", which is the question the old
   wording ("a design file") hid behind a category name */
.bj-studio .mk-import__menu{ width:342px; max-width:calc(100vw - 24px); }
.bj-studio .mk-imp{ align-items:flex-start; gap:11px; padding:10px 11px; }
.bj-studio .mk-imp__ico{
  flex:none; width:34px; height:34px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--bj-gold-lt,#e2d3ae); background:var(--bj-band,#faf7f0);
  color:#9a7c3e;
}
.bj-studio .mk-imp__ico svg{ width:18px; height:18px; opacity:1; }
.bj-studio .mk-imp__say{ min-width:0; display:block; }
.bj-studio .mk-imp b{
  display:block; font-size:12.5px; font-weight:700; color:var(--bj-ink); line-height:1.25;
}
.bj-studio .mk-imp em{
  display:block; margin:2px 0 0; padding:0; font-style:normal;
  font-size:10.5px; line-height:1.45; letter-spacing:0; text-transform:none;
  color:var(--bj-muted); white-space:normal;
}
/* the formats, printed rather than implied */
.bj-studio .mk-fmts{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.bj-studio .mk-fmts i{
  font-style:normal; font-size:8px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bj-muted);
  border:1px solid var(--bj-hair); background:#fff; padding:2px 5px;
}
.bj-studio .mk-imp:hover .mk-imp__ico{ border-color:var(--bj-gold,#b8935a); }
.bj-studio .mk-imp:hover .mk-fmts i{ border-color:#c9c2b2; color:var(--bj-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   THE HOVER SYSTEM — one answer, everywhere
   ═══════════════════════════════════════════════════════════════════════════
   Nearly every control in this studio was saying "you are on me" by darkening
   its own text by one step, or its border by one hairline. Both are real
   changes and both are invisible in motion: by the time the eye has resolved
   a 4% shift in a 9px letterform the cursor is two controls further on. Worse,
   several of them said it in ink on ink — a ghost button that turned solid
   black under a cursor while its label stayed grey is not a subtle hover, it
   is a button that disappears when you reach for it.

   ONE ANSWER, and it is the one every desktop interface has settled on: a
   filled TONE behind the control. A wash is visible at a glance, at any size,
   at any speed, and it works the same on a 9px chip as on a toolbar button.
   The hairline darkens with it, and the text goes to full ink.

   THE FEEL is the point. 110ms is under the ~200ms at which motion starts to
   read as animation rather than as response, so the tone appears to be already
   there. Press takes 60ms and a single pixel of travel — the whole of what a
   good keyboard gives you, which is a surface that acknowledges the finger
   before the finger has finished arriving. Everything shares one curve, so
   the studio feels like one object rather than forty.

   Three states, and every control gets all three: HOVER is a wash, PRESS is
   one step deeper and one pixel down, ON is ink. A control that is already ON
   lifts toward the light on hover instead of darkening further, because it has
   nowhere darker to go and "I heard you" still has to be said.
   ========================================================================= */
.bj-studio{
  --mk-hov:#f2eee4;         /* the wash */
  --mk-hov-line:#c6bfaf;    /* the hairline, awake */
  --mk-press:#e6dfcd;       /* one step deeper, under the finger */
  --mk-on-hov:#33342f;      /* an ink control, lifted toward the light */
  --mk-in:.11s cubic-bezier(.22,.9,.28,1);
  --mk-press-t:.06s cubic-bezier(.3,.8,.4,1);
}

.bj-studio .mk-tool,
.bj-studio .mk-hist,
.bj-studio .mk-prop,
.bj-studio .mk-act,
.bj-studio .mk-chip,
.bj-studio .mk-icon,
.bj-studio .mk-metal__b,
.bj-studio .mk-metal__why,
.bj-studio .mk-hoop__b,
.bj-studio .mk-hoop__why,
.bj-studio .mk-mode,
.bj-studio .mk-mode__why,
.bj-studio .mk-dock__tab,
.bj-studio .mk-dock__x,
.bj-studio .mk-rule__corner,
.bj-studio .markup-zoom-reset,
.bj-studio .markup__close,
.bj-studio .mk-import__b,
.bj-studio .mk-layer__b,
.bj-studio .mk-layer__tw,
.bj-studio .mk-asset__zoom,
.bj-studio .mk-asset__kill,
.bj-studio .markup-foot .btn{
  transition:background var(--mk-in), color var(--mk-in),
             border-color var(--mk-in), box-shadow var(--mk-in),
             transform var(--mk-press-t);
}

/* ── the wash: everything that sits on white and is not currently ON ──── */
.bj-studio .mk-tool:not(.is-on):hover,
.bj-studio .mk-hist:not(:disabled):hover,
.bj-studio .mk-prop:not(:disabled):hover,
.bj-studio .mk-act:not(:disabled):hover,
.bj-studio .mk-chip:not(.is-on):hover,
.bj-studio .mk-icon:not(.is-on):hover,
.bj-studio .mk-metal__b:not(.is-armed):hover,
.bj-studio .mk-metal__why:hover,
.bj-studio .mk-hoop__b:hover,
.bj-studio .mk-hoop__why:hover,
.bj-studio .mk-mode:not(.is-on):hover,
.bj-studio .mk-mode__why:hover,
.bj-studio .mk-dock__tab:not(.is-on):hover,
.bj-studio .mk-dock__x:hover,
.bj-studio .mk-rule__corner:hover,
.bj-studio .markup-zoom-reset:hover,
.bj-studio .markup__close:hover,
.bj-studio .mk-layer__b:hover,
.bj-studio .mk-layer__tw:hover{
  background:var(--mk-hov); color:var(--bj-ink);
}
/* the ones that carry a border take the awake hairline with it */
.bj-studio .mk-hist:not(:disabled):hover,
.bj-studio .mk-prop:not(:disabled):hover,
.bj-studio .mk-act:not(:disabled):hover,
.bj-studio .mk-chip:not(.is-on):hover,
.bj-studio .mk-icon:not(.is-on):hover,
.bj-studio .markup-zoom-reset:hover{ border-color:var(--mk-hov-line); }

/* ── ON controls lift toward the light rather than darkening further ──── */
.bj-studio .mk-tool.is-on:hover,
.bj-studio .mk-chip.is-on:hover,
.bj-studio .mk-mode.is-on:hover,
.bj-studio .mk-icon.is-on:hover{
  background:var(--mk-on-hov); border-color:var(--mk-on-hov); color:#fff;
}
.bj-studio .mk-import__b:hover{ background:var(--mk-on-hov); border-color:var(--mk-on-hov); }
/* the dock's tabs get their gold rule as a preview of what clicking does */
.bj-studio .mk-dock__tab:not(.is-on):hover{ border-bottom-color:var(--bj-gold-lt,#e2d3ae); }

/* ── the two that mean something in colour keep meaning it ────────────── */
.bj-studio .mk-metal__b:not(.is-armed)[data-fill="cutout"]:hover{ color:#1a5fc4; }
.bj-studio .mk-metal__b:not(.is-armed)[data-fill="none"]:hover{ color:#b21622; }
.bj-studio .mk-act--danger:not(:disabled):hover,
.bj-studio .mk-prop--danger:not(:disabled):hover,
.bj-studio .mk-asset__kill:hover{
  background:#fdf1ef; border-color:#e0b4ad; color:#c0392b;
}

/* ── PRESS: one step deeper, one pixel down. The whole trick. ─────────── */
.bj-studio .mk-tool:not(.is-on):active,
.bj-studio .mk-hist:not(:disabled):active,
.bj-studio .mk-prop:not(:disabled):active,
.bj-studio .mk-act:not(:disabled):active,
.bj-studio .mk-chip:not(.is-on):active,
.bj-studio .mk-icon:not(.is-on):active,
.bj-studio .mk-metal__b:not(.is-armed):active,
.bj-studio .mk-metal__why:active,
.bj-studio .mk-hoop__b:active,
.bj-studio .mk-hoop__why:active,
.bj-studio .mk-mode:not(.is-on):active,
.bj-studio .mk-mode__why:active,
.bj-studio .mk-dock__tab:active,
.bj-studio .mk-rule__corner:active,
.bj-studio .markup-zoom-reset:active,
.bj-studio .markup__close:active{ background:var(--mk-press); }

.bj-studio .mk-tool:not(:disabled):active,
.bj-studio .mk-hist:not(:disabled):active,
.bj-studio .mk-prop:not(:disabled):active,
.bj-studio .mk-act:not(:disabled):active,
.bj-studio .mk-chip:active,
.bj-studio .mk-icon:active,
.bj-studio .mk-metal__b:active,
.bj-studio .mk-metal__why:active,
.bj-studio .mk-hoop__b:active,
.bj-studio .mk-hoop__why:active,
.bj-studio .mk-mode:active,
.bj-studio .mk-mode__why:active,
.bj-studio .mk-dock__tab:active,
.bj-studio .mk-rule__corner:active,
.bj-studio .markup-zoom-reset:active,
.bj-studio .markup__close:active,
.bj-studio .mk-import__b:active,
.bj-studio .markup-foot .btn:not([disabled]):active{ transform:translateY(1px); }
.bj-studio .mk-import__b:active{ background:#1c1d1d; }

/* ── the two buttons that send the work on ────────────────────────────── */
/* "Save & close" was a ghost, and the theme's own .btn:hover paints a ghost
   solid black while its label stays grey — a button that vanishes at the
   moment it is reached for. It is a quiet SECONDARY now: a hairline that
   arrives on hover, ink text, and a wash. Specificity is deliberate; the
   theme stylesheet loads after this one. */
.bj-studio .markup-foot .markup-actions .btn--ghost{
  border:1px solid transparent; color:var(--bj-muted); background:transparent;
}
.bj-studio .markup-foot .markup-actions .btn--ghost:hover,
.bj-studio .markup-foot .markup-actions .btn--ghost:focus-visible{
  background:var(--mk-hov); border-color:var(--mk-hov-line); color:var(--bj-ink);
}
.bj-studio .markup-foot .markup-actions .btn--ghost:active{ background:var(--mk-press); }
.bj-studio .markup-foot .markup-actions .btn--gold:hover{
  background:#a2854b; border-color:#a2854b; color:#fff;
}
.bj-studio .markup-foot .markup-actions .btn--gold:active{ background:#8f7644; }
.bj-studio .markup-foot .markup-actions .btn:not(.btn--gold):not(.btn--ghost):hover{
  background:var(--mk-on-hov); border-color:var(--mk-on-hov); color:#fff;
}

/* ── rows and tiles: bigger surfaces, so a softer wash and a real lift ── */
/* ── AND THE TWO FILLS OF A LAYER ROW, SETTLED HERE ──────────────────────
   Both tones live in this one place because they are only meaningful
   against each other, and because THIS is where the winning `:hover` rule
   sits: `.mk-layer:hover` and `.mk-layer.is-sel` have identical specificity,
   so whichever comes last in the file takes it. Declaring the pair earlier
   and this rule later is exactly how the two got out of order.

   Measured against white, and this is the whole bug in two numbers:
     hover  #f2eee4   contrast 1.159
     was:   #f6eedd   contrast 1.123      ← SELECTION, the quieter of the two
   Hover was louder than selection. A pointer passing over a row shouted
   down the row the customer was working on, which is what "the hover state
   overpowers what has been already selected" means, exactly.

     now:   #eddfba   contrast 1.324      ← twice hover's step off white
   That is about as deep as --mk-press, the studio's own "one step deeper"
   tone, so it is loud without leaving the palette. Hover is untouched: it
   was never wrong on its own, only wrong to be the stronger of the pair. */
.bj-studio .mk-layer:hover{ background:var(--mk-hov); }
.bj-studio .mk-layer.is-sel{ background:#eddfba; }
.bj-studio .mk-layer.is-sel:hover{ background:#e6d5a8; }
.bj-studio .mk-asset{ transition:border-color var(--mk-in), box-shadow var(--mk-in), transform var(--mk-press-t); }
.bj-studio .mk-asset:hover,
.bj-studio .mk-asset:focus-visible{
  border-color:var(--bj-ink); box-shadow:0 6px 18px rgba(28,29,29,.13);
}
.bj-studio .mk-asset:active{ transform:translateY(1px); box-shadow:0 2px 8px rgba(28,29,29,.12); }

/* ── the one input on this surface ────────────────────────────────────── */
.bj-studio .mk-lib__search input{ transition:border-color var(--mk-in), box-shadow var(--mk-in); }
.bj-studio .mk-lib__search:hover input{ border-color:var(--mk-hov-line); }
.bj-studio .mk-lib__search input:focus{
  border-color:var(--bj-ink); box-shadow:0 0 0 3px rgba(184,147,90,.18);
}

/* ── keyboard reaches everything the pointer does ─────────────────────── */
.bj-studio .markup__body :focus-visible,
.bj-studio .mk-dock :focus-visible,
.bj-studio .mk-drop__menu :focus-visible{
  outline:2px solid var(--bj-gold,#b8935a); outline-offset:1px;
}

/* ── nothing pretends to be pressable when it is not ──────────────────── */
.bj-studio .mk-hist:disabled,
.bj-studio .mk-prop:disabled,
.bj-studio .mk-act:disabled,
.bj-studio .markup-foot .btn[disabled]{ transform:none !important; }

@media (prefers-reduced-motion: reduce){
  .bj-studio{ --mk-in:.01s linear; --mk-press-t:.01s linear; }
  .bj-studio .mk-tool:active,
  .bj-studio .mk-chip:active,
  .bj-studio .markup-foot .btn:active{ transform:none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLACE FROM YOUR LIBRARY — the same library, at a size you can look at
   ═══════════════════════════════════════════════════════════════════════════
   Near the full window on purpose. The dock's two-tile column is right for
   dragging one thing in without losing your place; it is wrong for the job
   this modal exists to do, which is recognising a charm you made in March
   among a hundred and forty of them. Tiles are big, the caption carries the
   name and the date, and the grid is the only thing that scrolls so the
   search and the filters never leave.
   ========================================================================= */
.bj-studio .mk-place__inner{
  width:min(1360px, calc(100vw - 40px));
  height:min(940px, calc(100vh - 40px));
  max-height:none; display:flex; flex-direction:column; overflow:hidden;
}
.bj-studio .mk-place__body{
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto; width:100%;
  padding:26px 30px 20px;
}
.bj-studio .mk-place__head{
  flex:none; display:flex; align-items:flex-end; gap:16px;
  padding-bottom:14px; border-bottom:1px solid var(--bj-hair);
}
.bj-studio .mk-place__id{ min-width:0; flex:1 1 auto; }
.bj-studio .mk-place__id h2{
  font-size:23px; margin:3px 0 0; padding:0; line-height:1.2;
}
.bj-studio .mk-place__id h2:after{ display:none; }
.bj-studio .mk-place__head .mk-lib__count{ margin-left:0; flex:none; }
/* search across the top, then kind on the left and order on the right —
   two rows rather than the three they stacked into, which is a whole row of
   tiles bought back for nothing */
.bj-studio .mk-place__bar{
  flex:none; padding:14px 0; border-bottom:1px solid var(--bj-hair);
  display:flex; flex-wrap:wrap; align-items:center; gap:0 12px;
}
.bj-studio .mk-place__bar .mk-lib__search{ flex:1 1 100%; }
.bj-studio .mk-place__bar .mk-lib__filters{ flex:0 1 auto; }
.bj-studio .mk-place__bar .mk-lib__sort{ flex:0 0 auto; margin-left:auto; }
/* the grid is the only thing that moves */
.bj-studio .mk-place__grid{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:16px 2px; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
}
.bj-studio .mk-place__grid .mk-asset{ cursor:pointer; }
.bj-studio .mk-place__grid .mk-asset__img{ aspect-ratio:1/1; }
.bj-studio .mk-place__foot{
  flex:none; padding:13px 0 0; border-top:1px solid var(--bj-hair);
  font-size:11.5px; line-height:1.55; color:var(--bj-muted);
}
.bj-studio .mk-place__foot b{ color:var(--bj-gold,#b8935a); font-weight:700; }

@media (max-width:760px){
  .bj-studio .mk-place__inner{
    width:100vw; height:100vh; max-width:none;
  }
  .bj-studio .mk-place__body{ padding:18px 16px 14px; }
  .bj-studio .mk-place__id h2{ font-size:19px; }
  .bj-studio .mk-place__bar{ padding:12px 0; }
  .bj-studio .mk-place__grid{
    grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px;
  }
}
/* an ink-filled ON button would swallow a translucent gold bar, so a pass in
   flight gives up its fill for the duration and takes it back on landing */
.bj-studio .pair-toggle__b[data-relay="work"].is-on{ background:none; color:var(--bj-ink); }
/* and they join the hover system like everything else */
.bj-studio .pair-toggle__b{ transition:background var(--mk-in,.11s ease-out), color var(--mk-in,.11s ease-out), transform var(--mk-press-t,.06s ease-out); }
.bj-studio .pair-toggle__b[data-relay="ready"]:not(.is-on):hover{ background:var(--mk-hov,#f2eee4); color:var(--bj-ink); }
.bj-studio .pair-toggle__b[data-relay="ready"].is-on:hover{ background:var(--mk-on-hov,#33342f); }
.bj-studio .pair-toggle__b[data-relay="ready"]:active{ transform:translateY(1px); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE RELAY — three passes, three buttons, each one saying what it is doing
   ═══════════════════════════════════════════════════════════════════════════
   A charm is made in three passes: the drawing, the greyscale mask the
   workshop is instructed with, and the metal. They used to be one spinner
   spinning three times over a covered stage, and the three buttons appeared
   one at a time as their picture arrived — so the customer could not see what
   was coming, and a control that materialises mid-wait reads as the interface
   changing its mind.

   All three are present from the first pass now, and each one reports its own
   work IN ITSELF: a translucent gold wash fills across the button behind its
   label with a gold rule along the bottom edge, the label never leaves, and
   when the picture exists the button lights and becomes pressable. Three
   things filling up in the order they happen, rather than one bar that says
   nothing about which of three things it is on.

   The fill is a ::before UNDER the text rather than a background, so the
   label stays at full contrast the whole way across — a progress fill that
   dims the word it is filling is a progress fill you cannot read.
   ========================================================================= */
.bj-studio .pair-toggle__b{ position:relative; overflow:hidden; }
.bj-studio .pair-toggle__b > *{ position:relative; z-index:1; }

/* width is driven from the JS as --p */
.bj-studio .pair-toggle__b::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg,
    rgba(184,147,90,.13) 0%, rgba(184,147,90,.28) 68%, rgba(184,147,90,.42) 100%);
  /* THE UNDERLINE IS THE PART YOU ACTUALLY READ. A translucent wash alone is
     honest but quiet — at a glance it is a slightly warmer button. The wash
     says "something is happening here"; the 3px gold rule filling along the
     bottom edge says HOW FAR, and it is legible across a room. */
  border-bottom:3px solid var(--bj-gold,#b8935a);
  transition:width .5s cubic-bezier(.32,.72,.3,1), opacity .3s ease-out;
  opacity:0; pointer-events:none; z-index:0;
}

/* ── WAIT: it exists, it is not its turn ── */
.bj-studio .pair-toggle__b[data-relay="wait"]{ color:#a9a49b; cursor:default; }
.bj-studio .pair-toggle__b[data-relay="wait"].is-on{ background:none; color:#a9a49b; }

/* ── WORK: the fill advances, and a slow sheen crosses it so a pass that
      stalls on a bad network still looks alive rather than stuck ── */
.bj-studio .pair-toggle__b[data-relay="work"]{ color:var(--bj-ink); cursor:progress; }
.bj-studio .pair-toggle__b[data-relay="work"]::before{ width:var(--p, 0%); opacity:1; }
/* a sign of life, not a second progress bar — faint enough that it can never
   be mistaken for the fill underneath it */
.bj-studio .pair-toggle__b[data-relay="work"]::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.38) 46%, transparent 78%);
  animation:bjRelaySheen 1.8s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes bjRelaySheen{
  from{ transform:translateX(-104%); }
  to  { transform:translateX(104%); }
}

/* ── READY: the picture exists. A gold underline pulses once as it lands, so
      completion is something you SEE happen rather than notice later. This is
      the only moment in the sequence worth celebrating, so it is the only one
      that moves on its own. ── */
.bj-studio .pair-toggle__b[data-relay="ready"]{
  cursor:pointer; animation:bjRelayLand .55s cubic-bezier(.2,.9,.3,1);
}
.bj-studio .pair-toggle__b[data-relay="ready"]::before{
  width:100%; opacity:0;
  transition:width .01s linear, opacity .45s cubic-bezier(.32,.72,.3,1);
}
@keyframes bjRelayLand{
  0%   { box-shadow:inset 0 -3px 0 rgba(184,147,90,0); }
  30%  { box-shadow:inset 0 -3px 0 rgba(184,147,90,1); }
  100% { box-shadow:inset 0 -3px 0 rgba(184,147,90,0); }
}

@media (prefers-reduced-motion: reduce){
  .bj-studio .pair-toggle__b::before{ transition:none; }
  .bj-studio .pair-toggle__b[data-relay="work"]::after{ animation:none; opacity:.28; }
  .bj-studio .pair-toggle__b[data-relay="ready"]{ animation:none; }
}

/* "Done" is one syllable where "Use this as my reference →" was seven; the
   button stops being a paragraph and goes back to being a button. */
.bj-studio .markup-foot .markup-actions .btn--done{ padding:13px 40px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TWO HOVERS THAT THE THEME WAS STILL WINNING
   ═══════════════════════════════════════════════════════════════════════════
   brites-design-language.css loads AFTER this file — that is the whole point
   of the port layer — so a rule of ours at equal specificity loses on source
   order no matter how late in this file it sits. For most controls that never
   mattered, because the theme has no opinion about .mk-tool or .mk-chip. It
   has a very strong one about .btn.

   SAVE & CLOSE was the casualty: the theme paints .btn:hover solid black, our
   ghost variant only ever restated its colour, and the label — grey, because
   it is a quiet secondary — went black-on-black. A button that vanishes at
   the exact moment you reach for it is worse than one with no hover at all.
   These two carry !important deliberately: it is not a shortcut past our own
   cascade, it is the only tool that reaches past a stylesheet we do not own.
   ========================================================================= */
.bj-studio .markup-foot .markup-actions .btn--ghost,
.bj-studio #markupComposeClose.btn--ghost,
.bj-studio #markupSave.btn--ghost{
  background:transparent !important;
  border:1px solid transparent !important;
  color:var(--bj-muted) !important;
}
.bj-studio .markup-foot .markup-actions .btn--ghost:hover,
.bj-studio .markup-foot .markup-actions .btn--ghost:focus-visible,
.bj-studio #markupComposeClose.btn--ghost:hover,
.bj-studio #markupComposeClose.btn--ghost:focus-visible,
.bj-studio #markupSave.btn--ghost:hover,
.bj-studio #markupSave.btn--ghost:focus-visible{
  background:var(--mk-hov,#f2eee4) !important;
  border-color:var(--mk-hov-line,#c6bfaf) !important;
  color:var(--bj-ink,#1c1d1d) !important;
}
.bj-studio .markup-foot .markup-actions .btn--ghost:active,
.bj-studio #markupComposeClose.btn--ghost:active,
.bj-studio #markupSave.btn--ghost:active{
  background:var(--mk-press,#e6dfcd) !important;
}

/* ── UNDO AND REDO ────────────────────────────────────────────────────────
   Same cause, and one more on top of it: for most of a session these two are
   genuinely disabled — there is nothing to undo — and a disabled button that
   looks identical to a live one reads as a hover that is broken rather than
   as a button that is off. So the two states are now told apart at a glance:
   live ones take the wash and the press like everything else, dead ones sit
   at a third of their weight with the cursor that says so. */
.bj-studio .markup-rail .mk-hist:not(:disabled):hover,
.bj-studio .mk-hist:not(:disabled):hover{
  background:var(--mk-hov,#f2eee4) !important;
  border-color:var(--mk-hov-line,#c6bfaf) !important;
  color:var(--bj-ink,#1c1d1d) !important;
}
.bj-studio .markup-rail .mk-hist:not(:disabled):active,
.bj-studio .mk-hist:not(:disabled):active{
  background:var(--mk-press,#e6dfcd) !important; transform:translateY(1px);
}
.bj-studio .mk-hist:disabled{
  opacity:.34; cursor:not-allowed; background:#fff; border-color:var(--bj-hair);
}
.bj-studio .mk-hist{ cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PAIR RAIL, LAID OUT FOR THREE SEGMENTS INSTEAD OF TWO
   ═══════════════════════════════════════════════════════════════════════════
   The rail was built when the toggle held two segments and they arrived one
   at a time. Three, all present from the first pass, do not fit the same box:
   `flex:none` on the group and no width rule on the segments meant they were
   sized by their text and then silently guillotined — "GREYSCALE MA", "CHARM"
   with its last letter gone — by the overflow:hidden the progress fill needs.
   Text disappearing with no ellipsis is the worst version of not fitting,
   because nothing on screen admits it happened.

   So: the group takes the row, the three segments share it equally, and each
   one is separated by a hairline so they can never read as one long button.
   Row two stops leaving a hole — Mark up sits at the left, Re-render takes
   the rest — and both rows get the same rhythm of gap and padding.
   ========================================================================= */
.bj-studio .pair-rail{ gap:10px; min-height:0; }
.bj-studio .pair-rail__row{ gap:12px; }

/* ── row one: three equal segments ── */
.bj-studio .pair-rail__row--views{ align-items:stretch; }
.bj-studio .pair-toggle{
  flex:1 1 auto; min-width:0; display:flex; padding:3px; gap:3px;
}
.bj-studio .pair-toggle__b{
  flex:1 1 0; min-width:0; padding:8px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:.1em;
}
/* a hairline between segments — three abutting rectangles with no rule
   between them are one rectangle with three words in it */
.bj-studio .pair-toggle__b + .pair-toggle__b{ box-shadow:-1px 0 0 var(--bj-hair); }
.bj-studio .pair-toggle__b.is-on + .pair-toggle__b,
.bj-studio .pair-toggle__b + .pair-toggle__b.is-on{ box-shadow:none; }
.bj-studio .pair-rail__markup{
  flex:0 0 auto; margin-left:0; align-self:stretch; padding:8px 14px;
}

/* ── row two: no hole in the middle of it ── */
.bj-studio .pair-rail__row--act{ align-items:stretch; }
.bj-studio .pair-rail__render.btn,
.bj-studio .pair-rail__render{
  margin-left:0 !important; flex:1 1 auto; min-width:0;
  justify-content:center; padding:12px 18px !important;
}

/* ── NARROW PANELS: THE TYPE GIVES WAY, THE LAYOUT DOES NOT ──────────────
   Wrapping to a third row is not available here: the rail reserves a fixed
   92px of the stage's height budget and clips what does not fit, so a row
   that wrapped would be cut off rather than shown. The segments give up
   letter-spacing first, then the markup button gives up its word and keeps
   its pencil — in that order, because "Greyscale" truncated to "GREYSC…" is
   a label that has stopped being a label, while a pencil on its own is still
   a pencil. */
@container (max-width: 470px){
  .bj-studio .pair-toggle__b{ padding:8px 3px; font-size:9px; letter-spacing:.04em; }
  .bj-studio .pair-rail__markup{ padding:8px 10px; letter-spacing:.08em; }
}
@container (max-width: 400px){
  .bj-studio .pair-rail__markup span{ display:none; }
  .bj-studio .pair-rail__markup{ padding:8px 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE RELAY BAR — what is being made, and how far through it is
   ═══════════════════════════════════════════════════════════════════════════
   Only the FIRST of the three pictures covers the stage. For the other two
   the customer is looking at a finished drawing, and until this existed there
   was nothing on screen saying anything was still happening — a studio that
   is working looked identical to a studio that had stopped. The per-button
   fills were true but too quiet to carry that on their own: they answer
   "which one" and they answer it at a glance, but they are 3px of gold on a
   control the eye is not resting on.

   So: a strip along the bottom edge of the frame, where a player puts a
   buffer. Three things and no more — which of the three, what it is doing,
   how far through. It is absolutely positioned, so the square above it never
   resizes mid-sequence, and it leaves the moment the third picture lands.
   ========================================================================= */
.bj-studio .gen-relay{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.97) 100%);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:16px 12px 0;
  animation:bjRelayBarIn .32s cubic-bezier(.2,.9,.3,1);
}
@keyframes bjRelayBarIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.bj-studio .gen-relay__say{
  display:flex; align-items:baseline; gap:9px; padding:0 3px 7px;
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap; min-width:0;
}
.bj-studio .gen-relay__step{
  flex:none; color:var(--bj-gold,#b8935a);
  font-variant-numeric:tabular-nums;
}
.bj-studio .gen-relay__what{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  color:var(--bj-ink,#1c1d1d); letter-spacing:.08em;
}
.bj-studio .gen-relay__pct{
  flex:none; color:var(--bj-muted,#6f6a63); font-variant-numeric:tabular-nums;
}
.bj-studio .gen-relay__track{
  height:3px; background:rgba(28,29,29,.10); overflow:hidden; position:relative;
}
.bj-studio .gen-relay__track > i{
  display:block; height:100%; width:0;
  background:var(--bj-gold,#b8935a);
  transition:width .55s cubic-bezier(.32,.72,.3,1);
}
/* ── THE HONEST INDETERMINATE ───────────────────────────────────────────────
   Pass two has no percentage to report — the mask is filed by the server
   inside the drawing's own pass and the browser is waiting for it to appear,
   not measuring it. A bar that invented a number there would be lying about
   the one thing this strip exists to tell the truth about, so it shuttles
   instead: unmistakably "working", unmistakably not a measurement. */
.bj-studio .gen-relay.is-waiting .gen-relay__track > i{
  width:34% !important; transition:none;
  animation:bjRelayShuttle 1.5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes bjRelayShuttle{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(294%); }
}
@media (prefers-reduced-motion: reduce){
  .bj-studio .gen-relay{ animation:none; }
  .bj-studio .gen-relay__track > i{ transition:none; }
  .bj-studio .gen-relay.is-waiting .gen-relay__track > i{ animation:none; width:100% !important; opacity:.45; }
}

/* ── THE SEGMENT WITH NOTHING TO COUNT ────────────────────────────────────
   Pass two is a wait, not a measurement — the mask is filed by the server
   inside the drawing's pass and the browser is watching for it to appear. Its
   button sat at 0% the whole time, which looks exactly like a pass that never
   started. It shuttles instead, the same answer the strip along the frame
   gives, so the two never disagree about what is happening. */
.bj-studio .pair-toggle__b[data-relay="work"].is-waiting::before{
  width:38% !important;
  animation:bjRelaySegShuttle 1.5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes bjRelaySegShuttle{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(263%); }
}
@media (prefers-reduced-motion: reduce){
  .bj-studio .pair-toggle__b[data-relay="work"].is-waiting::before{
    animation:none; width:100% !important; opacity:.5;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEEPING THE FRAMES — what the browser is allowed to skip
   ═══════════════════════════════════════════════════════════════════════════
   A library of a hundred and forty tiles is a hundred and forty boxes to lay
   out, style and paint every time the grid is touched — even though six of
   them are on the screen. `content-visibility` lets the browser skip the ones
   that are not, and `contain-intrinsic-size` tells it how much room to leave
   so the scrollbar is still honest and nothing jumps when a tile scrolls into
   view. This is the single largest saving on this page, and it costs nothing
   on a browser that has never heard of it.
   ═════════════════════════════════════════════════════════════════════════ */
@supports (content-visibility: auto){
  .bj-studio .mk-lib__grid > .mk-asset,
  .bj-studio .mk-place__grid > .mk-asset,
  .bj-studio #libPickGrid > .mk-asset{
    content-visibility:auto;
    /* a tile is its square picture plus two lines of caption */
    contain-intrinsic-size:auto 184px;
  }
  .bj-studio .mk-layers > .mk-layer{
    content-visibility:auto;
    contain-intrinsic-size:auto 64px;
  }
}

/* Style and layout inside one tile can never affect another one, and saying
   so lets the browser prove it rather than recompute the grid. Not `paint`
   or `size`: the tile's own height still has to come from its contents. */
.bj-studio .mk-asset{ contain:layout style; }
.bj-studio .mk-layer{ contain:layout style; }

/* ── the menus themselves ───────────────────────────────────────────────────
   A menu that opens by scaling and fading is a compositor job the whole way
   through — as long as it is promoted BEFORE the first frame, not part-way
   through it. `will-change` while the class is on does exactly that, and is
   removed again by the same class going away, so no layer is left behind. */
.bj-studio .mk-drop__menu.is-in,
.bj-studio .mk-drop__menu.is-in--right{
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.bj-studio .mk-tip.is-in{ will-change:transform, opacity; }

/* A thumbnail that has not been drawn yet is a picture of paper, so it
   should not be stretched to fill the tile the way a real one is. */
.bj-studio .mk-asset__img img[data-thumb]{ object-fit:cover; opacity:.85; }

/* The saved-designs drawer is the same story as the library grid: a long
   list whose rows are all the same height, most of them below the fold. */
@supports (content-visibility: auto){
  .bj-studio #drawerBody > .saved-item{
    content-visibility:auto;
    contain-intrinsic-size:auto 101px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE QA READ-OUT — bottom left, and deliberately easy to ignore
   ═══════════════════════════════════════════════════════════════════════════
   It reports how the workshop scored the gold render against the greyscale
   map. Staff only (see qaAllowed in the client), and it never appears at all
   when the scoring subsystem is switched off, because then there are no
   fields to read. z-index sits BELOW every modal on purpose: a diagnostic
   must never be the thing covering a dialog.
   ═════════════════════════════════════════════════════════════════════════ */
/* ── HOW MANY IMAGES THIS CHARM COST ──────────────────────────────────────
   A render can quietly spend three model calls getting to the picture on
   screen, and until now the only trace of that was a line in a server log.
   This is the whole readout: a chip in the corner, the count and the ceiling,
   and nothing else. It shares the QA chip's language deliberately — same
   size, same hairline, same low opacity until you look at it — because it is
   the same kind of thing, and it sits above the QA panel rather than beside
   it so the two can both be on without colliding.                          */
.bj-gen-count{
  position:fixed; left:14px; bottom:14px; z-index:95;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; pointer-events:none;
  font-family:var(--bj-sans, system-ui, sans-serif);
  border:1px solid var(--bj-hair, #ddd6c6); background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--bj-muted, #6b6559);
  font-size:11px; line-height:1; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  opacity:.62;
}
.bj-gen-count[hidden]{ display:none; }
.bj-gen-count__n{ font-weight:700; color:var(--bj-ink, #33342f); }
/* the working dot: the same pulse the rest of the studio uses to say "alive" */
.bj-gen-count__dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--bj-gold, #c8a24a);
  animation:bj-gen-pulse 1.15s ease-in-out infinite;
}
.bj-gen-count.is-done .bj-gen-count__dot{ background:var(--bj-muted, #9a9384); animation:none; }
/* every attempt was measured and rejected; the least-bad one is on screen */
.bj-gen-count.is-flagged{ border-color:#c8863f; opacity:.9; }
.bj-gen-count.is-flagged .bj-gen-count__dot{ background:#c8863f; animation:none; }
.bj-gen-count.is-flagged .bj-gen-count__n{ color:#a6641f; }
@keyframes bj-gen-pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .bj-gen-count__dot{ animation:none; }
}
/* both on at once: the counter takes the step above the QA chip */
.bj-qa:not([hidden]) ~ .bj-gen-count{ bottom:52px; }

.bj-qa{
  position:fixed; left:14px; bottom:14px; z-index:90;
  font-family:var(--bj-sans, system-ui, sans-serif);
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:6px;
  max-width:min(420px, calc(100vw - 28px));
}
.bj-qa[hidden]{ display:none; }

.bj-qa__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px 5px 8px; cursor:pointer;
  border:1px solid var(--bj-hair, #ddd6c6); background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--bj-muted, #6b6559);
  font-size:11px; line-height:1; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  opacity:.55; transition:opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.bj-qa__chip:hover, .bj-qa.is-open .bj-qa__chip{
  opacity:1; border-color:var(--bj-ink, #33342f);
  box-shadow:0 2px 10px rgba(0,0,0,.09);
}
.bj-qa__chip:focus-visible{ outline:2px solid var(--bj-gold, #c8a24a); outline-offset:2px; }
.bj-qa__score{ font-weight:700; color:var(--bj-ink, #33342f); }
.bj-qa__count{ opacity:.75; }
.bj-qa__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--bj-muted, #9a9384);
}
/* four states, read at a glance without reading the number */
.bj-qa[data-band="ok"]   .bj-qa__dot{ background:#4f9d69; }
.bj-qa[data-band="near"] .bj-qa__dot{ background:var(--bj-gold, #c8a24a); }
.bj-qa[data-band="bad"]  .bj-qa__dot{ background:#c0392b; }
.bj-qa[data-band="wait"] .bj-qa__dot{ animation:bjQaPulse 1.1s ease-in-out infinite; }
@keyframes bjQaPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

.bj-qa__body{
  border:1px solid var(--bj-hair, #ddd6c6); background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  padding:10px 12px; max-height:min(60vh, 420px); overflow:auto;
  font-size:11px; color:var(--bj-ink, #33342f); line-height:1.45;
}
.bj-qa__body[hidden]{ display:none; }
.bj-qa__head{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.bj-qa__head b{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.bj-qa__head span{ color:var(--bj-muted, #6b6559); }

.bj-qa__tbl{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
.bj-qa__tbl th, .bj-qa__tbl td{
  padding:3px 6px; text-align:right; border-bottom:1px solid var(--bj-hair, #eee7d8);
  white-space:nowrap;
}
.bj-qa__tbl th{
  font-size:9px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--bj-muted, #6b6559); font-weight:600;
}
.bj-qa__tbl th:first-child, .bj-qa__tbl td:first-child{ text-align:left; }
.bj-qa__tbl tr.is-chosen{ background:var(--bj-band, #faf7f0); }
.bj-qa__tbl tr.is-chosen td:first-child::after{ content:" ✓"; color:#4f9d69; }
.bj-qa__tbl td.is-low{ color:#c0392b; font-weight:700; }
/* An image that was made but never judged. Muted and italic, NOT red: red is
   this table's word for "measured and bad", and an unscored render is not bad
   — it is unmeasured. The merged cell is left-aligned because it carries a
   sentence rather than a number. */
.bj-qa__tbl tr.bj-qa__tr--unscored td{ color:var(--bj-muted, #6b6559); font-style:italic; }
.bj-qa__tbl tr.bj-qa__tr--unscored td[colspan]{ text-align:left; white-space:normal; }

.bj-qa__key{
  margin-top:6px; display:flex; flex-wrap:wrap; gap:2px 10px;
  font-size:9px; color:var(--bj-muted, #6b6559);
}
.bj-qa__note{ margin:7px 0 0; color:var(--bj-muted, #6b6559); }
.bj-qa__note--bad{ color:#c0392b; }

/* On a phone the chip stays; the panel takes the width it needs and no more. */
@media (max-width: 640px){
  .bj-qa{ left:10px; bottom:10px; max-width:calc(100vw - 20px); }
  .bj-qa__body{ max-height:50vh; }
}
@media (prefers-reduced-motion: reduce){
  .bj-qa[data-band="wait"] .bj-qa__dot{ animation:none; opacity:.6; }
}

/* ── HIDING THE RENDER PRESS ACTUALLY HIDES IT ───────────────────────────────
   `.bj-studio .pair-rail__render` sets display:inline-flex at two classes of
   specificity, which beats the browser's own [hidden]{display:none} at one —
   so setting .hidden on this button did nothing at all and it stayed on
   screen. Same story for its row. This is the file's existing house pattern
   for the problem; there are a dozen of these above. */
.bj-studio .pair-rail__render[hidden]{ display:none !important; }
.bj-studio .pair-rail__row--act[hidden]{ display:none !important; }

/* A verdict the studio itself does not believe. Loud on purpose: the whole
   failure mode this guards against is a scorer that quietly waves everything
   through, and a quiet warning about a quiet failure is no warning at all. */
.bj-studio .bj-qa__warn{
  margin:0 0 8px; padding:6px 8px;
  border:1px solid #c0392b; background:#fdf2f0; color:#c0392b;
  font-weight:600; line-height:1.4;
}
.bj-qa__warn{
  margin:0 0 8px; padding:6px 8px;
  border:1px solid #c0392b; background:#fdf2f0; color:#c0392b;
  font-weight:600; line-height:1.4;
}
.bj-qa__note--dim{ opacity:.6; font-size:10px; }
/* inline, not a whole note: the legend for the ✗ marks sits on the end of
   the judge's own line so the two are read together */
.bj-qa__dim{ opacity:.55; font-weight:400; }

/* The Drawing tab is absent, not empty, on a charm chosen from our own
   designs — there is no production drawing behind one. Same specificity
   problem as the render press: the toggle sets its own display. */
.bj-studio .pair-toggle__b[hidden]{ display:none !important; }

/* One of OUR designs on the stage is the finished piece, not a reference the
   studio is about to design from — so it is shown at full strength and in
   colour, and the invitation over it sits out of the way rather than on top
   of it. The faded, greyscaled treatment above stays for an uploaded photo,
   which really is only context for work that has not happened yet. */
.bj-studio .stage-refpreview--ours{
  opacity:1; padding:6%;
}
.bj-studio .stage-refpreview--ours img{ filter:none; }
.bj-studio .stage--ours .stage-empty{
  position:absolute; left:0; right:0; bottom:8px; top:auto;
  z-index:3; pointer-events:none;
}
.bj-studio .stage--ours .stage-empty svg{ display:none; }

/* A version that has no picture yet. Better than an <img> with no src,
   which every browser draws as a broken-image icon. */
.bj-studio .asset-img--none{
  display:block; width:100%; height:100%;
  background:
    linear-gradient(135deg, transparent 46%, var(--bj-hair,#ddd6c6) 46%,
                    var(--bj-hair,#ddd6c6) 54%, transparent 54%),
    var(--bj-band,#faf7f0);
  opacity:.5;
}

/* The grid's own surface, behind the base picture. Same box as
   #markupCanvas, painted by mkPaintGridLayer — see the note there for why a
   drafting aid must not sit on top of the customer's photograph. */
.markup-grid{
  position:absolute; left:0; top:0;
  pointer-events:none;
  z-index:0;
}
.markup-base{position:relative; z-index:1}
.markup-canvas{position:relative; z-index:2}

/* ── EDIT CHARM — the gate to the editor ─────────────────────────────────
   The button used to be a bare 34px pencil that APPEARED when the drawing
   was done — no name, no warning it was coming, and four minutes of nothing
   while the line drawing was made. It is the gatekeeper to the editor, so
   it now stands visible for the whole wait and narrates it.

   Dressed as .pair-rail__markup is dressed — hairline box, uppercase, the
   pencil, the lift on hover — so the studio's two "edit this" buttons are
   visibly the same family. While the pipeline works it carries the SAME
   fill the relay buttons carry: the translucent gold wash whose width is
   the percentage, the 3px gold rule along the bottom edge that is legible
   across a room, and the slow sheen that says alive-not-stuck. The figure
   itself sits at the trailing edge. */
/* GOLD, like the markup button under the preview wears when a design has
   been marked up: gold outline, gold words. This is the gate to the editor
   and the most consequential press on the header — the ink-on-white version
   read as one more piece of chrome beside the title.

   Same geometry as .pair-rail__markup so the studio's two "edit this"
   buttons stay one family; only the colour is raised. */
/* AND THIS ONE SAYS IT TWICE. The reset above is enough against a bare
   `button` selector, but this button carries overflow:hidden — so anything
   that does manage to squeeze it does not merely make it small, it hides
   its own name and leaves a blank gold tile. A label that cannot wrap
   cannot be cut in half, and a box that states its own width cannot be
   given someone else's. */
.bj-studio .ref-edit{
  position:relative; overflow:hidden; flex:0 0 auto;
  width:auto; height:auto; min-width:0; max-width:none; border-radius:0;
  white-space:nowrap; line-height:1;
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--bj-gold,#b8935a); background:#fff; cursor:pointer;
  padding:8px 13px; font-family:inherit; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bj-gold,#b8935a);
  transition:border-color var(--menu-out), background var(--menu-out),
             color var(--menu-out), transform var(--menu-out),
             box-shadow var(--menu-out);
  animation:refEditIn .28s ease-out both;
}
.bj-studio .ref-edit > *{ position:relative; z-index:1; }
.bj-studio .ref-edit svg{ width:13px; height:13px; flex:none; }
.bj-studio .ref-edit__txt{ white-space:nowrap; flex:none; }
.bj-studio .ref-edit__pct{ font-weight:700; color:var(--bj-gold,#b8935a); }
/* the markup button's own hover GESTURE — the 1px lift — carried over, and
   made prominent the way a gold control should be: the outline deepens to
   the solid gold and the band fills behind it, so the whole button answers
   the pointer rather than just its edge. A soft gold shadow lifts it off
   the header, which is what "prominent" is actually asking for. */
.bj-studio .ref-edit:not(.is-working):hover{
  border-color:var(--bj-gold,#b8935a);
  background:var(--bj-band,#faf7f0);
  color:#8f7644;
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(184,147,90,.22);
}
.bj-studio .ref-edit:not(.is-working):active{
  transform:translateY(1px); box-shadow:none;
}
.bj-studio .ref-edit:not(.is-working):focus-visible{
  box-shadow:0 0 0 3px rgba(184,147,90,.28);
}
.bj-studio .ref-edit:focus-visible{ outline:2px solid #9a6e18; outline-offset:2px; }
.bj-studio .ref-edit[hidden]{ display:none !important; }
@keyframes refEditIn{ from{opacity:0; transform:translateY(6px) scale(.94)} to{opacity:1} }

/* working: the fill IS the percentage — same anatomy as the relay buttons */
.bj-studio .ref-edit.is-working{ cursor:progress; }
.bj-studio .ref-edit.is-working::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--p, 0%);
  background:linear-gradient(90deg,
    rgba(184,147,90,.13) 0%, rgba(184,147,90,.28) 68%, rgba(184,147,90,.42) 100%);
  border-bottom:3px solid var(--bj-gold,#b8935a);
  transition:width .5s cubic-bezier(.32,.72,.3,1);
  pointer-events:none; z-index:0;
}
.bj-studio .ref-edit.is-working::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.38) 46%, transparent 78%);
  animation:bjRelaySheen 1.8s cubic-bezier(.4,0,.5,1) infinite;
}

/* failed: the same box, saying what a press will do */
.bj-studio .ref-edit.is-failed{ border-color:#c0392b; color:#c0392b; }

/* ready: one pulse and a gold ring that swells and fades — the button's own
   arrival used to be the only announcement, and an animation on a control
   that was ALREADY on screen is what actually catches the eye */
.bj-studio .ref-edit.is-ready-pop{
  animation:refEditPop 1.1s cubic-bezier(.3,.7,.3,1) both;
}
@keyframes refEditPop{
  0%{ box-shadow:0 0 0 0 rgba(184,147,90,.55); transform:scale(1); }
  18%{ transform:scale(1.055); }
  36%{ transform:scale(1); }
  100%{ box-shadow:0 0 0 14px rgba(184,147,90,0); }
}
@media (prefers-reduced-motion:reduce){
  .bj-studio .ref-edit{ animation:none; }
  .bj-studio .ref-edit.is-working::after{ animation:none; }
  .bj-studio .ref-edit.is-ready-pop{ animation:none; border-color:var(--bj-gold,#b8935a); }
}

/* ── THE LOCKED COMPOSER ─────────────────────────────────────────────────
   Greyed as one piece while the drawing is made: no clicks land, the
   textarea is disabled by the same paint, and the lock line above the foot
   carries the spinner and the button's own percentage so the two read as
   one process. The lock line itself stays at full strength — it is the
   explanation, not part of the grey. */
.bj-studio .chat__composer.is-locked .composer,
.bj-studio .chat__composer.is-locked .composer__foot,
.bj-studio .chat__composer.is-locked .chat__approve{
  opacity:.45; pointer-events:none; filter:grayscale(.35);
  transition:opacity .25s ease;
}
.bj-studio .composer__lock{
  display:flex; align-items:center; gap:8px; margin:0 0 7px;
  font-size:11px; letter-spacing:.06em; color:var(--bj-ink);
}
.bj-studio .composer__lock[hidden]{ display:none; }
.bj-studio .composer__lock b{ margin-left:auto; color:var(--bj-gold,#b8935a); }
.bj-studio .composer__lock-spin{
  flex:none; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--bj-gold-lt,#e2d3ae); border-top-color:var(--bj-gold,#b8935a);
  animation:composerLockSpin .9s linear infinite;
}
@keyframes composerLockSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .bj-studio .composer__lock-spin{ animation:none; opacity:.6; }
}

/* ── the pen's ink dropdown ─────────────────────────────────────────────
   The swatch classes are the studio's existing three (mk-metal__sw--*);
   only the pen-specific dressing lives here. Explicit colours throughout —
   the theme's --bj-* tokens are not this file's to assume. */
.bj-studio .mk-drop[data-drop="pen"] .mk-drop__b{ position:relative; }
.bj-studio .mk-pen__sw{
  position:absolute; left:7px; bottom:6px; width:9px; height:9px;
  border-radius:50%; border:1.5px solid #ffffff;
  background:#0f7a4a; box-shadow:0 0 0 1px rgba(28,29,29,.25);
  pointer-events:none;
}
.bj-studio .mk-pen__sw--live{ box-shadow:0 0 0 1.5px rgba(28,29,29,.45); }
.bj-studio .mk-item--ink .mk-metal__sw{ margin-right:8px; flex:none; }
.bj-studio .mk-pen__sw--note{ background:#0f7a4a; border-color:#0f7a4a; }
.bj-studio .mk-item--ink.is-on{ font-weight:700; }

/* ═══════════ THE SIGN-UP CARD, ON THE STUDIO'S OWN THREE STATES ══════════
   The auth modal was built before the markup surface's interaction system
   and never joined it. Four of its controls had one flat hover between them
   and the email field had none at all — while the in-app-browser panel
   THREE ELEMENTS BELOW IT, inside the same card, already lifts, sweeps its
   underline and settles on press. The card contradicted itself, and it is
   the first thing a new customer touches.

   No new vocabulary is invented here. Same tokens, same rule as the block
   above: HOVER is a wash, PRESS is one step deeper and one pixel down, an
   INK control lifts toward the light because it has nowhere darker to go.
   ========================================================================= */

/* everything that moves, moves on the same clock */
.bj-studio .modal__close,
.bj-studio .auth-google,
.bj-studio .auth-box input,
.bj-studio .auth-box .btn,
.bj-studio .code-box{
  transition:background var(--mk-in), color var(--mk-in),
             border-color var(--mk-in), box-shadow var(--mk-in),
             transform var(--mk-press-t);
}

/* ── the close ──────────────────────────────────────────────────────────
   A colour change on a 26px glyph is the weakest signal in the studio, and
   this is the one control in the card that discards work. It takes the same
   wash every other small control takes (.markup__close, .mk-dock__x), which
   also gives the pointer a target with edges instead of a letterform. */
.bj-studio .modal__close{
  /* A CIRCLE, BECAUSE A WASH NEEDS A SHAPE TO SIT IN. A neat square was the
     first answer and rendering it settled the question: on a white card with
     no border, a beige square in the corner reads as a rendering fault rather
     than as a control. Round is what the eye accepts as a button at this size
     — the shape says "target" before the colour says "hovered". Same pointer
     area as the old padding box, now centred on the glyph. */
  width:40px; height:40px; padding:0; display:grid; place-items:center;
  line-height:1; border-radius:50%;
}
.bj-studio .modal__close:hover{ background:var(--mk-hov); color:var(--bj-ink); }
.bj-studio .modal__close:active{ background:var(--mk-press); transform:translateY(1px); }

/* ── Continue with Google ───────────────────────────────────────────────
   It had a wash already, on --bj-band: a page-furniture tone that reads as
   a panel rather than as a reply. The markup wash is the one the rest of
   the studio answers with, and the ink hairline it already carries is left
   alone — it is the only control here that must keep looking like an
   outline, because the solid button below it is the primary. */
.bj-studio .auth-google:hover{
  /* IT INVERTS, like every other outlined control in the studio. The wash was
     the wrong idiom borrowed from the wrong place: --mk-hov is what a small
     TOOL answers with, and on a full-width outlined button it reads as the
     button having been filled in rather than as the button answering — which
     is exactly what got reported as no hover state at all. The studio's own
     reply for an outlined control is inversion: .btn--secondary and
     .btn--tertiary both go ink on hover. The Google mark keeps its own
     colours against the dark ground, which is how Google's own dark sign-in
     button looks anyway. */
  background:var(--bj-ink); border-color:var(--bj-ink); color:#fff;
}
.bj-studio .auth-google:active{
  background:#000; border-color:#000; transform:translateY(1px);
}
.bj-studio .auth-google:focus-visible{
  outline:2px solid var(--bj-gold); outline-offset:2px;
}

/* ── the email field ────────────────────────────────────────────────────
   It had no hover at all and a focus that only swapped a border colour, on
   the one input standing between a shopper and an account. Both states now
   match .mk-lib__search — the studio's other single-input surface — hairline
   awake under the pointer, ink and a gold ring under the caret. */
/* --mk-hov-line is #c6bfaf and this input rests on #c9c5be: the "awake"
   hairline was a three-value change nobody could see. That token is right for
   the markup rail, whose controls rest on a lighter line than this one, and
   wrong here. A field answers by going definitely darker, one clear step
   short of the ink it takes at focus. */
.bj-studio .auth-box input:not(.code-box):hover{ border-color:var(--bj-muted); }
.bj-studio .auth-box input:not(.code-box):focus{
  border-color:var(--bj-ink); box-shadow:0 0 0 3px rgba(184,147,90,.18);
}

/* ── Email me a code, and Verify & create account ───────────────────────
   The theme's .btn:hover paints an ink button #000 — darker, on a control
   that is already the darkest thing on the card. The studio decided against
   that everywhere else (see --mk-on-hov and the markup foot): an ink control
   answers by lifting toward the light. Press returns it to full ink, so the
   button gets darker under the finger and lighter under the pointer, which
   is the way round that reads as a reply. */
.bj-studio .auth-box .btn:not(.btn--ghost):not([disabled]):hover{
  background:var(--mk-on-hov); border-color:var(--mk-on-hov); color:#fff;
}
.bj-studio .auth-box .btn:not(.btn--ghost):not([disabled]):active{
  background:var(--bj-ink); border-color:var(--bj-ink); transform:translateY(1px);
}
/* Resend code / Use a different email — quiet controls, so the quiet
   treatment the markup foot's ghosts get, never the solid fill */
.bj-studio .auth-box .btn--ghost:not([disabled]){
  border:1px solid transparent; background:transparent;
}
.bj-studio .auth-box .btn--ghost:not([disabled]):hover,
.bj-studio .auth-box .btn--ghost:not([disabled]):focus-visible{
  background:var(--mk-hov); border-color:var(--mk-hov-line); color:var(--bj-ink);
}
.bj-studio .auth-box .btn--ghost:not([disabled]):active{ background:var(--mk-press); }

/* ── the six code boxes ─────────────────────────────────────────────────
   Focus was already right and is untouched; the boxes simply said nothing
   when the pointer crossed them, which on six identical squares is where a
   hover matters most. Nothing is added to a box already filled or judged —
   is-filled, is-error and is-ok are answers, and an answer is not hovered
   back into a question. */
/* One selector, no undo: a box that is filled, focused, or sitting in a row
   the server has already answered on is excluded from the hover instead of
   being hovered and then corrected back. Written the other way round, this
   rule outranked .code-box:focus and the gold ring vanished the moment the
   pointer rested on the box the caret was in. */
.bj-studio .code-row:not(.is-error):not(.is-ok)
  .code-box:not(.is-filled):not(:focus):hover{ border-color:var(--bj-muted); }

/* the card's keyboard path, on the studio's gold, same as the markup body */
.bj-studio .auth-box :focus-visible{
  outline:2px solid var(--bj-gold,#b8935a); outline-offset:1px;
}

/* nothing pretends to be pressable when it is not */
.bj-studio .auth-box .btn[disabled],
.bj-studio .auth-google[disabled]{ transform:none !important; box-shadow:none; }

@media (prefers-reduced-motion: reduce){
  .bj-studio .modal__close:active,
  .bj-studio .auth-google:active,
  .bj-studio .auth-box .btn:active{ transform:none; }
}

/* ========================================================================
   MOBILE STUDIO INTEGRATION — one viewport, no compressed desktop geometry

   The Studio's responsive rules pre-date the critical stepper CSS that now
   travels inside the section. On a phone that later inline block won the
   cascade, restoring the desktop row after the mobile rules had done their
   work. At the same time, two-column reference cards used `1fr` rather than
   `minmax(0,1fr)`, so the long action labels became the columns' minimum
   width and pushed the second card beyond the glass.

   Everything in this pass is gated at 760px. Desktop geometry, stage budgets
   and navigation therefore remain exactly as they were.                      */
@media (max-width:760px){
  body.bj-designing{
    overflow-x:hidden;
    overflow-x:clip;
    overscroll-behavior-x:none;
  }
  .bj-studio.is-designing{
    width:100%; max-width:100%; min-width:0;
    overflow-x:hidden; overflow-x:clip;
  }
  .bj-studio.is-designing .page{
    width:100%; max-width:100%; min-width:0;
    padding:0 12px 32px;
  }
  .bj-studio.is-designing .step-view,
  .bj-studio.is-designing .panel--studio,
  .bj-studio.is-designing .inspire-panel,
  .bj-studio.is-designing .inspire-phase,
  .bj-studio.is-designing .gen-grid,
  .bj-studio.is-designing .approve-grid,
  .bj-studio.is-designing .gen-left,
  .bj-studio.is-designing .chat,
  .bj-studio.is-designing .order-card{
    width:100%; max-width:100%; min-width:0;
  }

  /* The progress rail gets its own line; navigation gets the next. Back,
     Home and Next no longer compete with three labelled steps for 390px. */
  .bj-studio.is-designing .stepper-wrap{
    margin:0 -12px;
    padding:0 max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    width:auto;
  }
  .bj-studio.is-designing .stepper-nav-row{
    display:grid;
    grid-template-columns:minmax(88px,1fr) auto minmax(88px,1fr);
    grid-template-areas:
      "progress progress progress"
      "back home next";
    align-items:center; gap:4px 8px;
    padding-top:0;
  }
  .bj-studio.is-designing .stepper-mid{
    grid-area:progress; width:100%; min-width:0;
    padding:0 44px;
  }
  .bj-studio.is-designing .stepper{
    width:100%; max-width:310px; min-height:44px;
    margin:0 auto; padding:5px 0 4px;
  }
  .bj-studio.is-designing .step{ width:58px; gap:4px; }
  .bj-studio.is-designing .step__num{ width:22px; height:22px; font-size:10px; }
  .bj-studio.is-designing .step__lbl{ font-size:8px; letter-spacing:.1em; }
  .bj-studio.is-designing .step__sub{ display:none; }
  .bj-studio.is-designing .step-sep{
    min-width:10px; max-width:72px; margin-top:10px;
  }
  .bj-studio.is-designing .substep-bar{
    min-height:44px; padding:6px 0;
  }
  .bj-studio.is-designing .substep-bar .substeps{
    width:100%; justify-content:center; gap:8px;
  }
  .bj-studio.is-designing .substep-bar .sub{ font-size:10px; letter-spacing:.13em; }
  .bj-studio.is-designing .substep-bar .sub-line{ width:clamp(24px,9vw,42px); }
  .bj-studio.is-designing .stepper-nav-row .studio-crumbs{
    grid-area:home; position:static; inset:auto;
    display:flex; width:auto; min-width:0; overflow:visible;
    justify-content:center;
  }
  .bj-studio.is-designing .studio-crumbs ol{ justify-content:center; }
  .bj-studio.is-designing .studio-crumbs li{ display:none; }
  .bj-studio.is-designing .studio-crumbs li:nth-child(2){ display:flex; }
  .bj-studio.is-designing .studio-crumbs li:nth-child(2):before{ display:none; }
  .bj-studio.is-designing #crumbHome{
    min-height:42px; padding:0 8px;
    font-size:8.5px; letter-spacing:.11em;
  }
  .bj-studio.is-designing #navPrev{ grid-area:back; justify-self:start; }
  .bj-studio.is-designing #navNext{ grid-area:next; justify-self:end; }
  .bj-studio.is-designing .nav-arrow{
    min-width:88px; min-height:42px; padding:9px 12px;
    justify-content:center; gap:7px;
    font-size:9px; letter-spacing:.14em;
  }
  .bj-studio.is-designing .nav-pad{ display:none; }

  /* The floating menu belongs to the open space at the right of the progress
     line, not on top of Next. It remains a 40px touch target. */
  .bj-studio.is-designing .studio-menu-btn{
    top:calc(var(--bj-header-h, 78px) + 4px);
    right:max(12px, env(safe-area-inset-right));
    width:40px; height:40px;
  }

  /* Every wizard surface now resolves against the phone, never against an
     intrinsic child width. The border remains; only the desktop gutters go. */
  .bj-studio.is-designing .panel--studio{
    padding:12px 12px 18px;
  }
  .bj-studio.is-designing .inspire-panel{
    min-height:0;
  }
  .bj-studio.is-designing .inspire-phase{
    justify-content:flex-start;
  }
  .bj-studio.is-designing .phase-head{
    margin:4px 0 16px;
  }
  .bj-studio.is-designing .phase-head h2{
    margin-top:2px; font-size:clamp(25px,7vw,31px);
  }

  /* Source choices become three compact, image-led rows rather than three
     desktop cards squeezed side-by-side. */
  .bj-studio.is-designing .inspire-panel .start-grid{
    grid-template-columns:1fr;
    width:100%; max-width:460px; gap:10px; margin:0 auto;
  }
  .bj-studio.is-designing .inspire-panel .start-card{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:1fr auto;
    column-gap:15px; row-gap:4px;
    align-items:center; padding:12px;
    text-align:left; min-width:0;
  }
  .bj-studio.is-designing .start-card .picto{
    grid-row:1 / 3; width:104px; max-width:none;
    margin:0; aspect-ratio:1;
  }
  .bj-studio.is-designing .inspire-panel .start-card h3{
    align-self:end; margin:0; font-size:20px; line-height:1.15;
  }
  .bj-studio.is-designing .start-card__go{
    align-self:start; margin-top:3px; font-size:9.5px; letter-spacing:.14em;
  }

  /* Reference picker: a true two-column phone grid. `minmax(0,1fr)` is the
     important part—the action copy may wrap, but it may never widen a card. */
  .bj-studio.is-designing #phaseSearch{ min-width:0; }
  .bj-studio.is-designing .search-bar--slim{
    width:100%; max-width:none; margin:2px auto 13px;
  }
  .bj-studio.is-designing .search-bar--slim input{
    min-height:50px; padding:12px 42px; font-size:16px;
  }
  .bj-studio.is-designing .pick-title{
    margin:0 0 7px; font-size:24px; line-height:1.12;
  }
  .bj-studio.is-designing .inspire-panel .search-meta{
    margin:0 0 12px; min-height:0;
    font-size:9.5px; letter-spacing:.16em; line-height:1.5;
    white-space:normal;
  }
  .bj-studio.is-designing .inspire-panel .charm-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; max-width:none; min-width:0;
    gap:10px; padding:0; overflow:visible;
  }
  .bj-studio.is-designing .charm-card{
    min-width:0; max-width:100%; overflow:hidden;
  }
  .bj-studio.is-designing .inspire-panel .charm-card__img{ aspect-ratio:1; }
  .bj-studio.is-designing .charm-card--slim .charm-card__meta{
    min-width:0; padding:9px 8px;
  }
  .bj-studio.is-designing .charm-card--slim .charm-card__title{
    display:-webkit-box; min-height:2.5em;
    white-space:normal; overflow:hidden; text-overflow:ellipsis;
    -webkit-box-orient:vertical; -webkit-line-clamp:2;
    font-size:13px; line-height:1.25;
  }
  .bj-studio.is-designing .cc-buy,
  .bj-studio.is-designing .cc-use{
    display:flex; align-items:center; justify-content:center;
    min-height:43px; padding:7px 4px;
    font-size:9.5px; line-height:1.3; letter-spacing:.1em;
    white-space:normal; overflow-wrap:anywhere;
  }
  .bj-studio.is-designing .charm-card__pop{
    width:36px; height:36px; top:5px; right:5px;
  }

  .bj-studio.is-designing .upload-stage,
  .bj-studio.is-designing .draw-stage{
    width:100%; max-width:100%;
  }
  .bj-studio.is-designing .dropzone,
  .bj-studio.is-designing .draw-invite{
    width:100%; max-width:100%; padding:30px 18px;
  }

  /* Design and Order: stage, tabs, version history and conversation all use
     the same measured width. The thumbnail rail can scroll; it never floats
     at the far edge of a 640px desktop container. */
  .bj-studio.is-designing .gen-grid,
  .bj-studio.is-designing .gen-grid.has-rail,
  .bj-studio.is-designing .gen-grid:not(.has-rail),
  .bj-studio.is-designing .approve-grid{
    --stage-size:min(calc(100vw - 54px), 48svh);
    grid-template-columns:minmax(0,1fr);
    gap:16px; max-width:100%;
  }
  .bj-studio.is-designing .gen-left{
    flex-direction:column-reverse; align-items:stretch;
  }
  .bj-studio.is-designing .ref-frame--stage{
    width:min(100%, calc(var(--stage-size) + 18px));
    max-width:100%; margin-inline:auto; padding:8px;
  }
  .bj-studio.is-designing .ref-frame--stage .stage,
  .bj-studio.is-designing #view-3 .stage{
    width:100%; max-width:none; margin:0;
  }
  .bj-studio.is-designing #view-2 .version-strip,
  .bj-studio.is-designing #view-3 .version-strip{
    flex-direction:row; flex-wrap:nowrap;
    width:min(100%, calc(var(--stage-size) + 18px));
    max-width:100%; max-height:none;
    margin:10px auto 0; padding:5px 5px 7px;
    gap:10px; overflow-x:auto; overflow-y:hidden;
    align-items:center; scrollbar-width:thin;
  }
  .bj-studio.is-designing #view-2 .version-thumb,
  .bj-studio.is-designing #view-3 .version-thumb{
    width:60px; height:60px; flex:0 0 60px;
  }
  .bj-studio.is-designing .stage-flag{
    max-width:calc(100% - 10px); padding:6px 9px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:8.5px; letter-spacing:.15em;
  }
  .bj-studio.is-designing .pair-rail{
    width:100%; min-width:0; margin-top:8px; gap:8px;
  }
  .bj-studio.is-designing .pair-rail__row{
    min-width:0; gap:8px; flex-wrap:nowrap;
  }
  .bj-studio.is-designing .pair-toggle{
    flex:1 1 auto; width:auto; min-width:0; padding:3px; gap:2px;
  }
  .bj-studio.is-designing .pair-toggle__b{
    flex:1 1 0; min-width:0; min-height:40px;
    padding:7px 2px; font-size:8.8px; letter-spacing:.045em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .bj-studio.is-designing .pair-rail__markup{
    flex:0 0 42px; width:42px; min-width:42px;
    padding:0; justify-content:center;
  }
  .bj-studio.is-designing .pair-rail__markup span{ display:none; }
  .bj-studio.is-designing .pair-rail__render{
    width:100% !important; min-height:44px; margin:0 !important;
  }

  .bj-studio.is-designing .chat{
    height:auto; min-height:0; max-width:100%;
  }
  .bj-studio.is-designing .chat__head{ padding:12px 13px 11px; }
  .bj-studio.is-designing .chat__thread{
    max-height:min(48svh, 420px); padding:14px 13px 7px;
  }
  .bj-studio.is-designing .chat__composer{ padding:10px 10px 12px; }
  .bj-studio.is-designing .composer textarea{ font-size:16px; }
  .bj-studio.is-designing .composer__foot{
    flex-wrap:wrap; row-gap:2px; line-height:1.4;
  }

  /* Order controls keep 44px targets and wrap by component, not mid-label. */
  .bj-studio.is-designing .pdp-card{ padding:16px 14px 15px; }
  .bj-studio.is-designing .pdp-title-row{ align-items:flex-start; }
  .bj-studio.is-designing .metal-pills{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
  }
  .bj-studio.is-designing .mp{
    width:100%; min-width:0; min-height:44px; padding:8px 9px;
    line-height:1.25; text-align:left;
  }
  .bj-studio.is-designing .qty-cart{ flex-wrap:wrap; }
  .bj-studio.is-designing .qty{ min-height:46px; }
  .bj-studio.is-designing .pdp-cart{ min-width:190px; min-height:46px; }
  .bj-studio.is-designing .pdp-trust{ gap:12px; }
  .bj-studio.is-designing .bj-select__btn,
  .bj-studio.is-designing input[type="text"],
  .bj-studio.is-designing input[type="search"],
  .bj-studio.is-designing textarea,
  .bj-studio.is-designing select{
    font-size:16px;
  }

  /* Drawers and non-editor dialogs stay inside the dynamic viewport. */
  .bj-studio .studio-menu,
  .bj-studio .drawer{
    width:min(360px, calc(100vw - 12px));
    max-height:100dvh;
  }
  .bj-studio .modal{ padding:8px; }
  .bj-studio .modal__inner:not(.markup__inner){
    max-height:calc(100dvh - 16px);
  }
  .bj-studio .modal__inner--narrow .modal__body{
    padding:48px 18px 22px;
  }
  .bj-studio #markupModal{ padding:6px; }
  .bj-studio #markupModal .markup__inner{
    width:calc(100vw - 12px);
    height:calc(100vh - 12px); max-height:calc(100vh - 12px);
    height:calc(100dvh - 12px); max-height:calc(100dvh - 12px);
  }
  .bj-studio #markupModal .markup-foot{
    padding-bottom:max(2px, env(safe-area-inset-bottom));
  }
  .bj-studio #mkPlaceModal{ padding:0; }
  .bj-studio #mkPlaceModal .mk-place__inner{
    width:100vw; height:100vh; max-height:100vh;
    height:100dvh; max-height:100dvh;
  }

  /* These are production diagnostics, not customer navigation. Floating
     them above a phone UI separated the count from the design it described. */
  .bj-gen-count,
  .bj-qa{ display:none !important; }
}

@media (max-width:420px){
  .bj-studio.is-designing .stepper-mid{ padding-inline:40px; }
  .bj-studio.is-designing #crumbHome{ font-size:0; }
  .bj-studio.is-designing #crumbHome:before{
    content:"Studio"; font-size:8.5px; letter-spacing:.11em;
  }
  .bj-studio.is-designing .inspire-panel .start-card{
    grid-template-columns:88px minmax(0,1fr); column-gap:12px;
  }
  .bj-studio.is-designing .start-card .picto{ width:88px; }
  .bj-studio.is-designing .inspire-panel .start-card h3{ font-size:18px; }
  .bj-studio.is-designing .pair-toggle__b{ font-size:8.4px; letter-spacing:.025em; }
  .bj-studio.is-designing .pdp-title{ font-size:23px; }
  .bj-studio.is-designing .pdp-price{ font-size:20px; }
}

@media (max-width:359px){
  .bj-studio.is-designing .inspire-panel .charm-grid{ grid-template-columns:1fr; }
  .bj-studio.is-designing .charm-card--slim .charm-card__title{ min-height:0; }
  .bj-studio.is-designing .metal-pills{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE EDITOR · CANVAS FIRST (rev 59)
   --------------------------------------------------------------------------
   Activated by JS from the device contract, never from viewport width. That
   distinction is what keeps every desktop layout — including a narrow
   desktop window — on the mature desktop workspace while an unfolded phone
   or iPad receives touch ergonomics at any width.

   Phone:          compact head · full canvas · contextual shelf · tool dock
   Fold / tablet:  compact head · left tools · full canvas · side inspectors
   Desktop:        no selector below matches; not one desktop rule changes.
   ========================================================================== */
.bj-studio .mk-mobile-only,
.bj-studio .mk-mobile-head,
.bj-studio .mk-mobile-settings,
.bj-studio .mk-mobile-panel-scrim{ display:none !important; }

/* ── THE VIEWPORT IS THE EDITOR ────────────────────────────────────────── */
.bj-studio #markupModal.is-mobile-workspace{
  --mk-m-head:calc(52px + env(safe-area-inset-top));
  --mk-m-tools:58px;
  --mk-m-foot:calc(58px + env(safe-area-inset-bottom));
  padding:0 !important;
  align-items:stretch; justify-content:stretch;
}
.bj-studio #markupModal.is-mobile-workspace .markup__inner{
  width:100vw !important; height:100vh !important; max-height:100vh !important;
  width:100dvw !important; height:100dvh !important; max-height:100dvh !important;
  max-width:none !important; margin:0; border:0; border-radius:0;
  box-shadow:none; transform:none; animation:none !important; overflow:hidden;
}
.bj-studio #markupModal.is-mobile-workspace .modal__body.markup__body{
  position:relative; display:grid; min-width:0; min-height:0;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:var(--mk-m-head) minmax(0,1fr) var(--mk-m-tools) var(--mk-m-foot) !important;
  column-gap:0 !important; row-gap:0 !important;
  width:100%; height:100%; padding:0 !important; overflow:hidden !important;
  background:#f4f2ed;
}
.bj-studio #markupModal.is-mobile-workspace .markup__bar{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-main{ display:contents; }
.bj-studio #markupModal.is-mobile-workspace .markup-wrap{
  grid-area:2 / 1 / 3 / 2 !important; --mk-rule:0px;
  min-width:0; min-height:0; width:100%; height:100%;
  /* The desktop ruler frame is a 2×2 grid. Merely collapsing its ruler
     tracks to 0px leaves cell 1/1 at exactly 0×0; the previous mobile rule
     then placed the stage in that collapsed cell, so only the room's soft
     background remained visible. Mobile has no rulers, so make the work
     area an explicit one-cell frame and give that cell to the real stage. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.96) 0 27%, rgba(245,243,238,.94) 62%, #ece9e2 100%);
}
.bj-studio #markupModal.is-mobile-workspace .markup-wrap .mk-rule{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-stage{
  grid-area:1 / 1 / 2 / 2 !important; width:100% !important; height:100% !important;
  max-width:none; max-height:none; aspect-ratio:auto;
}
.bj-studio #markupModal.is-mobile-workspace .markup-view{
  background:#fff;
  box-shadow:0 0 0 1px rgba(28,29,29,.10), 0 14px 44px rgba(28,29,29,.12);
}

/* ── COMPACT HEADER ────────────────────────────────────────────────────── */
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head:not([hidden]){
  grid-area:1 / 1 / 2 / 2; z-index:40;
  display:grid !important;
  grid-template-columns:48px minmax(64px,1fr) repeat(4,44px);
  align-items:end; gap:0; min-width:0;
  height:var(--mk-m-head); padding:env(safe-area-inset-top) 4px 0;
  border-bottom:1px solid rgba(28,29,29,.12);
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 18px rgba(28,29,29,.05);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file{
  width:48px; height:52px; display:flex; align-items:center; justify-content:center;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file .mk-file{ display:block; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file #mkFileBtn,
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__b{
  width:44px; min-width:44px; height:48px; min-height:44px; margin:0;
  border:0; border-radius:12px; background:transparent; color:var(--bj-ink);
  display:inline-flex; align-items:center; justify-content:center;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background .14s ease, color .14s ease, transform .1s ease;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file #mkFileBtn span,
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file #mkFileBtn .mk-caret{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file #mkFileBtn svg,
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__b svg{ width:20px; height:20px; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__b:active,
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file #mkFileBtn:active{
  background:#eee9df; transform:scale(.94);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__b.is-on{
  background:var(--bj-ink); color:#fff;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__b:disabled{
  opacity:.25; cursor:default; transform:none;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__close{
  font-family:Arial,sans-serif; font-size:26px; font-weight:300; line-height:1;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__title{
  align-self:center; min-width:0; padding:3px 8px 0 5px; line-height:1.15;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__title b{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--bj-serif); font-size:15px; font-weight:600; color:var(--bj-ink);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__title span{
  display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:8px; font-weight:750; letter-spacing:.15em; text-transform:uppercase;
  color:var(--bj-gold);
}

/* ── QUICK TOOLS: SEVEN STABLE THUMB TARGETS, NEVER A WRAPPED WALL ────── */
.bj-studio #markupModal.is-mobile-workspace .markup__body .markup-toolbar{
  grid-area:3 / 1 / 4 / 2 !important; z-index:35;
  align-self:stretch; width:100%; height:var(--mk-m-tools); min-height:var(--mk-m-tools);
  margin:0; padding:3px 5px !important; border:0; border-top:1px solid rgba(28,29,29,.12);
  background:rgba(255,255,255,.97); box-shadow:0 -6px 22px rgba(28,29,29,.07);
  overflow:hidden !important; display:flex; flex-direction:row; align-items:stretch;
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .markup-tools{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:stretch; gap:1px; width:100%; min-width:0; overflow:visible;
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .markup-tools > .mk-drop{
  width:100%; min-width:0; display:block;
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool{
  position:relative; width:100% !important; min-width:0; height:51px !important; min-height:48px;
  margin:0; padding:4px 1px 3px !important; border:0; border-radius:11px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:#686662; background:transparent; transform:none !important;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool svg{
  width:19px !important; height:19px !important; flex:none; transform:none !important;
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool > span{
  display:block !important; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  font-size:7.5px; font-weight:750; line-height:1; letter-spacing:.04em;
  text-transform:none; white-space:nowrap;
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool.is-on{
  background:var(--bj-ink); color:#fff; box-shadow:0 5px 14px rgba(28,29,29,.16);
}
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool:active{ transform:scale(.94) !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-caret,
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-drop__b::after{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-toolbar .markup-hist{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-only{ display:flex !important; }
.bj-studio #markupModal.is-mobile-workspace .mk-drop__head.mk-mobile-only{ display:block !important; }
.bj-studio #markupModal.is-mobile-workspace #mkMarquee,
.bj-studio #markupModal.is-mobile-workspace #mkHighlight,
.bj-studio #markupModal.is-mobile-workspace .markup-tools > [data-drop="text"],
.bj-studio #markupModal.is-mobile-workspace #mkMagicEraser{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-tool__count{
  position:absolute; top:2px; right:max(2px,calc(50% - 21px));
  min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bj-gold); color:#fff; border:2px solid #fff;
  font-size:8px; font-weight:800; line-height:1;
}
.bj-studio #markupModal.is-mobile-workspace .mk-tool.is-on .mk-mobile-tool__count{
  background:#fff; color:var(--bj-ink); border-color:var(--bj-ink);
}

/* ── CONTEXTUAL TASK BAR: ONE RELEVANT CONTROL, FLOATING ON THE CANVAS ── */
.bj-studio #markupModal.is-mobile-workspace .markup-props{
  position:absolute; z-index:30; left:50%; right:auto;
  bottom:calc(var(--mk-m-foot) + var(--mk-m-tools) + 10px);
  transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 18px); min-width:0; min-height:0;
  margin:0; padding:5px !important; border:1px solid rgba(28,29,29,.16);
  border-radius:14px; background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(28,29,29,.16);
  display:flex; align-items:center; flex-wrap:nowrap !important; gap:0;
  overflow:visible !important;
}
.bj-studio #markupModal.is-mobile-workspace .markup-props.is-mobile-empty{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-props > *{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-props[data-mobile-context="weight"] > [data-drop="weight"],
.bj-studio #markupModal.is-mobile-workspace .markup-props[data-mobile-context="text"] > [data-drop="font"],
.bj-studio #markupModal.is-mobile-workspace .markup-props[data-mobile-context="eraser"] > #mkEraseRow:not([hidden]),
.bj-studio #markupModal.is-mobile-workspace .markup-props[data-mobile-context="tolerance"] > #mkTolRow:not([hidden]),
.bj-studio #markupModal.is-mobile-workspace .markup-props[data-mobile-context="selection"] > #mkSizeBox:not([hidden]){
  display:inline-flex !important;
}
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-prop{
  min-width:96px; min-height:42px; padding:0 13px; justify-content:center;
  border:0; border-radius:10px; background:#f6f2e9;
}
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-prop span{ display:inline !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-size2{
  height:44px; border:0; border-radius:10px; overflow:hidden; background:#f7f4ed;
}
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-size2__f{ min-height:44px; padding:0 8px; }
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-size2 input{
  width:42px; font-size:16px; text-align:center;
}
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-size2__u{ padding-inline:4px 7px; }
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-size2__sep{ width:5px; }
.bj-studio #markupModal.is-mobile-workspace .markup-props .mk-size2__f--rot input{ width:38px; }
.bj-studio #markupModal.is-mobile-workspace .mk-tolrow,
.bj-studio #markupModal.is-mobile-workspace .mk-eraserrow{
  min-width:min(310px,calc(100vw - 30px)); min-height:44px; padding:4px 10px;
  border:0; border-radius:10px; background:#f7f4ed;
}
.bj-studio #markupModal.is-mobile-workspace .mk-tolrow label,
.bj-studio #markupModal.is-mobile-workspace .mk-eraserrow label{
  font-size:9px; letter-spacing:.08em; white-space:nowrap;
}
.bj-studio #markupModal.is-mobile-workspace .mk-tolrow input,
.bj-studio #markupModal.is-mobile-workspace .mk-eraserrow input{ min-width:90px; }

/* ── FINISH BAR: CONSTANT HEIGHT, NO MOVING TARGETS ───────────────────── */
.bj-studio #markupModal.is-mobile-workspace .markup-foot{
  grid-area:4 / 1 / 5 / 2 !important; z-index:40;
  width:100%; min-height:var(--mk-m-foot); height:var(--mk-m-foot);
  margin:0 !important; padding:5px 7px max(5px,env(safe-area-inset-bottom)) !important;
  border:0; border-top:1px solid rgba(28,29,29,.13);
  background:#fff; box-shadow:0 -4px 16px rgba(28,29,29,.04);
  display:flex; align-items:flex-start; gap:0;
}
.bj-studio #markupModal.is-mobile-workspace .markup-foot > .markup-count,
.bj-studio #markupModal.is-mobile-workspace .markup-foot > .markup-metal{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-actions{
  width:100%; height:48px; margin:0; display:grid; grid-template-columns:minmax(112px,.72fr) minmax(150px,1.28fr); gap:7px;
}
.bj-studio #markupModal.is-mobile-workspace .markup-actions[hidden]{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .markup-actions .btn{
  width:100%; min-width:0; min-height:48px; height:48px; margin:0; padding:0 10px;
  border-radius:12px; font-size:10px; letter-spacing:.14em; white-space:nowrap;
}
.bj-studio #markupModal.is-mobile-workspace .markup-actions .btn--ghost{ background:#f7f4ee; }

/* ── SETTINGS: THE REAL CONTROLS, GROUPED BY THE QUESTION THEY ANSWER ─── */
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-panel-scrim:not([hidden]){
  position:fixed; z-index:1320; inset:var(--mk-m-head) 0 var(--mk-m-foot) 0;
  display:block !important; width:auto; height:auto; margin:0; padding:0; border:0;
  background:rgba(28,29,29,.34); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-settings:not([hidden]){
  position:fixed; z-index:1330; left:0; right:0; top:auto; bottom:var(--mk-m-foot);
  width:auto; height:min(68vh,640px); height:min(68dvh,640px);
  max-height:calc(100vh - var(--mk-m-head) - var(--mk-m-foot));
  max-height:calc(100dvh - var(--mk-m-head) - var(--mk-m-foot));
  display:flex !important; flex-direction:column; overflow:hidden;
  border:0; border-top:1px solid rgba(28,29,29,.18); border-radius:20px 20px 0 0;
  background:#fff; box-shadow:0 -24px 64px rgba(28,29,29,.27);
  animation:mkMobileSheetIn .22s cubic-bezier(.16,1,.3,1);
  transition:transform .12s ease-out;
}
@keyframes mkMobileSheetIn{
  from{ opacity:.35; transform:translateY(36px); }
  to{ opacity:1; transform:none; }
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__grab,
.bj-studio #markupModal.is-mobile-workspace .mk-dock__grab{
  display:block; flex:none; width:44px; height:5px; margin:9px auto 3px;
  border-radius:99px; background:#d3cec5; touch-action:none;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__head{
  flex:none; display:flex; align-items:center; gap:12px; min-height:55px;
  padding:7px 12px 9px 17px; border-bottom:1px solid var(--bj-hair);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__head > div{ min-width:0; flex:1; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__head span{
  display:block; font-size:8px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; color:var(--bj-gold);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__head b{
  display:block; margin-top:2px; font-family:var(--bj-serif); font-size:20px; line-height:1.1; font-weight:600;
}
.bj-studio #markupModal.is-mobile-workspace #mkMobileSettingsClose{
  width:44px; height:44px; flex:none; border:0; border-radius:12px;
  background:#f5f2ec; color:var(--bj-ink); font:300 25px/1 Arial,sans-serif;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:2px 16px 20px;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting{
  padding:15px 0 16px; border-bottom:1px solid var(--bj-hair);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting:last-child{ border-bottom:0; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__title{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__title b{
  font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--bj-ink);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__title span{
  font-size:10.5px; color:var(--bj-muted); text-align:right;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting--split{
  display:grid; grid-template-columns:1fr; gap:16px;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot{ min-width:0; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--metal .mk-metal{
  position:relative; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px; padding:0; border:0; background:none;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--metal .mk-metal__b{
  min-width:0; min-height:52px; padding:5px 3px; border:1px solid var(--bj-hair); border-radius:11px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:#faf8f4; color:var(--bj-ink);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--metal .mk-metal__b span{
  display:block !important; font-size:8px; line-height:1; letter-spacing:.05em; text-transform:none;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--metal .mk-metal__b.is-on{
  border-color:var(--bj-ink); background:var(--bj-ink); color:#fff;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--metal .mk-metal__help{
  position:absolute; right:0; top:-40px;
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--metal .mk-metal__why,
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot .mk-hoop__why,
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot .mk-mode__why{
  width:40px; min-width:40px; min-height:40px; border-radius:10px; border:1px solid var(--bj-hair); background:#fff;
}
.bj-studio #markupModal.is-mobile-workspace #mkHoopBox{
  width:100%; min-height:48px; display:flex; border:1px solid var(--bj-hair); border-radius:11px; overflow:visible;
}
.bj-studio #markupModal.is-mobile-workspace #mkHoopToggle{
  flex:1 1 auto; min-height:46px; justify-content:center; border:0; border-radius:10px 0 0 10px;
}
.bj-studio #markupModal.is-mobile-workspace #markupMode{
  position:relative; width:100%; min-height:48px; padding:3px;
  display:grid; grid-template-columns:1fr 1fr auto; gap:3px;
  border:1px solid var(--bj-hair); border-radius:11px; background:#f7f4ee;
}
.bj-studio #markupModal.is-mobile-workspace #markupMode .markup-mode__lbl{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace #markupMode .mk-mode{
  min-width:0; min-height:40px; padding:5px 7px; border-radius:8px;
  font-size:8px; letter-spacing:.06em; white-space:normal; line-height:1.25;
}
.bj-studio #markupModal.is-mobile-workspace #markupMode .mk-mode__help{ min-width:40px; }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting__slot--document{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
}
.bj-studio #markupModal.is-mobile-workspace #mkSheetDrop,
.bj-studio #markupModal.is-mobile-workspace #mkImportDrop{ width:100%; }
.bj-studio #markupModal.is-mobile-workspace #mkSheetBtn,
.bj-studio #markupModal.is-mobile-workspace #mkPicture{
  width:100%; min-height:48px; padding:0 12px; border:1px solid var(--bj-hair); border-radius:11px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#faf8f4; color:var(--bj-ink);
}
.bj-studio #markupModal.is-mobile-workspace #mkSheetBtn span,
.bj-studio #markupModal.is-mobile-workspace #mkPicture span{ display:inline !important; }
.bj-studio #markupModal.is-mobile-workspace #mkEditSketch:not([hidden]){
  grid-column:1 / -1; width:100%; min-height:48px; border-radius:11px; justify-content:center;
}

/* ── LAYERS & ASSETS: ABSENT AT REST, CAPABLE WHEN ASKED ──────────────── */
.bj-studio #markupModal.is-mobile-workspace .mk-dock{
  position:fixed !important; z-index:1330; left:0; right:0; top:auto;
  bottom:var(--mk-m-foot) !important; width:auto !important;
  height:min(68vh,640px); height:min(68dvh,640px);
  max-height:calc(100vh - var(--mk-m-head) - var(--mk-m-foot));
  max-height:calc(100dvh - var(--mk-m-head) - var(--mk-m-foot));
  border:0; border-top:1px solid rgba(28,29,29,.18); border-radius:20px 20px 0 0;
  background:#fff; box-shadow:0 -24px 64px rgba(28,29,29,.27);
  animation:mkMobileSheetIn .22s cubic-bezier(.16,1,.3,1); overflow:hidden;
}
.bj-studio #markupModal.is-mobile-workspace .mk-dock.is-min{ display:none !important; }
.bj-studio #markupModal.is-mobile-workspace .mk-dock__tabs{ min-height:52px; }
.bj-studio #markupModal.is-mobile-workspace .mk-dock__tab{
  min-height:50px; padding:0 12px; font-size:10px; letter-spacing:.14em;
}
.bj-studio #markupModal.is-mobile-workspace .mk-dock__x{
  display:flex; align-items:center; justify-content:center; width:52px; min-height:50px; border-radius:0;
}
.bj-studio #markupModal.is-mobile-workspace .mk-pane__bar{ min-height:52px; padding:5px 8px; }
.bj-studio #markupModal.is-mobile-workspace .mk-act{ min-width:44px; min-height:44px; border-radius:10px; }
.bj-studio #markupModal.is-mobile-workspace .mk-layer{ min-height:62px; }
.bj-studio #markupModal.is-mobile-workspace .mk-lib__search input{ font-size:16px; }
.bj-studio #markupModal.is-mobile-workspace .mk-lib__grid{
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:10px;
  /* Every visible part of the list is an asset tile, and the desktop tiles
     deliberately use touch-action:none for drag-to-canvas. On a phone that
     makes the list itself impossible to swipe. The sheet is scroll-first:
     vertical gestures belong to this scroller; a deliberate horizontal
     start still reaches the placement handler and can then travel anywhere. */
  overflow-y:auto; touch-action:pan-y; overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch; scroll-behavior:auto; overflow-anchor:none;
}
.bj-studio #markupModal.is-mobile-workspace .mk-lib__grid .mk-asset{
  touch-action:pan-y;
}

/* ── EVERY TOUCH DROPDOWN IS A REAL SHEET ───────────────────────────────
   No desktop popover coordinates survive this branch; JS deliberately
   leaves placement to these rules. Soft corners and a restrained fade/slide
   make the transition legible without taking over the experience. */
.bj-studio #markupModal.is-mobile-workspace .mk-drop__menu,
.bj-studio #markupModal.is-mobile-workspace #mkCtx{
  position:fixed !important; z-index:1400 !important;
  left:0 !important; right:0 !important; top:auto !important;
  bottom:var(--mk-m-foot) !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  max-height:min(70vh,620px) !important;
  max-height:min(70dvh,620px) !important;
  padding:7px 0 max(12px,env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  border:0; border-top:1px solid rgba(28,29,29,.22); border-radius:20px 20px 0 0;
  background:#fff; box-shadow:0 -24px 64px rgba(28,29,29,.29);
  animation:mkMobileSheetIn .2s cubic-bezier(.16,1,.3,1) !important;
}
.bj-studio #markupModal.is-mobile-workspace .mk-drop__menu::before,
.bj-studio #markupModal.is-mobile-workspace #mkCtx::before{
  content:""; display:block; width:44px; height:5px; border-radius:99px;
  background:#d3cec5; margin:2px auto 7px;
}
.bj-studio #markupModal.is-mobile-workspace .mk-drop.is-open::before{
  content:""; position:fixed; z-index:1390;
  inset:var(--mk-m-head) 0 var(--mk-m-foot) 0;
  background:rgba(28,29,29,.34); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.bj-studio #markupModal.is-mobile-workspace .mk-item{
  min-height:50px; padding:12px 17px; gap:12px; font-size:14px; line-height:1.25;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.bj-studio #markupModal.is-mobile-workspace .mk-item svg{ width:20px; height:20px; }
.bj-studio #markupModal.is-mobile-workspace .mk-item em{
  max-width:48%; padding-left:8px; overflow:hidden; text-overflow:ellipsis;
  font-size:9.5px; white-space:nowrap;
}
.bj-studio #markupModal.is-mobile-workspace .mk-drop__head{ padding:12px 17px 6px; }
.bj-studio #markupModal.is-mobile-workspace .mk-drop__note{ padding:11px 17px 13px; font-size:12px; }
.bj-studio #markupModal.is-mobile-workspace .mk-share{ padding-inline:17px; }
.bj-studio #markupModal.is-mobile-workspace .mk-share__b{ width:44px; height:44px; border-radius:10px; }

/* The contextual Delete route also follows device identity, so it remains
   available on an unfolded phone wider than the old 900px media query. */
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-delete:not([hidden]){
  position:absolute; z-index:12; pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:auto; min-width:88px; height:44px; min-height:44px;
  margin:0; padding:0 13px 0 11px;
  border:1px solid rgba(176,55,43,.58); border-radius:999px;
  background:rgba(255,255,255,.96); color:#a6372d;
  box-shadow:0 7px 22px rgba(28,29,29,.18), inset 0 1px 0 #fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:10px; font-weight:800; line-height:1; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap; touch-action:manipulation;
  transform:translate(-50%,0);
}
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-delete.is-above{ transform:translate(-50%,-100%); }
.bj-studio #markupModal.is-mobile-workspace .mk-mobile-delete svg{ width:16px; height:16px; }

/* ── FOLDABLES AND TABLETS: SAME DISCLOSURE, MOVED TO THE SHORT EDGE ──── */
@media (min-width:700px){
  .bj-studio #markupModal.is-mobile-workspace{
    --mk-m-tools:58px;
  }
  .bj-studio #markupModal.is-mobile-workspace .modal__body.markup__body{
    grid-template-columns:58px minmax(0,1fr) !important;
    grid-template-rows:var(--mk-m-head) minmax(0,1fr) var(--mk-m-foot) !important;
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head:not([hidden]){
    grid-area:1 / 1 / 2 / 3;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-wrap{
    grid-area:2 / 2 / 3 / 3 !important;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup__body .markup-toolbar{
    grid-area:2 / 1 / 3 / 2 !important; width:58px; height:100%; min-height:0;
    padding:5px 4px !important; border-top:0; border-right:1px solid rgba(28,29,29,.12);
    overflow-y:auto !important; overflow-x:hidden !important;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar .markup-tools{
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:2px; width:100%; min-height:max-content;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool{
    width:48px !important; min-width:48px; height:48px !important; min-height:48px;
    padding:0 !important; gap:0;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool svg{
    width:21px !important; height:21px !important;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool > span{ display:none !important; }
  .bj-studio #markupModal.is-mobile-workspace #mkMarquee,
  .bj-studio #markupModal.is-mobile-workspace #mkHighlight,
  .bj-studio #markupModal.is-mobile-workspace .markup-tools > [data-drop="text"],
  .bj-studio #markupModal.is-mobile-workspace #mkMagicEraser{ display:flex !important; }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-tool__count{
    top:1px; right:1px;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-props{
    left:calc(58px + 14px); right:auto; bottom:calc(var(--mk-m-foot) + 12px);
    transform:none;
  }
  .bj-studio #markupModal.is-mobile-workspace .markup-foot{
    grid-area:3 / 1 / 4 / 3 !important;
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-panel-scrim:not([hidden]){
    inset:var(--mk-m-head) 0 var(--mk-m-foot) 58px;
    display:none !important;
  }
  /* A side inspector is workspace, not a modal. The canvas yields its right
     edge and remains fully interactive instead of sitting dimmed underneath
     the panel — the fold/tablet advantage is used rather than ignored. */
  .bj-studio #markupModal.is-mobile-workspace .markup-wrap{
    transition:margin-right .22s cubic-bezier(.16,1,.3,1);
  }
  .bj-studio #markupModal.is-mobile-workspace.has-mobile-panel .markup-wrap{
    margin-right:min(420px,46vw);
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-settings:not([hidden]),
  .bj-studio #markupModal.is-mobile-workspace .mk-dock{
    left:auto; right:0; top:var(--mk-m-head); bottom:var(--mk-m-foot) !important;
    width:min(420px,46vw) !important; height:auto; max-height:none;
    border-top:0; border-left:1px solid rgba(28,29,29,.18); border-radius:18px 0 0 0;
    box-shadow:-24px 0 64px rgba(28,29,29,.24);
    animation:mkMobileSideIn .22s cubic-bezier(.16,1,.3,1);
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__grab,
  .bj-studio #markupModal.is-mobile-workspace .mk-dock__grab{ display:none; }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting--split{
    grid-template-columns:1fr; gap:16px;
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-drop__menu,
  .bj-studio #markupModal.is-mobile-workspace #mkCtx{
    left:auto !important; right:0 !important; top:var(--mk-m-head) !important;
    bottom:var(--mk-m-foot) !important; width:min(420px,46vw) !important;
    max-width:min(420px,46vw) !important; max-height:none !important;
    border-top:0; border-left:1px solid rgba(28,29,29,.2); border-radius:18px 0 0 0;
    box-shadow:-24px 0 64px rgba(28,29,29,.26);
    animation:mkMobileSideIn .2s cubic-bezier(.16,1,.3,1) !important;
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-drop__menu::before,
  .bj-studio #markupModal.is-mobile-workspace #mkCtx::before{ display:none; }
  .bj-studio #markupModal.is-mobile-workspace .mk-drop.is-open::before{
    inset:var(--mk-m-head) 0 var(--mk-m-foot) 58px;
  }
  @keyframes mkMobileSideIn{
    from{ opacity:.35; transform:translateX(34px); }
    to{ opacity:1; transform:none; }
  }
}

@media (min-width:440px) and (max-width:699px){
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-setting--split{
    grid-template-columns:1fr 1fr;
  }
}

@media (min-width:700px) and (max-height:620px){
  /* Landscape phones have tablet width but not tablet height. Keep the four
     essential creation tools plus Layers, Library and More on the rail; the
     four specialist tools remain the first rows in More, one tap away. */
  .bj-studio #markupModal.is-mobile-workspace #mkMarquee,
  .bj-studio #markupModal.is-mobile-workspace #mkHighlight,
  .bj-studio #markupModal.is-mobile-workspace .markup-tools > [data-drop="text"],
  .bj-studio #markupModal.is-mobile-workspace #mkMagicEraser{ display:none !important; }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool{
    height:44px !important; min-height:44px;
  }
}

@media (max-width:360px){
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head:not([hidden]){
    grid-template-columns:44px minmax(46px,1fr) repeat(4,42px);
    padding-inline:1px;
  }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file{ width:44px; }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__file #mkFileBtn,
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__b{ width:42px; min-width:42px; }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__title{ padding-inline:3px; }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-head__title b{ font-size:13px; }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar{ padding-inline:2px !important; }
  .bj-studio #markupModal.is-mobile-workspace .markup-toolbar .mk-tool > span{ font-size:7px; }
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-sheet__body{ padding-inline:12px; }
  .bj-studio #markupModal.is-mobile-workspace .mk-item em{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .bj-studio #markupModal.is-mobile-workspace .mk-mobile-settings,
  .bj-studio #markupModal.is-mobile-workspace .mk-dock,
  .bj-studio #markupModal.is-mobile-workspace .mk-drop__menu,
  .bj-studio #markupModal.is-mobile-workspace .mk-tool{ animation:none !important; transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDER STEP · GUIDED CONFIGURATOR (rev 60)
   --------------------------------------------------------------------------
   Step 3 is a decision path, not a specification sheet. Required choices are
   grouped into three numbered cards, the less common additions are deferred
   behind one clearly optional disclosure, and the price gets its own calm
   purchase surface. The rules are scoped to #view-3 so the editor and every
   earlier desktop workflow keep their established geometry.                 */
.bj-studio #view-3 .approve-grid{
  grid-template-columns:minmax(360px,.84fr) minmax(560px,1.16fr);
  gap:clamp(34px,4vw,72px); max-width:1540px; align-items:start;
}
.bj-studio #view-3 .gen-left{
  min-width:0; flex-direction:column; align-items:stretch; gap:0;
}
.bj-studio #view-3 .order-card.pdp-card{
  width:100%; max-width:680px; padding:25px;
  border:1px solid #e6e0d6; border-radius:18px; background:#fff;
  box-shadow:0 18px 48px rgba(48,39,26,.06);
}
.bj-studio #view-3 .order-preview-head{
  width:min(100%, calc(var(--stage-size) + 28px)); margin:0 auto 10px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--bj-sans); line-height:1.2;
}
.bj-studio #view-3 .order-preview-head__status{
  display:inline-flex; align-items:center; gap:8px; color:var(--bj-ink);
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.bj-studio #view-3 .order-preview-head__status svg{
  width:22px; height:22px; padding:4px; border-radius:50%;
  background:var(--bj-gold); color:#fff; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio #view-3 .order-preview-head__hint{
  color:var(--bj-muted); font-size:10.5px; letter-spacing:.02em;
}

/* Intro: a short promise and the current piece price—no competing headline. */
.bj-studio #view-3 .order-intro{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.bj-studio #view-3 .order-intro .bj-eyebrow{
  display:block; margin:0 0 6px; color:var(--bj-gold);
  font-size:9px; letter-spacing:.2em;
}
.bj-studio #view-3 .order-card .pdp-title{
  margin:0; font-size:clamp(29px,2.3vw,37px); line-height:1.06;
}
.bj-studio #view-3 .order-intro p{
  margin-top:7px; color:var(--bj-muted); font-size:13px; line-height:1.45;
}
.bj-studio #view-3 .order-unit-price{
  flex:none; min-width:105px; padding:9px 11px; border-radius:11px;
  border:1px solid #e7dfd2; background:#fbf8f2; text-align:right;
}
.bj-studio #view-3 .order-unit-price > span{
  display:block; color:var(--bj-muted); font-size:8px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
}
.bj-studio #view-3 .order-unit-price .pdp-price{
  display:block; margin-top:3px; color:var(--bj-ink);
  font-size:22px; line-height:1.1; white-space:nowrap;
}

/* Approved set: reassurance, not another form section. */
.bj-studio #view-3 .order-pair{
  display:grid; grid-template-columns:28px 46px 46px minmax(0,1fr);
  align-items:center; gap:9px; margin:19px 0 0; padding:10px 12px;
  border:1px solid #eadfc8; border-radius:12px; background:#fbf8f1;
}
.bj-studio #view-3 .order-pair[hidden]{ display:none !important; }
.bj-studio #view-3 .order-pair__check{
  width:25px; height:25px; display:grid; place-items:center; border-radius:50%;
  background:#efe3c8; color:#8b6a2f;
}
.bj-studio #view-3 .order-pair__check svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio #view-3 .order-pair__t{
  width:46px; height:46px; border-radius:8px; background:#fff;
}
.bj-studio #view-3 .order-pair__lbl{
  min-width:0; font-size:9px; line-height:1.35; letter-spacing:.12em;
}
.bj-studio #view-3 .order-pair__lbl strong{
  display:block; color:var(--bj-ink); font-family:var(--bj-sans);
  font-size:10px; font-weight:700; letter-spacing:.13em;
}
.bj-studio #view-3 .order-pair__lbl em{
  display:block; margin-top:3px; color:var(--bj-gold); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* Three required decisions. Generous separation makes each card feel like
   one small answer instead of part of a dense product form. */
.bj-studio #view-3 .order-flow{ display:grid; gap:13px; margin-top:16px; }
.bj-studio #view-3 .order-choice{
  display:block; min-width:0; padding:17px 17px 18px;
  border:1px solid #e7e2d9; border-radius:14px; background:#fcfbf8;
}
.bj-studio #view-3 .order-choice[hidden],
.bj-studio #view-3 .order-personalize[hidden],
.bj-studio #view-3 .order-row[hidden]{ display:none !important; }
.bj-studio #view-3 .order-choice__head{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center; gap:10px; min-width:0;
}
.bj-studio #view-3 .order-choice__num{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:#f1e7d5; color:#785b2a; font-family:var(--bj-serif);
  font-size:14px; line-height:1;
}
.bj-studio #view-3 .order-choice__head h4{
  margin:0; color:var(--bj-ink); font-family:var(--bj-serif);
  font-size:19px; font-weight:500; line-height:1.1;
}
.bj-studio #view-3 .order-choice__head p{
  margin-top:3px; color:var(--bj-muted); font-size:11.5px; line-height:1.35;
}
.bj-studio #view-3 .order-choice__selected{
  max-width:165px; padding:5px 8px; border-radius:999px; background:#fff;
  border:1px solid #e6ddcf; color:#8a692f; font-size:8.5px; font-weight:700;
  letter-spacing:.08em; line-height:1.25; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio #view-3 .order-format-source{ display:none !important; }

/* Piece format: five visible answers replace a five-option dropdown. */
.bj-studio #view-3 .format-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin-top:14px;
}
.bj-studio #view-3 .format-card{
  position:relative; display:grid; grid-template-columns:33px minmax(0,1fr);
  grid-template-rows:auto auto; align-items:center; column-gap:9px;
  min-height:76px; padding:10px 25px 10px 10px;
  border:1px solid #dedad2; border-radius:11px; background:#fff;
  color:var(--bj-ink); text-align:left;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.bj-studio #view-3 .format-card:hover{
  border-color:#bda36f; transform:translateY(-1px);
}
.bj-studio #view-3 .format-card:focus-visible,
.bj-studio #view-3 .mp:focus-visible,
.bj-studio #view-3 .size-opt:focus-visible,
.bj-studio #view-3 .order-personalize summary:focus-visible,
.bj-studio #view-3 .qty button:focus-visible,
.bj-studio #view-3 .pdp-cart:focus-visible{
  outline:2px solid var(--bj-gold); outline-offset:2px;
}
.bj-studio #view-3 .format-card.is-active{
  border-color:var(--bj-ink); background:#fffdf8;
  box-shadow:inset 0 0 0 1px var(--bj-gold), 0 6px 15px rgba(92,70,31,.07);
}
.bj-studio #view-3 .format-card.is-active:after,
.bj-studio #view-3 .mp.is-active:after,
.bj-studio #view-3 .size-opt.is-active:after{
  content:"✓"; position:absolute; top:7px; right:7px;
  width:17px; height:17px; display:grid; place-items:center; border-radius:50%;
  background:var(--bj-ink); color:#fff; font-size:9px; font-weight:700; line-height:1;
}
.bj-studio #view-3 .format-card__icon{
  grid-row:1 / 3; width:33px; height:33px; display:grid; place-items:center;
  border-radius:9px; background:#f5ecdc; color:#9b7130;
}
.bj-studio #view-3 .format-card__icon svg{
  width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.45;
  stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio #view-3 .format-card__copy{ min-width:0; align-self:end; }
.bj-studio #view-3 .format-card__copy strong{
  display:block; font-size:11px; font-weight:700; line-height:1.22;
}
.bj-studio #view-3 .format-card__copy small{
  display:block; margin-top:2px; color:var(--bj-muted); font-size:8.5px;
  line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bj-studio #view-3 .format-card__price{
  grid-column:2; align-self:start; color:var(--bj-gold);
  font-size:9px; font-weight:700; line-height:1.2;
}

/* Finish: common choices stay together; solid gold is clearly a premium
   family rather than an unexplained second row. */
.bj-studio #view-3 .metal-pills{ display:grid; gap:11px; margin-top:13px; }
.bj-studio #view-3 .metal-group__label{
  display:block; margin-bottom:6px; color:var(--bj-muted); font-size:8px;
  font-weight:700; letter-spacing:.15em; line-height:1.2; text-transform:uppercase;
}
.bj-studio #view-3 .metal-group__options{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;
}
.bj-studio #view-3 .metal-group--solid .metal-group__options{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.bj-studio.is-designing #view-3 .mp{
  position:relative; width:100%; min-width:0; min-height:48px;
  padding:9px 27px 9px 10px; border:1px solid #dedad2; border-radius:10px;
  background:#fff; color:var(--bj-ink); font-size:10.5px; line-height:1.2;
  text-align:left; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bj-studio #view-3 .mp:hover{ border-color:#bda36f; transform:translateY(-1px); }
.bj-studio #view-3 .mp i{ width:18px; height:18px; flex:none; }
.bj-studio #view-3 .mp > span{ min-width:0; }
.bj-studio #view-3 .mp.is-active{
  border-color:var(--bj-ink); background:#fffdf8; color:var(--bj-ink);
  box-shadow:inset 0 0 0 1px var(--bj-gold);
}

/* Size choices stay exposed, but each has enough physical space to read and
   tap. The selected state is warm and clear instead of a harsh black tile. */
.bj-studio #view-3 .size-row{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px;
  margin-top:15px;
}
.bj-studio.is-designing #view-3 .size-opt{
  position:relative; min-height:80px; padding:11px 4px 8px;
  border:1px solid #dedad2; border-radius:10px; background:#fff;
}
.bj-studio #view-3 .size-opt.is-active{
  border-color:var(--bj-ink); background:#fffdf8;
  box-shadow:inset 0 0 0 1px var(--bj-gold);
}
.bj-studio #view-3 .size-opt.is-active .size-mm{ color:var(--bj-ink); }
.bj-studio #view-3 .size-opt.is-active .size-delta{ color:var(--bj-muted); }
.bj-studio #view-3 .size-opt.is-active .size-dot{
  background:var(--bj-gold-lt); border-color:var(--bj-gold);
}
.bj-studio #view-3 .size-mm{ font-size:12px; }
.bj-studio #view-3 .size-delta{ min-height:11px; font-size:9px; }
.bj-studio #view-3 .size-opt .size-tag{
  top:-8px; padding:2px 6px; border-radius:999px; font-size:7px;
}
.bj-studio #view-3 .order-choice--one-size.one-size{
  display:block; margin:0; color:var(--bj-ink);
}
.bj-studio #view-3 .one-size__message{
  display:flex; align-items:center; gap:9px; margin:13px 0 0 38px;
  padding:9px 11px; border-radius:9px; background:#fff; color:var(--bj-muted);
  font-size:11px; line-height:1.4;
}
.bj-studio #view-3 .one-size__message svg{
  width:17px; height:17px; flex:none; fill:none; stroke:var(--bj-gold);
  stroke-width:1.6; stroke-linecap:round;
}

/* Optional personalization uses progressive disclosure. */
.bj-studio #view-3 .order-personalize{
  margin-top:13px; border:1px solid #e5ded2; border-radius:14px;
  background:#fff; overflow:hidden;
}
.bj-studio #view-3 .order-personalize summary{
  min-height:61px; display:grid; grid-template-columns:36px minmax(0,1fr) auto 18px;
  align-items:center; gap:10px; padding:11px 14px; cursor:pointer; list-style:none;
  transition:background .18s ease;
}
.bj-studio #view-3 .order-personalize summary::-webkit-details-marker{ display:none; }
.bj-studio #view-3 .order-personalize summary:hover{ background:#fcfaf6; }
.bj-studio #view-3 .order-personalize__icon{
  width:35px; height:35px; display:grid; place-items:center; border-radius:50%;
  background:#f3ead9; color:#9b7130;
}
.bj-studio #view-3 .order-personalize__icon svg,
.bj-studio #view-3 .order-personalize__chev{
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio #view-3 .order-personalize__icon svg{ width:21px; height:21px; }
.bj-studio #view-3 .order-personalize__copy strong{
  display:block; color:var(--bj-ink); font-family:var(--bj-serif);
  font-size:17px; font-weight:500; line-height:1.15;
}
.bj-studio #view-3 .order-personalize__copy small{
  display:block; margin-top:3px; color:var(--bj-muted); font-size:10px; line-height:1.3;
}
.bj-studio #view-3 .order-personalize__meta{
  padding:4px 8px; border-radius:999px; background:#f5f0e6; color:#8a692f;
  font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
}
.bj-studio #view-3 .order-personalize.has-selection .order-personalize__meta{
  background:var(--bj-gold); color:#fff;
}
.bj-studio #view-3 .order-personalize__chev{
  width:17px; height:17px; color:var(--bj-muted); transition:transform .2s ease;
}
.bj-studio #view-3 .order-personalize[open] .order-personalize__chev{ transform:rotate(180deg); }
.bj-studio #view-3 .order-personalize__body{
  display:grid; gap:10px; padding:13px 14px 15px; border-top:1px solid #eee8df;
  background:#fcfbf8;
}
.bj-studio #view-3 .order-extra-group[hidden]{ display:none !important; }
.bj-studio #view-3 .order-extra-group__title{
  display:block; margin-bottom:7px; color:var(--bj-muted); font-size:8px;
  font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.bj-studio.is-designing #view-3 .opt-row{
  display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:10px;
  min-height:58px; margin:0; padding:9px 11px; border:1px solid #e4dfd7;
  border-radius:10px; background:#fff; color:var(--bj-ink); cursor:pointer;
}
.bj-studio #view-3 .opt-row + .opt-row{ margin-top:7px; }
.bj-studio #view-3 .opt-row--sub{ margin-left:0; }
.bj-studio #view-3 .opt-row input{
  width:18px; height:18px; margin:0; accent-color:var(--bj-gold);
}
.bj-studio #view-3 .opt-row__copy{ min-width:0; }
.bj-studio #view-3 .opt-row__copy strong{
  display:block; color:var(--bj-ink); font-size:11.5px; font-weight:700;
  letter-spacing:0; line-height:1.25; text-transform:none;
}
.bj-studio #view-3 .opt-row__copy small{
  display:block; margin-top:2px; color:var(--bj-muted); font-size:9.5px;
  font-weight:400; letter-spacing:0; line-height:1.25; text-transform:none;
}
.bj-studio #view-3 .opt-row b{
  color:var(--bj-gold); font-size:10px; letter-spacing:.02em; white-space:nowrap;
}
.bj-studio #view-3 .order-engrave-input{
  width:100%; min-height:48px; margin-top:7px; padding:10px 12px;
  border-radius:9px; font-size:16px;
}
.bj-studio #view-3 .order-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Final decision: one transparent total, one quantity control, one primary
   action. This surface is visually separate from configuration choices. */
.bj-studio #view-3 .order-checkout{
  margin-top:13px; padding:17px; border:1px solid #dfcfad;
  border-radius:14px; background:#f7f2e8;
}
.bj-studio #view-3 .order-checkout__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
}
.bj-studio #view-3 .order-checkout__head > div > span{
  display:block; color:var(--bj-gold); font-size:8px; font-weight:700;
  letter-spacing:.16em; line-height:1.2; text-transform:uppercase;
}
.bj-studio #view-3 .order-checkout__head h4{
  margin-top:3px; font-family:var(--bj-serif); font-size:20px; font-weight:500; line-height:1.1;
}
.bj-studio #view-3 #orderGrandTotal{
  color:var(--bj-ink); font-family:var(--bj-serif); font-size:28px;
  font-weight:500; line-height:1; white-space:nowrap;
}
.bj-studio #view-3 .order-breakdown{
  margin-top:12px; padding-top:8px; border-top:1px solid rgba(133,104,51,.17);
}
.bj-studio #view-3 .order-row{
  min-height:30px; padding:5px 0; border:0; color:var(--bj-muted); font-size:11px;
}
.bj-studio #view-3 .order-row > span:last-child{
  color:var(--bj-ink); font-weight:700; white-space:nowrap;
}
.bj-studio #view-3 .qty-cart{
  display:grid; grid-template-columns:auto minmax(240px,1fr); align-items:end;
  gap:12px; margin-top:13px !important;
}
.bj-studio #view-3 .qty-wrap > span{
  display:block; margin-bottom:5px; color:var(--bj-muted); font-size:8px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.bj-studio #view-3 .qty{
  min-height:50px; border:1px solid #d8d0c2; border-radius:10px; background:#fff;
}
.bj-studio #view-3 .qty button{
  width:44px; min-width:44px; min-height:48px; padding:0;
  font-size:18px; line-height:1;
}
.bj-studio #view-3 .qty span{ min-width:30px; font-size:14px; }
.bj-studio.is-designing #view-3 .pdp-cart{
  min-height:50px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border:1px solid var(--bj-ink); border-radius:10px;
  background:var(--bj-ink); color:#fff; font-size:11px; letter-spacing:.16em;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.bj-studio #view-3 .pdp-cart:not([disabled]):hover{
  background:#343432; border-color:#343432; transform:translateY(-1px);
}
.bj-studio #view-3 .pdp-cart[disabled]{ opacity:.65; cursor:wait; }
.bj-studio #view-3 .pdp-cart__price{ color:#dcc99f; white-space:nowrap; }

.bj-studio #view-3 .pdp-trust{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin-top:11px;
}
.bj-studio #view-3 .pdp-trust > div{
  min-width:0; display:flex; align-items:center; gap:8px; padding:9px 8px;
  border-radius:10px; background:#faf8f3;
}
.bj-studio #view-3 .pdp-trust svg{
  width:20px; height:20px; flex:none; fill:none; stroke:var(--bj-gold);
  stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
}
.bj-studio #view-3 .pdp-trust > div > span{ min-width:0; }
.bj-studio #view-3 .pdp-trust b{
  display:block; color:var(--bj-ink); font-size:9.5px; font-weight:700;
  letter-spacing:.02em; line-height:1.2;
}
.bj-studio #view-3 .pdp-trust small{
  display:block; margin-top:2px; color:var(--bj-muted); font-size:8.5px;
  line-height:1.2; white-space:nowrap;
}

/* Mid-size desktop and tablet: keep the calm configurator width and stack it
   with the approved preview instead of compressing both columns. */
@media (max-width:1180px){
  .bj-studio #view-3 .approve-grid{
    grid-template-columns:minmax(0,1fr); max-width:720px; gap:24px;
  }
  .bj-studio #view-3 .order-card.pdp-card{ max-width:720px; margin-inline:auto; }
  .bj-studio #view-3 .gen-left{ width:100%; max-width:720px; margin-inline:auto; }
}

/* Coarse-pointer tablets and foldables receive the same single-column order
   path at any practical width. The configurator comes first because the
   approved thumbnails already preserve visual confidence above choice one. */
@media (hover:none) and (pointer:coarse){
  .bj-studio #view-3 .approve-grid{
    grid-template-columns:minmax(0,1fr); max-width:760px; gap:20px;
  }
  .bj-studio #view-3 .order-card.pdp-card{ max-width:720px; margin-inline:auto; }
  .bj-studio #view-3 .order-card{ order:1; }
  .bj-studio #view-3 .gen-left{ order:2; width:100%; max-width:760px; margin-inline:auto; }
  .bj-studio #view-3 .format-card,
  .bj-studio.is-designing #view-3 .mp,
  .bj-studio.is-designing #view-3 .size-opt{ min-height:52px; }
}

/* Phone: one clear vertical path, full-size targets, no desktop squeezing. */
@media (max-width:760px){
  .bj-studio.is-designing #view-3 .panel--studio{ padding:9px 8px 22px; }
  .bj-studio #view-3 .approve-grid{ display:flex; flex-direction:column; gap:18px; }
  .bj-studio #view-3 .order-card{ order:1; }
  .bj-studio #view-3 .gen-left{ order:2; }
  .bj-studio #view-3 .order-card.pdp-card{
    padding:6px 0 0; border:0; border-radius:0; box-shadow:none; background:transparent;
  }
  .bj-studio #view-3 .order-intro{ padding:4px 4px 0; gap:12px; }
  .bj-studio #view-3 .order-card .pdp-title{ font-size:31px; }
  .bj-studio #view-3 .order-intro p{ font-size:12px; }
  .bj-studio #view-3 .order-unit-price{ min-width:94px; padding:8px 9px; }
  .bj-studio #view-3 .order-unit-price .pdp-price{ font-size:20px; }
  .bj-studio #view-3 .order-pair{
    grid-template-columns:24px 43px 43px minmax(0,1fr);
    gap:7px; margin-top:15px; padding:9px;
  }
  .bj-studio #view-3 .order-pair__check{ width:23px; height:23px; }
  .bj-studio #view-3 .order-pair__t{ width:43px; height:43px; }
  .bj-studio #view-3 .order-pair__lbl strong{ font-size:9px; }
  .bj-studio #view-3 .order-pair__lbl em{ font-size:8px; }
  .bj-studio #view-3 .order-flow{ gap:11px; margin-top:12px; }
  .bj-studio #view-3 .order-choice{ padding:14px 12px 15px; border-radius:12px; }
  .bj-studio #view-3 .order-choice__head{
    grid-template-columns:29px minmax(0,1fr); gap:9px;
  }
  .bj-studio #view-3 .order-choice__head h4{ font-size:18px; }
  .bj-studio #view-3 .order-choice__head p{ font-size:10.5px; }
  .bj-studio #view-3 .order-choice__selected{
    grid-column:2; justify-self:start; max-width:100%; margin-top:1px;
    padding:4px 7px; text-align:left;
  }
  .bj-studio #view-3 .format-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px;
  }
  .bj-studio #view-3 .format-card{
    min-height:82px; padding:10px 24px 10px 9px; column-gap:8px;
  }
  .bj-studio #view-3 .format-card__copy strong{ font-size:10.5px; }
  .bj-studio #view-3 .metal-group__options,
  .bj-studio #view-3 .metal-group--solid .metal-group__options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bj-studio.is-designing #view-3 .mp{ min-height:52px; font-size:10px; }
  .bj-studio #view-3 .size-row{
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:14px;
  }
  .bj-studio.is-designing #view-3 .size-opt{ min-height:76px; }
  .bj-studio #view-3 .one-size__message{ margin-left:0; }
  .bj-studio #view-3 .order-personalize{ margin-top:11px; border-radius:12px; }
  .bj-studio #view-3 .order-personalize summary{
    min-height:64px; grid-template-columns:34px minmax(0,1fr) auto 17px;
    gap:8px; padding:10px 11px;
  }
  .bj-studio #view-3 .order-personalize__copy strong{ font-size:16px; }
  .bj-studio #view-3 .order-personalize__copy small{ font-size:9px; }
  .bj-studio #view-3 .order-personalize__meta{ padding:4px 6px; font-size:7px; }
  .bj-studio #view-3 .order-personalize__body{ padding:11px; }
  .bj-studio.is-designing #view-3 .opt-row{ min-height:62px; }
  .bj-studio #view-3 .order-checkout{ margin-top:11px; padding:14px 12px; border-radius:12px; }
  .bj-studio #view-3 #orderGrandTotal{ font-size:26px; }
  .bj-studio #view-3 .qty-cart{
    grid-template-columns:1fr; align-items:stretch; gap:10px;
  }
  .bj-studio #view-3 .qty-wrap{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .bj-studio #view-3 .qty-wrap > span{ margin:0; }
  .bj-studio.is-designing #view-3 .pdp-cart{ width:100%; min-height:52px; }
  .bj-studio #view-3 .pdp-trust{ grid-template-columns:1fr; gap:6px; }
  .bj-studio #view-3 .pdp-trust > div{ min-height:47px; padding:8px 10px; }
  .bj-studio #view-3 .pdp-trust b{ font-size:10px; }
  .bj-studio #view-3 .pdp-trust small{ font-size:9px; }
  .bj-studio #view-3 .order-preview-head{ padding-inline:2px; }
  .bj-studio #view-3 .order-preview-head__hint{ display:none; }
  .bj-studio #view-3 .step-nav{ margin-top:16px; }
}

@media (max-width:360px){
  .bj-studio #view-3 .order-intro{ align-items:flex-end; }
  .bj-studio #view-3 .order-card .pdp-title{ font-size:28px; }
  .bj-studio #view-3 .order-intro p{ max-width:180px; }
  .bj-studio #view-3 .order-unit-price{ min-width:87px; }
  .bj-studio #view-3 .order-pair{
    grid-template-columns:22px 40px 40px minmax(0,1fr); gap:5px;
  }
  .bj-studio #view-3 .order-pair__t{ width:40px; height:40px; }
  .bj-studio #view-3 .format-cards,
  .bj-studio #view-3 .metal-group__options,
  .bj-studio #view-3 .metal-group--solid .metal-group__options{
    grid-template-columns:1fr;
  }
  .bj-studio #view-3 .format-card{ min-height:68px; }
  .bj-studio #view-3 .order-personalize summary{
    grid-template-columns:34px minmax(0,1fr) 16px;
  }
  .bj-studio #view-3 .order-personalize__meta{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .bj-studio #view-3 .format-card,
  .bj-studio #view-3 .mp,
  .bj-studio #view-3 .size-opt,
  .bj-studio #view-3 .order-personalize__chev,
  .bj-studio #view-3 .pdp-cart{ transition:none !important; transform:none !important; }
}