/* Let the native inventory panels show through occupied item footprints. */
.slot-grid > .grid-item,
.paper-slot.equipped {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.slot-grid > .grid-item:is(:hover, .selected, :focus-visible),
.paper-slot.equipped:is(:hover, .selected, :focus-visible) {
  background: transparent !important;
  border-color: var(--rarity, #c7b377) !important;
  box-shadow: none !important;
}
.bestiary-heading .chronicle-subheader {
  margin: 12px 0 10px;
}
.codex-subheader {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.codex-title {
  flex: 0 1 auto;
  min-width: 0;
}
.codex-title h2 {
  font-size: 20px;
  margin: 0;
}
.codex-title > small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.codex-tools {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  max-width: 100%;
}
.codex-tools .diablo-select {
  width: 200px;
  max-width: 200px;
  min-width: 0;
  flex: none;
}
.codex-tools .codex-search {
  box-sizing: border-box;
  width: 200px;
  max-width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #756448;
  background: #0e0d0bcf;
  box-shadow: inset 0 1px 4px #000a;
  color: #dfd0ae;
  font: 12px var(--body);
  border-radius: 0;
}
.codex-tools .codex-search:focus-visible {
  outline: 1px solid #c7ac72;
  outline-offset: 2px;
}
.codex-tools .codex-search::placeholder {
  color: #a69778;
}
.achievement-group + .achievement-group {
  margin-top: 22px;
}
.achievement-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #66533866;
  padding: 8px 0;
}
.achievement-group-title h3 {
  font-size: 18px;
  margin: 0;
  color: #dac28b;
}
.achievement-group-title small {
  font-size: 11px;
  color: var(--muted);
}
.achievement-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.achievement-card progress {
  width: 100%;
  accent-color: #aa8c4d;
}
.achievement-card h3 {
  line-height: 1.3;
}
.achievement-card p {
  line-height: 1.55;
}
@media (max-width: 900px) {
  .achievement-filters {
    flex-wrap: wrap;
  }
  .achievement-filters .diablo-select {
    width: 180px;
    max-width: 180px;
  }
}
@media (max-width: 640px) {
  .codex-tools {
    width: 100%;
    flex-wrap: wrap;
  }
  .codex-tools .diablo-select,
  .codex-tools .codex-search {
    flex: 1 1 150px;
    width: 150px;
    max-width: none;
  }
  .achievement-grid {
    grid-template-columns: 1fr;
  }
}