/* ════════════════════════════════════════════════════════════════════════
   Style Kit → Studio generation — suite-specific components.
   Layered AFTER shell.css + floor.css. Net-new bits only; everything else
   reuses the floor vocabulary (floorhead, kitchip, wb, wall, candgrid, …).
   ════════════════════════════════════════════════════════════════════════ */

/* ── "Brand style applied" trust badge ───────────────────────────────────
   The headline UX fix: make the kit's presence visible at a glance, so the
   operator can SEE the style landed (emerald = applied; grey = off). */
.styletag {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px;
  font:600 11.5px/1 var(--display);
  background:#ecfdf5; color:#047857; border:1px solid #a7f3d0;
}
.styletag .ic { width:13px; height:13px; }
.styletag.off { background:#f4f4f8; color:var(--muted); border-color:var(--line); }

/* ── Kit-block callout ───────────────────────────────────────────────────
   The authoritative style block, collapsed under the composed prompt, so the
   operator can verify the kit's palette/type/mood actually reached the prompt
   (+ the Avoid line + the per-request deviation). */
.kitblock { margin-top:10px; border:1px solid #d6f0e2; border-radius:10px; background:#f6fdfa; overflow:hidden; }
.kitblock > summary {
  list-style:none; cursor:pointer; padding:9px 12px;
  display:flex; align-items:center; gap:8px;
  font:600 12px/1 var(--display); color:#047857;
}
.kitblock > summary::-webkit-details-marker { display:none; }
.kitblock > summary .ic { width:14px; height:14px; }
.kitblock > summary .chev { margin-left:auto; transition:transform .15s; color:#10b981; }
.kitblock[open] > summary .chev { transform:rotate(90deg); }
.kitblock .kb-body { padding:2px 12px 12px; }
.kitblock .kb-line { font:500 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink); }
.kitblock .kb-line b { color:#047857; font-weight:700; }
.kitblock .kb-dev { margin-top:9px; padding-top:8px; border-top:1px dashed #cdebdc; font-size:11.5px; line-height:1.5; color:var(--muted); }
.kitblock .kb-dev b { color:var(--ink); }
.kitblock .kb-avoid { margin-top:7px; font-size:11.5px; line-height:1.5; color:#b45309; }

/* ── "Pin as set look" — carousel cohesion lever on a picked candidate ──── */
.setlook {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-sm);
  font:600 11.5px/1 var(--display); cursor:pointer;
  background:var(--acc-50); color:var(--acc-700); border:1px solid #f3d0e6;
  transition:filter .12s;
}
.setlook:hover { filter:brightness(.98); }
.setlook .ic { width:13px; height:13px; }
.setlook.pinned { background:#ecfdf5; color:#047857; border-color:#a7f3d0; cursor:default; }

/* ── Planner: per-slide plan rows (concept · headline · visual direction) ── */
.planlist { display:flex; flex-direction:column; gap:10px; }
.planrow {
  display:grid; grid-template-columns:34px 1fr; gap:12px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:12px 14px;
}
.planrow .pn {
  width:30px; height:30px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; font:800 13px/1 var(--display);
  background:var(--acc-50); color:var(--acc-700);
}
.planrow .pbody { display:flex; flex-direction:column; gap:9px; min-width:0; }
.planrow .prole { font:700 12px/1 var(--display); color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }
.planfield { display:flex; flex-direction:column; gap:3px; }
.planfield > .fl { display:flex; align-items:center; gap:6px; font:600 10.5px/1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); }
.planfield > .fl .ic { width:11px; height:11px; }
.planinput {
  width:100%; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:7px 10px; font:500 13px/1.45 var(--body, inherit); color:var(--ink); resize:vertical;
}
.planinput:focus { outline:none; border-color:var(--acc); box-shadow:var(--ring); }
.planinput.headline { font-weight:700; }
.planinput.dir { color:var(--muted); }

/* ── Visual Style page stages (derive → tokens → compiled → calibrate) ──── */
.vstage { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); padding:16px 18px; margin-bottom:14px; }
.vstage .vh { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.vstage .vh .st { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:var(--acc-50); color:var(--acc-700); font:800 12px/1 var(--display); flex:none; }
.vstage .vh .vt { font:800 15px/1.2 var(--display); color:var(--ink); }
.vstage .vh .spacer { flex:1; }
.vstage .vsub { font-size:12.5px; line-height:1.55; color:var(--muted); margin:2px 0 12px; }
.tokrow { display:grid; grid-template-columns:120px 1fr; gap:10px 14px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); }
.tokrow:last-child { border-bottom:none; }
.tokrow .tk { font:600 12px/1 var(--display); color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; }
.swatchset { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { display:inline-flex; align-items:center; gap:7px; padding:4px 9px 4px 5px; border:1px solid var(--line); border-radius:999px; font:600 11.5px/1 ui-monospace, monospace; color:var(--ink); background:var(--surface); }
.swatch .chip { width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.08); }