/* V18: circular paint chooser and the more detailed palette knives. */
#palette-dialog{width:min(1050px,calc(100vw - 24px));max-height:94vh}
#palette-dialog[open]{display:flex;flex-direction:column}
.palette-search-row{display:flex;align-items:stretch;gap:9px}
.palette-search-row #palette-search{min-width:0;flex:1}
#select-matching-paints{flex:none;padding-inline:15px;border-color:#a3ac95;color:#344c31;background:#f3f6ef}
#select-matching-paints:disabled{opacity:.45;cursor:default}
#palette-dialog .palette-actions{margin:12px 0}
#palette-options{display:block;flex:1 1 auto;min-height:240px;max-height:none;overflow:auto;overscroll-behavior:contain;padding:7px;direction:ltr;scrollbar-color:#aaae9d #eeeee7}
.palette-chooser-frame{--chooser-scale:1;position:relative;width:calc(var(--stage-width)*var(--chooser-scale));height:calc(var(--wheel-size)*var(--chooser-scale));margin:auto}
.palette-chooser-stage{position:absolute;top:0;left:0;width:var(--stage-width);height:var(--wheel-size);transform:scale(var(--chooser-scale));transform-origin:top left}
#palette-dialog .palette-wheel{position:absolute;top:0;left:var(--side-space);width:var(--wheel-size);height:var(--wheel-size);margin:0;direction:ltr;border-radius:50%;background:#eee7d9;box-shadow:inset 0 0 0 1px #7d847044,0 2px 14px #49433224}
.palette-wheel-art{position:absolute;inset:4%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at center,#e2cdb6 0 6%,#e5d5c2be 14%,#ede3d374 31%,transparent 56%),var(--wheel-spectrum);box-shadow:inset 0 0 0 8px #f8f2e5a8,inset 0 0 14px #423d2b47;pointer-events:none}
.palette-wheel-art svg{display:block;width:100%;height:100%;opacity:.76;mix-blend-mode:multiply}
.palette-wheel-guide{position:absolute;inset:7%;border:1px dashed #f9f3e6a6;border-radius:50%;pointer-events:none}
.palette-wheel-guide::before{content:"";position:absolute;inset:20%;border:1px dashed #f9f3e68c;border-radius:50%}
#palette-dialog .chooser-tube{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--angle));z-index:2;display:flex;flex-direction:column;align-items:center;width:27px;height:77px;padding:0;border:0;border-radius:3px;background:transparent;filter:drop-shadow(1px 2px 1px #0008);cursor:pointer;transition:filter .15s,opacity .15s,transform .15s}
#palette-dialog .chooser-tube .mini-crimp{width:25px;height:4px}
#palette-dialog .chooser-tube .mini-body{width:25px;height:59px}
#palette-dialog .chooser-tube .mini-name{font-size:6.8px;line-height:8px;max-height:25px;transform:translate(-50%,-50%) rotate(calc(-90deg + var(--label-turn)))}
#palette-dialog .chooser-tube .mini-neck{height:4px}
#palette-dialog .chooser-tube .mini-cap{height:10px}
#palette-dialog .chooser-tube:hover,#palette-dialog .chooser-tube:focus-visible{z-index:5;transform:translate(-50%,-50%) rotate(var(--angle)) scale(1.23);filter:drop-shadow(0 2px 5px #000a)}
.chooser-tube:focus-visible{outline:2px solid #415b39;outline-offset:3px}
.chooser-tube[aria-pressed=true] .mini-body{box-shadow:0 0 0 2px #fffcf1,0 0 0 4px #3e6835,inset 1px 0 1px #eef0dba0,inset -2px 0 2px #0005}
.chooser-tube.chooser-dim:not([aria-pressed=true]){opacity:.3}
.chooser-tube:disabled{opacity:.45;cursor:default}
.palette-wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:19%;min-width:90px;max-width:172px;min-height:76px;padding:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:1px solid #fff9e0ab;border-radius:50%;background:#f8efdfd9;color:#3a4733;text-align:center;pointer-events:none;box-shadow:0 2px 10px #342c1e3d,inset 0 0 13px #fff7e2a8}
.palette-wheel-center strong{font-size:clamp(.72rem,1.3vw,.98rem);line-height:1.2;font-weight:600;overflow-wrap:anywhere}
.palette-wheel-center span{font-size:clamp(.6rem,1vw,.77rem);line-height:1.2;color:#66735f;overflow-wrap:anywhere}
#palette-empty-hint{margin-top:6px}
.recipe .knife-label{top:13px;left:10px;width:91px;padding:2px 3px;border-radius:3px;background:#28190f77;color:#fff6e8;font-size:8.8px;line-height:1.2;text-shadow:0 1px 2px #000,0 0 2px #000;letter-spacing:.01em}
.recipe .paint-knife{height:48px}
.recipe .ingredient{top:-24px;height:48px;transform-origin:220px 24px}
@media(max-height:760px) and (min-width:681px){.palette-chooser-frame{--chooser-scale:.82}}
@media(max-width:680px){#palette-dialog{padding:17px 12px}#palette-options{min-height:190px;padding:3px}.palette-chooser-frame{--chooser-scale:.75}.palette-search-row{gap:5px}#select-matching-paints{padding-inline:9px;font-size:.76rem}#palette-dialog .dialog-heading{margin-bottom:13px}.palette-wheel-center{min-width:90px}}
@media(max-width:420px){.palette-chooser-frame{--chooser-scale:.7}}
@media(prefers-reduced-motion:reduce){.chooser-tube{transition:none}}