/* The look every explorable's toolbar buttons share (TJ, 2026-10-19: one look, each page's own spot):
   the home link and full-screen button (shared/Toolbar.js), the colour-scale swatch and the
   coloured-prompt toggle (shared/ColorControls.js), and any page button that joins them. Each page's
   own style.css places them and sizes them per mode; this file owns how they look. */
.llmx-tool,
.llmx-tool:link,
.llmx-tool:visited {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid #c4c4c4;
  border-radius: 6px;
  background: #ffffff;
  color: #333333;
  font: 14px/1 sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.llmx-tool:hover {
  background: #eef2fb;
  border-color: #8a9bc4;
}

.llmx-tool:focus-visible {
  outline: 2px solid #3c5aaa;
  outline-offset: 1px;
}

.llmx-tool:disabled {
  cursor: default;
  opacity: 0.45;
}

.llmx-tool[hidden] {
  display: none !important;
}

.llmx-tool svg {
  display: block;
  pointer-events: none;
}

/* A toggle that is on (the coloured prompt). */
.llmx-tool[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #333333;
}

/* The colour-scale button's face: the scale in use, least likely on the left. */
.scale_swatch {
  display: block;
  width: 28px;
  height: 10px;
  border-radius: 3px;
  pointer-events: none;
}