/* The head opens on the reference board, leaving the tools rail for palettes. */
.tools-column {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
}
.tools-column > .value-studio { grid-column: 1; grid-row: 1; }
.tools-column > .palette-panel { grid-column: 1; grid-row: 2; }
.easel-shelf .reference-toolbar { gap: 4px; }
.easel-shelf .segmented { gap: 3px; }
.easel-shelf .segmented [data-mode="wheel"] { margin-inline-end: 3px; }
.easel-shelf .reference-toolbar > .image-actions { display: contents; }
.easel-shelf #open-portraits { margin-inline-start: 0; }
.easel-shelf .reference-toolbar > .model-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-inline-start: 7px;
  margin-inline-end: 8px;
}
.easel-shelf .reference-toolbar button,
.easel-shelf .reference-toolbar .file-button {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.easel-shelf #toggle-head-overlay[aria-pressed="true"],
.easel-shelf #toggle-skull-overlay[aria-pressed="true"],
.easel-shelf #toggle-palette-overlay[aria-pressed="true"] {
  color: #f9e0b1;
  border-color: #27190e;
  background: linear-gradient(#482d1b, #735030);
  box-shadow: inset 1px 2px 4px #000b, 0 1px 0 #d6a66d;
}

/* Current pigments and selected tubes read as horizontal tools, one per row. */
.tools-column > .value-studio .value-studio-body { display: block; min-height: 0; }
.tools-column > .value-studio,
.tools-column > .palette-panel { width: min(100%, 370px); justify-self: center; }
.tools-column > .value-studio .value-knife-column { display: flex; flex-direction: column; gap: 3px; }
.tools-column > .value-studio .value-knives {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 31px;
  max-height: 126px;
  justify-items: center;
  gap: 1px;
}
.tools-column > .value-studio .value-knife,
.tools-column > .value-studio .value-extra .value-knife { width: min(100%, 155px); height: 31px; min-height: 31px; }
.tools-column > .value-studio .value-knife svg,
.tools-column > .value-studio .value-extra .value-knife svg { height: 31px; }
.tools-column > .value-studio .value-slider-column {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 25px;
  gap: 7px;
  padding: 1px 5px;
  border-block: 1px solid #8f765144;
}
.tools-column > .value-studio #value-slider {
  position: static;
  flex: 1;
  width: auto;
  min-width: 0;
  height: 18px;
  margin: 0;
  transform: none;
}
.tools-column > .value-studio .value-extra { justify-content: center; min-height: 32px; padding: 0; border: 0; }
.tools-column > .value-studio .value-extra .value-knife { flex: 0 1 155px; }
.tools-column > .value-studio #value-advice,
.tools-column > .value-studio #value-note,
.tools-column > .palette-panel #palette-caption { display: none !important; }
.tools-column > .palette-panel .palette-swatches {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  max-height: 130px;
  padding: 2px;
  overflow-y: auto;
}
.tools-column > .palette-panel .palette-tube {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: min(100%, 155px);
  height: 21px;
  flex: 0 0 21px;
}
.tools-column > .palette-panel .mini-crimp { width: 4px; height: 18px; flex: 0 0 4px; }
.tools-column > .palette-panel .mini-body {
  width: auto;
  height: 20px;
  flex: 1 1 auto;
  border-radius: 2px;
  background: linear-gradient(#fff5,transparent 30%,transparent 66%,#0006),var(--paint);
}
.tools-column > .palette-panel .mini-name {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: none;
  font-size: 8.3px;
  line-height: 1;
  transform: none;
}
.tools-column > .palette-panel .mini-neck { width: 5px; height: 11px; flex: 0 0 5px; }
.tools-column > .palette-panel .mini-cap { width: 11px; height: 15px; flex: 0 0 11px; }

.easel-workspace > #palette-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 42;
  width: min(88%, 370px);
  direction: rtl;
  overflow: visible;
  filter: drop-shadow(4px 8px 7px #0009);
  pointer-events: none;
}
.easel-workspace > #palette-overlay[hidden],
.easel-workspace > #head-panel[hidden] { display: none !important; }
html[dir="ltr"] .easel-workspace > #palette-overlay { direction: ltr; }
.easel-workspace > #palette-overlay > .clipped-board {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 650;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  border: 3px solid #af824f;
  border-radius: 49% 51% 48% 52% / 48% 51% 49% 52%;
  background:
    radial-gradient(ellipse 10% 14% at 23% 25%, #28170d 47%, #69421f 58%, #d0a26a 68%, transparent 79%),
    radial-gradient(ellipse 100% 78% at 40% 12%, #d2a06666, transparent 68%),
    repeating-linear-gradient(174deg, #513219 0 2px, #76502a 3px 5px, #98683a 6px 8px, #694321 9px 11px),
    #83572e;
  box-shadow: inset 0 3px 4px #f4d2a780, inset 0 -9px 13px #2d190e88;
  transform: none;
  touch-action: none;
  pointer-events: auto;
  -webkit-mask-image: radial-gradient(ellipse 7.5% 11.5% at 23% 25%, transparent 97%, #000 100%);
  mask-image: radial-gradient(ellipse 7.5% 11.5% at 23% 25%, transparent 97%, #000 100%);
}
.easel-workspace > #palette-overlay > .clipped-board::before,
.easel-workspace > #palette-overlay > .clipped-board::after { content: none; }
.easel-workspace #palette-overlay .board-heading {
  position: absolute;
  z-index: 12;
  right: 14%;
  bottom: 6%;
  left: 14%;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0;
  gap: 4px;
  pointer-events: auto;
}
.easel-workspace #palette-overlay .section-toggle { min-width: 0; padding: 0; font-size: .72rem; }
.easel-workspace #palette-overlay #study-body { position: absolute; inset: 0; }
.easel-workspace #palette-overlay #color-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  overflow: visible;
  pointer-events: none;
}
.easel-workspace #palette-overlay .palette-dab { pointer-events: auto; }
.easel-workspace #palette-overlay #selected-color-name {
  position: absolute;
  z-index: 5;
  right: 21%;
  bottom: 20%;
  left: 21%;
  color: #f4e5c9;
  font: 600 10px/1.2 Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #291709, 0 0 2px #291709;
  pointer-events: none;
}
.easel-workspace #palette-overlay .tone-heading { display: none; }
.easel-workspace #palette-overlay .saved-wheel-colors { position: absolute; right: 28%; bottom: 29%; left: 28%; }
.easel-workspace #palette-overlay > .recipe { overflow: visible; pointer-events: none; }
.study-fullscreen #color-map {
  aspect-ratio: 1000 / 650;
  border: 3px solid #af824f;
  border-radius: 49% 51% 48% 52% / 48% 51% 49% 52%;
  background: repeating-linear-gradient(174deg, #513219 0 2px, #76502a 3px 5px, #98683a 6px 8px, #694321 9px 11px) !important;
  -webkit-mask-image: radial-gradient(ellipse 7.5% 11.5% at 23% 25%, transparent 97%, #000 100%);
  mask-image: radial-gradient(ellipse 7.5% 11.5% at 23% 25%, transparent 97%, #000 100%);
}
.study-fullscreen .tone-heading { display: none; }
.palette-drag-handle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 3px;
  border: 1px solid #9074516e;
  border-radius: 6px;
  background: #5139286b;
  color: #f4e1bd;
  cursor: grab;
  touch-action: none;
}
.palette-drag-handle:active { cursor: grabbing; }
.palette-drag-handle svg { width: 17px; height: 17px; fill: currentColor; }

.easel-workspace > #head-panel {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
.easel-workspace > #head-panel .head-heading { display: none; }
.easel-workspace > #head-panel .head-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.easel-workspace > #head-panel .head-stage::before,
.easel-workspace > #head-panel .head-stage::after { content: none; }
.easel-workspace > #head-panel #head-canvas {
  width: 100%;
  height: 100%;
  filter: drop-shadow(8px 12px 9px #0006);
}

.head-overlay-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #bda17b;
  border-radius: 50%;
  background: #251e19d9;
  box-shadow: 0 2px 8px #0006;
  color: #f5e5c9;
  font-size: 23px;
  line-height: 1;
}
.head-overlay-close:hover { background: #3a2a20; }

.easel-workspace > #head-panel .head-camera-controls {
  position: absolute;
  inset: auto 8px 8px;
  z-index: 7;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.easel-workspace > #head-panel .head-camera-controls > summary[hidden] { display: none !important; }
.head-control-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max-content;
  margin: 0 auto 2px;
  padding: 2px;
  border: 1px solid #ac9570a6;
  border-radius: 6px;
  background: #211e1bcc;
  box-shadow: 0 1px 5px #0005;
  backdrop-filter: blur(5px);
}
.head-control-tabs button {
  min-height: 18px;
  padding: 1px 9px;
  border-radius: 4px;
  color: #d3bfa0;
  font-size: 10px;
  line-height: 16px;
}
.head-control-tabs button[aria-pressed="true"] {
  background: #9b7850;
  color: #fff4dc;
}
.easel-workspace > #head-panel .head-control-fields {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 10px 7px;
  border: 1px solid #ac9570a6;
  border-radius: 8px;
  background: #211e1bcc;
  box-shadow: 0 2px 8px #0005;
  color: #e9d8b7;
  direction: ltr;
  backdrop-filter: blur(5px);
}
.easel-workspace > #head-panel .head-control-fields[hidden] { display: none !important; }
.head-control-item { min-width: 0; display: grid; grid-template-rows: 16px 15px; gap: 2px; }
.head-control-fields .head-control-item label {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 5px;
  color: #e9d8b7;
}
.head-control-item label svg { width: 13px; height: 13px; flex: none; }
.head-control-item label output { min-width: 0; color: #eee4d0; font: 10px/1 Arial, sans-serif; }
.head-control-fields .head-control-item input[type="range"] {
  display: block;
  width: 100%;
  height: 15px;
  margin: 0 !important;
  accent-color: #d9bf8e;
  cursor: pointer;
}
.head-control-item input:disabled { cursor: default; }

@media (max-width: 759px) {
  .easel-shelf .reference-toolbar { gap: 3px; }
  .easel-shelf .reference-toolbar > .image-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 100%;
    width: 100%;
    gap: 4px;
  }
  .easel-shelf .segmented { gap: 2px; }
  .easel-shelf .segmented [data-mode="wheel"] { margin-inline-end: 2px; }
  .easel-shelf .reference-toolbar button,
  .easel-shelf .reference-toolbar .file-button { width: 27px; height: 27px; min-height: 27px; flex-basis: 27px; }
  .easel-shelf #open-portraits { margin-inline-start: 0; }
  .easel-shelf .reference-toolbar > .model-actions { gap: 3px; margin-inline-start: 6px; margin-inline-end: 8px; }
  .tools-column { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .tools-column > .value-studio,
  .head-collapsed .tools-column > .value-studio { grid-column: 1; grid-row: 1 !important; }
  .tools-column > .palette-panel,
  .head-collapsed .tools-column > .palette-panel { grid-column: 1; grid-row: 2 !important; }
  .easel-workspace > #palette-overlay { top: 8px; right: 8px; width: min(92%, 340px); }
  .head-control-fields { gap: 5px; padding-inline: 6px; }
}

@media (max-width: 359px) {
  .head-control-item label output { font-size: 9px; }
  .easel-workspace > #head-panel .head-control-fields { gap: 4px; padding-inline: 5px; }
}