/* ==========================================================================
   THE PROXY SUBMISSION CONFIRMATION, one component for every Design Studio.

   Glass and the five AIO studios (ECO, ECO PRO, DUO, NOVA, COMBO) show the
   same success screen: tick, heading, one supporting sentence, the reference
   card with Copy, the configured device as submitted with its "Visual
   reference only" line, the build summary, and a closing note. The markup is
   the AIO component (.cfg-confirm and friends) and the behaviour lives in
   assets/js/proxy-confirmation.js; this file is the one set of rules both use.

   Every rule is scoped to .pxconf, the class the script puts on the
   confirmation root, and this sheet loads after each page's own, so a studio's
   older copy of these rules (configure/configure.css, design-studio.css) can
   no longer make one studio's confirmation differ from another's.
   ========================================================================== */
.cfg-confirm[hidden]{display:none !important}

/* THE SHELL AROUND IT. Every studio's confirmation sits directly in its studio
   shell (.cfg-wrap) and fills it, so its width is the shell's width minus the
   shell's side gutters - and those differed. Glass steps its gutter down on
   smaller screens (24px, 18px from 900px, 14px from 600px); the AIO studios
   kept 24px at every size, so on a 390px phone their confirmation column was
   20px narrower than Glass's. Once a build is submitted, the shell - on every
   studio - uses the one Design Studio gutter scale, so the same component
   gets the same column: identical width and side spacing on a phone,
   unchanged on a desktop (24px everywhere, as before). Scoped to the
   submitted state so no configurator step moves. */
:root{--pxconf-shell-gutter:24px}
@media(max-width:900px){:root{--pxconf-shell-gutter:18px}}
@media(max-width:600px){:root{--pxconf-shell-gutter:14px}}
body.cfg-submitted .cfg-wrap{padding-left:var(--pxconf-shell-gutter);padding-right:var(--pxconf-shell-gutter)}
.pxconf.cfg-confirm{padding:44px 8px;text-align:center}
.pxconf .cfg-confirm-inner{max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.pxconf .cfg-confirm-tick{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(30,39,73,.07);color:var(--navy);margin:0 auto 16px}
.pxconf h2{font-size:24px;line-height:1.28;margin:0 0 10px;color:var(--navy)}
/* the supporting sentence under the heading (the script marks it .pxconf-lede) */
.pxconf .pxconf-lede{color:var(--muted);font-size:14px;max-width:420px;margin:0 auto}

/* the reference card: sized to the content, not the column */
.pxconf .cfg-refbox{margin:26px auto 0;padding:14px 18px 16px;border:1px solid var(--line);
  border-radius:10px;background:#fff;display:inline-block;min-width:260px;max-width:100%;box-sizing:border-box}
.pxconf .cfg-reflabel{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;text-align:center}
.pxconf .cfg-refrow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pxconf .cfg-refrow .cfg-ref{font-family:var(--mono);font-size:19px;font-weight:700;
  color:var(--navy);letter-spacing:.06em}
.pxconf .cfg-copybtn{padding:7px 14px;border:1px solid var(--line);border-radius:7px;background:#fff;
  cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;color:var(--navy);
  transition:background-color .15s,border-color .15s,color .15s}
.pxconf .cfg-copybtn:hover{border-color:var(--navy)}
.pxconf .cfg-copybtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pxconf .cfg-copybtn.done{background:var(--navy);border-color:var(--navy);color:#fff}

/* the configured device as submitted: framed like the stage it came from and
   kept small, because it is a reference; the number above it and the summary
   below it are what the customer acts on */
.pxconf .pxconf-prev{margin:22px auto 0;width:100%;max-width:440px}
.pxconf .pxconf-prev[hidden]{display:none}
.pxconf .pxconf-views{display:flex;justify-content:center;gap:14px}
.pxconf .pxconf-view{flex:0 1 150px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pxconf .pxconf-view img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:10px}
.pxconf .pxconf-view span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pxconf .pxconf-prev figcaption{margin:10px auto 0;font-size:11.5px;line-height:1.5;color:var(--muted);max-width:360px}

/* what the reference refers to */
.pxconf .cfg-confsum{margin:22px auto 0;padding:0;width:100%;max-width:440px;text-align:left;
  border-top:1px solid var(--line)}
.pxconf .cfg-confsum div{display:flex;gap:14px;justify-content:space-between;
  padding:8px 2px;border-bottom:1px solid var(--line)}
.pxconf .cfg-confsum dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  flex:0 0 38%;margin:0}
.pxconf .cfg-confsum dd{margin:0;font-size:13px;color:var(--navy);text-align:right;flex:1 1 auto;
  word-break:break-word}
/* The closing note. On Glass this used to lose to the generic ".cfg-confirm p"
   rule (a more specific selector), so it rendered as a second 14px lede pressed
   against the last summary divider with no space above it. It now gets the
   spacing and size it was written with, on every studio. */
.pxconf .cfg-confnote{margin:18px auto 0;font-size:12px;color:var(--muted);max-width:420px}

@media(max-width:640px){
  .pxconf.cfg-confirm{padding:32px 8px}
  .pxconf h2{font-size:21px}
  .pxconf .cfg-refbox{display:block;min-width:0;width:100%}
  .pxconf .cfg-refrow .cfg-ref{font-size:17px}
  .pxconf .cfg-copybtn{flex:0 0 auto}
  .pxconf .pxconf-view{flex-basis:130px}
  .pxconf .pxconf-view img{max-height:280px}
  .pxconf .cfg-confsum div{flex-direction:column;gap:2px}
  .pxconf .cfg-confsum dt{flex:0 0 auto}
  .pxconf .cfg-confsum dd{text-align:left}
}

/* ---- THE GROUPED SUMMARY CARD (Glass) ----
   The reference and the configured cartridge are one submitted configuration,
   so where a page wraps them in [data-pxconf-card] they are one object: a
   single quiet frame, the reference on top, the product under it and larger,
   the caption inside. No shadow, no gradient, no added copy. Every rule is
   under .pxconf-card, so a studio without the wrapper (the AIO studios today)
   renders exactly as before. */
.pxconf .pxconf-card{margin:22px auto 0;width:100%;max-width:440px;box-sizing:border-box;
  padding:24px 26px 20px;border:1px solid var(--line);border-radius:8px;background:#fff;
  display:flex;flex-direction:column;align-items:center}
/* the reference loses its own frame: the card is the frame now */
.pxconf .pxconf-card .cfg-refbox{margin:0;padding:0;border:0;border-radius:0;background:none;
  display:block;min-width:0;width:100%}
.pxconf .pxconf-card .cfg-refrow .cfg-ref{font-size:21px}
/* one hairline between the reference and the product it refers to */
.pxconf .pxconf-card .pxconf-prev{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--line);max-width:none}
.pxconf .pxconf-card .pxconf-views{gap:18px}
.pxconf .pxconf-card .pxconf-view{flex:0 1 190px}
/* larger than the old 150px thumbnail, bounded by the window's height so a
   phone does not scroll through a tall cartridge to reach the summary */
.pxconf .pxconf-card .pxconf-view img{width:auto;max-width:100%;height:clamp(250px,46vh,400px);
  max-height:none;border:0;border-radius:0;background:transparent}
.pxconf .pxconf-card .pxconf-prev figcaption{margin-top:12px}
/* the summary follows the card at the card's own width */
.pxconf .pxconf-card + .cfg-confsum{margin-top:24px}
@media(max-width:600px){
  .pxconf .pxconf-card{padding:20px 16px 16px}
  .pxconf .pxconf-card .cfg-refrow .cfg-ref{font-size:19px}
  .pxconf .pxconf-card .pxconf-view img{height:clamp(230px,40vh,330px)}
}