/* Star Map Builder — Phase 1.4 UI.
   Layout: preview 60% (sticky) left, controls 40% right; single-col on mobile.
   The poster preview is a cqw-scaled replica of the 3490x4961 print layout,
   so every position/size is (px / 3490 * 100)cqw and matches the compositor. */

.sm-app{
  --bg:#0a0b11; --panel:#14151f; --panel-2:#1b1d29; --line:rgba(255,255,255,.09);
  --ink:#ececf3; --muted:#9a9ab2; --accent:#e8dcc4; --accent-ink:#1a1a12;
  --focus:#6f7bd6; --danger:#e06a6a; --radius:12px;
  box-sizing:border-box; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased;
}
.sm-app *,.sm-app *::before,.sm-app *::after{box-sizing:border-box;}

.sm-wrap{max-width:1360px; margin:0 auto; padding:28px 24px 80px;
  display:grid; grid-template-columns:auto minmax(380px,1fr); gap:40px; align-items:start;}

/* ---------- preview column ---------- */
.sm-preview-col{position:sticky; top:24px;}
.sm-poster-shell{position:relative; background:linear-gradient(180deg,#111 0%,#0c0c12 100%);
  border:1px solid var(--line); border-radius:16px; padding:28px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  width:fit-content; max-width:100%; margin-inline:auto;}
.sm-posterview{margin-inline:auto; border-radius:4px;}
/* zoom button, top-left of the preview */
.sm-zoom{position:absolute; top:16px; left:16px; z-index:8; width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; font-weight:700;
  color:#fff; background:rgba(18,19,27,.72); border:1px solid var(--line); backdrop-filter:blur(6px);}
.sm-zoom:hover{border-color:var(--focus);}
.sm-zoom.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
/* size the poster to fill the viewport height (bigger), capped at 46vw so it never
   crowds the controls; 3490/4961 = 0.7035 → width derived from the target height */
.sm-poster{position:relative; aspect-ratio:3490/4961;
  width:min(calc((100vh - 96px) * 0.7035), 46vw); margin-inline:auto;
  container-type:inline-size; overflow:hidden; border-radius:4px;
  background:#000 center/cover no-repeat; box-shadow:0 8px 40px rgba(0,0,0,.5);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
/* preview-only watermark — left & right edge strips only; paid file is rendered clean server-side */
.sm-watermark{position:absolute; inset:0; z-index:6; pointer-events:none;
  background-repeat:repeat; background-position:center; opacity:.5;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,#000 0 12%,transparent 12% 88%,#000 88% 100%);
  mask-image:linear-gradient(90deg,#000 0 12%,transparent 12% 88%,#000 88% 100%);}
/* optional physical frame */
.sm-poster.has-frame{box-shadow:0 8px 40px rgba(0,0,0,.6), inset 0 0 0 2.6cqw #111;}

.sm-chassis{position:absolute; pointer-events:none;}     /* inset + border set inline */
.sm-circle{position:absolute; border-radius:50%; overflow:hidden;} /* pos/size/border inline */
.sm-circle canvas,.sm-circle svg{width:100%!important; height:100%!important; display:block; background:transparent!important;}
.sm-nebula{position:absolute; inset:0; background-size:cover; background-position:center;
  transform-origin:center center; will-change:transform,opacity; display:none;} /* circle designs only */
/* stars sit above the nebula; force to fill the circle — celestial hard-codes an inline
   height on this container, which leaves a black gap when the circle isn't 600px */
#sm-map{position:absolute; inset:0; width:100%!important; height:100%!important; z-index:1;}
.sm-scrim{position:absolute; pointer-events:none;}       /* set inline for nebula designs */
/* centre guide lines — shown while dragging text; brighten when the text snaps to centre */
.sm-guide{background:#e8dcc4; opacity:0; transition:opacity .12s, box-shadow .12s; z-index:5;}
.sm-guide.show{opacity:.3;}
.sm-guide.snap{opacity:.95; box-shadow:0 0 7px 1px #e8dcc4;}
.sm-credit{margin-top:14px; font-size:11px; line-height:1.5; text-align:center; opacity:.45;}
.sm-txt{position:absolute; left:50%; transform:translate(-50%,-50%);
  width:90%; text-align:center; color:#fff; line-height:1.2; white-space:pre-line;
  pointer-events:none; text-rendering:optimizeLegibility;}

.sm-caption{margin-top:14px; text-align:center; color:var(--muted); font-size:13px;}

/* ---------- controls column ---------- */
.sm-controls{display:flex; flex-direction:column; gap:22px;}
.sm-topbar{display:flex; justify-content:space-between; align-items:center;}
.sm-topbar h1{font-size:22px; font-weight:600; margin:0; letter-spacing:-.01em;}
.sm-lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.sm-lang button{background:transparent; color:var(--muted); border:0; padding:6px 14px;
  font-size:13px; font-weight:600; cursor:pointer;}
.sm-lang button.on{background:var(--accent); color:var(--accent-ink);}

.sm-field{display:flex; flex-direction:column; gap:8px;}
.sm-field>label{font-size:13px; font-weight:600; color:var(--ink);}
.sm-hint{font-size:12px; color:var(--muted);}

.sm-input,.sm-select{width:100%; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:15px;
  outline:none; transition:border-color .15s, box-shadow .15s;}
.sm-input:focus,.sm-select:focus{border-color:var(--focus); box-shadow:0 0 0 3px rgba(111,123,214,.25);}
.sm-input::placeholder{color:#6c6c82;}
.sm-select{appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%239a9ab2' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;}

.sm-row{display:flex; gap:10px;}
.sm-row>*{flex:1;}

/* location autocomplete */
.sm-ac{position:relative;}
.sm-ac-list{position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  max-height:260px; overflow-y:auto; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); display:none;}
.sm-ac-list.open{display:block;}
.sm-ac-item{padding:11px 14px; cursor:pointer; font-size:14px; display:flex; justify-content:space-between; gap:10px;}
.sm-ac-item:hover,.sm-ac-item.active{background:rgba(111,123,214,.18);}
.sm-ac-item .sub{color:var(--muted); font-size:12px;}

/* pills / toggles */
.sm-pills{display:inline-flex; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:4px; gap:4px;}
.sm-pills button{flex:1; background:transparent; color:var(--muted); border:0; border-radius:7px;
  padding:9px 14px; font-size:14px; font-weight:600; cursor:pointer; transition:.12s; white-space:nowrap;}
.sm-pills button.on{background:var(--accent); color:var(--accent-ink);}

.sm-toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}

/* collapsible additional options */
.sm-acc{border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.sm-acc>summary{list-style:none; cursor:pointer; padding:13px 15px; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; user-select:none;}
.sm-acc>summary::-webkit-details-marker{display:none;}
.sm-acc>summary::after{content:"+"; color:var(--muted); font-size:18px;}
.sm-acc[open]>summary::after{content:"–";}
.sm-acc-body{padding:4px 15px 16px; display:flex; flex-direction:column; gap:16px; border-top:1px solid var(--line);}

/* design swatches */
.sm-designs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.sm-swatch{position:relative; aspect-ratio:3490/4961; border-radius:9px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:#000 center/cover no-repeat; transition:.12s;}
.sm-swatch::after{content:""; position:absolute; inset:0; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.sm-swatch.on{border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,220,196,.25);}
.sm-swatch .nm{position:absolute; left:0; right:0; top:0; padding:7px 6px 12px; font-size:11px; font-weight:600;
  color:#fff; text-align:center; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.9);
  background:linear-gradient(rgba(0,0,0,.72), transparent);}

/* char counter */
.sm-count{align-self:flex-end; font-size:11px; color:var(--muted);}
.sm-count.over{color:var(--danger);}

/* add to cart + reset */
.sm-cta{position:sticky; bottom:0; display:flex; flex-direction:column; gap:10px;
  padding-top:8px; background:linear-gradient(transparent, var(--bg) 30%);}
.sm-add{width:100%; background:var(--accent); color:var(--accent-ink); border:0; border-radius:12px;
  padding:16px; font-size:16px; font-weight:700; cursor:pointer; transition:.15s;}
.sm-add:disabled{opacity:.4; cursor:not-allowed;}
.sm-add:not(:disabled):hover{filter:brightness(1.06);}
.sm-price{font-size:18px;}
.sm-reset{background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline; align-self:center;}

/* ---------- Phase 1.5: text controls + nebula adjust ---------- */
.sm-subhead{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-top:8px;}

.sm-txtgroup{border:1px solid var(--line); border-radius:10px; padding:12px 12px 14px;
  display:flex; flex-direction:column; gap:12px; background:var(--panel);}
.sm-txtgroup-head{font-size:13px; font-weight:600; color:var(--ink);}
.sm-ctl-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.sm-ctl-lbl{font-size:12px; color:var(--muted); flex-shrink:0;}
.sm-txtgroup .sm-pills{padding:3px;}
.sm-txtgroup .sm-pills button{padding:7px 12px; font-size:13px;}

/* range sliders (fine-tune, nebula) */
.sm-slider{display:flex; flex-direction:column; gap:7px;}
.sm-slider-head{display:flex; justify-content:space-between; align-items:center;}
.sm-slider-head label{font-size:12px; color:var(--muted);}
.sm-slider-val{font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums;}
.sm-range{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
  background:var(--panel-2); outline:none; margin:0; cursor:pointer;}
.sm-range::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:0; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.5);}
.sm-range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--accent);
  border:0; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.5);}

/* nebula adjust — a primary creative control (not inside additional options) */
.sm-neb-body{display:flex; flex-direction:column; gap:15px; padding:15px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);}
.sm-neb-reset{align-self:flex-start; background:none; border:0; color:var(--muted);
  font-size:12px; text-decoration:underline; cursor:pointer; padding:0;}

/* ---------- location: editable coords + Leaflet map picker ---------- */
.sm-coordrow{display:flex; gap:10px; margin-top:10px;}
.sm-coord-cell{flex:1; display:flex; flex-direction:column; gap:4px;}
.sm-coord-lbl{font-size:11px; color:var(--muted); font-weight:600;}
.sm-input.sm-coord{padding:8px 10px; font-variant-numeric:tabular-nums;}
.sm-locbtns{display:flex; align-items:center; gap:14px; margin-top:10px;}
.sm-mapbtn{background:var(--panel-2); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; cursor:pointer;}
.sm-mapbtn:hover{border-color:var(--focus);}
.sm-loclink{background:transparent; border:0; color:var(--muted); font-size:12px;
  text-decoration:underline; cursor:pointer; padding:4px;}
.sm-loclink:hover{color:var(--ink);}
.sm-mapwrap{display:none; margin-top:12px;}
.sm-mapwrap.open{display:block;}
.sm-maphint{font-size:12px; color:var(--muted); margin-bottom:8px;}
.sm-leaflet{height:260px; width:100%; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.sm-leaflet .leaflet-container{background:#0e0f16; font:inherit;}
.sm-pin-dot{width:18px; height:18px; border-radius:50%; background:var(--accent);
  border:3px solid #1a1a12; box-shadow:0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.5);}

/* ---------- text controls: cleaner per-block card, size slider + free drag ---------- */
.sm-txtgroup-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.sm-txtgroup-name{font-size:13px; font-weight:600; color:var(--ink);}
.sm-txtgroup-acts{display:flex; gap:6px;}
.sm-txt-act{background:var(--panel-2); border:1px solid var(--line); color:var(--muted);
  font-size:11px; border-radius:999px; padding:3px 11px; cursor:pointer;}
.sm-txt-act:hover{color:var(--ink); border-color:var(--focus);}
.sm-txt{cursor:move;}
.sm-poster.sm-dragging{cursor:grabbing;}
.sm-poster.sm-dragging .sm-txt{user-select:none;}

/* admin-only test download button (dev/testing look, clearly not a customer control) */
.sm-testdl{width:100%; margin-top:12px; padding:11px 14px; border-radius:10px;
  background:transparent; color:var(--muted); border:1px dashed var(--line);
  font-size:13px; font-weight:600; cursor:pointer; letter-spacing:.02em;}
.sm-testdl:hover:not(:disabled){color:var(--ink); border-color:var(--focus);}
.sm-testdl:disabled{opacity:.6; cursor:default;}

@media (max-width:900px){
  .sm-wrap{grid-template-columns:1fr; gap:22px;}
  .sm-preview-col{position:sticky; top:0; z-index:10; padding:8px 0;
    background:linear-gradient(var(--bg) 70%, transparent);}
  .sm-poster-shell{padding:14px;}
  .sm-poster{max-width:min(62vw,340px); margin:0 auto;}
}