/* ============================================================
   Titian · Ring Builder — styles
   Single source of truth. Both ring-builder.html (the standalone
   demo page) and build-jewelry.html link this file; nothing inlines
   a second copy. Scoped under #trb.
   ============================================================ */
/* ============================================================
   Titian · Ring Builder  (DRAFT 3 — matched to the reference renders)
   1 panel (metal + band) · 2 layout · 3 mainstone · 4 flowers

   The preview is laid out in MILLIMETRES. The diamond renders
   calibrate at ~110 px/mm (a 2ct oval measures 7.5 x 9.7 mm), and the
   reference annotations supply the rest: flowers 4.5 / 5.5 mm, melee
   1.2 / 1.8 mm. Everything is drawn at true size against everything else.

   Fill variantId to enable /cart/add.js. Scoped under #trb.
   ============================================================ */
#trb{
  --cream:#F3EDE3; --cream2:#ECE6DB; --paper:#FBF8F3; --ink:#3A2B23; --soft:#6E5238;
  --gold:#8B6A4A; --gold-d:#5A4230; --gold-l:#E5D0A4; --line:#D6C2A8; --muted:#A8967E;
  --disc:#EFE8DB; --disc2:#E6DCCB;
  /* the preview sits on near-black, like the reference renders.
     Point --stage/--stage2 at the cream tones to put it back on paper. */
  /* the same two browns as the site's background gradient, so the ring sits in
     the page's own wood rather than a black box cut out of it */
  --stage:#1F1610; --stage2:#33271E; --stageLine:#3C3025; --onStage:#F2E9DA; --onStageDim:#A8927A;
  font-family:'Jost',sans-serif;color:var(--ink);background:var(--cream);
  line-height:1.6;border-radius:20px;padding:30px 26px 34px;
  max-width:min(1440px, calc(100% - 80px));margin:34px auto;   /* 40px gutter, never edge to edge */
}
#trb *{box-sizing:border-box;margin:0;padding:0}
#trb img,#trb svg{display:block;-webkit-user-drag:none;user-select:none}
#trb [hidden]{display:none!important}

#trb .hd{text-align:center;margin-bottom:18px}
#trb .ey{font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--muted)}
#trb h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:40px;line-height:1.05;color:var(--gold-d);margin:8px 0 4px}
#trb .hd p{font-size:13px;letter-spacing:1px;color:var(--soft)}

#trb .stageWrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:34px;align-items:start;margin-top:22px}
@media(max-width:880px){#trb .stageWrap{grid-template-columns:minmax(0,1fr);gap:26px}}

#trb .preview{background:radial-gradient(ellipse at 50% 40%,var(--stage2),var(--stage) 70%);
  border:1px solid var(--stageLine);border-radius:16px;padding:22px 16px 18px;
  display:flex;flex-direction:column;overflow:hidden;min-height:400px;position:sticky;top:18px}
@media(max-width:880px){#trb .preview{position:static}}
#trb .preview .plabel{text-align:center;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--onStageDim)}
#trb .stageBody{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0 10px}
#trb .stageBody svg{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
#trb .stageBody.pop svg{animation:trbPop .5s cubic-bezier(.34,1.5,.5,1) both}
@keyframes trbPop{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:none}}

#trb .summary{border-top:1px solid var(--stageLine);margin-top:10px;padding-top:14px;text-align:center}
#trb .summary .nm{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--onStage);line-height:1.25}
#trb .summary .pr{font-size:15px;letter-spacing:.5px;color:var(--gold-l);margin-top:4px}
#trb .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
#trb .chip{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#C6B49A;
  background:rgba(255,255,255,.045);border:1px solid var(--stageLine);border-radius:20px;padding:5px 11px}

#trb .picker{display:flex;flex-direction:column;gap:20px}
#trb .steps{display:flex;gap:6px;list-style:none;background:var(--cream2);border:1px solid var(--line);
  border-radius:34px;padding:5px;width:100%}
#trb .steps li{flex:1}
#trb .steps button{width:100%;font-family:inherit;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--soft);background:transparent;border:0;padding:10px 6px;border-radius:28px;cursor:pointer;transition:.2s;white-space:nowrap}
#trb .steps button .n{display:inline-block;font-size:10px;color:var(--muted);margin-right:5px}
#trb .steps button.on{background:#fff;color:var(--gold-d);box-shadow:0 3px 12px rgba(110,82,56,.14)}
#trb .steps button.on .n{color:var(--gold)}
#trb .steps button.done{color:var(--gold-d)}
@media(max-width:560px){#trb .steps button{letter-spacing:.6px;font-size:10px;padding:10px 2px}}
@media(max-width:560px){#trb{padding:24px 14px 28px;border-radius:16px;margin:20px auto;max-width:100%}
  #trb h2{font-size:32px}}

#trb .grp .gh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
#trb .grp .gh .k{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-d)}
#trb .grp .gh .hint{font-size:11px;letter-spacing:1px;color:var(--muted);text-align:right}
#trb .sub{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin:16px 0 9px}
#trb .optRow{display:flex;gap:14px;flex-wrap:wrap}
#trb .optCell{width:96px;text-align:center;cursor:pointer}
#trb .optCell.wide{width:172px}
#trb .optPlate{width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FFFDF9,var(--disc) 62%,var(--disc2));
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:.2s;box-shadow:inset 0 2px 8px rgba(255,255,255,.7)}
#trb .optCell.wide .optPlate{width:172px;height:96px;border-radius:16px}
#trb .optCell.dark .optPlate{background:radial-gradient(ellipse at 50% 45%,var(--stage2),var(--stage) 72%);
  border-color:var(--stageLine);box-shadow:none}
#trb .optCell:hover .optPlate{transform:translateY(-2px);border-color:#B89A6E}
#trb .optCell.sel .optPlate{border-color:var(--gold);box-shadow:0 0 0 3px rgba(139,106,74,.22)}
#trb .optPlate svg{width:92%;height:92%}
#trb .optPlate img{max-width:78%;max-height:78%;width:auto;height:auto;filter:drop-shadow(0 4px 6px rgba(90,66,48,.24))}
#trb .optPlate img.scaled{max-width:none;max-height:none}
#trb .optPlate img.wg{filter:saturate(.06) brightness(1.05) drop-shadow(0 4px 6px rgba(60,60,66,.28))}
#trb .optName{font-size:10.5px;letter-spacing:.4px;color:var(--soft);margin-top:7px;line-height:1.35}
#trb .optCell.sel .optName{color:var(--gold-d)}
#trb .optName b{font-weight:500}

/* all six metals on one row at desktop: a 6-column grid shares whatever width
   the picker column has, instead of fixed-width cells that wrap at ~552px */
#trb .metals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#trb .metalCell{cursor:pointer;text-align:center;min-width:0}
#trb .sw{width:48px;height:48px;border-radius:50%;margin:0 auto;border:1px solid var(--line);transition:.2s;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.6)}
#trb .metalCell:hover .sw{transform:translateY(-2px)}
#trb .metalCell.sel .sw{border-color:var(--gold);box-shadow:0 0 0 3px rgba(139,106,74,.24)}
#trb .metalCell .mn{font-size:10px;letter-spacing:.2px;color:var(--soft);margin-top:6px;
  line-height:1.3;min-height:2.6em}   /* two label lines reserved so swatches stay aligned */
#trb .metalCell.sel .mn{color:var(--gold-d)}
/* must come after the base rule above, or it loses on source order */
@media(max-width:560px){#trb .metals{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* width:fit-content, not max-content: the pill still shrink-wraps its tabs, but its
   min-content contribution stays small so it can never widen the page. max-width:100%
   cannot do this on its own — percentages are ignored during intrinsic sizing. */
#trb .tabs{display:flex;gap:6px;background:var(--cream2);border:1px solid var(--line);border-radius:30px;
  padding:4px;align-self:flex-start;margin-bottom:14px;width:fit-content;max-width:100%;flex-wrap:wrap}
#trb .tabs button{font-family:inherit;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);
  background:transparent;border:0;padding:8px 15px;border-radius:24px;cursor:pointer;transition:.2s}
#trb .tabs button.on{background:#fff;color:var(--gold-d);box-shadow:0 3px 10px rgba(110,82,56,.12)}
#trb .tabs button .ct{font-size:9px;color:var(--muted);margin-left:5px}
/* the per-position thumbnail is a phone-only affordance */
#trb .tabs .pt-thumb{display:none}

/* ---- phones: the flower step puts the positions in a rail down the left ----
   A/B/C/D stack beside the flower grid instead of sitting in a pill above it,
   each showing the flower it currently holds, so all four picks are visible at
   once. Scoped to .grp.flowers inside this query only: the desktop layout is
   untouched. */
@media(max-width:560px){
  #trb .grp.flowers{display:grid;grid-template-columns:76px minmax(0,1fr);
    column-gap:10px;align-items:start}
  #trb .grp.flowers .gh{grid-column:1/-1}

  #trb .grp.flowers .tabs{grid-column:1;display:flex;flex-direction:column;gap:7px;
    background:none;border:0;border-radius:0;padding:0;margin:0;width:100%;align-self:stretch}
  #trb .grp.flowers .tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;
    width:100%;padding:8px 4px 9px;border-radius:13px;background:var(--paper);
    border:1px solid #E2D6C4;font-size:13px;letter-spacing:.6px;line-height:1;color:var(--gold)}
  #trb .grp.flowers .tabs button.on{background:#fff;border-color:var(--gold);color:var(--gold-d);
    box-shadow:0 2px 10px rgba(110,82,56,.16)}
  #trb .grp.flowers .tabs button .ct{display:block;margin:0;font-size:8px;letter-spacing:.5px;
    line-height:1.25;text-align:center;text-transform:uppercase;color:var(--soft)}
  #trb .grp.flowers .tabs .pt-thumb{display:flex;width:30px;height:30px;border-radius:50%;
    align-items:center;justify-content:center;overflow:hidden;border:1px solid #E2D6C4;
    background:radial-gradient(circle at 38% 32%,#FFFDF9,var(--disc) 70%)}
  #trb .grp.flowers .tabs button.on .pt-thumb{border-color:var(--gold)}
  #trb .grp.flowers .tabs .pt-thumb img{max-width:76%;max-height:76%;width:auto;height:auto}
  #trb .grp.flowers .tabs .pt-thumb img.wg{filter:saturate(.06) brightness(1.05)}
  #trb .grp.flowers .tabs .pt-thumb svg{width:68%;height:68%}

  /* auto-fill, not a fixed 3: keeps 3 columns at 375-430px but drops to 2 on a
     320px phone instead of 62px cells, and fills the width on a wide one */
  #trb .grp.flowers .optRow{grid-column:2;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
  #trb .grp.flowers .optCell{width:auto}
  #trb .grp.flowers .optPlate{width:100%;height:auto;aspect-ratio:1/1}
  #trb .grp.flowers .optName{font-size:10px}
}

#trb .stepNav{display:flex;gap:10px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:16px}
#trb .link{font-family:inherit;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);
  background:none;border:0;cursor:pointer;padding:6px 2px}
#trb .link:hover{color:var(--gold-d)}
#trb .link[disabled]{opacity:.3;cursor:default}

#trb .actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}
#trb .sizeWrap{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--soft)}
#trb select{font-family:inherit;font-size:12px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:12px;cursor:pointer}
#trb .btn{font-family:inherit;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#fff;background:var(--gold);
  padding:14px 30px;border-radius:3px;cursor:pointer;border:0;transition:.2s}
#trb .btn:hover{background:var(--gold-d)}
#trb .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--gold)}
#trb .btn.ghost:hover{background:var(--gold);color:#fff}
#trb .note{text-align:center;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:14px;min-height:16px}