/* One compact selectable row shared by Atlas layers and Pal Explorer filters. */
.layers-panel.is-compact .filter-option,
.inline-filters .atlas-compact-option {
  --catalog-selection-size: 10px;
  display: grid;
  min-height: 40px;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: normal;
  gap: 2px 7px;
  padding: 4px 3px;
  overflow: hidden;
  color: #d6e6e9;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  cursor: pointer;
  text-align: left;
  transform: none;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease, transform 150ms ease;
}

.layers-panel.is-compact .filter-option::before,
.inline-filters .atlas-compact-option::before {
  display: grid;
  width: var(--catalog-selection-size);
  height: var(--catalog-selection-size);
  grid-column: 3;
  grid-row: 1 / 3;
  place-items: center;
  box-sizing: border-box;
  color: transparent;
  border: 1px solid rgba(132, 158, 164, .62);
  border-radius: 1px;
  background: rgba(3, 15, 20, .76);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .28);
  content: "";
  font-size: .52rem;
  font-weight: 900;
  line-height: 1;
  transform: scale(.9);
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.layers-panel.is-compact .filter-option.is-active::before,
.inline-filters .atlas-compact-option[aria-pressed="true"]::before {
  color: var(--filter-accent, #5ef0c2);
  border-color: color-mix(in srgb, var(--filter-accent, #5ef0c2) 78%, #9eb2b5);
  background: color-mix(in srgb, var(--filter-accent, #5ef0c2) 12%, #06171e);
  box-shadow: inset 0 0 6px color-mix(in srgb, var(--filter-accent, #5ef0c2) 10%, transparent), 0 0 6px color-mix(in srgb, var(--filter-accent, #5ef0c2) 18%, transparent);
  content: "✓";
  text-shadow: 0 0 4px color-mix(in srgb, var(--filter-accent, #5ef0c2) 54%, transparent);
  transform: scale(1);
}

.layers-panel.is-compact .filter-option:not(.is-active):is(:hover, :focus-visible)::before,
.inline-filters .atlas-compact-option:not([aria-pressed="true"]):is(:hover, :focus-visible)::before {
  border-color: color-mix(in srgb, var(--filter-accent, #5ef0c2) 44%, #82989d);
  background: color-mix(in srgb, var(--filter-accent, #5ef0c2) 5%, #071820);
  box-shadow: 0 0 6px color-mix(in srgb, var(--filter-accent, #5ef0c2) 8%, transparent);
  transform: scale(1);
}

.layers-panel.is-compact .filter-option img,
.inline-filters .atlas-compact-option img {
  position: static;
  width: 27px;
  height: 27px;
  grid-column: 1;
  grid-row: 1 / 3;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 82%));
  transform: none;
  transition: filter 150ms ease;
}

.layers-panel.is-compact .filter-option > span:not(.count-pill),
.inline-filters .atlas-compact-option > span {
  display: block;
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  color: #dbe9eb;
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.inline-filters .atlas-compact-option--single-line > span {
  grid-row: 1 / 3;
  align-self: center;
}

.layers-panel.is-compact .count-pill {
  position: static;
  display: block;
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: #77b5c1;
  border: 0;
  background: none;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .015em;
  text-align: left;
}

.layers-panel.is-compact .count-pill::after { display: none; }

.layers-panel.is-compact .filter-option.is-active,
.inline-filters .atlas-compact-option[aria-pressed="true"] {
  color: #fff;
  border: 0;
  background: rgb(13 77 87 / 22%);
  box-shadow: none;
}

.layers-panel.is-compact .filter-option:not(:disabled):hover,
.layers-panel.is-compact .filter-option:focus-visible,
.inline-filters .atlas-compact-option:not(:disabled):hover,
.inline-filters .atlas-compact-option:focus-visible {
  border: 0;
  background: rgb(34 89 99 / 26%);
  box-shadow: none;
  filter: brightness(1.08);
  outline: 0;
  transform: none;
}

.layers-panel.is-compact .filter-option:not(:disabled):hover img,
.inline-filters .atlas-compact-option:not(:disabled):hover img { transform: none; }

/* The compact Atlas option can also act as a dropdown trigger. */
.inline-filters .atlas-compact-option--menu::before { display: none; }
.inline-filters .atlas-compact-option--menu { list-style: none; }
.inline-filters .atlas-compact-option--menu::marker { content: ""; }
.inline-filters .atlas-compact-option--menu::-webkit-details-marker { display: none; }

/* Give every Pal Explorer filter its own field-shaped surface. */
.inline-filters .atlas-compact-option {
  padding-inline: 7px;
  border: 1px solid rgb(54 89 102 / 34%);
  border-radius: 5px;
  background: linear-gradient(180deg, rgb(12 29 39 / 96%), rgb(8 22 30 / 96%));
  box-shadow: inset 0 1px rgb(177 232 239 / 3%), 0 1px 2px rgb(0 0 0 / 14%);
  will-change: transform;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, filter 170ms ease, transform 150ms cubic-bezier(.2, .75, .25, 1);
}

.inline-filters .atlas-compact-option[aria-pressed="true"],
.inline-filters .misc-filter-menu[open] > .atlas-compact-option {
  border: 1px solid rgb(71 164 177 / 52%);
  background: linear-gradient(180deg, rgb(14 47 57 / 96%), rgb(9 32 41 / 96%));
  box-shadow: inset 0 0 0 1px rgb(115 224 235 / 5%), 0 1px 3px rgb(0 0 0 / 18%);
  animation: filter-control-select 220ms cubic-bezier(.18, .82, .3, 1);
}

.inline-filters .atlas-compact-option:not(:disabled):hover {
  border: 1px solid rgb(105 217 230 / 58%);
  background: linear-gradient(180deg, rgb(17 48 59 / 98%), rgb(10 32 41 / 98%));
  box-shadow: inset 0 0 0 1px rgb(161 246 255 / 6%), 0 2px 5px rgb(0 0 0 / 18%);
  filter: brightness(1.07);
  transform: translateY(-1px) scale(1.012);
}

.inline-filters .atlas-compact-option:not(:disabled):active {
  filter: brightness(1.12);
  transform: translateY(1px) scale(.975);
  transition-duration: 70ms;
}

.inline-filters .atlas-compact-option:focus-visible {
  border: 1px solid #69d9e6;
  outline: 2px solid rgb(105 217 230 / 24%);
  outline-offset: 1px;
}

.inline-filters .atlas-compact-option:disabled { opacity: .58; }

.inline-filters .misc-filter-icon {
  width: 21px;
  height: 21px;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  overflow: visible;
  color: #7fdce5;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 58%));
  transition: color 170ms ease, filter 170ms ease, transform 180ms cubic-bezier(.2, .75, .25, 1);
}
.inline-filters .misc-filter-icon--favorited,
.inline-filters .misc-filter-icon--alpha { color: #f0bf55; }
.inline-filters .misc-filter-icon--predator,
.inline-filters .misc-filter-icon--activeEffect { color: #ef7a67; }
.inline-filters .misc-filter-icon--variant,
.inline-filters .misc-filter-icon--nocturnal { color: #c58cf2; }
.inline-filters .misc-filter-icon--passive,
.inline-filters .misc-filter-icon--farm { color: #83dc78; }
.inline-filters .misc-filter-icon--drops,
.inline-filters .misc-filter-icon--partner { color: #e3b36d; }
.inline-filters .misc-filter-icon--active { color: #71b9ff; }
.inline-filters .misc-filter-icon--mount { color: #d0a777; }
.inline-filters .misc-filter-icon--skins,
.inline-filters .misc-filter-icon--size,
.inline-filters .misc-filter-icon--version { color: #9eb9c0; }
.inline-filters .atlas-compact-option:not(:disabled):hover .misc-filter-icon,
.inline-filters .atlas-compact-option:focus-visible .misc-filter-icon {
  color: #c9fbff;
  filter: drop-shadow(0 0 5px rgb(105 217 230 / 32%));
  transform: translateY(-1px) scale(1.1) rotate(-3deg);
}
.inline-filters .atlas-compact-option:not(:disabled):active .misc-filter-icon { transform: scale(.9); }
.inline-filters .atlas-compact-option:disabled .misc-filter-icon { filter: grayscale(1); }

/* Shared accent surface: corners stay hover-only, while color persists on selection. */
.catalog-command--atlas .inline-filters .atlas-compact-option:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--filter-accent, #70f4ff) 68%, rgb(70 96 101 / 54%));
  background: linear-gradient(105deg, color-mix(in srgb, var(--filter-accent, #70f4ff) 13%, #081a22), color-mix(in srgb, var(--filter-accent, #70f4ff) 6%, #06151c) 58%, #05141b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--filter-accent, #70f4ff) 68%, rgb(70 96 101 / 54%)), inset 0 0 10px color-mix(in srgb, var(--filter-accent, #70f4ff) 8%, transparent);
}
.catalog-command--atlas .inline-filters .atlas-compact-option[aria-pressed="true"],
.catalog-command--atlas .inline-filters .misc-filter-menu[data-selected="true"] > .atlas-compact-option {
  border-color: color-mix(in srgb, var(--filter-accent, #70f4ff) 56%, rgb(49 82 89 / 48%));
  background: linear-gradient(105deg, color-mix(in srgb, var(--filter-accent, #70f4ff) 12%, #081a22), color-mix(in srgb, var(--filter-accent, #70f4ff) 6%, #06151c) 58%, #05141b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--filter-accent, #70f4ff) 56%, rgb(49 82 89 / 48%)), inset 0 0 10px color-mix(in srgb, var(--filter-accent, #70f4ff) 7%, transparent);
}

@keyframes filter-control-select {
  0% { transform: scale(.965); }
  58% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* Search result rows reuse the same compact Pal Explorer option geometry. */
.atlas-compact-option--result {
  --filter-accent: #70f4ff;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 7px;
  padding: 4px 3px;
  overflow: visible;
  color: #d6e6e9;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  cursor: pointer;
  text-align: left;
  transform: none;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.atlas-compact-option--result > img,
.atlas-compact-option--result > .breeding-thumb-fallback {
  position: static;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 82%));
}

.atlas-compact-option--result > .atlas-compact-option-copy {
  display: grid;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  gap: 2px;
}

.atlas-compact-option--result .atlas-compact-option-label {
  display: block;
  overflow: hidden;
  color: #dbe9eb;
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-compact-option--result .atlas-compact-option-meta {
  overflow: hidden;
  color: #77b5c1;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-compact-option--result > .atlas-compact-option-trailing {
  display: block;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #77b5c1;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.atlas-compact-option--result:is(:hover, :focus-visible) {
  color: #fff;
  background: rgb(34 89 99 / 26%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--filter-accent) 68%, rgb(70 96 101 / 54%)), inset 0 0 10px color-mix(in srgb, var(--filter-accent) 8%, transparent);
  filter: brightness(1.08);
  outline: 0;
}

.atlas-compact-option--result:is(:hover, :focus-visible) .atlas-compact-option-label,
.atlas-compact-option--result:is(:hover, :focus-visible) .atlas-compact-option-trailing { color: #fff; }

.atlas-compact-option--result > .filter-selection-frame {
  position: absolute;
  z-index: 4;
  inset: -.22rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(.2, .72, .25, 1);
}

.atlas-compact-option--result > .filter-selection-frame i {
  position: absolute;
  width: .62rem;
  height: .62rem;
  color: color-mix(in srgb, var(--filter-accent) 78%, #071820);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--filter-accent) 62%, transparent));
}

.atlas-compact-option--result > .filter-selection-frame i:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.atlas-compact-option--result > .filter-selection-frame i:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.atlas-compact-option--result > .filter-selection-frame i:nth-child(3) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.atlas-compact-option--result > .filter-selection-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.atlas-compact-option--result:is(:hover, :focus-visible) > .filter-selection-frame { opacity: 1; }
.atlas-compact-option--result:is(:hover, :focus-visible) > .filter-selection-frame i { animation: paldeck-corner-breathe 980ms ease-in-out 160ms infinite alternate; }