/* Shared exploration chrome for the gem/unique/base master-detail indexes.
   The gem-index names remain as compatibility aliases for the shipped /gems
   DOM; every index also carries the semantic item-index aliases. Fidelity
   styling remains owned by gem-card.css inside each .newItemPopup. */
.gem-index {
  --browse-surface: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  --gem-index-content-scale: 1;
  width: 100%;
  /* Fill the viewport below the site chrome exactly — the workspace flexes to
     the remainder so the page never grows an outer scrollbar (the body:has
     rules below pull the footer into the same viewport-height column). */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 480px;
  padding: 18px clamp(16px, 2.5vw, 40px) 20px;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent-ui) 8%, transparent), transparent 34rem),
    radial-gradient(circle at 12% 66%, color-mix(in srgb, var(--color-magic) 5%, transparent), transparent 30rem),
    var(--bg-base);
}
/* Index pages: one viewport-height column — header, nav, workspace (flexes),
   compact footer. No outer scrollbar; panels own all scrolling. */
body:has(> main > .gem-index) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
body:has(> main > .gem-index) > main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body:has(> main > .gem-index) .site-footer { margin-top: 0; padding: 10px 24px; }
body:has(> main > .gem-index) .site-footer__disclaimer { display: inline; margin: 0 8px 0 0; }
body:has(> main > .gem-index) .site-footer__links { display: inline; }
@media (max-width: 899px) {
  body:has(> main > .gem-index) { height: auto; display: block; }
  body:has(> main > .gem-index) > main { display: block; }
}

html[data-card-size="s"] .gem-index { --gem-index-content-scale: 0.85; }
html[data-card-size="l"] .gem-index { --gem-index-content-scale: 1.25; }
html[data-card-size="xl"] .gem-index { --gem-index-content-scale: 1.5; }

.gem-index-header {
  width: min(1680px, 100%);
  margin: 0 auto 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.gem-index-header h1 {
  margin: 2px 0 5px;
  color: var(--color-normal);
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: 0.015em;
}
.gem-index-header p { margin: 0; color: var(--color-default); font-size: 13px; }
.gem-index-header .gem-index-eyebrow {
  color: var(--accent-ui);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gem-index-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--color-default);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gem-index-total strong { color: var(--color-normal); font-size: 24px; font-weight: 500; }

.gem-index-filters {
  width: min(1680px, 100%);
  margin: 0 auto 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--browse-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.gem-index-filters .filter-bar { max-width: none; margin: 0; gap: 16px; }
.gem-index-filters .filter-group + .filter-group {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.gem-index-filters .filter-btn {
  padding: calc(4px * var(--gem-index-content-scale)) calc(11px * var(--gem-index-content-scale));
  border-radius: 999px;
  font-size: calc(12px * var(--gem-index-content-scale));
}
.gem-index-filters .filter-select,
.gem-index-filters .filter-select-trigger {
  min-width: min(220px, 42vw);
  padding: calc(5px * var(--gem-index-content-scale)) calc(28px * var(--gem-index-content-scale)) calc(5px * var(--gem-index-content-scale)) calc(9px * var(--gem-index-content-scale));
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-base);
  color: var(--color-normal);
  font: calc(11px * var(--gem-index-content-scale))/1.25 var(--font-regular);
}
.filter-select-custom {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.filter-select--native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.filter-select-trigger {
  position: relative;
  min-width: min(220px, 60vw);
  max-width: 100%;
  padding: calc(5px * var(--gem-index-content-scale, 1)) calc(28px * var(--gem-index-content-scale, 1)) calc(5px * var(--gem-index-content-scale, 1)) calc(9px * var(--gem-index-content-scale, 1));
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-base);
  color: var(--color-normal);
  font: calc(11px * var(--gem-index-content-scale, 1))/1.25 var(--font-regular);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.filter-select-trigger:hover,
.filter-select-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent-ui) 58%, var(--border));
  background: color-mix(in srgb, var(--accent-ui) 5%, var(--bg-base));
}
.filter-select-trigger:focus-visible,
.filter-select-listbox:focus-visible {
  border-color: color-mix(in srgb, var(--accent-ui) 58%, var(--border));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ui) 10%, transparent);
}
.filter-select-trigger__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-select-trigger__chevron {
  position: absolute;
  right: calc(9px * var(--gem-index-content-scale, 1));
  color: var(--color-default);
  font-size: calc(13px * var(--gem-index-content-scale, 1));
  line-height: 1;
  transition: transform 120ms ease;
}
.filter-select-trigger[aria-expanded="true"] .filter-select-trigger__chevron { transform: rotate(180deg); }
.filter-select-listbox {
  position: fixed;
  z-index: 120;
  box-sizing: border-box;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  color: var(--color-normal);
  font: calc(11px * var(--filter-select-scale, 1))/1.3 var(--font-regular);
  scrollbar-color: var(--border) transparent;
}
.filter-select-listbox[hidden] { display: none; }
.filter-select-option {
  min-height: calc(28px * var(--filter-select-scale, 1));
  padding: calc(5px * var(--filter-select-scale, 1)) calc(8px * var(--filter-select-scale, 1));
  display: grid;
  grid-template-columns: calc(14px * var(--filter-select-scale, 1)) minmax(0, 1fr);
  align-items: center;
  gap: calc(6px * var(--filter-select-scale, 1));
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.filter-select-option.is-active {
  border-color: color-mix(in srgb, var(--accent-ui) 30%, transparent);
  background: color-mix(in srgb, var(--accent-ui) 9%, var(--bg-surface));
}
.filter-select-option__marker { color: var(--accent-ui); opacity: 0; }
.filter-select-option.is-selected .filter-select-option__marker { opacity: 1; }
.filter-select-option.is-selected .filter-select-option__label { color: var(--color-normal); }
.filter-select-option__label {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-normal) 84%, var(--color-default));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-index-class-nav {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--color-default);
  font-size: 10px;
}
.item-index-class-nav summary { cursor: pointer; }
.item-index-class-nav__links { padding-top: 7px; display: flex; flex-wrap: wrap; gap: 5px 12px; }
.item-index-class-nav__links a { color: var(--color-default); text-decoration: none; }
.item-index-class-nav__links a:hover { color: var(--color-normal); text-decoration: underline; }

.gem-index-workspace {
  width: min(1680px, 100%);
  flex: 1;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, 0.9fr) minmax(470px, 1.1fr);
  gap: 12px;
  min-width: 0;
}
.gem-index-list,
.gem-index-pane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--browse-surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.gem-index-list { display: flex; flex-direction: column; }
.gem-index-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.gem-index-search__label {
  display: block;
  margin: 0 0 5px 1px;
  color: var(--color-default);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.gem-index-search__control { position: relative; }
.gem-index-search__input {
  width: 100%;
  min-width: 0;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  background: color-mix(in srgb, var(--bg-base) 72%, transparent);
  color: var(--color-normal);
  font: 12px/1.3 var(--font-regular);
}
.gem-index-search__input::placeholder { color: color-mix(in srgb, var(--color-default) 72%, transparent); }
.gem-index-search__input:focus {
  border-color: color-mix(in srgb, var(--accent-ui) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ui) 10%, transparent);
}
.gem-index-search__shortcut {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-surface);
  color: var(--color-default);
  font: 10px/1.25 var(--font-regular);
  pointer-events: none;
}
.gem-index-search__input:focus + .gem-index-search__shortcut { opacity: 0.45; }
.gem-index-list__header {
  min-height: 39px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--color-default);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.gem-index-list__header strong { color: var(--color-normal); font-weight: 600; }
.gem-index-list__hint { opacity: 0.75; }
.gem-index-rows {
  flex: 1;
  min-height: 0;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--border) transparent;
}
.gem-index-empty {
  flex: 1;
  padding: 44px 18px;
  color: var(--color-default);
  font-size: 12px;
  text-align: center;
}
.gem-index-empty button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ui);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.gem-index-row {
  --row-accent: var(--color-gem);
  position: relative;
  min-width: 0;
  min-height: calc(58px * var(--gem-index-content-scale));
  padding: calc(7px * var(--gem-index-content-scale)) calc(10px * var(--gem-index-content-scale)) calc(7px * var(--gem-index-content-scale)) calc(12px * var(--gem-index-content-scale));
  display: grid;
  grid-template-columns: calc(38px * var(--gem-index-content-scale)) minmax(calc(130px * var(--gem-index-content-scale)), 0.82fr) max-content minmax(calc(145px * var(--gem-index-content-scale)), 1.18fr);
  align-items: center;
  gap: calc(10px * var(--gem-index-content-scale));
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-normal);
  text-decoration: none;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.gem-index-row + .gem-index-row { margin-top: 2px; }
.gem-index-row::before {
  content: '';
  position: absolute;
  inset: 7px auto 7px 0;
  width: 2px;
  border-radius: 2px;
  background: var(--row-accent);
  opacity: 0.55;
  transition: inset 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}
.gem-index-row--rg::before { background: linear-gradient(var(--color-gem-r), var(--color-gem-g)); }
.gem-index-row--rb::before { background: linear-gradient(var(--color-gem-r), var(--color-gem-b)); }
.gem-index-row--gb::before { background: linear-gradient(var(--color-gem-g), var(--color-gem-b)); }
.gem-index-row:hover,
.gem-index-row.is-selected {
  z-index: 1;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--row-accent) 42%, var(--border));
  background: color-mix(in srgb, var(--row-accent) 7%, var(--bg-surface));
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
}
.gem-index-row:hover::before,
.gem-index-row.is-selected::before {
  inset-block: 4px;
  opacity: 1;
  box-shadow: 0 0 10px var(--row-accent);
}
.gem-index-row.is-arriving {
  animation: gem-index-row-arrival 900ms ease-out;
}
@keyframes gem-index-row-arrival {
  0% {
    border-color: color-mix(in srgb, var(--row-accent) 82%, var(--border));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--row-accent) 54%, transparent);
  }
  32% {
    border-color: color-mix(in srgb, var(--row-accent) 68%, var(--border));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--row-accent) 20%, transparent), 0 0 22px color-mix(in srgb, var(--row-accent) 42%, transparent);
  }
  100% {
    border-color: color-mix(in srgb, var(--row-accent) 42%, var(--border));
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);
  }
}
.gem-index-row:focus-visible { outline: 1px solid var(--row-accent); outline-offset: -2px; }
.gem-index-row__icon-wrap {
  width: calc(36px * var(--gem-index-content-scale));
  height: calc(36px * var(--gem-index-content-scale));
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--row-accent) 8%, var(--bg-base));
}
.gem-index-row__icon {
  width: calc(32px * var(--gem-index-content-scale));
  height: calc(32px * var(--gem-index-content-scale));
  object-fit: contain;
}
.gem-index-row__identity { min-width: 0; display: flex; flex-direction: column; gap: calc(3px * var(--gem-index-content-scale)); }
.gem-index-row__name {
  overflow: hidden;
  color: var(--color-normal);
  font-size: calc(13px * var(--gem-index-content-scale));
  font-weight: 630;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-index-row__name--unique { color: var(--color-unique); }
.item-index-row__meta {
  max-width: calc(112px * var(--gem-index-content-scale));
  color: var(--color-default);
  font-size: calc(9.5px * var(--gem-index-content-scale));
  line-height: 1.2;
  text-align: right;
}
.gem-index-row__tags {
  overflow: hidden;
  color: var(--color-default);
  font-size: calc(10.5px * var(--gem-index-content-scale));
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gem-index-row__requirements { display: flex; flex-wrap: wrap; justify-content: end; gap: calc(3px * var(--gem-index-content-scale)); }
.gem-index-req {
  min-width: calc(28px * var(--gem-index-content-scale));
  padding: calc(2px * var(--gem-index-content-scale)) calc(5px * var(--gem-index-content-scale));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: calc(9px * var(--gem-index-content-scale));
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
.gem-index-req--str { color: var(--color-gem-r); border-color: color-mix(in srgb, var(--color-gem-r) 48%, transparent); background: color-mix(in srgb, var(--color-gem-r) 11%, transparent); }
.gem-index-req--dex { color: var(--color-gem-g); border-color: color-mix(in srgb, var(--color-gem-g) 48%, transparent); background: color-mix(in srgb, var(--color-gem-g) 11%, transparent); }
.gem-index-req--int { color: var(--color-gem-b); border-color: color-mix(in srgb, var(--color-gem-b) 65%, transparent); background: color-mix(in srgb, var(--color-gem-b) 14%, transparent); }
.gem-index-req--none { color: var(--color-default); }
.gem-index-row__effect {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-normal) 76%, var(--color-default));
  font-family: var(--font-smallcaps);
  /* 12.5px = .explicitMod in the in-game render; description text reads at one size */
  font-size: calc(12.5px * var(--gem-index-content-scale));
  line-height: 1.25;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, var(--color-black) 0, var(--color-black) calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, var(--color-black) 0, var(--color-black) calc(100% - 24px), transparent 100%);
}

.gem-index-pane {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--border) transparent;
}
.gem-index-pane__content { min-height: 100%; padding: 20px clamp(14px, 2vw, 28px) 32px; }
.gem-index-pane__content.is-arriving { animation: gem-index-pane-arrival 180ms ease-out; }
@keyframes gem-index-pane-arrival {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.gem-index-pane__status {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 7px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-ui) 35%, var(--border));
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  color: var(--accent-ui);
  font-size: 11px;
  text-align: center;
}
.gem-index-pane .gem-detail { max-width: none; }
.gem-index-pane .rec-tier { grid-template-columns: 1.8rem minmax(0, 1fr); gap: 7px; }
.gem-index-pane .rec-tier .gem-browse-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 250px)); }
.gem-index-pane .bases-list-grid,
.gem-index-pane .bases-class-grid,
.gem-index-pane .keystone-index-grid { max-width: 100%; }

.gem-index-sheet,
.gem-index-sheet-scrim { display: none; }

/* Theory Crafting: mixed-kind rows on the shared master-detail workspace.
   Card-size scales rows/chips/pane content like every other index. */
.theorycraft-index {
  --tc-kind-gem: var(--color-gem);
  --tc-kind-support: var(--color-gem);
  --tc-kind-spirit: var(--color-gem);
  --tc-kind-unique: var(--color-unique);
  --tc-kind-affix: var(--color-magic);
  --tc-kind-keystone: var(--search-keystone-color);
  --tc-kind-notable: var(--search-notable-color);
  --tc-kind-base: var(--color-normal);
  --tc-kind-augment: var(--color-prop);
}
.theorycraft-index .item-index-workspace {
  grid-template-columns: minmax(440px, 0.92fr) minmax(470px, 1.08fr);
}
.tc-pin-notice {
  width: min(1680px, 100%);
  margin: calc(-8px * var(--gem-index-content-scale)) auto calc(10px * var(--gem-index-content-scale));
  padding: calc(6px * var(--gem-index-content-scale)) calc(10px * var(--gem-index-content-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--gem-index-content-scale));
  border: 1px solid color-mix(in srgb, var(--color-default) 38%, var(--border));
  border-radius: calc(6px * var(--gem-index-content-scale));
  background: var(--browse-surface);
  color: var(--color-default);
  font-size: calc(10px * var(--gem-index-content-scale));
}
.tc-pin-notice[hidden] { display: none; }
.tc-pin-notice button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-default);
  font: calc(16px * var(--gem-index-content-scale))/1 var(--font-regular);
  cursor: pointer;
}
.tc-pin-tray {
  width: min(1680px, 100%);
  min-width: 0;
  margin: calc(-8px * var(--gem-index-content-scale)) auto calc(12px * var(--gem-index-content-scale));
  padding: calc(6px * var(--gem-index-content-scale)) calc(8px * var(--gem-index-content-scale));
  display: flex;
  align-items: center;
  gap: calc(8px * var(--gem-index-content-scale));
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: calc(8px * var(--gem-index-content-scale));
  background: var(--browse-surface);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}
.tc-pin-tray[hidden] { display: none; }
.tc-pin-tray__label {
  padding-inline: calc(3px * var(--gem-index-content-scale));
  display: flex;
  align-items: baseline;
  gap: calc(4px * var(--gem-index-content-scale));
  flex: 0 0 auto;
  color: var(--color-default);
  font-size: calc(9px * var(--gem-index-content-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tc-pin-tray__label strong { color: var(--color-normal); font-size: calc(12px * var(--gem-index-content-scale)); }
.tc-pin-tray__viewport {
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.tc-pin-tray__viewport.is-overflowing:not(.is-at-start):not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-black) calc(18px * var(--gem-index-content-scale)), var(--color-black) calc(100% - 18px * var(--gem-index-content-scale)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--color-black) calc(18px * var(--gem-index-content-scale)), var(--color-black) calc(100% - 18px * var(--gem-index-content-scale)), transparent);
}
.tc-pin-tray__viewport.is-overflowing.is-at-start:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, var(--color-black) calc(100% - 18px * var(--gem-index-content-scale)), transparent);
  mask-image: linear-gradient(to right, var(--color-black) calc(100% - 18px * var(--gem-index-content-scale)), transparent);
}
.tc-pin-tray__viewport.is-overflowing.is-at-end:not(.is-at-start) {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-black) calc(18px * var(--gem-index-content-scale)));
  mask-image: linear-gradient(to right, transparent, var(--color-black) calc(18px * var(--gem-index-content-scale)));
}
.tc-pin-tray__items { display: flex; gap: calc(6px * var(--gem-index-content-scale)); width: max-content; }
.tc-pin-chip {
  position: relative;
  min-width: 0;
  max-width: calc(230px * var(--gem-index-content-scale));
  padding: calc(4px * var(--gem-index-content-scale)) calc(5px * var(--gem-index-content-scale));
  display: grid;
  grid-template-columns: calc(25px * var(--gem-index-content-scale)) minmax(0, 1fr) calc(20px * var(--gem-index-content-scale));
  align-items: center;
  gap: calc(5px * var(--gem-index-content-scale));
  border: 1px solid color-mix(in srgb, var(--row-accent) 34%, var(--border));
  border-radius: calc(6px * var(--gem-index-content-scale));
  background: color-mix(in srgb, var(--row-accent) 6%, var(--bg-surface));
  color: var(--color-normal);
  cursor: pointer;
}
.tc-pin-chip::before {
  content: '';
  position: absolute;
  inset: calc(5px * var(--gem-index-content-scale)) auto calc(5px * var(--gem-index-content-scale)) 0;
  width: calc(2px * var(--gem-index-content-scale));
  border-radius: calc(2px * var(--gem-index-content-scale));
  background: var(--row-accent);
}
.tc-pin-chip:hover,
.tc-pin-chip:focus-visible { border-color: color-mix(in srgb, var(--row-accent) 62%, var(--border)); outline: none; }
.tc-pin-chip__icon {
  width: calc(25px * var(--gem-index-content-scale));
  height: calc(25px * var(--gem-index-content-scale));
  display: grid;
  place-items: center;
  border-radius: calc(4px * var(--gem-index-content-scale));
  background: color-mix(in srgb, var(--row-accent) 9%, var(--bg-base));
}
.tc-pin-chip__icon img { width: calc(22px * var(--gem-index-content-scale)); height: calc(22px * var(--gem-index-content-scale)); object-fit: contain; }
.tc-pin-chip__name { overflow: hidden; font-size: calc(11px * var(--gem-index-content-scale)); font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.tc-pin-chip__remove {
  width: calc(20px * var(--gem-index-content-scale));
  height: calc(20px * var(--gem-index-content-scale));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-default);
  font: calc(16px * var(--gem-index-content-scale))/1 var(--font-regular);
  cursor: pointer;
}
.tc-pin-chip__remove:hover,
.tc-pin-chip__remove:focus-visible { background: color-mix(in srgb, var(--color-normal) 9%, transparent); color: var(--color-normal); outline: none; }
.tc-pin-tray__promote,
.tc-pin-tray__clear {
  padding: calc(4px * var(--gem-index-content-scale)) calc(6px * var(--gem-index-content-scale));
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--color-default);
  font: calc(9px * var(--gem-index-content-scale))/1.2 var(--font-regular);
  cursor: pointer;
}
.tc-pin-tray__promote:hover,
.tc-pin-tray__promote:focus-visible,
.tc-pin-tray__clear:hover,
.tc-pin-tray__clear:focus-visible,
.tc-pin-tray__clear.is-confirming { color: var(--color-normal); outline: none; text-decoration: underline; }
.theorycraft-index .tc-search { margin: 0; }
.theorycraft-index .tc-input {
  width: 100%;
  min-width: 0;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  background: color-mix(in srgb, var(--bg-base) 72%, transparent);
  color: var(--color-normal);
  font: 12px/1.3 var(--font-regular);
}
.theorycraft-index .tc-input:focus {
  border-color: color-mix(in srgb, var(--accent-ui) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ui) 10%, transparent);
}
.theorycraft-index .tc-lead { margin: 7px 1px 3px; font-size: 11px; }
.theorycraft-index .tc-help { margin: 0 1px; font-size: 11px; }
.theorycraft-index .tc-help[open] {
  max-height: min(38vh, 330px);
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-color: var(--border) transparent;
}
.theorycraft-index .tc-help-terms { gap: 8px 12px; }
.theorycraft-index .tc-example { font-size: 10px; }
.tc-index-group + .tc-index-group { margin-top: 6px; }
.tc-index-group__heading {
  position: sticky;
  z-index: 2;
  top: -5px;
  margin: 0 0 2px;
  padding: 7px 9px 5px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--browse-surface) 96%, var(--bg-base));
  color: var(--color-default);
  font: 650 9px/1.2 var(--font-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tc-index-row {
  min-height: calc(48px * var(--gem-index-content-scale));
  padding-block: calc(5px * var(--gem-index-content-scale));
  grid-template-columns: calc(34px * var(--gem-index-content-scale)) minmax(calc(70px * var(--gem-index-content-scale)), max-content) minmax(0, 1fr) 0;
  gap: calc(8px * var(--gem-index-content-scale));
}
.tc-index-row .item-index-row__icon-wrap { width: calc(32px * var(--gem-index-content-scale)); height: calc(32px * var(--gem-index-content-scale)); }
.tc-index-row .item-index-row__icon { width: calc(29px * var(--gem-index-content-scale)); height: calc(29px * var(--gem-index-content-scale)); }
.tc-kind-chip {
  max-width: calc(92px * var(--gem-index-content-scale, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(9px * var(--gem-index-content-scale, 1));
}
.tc-index-row .item-index-row__tags {
  color: color-mix(in srgb, var(--color-normal) 70%, var(--color-default));
}
.tc-index-row__action { width: 0; display: grid; place-items: center; }
.tc-pin-toggle { display: none; }
.tc-pins-ready .tc-index-row { grid-template-columns: calc(34px * var(--gem-index-content-scale)) minmax(calc(70px * var(--gem-index-content-scale)), max-content) minmax(0, 1fr) calc(27px * var(--gem-index-content-scale)); }
.tc-pins-ready .tc-index-row__action { width: calc(27px * var(--gem-index-content-scale)); }
.tc-pins-ready .tc-pin-toggle {
  width: calc(27px * var(--gem-index-content-scale));
  height: calc(27px * var(--gem-index-content-scale));
  padding: calc(4px * var(--gem-index-content-scale));
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--color-default) 72%, transparent);
  cursor: pointer;
}
.tc-pin-toggle svg { width: 100%; height: 100%; }
.tc-row-pin { opacity: 0; transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease; }
.tc-index-row:hover .tc-row-pin,
.tc-index-row:focus-within .tc-row-pin,
.tc-row-pin[aria-pressed="true"] { opacity: 1; }
/* No hover on touch: reveal-on-hover would cost a tap before the sheet opens,
   so the pin is always visible (dimmed until pinned). */
@media (hover: none), (max-width: 899px) {
  .tc-row-pin { opacity: 0.55; }
  .tc-row-pin[aria-pressed="true"] { opacity: 1; }
}
.tc-pin-toggle:hover,
.tc-pin-toggle:focus-visible,
.tc-pin-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--color-normal) 8%, transparent); color: var(--color-normal); outline: none; }
.tc-pin-toggle[aria-pressed="true"] svg { transform: rotate(-18deg); }
.tc-detail-header {
  position: sticky;
  z-index: 11;
  top: 0;
  min-height: calc(43px * var(--gem-index-content-scale));
  padding: calc(7px * var(--gem-index-content-scale)) calc(12px * var(--gem-index-content-scale));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10px * var(--gem-index-content-scale));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-surface) 96%, var(--bg-base));
  color: var(--color-normal);
  font: 500 calc(13px * var(--gem-index-content-scale))/1.2 var(--font-display);
}
.tc-detail-header > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theorycraft-index .tc-detail-header + .gem-index-pane__status { top: calc(43px * var(--gem-index-content-scale)); }
.item-action-bar {
  min-height: calc(35px * var(--gem-index-content-scale, 1));
  padding: calc(4px * var(--gem-index-content-scale, 1)) calc(8px * var(--gem-index-content-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid color-mix(in srgb, var(--color-default) 20%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  color: var(--color-normal);
  font: 500 calc(11px * var(--gem-index-content-scale, 1))/1.2 var(--font-display);
}
.item-action-bar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(4px * var(--gem-index-content-scale, 1));
}
.item-action {
  width: auto;
  height: calc(25px * var(--gem-index-content-scale, 1));
  padding: 0 calc(7px * var(--gem-index-content-scale, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--gem-index-content-scale, 1));
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--color-default);
  opacity: 1;
  cursor: pointer;
  text-decoration: none;
}
.item-action:hover,
.item-action:focus-visible {
  color: var(--accent-ui);
  border-color: color-mix(in srgb, var(--accent-ui) 55%, var(--border));
  outline: none;
}
/* Planner trade link that could only filter SOME of the crafted mods. The
   label ("Trade (4 of 5)") carries the detail, but it is hidden on narrow
   screens, so the amber edge is what survives — the title/aria-label always
   names the mods the trade site has no filter for. */
.item-action--partial {
  border-color: color-mix(in srgb, var(--color-notable) 55%, var(--border));
  color: var(--color-notable);
}
.item-action--partial:hover,
.item-action--partial:focus-visible {
  color: var(--color-notable);
  border-color: var(--color-notable);
}
.item-action .trade-scale,
.item-action .add-build-icon,
.item-action .add-pin-icon {
  width: calc(13px * var(--gem-index-content-scale, 1));
  height: calc(13px * var(--gem-index-content-scale, 1));
}
@media (max-width: 520px) {
  .item-action__label { display: none; }
  .item-action {
    width: calc(25px * var(--gem-index-content-scale, 1));
    padding: 0;
  }
}
.tc-detail-pin {
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
  border-color: var(--border) !important;
}
.tc-detail-pin[hidden],
.tc-sheet-pin[hidden] { display: none; }
.tc-sheet-actions { display: flex; align-items: center; gap: calc(7px * var(--gem-index-content-scale)); }
.tc-kind-chip.search-result-cat--base { background: var(--surface-normal-subtle); color: var(--color-normal); }
.tc-kind-chip.search-result-cat--augment { background: color-mix(in srgb, var(--color-prop) 16%, transparent); color: var(--color-prop); }
.tc-detail-placeholder {
  min-height: 420px;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--color-default);
}
.tc-detail-placeholder h2 { margin: 0 0 7px; color: var(--color-normal); font: 500 22px/1.2 var(--font-display); }
.tc-detail-placeholder p { max-width: 30rem; margin: 0; font-size: 12px; }
.tc-fragment-detail__note {
  max-width: 640px;
  margin: 0 auto 14px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-magic) 6%, var(--bg-surface));
  color: var(--color-default);
  font-size: 11px;
  text-align: center;
}
.theorycraft-index .tc-empty { text-align: center; }
.theorycraft-index .tc-empty--initial { padding-top: 40px; }

@media (max-width: 1180px) {
  .gem-index-row { grid-template-columns: calc(38px * var(--gem-index-content-scale)) minmax(calc(135px * var(--gem-index-content-scale)), 1fr) max-content; }
  .gem-index-row__effect { grid-column: 2 / 4; }
}

@media (max-width: 899px) {
  .gem-index { display: block; height: auto; min-height: 0; padding: 18px 12px 28px; }
  .gem-index-header { align-items: start; }
  .gem-index-header > div:first-child { min-width: 0; }
  .gem-index-header p:not(.gem-index-eyebrow) { max-width: 34rem; }
  .gem-index-filters .filter-group + .filter-group { padding-left: 0; border-left: 0; }
  .gem-index-workspace { display: block; height: auto; }
  .gem-index-list { overflow: visible; }
  .gem-index-rows { overflow: visible; padding: 4px; }
  .gem-index-pane { display: none; }
  .gem-index-row { grid-template-columns: calc(38px * var(--gem-index-content-scale)) minmax(0, 1fr) max-content; }
  .gem-index-row__effect { grid-column: 2 / 4; }
  .gem-index-list__hint { display: none; }
  .theorycraft-index .item-index-workspace { height: auto; }
  .theorycraft-index .tc-help[open] { max-height: none; }
  .tc-pin-tray { margin-top: calc(-6px * var(--gem-index-content-scale)); }

  html.gem-index-sheet-open,
  body.gem-index-sheet-open { overflow: hidden; }
  .gem-index-sheet-scrim {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: block;
    background: color-mix(in srgb, var(--bg-base) 72%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
  }
  .gem-index-sheet-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .gem-index-sheet {
    position: fixed;
    z-index: 91;
    inset: 9vh 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-ui) 28%, var(--border));
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--bg-surface);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform 250ms ease, visibility 0s linear 250ms;
  }
  .gem-index-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }
  .gem-index-sheet__header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 52px;
    padding: 9px 10px 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-surface) 96%, var(--bg-base));
  }
  .gem-index-sheet__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-normal);
    font: 500 calc(17px * var(--gem-index-content-scale))/1.2 var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gem-index-sheet__close {
    width: 34px;
    height: 34px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-base) 72%, transparent);
    color: var(--color-normal);
    font: 24px/1 var(--font-regular);
    cursor: pointer;
  }
  .gem-index-sheet__close:hover,
  .gem-index-sheet__close:focus-visible {
    border-color: color-mix(in srgb, var(--accent-ui) 62%, var(--border));
    color: var(--accent-ui);
    outline: none;
  }
  .gem-index-sheet__content {
    min-height: 0;
    padding: 16px 12px 36px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--border) transparent;
  }
  .gem-index-sheet__content.is-arriving { animation: gem-index-pane-arrival 180ms ease-out; }
  .gem-index-sheet__status {
    z-index: 3;
    padding: 7px 12px;
    flex: 0 0 auto;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-ui) 35%, var(--border));
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    color: var(--accent-ui);
    font-size: calc(11px * var(--gem-index-content-scale));
    text-align: center;
  }
  .gem-index-sheet .gem-detail { max-width: none; }
  .gem-index-sheet .rec-tier { grid-template-columns: 1.8rem minmax(0, 1fr); gap: 7px; }
  .gem-index-sheet .rec-tier .gem-browse-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 250px)); }
  .gem-index-sheet .bases-list-grid,
  .gem-index-sheet .bases-class-grid,
  .gem-index-sheet .keystone-index-grid { max-width: 100%; }
}

@media (max-width: 520px) {
  .gem-index-header p:not(.gem-index-eyebrow) { display: none; }
  .gem-index-total { margin-inline-end: 5px; }
  .gem-index-total strong { font-size: 18px; }
  .gem-index-filters { padding: 9px; }
  .gem-index-filters .filter-bar { gap: 10px; }
  .gem-index-row { gap: calc(7px * var(--gem-index-content-scale)); padding-right: calc(7px * var(--gem-index-content-scale)); }
  .gem-index-row__effect { font-size: calc(10px * var(--gem-index-content-scale)); }
  .tc-index-row { grid-template-columns: 32px minmax(62px, max-content) minmax(0, 1fr) 0; gap: 6px; }
  .tc-pins-ready .tc-index-row { grid-template-columns: calc(32px * var(--gem-index-content-scale)) minmax(calc(62px * var(--gem-index-content-scale)), max-content) minmax(0, 1fr) calc(27px * var(--gem-index-content-scale)); gap: calc(6px * var(--gem-index-content-scale)); }
  .tc-kind-chip { max-width: 74px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .gem-index-row { transition: none; }
  .gem-index-row.is-arriving,
  .gem-index-pane__content.is-arriving,
  .gem-index-sheet__content.is-arriving { animation: none; }
  .gem-index-sheet,
  .gem-index-sheet-scrim { transition: none; }
  .gem-index-row:hover,
  .gem-index-row.is-selected { transform: none; }
}

/* The keystone/notable card IS the link to its live tree position (mirrors
   global search). Hover lifts the popup with a gem-color ring so the card
   reads as clickable without extra chrome. */
.passive-detail-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.passive-detail-link .newItemPopup { transition: transform 120ms ease, box-shadow 120ms ease; }
.passive-detail-link:hover .newItemPopup,
.passive-detail-link:focus-visible .newItemPopup {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-ui) 55%, transparent),
              0 10px 26px rgba(0, 0, 0, 0.35);
}
.passive-detail-link:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .passive-detail-link .newItemPopup { transition: none; }
  .passive-detail-link:hover .newItemPopup { transform: none; }
}