/* PROXY — Glass wrap-artwork preview */
/* The stage now carries its own border and radius, so the plinth around it is
   a plain container: a card inside a card was drawing a second frame and, with
   32px of padding a side, holding the stage 66px narrower than its grid column.
   AIO's stage sits straight in the column; this one now does too. */
.build .p-plinth{padding:0;overflow:visible;background:none;border:0;border-radius:0}
/* 520px is the AIO Design Studio stage height (configure/configure.css
   .cfg-stage), adopted so both studios present the device at the same scale. */
/* The stage is the AIO studio stage, backdrop included: the radial cream field,
   the 1px line and the 8px radius are lifted verbatim from configure.css
   .cfg-stage. Flat white was the single biggest reason the cartridge read as
   small - a thin cylinder on white, inside a white card, on a white section, has
   nothing to be seen against, so the eye reads the whole box as empty and the
   product as an object floating in it. The gradient gives the product a surface
   to sit on, which is what AIO's stage has always done.

   520px was AIO's stage height, adopted when Glass first borrowed the studio
   scale. It is the right height for an ECO, which is a squat rectangle, and the
   wrong one for a cartridge of this proportion: it caps the product on its long axis while
   leaving three quarters of the width unused. 700px is portrait enough for the
   cartridge and still clears a 950px viewport with the sticky offset, so the
   stage continues to follow the panel down the page. */
.wp-stage{position:relative;width:100%;height:700px;overflow:hidden;border-radius:8px;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 38%,#fff 0%,var(--cream) 66%,#F1ECE1 100%)}
.wp-stage img,.wp-canvas{position:absolute;max-height:none!important;max-width:none!important}
.wp-canvas{cursor:grab;touch-action:pan-y;outline:none}
.wp-canvas:active{cursor:grabbing}
.wp-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.wp-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;line-height:1.4;white-space:nowrap;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.88);padding:4px 9px;border-radius:3px;pointer-events:none;transition:opacity .3s}
.wp-hint.off{opacity:0}
/* the persistent rotation cue: a touch firmer than the upload prompt, because it is an instruction */
.wp-hint.wp-hint-rotate{color:var(--navy);background:rgba(255,255,255,.94);border:1px solid var(--line);font-weight:600;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.wp-expand{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.92);
  color:var(--navy);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.build .imgnote{display:none}
.wp-ui{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:var(--s3) 0 var(--s4)}
.wp-btn{font:inherit;font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:6px;cursor:pointer;border:1px solid var(--navy);background:var(--navy);color:var(--white)}
.wp-sub{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;color:var(--muted)}
.wp-link{font:inherit;font-size:11.5px;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.wp-link:disabled{opacity:.4;cursor:default;text-decoration:none}
.wp-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.wp-msg{flex-basis:100%;font-size:11.5px;color:var(--muted);min-height:0}
.wp-msg.err{color:#a3271f}
/* The resolution note is advisory, never an error: the artwork guide flags low
   resolution for review, it does not refuse it, so this must not be styled or
   worded like a rejection. */
.wp-res{color:#7A5A16;background:#FBF4E4;border:1px solid #E2CE9C;border-radius:4px;padding:7px 9px;line-height:1.45}
.wp-res[hidden]{display:none}
/* Leaving the printable area is a DIFFERENT condition from low resolution, with
   a different remedy, and the two can be true at once - so it gets its own
   element and its own colour rather than sharing the amber note above. Still
   advisory: a cover fit crops by construction and the customer is entitled to
   accept that, so this is not styled as a rejection either. */
/* THE CROP WARNING sits directly under Artwork size, the control that fixes
   it, and reads as a warning: amber, a heading, and the two actions that
   settle it. Still advisory - production prints what is inside the print area
   and the customer may want exactly that - so it is not styled as an error. */
.wp-oob{flex-basis:100%;display:block;color:#5E4513;background:#FBF4E4;border:1px solid #E2CE9C;
  border-left:3px solid #C9962E;border-radius:4px;padding:9px 11px;font-size:12px;line-height:1.5}
.wp-oob b{color:#4A360E}
.wp-oob-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}
.wp-oob-actions .wp-link{font-size:12px;font-weight:600}
.wp-oob-actions [hidden]{display:none}
.wp-oob[hidden]{display:none}
.wp-priv{flex-basis:100%;font-size:10.5px;color:var(--muted);opacity:.8}
.wp-modal{position:fixed;inset:0;z-index:1000;background:rgba(15,22,38,.62);display:grid;place-items:center;padding:16px}
.wp-modal[hidden]{display:none}
.wp-modal-box{position:relative;background:var(--white);border-radius:var(--r-md);padding:8px;width:min(520px,100%);height:min(88vh,860px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.wp-modal-stage{width:100%;height:100%}
.wp-modal-stage .wp-stage{height:100%;border:0}
.wp-modal-close{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:20px;line-height:1;cursor:pointer;color:var(--navy)}
.wp-lock{overflow:hidden}
/* Below 900px the grid stacks and the stage takes the full page width while
   staying sticky, so a 700px stage would pin most of the viewport before the
   controls it is meant to illustrate. The cartridge cannot get any wider, only
   taller, so the stage gives back height in the stacked range. */
@media (max-width:900px){.wp-stage{height:520px}}
@media (max-width:600px){.wp-stage{height:440px}.wp-modal-box{height:82vh}}
/* metal band */
.wp-band{margin:-6px 0 var(--s4)}
.wp-band-h{font-size:10.5px;letter-spacing:.14em;color:var(--gold-text);font-weight:700;margin-bottom:8px}
.wp-band-h span{color:var(--muted);font-weight:400;letter-spacing:0;margin-left:8px;text-transform:none}
/* .wp-sw USED TO SET display:flex HERE, AND THAT WAS THE RAGGED SELECTOR.
   The band colour control carries two classes - cfg-swatches for the shared
   four-column grid, wp-sw for the two dot fills below - and this file loads
   after the grid is defined. Two single-class rules, so the later one won:
   every band colour card was laid out by flex-wrap, sized from its own label,
   and the row came out uneven no matter what the grid said. Only the dot fills
   belong to this class; the layout belongs to the shared component and is left
   to it.
   The .wp-swatch rules that stood here are gone with the controls that used
   them: decoration was three .wp-swatch buttons and is now option cards. */
.wp-sw .dot.wp-sw-stock{background:linear-gradient(135deg,#f2f2f2,#9c9ea3 55%,#e6e6e6)}
.wp-sw .dot.wp-sw-custom{background:conic-gradient(#e33,#fc3,#3c6,#39f,#c3f,#e33)}
.wp-band .cfg-swatches{margin-bottom:10px}
/* Custom band colour uses the same "Pick a shade" row as the mouthpiece, whose
   values come from the AIO studio (configure/configure.css .cfg-pickrow). */
.wp-custom{margin-top:10px;font-size:11.5px;color:var(--navy)}
.wp-pickrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;background:var(--cream)}
.wp-pickrow input[type=color]{width:44px;height:44px;padding:2px;border:1px solid var(--line);
  border-radius:8px;background:var(--white);cursor:pointer;flex:none}
.wp-picktxt b{display:block;font-size:12.5px;color:var(--navy)}
.wp-picktxt span{display:block;font-size:10.5px;color:var(--muted);line-height:1.45}
.wp-pickhex{font-family:var(--mono);color:var(--gold-text)!important;margin-top:3px}
/* .wp-picktxt span sets display:block on this, which would beat [hidden] */
.wp-pickhex[hidden]{display:none}
.wp-reflabel{display:block;margin-top:12px;font-size:11px;color:var(--muted)}
.wp-reflabel input[type=text]{display:block;width:100%;max-width:320px;margin-top:6px;font:inherit;
  font-size:13px;color:var(--navy);padding:9px 10px;border:1px solid var(--line);border-radius:4px}
.wp-pantbadge{display:block;font-family:var(--mono);font-size:10.5px;color:var(--gold-text);margin-top:8px}
.wp-pantbadge[hidden]{display:none}
.wp-note{flex-basis:100%;font-size:10.5px;color:var(--muted)}
/* band engraving */
.wp-band-h2{margin-top:12px}
.wp-eng{margin-top:8px;display:flex;flex-direction:column;gap:8px}
/* [hidden] IS A UA RULE AND LOSES TO AN AUTHOR ONE. display:flex above beat it,
   so this box carried the hidden attribute and stayed on screen: with the
   decoration on None the collar step was offering to upload engraving artwork
   for a band that was not being decorated. Every block in this file that sets
   its own display and is ever hidden needs its own [hidden] rule, and the QA
   now sweeps the page for any element whose hidden attribute is not actually
   hiding it, so the next one fails a suite rather than shipping. */
.wp-eng[hidden]{display:none}
.wp-eng-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.wp-eng-row[hidden]{display:none}
.wp-eng .wp-btn{background:var(--white);color:var(--navy)}
.wp-eng-adj label{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--navy)}
/* GOLD, like every other slider in the studio: the DUO Design Studio accents
   its range inputs with the gold (configure.css .cfg-fld input[type=range]) and
   the two now agree. Same value, taken from the same place. */
.wp-eng-adj input[type=range]{width:120px;accent-color:var(--gold)}

/* Approximate custom mouthpiece colour. Sized and positioned by fit() exactly
   like the photograph and the wrap canvas, so it registers with both. */
.wp-mpcanvas{position:absolute;max-height:none!important;max-width:none!important;pointer-events:none}
.wp-mpcanvas[hidden]{display:none}
/* Artwork orientation, quarter turns of the uploaded file itself */
/* The body-placement group used to sit inside .wp-ui, a flex row under the wide
   stage column, and took its layout from that parent. Moving it into the 400px
   step panel left it as a bare inline span: Reset / Center, the seam toggle and
   the orientation control ran together with no spacing and overlapped. It now
   carries its own layout instead of borrowing one, so it is correct wherever it
   is mounted. The orientation control takes a row of its own because its label
   plus two buttons will not sit beside the other two at panel width. */
.wp-place{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:6px 0 0;width:100%}
/* the seam toggle sat at panel body size beside an 11.5px link; both are
   secondary controls and now read as one row */
.wp-place .wp-toggle{font-size:11.5px;color:var(--muted)}
/* PLACEMENT FIELDS: rotation and vertical position.
   Two named buttons could only ever reach four of the 360 orientations a printed
   wrap can take. Both controls are sliders now, and both are built as the same
   field: a label carrying the live value and a Reset, the slider, and a three
   point scale underneath that says what each end means. The readout is the
   value that will be submitted, not a rounding of it. */
.wp-fld{display:flex;flex-direction:column;gap:6px;width:100%;margin:2px 0 0}
.wp-fld[hidden]{display:none}
.wp-fld-lab{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.wp-fld-out{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--navy);background:var(--cream);
  border-radius:4px;padding:2px 7px;min-width:62px;text-align:center}
.wp-fld-reset{margin-left:auto;font:inherit;font-size:11px;font-weight:600;color:var(--navy);background:none;
  border:0;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold)}
.wp-fld-reset:hover{color:var(--gold-text)}
.wp-fld-reset:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wp-fld input[type=range]{width:100%;accent-color:var(--gold);margin:0}
.wp-fld-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:.04em}
.wp-placerow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;width:100%;margin-top:2px}
/* the size field joined the same family, so its old inline-label layout goes */
.wp-scale{margin:0}
.wp-scale label{display:contents}

@media (max-width:600px){.wp-fld input[type=range]{height:34px}}


/* MATCH MOUTHPIECE COLOR. Always on screen now, so it needs a state for "there
   is nothing to match to yet": the gold ground is what the studio uses for a
   live link, and a control that cannot act should not be wearing it. While the
   link is on, the band's own shade and Pantone are visibly subordinate rather
   than hidden, so the customer can see what the band is being given. */
.wp-match{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;margin:0 0 12px;cursor:pointer;
  background:var(--gold-tint);border:1px solid var(--line);border-radius:6px}
.wp-match[hidden]{display:none}
.wp-match-off{background:var(--cream);cursor:not-allowed}
.wp-match-off b{color:var(--muted)}
.wp-match input{margin-top:2px;accent-color:var(--gold);flex:none}
.wp-match input:disabled{cursor:not-allowed}
.wp-match b{display:block;font-size:12px;color:var(--navy)}
.wp-match-sub{display:block;font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.wp-custom-linked .wp-pickrow{opacity:.62}
.wp-custom-linked .wp-pickrow input[type=color]{cursor:not-allowed}


/* ==========================================================================
   CONTROLS ADDED IN THE state/6 PASS
   Three production choices the studio never asked for, and one preview aid.
   Layout only: each one is a block that carries the shared option-card grid
   from assets/css/design-studio.css, and none of them restyles that grid.
   ========================================================================== */
/* HOW THE BODY ARTWORK IS APPLIED. Lives in .wp-ui, which is a flex column, so
   it declares its own block layout rather than inheriting a row. */
.wp-print{display:block;margin:4px 0 0}
.wp-print[hidden]{display:none}
.wp-print .wp-band-h{display:block}
.wp-print .cfg-cards{margin:8px 0 6px}
.wp-print .wp-note{display:block;flex-basis:auto}
/* HOW MANY SIDES ARE ETCHED. Present only for a laser etch. */
/* BAND SURFACE FINISH and DECORATION both use the shared card grid directly;
   only the rhythm around them is set here. */
.wp-band .cfg-cards{margin:8px 0 6px}
.wp-band > .wp-note{display:block;flex-basis:auto;margin-bottom:6px}
/* [hidden] is a UA rule and loses to the author display above it, so a note
   that hides itself needs this or it stays on screen with the attribute set.
   Same class of bug as the engraving box that kept showing under None. */
.wp-band > .wp-note[hidden]{display:none}
/* PLACEMENT: size, position and the alignment guide are one task and are shown
   as one group, only once there is a mark to place. */
.wp-placegrp{display:block}
.wp-placegrp[hidden]{display:none}
.wp-placegrp .wp-eng-adj{margin:10px 0 4px}
.wp-placegrp .wp-note{display:block;flex-basis:auto}
/* ALIGNMENT STATUS. Not a control - there is nothing left to switch on - but a
   read-out of the placement the customer has made, so it is typed as a status
   line and not as a toggle. Neutral while the mark is off centre, because being
   off centre is a perfectly ordinary choice and does not deserve a warning; the
   gold state is reserved for the one thing worth announcing. */
.wp-align{display:block;margin:12px 0 4px;padding:7px 9px;border-radius:4px;
  font-size:11.5px;line-height:1.45;color:var(--muted);background:#F6F5F2;border:1px solid #E7E2D9}
.wp-align[hidden]{display:none}
.wp-align.is-aligned{color:var(--gold-text);background:#FBF6EA;border-color:var(--gold);font-weight:600}

/* ==========================================================================
   COLLAR SECTION RHYTHM

   The collar step asks five separate questions - what colour the band is, what
   finish it carries, what goes on it, the detail of that process, and where the
   mark sits - and they were running together as one long form. Each group now
   opens on the same hairline-and-air treatment the AIO studio uses for a
   section break (configure.css .cfg-sectionbreak: a 1px rule with 26px above
   and 16px below), so a customer can see where one decision ends and the next
   begins without reading the headings to find out.
   Scoped to .wp-band: .wp-band-h2 exists only in the collar panel, and the
   body step's own headings are a different class.
   ========================================================================== */
.wp-band .wp-band-h2{margin-top:26px;padding-top:18px;border-top:1px solid #E7E2D9}
/* the artwork heading follows the etched-sides group, which is already part of
   the same decoration decision, so it does not open a second break */

/* The cross-material caveat sits under the finish note as a secondary line:
   same voice, quieter, so it reads as a footnote rather than as a second
   instruction competing with the one above it. */
.wp-band > .wp-note-sub{margin-top:-2px;font-size:10px;opacity:.85}

/* ---- REVIEW: WHAT TO DO NEXT ----
   Review reads back every choice, so the submission form is below the fold on
   most screens. This is the only thing on the step that tells the customer that
   scrolling is the next move, so it sits directly under the heading and looks
   like an action rather than a note. It hides itself when the submit buttons
   are already on screen. */
.gv-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--gold-tint)}
.gv-next p{flex:1 1 320px;margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
.gv-next p b{display:block;color:var(--navy);font-size:14px}
.gv-next .btn{flex:0 0 auto}
.gv-next[hidden]{display:none}

/* ---- A RESTORED DRAFT ----
   Says what happened and offers the only two things a customer could want:
   carry on, or start again. */
.gv-draft{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--cream)}
.gv-draft p{flex:1 1 280px;margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
.gv-draft p b{color:var(--navy)}
.gv-draft button{flex:0 0 auto}
.gv-draft[hidden]{display:none}

/* ---- CONFIRMATION: THE CARTRIDGE AS SUBMITTED ----
   Now drawn by the shared confirmation component, with its rules in
   assets/css/proxy-confirmation.css (.pxconf-prev and friends), so Glass and
   the five AIO studios show one success screen. */


/* ---- A DECORATION THAT NEEDS ITS ARTWORK ----
   Shown the moment Silk Screen or Laser Etch is chosen with no artwork, and
   emphasised when a Continue or a Review link lands on it. */
.wp-req{margin:0 0 8px;font-size:12.5px;font-weight:600;color:#8C2F25}
.wp-req[hidden]{display:none}
.wp-req.is-blocking{background:#FBEAE8;border:1px solid #E4B6B0;border-radius:4px;padding:7px 9px}
.wp-req:focus{outline:2px solid #C0776C;outline-offset:2px}
/* the application-method line: neutral guidance until something is blocked */
.wp-req.wp-req-next:not(.is-blocking){color:var(--muted);font-weight:500}
.wp-req-next .wp-req-block,.wp-req-next.is-blocking .wp-req-hint{display:none}
.wp-req-next.is-blocking .wp-req-block{display:inline}

/* ---- THE WORKSPACE ----
   While the customer is working through the steps, the product page's other
   sections are out of the layout, not merely out of view: nothing to scroll
   into, nothing for a step change to pass through. The site header and footer
   stay. The mobile "Request Samples" bar leaves with the marketing it belongs
   to; Review & Submit in the header is the call to action here. */
body.gv-studio main > :not(#configure){display:none !important}
body.gv-studio .msticky{display:none !important}
body.gv-studio #configure{min-height:calc(100vh - 64px)}
.gv-exitbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.gv-exitbar[hidden]{display:none}
.gv-exit{font:inherit;font-size:13px;font-weight:600;color:var(--navy);background:none;border:0;padding:4px 0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.gv-exit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gv-exit-note{font-size:11.5px;color:var(--muted)}
body.cfg-submitted .gv-exit-note{display:none}

/* ---- REVIEW: WHAT BLOCKS, AND WHAT IS WORTH A LOOK ----
   Two panels, never one. The blockers come first, red, one line each; the
   advisories follow, amber and quieter, and say they do not stop anything. */
.gv-issues{background:none;border:0;padding:0;color:inherit}
.gv-blockers,.gv-advisories{border-radius:var(--r-sm,6px);padding:12px 14px;margin:0 0 12px}
.gv-blockers{background:#FBEAE8;border:1px solid #E4B6B0;color:#8C2F25}
.gv-advisories{background:#FBF4E4;border:1px solid #E2CE9C;color:#6B4F12;font-size:12.5px}
.gv-blockers h4,.gv-advisories h4{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.gv-blockers ul,.gv-advisories ul{list-style:none;margin:0;padding:0}
.gv-blockers li,.gv-advisories li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 12px;padding:5px 0;border-top:1px solid rgba(140,47,37,.14)}
.gv-advisories li{border-top-color:rgba(122,90,22,.16)}
.gv-blockers li:first-child,.gv-advisories li:first-child{border-top:0}
.gv-blockers li > span{flex:1 1 260px;font-weight:600}
.gv-advisories li > span{flex:1 1 260px}
.gv-adv-sub{margin:0 0 4px;font-size:11.5px;opacity:.85}
.gv-blockers .gv-jump{color:#8C2F25;white-space:nowrap}
.gv-advisories .gv-jump{color:#6B4F12;white-space:nowrap}
/* where a link from Review lands */
.gv-flash{animation:gvflash 1.8s ease-out}
@keyframes gvflash{0%,35%{box-shadow:0 0 0 3px rgba(201,150,46,.55)}100%{box-shadow:0 0 0 3px rgba(201,150,46,0)}}
@media (prefers-reduced-motion: reduce){.gv-flash{animation:none;box-shadow:0 0 0 3px rgba(201,150,46,.55)}}

/* ==========================================================================
   PHASE 1 · GLASS ARTWORK EDITING (Body Artwork and Collar steps)
   Which part is being edited, which artwork is selected, which controls act
   on it, and what a drag on the preview will do. Tokens: --navy, --gold,
   --gold-text, --cream, --line, --muted, --ink. Type floor 12px, sentences
   13px. Radius 4px on controls, 8px on rows and surfaces; the only pills are
   the number discs and the EDITING / CHECK status labels.
   ========================================================================== */

/* ---- NOW EDITING: the physical part this step edits ---- */
.wp-scope{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 14px;background:var(--cream);
  border:1px solid var(--line);border-radius:8px}
.wp-scope-ic{flex:none;width:34px;height:34px;border-radius:4px;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center}
.wp-scope-ic svg{width:22px;height:22px}
.wp-scope-ic .part{fill:var(--navy)}
.wp-scope-ic .rest{fill:none;stroke:#C9BFAE;stroke-width:1.2}
.wp-scope-tx{min-width:0}
.wp-scope-tx small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.wp-scope-tx b{display:block;font-size:14px;font-weight:700;color:var(--navy);line-height:1.35}

/* ---- on the preview: the part's name and the selected artwork's number ---- */
.wp-partlab{position:absolute;z-index:2;transform:translateY(-50%);pointer-events:none;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  color:var(--white);background:var(--navy);border-radius:4px;padding:4px 6px;white-space:nowrap}
.wp-partlab[hidden],.wp-seltag[hidden]{display:none}
.wp-seltag{position:absolute;z-index:2;transform:translate(-2px,calc(-100% - 3px));pointer-events:none;
  min-width:20px;text-align:center;font-size:12px;font-weight:700;line-height:1;color:var(--white);
  background:var(--gold-text);border-radius:4px;padding:4px 6px}

/* ---- ADJUSTING (2) filename, directly above the placement controls ---- */
.wp-adjusting{display:block;width:100%;min-width:0;max-width:100%;margin:2px 0 10px;padding:0 0 10px;border-bottom:1px dashed var(--line);
  font-size:13px;line-height:1.4;color:var(--muted)}
.wp-adjusting[hidden]{display:none}
.wp-adjusting > span{display:flex;align-items:center;gap:8px;min-width:0}
.wp-adjusting b{color:var(--navy);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wp-adjusting .wp-chip-n{background:var(--gold-text);border-color:var(--gold-text);color:var(--white)}
.wp-placegrp .wp-adjusting{margin-top:10px}
/* the heading of the selected artwork's controls: ADJUST ARTWORK N, the file,
   and Replace / Remove for that file. A heading, not a second selection card:
   the list above is the one place that marks what is selected. */
.wp-adj-h{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--navy);line-height:1.3}
.wp-adj-file{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wp-adjusting > span.wp-adj-h,.wp-adjusting > span.wp-adj-file{display:block}
.wp-adjust-body{margin-top:14px;padding:14px 0 10px;border-top:1px solid var(--line)}
.wp-adj-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:8px}
.wp-adj-act .wp-sub{gap:0}
.wp-adj-act .wp-link,.wp-adj-link{font-size:12px;font-weight:600;color:var(--navy);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.wp-adjusting > span:not(.wp-adj-h):not(.wp-adj-file):not(.wp-adj-act){gap:10px}
/* the printing method closes the step, after every adjustment */
.wp-ui > .wp-print{flex-basis:100%;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}

/* ---- THE ARTWORK / MARK LIST: numbered rows ---- */
.wp-arts{flex-basis:100%;width:100%;min-width:0;max-width:100%;display:flex;flex-direction:column;gap:8px;margin:2px 0 0}
.wp-arts[hidden]{display:none}
.wp-arts-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.12em;color:var(--navy)}
.wp-arts-h span{font-weight:500;letter-spacing:0;color:var(--muted);font-family:var(--mono)}
.wp-artlist{display:flex;flex-direction:column;gap:6px;min-width:0}
.wp-chipwrap{display:flex;align-items:stretch;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--white);
  overflow:hidden;transition:border-color .15s ease}
.wp-chipwrap:hover{border-color:#C9BFAE}
.wp-chipwrap.is-on{border-color:var(--gold);background:var(--cream)}
.wp-chip{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:inherit;text-align:left;color:var(--navy);
  background:none;border:0;padding:7px 10px;cursor:pointer;min-height:48px}
.wp-chip-n{flex:none;width:22px;height:22px;border-radius:999px;border:1px solid #C9BFAE;background:var(--white);
  color:var(--muted);font-size:12px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.wp-chipwrap.is-on .wp-chip-n{background:var(--gold-text);border-color:var(--gold-text);color:var(--white)}
.wp-chip-th{flex:none;width:34px;height:34px;object-fit:contain;background:#F1ECE1;border-radius:4px}
.wp-chip-pdf{flex:none;width:34px;height:34px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--muted);background:#F1ECE1;border-radius:4px}
.wp-chip-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.wp-chip-name{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-chip-meta{font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-chipwrap.is-issue .wp-chip-meta{color:#7A5A16}
.wp-chip-st{flex:none;margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--gold-text);background:#FFFDF8;border:1px solid var(--gold);border-radius:999px;padding:4px 8px}
.wp-chip-st.is-check{color:#7A5A16;background:#FBF4E4;border-color:#E2CE9C}
.wp-chip-txt .wp-chip-st{align-self:flex-start;margin:4px 0 0;padding:3px 7px}
.wp-chip-x{flex:none;width:40px;font:inherit;font-size:16px;line-height:1;color:var(--muted);background:none;border:0;
  border-left:1px solid var(--line);cursor:pointer}
.wp-chipwrap.is-on .wp-chip-x{border-left-color:#E2CE9C}
.wp-chip-x:hover{color:#B3403A;background:#FBEAE8}
.wp-chip:focus-visible,.wp-chip-x:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.wp-addart{display:inline-flex;align-self:flex-start;font-size:13px;font-weight:600;color:var(--navy);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold);padding:4px 0}
.wp-addart[hidden]{display:none}
.wp-addart:hover{color:var(--gold-text)}

/* ---- BROWSER-DRIVEN SCROLLS CLEAR THE STICKY NAV (and the pinned stage) ----
   Keyboard focus, scrollIntoView, find-in-page and a #hash align an element to
   the top of the viewport; without an offset that is behind the site nav. The
   heights are measured by glass-flow.js (--gv-nav-cover, --gv-cover); the
   fallbacks are the nav's own height plus breathing room. The studio's own
   jumps scroll by coordinates and are unaffected. */
.pg-glass .glass-rail,.pg-glass .glass-stagewrap{scroll-margin-top:var(--gv-nav-cover,85px)}
.pg-glass .glass-panel,.pg-glass .glass-panel *{scroll-margin-top:var(--gv-cover,85px)}

/* ---- RESPONSIVE (Glass studio only) ----
   One column below 960px, the canonical studio breakpoint (this studio used to
   switch at 900). Below 640px the two artwork steps do not pin the preview
   while the page scrolls, give it more height, and use larger targets. */
@media (max-width:959px){
  .pg-glass .config-grid.glass-grid{grid-template-columns:1fr;gap:var(--s5)}
  .pg-glass .glass-stagewrap{order:1;position:sticky;top:56px;z-index:4;background:var(--white)}
  .pg-glass .glass-panel{order:2}
  .wp-stage{height:520px}
}
@media (max-width:639px){
  .pg-glass .config-grid.glass-grid[data-wp-part] .glass-stagewrap{position:static;z-index:auto}
  .pg-glass .config-grid.glass-grid[data-wp-part] .wp-stage{height:min(64svh,500px);min-height:380px}
  .wp-chip{min-height:52px}
  .wp-chip-x{width:48px}
  .wp-scope{padding:10px}
}

/* ---- BAND SURFACE: Gloss / Matte ----
   Only the selected surface carries its one-line description; an earlier
   process restored from a saved build is shown only while it is selected. */
.wp-surface .cfg-card em{display:none}
.wp-surface .cfg-card.on em{display:block}
.wp-surface .cfg-card[hidden]{display:none}
.wp-surface .cfg-card b small{margin-left:8px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}

/* ---- COMPACT DISCLOSURES: secondary explanation one tap away ----
   Default collapsed. Small, inline, never a card. */
.px-more{display:block;flex-basis:100%;margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.px-more>summary{cursor:pointer;list-style:none;display:inline-block;font-weight:600;color:var(--navy)}
.px-more>summary::-webkit-details-marker{display:none}
.px-more>summary::after{content:" \25BE";color:var(--muted)}
.px-more[open]>summary::after{content:" \25B4"}
.px-more>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.px-more>*:not(summary){margin:6px 0 0;font-size:13px;line-height:1.5}
.px-more[hidden]{display:none}
.wp-eng-out{margin-left:6px;font-family:var(--mono);font-size:12px;color:var(--navy)}
.glass-groupstep .px-more{margin-top:6px}
.wp-fit-short{color:var(--gold-text)}

/* ---- THE WRAP, UNROLLED (Phase 2, Concept B) ----
   Secondary to the cartridge: a quiet card under the stage, the map drawn at
   one true scale in the middle of it. */
.wp-map{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--white);padding:10px 14px 6px}
.wp-map[hidden]{display:none}
.wp-map-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wp-map-h{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--navy)}
.wp-map-dim{font-family:var(--mono);font-size:12px;color:var(--muted)}
.wp-map-cvw{display:flex;justify-content:center;margin-top:4px;min-width:0}
.wp-mapcv{display:block}
/* the plinth stacks the stage and the map; the stage gives back just enough
   height for the whole pair to stay inside the viewport while .build is sticky */
.build .p-plinth.wp-has-map{flex-direction:column;align-items:stretch;justify-content:flex-start}
@media (min-width:960px){
  .wp-has-map .wp-stage{height:clamp(400px,calc(100vh - 352px),700px)}
}
@media (max-width:959px){
  .pg-glass .config-grid.glass-grid{grid-template-columns:minmax(0,1fr)}
  .wp-map,.wp-map-dock{min-width:0;max-width:100%}
  .pg-glass .config-grid.glass-grid[data-wp-part] .glass-stagewrap:has(.wp-has-map){position:static;z-index:auto}
  .wp-has-map .wp-stage{height:min(60svh,520px);min-height:360px}
}
.wp-mapcv{touch-action:pinch-zoom;outline:none;border-radius:4px}
.wp-mapcv:focus-visible{box-shadow:0 0 0 2px var(--gold)}
/* the one line said while dragging: the guide holding the artwork, or its live size or angle */
.wp-editnote{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--white);background:var(--navy);border-radius:4px;padding:4px 8px}
.wp-editnote[hidden]{display:none}

/* ---- PHASE 2: DIRECT EDITING ON THE CARTRIDGE ---- */
/* the turn bar: camera moves only */
/* a vertical column at the stage's right edge, clear of the cartridge at every width */
.wp-turn{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:3;display:inline-flex;flex-direction:column;align-items:stretch;gap:2px;
  padding:3px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:6px}
.wp-turn[hidden]{display:none}
.wp-turn button{font:inherit;font-size:13px;font-weight:600;line-height:1;color:var(--navy);background:none;border:0;border-radius:4px;
  min-height:32px;cursor:pointer}
.wp-turn .wp-turn-i{min-width:34px;font-size:20px;font-weight:500}
.wp-turn .wp-turn-t{padding:0 10px}
.wp-turn button:hover{background:var(--cream)}
.wp-turn button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--gold);background:var(--cream)}
.wp-turn button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* the pointer target over the selected artwork: it keeps a touch drag for editing */
.wp-editzone{position:absolute;z-index:1;touch-action:pinch-zoom;background:transparent}
.wp-editzone[hidden]{display:none}
.wp-stage.wp-turning .wp-canvas,.wp-stage.wp-turning .wp-editzone{cursor:grabbing!important}
.wp-stage.wp-editing .wp-turn{opacity:.35;transition:opacity .15s}
/* Fit / Center / Reset under the selected artwork's heading */
.wp-acts{flex-basis:100%;display:flex;gap:8px;margin:0 0 2px}
.wp-acts[hidden]{display:none}
.wp-act{flex:1;font:inherit;font-size:13px;font-weight:600;color:var(--navy);background:var(--white);border:1px solid var(--navy);
  border-radius:4px;min-height:36px;padding:0 10px;cursor:pointer}
.wp-act:hover{background:var(--cream)}
.wp-act:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Precise values: one row, closed by default, the numbers stated on it */
.wp-precise{flex-basis:100%;border:1px solid var(--line);border-radius:4px;background:var(--white)}
.wp-precise[hidden]{display:none}
.wp-precise>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;padding:0 12px;cursor:pointer}
.wp-precise>summary::-webkit-details-marker{display:none}
.wp-precise-h{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.wp-precise-h::after{content:" \25BE";color:var(--muted)}
.wp-precise[open] .wp-precise-h::after{content:" \25B4"}
.wp-precise-sum{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wp-precise>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wp-precise-body{padding:4px 12px 10px;display:flex;flex-direction:column;gap:6px}
.wp-stage,.wp-canvas{touch-action:pan-y pinch-zoom}
.wp-precise{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.wp-precise-sum{flex:1 1 auto}

/* ---- PHASE 2, PHONES AND TOUCH ---- */
.wp-map-dock{display:flex;flex-direction:column;gap:8px}
.wp-map-dock:empty{display:none}
.wp-sheet-head{display:none}
/* comfortable targets wherever the pointer is a finger */
@media (pointer:coarse){
  .wp-turn button{min-height:44px}
  .wp-turn .wp-turn-i{min-width:44px}
  .wp-act{min-height:44px}
  .wp-precise>summary{min-height:44px}
}
@media (max-width:639px){
  /* the preview, the wrap and its actions share the first screen */
  .pg-glass .config-grid.glass-grid[data-wp-part] .wp-has-map .wp-stage{height:min(52svh,440px);min-height:340px}
  .wp-map{padding:10px 12px 12px}
  .wp-map-dock{margin-top:8px}
  .wp-map-dock .wp-oob{font-size:12px;padding:8px 10px}
  /* the panel that follows is the sheet: a grip, rounded top, lifted */
  .pg-glass .config-grid.glass-grid[data-wp-part] .glass-panel{position:relative;border-radius:14px 14px 0 0;
    box-shadow:0 -8px 24px rgba(20,27,51,.08);padding-top:18px}
  .pg-glass .config-grid.glass-grid[data-wp-part] .glass-panel::before{content:"";position:absolute;left:50%;top:7px;width:36px;height:4px;
    margin-left:-18px;border-radius:999px;background:var(--line)}
  /* Precise values opens as a bottom sheet over the page, the cartridge still in view above it */
  .wp-precise[open]>.wp-precise-body{position:fixed;left:0;right:0;bottom:0;z-index:950;max-height:46svh;overflow:auto;
    background:var(--white);border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(20,27,51,.18);
    padding:6px 16px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .wp-precise[open] .wp-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;
    background:var(--white);padding:12px 0 8px;margin-bottom:2px}
  .wp-sheet-grip{position:absolute;left:50%;top:2px;width:36px;height:4px;margin-left:-18px;border-radius:999px;background:var(--line)}
  .wp-sheet-h{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
  .wp-sheet-done{font:inherit;font-size:13px;font-weight:700;color:var(--white);background:var(--navy);border:0;border-radius:4px;min-height:40px;padding:0 16px;cursor:pointer}
  .wp-sheet-open body{padding-bottom:46svh}
}
/* one line under the map title: what the handles do */
.wp-map-help{margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.wp-acts{align-items:center;gap:14px}
.wp-acts .wp-act{flex:0 0 auto;padding:0 16px}
.wp-act-reset{font-size:12px;color:var(--muted);text-decoration-color:var(--line)}
.wp-act-reset:hover{color:var(--navy)}

/* ---- DUPLICATE ON OPPOSITE SIDE (Laser Etch, per mark) ----
   A plain checkbox under the mark's size and position: it is a property of
   the mark being placed, not another section of the band. */
.wp-dup{display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:13px;color:var(--navy);cursor:pointer}
.wp-dup[hidden]{display:none}
.wp-dup input{width:16px;height:16px;margin:0;accent-color:var(--navy);cursor:pointer}
.wp-dup input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* the mark row's own note that it is duplicated opposite */
.wp-chip-dup{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:var(--gold-text);font-weight:600;letter-spacing:.02em}
/* Review: the band turned to a duplicated mark and to its copy, side by side */
.gv-row.gv-oppviews{align-items:flex-start}
.gv-oppviews dd{display:flex;gap:10px;justify-content:flex-end}
.gv-oppviews figure{margin:0;width:124px;text-align:center}
.gv-oppviews img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.gv-oppviews figcaption{margin-top:4px;font-size:11px;font-weight:500;color:var(--muted)}

/* ---- THERMOPLASTIC: WHICH BAND IS BEING EDITED ----
   A two-part selector at the top of the band panel: the active band is the
   filled one, and each tab carries its band's one-line summary so the other
   band is never out of sight. Only the Thermoplastic studio builds it; nothing
   here reaches Glass. */
.wp-bandsel{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin:0 0 var(--s4);background:var(--white)}
.wp-bandsel button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:10px 12px;
  border:0;background:transparent;color:var(--navy);text-align:left;cursor:pointer;font:inherit}
.wp-bandsel button+button{border-left:1px solid var(--line)}
.wp-bandsel .wp-bandsel-l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.wp-bandsel .wp-bandsel-s{font-size:11.5px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.wp-bandsel button[aria-selected="true"]{background:var(--navy);color:var(--white)}
.wp-bandsel button[aria-selected="true"] .wp-bandsel-s{color:rgba(255,255,255,.78)}
.wp-bandsel button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.wp-bandsel button:not([aria-selected="true"]):hover{background:var(--cream)}
/* a band that is not being edited and is missing its Surface: a quiet red
   edge and dot on its tab, nothing louder (see syncSurfaceErr) */
.wp-bandsel button.is-error{box-shadow:inset 0 -2px 0 #C0776C}
.wp-bandsel button.is-error .wp-bandsel-l::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-radius:50%;background:#B2463A;vertical-align:2px}
/* the band being edited is missing its Surface after a refused Continue */
.wp-surface.is-missing .cfg-card{border-color:#E4B6B0}