/* Sacralib: ONE equipment-quality card layout for armor, weapons and shields.
   The normal database renderer still owns the real artwork, values and links.
   Only the new quality-item-* DOM structure is styled here, after other CSS. */
.content-accordion .content-accordion-body:has(.content-card-variants) {
  align-items: start;
  align-content: start;
  gap: 10px;
  padding: 10px;
}
.content-card-variants {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-self: start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  container: quality-card / inline-size;
}
.content-card-variants .content-card-quality-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 5px 7px 4px;
  border: 1px solid rgba(145, 111, 64, .34);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(179, 137, 79, .09);
  scrollbar-width: thin;
}
.content-card-variants .content-card-quality-tab {
  --quality-tab-accent: #957649;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 30px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(145, 111, 64, .28);
  border-bottom: 2px solid transparent;
  border-radius: 5px 5px 3px 3px;
  background: rgba(255, 250, 233, .64);
  color: #49382a;
  font: 600 14px/1.17 Georgia, serif;
  white-space: nowrap;
  cursor: pointer;
}
.content-card-variants .content-card-quality-tab:nth-child(1) { --quality-tab-accent: #827363; }
.content-card-variants .content-card-quality-tab:nth-child(2) { --quality-tab-accent: #617b87; }
.content-card-variants .content-card-quality-tab:nth-child(3) { --quality-tab-accent: #9c7743; }
.content-card-variants .content-card-quality-tab:nth-child(4) { --quality-tab-accent: #79658d; }
.content-card-variants .content-card-quality-tab:nth-child(5) { --quality-tab-accent: #9b5c50; }
.content-card-variants .content-card-quality-tab:hover { background: rgba(255, 251, 241, .98); }
.content-card-variants .content-card-quality-tab.is-active,
.content-card-variants .content-card-quality-tab[aria-selected="true"] {
  border-color: rgba(145, 111, 64, .45);
  border-bottom-color: var(--quality-tab-accent);
  background: #fffaf0;
  color: #2d2319;
}
.content-card-variants .content-card-quality-tab:focus-visible {
  outline: 2px solid #a77e42;
  outline-offset: 2px;
}
.content-card-variants .content-card-quality-panel {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(145, 111, 64, .34);
  border-radius: 0 0 8px 8px;
  background: rgba(255, 251, 240, .67);
}
.content-card-variants .quality-item-card {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 0 7px 7px;
  background: transparent;
  box-shadow: none;
  color: #352b21;
  font: 400 14px/1.27 Georgia, serif;
}
.content-card-variants .quality-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 10px 11px 8px;
}
.content-card-variants .quality-item-art {
  display: block;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  border: 1px solid rgba(92, 71, 45, .32);
  border-radius: 4px;
  background-color: var(--quality-bg, rgba(44, 39, 31, .12));
  background-position: var(--card-image-object-x, 50%) var(--card-image-object-y, 50%);
  background-repeat: no-repeat;
  background-size: var(--card-image-object-scale, 100%) auto;
}
.content-card-variants .quality-item-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
}
.content-card-variants .quality-item-name {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #2d241d;
  font: 700 18px/1.2 Georgia, serif;
  overflow-wrap: anywhere;
}
.content-card-variants .quality-item-category {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #695c4d;
  font: 500 13px/1.2 Georgia, serif;
  overflow-wrap: anywhere;
}
.content-card-variants .quality-item-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  align-content: start;
  gap: 5px 6px;
  min-width: 0;
  margin: 0 11px 10px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(112, 84, 51, .18);
}
.content-card-variants .quality-item-stat,
.content-card-variants .quality-item-stat-link {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1px 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(145, 111, 64, .19);
  border-radius: 5px;
  background: rgba(255, 252, 244, .68);
  color: #352b21;
  font: 400 14px/1.27 Georgia, serif;
  text-align: left;
  overflow-wrap: anywhere;
}
.content-card-variants .quality-item-stat > b {
  display: inline;
  margin: 0;
  padding: 0;
  color: #833e31;
  font: 700 14px/1.27 Georgia, serif;
  white-space: normal;
}
.content-card-variants .quality-item-stat > span {
  display: inline;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #352b21;
  font: 400 14px/1.27 Georgia, serif;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.content-card-variants .quality-item-stat-wide {
  grid-column: 1 / -1;
  display: flex;
  gap: 3px 7px;
  flex-wrap: wrap;
  padding: 6px 9px;
}
.content-card-variants .quality-item-stat-wide > span {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.content-card-variants .quality-item-stat-link {
  grid-column: 1 / -1;
  cursor: pointer;
}
.content-card-variants .quality-item-stat-link:hover {
  background: rgba(255, 250, 232, .98);
}
.content-card-variants .quality-item-stat-link .database-card-elixir-body {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.content-card-variants .quality-item-stat-link .database-card-elixir-body i {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(92, 71, 45, .20);
}
.content-card-variants .quality-item-stat-link .database-card-elixir-body > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.content-card-variants .content-card-quality-panel > .empty-state {
  padding: 12px;
  font-size: 14px;
}
/* The query is based on one card, not on viewport width or saved template. */
@container quality-card (min-width: 660px) {
  .content-card-variants .quality-item-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container quality-card (min-width: 1060px) {
  .content-card-variants .quality-item-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container quality-card (max-width: 380px) {
  .content-card-variants .quality-item-stats {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 8px;
  }
  .content-card-variants .quality-item-header { padding: 8px; gap: 8px; }
  .content-card-variants .quality-item-art {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
  .content-card-variants .quality-item-name { font-size: 17px; }
}
@media (max-width: 700px) {
  .content-accordion .content-accordion-body:has(.content-card-variants) {
    gap: 8px;
    padding: 8px;
  }
  .content-card-variants .content-card-quality-tabs { padding: 4px; }
  .content-card-variants .content-card-quality-tab { padding: 5px 8px; min-height: 32px; }
}