/* dood-stage.css: the shared studio look for the Meme Generator and
   Banner Studio. Built on the dood.css tokens; adds nothing global. */

/* ---------- the stage ---------- */
.st-app{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.st-stagecol{min-width:0;position:sticky;top:78px}
.st-board{position:relative;background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0) 0 0/18px 18px,
    var(--bg2);
  border:1px solid var(--border);border-radius:var(--r);padding:clamp(10px,2.4vw,26px);
  display:flex;justify-content:center;align-items:center;min-height:200px}
.st-holder{position:relative;width:100%;display:flex;justify-content:center}
.st-canvaswrap{position:relative;line-height:0}
.st-canvaswrap canvas{display:block;border-radius:2px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);background:#1a1a17}
.ds-ov{position:absolute;left:0;top:0;touch-action:none;cursor:default;user-select:none;-webkit-user-select:none}
.ds-ov.ds-gx::before{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--gold);opacity:.8;pointer-events:none}
.ds-ov.ds-gy::after{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--gold);opacity:.8;pointer-events:none}
.ds-box{position:absolute;left:0;top:0;transform-origin:50% 50%;outline:1.5px solid var(--gold);
  box-shadow:0 0 0 1px rgba(0,0,0,.55);pointer-events:none}
.ds-box i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;background:#0a0a09;border:2px solid var(--gold);
  border-radius:3px;pointer-events:auto;touch-action:none}
.ds-box i::after{content:'';position:absolute;inset:-10px}
.ds-nw{left:0;top:0;cursor:nwse-resize}.ds-ne{left:100%;top:0;cursor:nesw-resize}
.ds-se{left:100%;top:100%;cursor:nwse-resize}.ds-sw{left:0;top:100%;cursor:nesw-resize}
.ds-n{left:50%;top:0;cursor:ns-resize}.ds-s{left:50%;top:100%;cursor:ns-resize}
.ds-e{left:100%;top:50%;cursor:ew-resize}.ds-w{left:0;top:50%;cursor:ew-resize}
.ds-box .ds-n,.ds-box .ds-s,.ds-box .ds-e,.ds-box .ds-w{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%}
.ds-box[data-type="text"] .ds-n,.ds-box[data-type="text"] .ds-s{display:none}
.ds-box .ds-rot{left:50%;top:-30px;border-radius:50%;background:var(--gold);cursor:grab}
.ds-box .ds-rot::before{content:'';position:absolute;left:50%;top:12px;height:18px;border-left:1.5px solid var(--gold)}
.ds-box .ds-tail{background:#fff;border-color:#0a0a09;border-radius:50%;cursor:move}
@media (pointer:coarse){
  .ds-box i{width:20px;height:20px;margin:-10px 0 0 -10px}
  .ds-box .ds-n,.ds-box .ds-s,.ds-box .ds-e,.ds-box .ds-w{width:14px;height:14px;margin:-7px 0 0 -7px}
  .ds-box .ds-rot{top:-38px}
  .ds-box .ds-rot::before{top:18px;height:20px}
}

/* ---------- bars + buttons ---------- */
.st-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.st-bar .st-sp{flex:1}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  color:var(--text);background:var(--bg3);border:1px solid var(--border-m);border-radius:var(--r);cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s,transform .18s var(--ease);white-space:nowrap}
.st-btn:hover{border-color:var(--gold);color:var(--gold-lt)}
.st-btn:active{transform:translateY(1px)}
.st-btn:disabled{opacity:.4;pointer-events:none}
.st-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-btn.gold{background:var(--gold);border-color:var(--gold);color:#0a0a09}
.st-btn.gold:hover{background:var(--gold-lt);color:#0a0a09}
.st-btn.icon{padding:9px 10px;min-width:40px}
.st-btn.sm{min-height:34px;padding:6px 10px;font-size:10.5px}
.st-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.st-status{font-family:var(--mono);font-size:12px;color:var(--text-2);min-height:1.5em;margin-top:8px}
.st-status.ok{color:var(--green)}

/* the strip that appears when something is picked */
.st-sel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding:8px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--bg2)}
.st-sel .st-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:0 6px 0 4px}

/* ---------- side panel ---------- */
.st-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);min-width:0}
.st-tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.st-tabs::-webkit-scrollbar{display:none}
.st-tab{flex:1 0 auto;padding:14px 12px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;min-height:44px}
.st-tab:hover{color:var(--text)}
.st-tab[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.st-pane{padding:16px}
.st-pane[hidden]{display:none!important}
.st-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin:18px 0 10px}
.st-h:first-child{margin-top:2px}
.st-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.st-row+.st-row{margin-top:8px}
.st-lbl{font-family:var(--mono);font-size:11px;color:var(--text-2);min-width:64px}
.st-chip{padding:7px 11px;min-height:34px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-2);
  background:var(--bg3);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:.15s}
.st-chip:hover{color:var(--text);border-color:var(--border-s)}
.st-chip[aria-pressed="true"]{color:#0a0a09;background:var(--gold);border-color:var(--gold)}
.st-sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg2);box-shadow:0 0 0 1px var(--border-m);cursor:pointer;padding:0}
.st-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold)}
.st-sw.pick{position:relative;overflow:hidden;background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red)}
.st-sw.pick input{position:absolute;inset:-6px;opacity:0;cursor:pointer;width:40px;height:40px}
.st-range{flex:1;min-width:120px;accent-color:var(--gold)}
.st-field{width:100%;padding:10px 12px;font:15px/1.4 var(--sans);color:var(--text);background:var(--bg3);border:1px solid var(--border-m);
  border-radius:var(--r);resize:vertical}
.st-field:focus{outline:none;border-color:var(--gold)}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.st-grid.big{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.st-thumb{position:relative;aspect-ratio:1;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);cursor:pointer;
  overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center;transition:border-color .15s,transform .15s var(--ease)}
.st-thumb:hover{border-color:var(--gold);transform:translateY(-1px)}
.st-thumb img{width:100%;height:100%;object-fit:cover}
.st-thumb.fit img{object-fit:contain;padding:8%}
.st-thumb.light{background:#e9e6df}
.st-thumb[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.st-thumb .st-cap{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;font:10px/1.2 var(--mono);color:var(--text);
  background:linear-gradient(transparent,rgba(0,0,0,.8));text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.st-card{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg3);
  cursor:pointer;text-align:left;color:var(--text-2);font:11px/1.3 var(--mono)}
.st-card svg{width:100%;height:auto;display:block}
.st-card:hover{border-color:var(--border-s);color:var(--text)}
.st-card[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.st-texts{display:flex;flex-direction:column;gap:8px}
.st-tbox{display:flex;gap:6px;align-items:flex-start}
.st-tbox textarea{flex:1;min-height:44px}
.st-tbox.on textarea{border-color:var(--gold)}
.st-hint{font-size:12.5px;color:var(--text-3);margin-top:12px;line-height:1.5}
.st-hint b{color:var(--text-2);font-weight:600}
.st-drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,9,.82);
  border:2px dashed var(--gold);border-radius:var(--r);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);z-index:5;pointer-events:none}
.st-toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-2);cursor:pointer;padding:6px 0}
.st-toggle input{width:18px;height:18px;accent-color:var(--gold)}
.st-file{position:relative;overflow:hidden}
.st-file input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- phones ---------- */
@media (max-width:980px){
  .st-app{grid-template-columns:minmax(0,1fr)}
  .st-stagecol{position:relative;top:0}
}
@media (max-width:560px){
  .st-board{padding:6px;min-height:0}
  .st-bar .st-btn.keep{flex:1 0 100%}
  .st-bar .st-btn .st-t{display:none}
  .st-bar .st-btn.keep .st-t{display:inline}
  .st-pane{padding:14px 12px}
  .st-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-grid.big,.st-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}