/* The color-value workbench stays beside the ready palette. */
#open-value-studio{display:none!important}
.tools-column>.value-studio{position:relative;inset:auto;display:block;flex:none;width:100%;max-width:none;max-height:none;margin:0;padding:7px 8px 6px;overflow:visible;border:1px solid #876e4c;border-radius:5px;background:linear-gradient(145deg,#302820,#1b1c1a 58%,#28251f);box-shadow:inset 0 1px 0 #e0bd8055,2px 4px 7px #0008;color:#f1e5cf;direction:rtl}
html[dir=ltr] .tools-column>.value-studio{direction:ltr}
.value-studio .value-studio-header{min-height:24px;display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0 0 3px;padding:0 0 2px;border-bottom:1px solid #9b835b55}
.value-studio h2{margin:1px 0 0;font-size:.7rem;white-space:nowrap}.value-studio h2 small{margin-inline-start:3px;font-size:.55rem}
.value-studio .value-comparison{display:flex;align-items:center;gap:5px;margin:0;color:#beac88;font-size:.7rem;direction:ltr}
.value-studio .value-comparison i{width:20px;height:20px;display:block;flex:none;border:1px solid #a58b64;border-radius:50%;box-shadow:inset 0 1px 2px #0007,0 1px 2px #0008}
.value-studio-body{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px;min-height:130px}
.value-knife-column{min-width:0;display:flex;flex-direction:column;gap:2px}
.value-knives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:39px;gap:1px 3px;max-height:119px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#8d795d transparent}
.value-knife{position:relative;display:block;min-width:0;min-height:37px;padding:0;border:0;border-radius:0;background:none}
.value-knife svg{display:block;width:100%;height:28px;overflow:visible;filter:drop-shadow(1px 2px 1px #0008)}
.value-knife-name{position:absolute;inset:auto 2px 0;z-index:2;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#f5e8cd;font-size:.56rem;line-height:10px;text-shadow:0 1px 2px #000,0 0 3px #000}
.value-knife-fallback{display:block;width:95%;height:20px;border-radius:80% 10% 10% 80%;background:linear-gradient(90deg,#694020 45%,#a3a49a 45% 72%,var(--pigment) 73%);box-shadow:0 2px 2px #0009}
.value-extra{display:flex;align-items:center;gap:3px;min-height:35px;padding-top:2px;border-top:1px solid #8f765144}
.value-extra .value-knife{flex:1;min-width:0}.value-extra .value-knife svg{height:27px}
.value-extra-mark{flex:none;color:#edcb89;font-size:1rem}.value-extra-amount{flex:none;color:#f8dfaa;font-size:.59rem;white-space:nowrap}
.value-slider-column{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:148px;width:34px;padding:0 0 2px}
.value-slider-column span{color:#dfcfad;font-size:.58rem;white-space:nowrap}
#value-slider{position:absolute;top:61px;left:-39px;width:112px;height:22px;margin:0;transform:rotate(-90deg);accent-color:#c8ad75;cursor:pointer}
.value-studio .value-advice{min-height:0;display:block;margin:2px 0 0;padding:3px 4px;border:0;background:none;color:#e2d3b7;font-size:.62rem;line-height:1.35;text-align:start}
.value-studio .value-note{margin:1px 0 0;color:#a99a80;font-size:.52rem;line-height:1.25}
@media(min-width:760px){
  .tools-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;align-items:stretch;justify-content:stretch;align-content:stretch;gap:6px 9px}
  .tools-column>.head-panel{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;max-height:none;padding:0}
  .tools-column>.clipped-board{grid-column:2;grid-row:1;align-self:center;width:100%;margin:0;padding:7px 6px;transform:perspective(1100px) rotateY(-3deg)}
  .clipped-board .board-heading{display:flex;flex-wrap:nowrap;min-height:26px;height:26px;gap:4px}
  .clipped-board .section-toggle{width:auto;min-width:0;flex:1}
  .clipped-board .palette-expand{flex:none}
  .tools-column>.value-studio{grid-column:1/-1;grid-row:2;width:100%}
  .tools-column>.palette-panel{grid-column:1/-1;grid-row:3;width:100%}
}
@media(min-width:760px) and (max-height:790px){.tools-column{gap:7px}.tools-column>.value-studio{padding:5px 6px}.value-studio-body{min-height:105px}.value-knives{grid-auto-rows:32px;max-height:65px}.value-knife{min-height:31px}.value-knife svg{height:22px}.value-knife-name{font-size:.51rem}.value-extra{min-height:30px}.value-extra .value-knife svg{height:23px}.value-slider-column{height:116px}#value-slider{width:89px;top:48px;left:-27px}}
@media(min-width:760px) and (max-height:790px){.tools-column>.palette-panel{max-height:154px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#7b6243 transparent}.palette-panel .palette-swatches{max-height:86px}.palette-panel .palette-caption{display:none}}
@media(min-width:760px) and (max-height:790px){
  #palette-dialog{padding:12px 16px;max-height:calc(100dvh - 12px)}
  #palette-dialog .dialog-heading{min-height:34px;height:34px;margin-bottom:7px}
  #palette-dialog .palette-actions{margin:5px 0}
  #palette-dialog .dialog-footer{margin-top:3px}
  #palette-empty-hint{margin:2px 0;font-size:.7rem;line-height:1.2}
  #palette-options{min-height:0;padding:2px}
  .palette-wheel{width:min(var(--wheel-size),calc(94dvh - 235px));height:min(var(--wheel-size),calc(94dvh - 235px))}
  .chooser-tube{width:22px;height:63px}
  .chooser-tube .mini-crimp{width:21px;height:3px}
  .chooser-tube .mini-body{width:21px;height:48px}
  .chooser-tube .mini-name{font-size:6px;line-height:7px;max-height:22px}
  .chooser-tube .mini-neck{height:3px}.chooser-tube .mini-cap{height:8px}
}
.palette-wheel-dense{width:var(--wheel-size)!important;height:var(--wheel-size)!important}
.palette-wheel-dense .chooser-tube{width:27px;height:77px}
.palette-wheel-dense .chooser-tube .mini-crimp{width:25px;height:4px}
.palette-wheel-dense .chooser-tube .mini-body{width:25px;height:59px}
.palette-wheel-dense .chooser-tube .mini-name{font-size:6.6px;line-height:8px;max-height:25px}
.palette-wheel-dense .chooser-tube .mini-neck{height:4px}.palette-wheel-dense .chooser-tube .mini-cap{height:10px}
@media(max-width:759px){.tools-column>.value-studio{grid-column:1/-1;grid-row:2!important;max-width:500px;justify-self:center;direction:rtl}.tools-column>.palette-panel{grid-row:3!important}.head-collapsed .tools-column>.value-studio{grid-row:3!important}.head-collapsed .tools-column>.palette-panel{grid-row:4!important}.value-studio-body{min-height:140px}.value-knives{max-height:130px}.value-slider-column{height:150px}}
@media(max-width:680px){
  .palette-wheel{width:min(var(--wheel-size),calc(100vw - 58px));height:min(var(--wheel-size),calc(100vw - 58px))}
  .chooser-tube{width:16px;height:53px}
  .chooser-tube .mini-crimp{width:16px;height:3px}
  .chooser-tube .mini-body{width:16px;height:40px}
  .chooser-tube .mini-name{font-size:5.2px;line-height:6px;max-height:19px}
  .chooser-tube .mini-neck{height:3px}.chooser-tube .mini-cap{height:7px}
  #palette-options{min-height:0;overflow:auto;padding:0}
}
@media(max-width:360px){.value-studio h2 small{display:none}.value-knife-name{font-size:.51rem}}
/* Remove the brass quill tag attached to the ready-palette board. */
.clipped-board::before{content:none}

/* Short palette knives with readable names on the wooden handles. */
.recipe .ingredient{left:-4px;right:auto;top:-22px;width:195px;height:44px;transform-origin:4px 22px}
.recipe .ingredient:nth-child(n){transform:rotate(var(--tube-angle,0deg)) translateX(var(--knife-radius,0px))}
.recipe .paint-knife{display:block;width:195px;height:44px;overflow:visible}
.recipe .knife-handle{stroke:#5c331c;stroke-width:2.4}
.recipe .knife-ferrule{stroke:#594639;stroke-width:1.5}
.recipe .knife-blade{stroke:#4d5355;stroke-width:1.5;stroke-linejoin:miter}
.recipe .knife-label{position:absolute;z-index:2;top:14px;left:60px;width:126px;height:16px;padding:0;border:0;border-radius:0;background:none;color:#311c11;font:700 11px/16px Arial,sans-serif;letter-spacing:-.015em;text-shadow:0 1px 0 #f6c485;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(var(--label-turn,0deg));pointer-events:none}
.value-knife{width:min(100%,155px);height:34px;min-height:34px;justify-self:center}
.value-knife svg,.value-extra .value-knife svg{display:block;width:100%;height:34px;overflow:visible}
.value-knife-name{position:absolute;z-index:2;top:11px;bottom:auto;left:32%;right:3%;height:12px;display:block;color:#311c11;font:700 9.6px/12px Arial,sans-serif;letter-spacing:-.015em;text-shadow:0 1px 0 #f6c485;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.value-extra .value-knife{flex:0 1 155px}
@media(min-width:760px) and (max-height:790px){
  .value-knives{grid-auto-rows:36px;max-height:73px}
  .value-knife{width:min(100%,155px);height:34px;min-height:34px}
  .value-knife svg,.value-extra .value-knife svg{height:34px}
  .value-knife-name{top:11px;height:12px;font-size:9.6px;line-height:12px}
  .value-extra{min-height:35px}
  .value-extra .value-knife{flex-basis:155px}
}
@media(max-width:400px){.value-knife-name{font-size:8.3px;letter-spacing:-.025em}}

/* Pop each knife out from its blade when a color is picked. */
.recipe .ingredient.knife-pop{animation:recipe-knife-pop .28s cubic-bezier(.2,.82,.27,1) both;animation-delay:var(--knife-delay,0ms)}
@keyframes recipe-knife-pop{
  0%{opacity:0;transform:rotate(var(--tube-angle,0deg)) translateX(0) scale(.28)}
  74%{opacity:1;transform:rotate(var(--tube-angle,0deg)) translateX(calc(var(--knife-radius,0px) + 3px)) scale(1.055)}
  100%{opacity:1;transform:rotate(var(--tube-angle,0deg)) translateX(var(--knife-radius,0px)) scale(1)}
}
.value-knife.knife-pop{transform-origin:9% 50%;animation:value-knife-pop .26s cubic-bezier(.2,.82,.27,1) both;animation-delay:var(--knife-delay,0ms)}
@keyframes value-knife-pop{
  0%{opacity:0;transform:scale(.36)}
  74%{opacity:1;transform:scale(1.055)}
  100%{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.recipe .ingredient.knife-pop,.value-knife.knife-pop{animation:none!important}}