/* Phase 12: design studio. Uses the JTAD tokens from site.css and pages.css. */
.studio{display:grid;gap:18px}
.studio-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.studio-bar .btn{cursor:pointer}
.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.studio-stage{max-height:72vh;overflow:auto;background:#eee6ea;border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:0 14px 30px rgba(77,10,45,.10)}
#st-canvas{display:block;width:100%;height:auto;background:#fff;cursor:grab;touch-action:none;box-shadow:0 4px 12px rgba(0,0,0,.12)}
#st-canvas:active{cursor:grabbing}
.studio-props{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.studio-props h3{margin:0 0 10px;font:800 1rem var(--body);color:var(--maroon)}
.studio-props #st-props{display:grid;gap:12px}
.studio-props #st-props[hidden]{display:none}
.studio-props .check{display:flex;gap:8px;align-items:center;font-size:.9rem}
.studio-props input[type=color]{width:100%;height:40px;padding:2px;border:1px solid #d6c4cc;border-radius:6px;background:#fff}
.studio-props input:disabled{background:#f3eef1;color:#9a8a92}
.studio-actions{display:flex;flex-wrap:wrap;gap:8px}
.tpl-groups{display:grid;gap:18px}
.tpl-group h2{font:800 1.1rem var(--body);color:var(--maroon);margin:0 0 8px}
.tpl-list{display:flex;flex-wrap:wrap;gap:10px}
.tpl-card{display:grid;gap:2px;min-width:150px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;background:#fff;color:var(--maroon);text-decoration:none}
.tpl-card b{font:700 .95rem var(--body)}
.tpl-card small{color:var(--mute)}
.tpl-card.on,.tpl-card:hover{background:var(--maroon);color:#fff;border-left-color:var(--gold)}
.tpl-card.on small,.tpl-card:hover small{color:#f3e9ee}
@media(max-width:900px){.studio-grid{grid-template-columns:1fr}}

/* Phase 13: Design in Canva panel */
.canva-panel{background:#fff;border:1px solid var(--line);border-left:4px solid var(--maroon);border-radius:10px;padding:18px 20px;margin-bottom:22px}
.canva-panel h2{font:800 1.1rem var(--body);color:var(--maroon);margin:0 0 6px}
.canva-panel p{margin:.4rem 0;color:var(--ink)}