/* Signature Styles — Studio v2 + Owner Portal styles (namespaced; nothing generic) */

/* ============ studio: layers on stage ============ */
.layer-host{ position:absolute; inset:0; }
.ly{ position:absolute; cursor:grab; touch-action:none; user-select:none; }
.ly:active{ cursor:grabbing; }
.ly img{ width:100%; display:block; pointer-events:none; }
.ly-shape svg{ width:100%; height:100%; display:block; pointer-events:none; }
.ly-text{ pointer-events:auto; }
.ly.sel{ outline:1.5px dashed rgba(233,180,76,.85); outline-offset:3px; }
.ly.locked{ cursor:not-allowed; opacity:.92; }
.ly .h{ position:absolute; width:22px; height:22px; border-radius:50%; background:#171317; border:1.5px solid var(--gold, #e9b44c);
  color:var(--gold, #e9b44c); font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; }
.ly .h-rot{ top:-30px; left:50%; transform:translateX(-50%); cursor:crosshair; }
.ly .h-sc{ right:-13px; bottom:-13px; cursor:nwse-resize; }
.ly .h-del{ left:-13px; top:-13px; color:#e8404a; border-color:#e8404a; }
.stage.snap-x .print-zone::before,
.stage.guides .print-zone::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(233,180,76,.5); }
.stage.snap-y .print-zone::after,
.stage.guides .print-zone::after{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:rgba(233,180,76,.5); }
.stage .mock{ transition:transform .25s ease; }

/* stage bar */
.stage-bar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tool-sep{ width:1px; height:18px; background:var(--line-strong, rgba(255,255,255,.16)); margin:0 2px; }
.zoom-lbl{ font-family:var(--f-mono); font-size:10px; color:var(--fg-3); min-width:36px; text-align:center; }
.tool.warn{ color:#e8747c; }
.tool:disabled{ opacity:.35; cursor:default; }
.stage-hint{ margin-top:10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--fg-4); text-transform:uppercase; }
.dpi-warn{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:10px 13px; border:1px solid rgba(233,180,76,.4);
  border-radius:7px; background:rgba(233,180,76,.07); color:#eec379; font-size:12.5px; line-height:1.45; }
.studio-err{ padding:16px 20px; border:1px solid rgba(232,64,74,.4); background:rgba(232,64,74,.06); border-radius:8px; color:var(--fg-2); margin-bottom:22px; }
.studio-err a{ color:var(--gold); }

/* layers panel */
.layers-box{ margin-top:18px; border:1px solid var(--line); border-radius:8px; background:var(--bg-1, #131016); padding:12px 14px; }
.lb-head{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); margin-bottom:8px; }
.lb-sub{ color:var(--fg-4); margin-left:6px; }
.lb-empty{ font-size:12px; color:var(--fg-4); margin:2px 0 4px; }
.lrow{ display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:6px; cursor:pointer; }
.lrow:hover{ background:rgba(255,255,255,.04); }
.lrow.sel{ background:rgba(233,180,76,.08); outline:1px solid rgba(233,180,76,.25); }
.lr-th{ width:30px; height:30px; border-radius:5px; background:#221e24; object-fit:contain; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.lr-th svg{ width:20px; height:20px; }
.lr-t{ font-family:Anton, sans-serif; font-size:15px; }
.lr-name{ flex:1; font-size:12.5px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lr-acts{ display:flex; gap:2px; }
.lr-acts button{ background:none; border:none; color:var(--fg-3); font-size:11px; padding:4px 5px; cursor:pointer; border-radius:4px; }
.lr-acts button:hover{ color:var(--gold); background:rgba(255,255,255,.05); }

/* add buttons + shapes */
.add-row{ display:flex; gap:8px; margin-top:10px; }
.add-btn{ display:inline-flex; gap:7px; align-items:center; padding:9px 14px; border-radius:6px; border:1px solid var(--line-strong);
  background:var(--bg-2, #17141a); color:var(--fg-2); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.add-btn:hover{ border-color:var(--gold); color:var(--gold); }
.shape-tray{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin-top:8px; }
/* Compact tiles: a 6x2 toolbar block, not a wall of giant icons. Height is fixed
   (not aspect-ratio) so a wide panel can't inflate them to 78px each. The icon gets an
   EXPLICIT px size — Safari does not resolve an svg's height:100% inside a fixed-height
   button, blowing each icon up to a full-width square that overflowed the tile and
   painted over the "I need design help" text. */
.shp{ height:46px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2, #17141a); color:var(--fg-3); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.shp:hover{ color:var(--gold); border-color:var(--gold); }
.shp svg{ width:30px; height:30px; display:block; flex:none; }

/* inspector */
.ins-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.font-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.fpick{ padding:8px 4px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2,#17141a); color:var(--fg-2); font-size:13px; cursor:pointer; overflow:hidden; white-space:nowrap; }
.fpick.sel{ border-color:var(--gold); color:var(--gold); }
input[type=color]{ width:100%; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2,#17141a); padding:3px; cursor:pointer; }
#inspector textarea{ min-height:52px; }
/* segmented + numeric controls (align, size, flip, angle) */
.seg-btns{ display:flex; gap:4px; }
.seg-btns button{ flex:1; height:34px; min-width:34px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2,#17141a); color:var(--fg-2); font-size:15px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s, background .15s; }
.seg-btns button:hover{ border-color:var(--line-strong,#333); color:var(--fg); }
.seg-btns button.on{ border-color:var(--gold); color:var(--gold); background:rgba(233,180,76,.1); }
.seg-btns button:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.seg-btns .sz-val{ flex:1; display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-mono,monospace); font-size:12px; color:var(--fg-2); border:1px solid var(--line); border-radius:6px; }
.num-ctl{ display:flex; gap:4px; }
.num-ctl input[type=number]{ flex:1; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2,#17141a); color:var(--fg); padding:0 8px; font-size:13px; }
.num-ctl button{ width:34px; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--bg-2,#17141a); color:var(--fg-2); cursor:pointer; }
.num-ctl button:hover{ border-color:var(--gold); color:var(--gold); }

/* on-hand design library (owner-managed) */
.lib-tray .lib-chip img{ width:100%; height:44px; object-fit:contain; }
.lib-tray .lib-chip .lib-ph{ height:44px; display:flex; align-items:center; justify-content:center; color:var(--fg-4); }
.lib-tray .lib-chip:disabled{ opacity:.4; cursor:default; }
/* keep the "I need design help" toggle visually separate from the shape tray above it */
.help-toggle{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); align-items:center; }
.help-toggle .tick{ margin-top:0; }
.help-toggle .ht-copy b{ font-size:13.5px; }
.help-toggle .ht-copy span{ font-size:11.5px; line-height:1.35; }
/* Add Text sits inline with the graphics label — one row instead of two stacked blocks */
.build-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.build-row .tpl-lbl{ margin-bottom:0; }
.build-row .add-btn{ margin:0; flex:none; }

/* quick-start templates */
.tpl-wrap{ margin-bottom:10px; }
.tpl-lbl{ font-size:11.5px; color:var(--fg-4); margin-bottom:6px; }
.tpl-tray{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
/* Fixed short tile instead of aspect-ratio:1 — at ~500px panel width the square
   chips ballooned to 146px each and the 6 of them ate 298px of the step. */
.tpl-chip{ height:84px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2,#17141a); color:var(--fg-3); cursor:pointer; padding:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:border-color .15s, color .15s, transform .12s; overflow:hidden; }
.tpl-chip:hover{ border-color:var(--gold); color:var(--fg); transform:translateY(-1px); }
.tpl-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.tpl-chip svg{ width:100%; height:30px; }
.tpl-chip .tpl-nm{ font-family:var(--f-mono,monospace); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; text-align:center; line-height:1.1; }

/* placement chips */
.pc-n{ display:inline-flex; min-width:15px; height:15px; align-items:center; justify-content:center; border-radius:8px; background:var(--gold); color:#171007; font-size:9.5px; margin-left:5px; }
.place-hint{ margin-top:8px; font-size:11.5px; color:var(--fg-4); }

/* size grid stock states — the tag lives inline in the cell's top row now, never over the stepper */
.size-cell .st{ font-family:var(--f-mono); font-size:8px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st.in{ color:#69b47e; } .st.low{ color:#eec379; } .st.out{ color:#e8747c; } .st.mto{ color:#a99ec9; }
.size-cell.blocked{ opacity:.5; }
.size-cell.blocked .stepper button{ cursor:not-allowed; }
.mto-note{ margin-top:10px; font-size:12px; color:#a99ec9; }

/* summary extras */
.sum-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.ready-chip{ display:inline-flex; gap:6px; align-items:center; padding:6px 11px; border-radius:20px; border:1px solid rgba(105,180,126,.4);
  background:rgba(105,180,126,.08); color:#8fd0a3; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.ready-chip.mto{ border-color:rgba(169,158,201,.4); background:rgba(169,158,201,.08); color:#b9aede; }
.break-note{ font-family:var(--f-mono); font-size:10px; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; }
#goReview.pulse{ animation:ssPulse 1.6s ease 2; }
@keyframes ssPulse{ 0%,100%{ box-shadow:none; } 50%{ box-shadow:0 0 0 4px rgba(233,180,76,.25); } }

@media (max-width: 760px){
  .shape-tray{ grid-template-columns:repeat(6, 1fr); }
  .shp{ height:48px; }                      /* keep the tap target comfortable on phones */
  .font-grid{ grid-template-columns:repeat(2, 1fr); }
  .ly .h{ width:28px; height:28px; }
  /* label above, button below — side-by-side gets too tight under ~420px */
  .build-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .build-row .add-btn{ justify-content:center; }
}

/* ============ ORDER PAGE: promo + estimate ============ */
.promo-row{ display:flex; gap:8px; }
.promo-row input{ flex:1; text-transform:uppercase; }
.promo-row button{ padding:0 16px; border-radius:6px; border:1px solid var(--line-strong); background:var(--bg-2,#17141a);
  color:var(--fg-2); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.promo-row button:hover{ border-color:var(--gold); color:var(--gold); }
.promo-msg{ margin-top:7px; font-size:12px; }
.promo-msg.ok{ color:#8fd0a3; } .promo-msg.bad{ color:#e8747c; }
.est-box{ margin:14px 0; padding:12px 14px; border:1px solid rgba(105,180,126,.35); border-radius:8px; background:rgba(105,180,126,.06);
  font-size:13px; color:var(--fg-2); display:flex; gap:10px; align-items:flex-start; }
.est-box.mto{ border-color:rgba(169,158,201,.35); background:rgba(169,158,201,.06); }
.est-box svg{ flex:none; margin-top:1px; color:#8fd0a3; }
.est-box.mto svg{ color:#b9aede; }
.est-box b{ color:var(--fg); }
.needby-warn{ margin-top:8px; padding:10px 13px; border:1px solid rgba(233,180,76,.4); border-radius:7px; background:rgba(233,180,76,.07); color:#eec379; font-size:12.5px; }
.sum-row.disc span, .sum-row.disc b{ color:#8fd0a3; }