:root {
  --border-light: #dddddd;
  --contrast-tool-foreground: #e5ddd4;
  --contrast-tool-background: #735e48;
  --readout-color: var(--minimumgraytext);
  --readout-color-bg: white;
  --contrast-readout-red: #ce0000;
  --contrast-readout-red-bg: #ffdbdb;

  --contrast-readout-yellow: #7b7500;
  --contrast-readout-yellow-bg: #fffdcf;
  --contrast-readout-green: #427500;

  --contrast-readout-green: #007a04;
  --contrast-readout-green-bg: #c8f3ca;
  --contrast-readout-blue: #0965c7;
  --contrast-readout-blue-bg: #daecff;
  --contrast-readout-gray: #676767;
  --border-color-square: rgba(112, 112, 112, 0.3);
}
body.darkmode {
  --border-light: #2e2e2e;
  --contrast-readout-red: #ef7878;
  --contrast-readout-red-bg: #3b1c1c;
  --contrast-readout-yellow: #d3cc44;
  --contrast-readout-yellow-bg: #3b391c;
  --contrast-readout-green-bg: #2e4216;
  --contrast-readout-green: #17c21d;
  --contrast-readout-green-bg: #1b3b1c;
  --contrast-readout-blue: #75b8ff;
  --contrast-readout-blue-bg: #1c2b3b;
  --contrast-readout-gray: #909090;
}
body.high-contrast {
  --border-light: var(--high-contrast-foreground);
  --contrast-readout-blue: var(--high-contrast-foreground);
  --contrast-readout-green: var(--high-contrast-foreground);
  --contrast-readout-yellow: var(--high-contrast-foreground);
  --contrast-readout-red: var(--high-contrast-foreground);
}

.entire-contrast-tool-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: var(--site-width);
  max-width: 67em;

  div {
    transition:
      color 0.25s,
      border-color 0.25s;
  }
  input {
    transition:
      color 0.25s,
      border-color 0.25s;
  }
  button {
    transition:
      color 0.25s,
      background-color 0.25s,
      border-color 0.25s;
  }
  label {
    transition: border-color 0.25s;
  }
}

.settings {
  button {
    position: relative;
    z-index: 2;
    padding: var(--gap) var(--gap-150);
    text-align: center;
    text-wrap: balance;
    display: flex;
    align-items: center;
    gap: var(--gap);
    color: var(--foreground);
    font-family: "Icon Font", "Topology";
    background-color: rgba(0, 0, 0, 0);
    border: 1.5px solid var(--border-light);
    cursor: pointer;
  }
  .button:hover {
    background-color: color-mix(
      in srgb,
      var(--minimum-gray) 10%,
      rgba(0, 0, 0, 0)
    );
  }
  .button:active {
    background-color: color-mix(
      in srgb,
      var(--minimum-gray) 20%,
      rgba(0, 0, 0, 0)
    );
  }
}

.button-segmented {
  display: flex;
}

.button-segmented .button {
  border-left: 0px;
}
.button-segmented .button:first-child {
  border-left: 1.5px solid var(--border-light);
  border-radius: var(--gap-75) 0 0 var(--gap-75);
}
.button-segmented .button:last-child {
  border-radius: 0 var(--gap-75) var(--gap-75) 0;
}
#contrast-float-center {
  padding: 0 var(--gap-150);
}

/* checkboxes*/
input[type="checkbox"] {
  appearance: none;
  padding: 0.4em;
  width: calc(var(--gap) * 1.5);
  height: calc(var(--gap) * 1.5);
  border: 2px solid #424242;
  border-radius: 0.3em;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  color: var(--foreground);
  padding: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type="checkbox"]:checked::before {
  font-family: "Icon Font";
  content: "";
  font-size: 0.55em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15em;
  margin-right: 0.025em;
  font-variation-settings: "wght" calc(900 + (var(--mod-weight)) * 0.6);
}
.high-contrast input[type="checkbox"]:checked::before {
  border-color: var(--foreground);
}
label:hover {
  background-color: color-mix(in srgb, var(--minimum-gray) 10%, transparent);
}
label:active {
  background-color: color-mix(in srgb, var(--minimum-gray) 20%, transparent);
}

/* text styles  */
bold {
  font-variation-settings:
    "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
}
.text-medium-small {
  font-family: "Topology";
  font-variation-settings:
    "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  letter-spacing: 0.1em;
  font-feature-settings: var(--salt);
}
.text-bold-small {
  font-family: "Topology";
  font-variation-settings:
    "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  letter-spacing: 0.1em;
  font-feature-settings: var(--salt);
}
.contrast-color-title {
  font-variation-settings:
    "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  font-size: 0.8em;
}

input {
  font-feature-settings: var(--salt);
}

/* buttons  */
.contrast-copy-button {
  position: absolute;
  height: 2.3em;
  border-radius: 0 var(--gap-75) var(--gap-75) 0;
  border: none;
  padding: var(--gap-150);
  background-color: transparent;
  cursor: pointer;
  color: var(--purple-text);
  display: flex;
  gap: var(--gap-75);
  align-items: center;
  font-weight: unset;
  color: var(--minimum-gray);
  font-variation-settings:
    "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  touch-action: manipulation;
}
.contrast-copy-button:hover {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 10%,
    rgba(0, 0, 0, 0)
  );
  color: var(--foreground) !important;
}
.contrast-copy-button:active {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 20%,
    rgba(0, 0, 0, 0)
  );
  color: var(--foreground);
}
.contrast-eyedropper-button {
  height: 2.5em;
  width: 2.5em;
  border-radius: var(--gap-75);
  border: 1.5px solid var(--border-light);
  padding: var(--gap);
  background-color: transparent;
  cursor: pointer;
  color: var(--purple-text);
  display: flex;
  gap: var(--gap-75);
  align-items: center;
  font-weight: unset;
  color: var(--minimum-gray);
  font-variation-settings:
    "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
}
.contrast-eyedropper-button:hover {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 10%,
    rgba(0, 0, 0, 0)
  );
  color: var(--foreground) !important;
}
.contrast-eyedropper-button:active {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 20%,
    rgba(0, 0, 0, 0)
  );
  color: var(--foreground) !important;
}

.contrast-apply-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gap-200);
}
.contrast-apply-label-text {
  position: absolute;
  color: var(--contrast-apply-color);
}
.contrast-apply-label-background {
  width: 2.5em;
  height: 2.5em;
  max-height: 1.5em;
  position: absolute;
  background-color: color-mix(
    in srgb,
    var(--contrast-apply-color) 10%,
    var(--background)
  );
  border-radius: var(--gap);
  transition:
    max-height 100ms,
    border-color 0.25s !important;
}
.contrast-apply-button {
  --contrast-apply-color: var(--contrast-readout-gray);
  height: 2.5em;
  width: 2.5em;
  border-radius: var(--gap-75);
  border: 1.5px solid rgba(0, 0, 0, 0);
  padding: var(--gap);
  background-color: transparent;
  cursor: pointer;
  display: flex;
  gap: var(--gap-75);
  align-items: center;
  font-weight: unset;
  color: var(--minimum-gray);
  font-variation-settings:
    "wght" calc(600 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: max-height 50ms;
}

.contrast-apply-button:hover:has(.contrast-apply-label-background)
  .contrast-apply-label-background {
  max-height: 2.5em;
  border-radius: var(--gap-75);
}
.contrast-apply-button:active:has(.contrast-apply-label-background)
  .contrast-apply-label-background {
  background-color: color-mix(
    in srgb,
    var(--contrast-apply-color) 20%,
    var(--background)
  );
}
.high-contrast .contrast-apply-button {
  --contrast-apply-color: var(--high-contrast-foreground);
}

.high-contrast .contrast-apply-label-background {
  background-color: unset;
}
.contrast-apply-button-a {
  /* --contrast-apply-color: var(--contrast-readout-yellow); */
}

.contrast-apply-button-aa {
  /* --contrast-apply-color: var(--contrast-readout-green); */
}

.contrast-apply-button-aaa {
  /* --contrast-apply-color: var(--contrast-readout-blue); */
}

/* wrappers  */
.contrast-colors-wrapper {
  border: 1.5px solid var(--border-light);
  border-radius: var(--gap-150);
}
.contrast-color-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-150);
  padding: var(--gap-150);
}
.contrast-color-wrapper.settings {
  gap: var(--gap-200);
}
.contrast-colors-wrapper .contrast-color-wrapper:not(:first-child) {
  border-top: 1.5px solid var(--border-light);
}
.contrast-content-wrapper {
  display: flex;
  gap: var(--gap) calc(var(--gap-200) * 2);
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.contrast-float-right .contrast-content-wrapper {
  flex-direction: row-reverse;
}
@media all and (max-width: 470px) {
  .contrast-content-wrapper {
    flex-direction: column;
    align-content: center;
    align-items: center;
  }
}

.contrast-main-content-wrapper:has(.contrast-picker) {
  gap: var(--gap-75);
  width: min-content;
}

.contrast-text-and-buttons {
  position: relative; /*so it scrolls properly in the history box */
  display: flex;
  align-items: center;

  gap: var(--gap-75);
  height: 2em;
}
.contrast-text-and-buttons:has(.contrast-eyedropper-button) {
  justify-content: space-between;
}

/* text box  */
.contrast-main-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-75);
}
.contrast-text-box-wrapper-wrapper-wrapper {
  display: flex;
}

.contrast-picker ~ .contrast-text-box-wrapper-wrapper-wrapper {
  /* justify-content: center; */
}

.contrast-text-box-wrapper-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.contrast-text-box-wrapper {
  display: flex;
  align-items: center;
}
.contrast-color-picker-wrapper {
  padding: var(--gap-75);
  border: 1.5px solid var(--border-light);
  border-radius: var(--gap-75);
  display: flex;
  align-items: center;
  padding-left: calc(1em + var(--gap) + var(--gap-150));
  width: 8em;
  background-color: rgba(0, 0, 0, 0);
  color: var(--foreground);
  height: 1.5em;
}

.hue-box .contrast-color-picker-wrapper {
  padding-left: unset;
  width: 2.5em;
  border: unset;
  text-align: center;
}
.oklch-picker .hue-box .contrast-color-picker-wrapper {
  width: 3.25em;
  text-align: left;
  padding-left: var(--gap-25);
}

.contrast-text-box-wrapper-wrapper-wrapper:has(.hue-box) {
  display: flex;
  align-items: center;
  padding: var(--gap-25) var(--gap-75);
}

.picker-and-hue-box-wrapper {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--border-light);
  border-radius: var(--gap-75);
}
/* OKLCH hue magic -- hue: 0..1 -> 0..360deg */
.oklch-picker .picker-and-hue-box-wrapper {
  --oklch-h-norm: 0; /* 0..1 */
  --oklch-h: calc(var(--oklch-h-norm) * 360deg);
  --oklch-l: 0.65;
  --oklch-c: 0.18; /* keep low to avoid clipping */
  --chroma-ui-l: 0.8;
}

/* checkbox  */
.contrast-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
  padding-right: var(--gap-150);
  cursor: pointer;
  border-radius: var(--gap);
  font-size: 0.8em;
  border: 1.5px solid var(--border-light);
  width: fit-content;
  user-select: none;
  touch-action: manipulation;
}

.high-contrast .contrast-checkbox input[type="checkbox"] {
  border: 2px solid var(--foreground);
}

/* color picker  */
:root {
  --contrast-picker-height: 8.5em;
  --contrast-picker-width: 12em;
}

.contrast-picker-size-0 {
  --contrast-picker-height: 4.1em;
  --contrast-picker-width: inherit;
}
.contrast-picker-size-1 {
  --contrast-picker-height: 8.5em;
  --contrast-picker-width: 12em;
}
.contrast-picker-size-2 {
  --contrast-picker-height: 15em;
  --contrast-picker-width: 18em;
}
.contrast-picker {
  position: relative;
  height: var(--contrast-picker-height);
  width: var(--contrast-picker-width);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, hsl(1, 100%, 50%), rgba(255, 255, 255, 0));
  user-select: none;
  border-radius: var(--gap-75) var(--gap-75) 0 0;
  touch-action: pinch-zoom;
  border-bottom: 1.5px solid var(--border-light);
  transition:
    height 0.2s,
    width 0.2s,
    border-color 0.25s !important;
}
.oklch-picker .contrast-picker {
  /* background: linear-gradient(
      0deg,
      oklch(0 0 var(--oklch-h)) 0%,
      oklch(0 0 var(--oklch-h) / 0) 100%
    ),
    linear-gradient(
      90deg in oklch,
      oklch(1 0 var(--oklch-h)) 0%,
      oklch(1 0 var(--oklch-h) / 0) 100%
    ),
    linear-gradient(
      to right,
      oklch(1 0 var(--oklch-h)) 0%,
      oklch(1 var(--oklch-c) var(--oklch-h)) 100%
    ); */
  background: none;
}
.oklch-canvas {
  display: block;
  height: var(--contrast-picker-height);
  width: var(--contrast-picker-width);
  border-radius: var(--gap-50);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.contrast-picker .circle {
  --box-shadow-gray: #939393;
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  border: 0.2em solid #fff;
  border-radius: 50%;
  pointer-events: none;
  /* transform: translate(-14px, -14px); */
  transform: translate(-50%, -50%);
  box-shadow:
    rgba(127, 127, 127, 0.5) 0 0 0 1px,
    rgba(127, 127, 127, 0.5) 0 10px 10px -5px;

  box-shadow: var(--box-shadow-gray) 0 0 0 1px;
  background-color: white;
  user-select: none;
  touch-action: manipulation;
  /* filter: drop-shadow(0 0.15em 0.25rem rgba(0, 0, 0, .25)); */
  transition:
    corner-left-shape 0.1s,
    box-shadow 0.25s !important;
}
.high-contrast .contrast-picker .circle {
  --box-shadow-gray: black;
}

/* change circle to a teardrop shape when out of gamut  */
.contrast-picker .circle.is-out-of-gamut {
  corner-left-shape: superellipse(0);
}

.contrast-picker .circle-mini {
  --box-shadow-gray: #939393;
  position: absolute;
  width: 0.1em;
  height: 0.1em;
  border: 0.2em solid #fff;
  border-radius: 50%;
  pointer-events: none;
  /* transform: translate(-8.25px, -8.25px); */
  transform: translate(-50%, -50%);

  box-shadow:
    rgba(127, 127, 127, 0.5) 0 0 0 1px,
    rgba(127, 127, 127, 0.5) 0 10px 10px -5px;

  box-shadow: var(--box-shadow-gray) 0 0 0 1px;
  background-color: white !important;
  user-select: none;
  touch-action: manipulation;
  transition: box-shadow 0.25s !important;
  /* filter: drop-shadow(0 0.15em 0.25rem rgba(0, 0, 0, .25)); */
}
.high-contrast .contrast-picker .circle-mini {
  --box-shadow-gray: black;
}

.color-slider {
  width: 100%;
  height: 0.5em;
  appearance: none;
  cursor: pointer;
  border-radius: 1em;
  user-select: none;
  touch-action: manipulation;
}

/* OKLCH defaults (override per picker instance in JS or inline style) */
:root {
  --oklch-h: 30deg;
  --oklch-l: 0.65;
  --oklch-c-max: 0.37; /* sane-ish for sRGB; tune or compute */
  --chroma-ui-l: 0.75;
  --oklch-c-ui: 0.25;
}

.hue-slider {
  background: linear-gradient(
    to right,
    hsl(0 100% 50%),
    hsl(60 100% 50%),
    hsl(120 100% 50%),
    hsl(180 100% 50%),
    hsl(240 100% 50%),
    hsl(300 100% 50%),
    hsl(360 100% 50%)
  );
}
/* OKLCH hue ramp (approximation, but honest) */
.oklch-picker .hue-slider {
  --hue-slider-lightness: 0.75;
  --hue-slider-chroma: 0.25;
  background: linear-gradient(
    to right in oklch,
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 0deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 30deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 60deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 90deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 120deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 150deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 180deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 210deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 240deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 270deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 300deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 330deg),
    oklch(var(--hue-slider-lightness) var(--hue-slider-chroma) 360deg)
  );
}

/* Lightness is just L: 0..1 */
.lightness-slider {
  background: linear-gradient(to right in oklch, #000, #fff);
}

/* Chroma: 0..Cmax at the current hue + lightness */
.oklch-picker .chroma-slider {
  background: linear-gradient(
    to right,
    oklch(var(--chroma-ui-l) 0 var(--oklch-h)),
    oklch(var(--chroma-ui-l) 0.25 var(--oklch-h))
  );
}

/* Optional: make slider thumb visible consistently */
.color-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s;
}
.color-slider::-moz-range-thumb {
  width: 1em;
  height: 1em;
  border-radius: 999px;
  background: #fff;
  border: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s;
}

.high-contrast .color-slider {
  border: 1.5px solid var(--foreground);
}

.color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--gap-150);
  height: var(--gap-300);
  border-radius: 2em;
  cursor: pointer;
  border: 1.5px solid rgba(127, 127, 127, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.hue-slider::-webkit-slider-thumb {
  background: var(--contrast-tool-foreground);
}
.oklch-picker .hue-slider::-webkit-slider-thumb {
  background: oklch(0.8 0.3 var(--oklch-h));
}
.oklch-picker .chroma-slider::-webkit-slider-thumb {
  background: oklch(0.8 var(--oklch-c-ui, 0) var(--oklch-h));
}
.oklch-picker .lightness-slider::-webkit-slider-thumb {
  background: oklch(var(--oklch-l) 0 0);
}
.hue-slider::-webkit-slider-thumb {
  background: var(--contrast-tool-foreground);
}
#hue-slider-2::-webkit-slider-thumb {
  background: var(--contrast-tool-background);
}
.high-contrast {
  .hue-slider::-webkit-slider-thumb {
    border: 1.5px solid var(--foreground);
  }
  .oklch-picker .hue-slider::-webkit-slider-thumb {
    border: 1.5px solid var(--foreground);
  }
  .oklch-picker .chroma-slider::-webkit-slider-thumb {
    border: 1.5px solid var(--foreground);
  }
  .oklch-picker .lightness-slider::-webkit-slider-thumb {
    border: 1.5px solid var(--foreground);
  }
}

.hue-slider::-moz-range-thumb {
  appearance: none;
  width: var(--gap-150);
  height: var(--gap-300);
  border-radius: 2em;
  background: var(--contrast-tool-foreground);
  cursor: pointer;
  border: 1.5px solid rgba(127, 127, 127, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
#hue-slider-2::-moz-range-thumb {
  background: var(--contrast-tool-background);
}
.high-contrast .hue-slider::-moz-range-thumb {
  border: 1.5px solid var(--foreground);
}
.color-slider::-moz-range-thumb {
  width: var(--gap-150);
  height: var(--gap-300);
  border-radius: 2em;
  cursor: pointer;
  border: 1.5px solid rgba(127, 127, 127, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.hue-slider::-moz-range-thumb {
  background: var(--contrast-tool-foreground);
}

.oklch-picker .hue-slider::-moz-range-thumb {
  background: oklch(0.8 0.3 var(--oklch-h));
}

.oklch-picker .chroma-slider::-moz-range-thumb {
  background: oklch(0.8 var(--oklch-c-ui, 0) var(--oklch-h));
}

.oklch-picker .lightness-slider::-moz-range-thumb {
  background: oklch(var(--oklch-l) 0 0);
}

#hue-slider-2::-moz-range-thumb {
  background: var(--contrast-tool-background);
}

.high-contrast .hue-slider::-moz-range-thumb,
.high-contrast .oklch-picker .hue-slider::-moz-range-thumb,
.high-contrast .oklch-picker .chroma-slider::-moz-range-thumb,
.high-contrast .oklch-picker .lightness-slider::-moz-range-thumb {
  border: 1.5px solid var(--foreground);
}

.contrast-readout-master-wrapper {
  border: 1.5px solid var(--border-light);
  border-radius: var(--gap-150);

  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* contrast readout */
.contrast-readout-and-showcase-wrapper {
  display: flex;
  gap: var(--gap);
  overflow: hidden;
}

.contrast-readout-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-grow: 1;
  width: 6.5em;
  color: var(--readout-color);
  background-color: var(--readout-color-bg);

  padding: var(--gap-25);
}
.entire-contrast-tool-wrapper .contrast-readout-wrapper,
.entire-contrast-tool-wrapper .contrast-readout-wrapper * {
  transition: none !important;
}

.high-contrast .contrast-readout-wrapper {
  background-color: unset;
}

.contrast-readout {
  display: flex;
  width: 2.5em;
  font-size: 2em;
}

.contrast-readout-inner {
  text-align: left;
}

.contrast-readout-results-wrapper {
  width: 12em;
  display: flex;
  align-items: center;
}
.contrast-readout-results {
  display: flex;
  flex-direction: column;
  padding: var(--gap-125) var(--gap);
  gap: var(--gap);
}
.contrast-readout-result {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  gap: var(--gap-75);
  color: var(--minimum-gray);
}
.readout-result-letter {
  min-width: 4em;
  /* color: var(--readout-color); */
  /* background-color: color-mix(
        in srgb,
        var(--readout-color) 10%,
        rgba(0,0,0,0)
      ); */
  text-align: center;
  padding: var(--gap-25);
  border-radius: var(--gap-75);
  font-size: 0.75em;
  letter-spacing: 0.05em;
  font-family: "Icon Font", "Topology";
}
.high-contrast .readout-result-letter {
  background-color: unset;
}

/* showcase  */

.contrast-showcase-master-wrapper {
  color: var(--contrast-tool-foreground);
  background-color: var(--contrast-tool-background);

  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--gap);
  flex-wrap: wrap;

  padding: var(--gap);

  flex-grow: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--gap-150);
  min-width: 4em;
  transition: outline 0.25s !important;
  /* because border was behind background-color  */
  outline: 1.5px solid var(--border-light);
  outline-offset: -1.5px;
}
@media all and (max-width: 900px) {
  .contrast-showcase-master-wrapper {
    flex-direction: column-reverse;
  }
}
@media all and (max-width: 700px) {
  .contrast-showcase-master-wrapper {
    align-items: flex-start;
  }
}
.entire-contrast-tool-wrapper #contrast-showcase-wrapper * {
  transition: none;
}

.contrast-showcase-text {
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  margin-right: var(--gap);
  min-width: max-content;
}

.contrast-showcase-text-large {
  font-size: 18pt;
  text-wrap: nowrap;
}

.contrast-showcase-large-text-and-icons {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* gap: var(--gap-75); */
}

.contrast-showcase-icons-and-text {
  display: flex;
  gap: var(--gap);
}
.contrast-showcase-icons-and-text .icon-font {
  font-size: 0.75em;
}

.contrast-icons-item {
  display: flex;
  gap: var(--gap-75);
  align-items: center;
}

/* generated colors  */
.generated-contrast-text-box .contrast-color-picker-wrapper {
  padding-left: unset;
  padding-right: unset;
  width: 2.5em;
  text-align: center;
}

/* .color-picker-square {
      width: 1em;
      height: 1em;
      background-color:rgb(255, 231, 231);
      position: absolute;
      margin-left: var(--gap-75);
      border-radius: var(--gap-25);
      border: 1.5px solid rgba(112, 112, 112, 0.3);
    } */
.color-picker-square {
  /* ios safari acting different again */
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  width: 1em;
  height: 1em;
  background-color: rgb(255, 231, 231);

  border-radius: var(--gap-25);
  border: 1.5px solid var(--border-color-square);
}
.generated-square-button {
  position: absolute;
  height: 2.3em;
  width: 2.3em;

  border-radius: var(--gap-75) 0 0 var(--gap-75);
  border: none;
  padding: var(--gap-75);
  background-color: transparent;
  cursor: pointer;

  display: flex;
  justify-content: center;
  gap: var(--gap-75);
  align-items: center;

  font-weight: unset;
  color: var(--minimum-gray);
  font-variation-settings:
    "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));

  touch-action: manipulation;
}
.generated-square-button:hover {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 10%,
    rgba(0, 0, 0, 0)
  );
}

.generated-square-button:active {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 20%,
    rgba(0, 0, 0, 0)
  );
}

.generated-matches-container {
  display: flex;
  max-width: 500px;
  flex-direction: column;
  gap: var(--gap-75);
  transition:
    max-height 0.3s,
    max-width 0.3s,
    opacity 0.3s,
    visibility 0.3s,
    border-color 0.25s !important ;
}

/* collapsible behavior on generated colors  */

/* history modules  */
.contrast-title-collapse-toggle-button {
  height: 2.3em;
  width: fit-content;
  font-family: "Topology";

  border-radius: var(--gap-75);
  border: none;
  padding: var(--gap-75);
  background-color: transparent;
  cursor: pointer;

  display: flex;
  justify-content: center;
  gap: var(--gap-75);
  align-items: center;

  font-weight: unset;
  color: var(--minimum-gray);
  font-variation-settings:
    "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  transition:
    color 0.25s,
    background-color 0.25s !important;
}
.contrast-title-collapse-toggle-button:hover {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 10%,
    rgba(0, 0, 0, 0)
  );
  color: var(--foreground) !important;
}

.contrast-title-collapse-toggle-button:active {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 20%,
    rgba(0, 0, 0, 0)
  );
}

.contrast-title-collapse-toggle-button .icon-font {
  transform: rotate(var(--rotate));
  transition: transform ease-out 200ms;
}

.contrast-history {
  width: min-content;
  flex-grow: 1;
  /* min-height: 100px; */
}
@media all and (max-width: 500px) {
  .contrast-main-content-wrapper {
    align-items: center;
  }
}

.contrast-history-box {
  color: var(--minimum-gray);
  border: 1.5px solid var(--border-light);
  padding: var(--gap-75);
  border-radius: var(--gap-75);
  flex-direction: row;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  gap: var(--gap-75);
  max-height: 0px;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.3s,
    max-width 0.3s,
    opacity 0.3s,
    visibility 0.3s,
    border-color 0.25s !important;
  margin-top: -1px; /* for some reason there's a margin on this element. possibly related to css's weird outline/border behavior */
}
@media all and (max-width: 400px) {
  .contrast-history-box {
    width: min-content;
  }
}
/*  */
/*  */
/*  */
/* color contrast info box */

.contrast-history-box .contrast-color-picker-wrapper {
  /* color: var(--minimum-gray); */
}
.contrast-main {
  padding: var(--gap);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.contrast-main.contrast-float-left {
  align-items: flex-start;
}
.contrast-main.contrast-float-right {
  align-items: flex-end;
}
.contrast-main.contrast-float-center {
  align-items: center;
}
@media all and (max-width: 550px) {
  .contrast-main {
    padding: var(--gap);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .contrast-main.contrast-float-left {
    align-items: unset;
  }
  .contrast-main.contrast-float-right {
    align-items: unset;
  }
  .contrast-main.contrast-float-center {
    align-items: unset;
  }
}
.contrast-settings-items {
  display: flex;
  gap: var(--gap-200);
  flex-wrap: wrap;
}

.contrast-settings-items.vertical {
  flex-direction: column;
  gap: var(--gap-75);
}

.contrast-settings-items-horizontal-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-200);
}
.contrast-settings-label {
  font-size: 0.8em;
}
.contrast-info-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex-wrap: wrap;
}
.contrast-info-items {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex-wrap: wrap;
  color: var(--minimum-gray);
}
.contrast-info-items p {
  font-size: 0.8rem;
  text-wrap: pretty;
  margin-block-start: unset;
  margin-block-end: unset;

  transition: color 0.25s;
}
.contrast-info-items-paragraphs {
  display: flex;
  flex-direction: column;
  gap: var(--gap-75);
  flex-wrap: wrap;
}
.contrast-info-items ul {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: 0.8em;
  color: var(--minimum-gray);
  transition: color 0.25s;
}
.contrast-info-items a {
  transition:
    color 0.25s,
    text-decoration 0.25s;
}

/* show more button  */
.contrast-toggle-button {
  height: 2.3em;
  font-size: 0.8em;
  width: fit-content;
  font-family: "Topology";

  border-radius: var(--gap-75);
  border: none;
  padding: var(--gap-75);
  background-color: transparent;
  cursor: pointer;

  display: flex;
  justify-content: center;
  gap: var(--gap-75);
  align-items: center;

  font-weight: unset;
  color: var(--minimum-gray);
  font-variation-settings:
    "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
}
.contrast-toggle-button:hover {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 10%,
    rgba(0, 0, 0, 0)
  );
  color: var(--foreground) !important;
}

.contrast-toggle-button:active {
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 20%,
    rgba(0, 0, 0, 0)
  );
}

.contrast-info-items {
  position: relative;
  max-height: 3em; /* Adjust based on your content */
  overflow: hidden;
  transition:
    max-height 1s,
    color 0.25s !important;
  --show-more-opacity: 1;
}

.contrast-info-items::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    var(--background) 100%
  );
  pointer-events: none;
  opacity: var(--show-more-opacity);
  transition: opacity 1s !important;
}

.contrast-info-items.expanded {
  max-height: 300em; /* Adjust to accommodate your content */
}
@media all and (min-width: 800px) {
  .contrast-info-items.expanded {
    max-height: 100em; /* Adjust to accommodate your content */
  }
}

#contrast-info-show-more-arrow {
  transition: transform 500ms;
  transform: rotate(var(--rotate));
}

/*  */
/*  */
/*  */
/* hover effect on color square buttons */

.generated-square-button::after {
  font-family: "Topology";
  position: absolute;
  top: -0.5em;
  left: -0.5em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background);
  color: var(--foreground);
  border: 1.5px solid var(--border-light);
  font-size: 1em;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 100ms;
  font-variation-settings:
    "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
}

.generated-square-button:hover::after,
.generated-square-button:focus-visible::after {
  opacity: 1;
}

.generated-matches-container .generated-square-button:hover::after,
.generated-matches-container .generated-square-button:focus-visible::after,
.contrast-history-box .generated-square-button:hover::after,
.contrast-history-box .generated-square-button:focus-visible::after {
  content: "↖";
}

#contrast-foreground-color-picker ~ .generated-square-button::after {
  content: "";
  font-family: "Icon Font";
}
#contrast-background-color-picker ~ .generated-square-button::after {
  content: "";
  font-family: "Icon Font";
}
.warning-message {
  color: var(--minimum-gray);
}

/* color spaces  */
.contrast-color-space-wrapper {
  padding: var(--gap-75);
  border: 1.5px solid var(--border-light);
  border-radius: var(--gap-75);
  display: flex;
  align-items: center;
  padding-left: var(--gap);
  width: 18em;
  background-color: rgba(0, 0, 0, 0);
  color: var(--foreground);
  height: 1.5em;
}

.contrast-more-colors {
  input {
    letter-spacing: 0.05em;
  }
}

button.selected {
  font-variation-settings:
    "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  /* border-bottom: 2px solid black; */
  background-color: var(--gray-fill);
}
button.selected:hover {
  background-color: color-mix(in srgb, var(--foreground) 15%, var(--gray-fill));
}

.high-contrast {
  button.selected {
    color: var(--background);
    background-color: var(--foreground);
  }
  button.selected:hover {
    color: var(--background);
    background-color: color-mix(
      in srgb,
      var(--background) 20%,
      var(--foreground)
    );
  }
  button.selected:active {
    color: var(--background);
    background-color: color-mix(
      in srgb,
      var(--background) 40%,
      var(--foreground)
    );
  }
}

.triangle-disclaimer {
  border: 1.5px solid var(--border-light);
  border-radius: var(--gap);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.triangle-text {
  font-size: 0.66em;
  letter-spacing: 0.05em;
  color: var(--minimum-gray);
}
.text.triangle-text {
  padding: 0.5rem;
  padding-bottom: 0;
}
button.triangle-text {
  background-color: unset;
  border: unset;
  font-family: unset;

  font-size: 0.66em;
  letter-spacing: 0.05em;
  color: var(--minimum-gray);
  transition:
    color 0.25s,
    background-color 0.25s;
  padding: 1em;
  text-decoration: underline;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gap-150);
}
button.triangle-text:hover {
  color: var(--foreground);
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 10%,
    rgba(0, 0, 0, 0)
  );
  cursor: pointer;
}
button.triangle-text:active {
  color: var(--foreground);
  background-color: color-mix(
    in srgb,
    var(--minimum-gray) 20%,
    rgba(0, 0, 0, 0)
  );
}
.high-contrast {
  button.triangle-text:hover {
    background-color: color-mix(
      in srgb,
      var(--minimum-gray) 20%,
      rgba(0, 0, 0, 0)
    );
  }
  button.triangle-text:active {
    background-color: color-mix(
      in srgb,
      var(--minimum-gray) 40%,
      rgba(0, 0, 0, 0)
    );
  }
}
.triangle-disclaimer.is-dismissed {
  display: none !important;
}

/*  */
/*  */
/* mobile only readouts */

#contrast-mobile-readouts-container {
  opacity: 0;
  transition: opacity 200ms ease;
}
#contrast-mobile-readouts-container.is-visible {
  opacity: 1;
}
.contrast-mobile-readout-showcase {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--contrast-transparent-foreground);
  border-radius: 2em;
  background-color: var(--gray-fill);
  transition:
    color 0.25s,
    background-color 0.25s,
    border-color 0.25s;
  pointer-events: auto;
  border-color: var(--gray-border);
  top: 4.25em;
  position: fixed;
  z-index: 3;
}
.contrast-mobile-readout-showcase.left {
  left: 8px;
  background-color: var(--readout-color-bg);
}
.high-contrast .contrast-mobile-readout-showcase.left {
  background-color: var(--background);
}
.contrast-mobile-readout-showcase.right {
  right: 8px;
}
#contrast-mobile-readout {
  padding: var(--gap-200);
  width: 2.75em;
  display: flex;
  justify-content: center;
  color: var(--readout-color);
  font-variation-settings:
    "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  font-size: 1.5em;
  padding: 1rem 0.5rem;
  height: 1rem;
  align-items: center;
}
#contrast-mobile-showcase {
  padding: 0 var(--gap-200);
  text-wrap: nowrap;
  overflow: hidden;
  color: var(--contrast-tool-foreground);
  background-color: var(--contrast-tool-background);
  padding: var(--gap-200);
  border-radius: 2em;
  width: fit-content;
}
.contrast-mobile-readouts-container * {
  transition: none;
}