/* ==========================================================================
   PROXY DESIGN STUDIO - SHARED COMPONENTS

   WHAT THIS IS
   The option card, colour swatch, field and action-row components that the DUO
   (AIO) Design Studio defines in configure/configure.css, lifted out so the
   Glass Design Studio uses the SAME rules rather than a second set of values
   that drift. Every declaration below is copied from configure/configure.css
   except where a comment says otherwise, and each exception names its reason.

   WHAT IT IS NOT
   configure/configure.css has NOT been repointed at this file. DUO is a
   shipped, approved surface and is not in the scope of this pass, so the risk
   of a shared-adoption regression there buys nothing. The two files are
   deliberately identical for now; if DUO QA later proves shared adoption safe,
   the DUO block can be deleted and this file linked instead, and the diff at
   that point is exactly the DIVERGENCES section below.

   WHO LOADS IT
   cartridges/glass.html only. Nothing else links it, and no rule here is
   scoped to a page, so linking it from a second page is a deliberate act.

   VARIABLES
   --gold, --navy, --line, --muted, --ink, --font, --mono all come from
   styles.css :root, which both studios already load. configure.css declares no
   :root of its own, so these components resolve identically in both places.
   ========================================================================== */

/* ---------- option cards (configure.css: "option cards") ---------- */
.cfg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0 4px}
.cfg-cardgroup .cfg-card{margin:0}
.cfg-cardgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.cfg-cardgroup .cfg-optlabel{grid-column:1/-1;margin:6px 0 0}
.cfg-card{position:relative;display:block;cursor:pointer;padding:13px 15px;
  border:1px solid #E2DED6;border-radius:10px;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.cfg-card:hover{border-color:#C9BFAE}
.cfg-card input{position:absolute;opacity:0;pointer-events:none}
.cfg-cardbody{display:block}
.cfg-cardbody b{display:block;font-weight:600;font-size:14px;color:var(--navy);letter-spacing:.01em}
.cfg-cardbody em{display:block;font-style:normal;font-size:12.5px;line-height:1.35;
  color:#6B7080;margin-top:3px}
.cfg-card:has(input:checked){border-color:var(--gold);background:#FFFDF8;
  box-shadow:0 0 0 1px var(--gold) inset}
.cfg-card:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* ---------- colour swatches (configure.css: panel) ---------- */
.cfg-swatches{display:grid;gap:10px;margin-bottom:14px}
.cfg-sw{border:1px solid var(--line);border-radius:6px;padding:8px 6px;background:#fff;cursor:pointer;text-align:center}
.cfg-sw .dot{width:26px;height:26px;border-radius:50%;margin:0 auto 6px;border:1px solid rgba(0,0,0,.08)}
.cfg-sw span{font-size:10px;color:var(--ink);display:block}
.cfg-sw.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ---------- fields (configure.css: panel) ---------- */
.cfg-fld{margin:12px 0}
.cfg-fld label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:5px}
.cfg-fld label output{font-family:var(--mono);color:var(--navy)}
.cfg-fld input[type=range]{width:100%;accent-color:var(--gold)}
.cfg-fld input[type=text],.cfg-fld input[type=email],.cfg-fld textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-size:13px;font-family:var(--font)}
.cfg-fld textarea{min-height:74px;resize:vertical}

/* ---------- action row (configure.css: panel) ---------- */
.cfg-actions{display:flex;gap:10px;margin-top:20px}
.cfg-actions .btn{flex:1;justify-content:center}

/* ==========================================================================
   DIVERGENCES FROM configure/configure.css
   Three, each one a fix for a defect the DUO markup does not expose. Anything
   not listed here is byte-identical to the DUO rule above it.
   ========================================================================== */

/* 1. TRACK SIZING. DUO writes repeat(4,1fr). A 1fr track takes its MINIMUM
      from its content, so the widest label in the row sets the width of its own
      column and the four cards come out unequal - which is exactly what the
      Glass band selector did while its first card read "Stock Silver". The
      label has since been shortened, but shortening a label is not a fix: the
      next long one would do it again. minmax(0,1fr) floors the track at zero so
      the four columns are equal whatever the labels say, and a label too long
      for its card wraps inside the card instead of widening it. DUO renders
      identically under this rule; its labels are all short. */
.cfg-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 2. EQUAL HEIGHT. A grid row already stretches its items, but .cfg-sw is a
      <button>, and a button does not lay its own content out from the top
      unless it is told to. In DUO every swatch carries a one-word label, so the
      difference never shows; a two-line label made one Glass card taller and
      left the others with their dots floating mid-card. Declaring the button a
      flex column puts every dot on the same baseline and every label under it,
      whatever the label length. */
.cfg-sw{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%}
.cfg-sw .dot{flex:none}
/* ...and EQUAL ROWS, which is the other half of the same problem. Stretching
   makes every card in a ROW the same height; it says nothing about two rows.
   Six band colours in a four-column grid is two rows, so a label that wraps in
   the first row - 'Unfinished Metal' does - left the second row visibly
   shorter. Uniform auto rows size every row to the tallest card in the
   control, which is what the grid looked like it was already doing. */
.cfg-swatches{grid-auto-rows:1fr}

/* 3. SELECTED / DISABLED / HIDDEN STATES. DUO marks selection with .on. The
      Glass controls were written against .sel and are driven by JavaScript that
      several other pages share, so both class names select the same treatment
      rather than one module being rewritten to suit the other. Disabled and
      hidden have no DUO equivalent because DUO never turns a swatch off; Glass
      does - Ceramic has no translucent option - and that state has to be
      legible rather than invisible. */
.cfg-sw.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.cfg-sw:disabled{opacity:.4;cursor:not-allowed}
.cfg-sw[hidden]{display:none}

/* 4. DISABLED AND HIDDEN OPTION CARDS. DUO never turns an option card off, so
      it has no rule for it. Glass does: a mouthpiece that does not offer a fit
      disables that fit, and a control that only applies to one decoration is
      removed rather than left standing. Without these two rules a disabled card
      looks exactly like an available one and a [hidden] card, which is a
      <label> and therefore display:block by author rule, stays on screen. */
.cfg-card:has(input:disabled){opacity:.42;cursor:not-allowed}
.cfg-card:has(input:disabled):hover{border-color:#E2DED6}
.cfg-card[hidden]{display:none}
.cfg-cards[hidden],.cfg-cardgroup[hidden]{display:none}

/* ---------- responsive (configure.css @media max-width:640px) ----------
   DUO reserves a 44px touch target on the controls a thumb uses and gives the
   range input a taller hit area. Both are adopted at the same values. The
   two-column swatch fallback below 420px is a Glass rule: four 26px dots and
   their labels do not fit a 320px panel, and DUO's swatch row is narrower
   because it sits in a dedicated route rather than inside a product page. */
@media (max-width:640px){
  .cfg-card{min-height:44px}
  .cfg-fld input[type=range]{height:34px}
  .cfg-fld input[type=text],.cfg-fld input[type=email]{min-height:44px}
}
@media (max-width:420px){
  .cfg-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   SUBMISSION CONFIRMATION

   PORTED FROM THE AIO DESIGN STUDIO, not reinvented. configure/configure.css
   owns these rules for the DUO/ECO studio and this is the same component:
   .cfg-confirm, .cfg-confirm-inner, .cfg-confirm-tick, .cfg-refbox,
   .cfg-reflabel, .cfg-refrow, .cfg-ref, .cfg-copybtn, and the
   body.cfg-submitted rule that retires the setup instructions. The class names
   are AIO's so the two studios cannot drift into two different success states,
   and the values are copied rather than re-derived.

   glass.html does not load configure.css - that file is the AIO studio's own
   sheet and carries its whole configurator - so the component is copied here,
   which is the same thing the swatch and card rules above already do.

   WHY .cfg-confirm[hidden] CARRIES !important: it is AIO's own comment and
   AIO's own bug. An author display rule beats the UA [hidden] rule, and a
   confirmation screen forced visible over a live configurator is the worst
   version of that failure.
   ========================================================================== */
.cfg-confirm{padding:44px 8px;text-align:center}
.cfg-confirm[hidden]{display:none !important}
.cfg-confirm-inner{max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.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}
.cfg-confirm h2{font-size:24px;line-height:1.28;margin:0 0 10px;color:var(--navy)}
.cfg-confirm p{color:var(--muted);font-size:14px;max-width:420px;margin:0 auto}
.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%}
.cfg-reflabel{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;text-align:center}
.cfg-refrow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cfg-refrow .cfg-ref{font-family:var(--mono);font-size:19px;font-weight:700;
  color:var(--navy);letter-spacing:.06em}
.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}
.cfg-copybtn:hover{border-color:var(--navy)}
.cfg-copybtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cfg-copybtn.done{background:var(--navy);border-color:var(--navy);color:#fff}
/* THE BUILD SUMMARY. AIO's confirmation carries no summary because its review
   sits on the same page above it; the Glass flow replaces the whole studio, so
   the customer would otherwise be left with a reference and nothing saying what
   it refers to. Same component language, same centred column. */
.cfg-confsum{margin:22px auto 0;padding:0;width:100%;max-width:440px;text-align:left;
  border-top:1px solid var(--line)}
.cfg-confsum div{display:flex;gap:14px;justify-content:space-between;
  padding:8px 2px;border-bottom:1px solid var(--line)}
.cfg-confsum dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  flex:0 0 38%}
.cfg-confsum dd{margin:0;font-size:13px;color:var(--navy);text-align:right;flex:1 1 auto;
  word-break:break-word}
.cfg-confnote{margin:18px auto 0;font-size:12px;color:var(--muted);max-width:420px}
/* the setup instructions are done with; the hero heading stays, its how-to
   paragraph does not, so the confirmation is not a footnote under instructions
   the customer has finished with. AIO's own rule, and its own comment. */
body.cfg-submitted .intro,
body.cfg-submitted .cfg-rail,
body.cfg-submitted .cfg-designer-panel{display:none}
@media(max-width:640px){
  .cfg-confirm{padding:32px 8px}
  .cfg-confirm h2{font-size:21px}
  .cfg-refbox{display:block;min-width:0;width:100%}
  .cfg-refrow .cfg-ref{font-size:17px}
  .cfg-copybtn{flex:0 0 auto}
  .cfg-confsum div{flex-direction:column;gap:2px}
  .cfg-confsum dt{flex:0 0 auto}
  .cfg-confsum dd{text-align:left}
}