/* PaintColorKE theme 1.3 — site-wide interaction layer: dropdowns, hover and press states, and the card language.
 * Loaded after the theme stylesheet. Plugin styles are printed later in the page, so rules that must win start with
 * "body" (one extra element of specificity). Interface colours only; paint swatches are never restyled here.
 * Selection is shown with neutral fills and outlines, never with coloured edge bars on rounded cards. */
:root{
 --pcke-ease:cubic-bezier(.2,.7,.2,1);--pcke-card-radius:18px;--pcke-card-border:#E3E8F1;
 --pcke-card-shadow:0 1px 2px rgba(24,35,58,.05),0 6px 20px rgba(24,35,58,.06);
 --pcke-card-shadow-hover:0 2px 4px rgba(24,35,58,.06),0 14px 34px rgba(24,35,58,.12);
 --pcke-ring:0 0 0 4px rgba(36,87,231,.18);
 --pcke-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23536078' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- dropdowns: the closed box ---------- */
body select:not([multiple]):not([size]){
 -webkit-appearance:none;appearance:none;cursor:pointer;color:var(--pcke-ink);font-weight:600;
 background-color:#fff;background-image:var(--pcke-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
 padding-right:42px;border:1px solid var(--pcke-line-strong);border-radius:12px;box-shadow:0 1px 2px rgba(24,35,58,.05);
 transition:border-color .15s,box-shadow .15s,background-color .15s;text-overflow:ellipsis
}
body select:not([multiple]):not([size]):hover{border-color:#8E99AE;background-color:#FBFCFE}
body select:not([multiple]):not([size]):focus{outline:none}
body select:not([multiple]):not([size]):focus-visible{outline:none;border-color:var(--pcke-primary);box-shadow:var(--pcke-ring)}
body select:not([multiple]):not([size]):open{outline:none;border-color:var(--pcke-primary);box-shadow:var(--pcke-ring)} /* own rule: browsers without :open would drop a shared list */
body select:disabled{cursor:not-allowed;opacity:.55}

/* ---------- dropdowns: the open list (customizable select; other browsers keep their own list) ---------- */
@supports (appearance:base-select){
 body select:not([multiple]):not([size]){appearance:base-select;background-image:none;padding-right:12px;display:inline-flex;align-items:center;gap:8px}
 body select:not([multiple]):not([size])::picker-icon{content:"";width:18px;height:18px;margin-left:auto;flex:none;background:var(--pcke-chevron) center/18px no-repeat;transition:rotate .2s var(--pcke-ease)}
 body select:not([multiple]):not([size]):open::picker-icon{rotate:180deg}
 body select:not([multiple]):not([size])::picker(select){
  appearance:base-select;margin-block:6px;padding:6px;min-width:anchor-size(width);max-height:min(60vh,420px);overflow:auto;
  border:1px solid var(--pcke-card-border);border-radius:14px;background:#fff;box-shadow:0 18px 48px rgba(24,35,58,.18),0 2px 6px rgba(24,35,58,.06);
  opacity:0;translate:0 -4px;transition:opacity .14s,translate .14s var(--pcke-ease),overlay .14s allow-discrete,display .14s allow-discrete
 }
 body select:not([multiple]):not([size]):open::picker(select){opacity:1;translate:0 0}
 @starting-style{body select:not([multiple]):not([size]):open::picker(select){opacity:0;translate:0 -4px}}
 body select option{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--pcke-ink);cursor:pointer;transition:background-color .12s}
 body select option:hover,body select option:focus-visible{background:var(--pcke-bg-soft);outline:none}
 body select option:checked{background:var(--pcke-primary-soft);color:var(--pcke-primary-dark);font-weight:700}
 body select option::checkmark{order:2;margin-left:auto;content:"✓";font-weight:800;color:var(--pcke-primary)}
 body select option:disabled{opacity:.45;cursor:default}
 body select optgroup{padding:4px 0}
 body select legend{padding:8px 12px 4px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pcke-muted)}
 @media (prefers-reduced-motion:reduce){body select:not([multiple]):not([size])::picker(select),body select:not([multiple]):not([size])::picker-icon{transition:none}}
}

/* ---------- text fields share the same states ---------- */
body :is(.pcke-cr,.pcke-panel) :is(input[type=text],input[type=search],input[type=number],input[type=email],textarea):not(.pcke-field__box input){transition:border-color .15s,box-shadow .15s}
body :is(.pcke-cr,.pcke-panel) :is(input[type=text],input[type=search],input[type=number],textarea):not(.pcke-field__box input):hover{border-color:#8E99AE}
body :is(.pcke-cr,.pcke-panel) :is(input[type=text],input[type=search],input[type=number],textarea):not(.pcke-field__box input):focus{outline:none;border-color:var(--pcke-primary);box-shadow:var(--pcke-ring)}
body .pcke-field__box:focus-within{box-shadow:var(--pcke-ring)}
body input[type=range]{cursor:pointer}
body input[type=color]{cursor:pointer}

/* ---------- buttons: one hover and press language ---------- */
body .pcke-button{transition:background-color .15s,border-color .15s,color .15s,box-shadow .2s var(--pcke-ease),transform .2s var(--pcke-ease)}
body .pcke-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(36,87,231,.22)}
body .pcke-button--light:not(:disabled):hover{background:var(--pcke-primary-soft);border-color:var(--pcke-primary);color:var(--pcke-primary-dark);box-shadow:0 6px 16px rgba(24,35,58,.08)}
body .pcke-button:not(:disabled):active{transform:translateY(0);box-shadow:none}
body .pcke-text-button{transition:color .15s}
body :is(.pcke-gen__toggle,.pcke-gen__icon,.pcke-chip,.pcke-gx__tabs button,.pcke-pt__kinds button,.pcke-fx__tabs button,.pcke-mega__trigger,.pcke-projects-link,.pcke-sw__btn){transition:background-color .15s,border-color .15s,color .15s,box-shadow .2s var(--pcke-ease),transform .2s var(--pcke-ease)}
body :is(.pcke-gen__toggle,.pcke-gen__icon,.pcke-chip,.pcke-gx__tabs button,.pcke-pt__kinds button,.pcke-fx__tabs button):not(:disabled):not([aria-pressed=true]):not([aria-checked=true]):not([aria-selected=true]):not([aria-expanded=true]):hover{background:var(--pcke-bg-soft);border-color:var(--pcke-ink);color:var(--pcke-ink)}
body :is(.pcke-gx__tabs button,.pcke-pt__kinds button,.pcke-fx__tabs button)[aria-checked=true],body .pcke-fx__tabs button[aria-selected=true]{box-shadow:0 4px 12px rgba(24,35,58,.18)}

/* ---------- the card language ---------- */
body :is(.pcke-gen__app,.pcke-mb__tools,.pcke-mb__board,.pcke-as,.pcke-panel){border-color:var(--pcke-card-border);border-radius:var(--pcke-card-radius);box-shadow:var(--pcke-card-shadow)}
body .pcke-cr-guide{margin-top:48px}
body .pcke-cr-guide__grid{gap:16px}
body .pcke-cr-guide__grid>div{background:#fff;border:1px solid var(--pcke-card-border);border-radius:var(--pcke-card-radius);padding:22px 22px 20px;box-shadow:var(--pcke-card-shadow);position:relative;transition:box-shadow .2s var(--pcke-ease),transform .2s var(--pcke-ease)}
body .pcke-cr-guide__grid>div::before{content:"";display:block;width:12px;height:12px;border-radius:50%;margin-bottom:14px;background:var(--pcke-primary)}
body .pcke-cr-guide__grid>div:nth-child(4n+2)::before{background:var(--pcke-coral)}
body .pcke-cr-guide__grid>div:nth-child(4n+3)::before{background:var(--pcke-teal)}
body .pcke-cr-guide__grid>div:nth-child(4n+4)::before{background:var(--pcke-sun)}
body .pcke-cr-guide__grid>div:hover{transform:translateY(-2px);box-shadow:var(--pcke-card-shadow-hover)}
body .pcke-gx__side{background:var(--pcke-bg-soft);border:1px solid var(--pcke-card-border);border-radius:16px;padding:16px}
body .pcke-gx__preview,body .pcke-fx__glass,body .pcke-fx__img,body .pcke-sv__img{box-shadow:var(--pcke-card-shadow),inset 0 0 0 1px rgba(24,35,58,.08)}
/* cards that lead somewhere lift on hover */
body :is(.pcke-toolcard,.pcke-lib__card,.pcke-family,.pcke-gx__ex,.pcke-ip__sample,.pcke-rm__scene,.pcke-post-card,.pcke-gen__savedlist li,.pcke-gx__recipes li,.pcke-family-tile,.pcke-plan-card,.pcke-swatch){transition:transform .2s var(--pcke-ease),box-shadow .2s var(--pcke-ease),border-color .15s}
body :is(.pcke-lib__card,.pcke-family,.pcke-gx__ex,.pcke-ip__sample,.pcke-rm__scene,.pcke-post-card,.pcke-swatch):hover{transform:translateY(-3px);box-shadow:var(--pcke-card-shadow-hover);border-color:#CBD3E1}
body :is(.pcke-gen__savedlist li,.pcke-gx__recipes li):hover{border-color:#CBD3E1;box-shadow:var(--pcke-card-shadow)}
body :is(.pcke-lib__card,.pcke-family,.pcke-post-card,.pcke-swatch){border-color:var(--pcke-card-border);border-radius:var(--pcke-card-radius);box-shadow:var(--pcke-card-shadow)}
/* colour chips and steps respond to the pointer without moving the layout */
body :is(.pcke-sc__step,.pcke-sw__var,.pcke-insp__hchip,.pcke-mini__swatch,.pcke-ct__cell){transition:transform .15s var(--pcke-ease),box-shadow .15s}
body :is(.pcke-sc__step,.pcke-sw__var,.pcke-insp__hchip,.pcke-ct__cell):hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(24,35,58,.18)}
body .pcke-scale__step{transition:border-color .15s,box-shadow .2s var(--pcke-ease)}
body .pcke-scale__step:hover{border-color:#CBD3E1;box-shadow:var(--pcke-card-shadow)}

@media (hover:none){body :is(.pcke-lib__card,.pcke-family,.pcke-gx__ex,.pcke-swatch,.pcke-cr-guide__grid>div):hover{transform:none}}
@media (prefers-reduced-motion:reduce){body :is(.pcke-button,.pcke-lib__card,.pcke-family,.pcke-gx__ex,.pcke-ip__sample,.pcke-rm__scene,.pcke-post-card,.pcke-swatch,.pcke-sc__step,.pcke-sw__var,.pcke-insp__hchip,.pcke-ct__cell,.pcke-cr-guide__grid>div){transition:none!important;transform:none!important}}