/* Palettes — the member moodboard index and canvas.
   The canvas positions swatches absolutely from stored coordinates; the drag
   layer added later moves them via `transform`, so nothing here may set
   `top`/`left` on .palette-object. */

.palettes {

  padding-block: var(--space-9);

  &.list {

    section {
      padding-inline: 0;
    }

    .section-inner {
      max-width: 78.5rem;
      padding-inline: clamp(1rem, 4.18vw, 3.25rem);
    }

    .palettes-main {
      min-width: 0;

      .palettes-title {
        margin-bottom: var(--space-8);
        max-width: 36.25rem;

        .page-heading {
          font-size: var(--font-size-4);
          font-weight: 700;
          line-height: 1.25;
          margin-bottom: 0;
        }

        .palettes-intro {
          font-size: var(--font-size-4);
          line-height: 1.45;
          margin-top: var(--space-2);
        }
      }

      .palettes-limit {
        background: var(--color-secondary-tint);
        border-radius: var(--radius-2);
        font-size: var(--font-size-3);
        margin-bottom: var(--space-5);
        padding: var(--space-3) var(--space-4);
      }

      .palette-grid {
        display: grid;
        gap: var(--space-6) var(--space-4);
        grid-template-columns: repeat(4, minmax(0, 1fr));

        @media (max-width: 62rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @media (max-width: 48rem) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (max-width: 30rem) {
          grid-template-columns: 1fr;
        }
      }
    }

    .palette-card {
      position: relative;

      a {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        text-decoration: none;

        .preview {
          aspect-ratio: 1;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          overflow: hidden;
          position: relative;

          .swatch {
            height: 100%;
            object-fit: cover;
            width: 100%;
          }

          .more {
            align-items: center;
            display: flex;
            font-size: var(--font-size-2);
            justify-content: center;
            background: rgb(25 24 23 / 42%);
            bottom: var(--space-4);
            color: var(--color-white);
            line-height: 1;
            padding: 0.375rem 0.5rem;
            position: absolute;
            right: var(--space-4);
          }

        }

        .title {
          align-items: center;
          display: inline-flex;
          font-size: var(--font-size-3);
          gap: var(--space-1);
          line-height: 1.2;
          min-height: 1.25rem;

          .palette-lock {
            flex: none;
            height: 0.875rem;
            transform: translateY(-2px);
            width: 0.875rem;
          }

        }

        &:hover .title {
          color: var(--color-text-primary-hover);
        }

      }

      &.new,
      &.draft,
      &.saved {
        a .preview {
          background: #333 url("/assets/palette-board-6cf7754f.jpg") 0 0 / 25% repeat;
        }
      }

      &.new {
        a {
          .preview {
            align-items: center;
            display: flex;
            justify-content: center;
          }

          .plus-sign {
            fill: none;
            height: 4.5rem;
            stroke: var(--color-white);
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.5px;
            transition: transform var(--transition-fast);
            width: 4.5rem;
          }

          &:hover .plus-sign {
            transform: scale(1.25);
          }
        }
      }

      .delete-form {
        opacity: 0;
        position: absolute;
        right: var(--space-3);
        top: var(--space-3);
        transition: opacity var(--transition-fast);
        z-index: 100;

        &:focus-within {
          opacity: 1;
        }

        .delete-button {
          appearance: none;
          background: var(--color-black);
          border: 0;
          border-radius: var(--radius-round);
          color: var(--color-white);
          cursor: pointer;
          display: block;
          height: 2.125rem;
          overflow: hidden;
          padding: 0;
          position: relative;
          text-align: left;
          width: 2.125rem;

          img {
            height: 1.125rem;
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            width: 1.125rem;
          }

          span {
            font-size: var(--font-size-3);
            font-weight: 700;
            padding-top: 3px;
            position: absolute;
            right: 1.125rem;
            text-align: left;
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            width: 4.375rem;
          }

          &:hover,
          &:focus-visible {
            width: 6.5rem;
          }
        }
      }

      &:hover .delete-form {
        opacity: 1;
      }
    }
  }

  &.new {

    section {
      padding-inline: 0;
    }

    .section-inner {
      align-items: flex-start;
      background-image: var(--palette-grid-image);
      display: flex;
      justify-content: center;
      max-width: 78.5rem;
      min-height: calc(800px + 2 * var(--space-5));
      padding: 50px var(--space-7) var(--space-5);
    }

    .palette-new-form {
      width: min(100%, 26.5rem);
      gap: 0;
      padding: 1.5rem;
      border-radius: 1rem;
      background: var(--color-white);

      .page-heading {
        margin: 0 0 1.75rem;
        font-size: var(--font-size-4);
        font-weight: 700;
        line-height: 1.25;
      }

      .field-grid {
        gap: 1.5rem;
      }

      .field {
        gap: 0;

        input,
        textarea {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 1px solid var(--color-gray-20);
          border-radius: 0;
          background: var(--color-white);
          color: var(--color-black);
          font: inherit;
          font-size: var(--font-size-4);
          line-height: 1.4;

          &::placeholder {
            color: var(--color-gray-20);
            opacity: 1;
          }

        }

        input {
          height: 3.25rem;
        }

        textarea {
          min-height: 6.25rem;
          resize: vertical;
        }
      }

      .account-actions {
        margin-top: 2rem;
      }
    }
  }

  &.show {

    section {
      padding-inline: 0;
    }

    .section-inner {
      max-width: 78.5rem;
      padding-inline: 0;
    }

    /* The toolbar grammar is shared by the page's global toolbar and the toolbar
      on each palette object, so it stays at page scope rather than nesting into
      either one. */
    .tool-title-text,
    .tool-count-text,
    .tool-button-text {
      display: inline-block;
      font-size: var(--font-size-4);
      line-height: 1;
      margin: 0;
      white-space: nowrap;
    }

    .tool-count-wrapper,
    .tool-button-wrapper {
      align-items: center;
      display: flex;
      text-align: left;

      /* button_to wraps Clear in an inline form, and the PDF control needs a
         span for its controller. Left inline, each makes the button a
         baseline-aligned inline box instead of a flex item, riding ~3.5px above
         Add and the product count. */
      > form,
      > .palette-pdf {
        align-items: center;
        display: flex;
      }
    }

    .tool-button-link {
      align-items: center;
      appearance: none;
      background: none;
      border: 0;
      color: var(--color-black);
      cursor: pointer;
      display: inline-flex;
      font: inherit;
      padding: 0;
      text-decoration: none;
      white-space: nowrap;

      &:hover,
      &:focus-visible {
        color: var(--color-text-primary-hover);
      }

      &:disabled {
        cursor: default;
        opacity: 0.3;
      }
    }

    .tool-icon {
      display: inline-flex;
      height: 0.9375rem;
      margin-right: var(--space-1);
      width: 0.9375rem;
      /* MaharamNeue sits high in its em box, so an icon on the geometric centre
         reads low against the label. Same 2px as .cta .label, inverted. */
      transform: translateY(-2px);

      svg {
        height: 100%;
        width: 100%;
      }
    }

    /* Direct port of the board's compact global toolbar. The current layout owns
      the page chrome; the palette itself retains its original control grammar. */
    .global-tools-wrapper {
      background: var(--color-white);
      display: grid;
      gap: var(--space-2);
      grid-template-columns: minmax(0, 1fr) auto;
      margin-inline: var(--space-7);
      padding: 0 0 var(--space-4);

      .tool-title-wrapper {
        align-items: center;
        display: flex;
        min-width: 0;

        &.palettes-return {
          grid-column: 1 / -1;

          .tool-button-link {
            margin-left: -1.1875rem;
            min-height: 1.25rem;
          }

          .tool-icon {
            height: 0.75rem;
            margin-right: 0.4375rem;
            width: 0.75rem;
          }
        }
      }

      .tool-title-text.small {
        font-size: var(--font-size-3);
      }

      .palette-lock {
        flex: none;
        height: 0.875rem;
        margin-left: var(--space-1);
        transform: translateY(-2px);
        width: 0.875rem;
      }

      .global-tools {
        align-items: center;
        display: flex;

        &.right .tool-button-wrapper {
          margin-left: var(--space-5);
        }
      }

      @media (min-width: 901px) and (max-width: 70rem) {
        grid-template-columns: 1fr;

        .tool-title-wrapper.palettes-return {
          grid-column: 1;
        }

        .global-tools.right {
          flex-wrap: wrap;
          gap: var(--space-3) 0;
        }
      }
    }

    .palette-wrapper {
      /* The grid is the canvas backdrop; .no-grid is the saved "off" state. */
      background-image: var(--palette-grid-image);
      overflow: hidden;
      position: relative;

      &.no-grid {
        background-image: none;
      }

      .palette-toggle-switch-wrapper {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: absolute;
        right: var(--space-7);
        text-align: center;
        top: var(--space-5);
        width: 2.5rem;
        z-index: 100;

        .switch {
          height: 1.25rem;
          position: relative;
          width: 2.5rem;
        }

        input {
          height: 0;
          opacity: 0;
          width: 0;
        }

        .track {
          background: var(--color-gray-10);
          border-radius: 1.25rem;
          cursor: pointer;
          inset: 0;
          position: absolute;
          transition: background 0.2s ease;

          &::after {
            background: var(--color-white);
            border-radius: 50%;
            box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
            content: "";
            height: 0.875rem;
            left: 0.1875rem;
            position: absolute;
            top: 0.1875rem;
            transition: transform 0.2s ease;
            width: 0.875rem;
          }
        }

        input:checked + .track {
          background: var(--color-black);

          &::after {
            transform: translateX(1.25rem);
          }
        }

        p {
          font-size: var(--font-size-3);
          line-height: 1;
          margin: 0;
          opacity: 0;
        }

        &:hover p,
        &:focus-within p {
          opacity: 1;
        }
      }

      .palette-space {
        height: 800px;
        margin: var(--space-5) var(--space-7);
        position: relative;
        width: calc(100% - var(--space-7) - var(--space-7));

        .palette-object {
          background-position: center;
          background-repeat: no-repeat;
          box-shadow: 3px 3px 9px color-mix(in srgb, var(--color-black) 37.5%, transparent);
          left: 0;
          overflow: hidden;
          position: absolute;
          top: 0;
          touch-action: none;

          &.detail {
            background-position: left top;
            background-size: 648px auto;

            &.scale-2 { background-size: 1296px auto; }
            &.scale-4 { background-size: 2592px auto; }
            &.scale-8 { background-size: 5184px auto; }
            &.rug { background-size: 725px auto; }
          }

          /* A tile is a repeating pattern — it reads correctly only when it repeats. */
          &.tile {
            background-repeat: repeat;
            background-size: auto;
          }

          &.legend {
            background-size: cover;
          }

          .palette-object-overlay {
            height: 100%;
            position: relative;
          }

          /* Direct port of the palette-object toolbar: it begins as a column of icon
            circles and expands each circle to show its label on hover. */
          .toolbar-column {
            direction: rtl;
            display: flex;
            position: absolute;
            right: 1rem;
            top: 1rem;
            z-index: 2;

            .toolbar {
              align-items: flex-end;
              display: flex;
              flex-direction: column;
              position: static;
            }
          }

          .tool-button-wrapper {
            height: 2.125rem;
            margin-bottom: 0.5rem;
            opacity: 0;
            text-align: right;
            transition: opacity 0.5s ease-out;
            width: 2.125rem;
          }

          &:hover .tool-button-wrapper,
          &:focus-within .tool-button-wrapper,
          &.show-info .tool-button-wrapper {
            opacity: 1;
          }

          .tool-button {
            appearance: none;
            background-color: var(--color-black);
            border: 0;
            border-radius: 1.25rem;
            color: var(--color-white);
            cursor: pointer;
            display: inline-block;
            height: 0;
            overflow: hidden;
            padding: 0;
            position: relative;
            text-align: left;
            width: 2.125rem;

            @media (hover: hover) and (pointer: fine) {
              &:hover { width: 6.5rem; }
            }
          }

          &:hover .tool-button-wrapper .info,
          &:focus-within .tool-button-wrapper .info,
          &.show-info .tool-button {
            height: 2.125rem;
          }

          .tool-button-icon {
            height: 1.125rem;
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            width: 1.125rem;
          }

          .tool-button-text {
            color: var(--color-white);
            font-size: var(--font-size-3);
            padding-top: 3px;
            position: absolute;
            right: 1.125rem;
            text-align: left;
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            width: 4.375rem;
          }

          .palette-object-content {
            background: var(--color-white);
            inset: 0;
            opacity: 0;
            padding: 1rem;
            position: absolute;
            transition: opacity 0.5s ease-out;

            p {
              padding-right: 4rem;
            }

            .palette-swatch-title {
              font-size: var(--font-size-3);
              font-weight: normal;
              margin-bottom: 1.45rem;

              span {
                display: block;
              }

              .palette-swatch-brand,
              .palette-swatch-pattern {
                font-weight: 700;
              }
            }

            .palette-swatch-meta,
            .palette-swatch-price {
              font-size: var(--font-size-2);
              margin-top: var(--space-2);
            }
          }

          &.show-info .palette-object-content {
            opacity: 1;
          }

          .palette-object-handle {
            bottom: 0.25rem;
            cursor: se-resize;
            height: 1rem;
            position: absolute;
            right: 0.25rem;
            width: 1rem;
          }
        }
      }
    }

    .palette-pdf-status:empty {
      display: none;
    }

    /* ---------- Palette name and description ---------- */

    /* One field group and the actions: the form's own default gap is wider
       than the dialog's, which reads as two loose halves. */
    .dialog-edit .account-form,
    .dialog-claim .account-form {
      gap: var(--space-5);
    }

    .dialog-edit {

      .palette-edit-description {
        font-size: var(--font-size-4);
        line-height: var(--line-height-body);
        margin-bottom: 2em;
      }
    }

    /* ---------- Add-swatch chooser ---------- */

    .dialog-add {
      /* The combobox menus hang outside the panel. */
      overflow: visible;

      .palette-add-form {
        display: grid;
        gap: var(--space-4);
      }

      .palette-add-field {
        display: block;

        &[hidden] {
          display: none;
        }

        > select {
          display: none;
        }

        select:disabled {
          color: var(--color-gray-20);
        }
      }

      .palette-combobox {
        position: relative;

        .palette-combobox-trigger {
          align-items: center;
          background: #e5e5e5;
          border: 1px solid #aaa;
          border-radius: 6px;
          color: #666;
          cursor: pointer;
          display: flex;
          font: inherit;
          gap: 14px;
          height: 50px;
          padding: 0 16px;
          text-align: left;
          width: 100%;

          /* A chosen item is rendered as a <span>; the placeholder is a bare
             text node. The fill and the ink follow the choice, as they did
             when this was a select2 control. */
          &:has(span) {
            background: var(--color-white);
            color: var(--color-black);
          }

          &:has(img) {
            padding-left: 0;
          }

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

          &::after {
            border-color: var(--color-black) transparent transparent;
            border-style: solid;
            border-width: 9px 5px 0;
            content: "";
            flex: none;
            height: 0;
            margin-left: auto;
            width: 0;
          }

          &[aria-expanded="true"]::after {
            border-color: transparent transparent var(--color-black);
            border-width: 0 5px 9px;
          }

          img {
            flex: none;
            height: 48px;
            object-fit: cover;
            width: 72px;
          }

          &:disabled {
            background: #eee;
            color: #666;
            cursor: default;

            &::after {
              border-top-color: #666;
            }
          }
        }

        .palette-combobox-menu {
          background: var(--color-white);
          border: 1px solid #aaa;
          border-radius: 0;
          left: 0;
          padding: 16px 16px 4px;
          position: absolute;
          right: 0;
          top: calc(100% + var(--space-1));
          z-index: 10;

          .palette-combobox-search {
            border: 1px solid #aaa;
            font: inherit;
            min-height: 38px;
            padding: var(--space-2);
            width: 100%;
          }

          .palette-combobox-results {
            margin-top: 6px;
            max-height: 380px;
            overflow-y: auto;
            padding: 0 16px;

            &.is-empty {
              color: var(--color-gray-20);
              padding: var(--space-3) var(--space-2);
            }

            .palette-combobox-option {
              align-items: center;
              background: transparent;
              border: 0;
              color: var(--color-black);
              cursor: pointer;
              display: flex;
              font: inherit;
              gap: 14px;
              padding: 4px 16px;
              text-align: left;
              width: 100%;

              &:hover,
              &:focus-visible {
                background: #5897fb;
                color: var(--color-white);
              }

              img {
                height: 48px;
                object-fit: cover;
                width: 72px;
              }
            }
          }
        }
      }

      .palette-add-error {
        color: var(--color-red);
        font-size: var(--font-size-2);
        margin-top: var(--space-2);

        &:empty {
          display: none;
        }
      }
    }

  }

  .small-screen-message {
    display: none;
  }

  /* The canvas has a fixed working size and no small-screen equivalent. */
  @media (max-width: 900px) {
    section {
      display: none;
    }

    .small-screen-message {
      display: block;
      font-size: var(--font-size-3);
      margin: var(--space-7) auto;
      padding-inline: var(--layout-inline-padding);
      text-align: center;
    }
  }
}