/* ───────────────────────────────────────────────────────────────────
   theme-studio.css — the Theme Studio live side-drawer (Luke 2026-06-08).
   A right-side drawer so the tablet preview stays visible + updates live as
   you design. Pure UI chrome for the DESIGNER (the SLP/parent); the board
   itself renders via board-themes.css `.theme-custom`.
   ─────────────────────────────────────────────────────────────────── */
.tstudio {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
  background: var(--surface,#fff); border-left: 1px solid #e3e6f0;
  box-shadow: -8px 0 30px rgba(40,40,90,0.18);
  z-index: 1200; display: flex; flex-direction: column;
  font-family: system-ui, sans-serif; color: var(--ink,#1a1a2e);
  animation: tstudio-in 0.18s ease-out;
}
@keyframes tstudio-in { from { transform: translateX(20px); opacity: 0.4; } to { transform: none; opacity: 1; } }

.tstudio-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem;
  background: linear-gradient(135deg,#6366f1,#a855f7); color: #fff; }
.tstudio-title { font-weight: 800; font-size: 1.05rem; flex: 1; }
.tstudio-close { background: rgba(255,255,255,0.18); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; }

.tstudio-body { flex: 1; overflow-y: auto; padding: 0.6rem 1rem 1rem; }
.tstudio-field { display: block; margin: 0.5rem 0; }
.tstudio-flabel { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color:var(--ink-soft); margin-bottom: 0.25rem; }
.tstudio-name { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem;
  border: 1px solid #d3d7e4; border-radius: 8px; font-size: 0.95rem; }

.tstudio-sec { margin: 1rem 0 0.4rem; font-size: 0.78rem; font-weight: 800; color:var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em; }

.tstudio-starts, .tstudio-modes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tstudio-start, .tstudio-mode { padding: 0.4rem 0.7rem; border: 1px solid #d3d7e4; background: var(--surface,#fff);
  border-radius: 999px; font-size: 0.8rem; font-weight: 600; cursor: pointer; color:var(--ink); }
.tstudio-mode.on { background: #6366f1; color: #fff; border-color: #6366f1; }

.tstudio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.6rem; margin: 0.3rem 0; }
.tstudio-swatch { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; }
.tstudio-swatch input[type="color"] { width: 34px; height: 28px; border: 1px solid #ccd; border-radius: 6px;
  padding: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.tstudio-swlabel { color:var(--ink); }
.tstudio-field input[type="range"] { width: 100%; }

.tstudio-note { font-size: 0.78rem; color:var(--ink-soft); line-height: 1.4; margin: 0.2rem 0 0.5rem; }
.tstudio-a11y { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.tstudio-a11yrow { display: flex; justify-content: space-between; font-size: 0.78rem;
  padding: 0.25rem 0.45rem; border-radius: 6px; }
.tstudio-a11yrow.ok { background: #ecfdf3; color: #197a45; }
.tstudio-a11yrow.bad { background: #fef2f2; color: #b42318; }
.tstudio-a11ypair { font-weight: 600; }

.tstudio-foot { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid #eef0f6; }
.tstudio-btn { flex: 1; padding: 0.6rem; border-radius: 9px; font-weight: 700; font-size: 0.9rem; cursor: pointer; border: none; }
.tstudio-btn.ghost { background: #f0f1f6; color:var(--ink-soft); }
.tstudio-btn.primary { background: linear-gradient(135deg,#6366f1,#a855f7); color: #fff; }

/* Simple mode: "Pick a look" thumbnails */
.tstudio-looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 0.3rem 0; }
.tstudio-look { display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  border: 1px solid #d3d7e4; border-radius: 10px; padding: 0.4rem 0.3rem; background: var(--surface,#fff); cursor: pointer; }
.tstudio-look:hover { border-color: #a5b4fc; box-shadow: 0 2px 8px rgba(99,102,241,0.15); }
.tstudio-look-name { font-size: 0.72rem; font-weight: 700; color:var(--ink); }
.tstudio-thumb { width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.tstudio-thumb-bar { height: 10px; width: 100%; }
.tstudio-thumb-dots { display: flex; gap: 3px; padding: 5px; }
.tstudio-thumb-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.12); }

/* Simple mode: "pick your favourite colour" */
.tstudio-pickcolor { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; }
.tstudio-bigcolor { width: 54px; height: 44px; border: 1px solid #ccd; border-radius: 10px; padding: 0; background: none; cursor: pointer; flex: 0 0 auto; }

/* Advanced collapse */
.tstudio-adv { margin-top: 0.8rem; border-top: 1px solid #eef0f6; padding-top: 0.4rem; }
.tstudio-advsum { cursor: pointer; font-size: 0.82rem; font-weight: 700; color:var(--ink-soft); padding: 0.4rem 0; list-style: revert; }
.tstudio-advsum:hover { color:var(--ink-soft); }

/* My Themes gallery (Phase 2) */
.tstudio-gallery { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.2rem 0; }
.tlib-empty { font-size: 0.78rem; color:var(--ink-muted); line-height: 1.4; margin: 0.1rem 0; }
.tlib-chip { display: flex; align-items: center; gap: 0.4rem; }
.tlib-pick { flex: 1; display: flex; align-items: center; gap: 0.5rem; text-align: left;
  padding: 0.4rem 0.55rem; border: 1px solid #d3d7e4; background: var(--surface,#fff); border-radius: 9px;
  font-size: 0.85rem; font-weight: 600; color:var(--ink); cursor: pointer; }
.tlib-pick:hover { border-color: #a5b4fc; background: #f0f1ff; }
.tlib-del { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid #f0c8c8; background: var(--surface,#fff);
  color: #b42318; border-radius: 8px; cursor: pointer; font-size: 0.8rem; }
.tlib-dots { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.tlib-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.15); display: inline-block; }
.tlib-dot-head { border-radius: 50%; }

/* Background ownership section (Luke 2026-06-23) — colour/gradient/image. */
.tstudio-bg { margin: 0.4rem 0 0.2rem; }
.tstudio-bg-controls { margin-top: 0.4rem; }
.tstudio-bg-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.2rem 0; }

@media (max-width: 640px) { .tstudio { width: 100vw; } }