/* The colour picker: the picking surface, the format list, the image panel and
   the derived palettes. Hero, content sections, cards, table and FAQ all come
   from tool_page.css. */

/* The starfield behind the hero is a full-size absolutely positioned image at
   z-index 0, so anything interactive on top of it needs its own stacking
   context or the image swallows every click. */
.cp {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto 56px auto;
  padding: 0 16px;
}

.cp-panel {
  margin-top: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.cp-panel-title {
  margin: 0 0 6px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.cp-subtitle {
  margin: 18px 0 10px 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 600;
}

.cp-hint {
  margin: 0 0 14px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 22px;
}

.cp-field-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
}

/* Picker */

.cp-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 24px;
  align-items: start;
}

.cp-picker-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.cp-field {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
  display: block;
}

.cp-field:focus-visible {
  outline: 2px solid #8c46ff;
  outline-offset: 3px;
}

.cp-sliders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.cp-slider-label {
  flex: 0 0 84px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.cp-hue,
.cp-alpha {
  flex: 1 1 auto;
  height: 14px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
}

.cp-hue {
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

/* The alpha track shows the colour fading over a checkerboard, because a
   gradient to transparent over a dark panel just looks like a gradient to
   black. */
.cp-alpha {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0), var(--cp-alpha-to, #fff)),
    repeating-conic-gradient(#7a7a7a 0% 25%, #545454 0% 50%) 0 0 / 12px 12px;
}

.cp-hue::-webkit-slider-thumb,
.cp-alpha::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.cp-hue::-moz-range-thumb,
.cp-alpha::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.cp-current {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.cp-swatch-large {
  height: 96px;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background-image: repeating-conic-gradient(#7a7a7a 0% 25%, #545454 0% 50%);
  background-size: auto, 16px 16px;
}

.cp-current-body {
  min-width: 0;
}

.cp-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cp-input-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 22px;
  padding: 11px 14px;
  transition: border-color 0.2s ease;
}

.cp-input-row input[type="text"]:focus {
  outline: none;
  border-color: #8c46ff;
}

.cp-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cp-icon-button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.cp-swatch-small {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
}

.cp-name {
  margin: 10px 0 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.cp-notice {
  margin: 10px 0 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 88, 88, 0.16);
  border: 0.5px solid rgba(255, 120, 120, 0.34);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
}

/* Reserves one line's height whether or not it is saying anything, so a copy
   confirmation appearing and vanishing moves nothing on the page. */
.cp-status {
  min-height: 20px;
  margin: 12px 0 0 0;
  color: #6ee7a8;
  font-size: 13px;
  line-height: 20px;
}

/* Formats */

.cp-formats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.cp-format-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.cp-format-name {
  flex: 0 0 56px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.cp-format-value {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}

.cp-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cp-copy:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Image */

.cp-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 20px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.26);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cp-drop i {
  font-size: 26px;
  color: #b38bff;
}

.cp-drop:hover,
.cp-drop.is-over,
.cp-drop:focus-visible {
  border-color: #8c46ff;
  background: rgba(140, 70, 255, 0.12);
  outline: none;
}

.cp-file {
  display: none;
}

.cp-canvas-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.cp-image-canvas {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: crosshair;
  display: block;
}

.cp-loupe {
  position: absolute;
  width: 124px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--cp-loupe-color, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  background: #000;
}

/* Rides the pointer for a moment after a pick, so the confirmation is where
   the eye already is rather than somewhere the reader has to go looking. */
.cp-toast {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8, 2, 18, 0.92);
  border: 0.5px solid rgba(110, 231, 168, 0.5);
  color: #6ee7a8;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.cp-toast.is-fading {
  opacity: 0;
}

.cp-image-actions {
  margin-top: 14px;
}

/* Swatches */

.cp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-swatch {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 104px;
  height: 76px;
  padding: 0 0 6px 0;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.cp-swatch:hover {
  transform: translateY(-2px);
}

.cp-swatch-caption {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 16px;
}

.cp-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.cp-swatch--scale {
  width: 78px;
  height: 64px;
}

/* Harmony tabs */

.cp-harmony-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.cp-tab {
  padding: 7px 14px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cp-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cp-tab.is-active {
  border-color: #8c46ff;
  background: rgba(140, 70, 255, 0.22);
  color: #fff;
}

/* Export */

.cp-export {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.cp-export input {
  width: 180px;
  border-radius: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  padding: 11px 14px;
}

.cp-export input:focus {
  outline: none;
  border-color: #8c46ff;
}

.cp-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-export-out {
  width: 100%;
  margin-top: 12px;
  resize: vertical;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.34);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 21px;
  padding: 12px 14px;
}

.cp-export-out:focus {
  outline: none;
  border-color: #8c46ff;
}

/* Contrast */

.cp-input-row--narrow {
  max-width: 320px;
}

.cp-contrast {
  margin-top: 18px;
}

.cp-contrast-ratio {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cp-contrast-value {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

.cp-contrast-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 56px;
  border-radius: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  font-size: 24px;
  font-weight: 600;
}

.cp-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.cp-badge {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 15px;
}

.cp-badge.is-pass {
  border-color: rgba(110, 231, 168, 0.4);
  background: rgba(110, 231, 168, 0.12);
}

.cp-badge.is-fail {
  border-color: rgba(255, 120, 120, 0.34);
  background: rgba(255, 88, 88, 0.12);
}

.cp-badge-note {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.cp-badge-verdict {
  font-size: 13px;
  font-weight: 600;
}

.cp-badge.is-pass .cp-badge-verdict {
  color: #6ee7a8;
}

.cp-badge.is-fail .cp-badge-verdict {
  color: #ff9b9b;
}

@media (max-width: 860px) {
  .cp-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .cp-slider-label {
    flex: 0 0 64px;
  }

  .cp-swatch {
    width: calc(50% - 5px);
  }

  .cp-swatch--scale {
    width: calc(33.333% - 4px);
  }

  .cp-export input {
    width: 100%;
  }

  .cp-export-buttons .tp-btn {
    flex: 1 1 calc(50% - 4px);
  }
}