/*
 * designer-clicker_kapsul.css — the capsule clicker designer (clicker_kapsul): the pastel stage, the body-shape
 * cards, the lug side and the texture drawer. The key strip, key editor, font cards, texture cards and the
 * tap hint come from designer-clicker_nama.css (the shared clicker editor).
 */

/* ---- the stage: soft pastel studio ---- */
.designer-clicker_kapsul .designer-canvas {
    background: radial-gradient(90% 70% at 50% 18%, #fffdfb 0%, #fdf2f2 40%, #f6eafa 76%, #ebe3fa 100%); }

/* ---- body shape cards ---- */
.kps-shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kps-shape { position: relative; cursor: pointer; min-width: 0; }
.kps-shape input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kps-shape > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; height: 100%;
    padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); transition: border-color .12s; }
.kps-shape svg { grid-row: 1 / span 2; fill: currentColor; color: var(--accent-text); opacity: .85; }
.kps-shape svg .kps-lug { fill: none; stroke: currentColor; stroke-width: 1.3; }
.kps-shape b { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.kps-shape small { font-size: .76rem; color: var(--muted); line-height: 1.25; }
.kps-shape:hover > span { border-color: var(--accent); }
.kps-shape input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.kps-shape input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

/* ---- lug side (the ring-side radios of clicker_nama, two of them) ---- */
.kps-lugs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- texture drawer ---- */
.kps-texbox { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 12px; }
.kps-texbox > summary { cursor: pointer; padding: 10px 0; font-weight: 650; font-size: .92rem; color: var(--ink); list-style-position: inside; }
.kps-texbox > summary em { font-style: normal; font-weight: 600; }
.kps-texbox[open] { padding-bottom: 12px; }
.kps-texbox[open] > summary { margin-bottom: 4px; }
.kps-texbox .clk-texs { margin-bottom: 6px; }

/* ---- letter style chips ---- */
.kps-lstyles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kps-lstyles .ochip > span { height: 100%; padding: 9px 8px; }

@media (max-width: 600px) {
    .kps-shape > span { padding: 9px 9px; column-gap: 8px; }
    .kps-shape svg { width: 46px; height: 28px; }
    .kps-lstyles { grid-template-columns: 1fr; }
    .kps-lstyles .ochip > span { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 8px; align-items: baseline; }
}
@media (max-width: 900px) {
    .designer-clicker_kapsul .designer-canvas { aspect-ratio: 1 / 1; max-height: 62vh; }
    .designer-clicker_kapsul .designer-buy {
        position: sticky; bottom: 0; z-index: 5; background: var(--surface); padding-bottom: 12px; margin: 0 -8px; padding-left: 8px; padding-right: 8px;
        box-shadow: 0 -12px 18px -14px rgba(40, 20, 80, .35); }
    .designer-clicker_kapsul .designer-buy .btn { padding: 11px 20px; }
}