.color-tool-page #container {
}

.tool-main {
  width: 100%;
}

.tool-intro .panel-body {
  margin: 0;
  color: var(--site-ink);
  font-size: 0.85rem;
  line-height: 1.5;
}

#app {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.extractor-panel {
  min-width: 0;
  margin-bottom: 0;
}

.extractor-panel > .panel-body {
  height: calc(100% - 29px);
}

.extractor-panel h3 {
  margin: 16px 0 8px;
  color: var(--site-red);
  font-family: inherit;
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
}

.extractor-panel h3:first-child {
  margin-top: 0;
}

/* the image square is also the uploader: click it while empty, or drop/paste an image any time */
#previewWrap:not(.has-image) { cursor: pointer; }
#previewWrap:not(.has-image):hover::before,
#previewWrap:not(.has-image):focus-visible::before,
#previewWrap.drag::before { color: var(--site-red); }
#previewWrap.drag { box-shadow: inset 0 0 0 2px var(--site-red); }

#buttonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
}

.color-tool-page button {
  padding: 6px 10px;
  border: 1px solid var(--site-ink);
  color: var(--site-surface);
  background: var(--site-red);
  font-family: monospace;
  cursor: pointer;
  box-shadow: var(--raised);
}

.color-tool-page button:hover,
.color-tool-page button:focus-visible {
  color: var(--site-red);
  background: var(--site-surface);
  outline: 2px solid var(--site-red);
  outline-offset: 1px;
}

.color-tool-page button:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

#previewWrap {
  position: relative;
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 8px;
  box-shadow: var(--sunken);
  background: var(--site-surface);
}

#previewWrap::before {
  content: "upload an image";
  position: absolute;
  color: var(--site-steel);
  font-family: inherit;
  font-size: 18px;
}

#previewWrap.has-image::before {
  display: none;
}

#output {
  position: relative;
  z-index: 1;
  display: none;
  max-width: 100%;
  max-height: 420px;
  image-rendering: pixelated;
  box-shadow: var(--drop);
}

#previewWrap.has-image #output {
  display: block;
}

#statusLine {
  color: var(--site-deep);
  font-size: 0.75em;
}

#controls {
  padding: 8px;
  border: 1px solid #333;
  background: var(--site-surface);
}

.control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  margin-bottom: 12px;
  line-height: 1.2;
  font-size: 0.75em;
}

.control:last-child {
  margin-bottom: 0;
}

.control label {
  color: var(--site-deep);
}

.control .value {
  color: var(--site-red);
  font-weight: 700;
}

.control input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--site-red);
}

.control.is-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.control.is-toggle input {
  accent-color: var(--site-red);
}

@media only screen and (max-width: 800px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
  }

  #output {
    max-height: 300px;
  }
}

/* buttons share one line in equal widths, so a row never wraps a lone button */
.even-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
/* too narrow for one line: rows split and each row still fills the full width */
.even-row button { flex: 1 1 88px; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.even-row button.on { color: var(--site-surface); background: var(--site-red); }

/* zoomed in: the canvas keeps its real size times the zoom and the frame scrolls */
#previewWrap.zoomed { display: block; max-height: 420px; overflow: auto; cursor: grab; touch-action: none; }
#previewWrap.zoomed:active { cursor: grabbing; }
#previewWrap.zoomed #output { max-width: none; max-height: none; }

/* trial: black outlines on everything (degrader only until approved) */
:root { --raised: inset 0 0 0 2px #000; --sunken: inset 0 0 0 2px #000; }
#controls, .color-tool-page button { border-color: #000; }
.panel-title { border-bottom-color: #000; }
#zoom button { flex-basis: 40px; }

/* red means on: the stretch of each slider between its clean value and the handle is filled red */
.control input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #222 var(--from, 0%), var(--site-red) var(--from, 0%), var(--site-red) var(--to, 0%), #222 var(--to, 0%));
}
.control input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #222 var(--from, 0%), var(--site-red) var(--from, 0%), var(--site-red) var(--to, 0%), #222 var(--to, 0%));
}