/* Card Maker UI: our own dropdowns and form controls, shared by the editor and the site pages.
   Colors come from the page's tokens (--panel, --line, --ink, --muted, --accent, --accent-soft, --hover). */

/* ---------- dropdowns (site/ui.js turns every <select> into these) ---------- */
.cm-select-native{display:none!important}
.cm-select{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;max-width:100%;padding:7px 10px 7px 12px;background:var(--panel,#fff);border:1px solid var(--line-2,var(--line,#E3DFD6));border-radius:var(--r,10px);color:var(--ink,#1C1B1F);font:inherit;font-size:13px;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cm-select:hover{border-color:var(--box-hover,#B9B1A3)}
.cm-select:focus-visible,.cm-select.is-open{outline:none;border-color:var(--accent,#FF5FA2);box-shadow:0 0 0 3px var(--accent-soft,#FFE1EE)}
.cm-select:disabled{opacity:.5;cursor:default}
.cm-select__val{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-select__chev{flex:none;width:16px;height:16px;margin-right:-2px;fill:none;stroke:var(--muted,#6B6870);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s}
.cm-select.is-open .cm-select__chev{rotate:180deg;stroke:var(--accent,#FF5FA2)}
.cm-select__list{position:fixed;z-index:1000;display:grid;align-content:start;gap:1px;max-width:min(360px,calc(100vw - 16px));overflow:auto;overscroll-behavior:contain;padding:6px;background:var(--panel,#fff);border:1px solid var(--line,#E3DFD6);border-radius:var(--r,14px);box-shadow:0 18px 44px -14px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.2);color:var(--ink,#1C1B1F);font:400 13.5px/1.3 var(--f-ui,system-ui,sans-serif);scrollbar-width:thin;scrollbar-color:var(--line-2,#D3CEC3) transparent;transform-origin:top center;animation:cm-select-in .14s ease-out}
.cm-select__list.is-up{transform-origin:bottom center}
@keyframes cm-select-in{from{opacity:0;scale:.97}}
.cm-select__opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;cursor:pointer;white-space:nowrap}
.cm-select__opt.is-active{background:var(--hover,#F3F0EA)}
.cm-select__opt[aria-selected="true"]{font-weight:600}
.cm-select__opt[aria-disabled="true"]{opacity:.45;cursor:default}
.cm-select__txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cm-select__tick{flex:none;width:16px;height:16px;margin-left:auto;padding-left:6px;box-sizing:content-box;fill:none;stroke:var(--accent,#FF5FA2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cm-select__opt[aria-selected="true"] .cm-select__tick{opacity:1}
.cm-select__group{padding:9px 10px 4px;color:var(--muted,#6B6870);font:500 11px/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase}
.cm-select__art{display:grid;place-items:center;flex:none;width:22px;height:22px;color:var(--ink,#1C1B1F)}
.cm-select__art svg{width:100%;height:100%}
.cm-select__val .cm-select__art{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.cm-select__list{animation:none}.cm-select__chev{transition:none}}

/* ---------- checkboxes and radio buttons ---------- */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;flex:none;width:18px;height:18px;margin:0;background:var(--panel,#fff);border:1.5px solid var(--box-line,#C9C2B5);cursor:pointer;vertical-align:middle;transition:background-color .15s,border-color .15s}
input[type=checkbox]{border-radius:2px}
input[type=checkbox]::before{content:"";width:11px;height:11px;background:var(--accent-ink,#fff);clip-path:polygon(12% 50%,0 63%,38% 100%,100% 24%,87% 10%,37% 73%);scale:0;transition:scale .14s ease-out}
input[type=checkbox]:checked{background:var(--accent,#FF5FA2);border-color:var(--accent,#FF5FA2)}
input[type=checkbox]:checked::before{scale:1}
input[type=radio]{border-radius:50%}
input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent,#FF5FA2);scale:0;transition:scale .14s ease-out}
input[type=radio]:checked{border-color:var(--accent,#FF5FA2)}
input[type=radio]:checked::before{scale:1}
input[type=checkbox]:not(:checked):hover,input[type=radio]:not(:checked):hover{border-color:var(--ink,#1C1B1F)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent,#FF5FA2);outline-offset:2px}

/* ---------- number and color fields ---------- */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=color]{-webkit-appearance:none;appearance:none;padding:3px;background:var(--panel,#fff);border:1px solid var(--line-2,var(--line,#E3DFD6));border-radius:var(--r,10px);cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
input[type=color]::-moz-color-swatch{border:0;border-radius:7px}

/* ---------- selection, autofill, scrollbars ---------- */
::selection{background:var(--accent-soft,#FFE1EE);color:var(--ink,#1C1B1F)}
input:-webkit-autofill,input:-webkit-autofill:hover{-webkit-text-fill-color:var(--ink,#1C1B1F);-webkit-box-shadow:0 0 0 40px var(--panel-2,#fff) inset;caret-color:var(--ink,#1C1B1F)}
input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--panel-2,#fff) inset,0 0 0 3px var(--accent-soft,#FFE1EE)}
html{scrollbar-color:var(--line-2,#CFC8BB) transparent}