.color-search {

  .color-search-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: 20px;

    /* Leaves the explore labels' bottom padding hanging below the tabs, so
       their text, not their box, lines up with the tabs' bottom edge. */
    .color-mode-tabs {
      display: flex;
      gap: var(--space-3);
      margin-bottom: 4px;
    }

    .tab {
      display: inline-flex;
      flex: 0 0 210px;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 48px;
      padding: 8px 14px;
      border: 1px solid var(--color-gray-5);
      border-radius: var(--radius-round);
      background-color: var(--color-white);
      color: #777b73;
      font-family: var(--font-stack);
      font-size: var(--font-size-2);
      white-space: nowrap;
      cursor: pointer;
      transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease;

      &:hover {
        border-color: #999999;
        background-color: #f5f5f3;
      }

      &[aria-selected="true"] {
        border-color: #b8b8b8;
        background-color: var(--color-gray-4);
        color: var(--color-black);

        &:hover {
          background-color: var(--color-gray-5);
        }
      }

      &:focus-visible {
        outline: 1px solid var(--color-black);
        outline-offset: -2px;
      }

      svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5px;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* The same 8px gap from the curve as above and below the circle. */
      &:has(.preview) {
        justify-content: flex-start;
        padding-left: 8px;
      }

      .preview {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        margin-right: 12px;
        border: 1px solid rgba(0, 0, 0, 0.16);
        border-radius: 50%;
      }

      /* Rounded on the left to sit in the pill's curve, 3px in from it as
         from the top and bottom. */
      &:has(.thumb:not([hidden])) {
        justify-content: flex-start;
        padding-left: 3px;

        svg {
          display: none;
        }
      }

      .thumb {
        flex: 0 0 48px;
        width: 48px;
        height: 40px;
        margin-right: 12px;
        border-radius: 999px 0 0 999px;
        object-fit: cover;

        &[hidden] {
          display: none;
        }
      }
    }
  }

  .color-explore {
    display: flex;
    align-items: center;
    gap: var(--space-4);

    /* Top padding outweighs bottom: MaharamNeue sits high in its em box. */
    .panel-link {
      padding: 7px 10px 5px;
      border: 0;
      border-radius: var(--radius-3);
      background: none;
      color: #777b73;
      font-family: var(--font-stack);
      font-size: var(--font-size-2);
      line-height: 1;
      cursor: pointer;
      transition:
        background-color var(--transition-fast),
        color var(--transition-fast);

      &:hover {
        background-color: #fff3e8;
        color: #333333;
      }

      &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
      }

      &[aria-expanded="true"] {
        background-color: var(--color-primary-tint);
        color: #93430f;
      }

      &:disabled {
        background: none;
        color: #c2c2c2;
        cursor: default;
      }
    }
  }

  .side-panel {
    .color-harmony-groups {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .color-harmony-group {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .color-harmony-label {
      margin: 0 0 10px;
      color: #777777;
      font-size: var(--font-size-2);
      font-weight: 400;
      letter-spacing: 0.05em;
    }

    .color-harmony-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* The hex shows in a tooltip below, in place of a title attribute. */
    .color-harmony-swatch {
      position: relative;
      display: block;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.16);
      border-radius: 50%;
      cursor: pointer;

      &:hover {
        border-color: #111111;
      }

      &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
      }

      /* The color the results on screen are for. */
      &.is-current {
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-black);
      }

      &::after {
        content: "#" attr(data-hex);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        z-index: 2;
        padding: 6px 8px;
        border-radius: 3px;
        background-color: var(--color-white);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
        color: #777b73;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -4px);
        transition:
          opacity 160ms ease,
          transform 160ms ease;
      }

      &:hover::after,
      &:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    .color-harmony-empty {
      margin: 0;
      color: #888888;
      font-size: var(--font-size-2);
      line-height: 1.4;
    }

    /* Five across. The rule spans the row, setting colors picked off the image
       apart from the extracted ones. */
    .color-extract-palette {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      width: 324px;
      max-width: 100%;

      .color-harmony-swatch {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
      }

      hr {
        flex: 0 0 100%;
        margin: 0;
        border: 0;
        border-top: 1px solid #dedede;
      }

      &:empty {
        display: none;
      }

      &:not(:empty) + .color-harmony-empty {
        display: none;
      }
    }
  }

  .color-search-form {
    /* Not a positioned ancestor: Coloris appends its panel to document.body and
       positions it in document coordinates, so a containing block here would shift
       the panel by this form's offset. */

    --color-field-height: 214px;

    margin-bottom: 18px;

    .color-field {
      position: relative;
      display: grid;
      place-items: center;
      height: var(--color-field-height);
      margin-bottom: 62px;
      border-radius: var(--radius-3);
      background-color: var(--color-gray-4);
      cursor: pointer;

      &[hidden] {
        display: none;
      }

      @media (prefers-reduced-motion: no-preference) {
        &.is-refreshing {
          animation: color-field-refresh 360ms ease both;
        }
      }

      .anchor {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 1px;

        .clr-field button {
          display: none;
        }

        input {
          display: block;
          width: 1px;
          height: 1px;
          padding: 0;
          border: 0;
          opacity: 0;
          pointer-events: none;
        }
      }

      .edit-color {
        position: relative;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: var(--radius-2);
        background-color: rgba(255, 255, 255, 0.9);
        color: #777b73;
        cursor: pointer;
        transition:
          opacity 180ms ease,
          transform 180ms ease;

        svg {
          width: 16px;
          height: 16px;
        }

        &:focus-visible {
          outline: 2px solid var(--color-primary);
          outline-offset: 2px;
        }

        &::before,
        &::after {
          position: absolute;
          top: 50%;
          z-index: 10;
          opacity: 0;
          pointer-events: none;
          transition: opacity var(--transition-fast);
        }

        &::before {
          content: attr(data-tooltip);
          left: calc(100% + 10px);
          padding: 7px 18px 5px;
          border-radius: var(--radius-2);
          background-color: var(--color-white);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
          color: #555b54;
          font-family: var(--font-stack);
          font-size: var(--font-size-3);
          line-height: 1;
          white-space: nowrap;
          transform: translateY(-50%);
        }

        &::after {
          content: "";
          left: calc(100% + 4px);
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: 6px solid var(--color-white);
          filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.14));
          transform: translateY(-50%);
        }

        &:hover::before,
        &:hover::after {
          opacity: 1;
        }
      }

      /* Touch has no hover to reveal it, so it stays visible there. */
      @media (hover: hover) {
        .edit-color {
          opacity: 0;
          transform: translateY(4px);
        }

        &:hover .edit-color,
        &:focus-within .edit-color {
          opacity: 0.94;
          transform: translateY(0);
        }
      }
    }

    /* The same box as .color-field, which it stands in for. */
    .color-image {
      position: relative;
      height: 450px;
      margin-bottom: 62px;
      border-radius: var(--radius-3);
      background-color: #f1f1ee;

      /* Replays each time the panel is unhidden. color-mode hides the panel
         once the collapse finishes. */
      @media (prefers-reduced-motion: no-preference) {
        animation: color-image-expand 360ms cubic-bezier(0.22, 0.61, 0.36, 1);

        &.is-collapsing {
          animation: color-image-collapse 360ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }
      }

      &[hidden] {
        display: none;
      }

      &.is-loaded {
        background-color: #eeeeeb;
      }

      .upload {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        gap: 6px;
        padding: var(--space-4);
        border: 2px dashed #777b73;
        border-radius: inherit;
        background-color: rgba(255, 255, 255, 0.86);
        color: #858a83;
        font-family: var(--font-stack);
        font-size: var(--font-size-2);
        text-align: center;
        cursor: pointer;

        strong {
          color: #555b54;
          font-size: var(--font-size-3);
          font-weight: 500;
        }

        .error {
          color: var(--color-red);

          &:empty {
            display: none;
          }
        }

        &:focus-visible {
          outline: 2px solid var(--color-primary);
          outline-offset: 2px;
        }
      }

      &.is-dragging .upload {
        border-color: var(--color-black);
        background-color: rgba(240, 240, 237, 0.96);
      }

      /* Scaled up as well as down, unlike max-width/max-height, so the picture
         always meets two opposite sides of the box. */
      .preview {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        cursor: crosshair;
      }

      .marker,
      .indicator {
        position: absolute;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      .marker {
        z-index: 4;
        width: 24px;
        height: 24px;
        border: 3px solid var(--color-white);
        box-shadow: 0 0 0 2px #111111, 0 0 14px rgba(0, 0, 0, 0.55);
      }

      .indicator {
        width: 18px;
        height: 18px;
        border: 2px solid var(--color-white);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
      }

      /* --image-inset-x/y, set by color-extract, put the readout and the
         magnifier in the picture's corners rather than the box's. */
      .value {
        position: absolute;
        bottom: calc(var(--image-inset-y, 0px) + 10px);
        left: calc(var(--image-inset-x, 0px) + 10px);
        padding: 6px 8px 4px;
        background-color: rgba(17, 17, 17, 0.78);
        color: var(--color-white);
        font-size: var(--font-size-2);
        line-height: 1;
        pointer-events: none;
      }

      .magnifier {
        position: absolute;
        top: calc(var(--image-inset-y, 0px) + 10px);
        right: calc(var(--image-inset-x, 0px) + 10px);
        width: 88px;
        height: 88px;
        border: 2px solid var(--color-white);
        border-radius: 50%;
        background-color: #111111;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.45);
        image-rendering: pixelated;
        pointer-events: none;
      }

      .marker,
      .indicator,
      .value,
      .magnifier {
        &[hidden] {
          display: none;
        }
      }

      .remove {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 2px 8px 0;
        border: 0;
        border-radius: 3px;
        background-color: transparent;
        color: #333333;
        font-family: var(--font-stack);
        font-size: var(--font-size-3);
        line-height: 1;
        cursor: pointer;
        transition: background-color 180ms ease;

        &:hover {
          background-color: var(--color-gray-5);
        }

        &:focus-visible {
          outline: 1px solid #111111;
          outline-offset: 2px;
        }

        svg {
          width: 16px;
          height: 16px;
          margin-top: -2px;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.5px;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
      }

      &.is-loaded .upload,
      &:not(.is-loaded) .preview,
      &:not(.is-loaded) .remove {
        display: none;
      }
    }

    .color-search-controls {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: var(--space-3);

      .color-facet {
        position: relative;
      }

      /* <summary> defaults to display: list-item. The flex display suppresses
         the Firefox marker; this drops WebKit's. */
      .toggle {
        position: relative;
        display: flex;
        align-items: center;
        width: 160px;
        min-height: 44px;
        padding: 12px 30px 6px 12px;
        border: 1px solid var(--color-gray-5);
        border-radius: 6px;
        background-color: var(--color-white);
        font-size: var(--font-size-3);
        list-style: none;
        cursor: pointer;
        user-select: none;
        transition:
          border-color var(--transition-fast),
          box-shadow var(--transition-fast);

        &::-webkit-details-marker {
          display: none;
        }

        &:focus-visible {
          outline: 2px solid var(--color-primary-tint);
          outline-offset: 2px;
          border-color: var(--color-primary);
        }

        /* Sits on the border, with a white ground to break the line. */
        .title {
          position: absolute;
          top: -7px;
          left: 8px;
          padding: 0 4px;
          background-color: var(--color-white);
          color: #777b73;
          font-size: var(--font-size-2);
          line-height: 1.2;
        }

        .summary {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .caret {
          position: absolute;
          top: 50%;
          right: 11px;
          transform: translateY(-35%);
          transition: transform var(--transition-fast);
        }
      }

      .color-facet[open] > .toggle {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary-tint);

        .caret {
          transform: translateY(-35%) rotate(180deg);
        }
      }

      /* Above the swatch wall, which lifts a hovered item to 20, and below
         Coloris' panel at 1000. */
      .menu {
        position: absolute;
        top: calc(100% + 6px);
        left: -6px;
        z-index: 30;
        width: min(280px, 88vw);
        max-height: min(360px, 60vh);
        overflow-y: auto;
        padding: 6px;
        border: 1px solid var(--color-gray-3);
        border-radius: 12px;
        background-color: var(--color-white);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
      }

      /* The checkbox is visually hidden; the row's tint carries its state. */
      .option {
        display: block;
        padding: 10px 12px;
        border-radius: var(--radius-3);
        color: #333333;
        font-size: var(--font-size-3);
        line-height: 1.25;
        cursor: pointer;

        &:hover {
          background-color: #fff3e8;
        }

        &:has(:checked) {
          background-color: var(--color-primary-tint);
          color: #93430f;
        }

        &:has(:focus-visible) {
          outline: 2px solid var(--color-primary);
          outline-offset: -2px;
        }
      }

      .active-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
      }

      .active-chip,
      .active-clear {
        min-height: 28px;
        padding: 7px 9px;
        border: 1px solid #bfbfbf;
        border-radius: 3px;
        color: #6b6b6b;
        font-family: var(--font-stack);
        font-size: 11px;
        line-height: 1;

        &[hidden] {
          display: none;
        }
      }

      .active-chip {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background-color: var(--color-white);

        button {
          padding: 0;
          border: 0;
          background: none;
          color: inherit;
          font-size: var(--font-size-3);
          line-height: 1;
          cursor: pointer;

          &:hover {
            color: #111111;
          }

          &:focus-visible {
            outline: 2px solid var(--color-primary);
            outline-offset: 2px;
          }
        }
      }

      .active-clear {
        background-color: #f2f2f2;
        cursor: pointer;
        transition:
          border-color var(--transition-fast),
          color var(--transition-fast);

        &:hover {
          border-color: #777777;
          color: #111111;
        }

        &:focus-visible {
          outline: 2px solid var(--color-primary);
          outline-offset: 2px;
        }
      }
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 44px;
      height: 44px;
      padding: 0 var(--space-5);
      border: 1px solid var(--color-primary);
      border-radius: var(--radius-round);
      background-color: var(--color-primary);
      color: var(--color-white);
      font-family: var(--font-stack);
      font-size: var(--font-size-3);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

      &:hover {
        border-color: var(--color-primary-hover);
        background-color: var(--color-primary-hover);
      }

      &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

      /* MaharamNeue sits high in its em box; see the note in 04_components.css. */
      .label { line-height: 1; transform: translateY(2px); }
    }
  }

  .color-swatch-grid {
    margin-bottom: 0;
  }

  .bottom-pagination .pagination-wrapper.bottom {
    margin-top: 30px;
    text-align: right;
  }

}

/* Outside .color-search: Coloris hangs its panel off document.body. */
#clr-picker .picker-search {
  order: 3;
  width: calc(100% - 20px);
  height: 32px;
  margin: 0 10px 14px;
  padding: 3px var(--space-5) 0;
  border: 0;
  border-radius: var(--radius-round);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-stack);
  font-size: var(--font-size-2);
  cursor: pointer;
  transition: background-color var(--transition-fast);

  &:hover {
    background-color: var(--color-primary-hover);
  }

  &[hidden] {
    display: none;
  }
}

/* SWATCH WALL
   The Edelman color library reuses this wall and extends it. */
.color-swatch-grid {
  --swatch-size: 138px;
  --swatch-gap: 6px;
  --swatch-card-width: 300px;

  display: grid;
  /* auto-fill rather than a fixed column count: the swatch is a fixed size, so
     how many fit is a property of the viewport. */
  grid-template-columns: repeat(auto-fill, var(--swatch-size));
  justify-content: space-between;
  gap: var(--swatch-gap);
  margin-bottom: var(--space-6);

  .color-swatch-item {
    position: relative;
    width: var(--swatch-size);
    height: var(--swatch-size);

    /* Siblings paint in document order, so a later swatch would cover an earlier
       one's card. Raising the item lifts it clear of the ones after it. */
    &.is-previewing,
    &:focus-within {
      z-index: 20;
    }


    /* Styles for devices that have hover, because on touch devices there is no
       hover to leave, so the card would stay open over its neighbours.
       And yet, the selector uses &.is-previewing instead of &:hover because
       browsers may leave a stale :hover behind when a drag ends elsewhere. */
    @media (hover: hover) {

      &.is-previewing .color-swatch-detail,
      &:focus-within .color-swatch-detail {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms ease;
      }

      &.is-previewing .color-swatch-detail {
        pointer-events: auto;
      }

    }
  }

  .color-swatch-link {
    display: block;
  }

  .color-swatch {
    display: block;
    width: var(--swatch-size);
    height: var(--swatch-size);
    object-fit: cover;
    background-color: var(--color-gray-2);
  }

  .color-swatch-detail {
    /* Centred on its swatch, then nudged back inside the viewport by
       swatch_preview_controller.js through the two shift properties.
       `visibility` rather than `display`, so the controller can measure it
       before it shows. pointer-events matters as much: at 300px the hidden
       card covers its neighbours and would swallow hovers meant for them. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--swatch-card-width);
    transform:
      translate(-50%, -50%)
      translate(var(--swatch-shift-x, 0px), var(--swatch-shift-y, 0px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, visibility 0s linear 150ms;

    .card {
      box-shadow: 0 2px 24px rgba(0, 0, 0, 0.22);
    }
  }
}

@keyframes color-image-expand {
  from { height: var(--color-field-height); }
}

@keyframes color-image-collapse {
  to { height: var(--color-field-height); }
}

@keyframes color-field-refresh {
  0% { opacity: 0.62; transform: scale(0.995); }
  60% { opacity: 1; transform: scale(1.005); }
  100% { opacity: 1; transform: scale(1); }
}