/* Compact, directly selectable writing tools in the existing annotation workbench. */
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-palette-panel {
  flex-direction: column; align-items: stretch; gap: 3px; padding: 7px 8px 5px !important;
}
body.student-page #imageViewer #annotationWorkbench .annotation-brush-settings { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; align-items: center; }
body.student-page #imageViewer #annotationWorkbench .annotation-brush-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; min-width: 0; }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-brush-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 60px; padding: 4px 0 !important; border: 1px solid transparent !important; border-radius: 7px !important;
  font-size: 11px; line-height: 1.1; box-shadow: none !important;
}
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-brush-card.active {
  background: var(--annotation-amber-soft) !important; border-color: var(--annotation-line) !important; color: var(--annotation-ink) !important;
}
body.student-page #imageViewer #annotationWorkbench .annotation-brush-icon {
  display: block; width: 22px; height: 22px; background: currentColor;
  mask: var(--brush-icon) center / contain no-repeat; -webkit-mask: var(--brush-icon) center / contain no-repeat;
}
body.student-page #imageViewer #annotationWorkbench .annotation-brush-card canvas { display: block; width: 36px; height: 10px; pointer-events: none; }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-brush-settings .annotation-width-control {
  grid-template-columns: 1fr 38px; gap: 0; min-width: 0; width: 100%; margin: 0; padding-left: 9px; box-sizing: border-box; border-left: 1px solid var(--annotation-line); align-items: center;
}
body.student-page #imageViewer #annotationWorkbench .annotation-width-label { font-size: 10px; color: var(--annotation-muted); }
body.student-page #imageViewer #annotationWorkbench .annotation-brush-settings .annotation-width-control output { font-size: 10px; text-align: right; color: var(--annotation-ink); }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-brush-settings .annotation-width-control input { grid-column: 1 / -1; height: 32px; width: 100%; }
body.student-page #imageViewer #annotationWorkbench .annotation-color-options,
body.student-page #imageViewer #annotationWorkbench .annotation-extra-colors { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 1px; border-top: 1px solid var(--annotation-line); padding-top: 3px; }
body.student-page #imageViewer #annotationWorkbench .annotation-extra-colors[hidden] { display: none !important; }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row :is(.annotation-swatch, .annotation-palette-more) {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; min-height: 40px; height: 40px;
  padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 7px !important; box-shadow: none !important;
}
body.student-page #imageViewer #annotationWorkbench .annotation-swatch-dot {
  display: block; box-sizing: border-box; width: 24px; height: 24px; border: 1px solid #aaa8; border-radius: 50%; background: var(--swatch); pointer-events: none;
}
body.student-page #imageViewer #annotationWorkbench .annotation-swatch.active .annotation-swatch-dot { outline: 1.5px solid var(--annotation-ink); outline-offset: 3px; }
body.student-page #imageViewer #annotationWorkbench .annotation-swatch.active .annotation-swatch-dot::after {
  content: ""; display: block; width: 100%; height: 100%; background: #fff;
  mask: url('/assets/museum/r210/icons/check.svg') center / 16px no-repeat; -webkit-mask: url('/assets/museum/r210/icons/check.svg') center / 16px no-repeat;
}
body.student-page #imageViewer #annotationWorkbench [data-annotation-color="#ffffff"].active .annotation-swatch-dot::after,
body.student-page #imageViewer #annotationWorkbench [data-annotation-color="#e1bd26"].active .annotation-swatch-dot::after { background: #302719; }
body.student-page #imageViewer #annotationWorkbench .annotation-palette-more > span { display: block; width: 23px; height: 23px; background: var(--annotation-ink); mask: url('/assets/museum/r215/icons/palette.svg') center / contain no-repeat; -webkit-mask: url('/assets/museum/r215/icons/palette.svg') center / contain no-repeat; }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-palette-more[aria-expanded="true"] { background: var(--annotation-amber-soft) !important; }
body.student-page #imageViewer #annotationWorkbench .annotation-palette-more.has-selected-color > span { background: var(--selected-color); }
body.student-page #imageViewer #annotationWorkbench .annotation-color-name { grid-column: span 2; align-self: center; justify-self: center; font-size: 10px; color: var(--annotation-muted); }
@media (max-width: 350px) { body.student-page #imageViewer #annotationWorkbench .annotation-brush-settings { grid-template-columns: minmax(0, 1fr) 74px; gap: 5px; } body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-palette-panel { padding-inline: 5px !important; } }
/* Override the older workbench's generic button rule, including its !important borders. */
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-tab-panel.annotation-palette-panel .annotation-brush-card { border: 1px solid transparent !important; border-radius: 7px !important; }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-tab-panel.annotation-palette-panel .annotation-brush-card.active { border-color: var(--annotation-line) !important; background: var(--annotation-amber-soft) !important; }
body.student-page #imageViewer #annotationWorkbench.annotation-two-row .annotation-tab-panel.annotation-palette-panel :is(.annotation-swatch,.annotation-palette-more) { border: 0 !important; border-radius: 7px !important; }